/* ══════════════════════════════════════════════════════════════════════════
   Mabani UI — the command-center design, as plain CSS.

   This app ships no Tailwind build, so a utility class that Filament's own
   compiled stylesheet does not happen to contain simply does nothing. Every
   component of the redesign is therefore written here under an `mb-` prefix,
   and the Blade views use these classes only.

   Colour carries meaning, never decoration: red = act now, amber = watch,
   green = fine, blue = information, teal = the product. The gradient on a
   card is a whisper of that meaning (13% at most), not a paint job.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --mb-bg: #EDF1F4; --mb-surface: #FFFFFF; --mb-surface-2: #F5F8FA;
    --mb-line: #DCE3E9; --mb-line-2: #E9EEF2;
    --mb-ink: #0F1E2E; --mb-ink-2: #4F5D6B; --mb-ink-3: #7D8995;
    --mb-navy: #13294B; --mb-navy-2: #1C3D68; --mb-on-navy: #FFFFFF; --mb-on-navy-2: #B9C8DB;
    --mb-teal: #0E8A7D; --mb-teal-ink: #0A6B61; --mb-teal-soft: #E3F3F0;
    --mb-amber: #E9A92B; --mb-amber-ink: #8A5A00; --mb-amber-soft: #FCF1DA;
    --mb-red: #CF4034; --mb-red-ink: #A92E23; --mb-red-soft: #FBE7E4;
    --mb-green: #1E9A68; --mb-green-ink: #137450; --mb-green-soft: #E2F4EB;
    --mb-blue: #2F6FD6; --mb-blue-ink: #1F55AE; --mb-blue-soft: #E6EEFB;
    --mb-shadow: 0 1px 2px rgba(15,30,46,.05), 0 10px 26px -16px rgba(15,30,46,.22);
    --mb-shadow-lift: 0 2px 6px rgba(15,30,46,.08), 0 20px 42px -20px rgba(15,30,46,.34);
    --mb-r: 16px;
    --mb-data: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', sans-serif;
}
.dark {
    --mb-bg: #0B141D; --mb-surface: #111E2A; --mb-surface-2: #0E1A25;
    --mb-line: #223243; --mb-line-2: #1A2836;
    --mb-ink: #E8EEF4; --mb-ink-2: #A3B1BF; --mb-ink-3: #72808E;
    --mb-navy: #0E1F38; --mb-navy-2: #173356; --mb-on-navy: #F2F6FA; --mb-on-navy-2: #9DB0C6;
    --mb-teal: #2BB5A5; --mb-teal-ink: #7FDCCF; --mb-teal-soft: #10302D;
    --mb-amber: #F0B545; --mb-amber-ink: #F4CB7A; --mb-amber-soft: #2E2413;
    --mb-red: #EE6457; --mb-red-ink: #F59A90; --mb-red-soft: #321714;
    --mb-green: #34C088; --mb-green-ink: #86DDB6; --mb-green-soft: #12301F;
    --mb-blue: #6A9CF2; --mb-blue-ink: #A7C3F7; --mb-blue-soft: #15233A;
    --mb-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -16px rgba(0,0,0,.6);
    --mb-shadow-lift: 0 2px 8px rgba(0,0,0,.4), 0 22px 46px -20px rgba(0,0,0,.7);
}

.mb-red   { --mb-tone: var(--mb-red);   --mb-tone-ink: var(--mb-red-ink);   --mb-tone-soft: var(--mb-red-soft); }
.mb-amber { --mb-tone: var(--mb-amber); --mb-tone-ink: var(--mb-amber-ink); --mb-tone-soft: var(--mb-amber-soft); }
.mb-green { --mb-tone: var(--mb-green); --mb-tone-ink: var(--mb-green-ink); --mb-tone-soft: var(--mb-green-soft); }
.mb-blue  { --mb-tone: var(--mb-blue);  --mb-tone-ink: var(--mb-blue-ink);  --mb-tone-soft: var(--mb-blue-soft); }
.mb-gray  { --mb-tone: var(--mb-ink-3); --mb-tone-ink: var(--mb-ink-2);   --mb-tone-soft: var(--mb-surface-2); }
.mb-teal  { --mb-tone: var(--mb-teal);  --mb-tone-ink: var(--mb-teal-ink);  --mb-tone-soft: var(--mb-teal-soft); }

.mb-num { font-family: var(--mb-data); font-variant-numeric: tabular-nums; }
.mb-i { width: 1.25rem; height: 1.25rem; flex: none; }
.mb-i-sm { width: 1rem; height: 1rem; flex: none; }

/* the command center owns the page: no default page heading above the band */
.fi-dashboard-page .fi-header { display: none; }
.mb-page { display: flex; flex-direction: column; gap: 1.6rem; color: var(--mb-ink); }

/* ── navy band ───────────────────────────────────────────────────────────── */
.mb-band {
    position: relative; overflow: hidden; border-radius: 20px;
    padding: 1.15rem 1.4rem 4.6rem;
    background: linear-gradient(135deg, var(--mb-navy) 0%, var(--mb-navy-2) 100%);
    color: var(--mb-on-navy);
}
/* a floor plan, faintly — the one flourish, drawn from the subject itself */
.mb-band::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08;
    background:
        linear-gradient(var(--mb-on-navy) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, var(--mb-on-navy) 1px, transparent 1px) 0 0 / 64px 64px;
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 60%);
            mask-image: linear-gradient(to left, #000 0%, transparent 60%);
}
.mb-band > * { position: relative; z-index: 1; }
.mb-band-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.mb-ask {
    flex: 1; min-width: 240px; display: flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px; padding: .45rem .5rem .45rem .75rem;
}
.mb-ask:focus-within { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); }
.mb-ask .mb-mg {
    width: 1.75rem; height: 1.75rem; border-radius: 8px; display: grid; place-items: center;
    background: var(--mb-teal); color: #fff; font-weight: 800; flex: none;
}
.mb-ask input {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mb-on-navy);
    font: inherit; font-size: .9rem; outline: none; box-shadow: none; padding: .25rem 0;
}
.mb-ask input::placeholder { color: var(--mb-on-navy-2); }
.mb-ask button {
    border: 0; border-radius: 9px; padding: .4rem .8rem; background: rgba(255,255,255,.16);
    color: var(--mb-on-navy); font-weight: 700; font-size: .8rem; cursor: pointer;
}
.mb-cta {
    display: inline-flex; align-items: center; gap: .45rem; height: 2.6rem; padding: 0 1rem;
    border-radius: 11px; background: var(--mb-amber); color: #2A1A00; font-weight: 800; font-size: .9rem;
    box-shadow: 0 10px 22px -10px rgba(233,169,43,.8); white-space: nowrap;
}
.mb-cta:hover { filter: brightness(1.05); }
.mb-hello { margin-top: 1.25rem; }
.mb-hello h1 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 800; text-wrap: balance; }
.mb-hello p { margin: .25rem 0 0; color: var(--mb-on-navy-2); font-size: .9rem; }

/* ── KPI cards riding on the band ───────────────────────────────────────── */
.mb-kpis {
    position: relative; z-index: 2; margin: -3.9rem 1rem 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem;
}
.mb-kpi {
    display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1rem .9rem;
    border-radius: var(--mb-r); box-shadow: var(--mb-shadow);
    border: 1px solid color-mix(in srgb, var(--mb-tone) 22%, var(--mb-line));
    background: linear-gradient(155deg, var(--mb-surface) 42%, color-mix(in srgb, var(--mb-tone) 13%, var(--mb-surface)) 100%);
    color: var(--mb-ink); transition: transform .14s, box-shadow .14s;
}
.mb-kpi:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-lift); }
.mb-kpi-h { display: flex; align-items: center; justify-content: space-between; color: var(--mb-ink-2); font-weight: 600; font-size: .82rem; }
.mb-kpi-ic {
    width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center;
    background: var(--mb-tone); color: #fff; box-shadow: 0 8px 16px -8px var(--mb-tone);
}
.mb-kpi-v { font-family: var(--mb-data); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -.5px; }
.mb-kpi-v small { font-size: .8rem; color: var(--mb-ink-3); font-weight: 600; margin-inline-start: .25rem; }
.mb-kpi-f { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--mb-ink-3); }
.mb-kpi-f b { color: var(--mb-tone-ink); font-weight: 700; }
.mb-spark { width: 78px; height: 26px; flex: none; }

/* ── sections ───────────────────────────────────────────────────────────── */
.mb-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .75rem; }
.mb-sec-h h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--mb-ink); }
.mb-sec-h span { font-size: .78rem; color: var(--mb-ink-3); }
.mb-sec-h a { font-size: .82rem; font-weight: 700; color: var(--mb-teal-ink); }
.mb-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 1180px) { .mb-cols { grid-template-columns: 1fr; } }

.mb-panel { background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: var(--mb-r); box-shadow: var(--mb-shadow); overflow: hidden; }
.mb-panel-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--mb-line-2); }
.mb-panel-h h3 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--mb-ink); }
.mb-panel-h span, .mb-panel-h a { font-size: .78rem; color: var(--mb-ink-3); }
.mb-panel-h a { color: var(--mb-teal-ink); font-weight: 700; }

/* attention rows */
.mb-att { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--mb-line-2); color: var(--mb-ink); }
.mb-att:last-child { border-bottom: 0; }
.mb-att-ic { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: var(--mb-tone-soft); color: var(--mb-tone-ink); flex: none; }
.mb-att-tx { flex: 1; min-width: 0; }
.mb-att-tx b { display: block; font-size: .9rem; font-weight: 700; }
.mb-att-tx span { display: block; font-size: .75rem; color: var(--mb-ink-3); margin-top: 1px; }
.mb-go {
    border: 1px solid var(--mb-line); background: var(--mb-surface-2); color: var(--mb-ink);
    font-weight: 700; font-size: .78rem; border-radius: 9px; padding: .4rem .75rem; white-space: nowrap;
}
.mb-go:hover { border-color: var(--mb-teal); color: var(--mb-teal-ink); }
.mb-empty { padding: 1.4rem 1rem; display: flex; gap: .8rem; align-items: center; color: var(--mb-ink-2); font-size: .88rem; }

.mb-chip {
    font-family: var(--mb-data); font-size: .7rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px;
    background: var(--mb-tone-soft); color: var(--mb-tone-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem;
}

/* quick actions */
.mb-qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
@media (max-width: 560px) { .mb-qa { grid-template-columns: repeat(2, 1fr); } }
.mb-q {
    display: flex; flex-direction: column; gap: .55rem; padding: .85rem; border-radius: 14px; color: var(--mb-ink);
    border: 1px solid var(--mb-line); box-shadow: var(--mb-shadow);
    background: linear-gradient(160deg, var(--mb-surface) 50%, color-mix(in srgb, var(--mb-tone) 9%, var(--mb-surface)));
    transition: transform .14s, box-shadow .14s, border-color .14s;
}
.mb-q:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-lift); border-color: color-mix(in srgb, var(--mb-tone) 45%, var(--mb-line)); }
.mb-q-ic { width: 2.35rem; height: 2.35rem; border-radius: 11px; display: grid; place-items: center; background: var(--mb-tone-soft); color: var(--mb-tone-ink); }
.mb-q b { font-size: .88rem; font-weight: 700; }
.mb-q span { font-size: .72rem; color: var(--mb-ink-3); margin-top: -.35rem; }

/* building cards */
.mb-bld { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .9rem; }
.mb-b { background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: var(--mb-r); box-shadow: var(--mb-shadow); overflow: hidden; display: flex; flex-direction: column; color: var(--mb-ink); }
.mb-b-top { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: linear-gradient(160deg, var(--mb-surface) 30%, color-mix(in srgb, var(--mb-tone) 12%, var(--mb-surface))); }
.mb-b-top .mb-kpi-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
.mb-b-top b { display: block; font-size: .95rem; font-weight: 800; }
.mb-b-top small { font-size: .74rem; color: var(--mb-ink-3); }
.mb-b-top .mb-chip { margin-inline-start: auto; }
.mb-b-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: .75rem 1rem .25rem; }
.mb-b-stats div { display: flex; flex-direction: column; }
.mb-b-stats small { font-size: .7rem; color: var(--mb-ink-3); }
.mb-b-stats b { font-family: var(--mb-data); font-size: 1.05rem; }
.mb-links { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem .9rem; }
.mb-links a {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--mb-ink-2);
    background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 8px; padding: .3rem .55rem;
}
.mb-links a b { font-family: var(--mb-data); color: var(--mb-ink); }
.mb-links a:hover { border-color: var(--mb-teal); color: var(--mb-teal-ink); }
.mb-links a.mb-hot b { color: var(--mb-red-ink); }

.mb-analytics-h { margin: .4rem 0 -.6rem; }

/* ── work order: header, stages, related records ────────────────────────── */
.mb-wo {
    padding: 1.1rem 1.25rem; border-radius: var(--mb-r); box-shadow: var(--mb-shadow);
    border: 1px solid color-mix(in srgb, var(--mb-tone) 25%, var(--mb-line));
    background: linear-gradient(155deg, var(--mb-surface) 45%, color-mix(in srgb, var(--mb-tone) 13%, var(--mb-surface)));
    display: flex; flex-direction: column; gap: 1rem; color: var(--mb-ink);
}
.mb-wo-t { display: flex; align-items: flex-start; gap: .9rem; flex-wrap: wrap; }
.mb-ref { font-family: var(--mb-data); font-size: .75rem; font-weight: 700; color: var(--mb-ink-3); border: 1px solid var(--mb-line); border-radius: 7px; padding: .1rem .5rem; background: var(--mb-surface); }
.mb-wo-t h2 { margin: .35rem 0 0; font-size: 1.35rem; font-weight: 800; text-wrap: balance; }
.mb-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.mb-next { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.mb-next small { font-size: .72rem; color: var(--mb-ink-3); }
.mb-next a, .mb-next button {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.2rem; border: 0; border-radius: 12px;
    background: var(--mb-teal); color: #fff; font-weight: 800; font-size: .92rem; box-shadow: 0 12px 24px -12px var(--mb-teal); cursor: pointer;
}
.mb-next .mb-done { background: var(--mb-green-soft); color: var(--mb-green-ink); box-shadow: none; cursor: default; }

.mb-steps { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)); overflow-x: auto; margin: 0; padding: 0; list-style: none; }
.mb-st { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding-top: 2px; }
.mb-st::before { content: ""; position: absolute; top: 15px; inset-inline-start: 50%; width: 100%; height: 3px; background: var(--mb-line); }
.mb-st:last-child::before { display: none; }
.mb-st.is-done::before { background: var(--mb-green); }
.mb-st-o {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
    background: var(--mb-surface); border: 2px solid var(--mb-line); color: var(--mb-ink-3); font: 700 12px var(--mb-data);
}
.mb-st.is-done .mb-st-o { background: var(--mb-green); border-color: var(--mb-green); color: #fff; }
.mb-st.is-now .mb-st-o { background: var(--mb-amber); border-color: var(--mb-amber); color: #2A1A00; box-shadow: 0 0 0 5px color-mix(in srgb, var(--mb-amber) 25%, transparent); }
.mb-st.is-skip .mb-st-o { border-style: dashed; }
.mb-st b { font-size: .78rem; font-weight: 700; }
.mb-st span { font-size: .68rem; color: var(--mb-ink-3); font-family: var(--mb-data); }
.mb-st.is-now b { color: var(--mb-amber-ink); }

.mb-ctx { display: flex; flex-wrap: wrap; gap: .45rem; }
.mb-ctx a, .mb-ctx span {
    display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .65rem; border-radius: 10px;
    border: 1px solid var(--mb-line); background: var(--mb-surface); font-size: .78rem; color: var(--mb-ink-2);
}
.mb-ctx b { color: var(--mb-ink); font-weight: 700; }
.mb-ctx a:hover { border-color: var(--mb-teal); }
.mb-ctx .mb-warn { border-color: color-mix(in srgb, var(--mb-red) 40%, var(--mb-line)); background: var(--mb-red-soft); color: var(--mb-red-ink); }
.mb-ctx .mb-warn b { color: var(--mb-red-ink); }

.mb-kv { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .mb-kv { grid-template-columns: 1fr; } }
.mb-kv div { padding: .75rem 1rem; border-bottom: 1px solid var(--mb-line-2); display: flex; flex-direction: column; gap: 2px; }
.mb-kv small { font-size: .72rem; color: var(--mb-ink-3); }
.mb-kv b { font-size: .88rem; font-weight: 600; color: var(--mb-ink); }

.mb-cost { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.mb-meter { height: 10px; border-radius: 6px; background: var(--mb-line-2); overflow: hidden; display: flex; }
.mb-meter i { display: block; height: 100%; }
.mb-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--mb-ink-2); }
.mb-row b { font-family: var(--mb-data); color: var(--mb-ink); }

.mb-tl { padding: .3rem 1rem .9rem; }
.mb-tl-i { display: grid; grid-template-columns: 30px 1fr; gap: .6rem; padding-top: .75rem; position: relative; color: var(--mb-ink); }
.mb-tl-i::before { content: ""; position: absolute; inset-inline-start: 14px; top: 2.35rem; bottom: -.75rem; width: 2px; background: var(--mb-line-2); }
.mb-tl-i:last-child::before { display: none; }
.mb-tl-d { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--mb-tone-soft); color: var(--mb-tone-ink); }
.mb-tl-i b { font-size: .82rem; font-weight: 700; display: block; }
.mb-tl-i span { font-size: .72rem; color: var(--mb-ink-3); }

/* ── reports hub ────────────────────────────────────────────────────────── */
.mb-reports { display: flex; flex-direction: column; gap: 1.6rem; }
.mb-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.mb-report {
    display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: 14px; color: var(--mb-ink);
    border: 1px solid var(--mb-line); box-shadow: var(--mb-shadow);
    background: linear-gradient(160deg, var(--mb-surface) 55%, color-mix(in srgb, var(--mb-teal) 8%, var(--mb-surface)));
    transition: transform .14s, box-shadow .14s, border-color .14s; font-weight: 700; font-size: .88rem;
}
.mb-report:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-lift); border-color: var(--mb-teal); }

/* ── the sidebar, quieter and clearer ───────────────────────────────────────
   One navy runs down the page: the band at the top and the screen you are on.
   Teal is left to mean «do something» — buttons, links, the primary action. */
.fi-sidebar, .fi-sidebar-nav {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mb-navy) 8%, transparent) 0%,
        color-mix(in srgb, var(--mb-navy) 3%, transparent) 100%) !important;
}
.fi-sidebar { border-inline-end: 1px solid color-mix(in srgb, var(--mb-navy) 12%, transparent); }
.fi-sidebar-item-button:hover { background: color-mix(in srgb, var(--mb-navy) 9%, transparent) !important; }
.fi-sidebar-item-active > a,
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current="page"],
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: linear-gradient(135deg, var(--mb-navy) 0%, var(--mb-navy-2) 100%) !important;
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--mb-navy) 70%, transparent) !important;
}
/* On the dark canvas the same navy would sink into it — lift it toward the blue. */
.dark .fi-sidebar-item-active > a,
.dark .fi-sidebar-item-button.fi-active,
.dark .fi-sidebar-item-button[aria-current="page"],
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.dark .fi-sidebar-item-active > .fi-sidebar-item-button {
    background: linear-gradient(135deg, var(--mb-navy-2) 0%, color-mix(in srgb, var(--mb-navy-2) 55%, var(--mb-blue)) 100%) !important;
    box-shadow: none !important;
}
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-icon { color: var(--mb-on-navy) !important; }
.fi-sidebar-group-label { letter-spacing: .03em; }

@media (prefers-reduced-motion: reduce) {
    .mb-kpi, .mb-q, .mb-report { transition: none; }
    .mb-kpi:hover, .mb-q:hover, .mb-report:hover { transform: none; }
}

/* ── Filament's own stat cards, brought into the same family ─────────────
   The old skin painted every stat card a saturated rainbow gradient with white
   text, cycling colours by position — so the colour said nothing about the
   number. Here they share the command-center card: a surface with a whisper of
   teal, dark ink, and the description keeping Filament's own semantic colour
   (success / danger / warning), which is the only colour that means something. */
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat:nth-child(n) {
    color: var(--mb-ink);
    background-image: linear-gradient(155deg, var(--mb-surface) 45%, color-mix(in srgb, var(--mb-teal) 10%, var(--mb-surface)) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--mb-teal) 18%, var(--mb-line)) !important;
    box-shadow: var(--mb-shadow);
    border-radius: var(--mb-r);
    filter: none;
}
.fi-wi-stats-overview-stat::after { display: none; }
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-lift); filter: none; }
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label { color: var(--mb-ink-2) !important; opacity: 1; }
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value { color: var(--mb-ink) !important; font-family: var(--mb-data); font-weight: 700; }
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description-icon,
.fi-wi-stats-overview-stat .fi-icon { color: inherit !important; opacity: 1; }
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description { color: var(--mb-ink-3); }
.fi-wi-stats-overview-stat .fi-color-success { color: var(--mb-green-ink) !important; }
.fi-wi-stats-overview-stat .fi-color-danger  { color: var(--mb-red-ink) !important; }
.fi-wi-stats-overview-stat .fi-color-warning { color: var(--mb-amber-ink) !important; }
.fi-wi-stats-overview-stat .fi-color-info,
.fi-wi-stats-overview-stat .fi-color-primary { color: var(--mb-teal-ink) !important; }

/* the band sits a little clear of the cards riding on it */
.mb-band { padding-bottom: 5.2rem; }

/* ── the calendar (FullCalendar), in the same family ─────────────────────
   Events were solid saturated blocks with an emoji in front of each title.
   Now each is a soft tint of its type with a stripe on its leading edge —
   still told apart at a glance, no longer shouting all at once.          */
.mb-cal-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .9rem; font-size: .78rem; color: var(--mb-ink-2); }
.mb-cal-legend span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.mb-cal-legend i { width: .8rem; height: .8rem; border-radius: 4px; background: var(--mb-tone-soft); border-inline-start: 3px solid var(--mb-tone); }
.mb-cal-legend em { font-style: normal; color: var(--mb-ink-3); }

.mb-cal { --fc-border-color: var(--mb-line-2); --fc-page-bg-color: var(--mb-surface); --fc-today-bg-color: var(--mb-teal-soft); --fc-neutral-bg-color: var(--mb-surface-2); font-family: inherit; }
.mb-cal .fc-toolbar-title { font-size: 1.25rem !important; font-weight: 800; color: var(--mb-ink); }
.mb-cal .fc-col-header-cell-cushion { color: var(--mb-ink-2); font-weight: 700; font-size: .82rem; padding: .5rem 0; }
.mb-cal .fc-daygrid-day-number { color: var(--mb-ink-2); font-family: var(--mb-data); font-weight: 600; font-size: .82rem; }
.mb-cal .fc-day-other .fc-daygrid-day-number { color: var(--mb-ink-3); opacity: .6; }
.mb-cal .fc-day-today .fc-daygrid-day-number { color: var(--mb-teal-ink); font-weight: 800; }
.mb-cal .fc-scrollgrid { border-radius: 12px; overflow: hidden; }

.mb-cal .fc-button-primary {
    background: var(--mb-surface) !important; color: var(--mb-ink-2) !important;
    border: 1px solid var(--mb-line) !important; box-shadow: none !important;
    font-weight: 700; font-size: .82rem; border-radius: 9px !important; text-transform: none;
}
.mb-cal .fc-button-primary:hover { border-color: var(--mb-teal) !important; color: var(--mb-teal-ink) !important; }
.mb-cal .fc-button-primary.fc-button-active,
.mb-cal .fc-button-primary:not(:disabled):active { background: var(--mb-navy) !important; color: #fff !important; border-color: var(--mb-navy) !important; }
.mb-cal .fc-button-primary:disabled { opacity: .45; }
.mb-cal .fc-button-group { gap: .3rem; }

.mb-cal .fc-event.mb-ev {
    background: var(--mb-ev-soft) !important; border: 0 !important; border-inline-start: 3px solid var(--mb-ev) !important;
    border-radius: 6px; padding: 1px 6px; margin-bottom: 2px; box-shadow: none;
}
.mb-cal .fc-event.mb-ev .fc-event-main, .mb-cal .fc-event.mb-ev .fc-event-title { color: var(--mb-ev-ink) !important; font-weight: 600; font-size: .74rem; }
.mb-cal .fc-event.mb-ev:hover { filter: brightness(.97); }
.mb-ev-issue     { --mb-ev: var(--mb-red);   --mb-ev-soft: var(--mb-red-soft);   --mb-ev-ink: var(--mb-red-ink); }
.mb-ev-wo        { --mb-ev: var(--mb-blue);  --mb-ev-soft: var(--mb-blue-soft);  --mb-ev-ink: var(--mb-blue-ink); }
.mb-ev-pm        { --mb-ev: var(--mb-green); --mb-ev-soft: var(--mb-green-soft); --mb-ev-ink: var(--mb-green-ink); }
.mb-ev-fleet     { --mb-ev: var(--mb-teal);  --mb-ev-soft: var(--mb-teal-soft);  --mb-ev-ink: var(--mb-teal-ink); }
.mb-ev-violation { --mb-ev: var(--mb-amber); --mb-ev-soft: var(--mb-amber-soft); --mb-ev-ink: var(--mb-amber-ink); }
.mb-ev-done      { --mb-ev: var(--mb-ink-3); --mb-ev-soft: var(--mb-surface-2);  --mb-ev-ink: var(--mb-ink-3); }
.mb-cal .fc-daygrid-more-link { color: var(--mb-teal-ink); font-weight: 700; font-size: .74rem; }
.mb-cal .fc-list-event-dot { border-color: var(--mb-teal) !important; }

/* ── record hubs (asset · issue · building · vendor · contract · rfq) ─────────────────────────────── */
.mb-hub-eyebrow { font-family: var(--mb-data); font-size: .74rem; font-weight: 700; color: var(--mb-ink-3); letter-spacing: .02em; }
.mb-hub-sub { margin: .3rem 0 0; font-size: .85rem; color: var(--mb-ink-2); }
.mb-hub-done {
    display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 12px;
    background: var(--mb-green-soft); color: var(--mb-green-ink); font-weight: 800; font-size: .88rem;
}
.mb-hub-hint { background: var(--mb-blue-soft); color: var(--mb-blue-ink); font-weight: 700; }
.mb-hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.mb-hub-stats > div {
    display: flex; flex-direction: column; gap: 1px; padding: .65rem .8rem; border-radius: 12px;
    background: var(--mb-surface); border: 1px solid var(--mb-line);
}
.mb-hub-stats small { font-size: .72rem; color: var(--mb-ink-3); }
.mb-hub-stats b { font-family: var(--mb-data); font-size: 1.15rem; color: var(--mb-ink); }
.mb-hub-stats span { font-size: .7rem; color: var(--mb-ink-3); }
.mb-hub-stats > div.mb-red, .mb-hub-stats > div.mb-amber { border-color: color-mix(in srgb, var(--mb-tone) 35%, var(--mb-line)); background: var(--mb-tone-soft); }
.mb-hub-stats > div.mb-red b, .mb-hub-stats > div.mb-amber b,
.mb-hub-stats > div.mb-red span, .mb-hub-stats > div.mb-amber span { color: var(--mb-tone-ink); }

/* ── Maged in the top bar ───────────────────────────────────────────────── */
.mb-topask {
    display: flex; align-items: center; gap: .5rem; width: min(420px, 38vw);
    background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 11px;
    padding: .3rem .45rem .3rem .6rem; margin-inline-end: .5rem; transition: border-color .15s, box-shadow .15s;
}
.mb-topask:focus-within { border-color: var(--mb-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-teal) 18%, transparent); background: var(--mb-surface); }
.mb-topask-ic { width: 1.5rem; height: 1.5rem; border-radius: 7px; display: grid; place-items: center; background: var(--mb-teal); color: #fff; font-weight: 800; font-size: .78rem; flex: none; }
.mb-topask input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; box-shadow: none; font: inherit; font-size: .85rem; color: var(--mb-ink); padding: .2rem 0; }
.mb-topask input::placeholder { color: var(--mb-ink-3); }
.mb-topask kbd { font-family: var(--mb-data); font-size: .65rem; color: var(--mb-ink-3); border: 1px solid var(--mb-line); border-radius: 5px; padding: 0 .35rem; white-space: nowrap; }
@media (max-width: 900px) { .mb-topask { display: none; } }

/* ══ Every screen: one family of surfaces, tables, forms and controls ═══════
   Filament's defaults are sound but anonymous. These rules only reshape —
   radius, weight, spacing, tint — and never change what anything does.     */
.fi-body { background-color: var(--mb-bg); }
.fi-topbar > nav { box-shadow: 0 1px 0 var(--mb-line); }
.fi-sidebar { border-inline-start: 1px solid var(--mb-line); }

.fi-header-heading { font-weight: 800; letter-spacing: -.01em; color: var(--mb-ink); }
.fi-breadcrumbs { font-size: .78rem; }

/* surfaces: sections, infolists, tables, widgets */
.fi-section, .fi-ta-ctn, .fi-wi-chart, .fi-in-section {
    border-radius: var(--mb-r) !important;
    box-shadow: var(--mb-shadow) !important;
    --tw-ring-color: var(--mb-line);
}
.fi-section-header-heading { font-weight: 800; }

/* tables */
.fi-ta-header-cell { background: var(--mb-surface-2); }
.fi-ta-header-cell-label, .fi-ta-header-cell button span { font-weight: 700; color: var(--mb-ink-2); font-size: .8rem; }
.fi-ta-row { transition: background-color .12s; }
.fi-ta-row:hover { background: color-mix(in srgb, var(--mb-teal) 5%, var(--mb-surface)) !important; }
.fi-ta-cell { font-size: .88rem; }
.fi-ta-header-toolbar { background: var(--mb-surface); }
.fi-ta-empty-state-heading { font-weight: 800; }
.fi-ta-empty-state-icon-ctn { background: var(--mb-teal-soft) !important; }
.fi-ta-empty-state-icon-ctn .fi-icon, .fi-ta-empty-state-icon-ctn svg { color: var(--mb-teal-ink) !important; }

/* forms */
.fi-input-wrp { border-radius: 10px !important; }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-teal) 16%, transparent); }
.fi-fo-field-wrp-label span { font-weight: 600; }

/* buttons and badges */
.fi-btn { border-radius: 10px !important; font-weight: 700; }
.fi-badge { border-radius: 999px !important; font-weight: 700; padding-inline: .55rem; }

/* tabs (relation managers on record pages) */
.fi-tabs { border-radius: 12px !important; box-shadow: var(--mb-shadow); }
.fi-tabs-item-active { background: var(--mb-teal-soft) !important; }
.fi-tabs-item-active .fi-tabs-item-label, .fi-tabs-item-active .fi-icon { color: var(--mb-teal-ink) !important; }

/* modals and dropdowns */
.fi-modal-window { border-radius: 18px !important; }
.fi-dropdown-panel { border-radius: 12px !important; box-shadow: var(--mb-shadow-lift) !important; }

/* ══ Dark mode ═══════════════════════════════════════════════════════════
   Filament paints dark screens with its neutral grey scale, which sat as
   near-black beside the navy-tinted surfaces of this design. Re-tinting that
   scale once makes every Filament screen — tables, forms, modals, the
   sidebar — share the same ground as the hand-built pages.              */
.dark {
    --gray-50: 245, 248, 250;  --gray-100: 234, 239, 243; --gray-200: 214, 223, 231;
    --gray-300: 184, 196, 208; --gray-400: 147, 161, 175; --gray-500: 114, 128, 142;
    --gray-600: 82, 97, 112;   --gray-700: 44, 61, 79;    --gray-800: 26, 40, 54;
    --gray-900: 17, 30, 42;    --gray-950: 11, 20, 29;
}
.dark .fi-body { background-color: var(--mb-bg); }
.dark .fi-topbar > nav { background-color: var(--mb-surface); }
.dark .fi-sidebar, .dark .fi-sidebar-nav { background: var(--mb-surface-2) !important; }
.dark .fi-sidebar { border-color: var(--mb-line); box-shadow: none; }
.dark .fi-sidebar-header { background: var(--mb-surface-2) !important; }

/* badges: the light theme's pastel fill, as a tint that reads on a dark ground */
/* (the old skin forces .bg-custom-50 with !important, so this must too; a
   badge only carries --c-50/400/600, never 300, as comma lists — hence rgba) */
.dark .fi-color-custom.fi-badge {
    background-color: rgba(var(--c-400), .14) !important;
    color: rgb(var(--c-400)) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--c-400), .3) !important;
}
/* table header and zebra rows, on the dark ground */
.dark .fi-ta-header-cell { background: var(--mb-surface-2); color: var(--mb-ink-2); }
.dark .fi-ta-row:nth-child(even) { background: rgba(255, 255, 255, .015); }
.dark .fi-section, .dark .fi-ta-ctn, .dark .fi-wi-chart, .dark .fi-in-section { --tw-ring-color: var(--mb-line); }
.dark .fi-header-actions .fi-btn.fi-color-primary { box-shadow: none !important; }

/* ── the task board ─────────────────────────────────────────────────────────
   What the board shares with the rest of the app: the bar above it, the
   status dot of each list, the reference chip and the record link. The board
   and the card themselves are drawn further down («the Trello way»).       */
.mb-kb-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
    margin-bottom: .85rem;
}
.mb-kb-bar-facts { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: var(--mb-ink-2); }
.mb-kb-note { font-size: .78rem; color: var(--mb-ink-3); }
.mb-kb-scope { display: inline-flex; background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 10px; padding: .18rem; }
.mb-kb-scope button {
    font: inherit; font-size: .8rem; font-weight: 700; color: var(--mb-ink-2);
    background: none; border: 0; border-radius: 8px; padding: .32rem .8rem; cursor: pointer;
}
.mb-kb-scope button.is-on { background: var(--mb-surface); color: var(--mb-ink); box-shadow: var(--mb-shadow-sm, 0 1px 2px rgba(15,30,46,.12)); }
.mb-kb-scope button:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }
.mb-kb-dot { width: .55rem; height: .55rem; border-radius: 99px; background: var(--mb-kb-tone, var(--mb-ink-3)); }
.mb-kb-todo { --mb-kb-tone: var(--mb-ink-3); }
.mb-kb-in_progress { --mb-kb-tone: var(--mb-amber); }
.mb-kb-review { --mb-kb-tone: var(--mb-blue); }
.mb-kb-done { --mb-kb-tone: var(--mb-green); }
.mb-kb-ghost { opacity: .4; }
.mb-kb-ref { font-family: var(--mb-data); font-size: .68rem; color: var(--mb-ink-3); background: var(--mb-surface-2); border-radius: 6px; padding: .05rem .35rem; }
.mb-kb-link {
    justify-self: start; font-size: .72rem; font-weight: 600; color: var(--mb-ink-2);
    background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 8px; padding: .15rem .45rem;
}
a.mb-kb-link:hover { color: var(--mb-teal-ink); border-color: var(--mb-teal); }

/* custom pages built with Tailwind pairs like `bg-white dark:bg-gray-900`: the
   dark half is often absent from Filament's compiled stylesheet, so the panel
   stayed white on a dark page. The light half is what gets repaired here.   */
.dark .bg-white:not([class*="dark:bg-"]),
.dark .bg-white[class*="dark:bg-gray-9"],
.dark .bg-white[class*="dark:bg-gray-8"] { background-color: var(--mb-surface) !important; }
.dark .bg-gray-50[class*="dark:bg-gray-8"],
.dark .bg-gray-50[class*="dark:bg-gray-9"] { background-color: var(--mb-surface-2) !important; }
.dark .bg-primary-50[class*="dark:bg-primary-9"] { background-color: var(--mb-teal-soft) !important; color: var(--mb-teal-ink) !important; }
.dark .text-gray-600:not([class*="dark:text-"]) { color: var(--mb-ink-2); }

/* ══ Tables, everywhere ═══════════════════════════════════════════════════
   A related record named in a cell is a link (TablePolish); it reads as one.
   Short values never break mid-word; titles wrap but keep a readable width. */
.mb-cell-link .fi-ta-text-item-label { color: var(--mb-teal-ink); font-weight: 600; }
.mb-cell-link:hover .fi-ta-text-item-label { text-decoration: underline; text-underline-offset: 3px; }
.fi-ta-text-item-label { white-space: nowrap; }
.mb-cell-prose .fi-ta-text-item-label { white-space: normal; display: block; min-width: 6.5rem; max-width: 18rem; }
.fi-ta-cell:has(.fi-ta-text-item-label) { vertical-align: middle; }
.fi-ta-actions .fi-icon-btn { border-radius: 8px; }
.fi-ta-record-checkbox, .fi-ta-page-checkbox { border-radius: 5px; }
/* the «⋮» row menu stays out of the way until the row is pointed at */
.fi-ta-row .fi-ta-actions .fi-dropdown-trigger .fi-icon-btn { opacity: .55; }
.fi-ta-row:hover .fi-ta-actions .fi-dropdown-trigger .fi-icon-btn { opacity: 1; }
/* denser rows: Filament's cells carry 1rem of air a side, which pushed ten
   columns past the page; this keeps the rhythm and gives the width back */
.fi-ta-text.px-3, .fi-ta-icon.px-3, .fi-ta-image.px-3, .fi-ta-col-wrp .px-3 { padding-inline: .6rem !important; }
.fi-ta-text.py-4 { padding-block: .7rem !important; }
.fi-ta-header-cell { padding-inline: .6rem !important; }
.fi-ta-actions { padding-inline: .4rem !important; }

/* phones and tablets: the menu slides over the page, so it needs a solid ground
   (the desktop tint is translucent and let the table show through) */
@media (max-width: 1023px) {
    .fi-sidebar, .fi-sidebar-nav, .fi-sidebar-header { background: var(--mb-surface) !important; }
    .fi-sidebar { box-shadow: var(--mb-shadow-lift); }
}

/* column headings read as words, not shouted: the old skin set them in capitals,
   which only ever reached the English labels */
.fi-ta-header-cell, .fi-ta-header-cell-label { text-transform: none !important; letter-spacing: 0 !important; }

/* ══ Small tables drawn inside a record page ═══════════════════════════════
   Depreciation, a vehicle's operating schedule, an issue's timeline, an
   asset's earlier work: once inline-styled grey grids that sat in a corner and
   stayed white in dark mode. Now one family, full width, on the tokens.     */
.mb-dtable-wrap { overflow-x: auto; border: 1px solid var(--mb-line); border-radius: 12px; background: var(--mb-surface); }
.mb-dtable { width: 100%; border-collapse: collapse; font-size: .86rem; color: var(--mb-ink); }
.mb-dtable th { text-align: start; font-weight: 700; font-size: .78rem; color: var(--mb-ink-2); background: var(--mb-surface-2);
    padding: .6rem .85rem; border-bottom: 1px solid var(--mb-line); white-space: nowrap; }
.mb-dtable td { padding: .6rem .85rem; border-bottom: 1px solid var(--mb-line-2); vertical-align: middle; }
.mb-dtable tbody tr:last-child td, .mb-dtable tbody tr:last-child th { border-bottom: 0; }
.mb-dtable tbody tr:hover td { background: color-mix(in srgb, var(--mb-teal) 4%, transparent); }
.mb-dtable .mb-num-col { text-align: end; font-family: var(--mb-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-dtable-sub { display: inline-block; font-size: .74rem; color: var(--mb-ink-3); margin-inline-start: .4rem; }
.mb-dtable .mb-chip { margin-inline-start: .4rem; }
.mb-dtable-kv tbody th { width: 40%; background: transparent; border-bottom: 1px solid var(--mb-line-2); color: var(--mb-ink-2); font-size: .84rem; }
.mb-dtable tr.is-past td { color: var(--mb-ink-3); }
.mb-dtable tr.is-past td b { color: var(--mb-ink-2); font-weight: 600; }
.mb-dtable tr.is-now td { background: var(--mb-teal-soft); }
.mb-dtable tr.is-now td:first-child { box-shadow: inset -3px 0 0 var(--mb-teal); }
[dir="ltr"] .mb-dtable tr.is-now td:first-child { box-shadow: inset 3px 0 0 var(--mb-teal); }
.mb-bar { display: inline-block; vertical-align: middle; width: calc(100% - 3.2rem); height: .5rem; border-radius: 99px; background: var(--mb-line-2); overflow: hidden; }
.mb-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mb-teal), color-mix(in srgb, var(--mb-teal) 60%, var(--mb-blue))); }
[dir="rtl"] .mb-bar > i { margin-inline-start: 0; }
.mb-dep { display: flex; flex-direction: column; gap: 1rem; }
.mb-dep .mb-hub-stats b em { font-style: normal; font-size: .72rem; color: var(--mb-ink-3); font-weight: 600; }
.mb-dep .mb-hub-stats > div.mb-teal { background: var(--mb-teal-soft); border-color: color-mix(in srgb, var(--mb-teal) 30%, var(--mb-line)); }

/* ══ Sign-in ═══════════════════════════════════════════════════════════════
   The navy of the home band on one side, the form on the other. Phones get
   the brand as a short band above the form.                                */
.mb-auth-aside {
    position: relative; overflow: hidden; color: var(--mb-on-navy);
    background: linear-gradient(160deg, var(--mb-navy) 0%, var(--mb-navy-2) 100%);
    display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 1.25rem 1.5rem;
}
.mb-auth-aside::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
    background-image:
        linear-gradient(var(--mb-on-navy) 1px, transparent 1px),
        linear-gradient(90deg, var(--mb-on-navy) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 70%, #000 0%, transparent 75%);
}
.mb-auth-aside > * { position: relative; z-index: 1; }
.mb-auth-brand { display: flex; align-items: center; gap: .75rem; }
.mb-auth-brand b { display: block; font-size: 1.15rem; font-weight: 800; }
.mb-auth-brand small { display: block; font-size: .8rem; color: var(--mb-on-navy-2); }
.mb-auth-mark {
    width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
    background: var(--mb-teal); color: #fff; font-weight: 800; font-size: 1.25rem;
}
.mb-auth-logo { height: 2.6rem; width: auto; border-radius: 10px; background: #fff; padding: .25rem; }
.mb-auth-copy h2 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.5; text-wrap: balance; }
.mb-auth-copy ul { display: none; }
.mb-auth-foot { display: none; }
.mb-auth-aside + .fi-simple-layout .fi-simple-main { margin-block: 1.5rem 2.5rem; }

@media (min-width: 1024px) {
    .mb-auth-aside {
        position: fixed; inset-block: 0; inset-inline-start: 0; width: 44%;
        padding: 2.5rem 3rem; justify-content: space-between;
    }
    .mb-auth-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); max-width: 26rem; }
    .mb-auth-copy ul { display: grid; gap: .9rem; margin: 1.75rem 0 0; padding: 0; list-style: none; max-width: 26rem; }
    .mb-auth-copy li { display: flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--mb-on-navy-2); }
    .mb-auth-copy li span {
        width: 2.2rem; height: 2.2rem; flex: none; border-radius: 10px; display: grid; place-items: center;
        background: color-mix(in srgb, var(--mb-on-navy) 10%, transparent); color: var(--mb-on-navy);
    }
    .mb-auth-foot { display: block; font-size: .78rem; color: var(--mb-on-navy-2); }
    .mb-auth-aside + .fi-simple-layout { margin-inline-start: 44%; }
    .mb-auth-aside + .fi-simple-layout .fi-simple-main {
        margin-block: 0; box-shadow: none !important; --tw-ring-color: transparent; background: transparent !important;
    }
    .mb-auth-aside + .fi-simple-layout .fi-simple-main-ctn { padding-inline: 2rem; }
}
.mb-auth-aside + .fi-simple-layout .fi-simple-header-heading { font-weight: 800; }
@media (max-width: 1023px) {
    .mb-auth-aside + .fi-simple-layout { min-height: auto; }
    .mb-auth-aside + .fi-simple-layout .fi-simple-main-ctn { align-items: flex-start; }
    .mb-auth-aside + .fi-simple-layout .fi-simple-main { margin-block: 0 2rem; }
}

/* ══ Phones: a table is a stack of cards ═══════════════════════════════════
   Each row a card; each value labelled with its column (data-label, set by
   mabani-ui.js); titles across the full width; the row menu in the corner.  */
@media (max-width: 639px) {
    .fi-ta-content { overflow-x: visible !important; }
    .fi-ta-table, .fi-ta-table tbody { display: block; width: 100%; }
    .fi-ta-table thead { display: none; }
    .fi-ta-table tbody { padding: .5rem; }
    .fi-ta-table tr.fi-ta-row {
        position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem;
        padding: .7rem .8rem; margin-bottom: .5rem; border: 1px solid var(--mb-line); border-radius: 14px;
        background: var(--mb-surface) !important;
    }
    .fi-ta-table tr.fi-ta-row > td { display: block; padding: 0 !important; min-width: 0; border: 0; }
    .fi-ta-table tr.fi-ta-row > td[data-label]::before {
        content: attr(data-label); display: block; font-size: .68rem; font-weight: 600; color: var(--mb-ink-3); margin-top: .35rem;
    }
    .fi-ta-table tr.fi-ta-row > td:has(.mb-cell-title) { grid-column: 1 / -1; order: -1; }
    .fi-ta-table tr.fi-ta-row > td:has(.mb-cell-title)::before { display: none; }
    .fi-ta-table tr.fi-ta-row > td:has(.mb-cell-title) .fi-ta-text-item-label { font-size: .95rem; font-weight: 700; max-width: none; }
    .fi-ta-table tr.fi-ta-row > td .fi-ta-text, .fi-ta-table tr.fi-ta-row > td .px-3 { padding: 0 !important; }
    .fi-ta-table tr.fi-ta-row > td .fi-ta-text-item-label { white-space: normal; }
    /* a long unbroken value (an email, a link, a code) wraps inside its card
       instead of running past the edge — Filament sizes cells to their content */
    .fi-ta-table tr.fi-ta-row > td .max-w-max,
    .fi-ta-table tr.fi-ta-row > td .fi-ta-text-item,
    .fi-ta-table tr.fi-ta-row > td .fi-ta-text-item-label { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
    .fi-ta-table tr.fi-ta-row > td.fi-ta-selection-cell { display: none; }
    .fi-ta-table tr.fi-ta-row > td.fi-ta-actions-cell,
    .fi-ta-table tr.fi-ta-row > td:has(> .fi-ta-actions) { position: absolute; inset-block-start: .45rem; inset-inline-end: .35rem; }
    .fi-ta-table tr.fi-ta-row .fi-ta-actions .fi-dropdown-trigger .fi-icon-btn { opacity: 1; }
    .fi-ta-header-toolbar { flex-wrap: wrap; gap: .5rem; }
    .fi-ta-summary-row, .fi-ta-table tr:not(.fi-ta-row) { display: block; }

    /* page headings: the title, then its buttons in one tidy wrapping row */
    .fi-header { gap: .75rem; }
    .fi-header .fi-header-heading { font-size: 1.4rem; }
    .fi-header-actions-ctn, .fi-header .fi-ac { flex-wrap: wrap; gap: .5rem; justify-content: flex-start; }
    .fi-header .fi-btn { padding-inline: .7rem; font-size: .82rem; }
}

/* ── Record pages: the full record, folded under the story ─────────────── */
.mb-hub-details { border: 1px solid var(--mb-line); border-radius: 14px; background: var(--mb-surface); }
.mb-hub-details > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
    padding: .85rem 1.1rem; font-weight: 700; font-size: .9rem; color: var(--mb-ink-2);
}
.mb-hub-details > summary::-webkit-details-marker { display: none; }
.mb-hub-details > summary::before {
    content: ""; width: .5rem; height: .5rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s ease; margin-inline-end: .15rem;
}
[dir="rtl"] .mb-hub-details > summary::before { transform: rotate(45deg); }
.mb-hub-details[open] > summary::before { transform: rotate(45deg) !important; }
.mb-hub-details > summary:hover { color: var(--mb-ink); }
.mb-hub-details > summary:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; border-radius: 14px; }
.mb-hub-details[open] > summary { border-block-end: 1px solid var(--mb-line); }
.mb-hub-details > :not(summary) { padding: 1rem; }
.mb-hub-details .fi-section, .mb-hub-details .fi-fo-component-ctn > .fi-section { box-shadow: none; }

/* ── Home: setup guide for a new organisation ──────────────────────────── */
.mb-setup {
    position: relative; border: 1px solid var(--mb-line); border-radius: 18px; background: var(--mb-surface);
    padding: 1.15rem 1.25rem 1rem; display: grid; gap: .9rem;
}
.mb-setup-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.mb-setup-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--mb-ink); text-wrap: balance; }
.mb-setup-head p { margin: .2rem 0 0; font-size: .84rem; color: var(--mb-ink-2); }
.mb-setup-meter { display: flex; align-items: center; gap: .6rem; min-width: 12rem; flex: 0 1 16rem; }
.mb-setup-meter > span { font-size: .8rem; font-weight: 800; color: var(--mb-teal-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mb-setup-meter .mb-bar { width: 100%; }
.mb-setup-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .55rem; }
.mb-step {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem;
    padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--mb-line-2); background: var(--mb-surface-2);
}
.mb-step-n {
    width: 1.9rem; height: 1.9rem; border-radius: 99px; display: grid; place-items: center;
    font-size: .82rem; font-weight: 800; color: var(--mb-ink-2); background: var(--mb-surface); border: 1px solid var(--mb-line);
    font-variant-numeric: tabular-nums;
}
.mb-step-n .mb-i { width: 1rem; height: 1rem; }
.mb-step-tx { min-width: 0; display: grid; gap: .1rem; }
.mb-step-tx b { font-size: .88rem; color: var(--mb-ink); }
.mb-step-tx span { font-size: .76rem; color: var(--mb-ink-3); line-height: 1.45; }
.mb-step-go {
    font-size: .78rem; font-weight: 700; white-space: nowrap; padding: .38rem .7rem; border-radius: 9px;
    color: var(--mb-teal-ink); background: var(--mb-surface); border: 1px solid var(--mb-line);
}
.mb-step-go:hover { border-color: var(--mb-teal); }
.mb-step-go:focus-visible, .mb-setup-hide:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }
.mb-step.is-next { border-color: color-mix(in srgb, var(--mb-teal) 45%, transparent); background: var(--mb-teal-soft); }
.mb-step.is-next .mb-step-n { background: var(--mb-teal); border-color: var(--mb-teal); color: #fff; }
.mb-step.is-next .mb-step-go { background: var(--mb-teal); border-color: var(--mb-teal); color: #fff; }
.mb-step.is-done { background: transparent; }
.mb-step.is-done .mb-step-n { background: var(--mb-green-soft); border-color: transparent; color: var(--mb-green-ink); }
.mb-step.is-done .mb-step-tx b { color: var(--mb-ink-2); }
.mb-setup-hide {
    justify-self: end; font-size: .76rem; font-weight: 600; color: var(--mb-ink-3); background: none; border: 0; cursor: pointer; padding: .2rem .3rem;
}
.mb-setup-hide:hover { color: var(--mb-ink); text-decoration: underline; }
@media (max-width: 639px) {
    .mb-step { grid-template-columns: auto 1fr; }
    .mb-step-go { grid-column: 2; justify-self: start; }
}
.mb-setup-lifted { z-index: 2; margin: -3.9rem 1rem 0; box-shadow: 0 14px 34px -18px rgba(15, 30, 46, .35); }
@media (max-width: 639px) { .mb-setup-lifted { margin-inline: .5rem; } }

/* ── the wall of sticky notes ───────────────────────────────────────────── */
.mb-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .9rem; align-items: start; }
.mb-note {
    position: relative; display: grid; gap: .5rem; padding: .85rem .9rem .7rem; border-radius: 14px;
    background: var(--mb-note-bg, #FFF7D6); border: 1px solid var(--mb-note-line, #F0E3A8);
    color: var(--mb-ink); box-shadow: 0 1px 2px rgba(15,30,46,.08);
}
.mb-note.is-pinned { box-shadow: 0 6px 18px -10px rgba(15,30,46,.45); }
.mb-note-yellow { --mb-note-bg: #FFF7D6; --mb-note-line: #F0E3A8; }
.mb-note-blue   { --mb-note-bg: #E7F0FD; --mb-note-line: #C6DAF6; }
.mb-note-green  { --mb-note-bg: #E4F6EC; --mb-note-line: #BEE5CE; }
.mb-note-pink   { --mb-note-bg: #FCE8EF; --mb-note-line: #F4C9D8; }
.mb-note-grey   { --mb-note-bg: #F1F4F7; --mb-note-line: #DCE3E9; }
.dark .mb-note-yellow { --mb-note-bg: #2E2A16; --mb-note-line: #4A4223; }
.dark .mb-note-blue   { --mb-note-bg: #16243A; --mb-note-line: #23385A; }
.dark .mb-note-green  { --mb-note-bg: #142A20; --mb-note-line: #1F4231; }
.dark .mb-note-pink   { --mb-note-bg: #2C1A22; --mb-note-line: #472B36; }
.dark .mb-note-grey   { --mb-note-bg: #1A222B; --mb-note-line: #2A3845; }
.dark .mb-note { color: var(--mb-ink); }
.mb-note-top { display: flex; align-items: flex-start; gap: .4rem; min-height: 1.2rem; }
.mb-note-title { font-size: .9rem; font-weight: 800; line-height: 1.4; }
.mb-note-tools { margin-inline-start: auto; display: flex; gap: .1rem; opacity: .55; }
.mb-note:hover .mb-note-tools, .mb-note:focus-within .mb-note-tools { opacity: 1; }
.mb-note-tools button { background: none; border: 0; cursor: pointer; color: inherit; padding: .15rem; border-radius: 6px; }
.mb-note-tools button:hover { background: rgba(15,30,46,.08); }
.dark .mb-note-tools button:hover { background: rgba(255,255,255,.1); }
.mb-note-tools .mb-i { width: .95rem; height: .95rem; }
.mb-note-body { margin: 0; font-size: .85rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.mb-note-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; font-size: .7rem; opacity: .7; }
.mb-note-foot a { font-weight: 700; text-decoration: underline; }
.mb-notes-empty {
    display: grid; justify-items: center; gap: .3rem; padding: 2.2rem 1rem; text-align: center;
    background: var(--mb-surface); border: 1px dashed var(--mb-line); border-radius: 16px; color: var(--mb-ink-3);
}
.mb-notes-empty .mb-i { width: 1.8rem; height: 1.8rem; }
.mb-notes-empty b { color: var(--mb-ink); font-size: .95rem; }
.mb-notes-empty span { font-size: .8rem; }

/* ── the team chat ──────────────────────────────────────────────────────────
   Sidebar of conversations beside the open one, the height of the window.
   Record mentions are chips that open the record; a mention of you is tinted. */
.mb-chat-page .fi-header { display: none; }
.mb-chat {
    display: grid; grid-template-columns: 17rem 1fr; height: calc(100vh - 8.5rem); min-height: 28rem;
    background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 18px; overflow: hidden;
}
.mb-ch-side { display: flex; flex-direction: column; min-height: 0; background: var(--mb-navy); color: var(--mb-on-navy); }
.mb-ch-side-top { display: grid; gap: .35rem; padding: .8rem .7rem .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.mb-ch-new {
    display: flex; align-items: center; gap: .45rem; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
    color: var(--mb-on-navy); background: rgba(255,255,255,.08); border: 0; border-radius: 9px; padding: .45rem .6rem;
}
.mb-ch-new:hover { background: rgba(255,255,255,.14); }
.mb-ch-new .mb-i { width: 1rem; height: 1rem; opacity: .8; }
.mb-ch-lists { flex: 1; overflow-y: auto; padding: .4rem .45rem 1rem; }
.mb-ch-group h3 { margin: .9rem .45rem .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: var(--mb-on-navy-2); }
.mb-ch-item {
    display: flex; align-items: center; gap: .45rem; width: 100%; font: inherit; font-size: .86rem; cursor: pointer; text-align: start;
    color: var(--mb-on-navy-2); background: none; border: 0; border-radius: 8px; padding: .38rem .5rem;
}
.mb-ch-item .mb-i { width: .95rem; height: .95rem; flex: none; opacity: .7; }
.mb-ch-item:hover { background: rgba(255,255,255,.08); color: var(--mb-on-navy); }
.mb-ch-item.is-on { background: rgba(255,255,255,.16); color: var(--mb-on-navy); font-weight: 700; }
.mb-ch-item.has-unread { color: var(--mb-on-navy); font-weight: 800; }
.mb-ch-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-ch-badge { background: var(--mb-red); color: #fff; font-size: .68rem; font-weight: 800; border-radius: 99px; padding: .05rem .42rem; font-variant-numeric: tabular-nums; }
.mb-ch-dot { width: .5rem; height: .5rem; border-radius: 99px; background: var(--mb-on-navy-2); flex: none; margin-inline: .22rem; }
.mb-ch-muted { color: var(--mb-ink-3); font-size: .8rem; padding: .5rem; }
.mb-ch-side .mb-ch-muted { color: var(--mb-on-navy-2); }

.mb-ch-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mb-ch-placeholder { margin: auto; display: grid; justify-items: center; gap: .35rem; text-align: center; color: var(--mb-ink-3); padding: 2rem; max-width: 26rem; }
.mb-ch-placeholder .mb-i { width: 2.2rem; height: 2.2rem; }
.mb-ch-placeholder b { color: var(--mb-ink); }
.mb-ch-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--mb-line);
}
.mb-ch-title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-width: 0; }
.mb-ch-title h2 { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--mb-ink); }
.mb-ch-title p { flex-basis: 100%; margin: 0; font-size: .78rem; color: var(--mb-ink-3); }
.mb-ch-members { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .76rem; color: var(--mb-ink-2); background: none; border: 1px solid var(--mb-line); border-radius: 99px; padding: .15rem .55rem; cursor: pointer; }
.mb-ch-members .mb-i { width: .9rem; height: .9rem; }
.mb-ch-search { display: flex; align-items: center; gap: .35rem; background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 10px; padding: .1rem .55rem; color: var(--mb-ink-3); }
.mb-ch-search .mb-i { width: .95rem; height: .95rem; }
.mb-ch-search input { border: 0; background: none; outline: 0; font: inherit; font-size: .82rem; color: var(--mb-ink); padding: .35rem 0; width: 12rem; max-width: 40vw; }
.mb-ch-results { max-height: 14rem; overflow-y: auto; border-bottom: 1px solid var(--mb-line); background: var(--mb-surface-2); }
.mb-ch-results button { display: block; width: 100%; text-align: start; font: inherit; font-size: .82rem; background: none; border: 0; border-bottom: 1px solid var(--mb-line-2); padding: .5rem 1rem; cursor: pointer; color: var(--mb-ink); }
.mb-ch-results button:hover { background: var(--mb-surface); }
.mb-ch-results small { color: var(--mb-ink-3); }
.mb-ch-results span { display: block; color: var(--mb-ink-2); margin-top: .15rem; }

.mb-ch-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: .6rem 0 .8rem; }
.mb-ch-list { display: grid; }
.mb-ch-older { justify-self: center; margin: .3rem 0 .6rem; font: inherit; font-size: .78rem; font-weight: 700; color: var(--mb-teal-ink); background: var(--mb-teal-soft); border: 0; border-radius: 99px; padding: .3rem .9rem; cursor: pointer; }
.mb-ch-empty { text-align: center; color: var(--mb-ink-3); font-size: .85rem; padding: 2rem 1rem; }
.mb-ch-day { display: flex; align-items: center; gap: .6rem; margin: .8rem 1rem .4rem; color: var(--mb-ink-3); font-size: .74rem; font-weight: 700; }
.mb-ch-day::before, .mb-ch-day::after { content: ""; flex: 1; height: 1px; background: var(--mb-line); }
.mb-ch-day span { border: 1px solid var(--mb-line); border-radius: 99px; padding: .1rem .6rem; background: var(--mb-surface); }

.mb-ch-msg { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; gap: .1rem .6rem; padding: .35rem 1rem; }
.mb-ch-msg:hover { background: var(--mb-surface-2); }
.mb-ch-msg.is-grouped { padding-top: .05rem; }
.mb-ch-msg.is-flash { background: var(--mb-amber-soft); }
.mb-ch-avatar { width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: var(--mb-navy); color: var(--mb-on-navy); font-weight: 800; font-size: .9rem; }
.mb-ch-msg.is-mine .mb-ch-avatar { background: var(--mb-teal); }
.mb-ch-gutter { font-size: .66rem; color: transparent; text-align: center; padding-top: .2rem; font-variant-numeric: tabular-nums; }
.mb-ch-msg:hover .mb-ch-gutter { color: var(--mb-ink-3); }
.mb-ch-bubble { min-width: 0; }
.mb-ch-bubble header { display: flex; align-items: baseline; gap: .45rem; }
.mb-ch-bubble header b { font-size: .86rem; color: var(--mb-ink); }
.mb-ch-bubble header time { font-size: .7rem; color: var(--mb-ink-3); font-variant-numeric: tabular-nums; }
.mb-ch-text { font-size: .9rem; line-height: 1.65; color: var(--mb-ink); word-break: break-word; }
.mb-ch-deleted { margin: 0; font-size: .82rem; font-style: italic; color: var(--mb-ink-3); }
.mb-ch-edited { color: var(--mb-ink-3); font-size: .7rem; }
.mb-ch-mention { color: var(--mb-blue-ink); background: var(--mb-blue-soft); border-radius: 5px; padding: 0 .2rem; font-weight: 700; }
.mb-ch-mention.is-me { color: var(--mb-amber-ink); background: var(--mb-amber-soft); }
.mb-ch-record {
    display: inline-flex; align-items: center; gap: .25rem; vertical-align: baseline; font-size: .82rem; font-weight: 700;
    color: var(--mb-teal-ink); background: var(--mb-teal-soft); border-radius: 6px; padding: 0 .35rem;
}
.mb-ch-record .mb-i { width: .8rem; height: .8rem; }
a.mb-ch-record:hover { text-decoration: underline; }
.mb-ch-a { color: var(--mb-blue-ink); text-decoration: underline; word-break: break-all; }
.mb-ch-code { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 5px; padding: 0 .25rem; direction: ltr; unicode-bidi: isolate; }
.mb-ch-pre { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 8px; padding: .5rem .7rem; margin: .3rem 0; white-space: pre-wrap; direction: ltr; text-align: left; }
.mb-ch-li { display: block; }
.mb-ch-img img { max-width: min(20rem, 100%); max-height: 16rem; border-radius: 10px; border: 1px solid var(--mb-line); margin-top: .3rem; display: block; }
.mb-ch-video { max-width: min(22rem, 100%); border-radius: 10px; margin-top: .3rem; }
.mb-ch-audio audio { height: 2.3rem; max-width: 100%; margin-top: .25rem; }
.mb-ch-file {
    display: inline-flex; align-items: center; gap: .55rem; margin-top: .3rem; padding: .5rem .75rem; max-width: 100%;
    border: 1px solid var(--mb-line); border-radius: 10px; background: var(--mb-surface); color: var(--mb-ink);
}
.mb-ch-file:hover { border-color: var(--mb-teal); }
.mb-ch-file .mb-i { width: 1.4rem; height: 1.4rem; color: var(--mb-ink-3); flex: none; }
.mb-ch-file span { display: grid; min-width: 0; }
.mb-ch-file b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: plaintext; }
.mb-ch-file small { font-size: .7rem; color: var(--mb-ink-3); }
.mb-ch-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.mb-ch-react { font: inherit; font-size: .78rem; cursor: pointer; background: var(--mb-surface-2); border: 1px solid var(--mb-line); border-radius: 99px; padding: .05rem .5rem; color: var(--mb-ink-2); }
.mb-ch-react.is-me { background: var(--mb-blue-soft); border-color: color-mix(in srgb, var(--mb-blue) 40%, transparent); color: var(--mb-blue-ink); }
.mb-ch-tools {
    position: absolute; inset-inline-end: 1rem; top: -.7rem; display: none; gap: .1rem;
    background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 9px; padding: .12rem; box-shadow: 0 2px 8px rgba(15,30,46,.1);
}
.mb-ch-msg:hover .mb-ch-tools, .mb-ch-msg:focus-within .mb-ch-tools { display: flex; }
.mb-ch-tools button { background: none; border: 0; cursor: pointer; color: var(--mb-ink-2); border-radius: 6px; padding: .15rem .35rem; font-size: .9rem; line-height: 1; }
.mb-ch-tools button:hover { background: var(--mb-surface-2); color: var(--mb-ink); }
.mb-ch-tools .mb-i { width: 1rem; height: 1rem; }
.mb-ch-react-menu {
    position: absolute; inset-inline-end: 1rem; top: 1.3rem; z-index: 5; display: flex; gap: .15rem;
    background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 12px; padding: .25rem; box-shadow: var(--mb-shadow-lift);
}
.mb-ch-react-menu button { font-size: 1.15rem; background: none; border: 0; cursor: pointer; border-radius: 8px; padding: .15rem .3rem; }
.mb-ch-react-menu button:hover { background: var(--mb-surface-2); }
.mb-ch-jump {
    position: absolute; bottom: 7.4rem; left: 50%; transform: translateX(-50%); z-index: 4;
    font: inherit; font-size: .78rem; font-weight: 700; color: #fff; background: var(--mb-navy); border: 0; border-radius: 99px; padding: .35rem .9rem; cursor: pointer;
}

.mb-ch-composer { position: relative; border-top: 1px solid var(--mb-line); padding: .45rem .8rem .7rem; background: var(--mb-surface); }
.mb-ch-composer.is-editing { background: var(--mb-amber-soft); }
.mb-ch-composer.is-locked { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mb-ch-composer.is-locked p { margin: 0; color: var(--mb-ink-2); font-size: .85rem; }
.mb-ch-toolbar { display: flex; gap: .1rem; margin-bottom: .3rem; }
.mb-ch-toolbar button { font: inherit; font-size: .82rem; min-width: 1.8rem; height: 1.7rem; background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--mb-ink-2); }
.mb-ch-toolbar button:hover { background: var(--mb-surface-2); color: var(--mb-ink); }
.mb-ch-input { display: flex; align-items: flex-end; gap: .4rem; border: 1px solid var(--mb-line); border-radius: 12px; padding: .3rem; background: var(--mb-surface-2); }
.mb-ch-input:focus-within { border-color: var(--mb-teal); }
.mb-ch-input textarea {
    flex: 1; resize: none; border: 0; outline: 0; background: none; font: inherit; font-size: .92rem; line-height: 1.5;
    color: var(--mb-ink); padding: .35rem .3rem; max-height: 11rem; min-height: 1.9rem;
}
.mb-ch-icon { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--mb-ink-2); }
.mb-ch-icon:hover { background: var(--mb-surface); color: var(--mb-ink); }
.mb-ch-icon .mb-i { width: 1.15rem; height: 1.15rem; }
.mb-ch-send { flex: none; display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .85rem; font-weight: 800; color: #fff; background: var(--mb-teal); border: 0; border-radius: 9px; padding: .45rem .85rem; cursor: pointer; }
.mb-ch-send .mb-i { width: 1rem; height: 1rem; transform: scaleX(-1); }
[dir="ltr"] .mb-ch-send .mb-i { transform: none; }
.mb-ch-send:hover { background: var(--mb-teal-ink); }
.mb-ch-suggest {
    position: absolute; bottom: calc(100% - .4rem); inset-inline-start: 1rem; z-index: 6; width: min(22rem, calc(100% - 2rem));
    background: var(--mb-surface); border: 1px solid var(--mb-line); border-radius: 12px; box-shadow: var(--mb-shadow-lift); padding: .25rem; max-height: 16rem; overflow-y: auto;
}
.mb-ch-suggest button { display: block; width: 100%; text-align: start; font: inherit; font-size: .85rem; background: none; border: 0; border-radius: 8px; padding: .4rem .6rem; cursor: pointer; color: var(--mb-ink); }
.mb-ch-suggest button.is-on, .mb-ch-suggest button:hover { background: var(--mb-teal-soft); color: var(--mb-teal-ink); }
.mb-ch-rec { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .85rem; color: var(--mb-ink-2); }
.mb-ch-rec-dot { width: .6rem; height: .6rem; border-radius: 99px; background: var(--mb-red); animation: mb-ch-pulse 1s infinite; }
@keyframes mb-ch-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mb-ch-rec-dot { animation: none; } }
.mb-ch-btn { font: inherit; font-size: .82rem; font-weight: 800; color: #fff; background: var(--mb-teal); border: 0; border-radius: 9px; padding: .4rem .9rem; cursor: pointer; }
.mb-ch-link { font: inherit; font-size: .8rem; color: var(--mb-ink-2); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.mb-ch-btn:focus-visible, .mb-ch-item:focus-visible, .mb-ch-send:focus-visible, .mb-ch-icon:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }

.mb-ch-dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(15,30,46,.45); padding: 1rem; }
.mb-ch-dialog form { display: grid; gap: .7rem; width: min(26rem, 100%); background: var(--mb-surface); color: var(--mb-ink); border-radius: 16px; padding: 1.1rem; box-shadow: var(--mb-shadow-lift); }
.mb-ch-dialog h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.mb-ch-dialog label { display: grid; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--mb-ink-2); }
.mb-ch-dialog input:not([type=checkbox]) { font: inherit; font-size: .9rem; border: 1px solid var(--mb-line); border-radius: 9px; padding: .45rem .6rem; background: var(--mb-surface-2); color: var(--mb-ink); }
.mb-ch-check { display: flex !important; align-items: center; gap: .45rem; }
.mb-ch-dialog-actions { display: flex; gap: .6rem; align-items: center; }
.mb-ch-people { display: grid; gap: .15rem; max-height: 14rem; overflow-y: auto; }
.mb-ch-people button { text-align: start; font: inherit; font-size: .88rem; background: none; border: 0; border-radius: 8px; padding: .4rem .5rem; cursor: pointer; color: var(--mb-ink); }
.mb-ch-people button:hover { background: var(--mb-teal-soft); }
.mb-ch-member-list { margin: 0; padding-inline-start: 1.1rem; max-height: 12rem; overflow-y: auto; font-size: .88rem; }
.mb-ch-toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 70; background: var(--mb-ink); color: var(--mb-surface); font-size: .85rem; border-radius: 10px; padding: .55rem 1rem; }

@media (max-width: 900px) {
    .mb-chat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 7rem); }
    .mb-ch-side { max-height: 14rem; }
    .mb-ch-side-top { grid-template-columns: 1fr 1fr; }
    .mb-ch-search input { width: 8rem; }
    .mb-ch-toolbar { display: none; }
    .mb-ch-send span { display: none; }
}

/* the chat button in the top bar */
.mb-chat-btn {
    position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-inline-end: .35rem;
    border-radius: 10px; color: var(--mb-ink-2);
}
.mb-chat-btn:hover { background: var(--mb-surface-2); color: var(--mb-ink); }
.mb-chat-btn .mb-i { width: 1.35rem; height: 1.35rem; }
.mb-chat-btn-badge {
    position: absolute; top: -.1rem; inset-inline-end: -.15rem; min-width: 1.1rem; height: 1.1rem; display: grid; place-items: center;
    background: var(--mb-red); color: #fff; font-size: .62rem; font-weight: 800; border-radius: 99px; padding: 0 .25rem;
}

/* whatever the chat hides stays hidden, whatever display its class gives it */
.mb-chat [hidden] { display: none !important; }
/* the frame around the composer is the focus cue; the textarea inside draws none of its own */
.mb-ch-input textarea, .mb-ch-input textarea:focus { box-shadow: none !important; --tw-ring-shadow: 0 0 #0000; }
.mb-ch-input:focus-within { border-color: var(--mb-teal); }

/* ══ The task board, the Trello way ══════════════════════════════════════
   Lists side by side on a navy canvas, white cards you pick up and drop, and
   a card that opens over the board. Labels are the one loud colour a card
   carries; everything else on its face is quiet ink. */
:root {
    --mb-tb-canvas: linear-gradient(160deg, #173A63 0%, #13294B 55%, #10233F 100%);
    --mb-tb-list: #EEF2F6; --mb-tb-card: #FFFFFF; --mb-tb-card-hover: #F7FAFC;
    --mb-lbl-green: #3FA36B; --mb-lbl-yellow: #D9A915; --mb-lbl-orange: #EE8A2E;
    --mb-lbl-red: #DD4B3F; --mb-lbl-purple: #9466D1; --mb-lbl-blue: #2F7FD1;
}
.dark {
    --mb-tb-canvas: linear-gradient(160deg, #0F2542 0%, #0B1A2E 60%, #09141F 100%);
    --mb-tb-list: #0F1B27; --mb-tb-card: #172635; --mb-tb-card-hover: #1C2E40;
}

.mb-tb {
    display: flex; gap: .8rem; align-items: flex-start; overflow-x: auto;
    padding: .9rem; border-radius: 18px; background: var(--mb-tb-canvas);
    min-height: 70vh; scrollbar-width: thin;
}
.mb-tb-list {
    flex: 0 0 17.5rem; max-width: 86vw; background: var(--mb-tb-list); border-radius: 14px;
    padding: .55rem .5rem .5rem; display: flex; flex-direction: column; gap: .5rem;
    box-shadow: 0 1px 0 rgba(9, 30, 66, .25);
}
.mb-tb-head { display: flex; align-items: center; gap: .45rem; padding: .1rem .4rem; font-size: .9rem; color: var(--mb-ink); }
.mb-tb-count { margin-inline-start: auto; font-size: .74rem; font-weight: 800; color: var(--mb-ink-3); font-variant-numeric: tabular-nums; }
.mb-tb-cards { display: grid; gap: .45rem; min-height: 2.2rem; }

.mb-tb-card {
    display: grid; gap: .35rem; padding: .55rem .65rem .5rem; border-radius: 10px; cursor: pointer;
    background: var(--mb-tb-card); color: var(--mb-ink);
    box-shadow: 0 1px 1px rgba(9, 30, 66, .22), 0 0 1px rgba(9, 30, 66, .3);
    transition: background .12s, box-shadow .12s;
}
.mb-tb-card:hover { background: var(--mb-tb-card-hover); box-shadow: 0 0 0 2px var(--mb-teal); }
.mb-tb-card:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }
.mb-tb-card.is-done .mb-tb-title { color: var(--mb-ink-3); }
.mb-tb-labels { display: flex; flex-wrap: wrap; gap: .25rem; }
.mb-lbl { display: inline-block; width: 2.4rem; height: .45rem; border-radius: 99px; background: var(--mb-lbl-c); }
.mb-lbl-green { --mb-lbl-c: var(--mb-lbl-green); }
.mb-lbl-yellow { --mb-lbl-c: var(--mb-lbl-yellow); }
.mb-lbl-orange { --mb-lbl-c: var(--mb-lbl-orange); }
.mb-lbl-red { --mb-lbl-c: var(--mb-lbl-red); }
.mb-lbl-purple { --mb-lbl-c: var(--mb-lbl-purple); }
.mb-lbl-blue { --mb-lbl-c: var(--mb-lbl-blue); }
.mb-tb-title { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.mb-tb-rec { margin: 0; display: flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--mb-teal-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-tb-rec .mb-i { width: .8rem; height: .8rem; flex: none; }
.mb-tb-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: .74rem; color: var(--mb-ink-2); font-variant-numeric: tabular-nums; }
.mb-tb-badge { display: inline-flex; align-items: center; gap: .2rem; }
.mb-tb-badge .mb-i { width: .85rem; height: .85rem; }
.mb-tb-due { padding: .05rem .35rem; border-radius: 5px; }
.mb-tb-due.is-late { background: var(--mb-red); color: #fff; font-weight: 700; }
.mb-tb-due.is-done { background: var(--mb-green); color: #fff; }
.mb-tb-badge.is-complete { background: var(--mb-green); color: #fff; padding: .05rem .35rem; border-radius: 5px; }
.mb-tb-hot { color: var(--mb-red-ink); font-weight: 700; }
.mb-tb-people { display: inline-flex; margin-inline-start: auto; }
.mb-tb-people .mb-av + .mb-av { margin-inline-start: -.35rem; }

.mb-av {
    display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 99px; flex: none;
    background: var(--mb-navy-2); color: var(--mb-on-navy); font-size: .7rem; font-weight: 800;
    box-shadow: 0 0 0 2px var(--mb-tb-card);
}
.mb-av-more { background: var(--mb-line); color: var(--mb-ink-2); }
.mb-av-lg { width: 2rem; height: 2rem; font-size: .82rem; }

.mb-tb-add-btn {
    display: flex; align-items: center; gap: .35rem; width: 100%; padding: .45rem .5rem; border: 0; border-radius: 9px;
    background: none; color: var(--mb-ink-2); font: inherit; font-size: .84rem; cursor: pointer; text-align: start;
}
.mb-tb-add-btn:hover { background: color-mix(in srgb, var(--mb-ink) 8%, transparent); color: var(--mb-ink); }
.mb-tb-add-btn .mb-i { width: 1rem; height: 1rem; }
.mb-tb-add-input {
    width: 100%; resize: none; border: 0; border-radius: 10px; padding: .5rem .6rem; font: inherit; font-size: .88rem;
    background: var(--mb-tb-card); color: var(--mb-ink); box-shadow: 0 1px 1px rgba(9, 30, 66, .25);
}
.mb-tb-add-input:focus { outline: 2px solid var(--mb-teal); }
.mb-tb-add-row { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; }
.mb-tb-x { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 8px; background: none; color: var(--mb-ink-2); cursor: pointer; }
.mb-tb-x:hover { background: color-mix(in srgb, var(--mb-ink) 8%, transparent); }
.mb-tb-x .mb-i { width: 1.1rem; height: 1.1rem; }

.mb-btn-teal {
    display: inline-flex; align-items: center; gap: .35rem; border: 0; border-radius: 9px; padding: .45rem .9rem;
    background: var(--mb-teal); color: #fff; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.mb-btn-teal:hover { filter: brightness(1.07); }
.mb-btn-teal:disabled { opacity: .5; cursor: default; }
.mb-btn-teal:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }

/* the open card */
.mb-card-veil {
    position: fixed; inset: 0; z-index: 40; overflow-y: auto; padding: 3.5rem 1rem 2rem;
    background: rgba(8, 17, 30, .6); display: flex; justify-content: center; align-items: flex-start;
}
.mb-card {
    width: min(62rem, 100%); background: var(--mb-surface); color: var(--mb-ink);
    border-radius: 16px; box-shadow: var(--mb-shadow-lift); padding: 1.2rem 1.3rem 1.4rem;
}
.mb-card-head { display: flex; align-items: flex-start; gap: .7rem; }
.mb-card-head-i { width: 1.4rem; height: 1.4rem; margin-top: .35rem; color: var(--mb-ink-2); flex: none; }
.mb-card-head-main { flex: 1; min-width: 0; }
.mb-card-title {
    display: block; width: 100%; margin: 0; padding: .15rem .35rem; border: 0; border-radius: 8px; resize: none; overflow: hidden;
    background: none; color: var(--mb-ink); font: inherit; font-size: 1.25rem; font-weight: 800; line-height: 1.45;
}
textarea.mb-card-title:hover { background: var(--mb-surface-2); }
textarea.mb-card-title:focus { outline: 2px solid var(--mb-teal); background: var(--mb-surface); box-shadow: none; }
.mb-card-sub { margin: .15rem .35rem 0; font-size: .8rem; color: var(--mb-ink-2); }
.mb-card-close { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 99px; background: var(--mb-surface-2); color: var(--mb-ink-2); cursor: pointer; flex: none; }
.mb-card-close:hover { background: var(--mb-line); color: var(--mb-ink); }
.mb-card-close .mb-i { width: 1.2rem; height: 1.2rem; }

.mb-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 1.4rem; margin-top: 1rem; }
.mb-card-main { display: grid; gap: 1.35rem; align-content: start; min-width: 0; }
.mb-card-facts { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; padding-inline-start: 2.1rem; }
.mb-card-fact { display: grid; gap: .35rem; align-content: start; }
.mb-card-k { font-size: .72rem; font-weight: 700; color: var(--mb-ink-2); letter-spacing: .02em; }
.mb-card-people { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.mb-card-name { font-size: .86rem; font-weight: 600; color: var(--mb-ink); }
.mb-card-none { font-size: .84rem; color: var(--mb-ink-3); margin: 0; }
.mb-card-mini { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 8px; background: var(--mb-surface-2); color: var(--mb-ink-2); cursor: pointer; }
.mb-card-mini:hover { background: var(--mb-line); }
.mb-card-mini .mb-i { width: .9rem; height: .9rem; }
.mb-av-member { position: relative; }
.mb-av-member button {
    position: absolute; top: -.35rem; inset-inline-end: -.35rem; width: 1rem; height: 1rem; border: 0; border-radius: 99px;
    display: none; place-items: center; background: var(--mb-red); color: #fff; font-size: .7rem; line-height: 1; cursor: pointer;
}
.mb-av-member:hover button, .mb-av-member button:focus-visible { display: grid; }
.mb-av-add { border: 0; background: var(--mb-surface-2); color: var(--mb-ink-2); font-size: 1rem; cursor: pointer; box-shadow: none; }
.mb-av-add:hover { background: var(--mb-line); }
.mb-card-labels { display: flex; flex-wrap: wrap; gap: .3rem; }
.mb-lbl-pick { width: 2.3rem; height: 1.8rem; border-radius: 6px; border: 0; cursor: pointer; opacity: .28; }
.mb-lbl-pick.is-on { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
button.mb-lbl-pick:hover { opacity: .75; }
button.mb-lbl-pick.is-on:hover { opacity: 1; }
button.mb-lbl-pick:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }

.mb-card-input {
    border: 1px solid var(--mb-line); border-radius: 8px; padding: .38rem .55rem; font: inherit; font-size: .84rem;
    background: var(--mb-surface-2); color: var(--mb-ink); color-scheme: light;
}
.dark .mb-card-input { color-scheme: dark; }
.mb-card-input:focus { outline: 2px solid var(--mb-teal); outline-offset: 0; border-color: transparent; box-shadow: none; }
.mb-card-input.is-late { border-color: var(--mb-red); color: var(--mb-red-ink); }
.mb-grow { flex: 1; min-width: 0; }

.mb-card-sec { display: grid; gap: .55rem; }
.mb-card-sec h3 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .95rem; font-weight: 800; }
.mb-card-sec h3 .mb-i { width: 1.25rem; height: 1.25rem; color: var(--mb-ink-2); }
.mb-card-sec h3 .mb-card-ghost { margin-inline-start: auto; }
.mb-card-sec > :not(h3) { margin-inline-start: 1.85rem; }
.mb-card-desc { font-size: .88rem; line-height: 1.75; color: var(--mb-ink); overflow-wrap: anywhere; }
.mb-card-placeholder {
    width: 100%; min-height: 3.6rem; border: 0; border-radius: 10px; padding: .6rem .75rem; text-align: start; cursor: pointer;
    background: var(--mb-surface-2); color: var(--mb-ink-3); font: inherit; font-size: .86rem;
}
.mb-card-placeholder:hover { background: var(--mb-line-2); }
.mb-card-text {
    width: 100%; border: 1px solid var(--mb-line); border-radius: 10px; padding: .55rem .7rem; font: inherit; font-size: .88rem; line-height: 1.6;
    background: var(--mb-surface); color: var(--mb-ink); resize: vertical;
}
.mb-card-text:focus { outline: 2px solid var(--mb-teal); border-color: transparent; box-shadow: none; }
.mb-card-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.mb-card-ghost { border: 0; background: none; padding: .25rem .45rem; border-radius: 7px; font: inherit; font-size: .8rem; font-weight: 600; color: var(--mb-ink-2); cursor: pointer; }
.mb-card-ghost:hover { background: var(--mb-surface-2); color: var(--mb-ink); }
.mb-card-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 8px; padding: .45rem .75rem;
    background: var(--mb-surface-2); color: var(--mb-ink); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.mb-card-btn:hover { background: var(--mb-line); }
.mb-card-btn .mb-i { width: 1rem; height: 1rem; }
.mb-card-btn-ok { background: var(--mb-green-soft); color: var(--mb-green-ink); }
.mb-card-btn-ok:hover { background: var(--mb-green); color: #fff; }
.mb-card-btn-danger { color: var(--mb-red-ink); }
.mb-card-btn-danger:hover { background: var(--mb-red); color: #fff; }
.mb-card-btn:focus-visible, .mb-card-ghost:focus-visible, .mb-card-close:focus-visible, .mb-card-mini:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: 2px; }

.mb-card-pop {
    position: absolute; top: calc(100% + .35rem); inset-inline-start: 0; z-index: 5; width: 16rem; max-height: 18rem; overflow-y: auto;
    display: grid; gap: .15rem; padding: .45rem; border-radius: 12px; background: var(--mb-surface); border: 1px solid var(--mb-line);
    box-shadow: var(--mb-shadow-lift);
}
.mb-card-pop[hidden] { display: none; }
.mb-card-pop-wide { width: min(26rem, 80vw); }
.mb-card-pop input {
    width: 100%; margin-bottom: .25rem; border: 1px solid var(--mb-line); border-radius: 8px; padding: .4rem .55rem; font: inherit; font-size: .84rem;
    background: var(--mb-surface-2); color: var(--mb-ink);
}
.mb-card-pop input:focus { outline: 2px solid var(--mb-teal); border-color: transparent; box-shadow: none; }
.mb-card-opt { border: 0; background: none; text-align: start; padding: .42rem .5rem; border-radius: 7px; font: inherit; font-size: .84rem; color: var(--mb-ink); cursor: pointer; }
.mb-card-opt:hover, .mb-card-opt:focus-visible { background: var(--mb-teal-soft); color: var(--mb-teal-ink); outline: 0; }
.mb-card-opt-quiet { color: var(--mb-ink-3); }
.mb-card-hint { margin: 0; font-size: .75rem; color: var(--mb-ink-3); }
.mb-card-err { margin: 0; font-size: .8rem; color: var(--mb-red-ink); }

.mb-card-progress { display: flex; align-items: center; gap: .6rem; font-size: .74rem; color: var(--mb-ink-2); font-variant-numeric: tabular-nums; }
.mb-card-progress span { width: 2.2rem; }
.mb-card-bar { flex: 1; height: .5rem; border-radius: 99px; background: var(--mb-line-2); overflow: hidden; }
.mb-card-bar i { display: block; height: 100%; border-radius: inherit; background: var(--mb-teal); transition: width .25s; }
.mb-card-bar i.is-full { background: var(--mb-green); }
@media (prefers-reduced-motion: reduce) { .mb-card-bar i { transition: none; } }
.mb-card-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mb-card-steps li { display: flex; align-items: center; gap: .55rem; padding: .3rem .35rem; border-radius: 8px; font-size: .88rem; }
.mb-card-steps li:hover { background: var(--mb-surface-2); }
.mb-card-steps input { width: 1.05rem; height: 1.05rem; accent-color: var(--mb-teal); flex: none; }
.mb-card-steps label { flex: 1; overflow-wrap: anywhere; cursor: pointer; }
.mb-card-steps li.is-done label { text-decoration: line-through; color: var(--mb-ink-3); }
.mb-card-x { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 0; border-radius: 7px; background: none; color: var(--mb-ink-3); cursor: pointer; opacity: 0; flex: none; }
.mb-card-steps li:hover .mb-card-x, .mb-card-files li:hover .mb-card-x, .mb-card-x:focus-visible { opacity: 1; }
.mb-card-x:hover { background: var(--mb-red-soft); color: var(--mb-red-ink); }
.mb-card-x .mb-i { width: .95rem; height: .95rem; }
@media (hover: none) { .mb-card-x { opacity: 1; } }

.mb-card-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mb-card-files li { display: flex; align-items: center; gap: .7rem; }
.mb-card-files li > div { flex: 1; min-width: 0; display: grid; }
.mb-card-files .mb-card-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-card-files small { font-size: .74rem; color: var(--mb-ink-3); }
.mb-card-file-thumb {
    display: grid; place-items: center; width: 4.5rem; height: 3.2rem; flex: none; border-radius: 8px; overflow: hidden;
    background: var(--mb-surface-2); color: var(--mb-ink-2); font-size: .72rem; font-weight: 800;
}
.mb-card-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mb-card-upload { justify-self: start; position: relative; }

.mb-card-compose { position: relative; display: grid; gap: .45rem; }
.mb-card-compose .mb-card-pop { top: 4.2rem; }
.mb-card-comments { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .8rem; }
.mb-card-comments li { display: flex; gap: .6rem; }
.mb-card-comments li > div { flex: 1; min-width: 0; }
.mb-card-who { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: 0 0 .25rem; font-size: .84rem; }
.mb-card-who small { color: var(--mb-ink-3); font-size: .74rem; }
.mb-card-bubble {
    padding: .5rem .7rem; border-radius: 10px; background: var(--mb-surface-2); border: 1px solid var(--mb-line-2);
    font-size: .88rem; line-height: 1.65; overflow-wrap: anywhere;
}
.mb-card-mention { color: var(--mb-teal-ink); background: var(--mb-teal-soft); border-radius: 5px; padding: 0 .25rem; font-weight: 700; }

.mb-card-side { display: grid; gap: .45rem; align-content: start; }
.mb-card-side h4 { margin: .4rem 0 .1rem; font-size: .74rem; font-weight: 800; color: var(--mb-ink-2); letter-spacing: .02em; }
.mb-card-side h4:first-child { margin-top: 0; }
.mb-card-side .mb-card-btn { justify-content: flex-start; width: 100%; }
.mb-card-side select { width: 100%; }
.mb-card-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-height: 26rem; overflow-y: auto; }
.mb-card-log li { font-size: .8rem; line-height: 1.55; color: var(--mb-ink-2); overflow-wrap: anywhere; }
.mb-card-log b { color: var(--mb-ink); }
.mb-card-log small { display: block; color: var(--mb-ink-3); font-size: .72rem; }

@media (max-width: 760px) {
    .mb-card-veil { padding: 0; }
    .mb-card { border-radius: 0; min-height: 100%; padding: 1rem .9rem 1.4rem; }
    .mb-card-body { grid-template-columns: 1fr; }
    .mb-card-facts { padding-inline-start: 0; }
    .mb-card-sec > :not(h3) { margin-inline-start: 0; }
    .mb-tb { min-height: 60vh; padding: .6rem; }
}
/* Filament's form reset draws the select arrow for left-to-right pages and
   tiles it; on the card it sits once, at the inline end */
select.mb-card-input {
    background-repeat: no-repeat; background-position: left .55rem center; background-size: 1rem;
    padding-left: 2rem; padding-right: .6rem;
}
[dir="ltr"] select.mb-card-input { background-position: right .55rem center; padding-right: 2rem; padding-left: .6rem; }
.mb-card-steps input[type="checkbox"] { color: var(--mb-teal); border-radius: 4px; }

/* ── «ابحث في القائمة» at the top of the sidebar ──────────────────────────
   While something is typed the results take the place of the menu, so the
   list never has to be scrolled past to find them. */
.mb-ms { padding: 0 .25rem .6rem; }
.mb-ms-box {
    display: flex; align-items: center; gap: .45rem; padding: .1rem .6rem; border-radius: 10px;
    background: var(--mb-surface); border: 1px solid var(--mb-line); color: var(--mb-ink-3);
}
.mb-ms-box:focus-within { border-color: var(--mb-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-teal) 18%, transparent); }
.mb-ms-box .mb-i { width: 1rem; height: 1rem; flex: none; }
.mb-ms-box input {
    flex: 1; min-width: 0; border: 0; background: none; padding: .5rem 0; font: inherit; font-size: .86rem; color: var(--mb-ink);
    box-shadow: none; outline: 0;
}
.mb-ms-box input:focus { box-shadow: none; outline: 0; }
.mb-ms-box input::-webkit-search-cancel-button { cursor: pointer; }
.mb-ms-box kbd {
    font: inherit; font-size: .7rem; font-weight: 700; color: var(--mb-ink-3); border: 1px solid var(--mb-line);
    border-radius: 5px; padding: 0 .35rem; line-height: 1.35rem; background: var(--mb-surface-2);
}
@media (hover: none) { .mb-ms-box kbd { display: none; } }

.mb-ms-results { display: grid; gap: .1rem; margin-top: .45rem; }
.mb-ms-item {
    display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 9px; color: var(--mb-ink);
}
.mb-ms-item[hidden] { display: none; }
.mb-ms-item .mb-i { width: 1.15rem; height: 1.15rem; flex: none; color: var(--mb-ink-3); }
.mb-ms-item span { display: grid; min-width: 0; }
.mb-ms-item b { font-size: .86rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-ms-item small { font-size: .7rem; color: var(--mb-ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-ms-item:hover, .mb-ms-item.is-on { background: var(--mb-teal-soft); }
.mb-ms-item:hover .mb-i, .mb-ms-item.is-on .mb-i, .mb-ms-item.is-on b { color: var(--mb-teal-ink); }
.mb-ms-item:focus-visible { outline: 2px solid var(--mb-teal); outline-offset: -2px; }
.mb-ms-none { margin: .4rem .3rem; font-size: .8rem; line-height: 1.6; color: var(--mb-ink-3); }

/* the menu itself steps aside while results are shown */
.mb-ms-on .fi-sidebar-nav-groups { display: none; }

/* a table drawn inside a record page (a vehicle's schedule, an issue's
   timeline) scrolls within its own frame on a phone; Filament's entry sizes
   itself to its content, which would push the table past the screen edge */
/* every box between the record's column and the table, however Filament nests them */
.fi-in-entry-wrp:has(.mb-dtable-wrap),
.fi-in-entry-wrp :has(.mb-dtable-wrap) { max-width: 100%; min-width: 0; }
.fi-in-entry-wrp :has(> .mb-dtable-wrap) { width: 100%; }
.mb-dtable-wrap { max-width: 100%; }

/* on a touch screen the small icon buttons get a finger-sized target (44px is
   the usual minimum; 2.5rem keeps a row of three on a narrow note) */
@media (hover: none) {
    .mb-note-tools { opacity: 1; gap: .2rem; }
    .mb-note-tools button { display: grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; }
    .mb-card-x, .mb-card-mini, .mb-kb-scope button { min-width: 2.5rem; min-height: 2.5rem; }
}

/* a title that is one long word (a code, an address) wraps instead of leaving the screen */
.mb-wo-t h2, .fi-header-heading, .mb-card-title, .mb-tb-title { overflow-wrap: anywhere; }

/* the work order's stages on a phone: narrower, and the strip is scrolled so
   the current stage is in view (mabani-ui.js) — the rest is a swipe away */
@media (max-width: 639px) {
    .mb-steps { grid-template-columns: repeat(var(--mb-steps-n, 7), minmax(70px, 1fr)) !important; scrollbar-width: none; }
    .mb-steps::-webkit-scrollbar { display: none; }
    .mb-st b { font-size: .72rem; }
}

/* a record with many header buttons (an asset: QR, discuss, task, edit…) —
   Filament keeps them on one line that will not shrink, which on a tablet runs
   past the screen edge; they wrap instead, at any width */
.fi-header > .shrink-0 { flex-shrink: 1; min-width: 0; max-width: 100%; }
.fi-header .fi-ac { flex-wrap: wrap; }

/* Maged's past conversations: a long title is cut with an ellipsis instead of
   widening the list past a phone screen; the delete button, shown on hover
   with a mouse, is always shown where there is no hover */
.mb-thread { min-width: 0; }
.mb-thread-open { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (hover: none) {
    .mb-thread-del { opacity: 1 !important; min-width: 2.5rem; min-height: 2.5rem; display: grid; place-items: center; }
}

/* Maged's chat bubbles. The page asks Tailwind for max-w-[85%], a class the
   app's stylesheet never contains (there is no Tailwind build), so a long
   answer ran past a phone's edge; the limit is set here instead */
.mb-bubble { max-width: 85%; min-width: 0; overflow-wrap: anywhere; }
.mb-bubble-me { max-width: 80%; }
.mb-bubble pre, .mb-bubble table { max-width: 100%; overflow-x: auto; }

/* the calendars on a phone: the toolbar wraps onto two rows (title and arrows,
   then the views), and the list the calendar opens on reads as a list */
@media (max-width: 639px) {
    .mb-cal .fc-header-toolbar { flex-wrap: wrap; gap: .6rem; }
    .mb-cal .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: -1; flex-basis: 100%; text-align: center; }
    .mb-cal .fc-toolbar-title { font-size: 1.1rem !important; }
    .mb-cal .fc-list-event td { padding: .7rem .6rem; font-size: .86rem; }
    .mb-cal .fc-list-day-cushion { padding: .5rem .7rem; font-size: .82rem; }
    .mb-cal .fc-list-event-title a { color: var(--mb-ink); font-weight: 600; }
}
/* a finger needs a bigger target than a pointer */
@media (hover: none) {
    .mb-cal .fc-button { min-height: 2.5rem; min-width: 2.5rem; }
    .mb-cal .fc-daygrid-more-link { display: inline-block; padding: .3rem .4rem; }
    .mb-cal .fc-daygrid-day-number { padding: .35rem .45rem; }
}

/* Maged's Send button: the page asks for px-5/py-2.5, which the app's
   stylesheet does not carry, so the text box squeezed it to a sliver */
.mb-ai-send { flex: none; min-height: 2.75rem; padding: .55rem 1.3rem; white-space: nowrap; }

/* «ماذا يفعل المساعد وحده»: the saved limits, run on three ordinary cases, so
   what is being switched on is read before it is saved */
.mb-ap-examples { display: grid; gap: .75rem; }
.mb-ap-case {
    border: 1px solid var(--mb-line, #e2e8f0); border-inline-start: 4px solid #16a34a;
    border-radius: .7rem; padding: .8rem .9rem; background: #fff;
}
.mb-ap-case.is-stop { border-inline-start-color: #d97706; background: #fffbf3; }
.mb-ap-case-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.mb-ap-case-head b { font-weight: 600; color: var(--mb-ink, #0f172a); }
.mb-ap-badge {
    flex: none; font-size: .75rem; font-weight: 700; border-radius: 999px;
    padding: .15rem .6rem; background: #dcfce7; color: #166534;
}
.mb-ap-case.is-stop .mb-ap-badge { background: #fef3c7; color: #92400e; }
.mb-ap-case p { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--mb-muted, #64748b); }
.dark .mb-ap-case { background: #131c2b; border-color: #26344a; }
.dark .mb-ap-case.is-stop { background: #1e1a10; }
.dark .mb-ap-case-head b { color: #e6ecf5; }

/* «ما فعله المساعد» on a record's page: what it proposed, and why */
.mb-trail { margin-top: 1rem; border-top: 1px solid var(--mb-line, #e2e8f0); padding-top: .9rem; display: grid; gap: .55rem; }
.mb-trail h4 { margin: 0; font-size: .82rem; font-weight: 700; color: var(--mb-muted, #64748b); }
.mb-trail-row { border: 1px solid var(--mb-line, #e2e8f0); border-inline-start: 4px solid #0ea5e9; border-radius: .6rem; padding: .6rem .75rem; background: #fff; }
.mb-trail-row.is-stop { border-inline-start-color: #d97706; background: #fffbf3; }
.mb-trail-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mb-trail-head b { font-weight: 600; font-size: .9rem; color: var(--mb-ink, #0f172a); }
.mb-trail-head small { margin-inline-start: auto; font-size: .72rem; color: var(--mb-muted, #64748b); }
.mb-trail-step { flex: none; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; background: #e0f2fe; color: #075985; }
.mb-trail-row.is-stop .mb-trail-step { background: #fef3c7; color: #92400e; }
.mb-trail-row p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.7; color: var(--mb-muted, #64748b); }
.mb-trail-facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.mb-trail-facts span { font-size: .72rem; border-radius: .4rem; padding: .1rem .45rem; background: #f1f5f9; color: #334155; }
.dark .mb-trail-row { background: #131c2b; border-color: #26344a; }
.dark .mb-trail-row.is-stop { background: #1e1a10; }
.dark .mb-trail-head b { color: #e6ecf5; }
.dark .mb-trail-facts span { background: #1c2740; color: #c7d2e3; }

/* «هل يصل البلاغ إلى الشركة الصحيحة؟» — the trade map and its gaps */
.mb-cover { display: grid; gap: .8rem; }
.mb-cover-top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.mb-cover-top b { font-size: 1.7rem; font-weight: 800; color: #b45309; }
.mb-cover.is-ready .mb-cover-top b { color: #15803d; }
.mb-cover-top span { font-size: .88rem; color: var(--mb-muted, #64748b); }
.mb-cover-ok { margin: 0; font-size: .86rem; color: #15803d; }
.mb-cover-gap { border: 1px solid #fde68a; background: #fffbeb; border-radius: .7rem; padding: .7rem .85rem; }
.mb-cover-gap b { display: block; font-size: .9rem; font-weight: 700; color: #92400e; }
.mb-cover-gap p { margin: .15rem 0 .5rem; font-size: .82rem; color: var(--mb-muted, #64748b); }
.mb-cover-gap a { font-size: .8rem; font-weight: 600; color: #0369a1; text-decoration: underline; }
.mb-cover-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.mb-cover-chips span { font-size: .76rem; border-radius: .4rem; padding: .12rem .5rem; background: #fff; border: 1px solid #fcd34d; color: #92400e; }
.mb-cover-chips i { font-style: normal; opacity: .7; margin-inline-start: .25rem; }
.mb-cover-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.mb-cover-table th { text-align: start; font-weight: 600; color: var(--mb-muted, #64748b); padding: .35rem .5rem; border-bottom: 1px solid var(--mb-line, #e2e8f0); }
.mb-cover-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--mb-line, #e2e8f0); }
.mb-cover-table tr.is-empty td { background: #fffbeb; color: #92400e; }
.dark .mb-cover-gap { background: #211c0f; border-color: #4b3a12; }
.dark .mb-cover-chips span { background: #1a1a12; border-color: #4b3a12; }
.dark .mb-cover-table tr.is-empty td { background: #211c0f; }