/* =========================================================
   BAAC ERP V2
   GLOBAL DESIGN SYSTEM
   ========================================================= */

/* =========================================================
   TYPE
   IBM Plex Sans Arabic: one family for Arabic and Latin, designed for
   screens, with true weights -- so a bold label is a drawn bold, not the
   browser thickening a regular. Shipped inside the package (OFL licence
   beside it); nothing is fetched from the internet at runtime.
   ========================================================= */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.94d075ab5c1a.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Medium.91c9cbf26b73.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-SemiBold.bfabc769e4cd.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Bold.a6f74733eeb9.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    /* =====================================================================
       PALETTE -- navy & gold
       ---------------------------------------------------------------------
       Chosen for a system whose heart is money. On a finance screen the
       colour that must jump out is the colour of a PROBLEM: red for late,
       amber for waiting, green for sound. With a cool navy for the shell and
       the primary action, every warm colour on the screen belongs to a
       warning, and the eye finds the problem before anything else. The gold
       is the company mark's own, so the identity stays where it lives.

       This block is the only place a colour is written down. Everything else
       refers to a token; a new colour is a one-line change here, and the
       design-system tests fail if a hex creeps back into a rule.
       ===================================================================== */
    color-scheme: light dark;
    /* The page is a cool grey and every card is white with a visible edge.
       The page used to be #f4f6f9 against white cards with a #e2e7ee edge --
       a contrast of 1.07:1 -- and on a bright office monitor the cards and
       their figures simply vanished into the background. */
    --baac-bg: #e5eaf0;
    --baac-surface: #ffffff;
    --baac-surface-soft: #f5f7fa;

    /* The shell. --baac-sidebar-gradient is the sidebar's actual paint, and
       the sign-in page uses the same token, so they can never drift apart. */
    --baac-sidebar: #0e1a2b;
    --baac-sidebar-2: #16263d;
    --baac-sidebar-3: #0c1625;
    --baac-sidebar-gradient:
        linear-gradient(
            180deg,
            var(--baac-sidebar) 0%,
            var(--baac-sidebar-2) 46%,
            var(--baac-sidebar-3) 100%
        );
    --baac-sidebar-edge: rgba(201, 162, 74, 0.14);
    --baac-on-dark: #c9d3e0;
    --baac-sidebar-veil: rgba(14, 26, 43, 0.98);
    --baac-sidebar-veil-soft: rgba(14, 26, 43, 0.94);
    --baac-sidebar-shadow: rgba(10, 18, 30, 0.10);

    /* The primary action, and the accent the mark lends. The -rgb triplets
       exist so a tint can be written as rgba(var(--baac-primary-rgb), .08)
       instead of a hardcoded rgba that silently keeps the old colour. */
    --baac-primary: #1f3a5f;
    --baac-primary-dark: #152a46;
    --baac-primary-rgb: 31, 58, 95;
    --baac-accent: #c9a24a;
    --baac-accent-rgb: 201, 162, 74;
    /* Text that sits on a primary-coloured surface (a primary button, a
       selected count). White on navy in light mode; in dark mode the primary
       turns light blue, so the text turns navy to keep its contrast. */
    --baac-on-primary: #ffffff;
    /* Where the side drawer waits off screen: off the right edge, or the
       left one in Arabic (set on .drawer-panel under [dir="rtl"]). */
    --drawer-off: 100%;
    /* The red of an unread count: deep enough for white figures in both
       themes (the dark theme's --danger is a light red, and white on it was
       2.9:1). */
    --baac-count: #c62828;
    /* The colour of the room a page belongs to (body[data-door], set from the
       page's own section): gold for money and the company's shared screens,
       indigo for tenders and contracts, teal for the field, violet for
       permits, blue for buying and selling, green for people, slate for the
       records. Only ever decoration -- a bar, a wash, a ring -- never text,
       so no colour here has to carry reading contrast. */
    --door: var(--baac-accent);

    /* The names the stylesheet grew up with. Kept as aliases so nothing
       already written breaks; new rules use the semantic names above. */
    --baac-bronze: var(--baac-primary);
    --baac-bronze-dark: var(--baac-primary-dark);
    --baac-gold: var(--baac-accent);

    --baac-text: #141b26;
    --baac-text-soft: #66707e;
    --baac-border: #c9d2dd;

    --success: #1e7f58;
    /* dark enough to be read as text on white and on its own tint (4.5:1),
       not only as a stripe or a dot */
    --warning: #9a6412;
    --danger: #b42318;
    --info: #2c6aa0;

    --sidebar-width: 290px;
    --topbar-height: 76px;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* ---- The control scale -------------------------------------------
       Every button, input and select in this system is one of two heights
       and one corner. Before this existed the top bar alone held five
       heights (30, 36, 38, 40, 42), six corners (8, 9, 10, 11, 12 and a
       full circle) and five font weights -- including 750, which is not a
       real weight, so the browser rounded it to 700 or 800 depending on the
       font and two buttons meant to match did not.

       Two heights, because a toolbar button and a button inside a dense
       table row genuinely differ. Anything else is an accident. */
    --control-h: 40px;
    --control-h-sm: 32px;
    --control-h-phone: 38px;   /* the top bar's controls on a phone */
    --control-radius: var(--radius-sm);
    --control-font: 13px;
    --control-font-sm: 12px;
    /* 600 for anything the eye should pass over, 700 for the one action on
       the screen that matters. There is no third weight. */
    --control-weight: 600;
    --control-weight-strong: 700;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.07), 0 3px 10px rgba(16, 24, 40, 0.07);
    --shadow-md: 0 12px 30px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.14);

    /* Scrollbars: a thin rounded thumb on an invisible track, in the text
       colour at low strength so it reads on any surface. The sidebar is
       always dark, so it carries its own light thumb. */
    --scroll-size: 10px;
    --scroll-thumb: rgba(20, 27, 38, 0.22);
    --scroll-thumb-hover: rgba(20, 27, 38, 0.42);
    --scroll-thumb-sidebar: rgba(255, 255, 255, 0.2);
    --scroll-thumb-sidebar-hover: rgba(255, 255, 255, 0.38);

    /* The sidebar's second level. A door (Operations, Money...) is white;
       the screens inside it are the mark's gold, softened, and hang from a
       fine gold line -- so what belongs to what reads at a glance. The
       sidebar is dark in both themes, so these need no dark-mode twin. */
    --sidebar-child: #dcc07f;
    --sidebar-child-hover: #f3e2b6;
    --sidebar-child-guide: rgba(201, 162, 74, 0.32);
    /* Height of the sidebar's logo band, which stays pinned; the six top
       links pin just beneath it. app.js keeps it exact if the band grows. */
    --sidebar-brand-h: 107px;


    /* Surfaces that used to be written as literal whites and creams. In
       dark mode each had stayed white or beige and glowed on the dark page
       like a lamp -- the figure cards, the table heads, the input boxes. */
    --baac-card-top: #ffffff;
    --baac-field: #ffffff;
    --baac-head-soft: #f3eee8;
    --baac-head-strong: #eee6dc;
    --baac-total-row: #e8ded2;
    --baac-row-soft: #faf6f0;
    --baac-pill: #f5f1ec;
    --baac-pill-cool: #f1f4f6;
    --baac-line-warm: #ddd3c8;
    /* The colour of the one action that matters on a screen. Separate from
       --baac-primary, which is also a text colour: in dark mode text needs a
       light blue, and a button painted that light blue shone like a bulb. */
    --baac-action: #1f3a5f;
    --baac-action-dark: #152a46;
    --baac-action-rgb: 31, 58, 95;
    --baac-on-action: #ffffff;
    --accent-purple: #6d5bd0;
    /* The funds' metals: main gold, sub silver, remittance bronze. */
    --metal-gold-bg: linear-gradient(135deg, #fffaf0 0%, #f4e4b8 100%);
    --metal-gold-edge: #d6b04f;
    --metal-gold-ink: #7a5c12;
    --metal-silver-bg: linear-gradient(135deg, #fcfdfe 0%, #e2e7ee 100%);
    --metal-silver-edge: #b3bdc9;
    --metal-silver-ink: #4b5664;
    --metal-bronze-bg: linear-gradient(135deg, #fdf6f1 0%, #eed6c3 100%);
    --metal-bronze-edge: #cc956c;
    --metal-bronze-ink: #7b4623;
    /* A remittance's journey: one colour per place and per step. */
    --stage-yellow: #b98900;
    --stage-blue: #2c6aa0;
    --stage-teal: #0e8588;
    --stage-purple: #6d4bc4;
    --stage-red: #c2412d;
    --stage-indigo: #3f51b5;
    --stage-green: #1e7f58;
    --stage-slate: #64748b;
    --tone: var(--stage-slate);
    /* The metal a surface wears; .metal-gold / -silver / -bronze set it. */
    --m-bg: var(--metal-gold-bg);
    --m-edge: var(--metal-gold-edge);
    --m-ink: var(--metal-gold-ink);
    --transition: 0.22s ease;
    /* Motion (update 12): one easing and three lengths for every movement;
       the light setting shortens them. --len is the length of a line an icon
       draws (a tick, a receipt), set per icon where it differs. */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --dur-1: .14s;
    --dur-2: .22s;
    --dur-3: .36s;
    --len: 30;
}

/* =========================================================
   DARK MODE
   The same tokens, re-valued. Nothing else in the file knows which mode it
   is in, which is the whole point of writing colours down once. Follows the
   system setting unless the person chose one (data-theme on <html>, kept in
   localStorage by baac-ui.js).
   ========================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --baac-bg: #0f1520;
        --baac-on-primary: #0e1a2b;
        --baac-surface: #161f2d;
        --baac-surface-soft: #1b2636;
        --baac-sidebar: #0a1220;
        --baac-sidebar-2: #0e1a2b;
        --baac-sidebar-3: #090f1a;
        --baac-sidebar-veil: rgba(10, 18, 32, 0.98);
        --baac-sidebar-veil-soft: rgba(10, 18, 32, 0.94);
        --baac-primary: #7ea3d6;
        --baac-primary-dark: #a9c4e8;
        --baac-primary-rgb: 126, 163, 214;
        --baac-text: #e6ebf2;
        --baac-text-soft: #9aa6b5;
        --baac-border: #263244;
        --success: #4fc08d;
        --warning: #e0a73a;
        --danger: #f07167;
        --info: #6fb0e6;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
        --scroll-thumb: rgba(230, 235, 242, 0.2);
        --scroll-thumb-hover: rgba(230, 235, 242, 0.38);
        --baac-card-top: #1c2738;
        --baac-field: #121a27;
        --baac-head-soft: #1f2a3a;
        --baac-head-strong: #243246;
        --baac-total-row: #2a3a50;
        --baac-row-soft: #1a2433;
        --baac-pill: #223044;
        --baac-pill-cool: #1f2b3c;
        --baac-line-warm: #2c3a4e;
        --baac-action: #2d5486;
        --baac-action-dark: #22426c;
        --baac-action-rgb: 45, 84, 134;
        --baac-on-action: #f1f5fb;
        --accent-purple: #a99af0;
        --metal-gold-bg: linear-gradient(135deg, rgba(201, 162, 74, 0.26) 0%, rgba(201, 162, 74, 0.07) 100%);
        --metal-gold-edge: rgba(214, 176, 79, 0.6);
        --metal-gold-ink: #ebcf8a;
        --metal-silver-bg: linear-gradient(135deg, rgba(203, 211, 222, 0.20) 0%, rgba(203, 211, 222, 0.05) 100%);
        --metal-silver-edge: rgba(203, 211, 222, 0.45);
        --metal-silver-ink: #d9e0ea;
        --metal-bronze-bg: linear-gradient(135deg, rgba(205, 127, 70, 0.25) 0%, rgba(205, 127, 70, 0.07) 100%);
        --metal-bronze-edge: rgba(214, 150, 104, 0.55);
        --metal-bronze-ink: #e8ae84;
        --stage-yellow: #f2c94c;
        --stage-blue: #6fb0e6;
        --stage-teal: #4fd1c5;
        --stage-purple: #b39cf5;
        --stage-red: #f38b76;
        --stage-indigo: #8c9eff;
        --stage-green: #4fc08d;
        --stage-slate: #a3b1c2;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --baac-bg: #0f1520;
    --baac-on-primary: #0e1a2b;
    --baac-surface: #161f2d;
    --baac-surface-soft: #1b2636;
    --baac-sidebar: #0a1220;
    --baac-sidebar-2: #0e1a2b;
    --baac-sidebar-3: #090f1a;
    --baac-sidebar-veil: rgba(10, 18, 32, 0.98);
    --baac-sidebar-veil-soft: rgba(10, 18, 32, 0.94);
    --baac-primary: #7ea3d6;
    --baac-primary-dark: #a9c4e8;
    --baac-primary-rgb: 126, 163, 214;
    --baac-text: #e6ebf2;
    --baac-text-soft: #9aa6b5;
    --baac-border: #263244;
    --success: #4fc08d;
    --warning: #e0a73a;
    --danger: #f07167;
    --info: #6fb0e6;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --scroll-thumb: rgba(230, 235, 242, 0.2);
    --scroll-thumb-hover: rgba(230, 235, 242, 0.38);
    --baac-card-top: #1c2738;
    --baac-field: #121a27;
    --baac-head-soft: #1f2a3a;
    --baac-head-strong: #243246;
    --baac-total-row: #2a3a50;
    --baac-row-soft: #1a2433;
    --baac-pill: #223044;
    --baac-pill-cool: #1f2b3c;
    --baac-line-warm: #2c3a4e;
    --baac-action: #2d5486;
    --baac-action-dark: #22426c;
    --baac-action-rgb: 45, 84, 134;
    --baac-on-action: #f1f5fb;
    --accent-purple: #a99af0;
    --metal-gold-bg: linear-gradient(135deg, rgba(201, 162, 74, 0.26) 0%, rgba(201, 162, 74, 0.07) 100%);
    --metal-gold-edge: rgba(214, 176, 79, 0.6);
    --metal-gold-ink: #ebcf8a;
    --metal-silver-bg: linear-gradient(135deg, rgba(203, 211, 222, 0.20) 0%, rgba(203, 211, 222, 0.05) 100%);
    --metal-silver-edge: rgba(203, 211, 222, 0.45);
    --metal-silver-ink: #d9e0ea;
    --metal-bronze-bg: linear-gradient(135deg, rgba(205, 127, 70, 0.25) 0%, rgba(205, 127, 70, 0.07) 100%);
    --metal-bronze-edge: rgba(214, 150, 104, 0.55);
    --metal-bronze-ink: #e8ae84;
    --stage-yellow: #f2c94c;
    --stage-blue: #6fb0e6;
    --stage-teal: #4fd1c5;
    --stage-purple: #b39cf5;
    --stage-red: #f38b76;
    --stage-indigo: #8c9eff;
    --stage-green: #4fc08d;
    --stage-slate: #a3b1c2;
}


/* A person who picked light keeps light form controls, whatever the
   computer's own setting says. */
:root[data-theme="light"] { color-scheme: light; }

/* Any bare field a page writes without the form classes still takes the
   theme's field colours instead of the browser's white box. Zero
   specificity, so every styled field keeps its own look. */
:where(.page-content, .drawer) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, textarea) {
    background-color: var(--baac-field);
    color: var(--baac-text);
    border: 1px solid var(--baac-border);
    border-radius: var(--control-radius);
}

/* =========================================================
   SCROLLBARS
   Windows draws a wide grey bar with arrow buttons by default, which made
   the sidebar and every long page look like a 2005 intranet. Here: a thin
   rounded thumb, no buttons, no track, that thickens a little under the
   pointer. Chrome, Edge and Safari read the ::-webkit-scrollbar rules;
   Firefox reads scrollbar-width / scrollbar-color. The two are kept apart
   because Chrome ignores the ::-webkit-scrollbar rules on any element that
   also sets the standard properties.
   ========================================================= */
::-webkit-scrollbar { width: var(--scroll-size); height: var(--scroll-size); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
    min-height: 44px;
    min-width: 44px;
    border: 3px solid transparent;
    border-radius: 999px;
    background-color: var(--scroll-thumb);
    background-clip: padding-box;
    transition: background-color var(--transition);
}
::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-thumb:active { border-width: 2px; background-color: var(--baac-primary); }
/* The sidebar: a light thumb on the dark panel. (Hiding it until the
   pointer is over the menu was tried: Chrome does not repaint a scrollbar
   when its container is hovered, so it stayed hidden.) */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-sidebar); }
.sidebar::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-sidebar-hover); }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
    .sidebar { scrollbar-color: var(--scroll-thumb-sidebar) transparent; }
}


/* In Arabic the sidebar is on the right, but Chrome and Edge keep the
   window's own scrollbar on the right as well -- beside the sidebar -- while
   the sidebar's scrollbar sits on its left edge, in the middle of the screen.
   The two looked swapped: the far bar moved the page, the middle one the
   menu. So on a desktop in Arabic the page scrolls inside <body> instead of
   the window: an Arabic element's scrollbar is drawn on its left, which puts
   the page's bar at the far left, the exact mirror of the English layout.
   Screen only (printing is untouched) and only with a mouse: a phone's
   scrollbars are overlays that fade away, and it keeps its native scrolling.
   static/js/app.js keeps the place on Back and Reload, which the browser
   only does by itself for the window. */
@media screen and (hover: hover) and (pointer: fine) {
    html[dir="rtl"] { height: 100%; overflow: hidden; }
    html[dir="rtl"] body { height: 100%; min-height: 0; overflow-y: auto; }
    html[dir="rtl"] body:focus { outline: none; }
}


/* Attachments: a list of what is kept, then one button that opens a drop zone. */
.attachment-panel { margin-top: 1.25rem; }
.attachment-head h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 16px; }
.attachment-head .icon { color: var(--baac-accent); }
.attachment-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(var(--baac-accent-rgb), .16); color: var(--baac-text); font-size: 11.5px; font-weight: 700; }
.attachment-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.attachment-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface-soft); }
.attachment-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--baac-accent); background: rgba(var(--baac-accent-rgb), .13); }
.attachment-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attachment-main a { font-weight: 700; color: var(--baac-text); text-decoration: none; overflow-wrap: anywhere; }
.attachment-main a:hover { color: var(--baac-accent); }
.attachment-main small { color: var(--baac-text-soft); font-size: 11.5px; }
.attachment-add > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 6px; }
.attachment-add > summary::-webkit-details-marker { display: none; }
.attachment-add[open] > summary { margin-bottom: 12px; }
.attachment-drop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.attachment-drop .file-zone, .attachment-drop textarea, .attachment-drop > .btn { grid-column: 1 / -1; }
.attachment-drop > .btn { justify-self: start; }
@media (max-width: 760px) { .attachment-drop, .attachment-row { grid-template-columns: minmax(0, 1fr); } }

/* A file field: what is on record (by name, never its storage path), then one
   zone to click or drop a file on. The real input covers the zone, unseen,
   so a click and a drop both reach it natively. */
.file-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.file-current { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--baac-surface-soft); border: 1px solid var(--baac-border); font-size: 12.5px; }
.file-current-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--baac-text); overflow-wrap: anywhere; }
.file-current-name .icon { color: var(--baac-accent); }
.file-remove { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); font-weight: 700; cursor: pointer; }
.file-remove input { width: 16px; height: 16px; accent-color: var(--danger); }
.file-zone {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px;
    border: 1.5px dashed color-mix(in srgb, var(--baac-accent) 55%, var(--baac-border)); border-radius: var(--radius-sm);
    background: rgba(var(--baac-accent-rgb), .05); color: var(--baac-text); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.file-zone:hover, .file-zone.is-dragover, .file-zone:focus-within { border-color: var(--baac-accent); background: rgba(var(--baac-accent-rgb), .11); }
.file-zone.has-file { border-style: solid; border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
.file-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-zone-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--baac-accent); background: rgba(var(--baac-accent-rgb), .15); }
.file-zone.has-file .file-zone-icon { color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); }
.file-zone-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-zone-text strong { font-size: 13px; font-weight: 700; }
.file-zone-text small { color: var(--baac-text-soft); font-size: 11.5px; overflow-wrap: anywhere; }
.file-zone .inline-image-preview { width: 52px; height: 52px; margin: 0 0 0 auto; border-radius: 10px; }
html[dir="rtl"] .file-zone .inline-image-preview { margin: 0 auto 0 0; }
.inline-image-preview[hidden] { display: none; }

/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--baac-bg);
    /* Sections can open to their natural height (update 12). */
    interpolate-size: allow-keywords;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        "IBM Plex Sans Arabic",
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--baac-text);
    background: var(--baac-bg);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {
    min-height: 100vh;
}

.sidebar-brand-text {
    min-width: 0;
}

/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {
    min-height: 100vh;

    margin-inline-start: var(--sidebar-width);

    transition: margin var(--transition);
}.topbar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 900;
    min-height: 72px;
    padding: 11px 28px;
    background: color-mix(in srgb, var(--baac-bg) 93%, transparent);
    border-bottom: 1px solid var(--baac-border);
    box-shadow:
    0 5px 18px rgba(var(--baac-primary-rgb), 0.03);
}

.topbar-start,
.topbar-end {
    display: flex;
    align-items: center;
    gap: 14px;
}

.global-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 16px;

    transform: translateY(-50%);

    color: var(--baac-text-soft);
}

/* =========================================================
   LANGUAGE BUTTON
   ========================================================= */

.topbar-language form {
    margin: 0;
}

.logout-form {
    margin: 0;
}

.logout-button:hover {
    color: var(--danger);
    background: rgba(180, 35, 24, 0.06);
}

.page-header-copy {
    min-width: 0;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-wrap: wrap;
}

/* =========================================================
   CARD SYSTEM
   ========================================================= */

.card {
    background: var(--baac-surface);

    border: 1px solid var(--baac-border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: 22px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 18px 22px;

    border-bottom: 1px solid var(--baac-border);
}

.card-title {
    margin: 0;

    font-size: 16px;
    font-weight: 700;
}

/* =========================================================
   KPI GRID
   ========================================================= */

.kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 26px;
}

.kpi-card {
    position: relative;

    min-height: 142px;

    padding: 20px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--baac-card-top) 0%,
            var(--baac-surface-soft) 100%
        );

    border: 1px solid var(--baac-border);
    border-radius: 18px;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.kpi-card:hover {
    transform: translateY(-3px);

    box-shadow: var(--shadow-md);
}

.kpi-card::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    inset-inline-end: -28px;
    top: -28px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(in srgb, var(--door) 22%, transparent),
            transparent 70%
        );
}

.kpi-label {
    position: relative;
    z-index: 1;

    font-size: 12px;
    font-weight: 700;

    color: var(--baac-text-soft);
}

.kpi-value {
    position: relative;
    z-index: 1;

    margin-top: 12px;

    font-size: 32px;
    line-height: 1;

    font-weight: 800;

    color: var(--baac-text);
}

.kpi-meta {
    position: relative;
    z-index: 1;

    margin-top: 12px;

    font-size: 11px;

    color: var(--baac-text-soft);
}

/* =========================================================
   BUTTON SYSTEM
   ========================================================= */

.btn {
    min-height: var(--control-h);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 9px 14px;

    border-radius: var(--control-radius);

    border: 1px solid transparent;

    text-decoration: none;

    font-size: var(--control-font);
    font-weight: var(--control-weight-strong);

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    color: var(--baac-on-action);

    background:
        linear-gradient(
            135deg,
            var(--baac-action-dark),
            var(--baac-action)
        );

    box-shadow:
        0 8px 18px rgba(var(--baac-action-rgb), 0.22);
}

.btn-primary:hover {
    box-shadow:
        0 12px 26px rgba(var(--baac-action-rgb), 0.30);
}

.btn-secondary {
    color: var(--baac-text);

    background: var(--baac-surface);

    border-color: var(--baac-border);
}

.btn-danger {
    color: var(--danger);

    background: var(--baac-surface);

    border-color: rgba(180, 35, 24, 0.25);
}

.table {
    width: 100%;

    border-collapse: collapse;

    min-width: 760px;
}

.table th {
    padding: 13px 16px;

    text-align: start;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.03em;

    color: var(--baac-text-soft);

    background: var(--baac-surface-soft);

    border-bottom: 1px solid var(--baac-border);
}

.table td {
    padding: 14px 16px;

    font-size: 13px;

    border-bottom: 1px solid var(--baac-border);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr {
    transition: background var(--transition);
}

.table tbody tr:hover {
    background: color-mix(in srgb, var(--door) 7%, var(--baac-surface-soft));
}

/* =========================================================
   STATUS BADGES
   ========================================================= */

.badge {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
}

/* Five tones, one meaning each, everywhere (core/templatetags/erp_status.py):
   green done, amber waiting on somebody, red a problem, grey finished with or
   not started, blue simply "at this stage". Each carries a fine edge in its
   own colour so it still reads on a white card in a bright office. */
.badge-success {
    color: var(--success);
    background: rgba(30, 127, 88, 0.12);
    box-shadow: inset 0 0 0 1px rgba(30, 127, 88, 0.28);
}

.badge-warning {
    color: var(--warning);
    background: rgba(183, 121, 31, 0.13);
    box-shadow: inset 0 0 0 1px rgba(183, 121, 31, 0.32);
}

.badge-danger {
    color: var(--danger);
    background: rgba(180, 35, 24, 0.10);
    box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.30);
}

.badge-info {
    color: var(--info);
    background: rgba(44, 106, 160, 0.10);
    box-shadow: inset 0 0 0 1px rgba(44, 106, 160, 0.26);
}

/* A state that is simply "not yet": quieter than info, never alarming. */
.badge-muted {
    color: var(--baac-text-soft);
    background: rgba(107, 111, 118, 0.10);
    box-shadow: inset 0 0 0 1px rgba(107, 111, 118, 0.22);
}

/* =========================================================
   FORM SYSTEM
   ========================================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-field {
    min-width: 0;
}

.form-field.full,
.form-grid .form-group.full {
    grid-column: 1 / -1;
}

.form-label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;
    font-weight: 700;
}

.form-control,
.form-select,
.form-textarea {
    width: 100%;

    border: 1px solid var(--baac-border);
    border-radius: 10px;

    background: var(--baac-field);

    color: var(--baac-text);

    outline: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form-control,
.form-select {
    height: 42px;

    padding: 0 12px;
}

.form-textarea {
    min-height: 110px;

    padding: 11px 12px;

    resize: vertical;
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: rgba(var(--baac-primary-rgb), 0.7);

    box-shadow:
        0 0 0 4px rgba(var(--baac-primary-rgb), 0.08);
}

/* =========================================================
   ALERT SYSTEM
   ========================================================= */

.messages {
    display: grid;
    gap: 10px;

    margin-bottom: 20px;
}

.alert {
    padding: 12px 14px;

    border-radius: 10px;

    border: 1px solid var(--baac-border);

    background: var(--baac-surface);

    font-size: 13px;
}

.alert-success {
    color: var(--success);
    border-color: rgba(47, 125, 87, 0.2);
}

.alert-error,
.alert-danger {
    color: var(--danger);
    border-color: rgba(180, 35, 24, 0.2);
}

.alert-warning {
    border-color: rgba(183, 121, 31, 0.35);
    border-inline-start: 4px solid var(--warning);
}

.alert-info {
    border-inline-start: 4px solid var(--info);
}

/* =========================================================
   RTL / LTR
   ========================================================= */

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="ltr"] body {
    direction: ltr;
}

html[dir="rtl"] .sidebar,
html[dir="rtl"] .workspace,
html[dir="rtl"] .topbar,
html[dir="rtl"] .page-content {
    direction: rtl;
}

html[dir="ltr"] .sidebar,
html[dir="ltr"] .workspace,
html[dir="ltr"] .topbar,
html[dir="ltr"] .page-content {
    direction: ltr;
}

/* =========================================================
   COLLAPSED SIDEBAR
   ========================================================= */

body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

html[dir="rtl"] body.sidebar-collapsed .sidebar {
    transform: translateX(100%);
}

body.sidebar-collapsed .workspace {
    margin-inline-start: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .sidebar {
        transform: translateX(-100%);

        box-shadow: var(--shadow-lg);
    }

    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .workspace {
        margin-inline-start: 0;
    }

    .global-search {
        display: none;
    }

    .user-info {
        display: none;
    }

    /* Specific enough to beat the plain rules written later in the file. */
    .user-menu .logout-form {
        display: none;
    }

    .sidebar .sidebar-logout {
        display: block;
    }

    /* minmax(0, …), not 1fr: a plain 1fr track may not shrink below its
       widest dropdown option, and a long contract name pushed every form
       wider than the phone. */
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sidebar-phone-only { display: none; }
.sidebar-compact-only { display: none; }
.sidebar-logout { display: none; margin: 0 12px 6px; }
.sidebar-logout-button { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: start; }
.sidebar-sound-button { width: calc(100% - 24px); margin: 0 12px 2px; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: start; }
.sidebar .sidebar-sound-button { display: none; }

/* ---- The top bar on a laptop -------------------------------------------
   With the sidebar docked, a 1366px laptop leaves the top bar about a
   thousand pixels, and the bar held more than that: the logout button was
   cut off and the whole page scrolled sideways. Two steps, each giving up
   what is already reachable elsewhere. */
@media (max-width: 1500px) {
    /* The name and role are on the profile page the avatar opens; logout
       keeps its place as an icon with its name in the tooltip. */
    .user-info { display: none; }
    .logout-text { display: none; }
    .logout-button { padding-inline: 9px; }
    /* The Ctrl K hint sat on top of the placeholder once the box narrowed. */
    .global-search .search-kbd { display: none; }
}
@media (max-width: 1280px) {
    /* Reports is already at the top of the sidebar, and My Actions joins
       it there. */
    .topbar-end .topbar-report-link { display: none; }
    .sidebar-compact-only { display: flex; }
    .global-search { width: min(300px, 100%); }
}
@media (max-width: 1100px) {
    /* The back button keeps its arrow; its label is in the tooltip. */
    .topbar-back-button span:last-child { display: none; }
    .topbar-back-button { width: var(--control-h); justify-content: center; padding: 0; }
    .global-search { width: min(210px, 100%); }
    /* "New" is its plus sign alone, as on a phone. */
    .topbar-end .topbar-new-button { padding: 0 12px; font-size: 0; }
    .topbar-end .topbar-new-button > span:last-child { display: none; }
    .topbar-end .topbar-new-button > span:first-child { font-size: 18px; line-height: 1; }
}
@media (max-width: 1000px) {
    /* The last docked step before the sidebar folds away at 900px: the theme
       follows the computer's own setting, and search narrows once more. */
    .topbar-end [data-theme-toggle] { display: none; }
    .global-search { width: min(180px, 100%); }
    /* the speaker moves into the sidebar, which is the phone's menu */
    .topbar-end [data-sound-toggle] { display: none; }
    .sidebar .sidebar-sound-button { display: flex; }
}

@media (max-width: 640px) {

    .page-header {
        flex-direction: column;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        gap: 10px;
    }

    .topbar-end {
        /* six pixels, not eight: with the Messages icon the bar holds seven
           controls and must still fit a 390px phone */
        gap: 6px;
    }

    .page-content {
        padding-inline: 14px;
    }

    .sidebar {
        width: min(88vw, 310px);
    }

    /* A phone's top bar keeps what a thumb needs: menu, new, bell, language,
       profile. The text links move into the sidebar, the theme follows the
       phone's own setting, and "New" is its plus sign alone. Without this the
       bar was 480px wide on a 390px phone and the whole page scrolled sideways. */
    .topbar-end .topbar-export-menu { display: none; }
    .topbar-end .topbar-new-button { padding: 0 11px; height: var(--control-h-phone); }
    .sidebar-phone-only { display: flex; }
    /* The seven controls close up to the phone size and the language switch
       is one letter, so nothing is pushed off the edge. */
    .topbar-end .topbar-icon-button, .topbar-end .topbar-back-button { width: var(--control-h-phone); height: var(--control-h-phone); }
    .topbar-end .topbar-language-btn { padding-inline: 9px; height: var(--control-h-phone); font-size: 0; min-width: var(--control-h-phone); }
    .topbar-end .topbar-language-btn::before { content: attr(data-short); font-size: 13px; font-weight: 700; }
    .user-avatar.user-avatar-square { width: var(--control-h-phone); height: var(--control-h-phone); }
}
.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--baac-sidebar-gradient);
    color: #ffffff;
    border-inline-end: 1px solid var(--baac-sidebar-edge);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    /* The menu keeps the section title just clicked under the pointer itself
       (app.js); the browser's own scroll anchoring would undo that. */
    overflow-anchor: none;
    transition:
    transform var(--transition),
    width var(--transition);
    /* The colour lives in the tokens at the top of this file. This rule used
    to repeat it in hex and, by coming later, silently win -- so the design
    system said #3d2412 while the screen showed #2a1c14. */
    box-shadow:
    14px 0 40px var(--baac-sidebar-shadow);
}

html[dir="rtl"] .sidebar {
    box-shadow:
        -14px 0 40px var(--baac-sidebar-shadow);
}

/* ---------- Brand area ---------- */

.sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 5;

    padding: 18px 18px 16px;

    background:
        linear-gradient(
            180deg,
            var(--baac-sidebar-veil) 0%,
            var(--baac-sidebar-veil-soft) 100%
        );

    backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--baac-sidebar-edge);
}.sidebar-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    min-height: 72px;
    gap: 13px;
}

/* ---------- Navigation ---------- */

.sidebar-nav {
    padding: 14px 12px 22px;
}.sidebar-section-title {
    text-transform: uppercase;
    margin: 20px 10px 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(var(--baac-accent-rgb), 0.46);
}.sidebar-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition);
    min-height: 43px;
    gap: 11px;
    margin-bottom: 3px;
    padding: 9px 11px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.sidebar-link:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.055);

    transform: none;
}.sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 13px;
    color: rgba(var(--baac-accent-rgb), 0.88);
}.sidebar-footer {
    margin-top: auto;
    padding: 15px 18px 19px;
    background: rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(var(--baac-accent-rgb), 0.10);
}.sidebar-footer-brand {
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.40);
}

.sidebar-footer-version {
    margin-top: 5px;

    font-size: 10px;

    color: rgba(var(--baac-accent-rgb), 0.42);
}.topbar-start {
    flex: 1;
    gap: 12px;
}

.topbar-end {
    gap: 12px;
}.topbar-icon-button {
    color: var(--baac-text);
    cursor: pointer;
    transition:
    background var(--transition),
    transform var(--transition);
    width: var(--control-h);
    height: var(--control-h);
    border-radius: var(--control-radius);
    border: 1px solid var(--baac-border);
    background: var(--baac-surface);
    box-shadow: none;
}

.topbar-icon-button:hover {
    border-color: rgba(var(--baac-primary-rgb), 0.38);

    background: var(--baac-surface);

    transform: none;
}.global-search {
    position: relative;
    width: min(520px, 100%);
}.global-search input {
    width: 100%;
    padding-inline-start: 44px;
    padding-inline-end: 16px;
    border: 1px solid var(--baac-border);
    color: var(--baac-text);
    outline: none;
    transition:
    border-color var(--transition),
    box-shadow var(--transition);
    height: var(--control-h);
    border-radius: var(--control-radius);
    background: var(--baac-surface);
    border-color: var(--baac-border);
    box-shadow: none;
    font-size: var(--control-font);
    padding-inline-end: 64px;   /* room for the Ctrl K hint */
}
/* The hint reads left-to-right (direction: ltr), and an absolutely positioned
   box resolves inset-inline-* against its OWN direction -- so in Arabic the
   logical property would pin it to the right, over the placeholder. Physical
   sides, flipped per document direction, put it at the far end either way. */
.global-search .search-kbd { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
html[dir="rtl"] .global-search .search-kbd { right: auto; left: 12px; }
.global-search-icon .icon { display: block; }

.global-search input::placeholder {
    color: var(--baac-text-soft);
}

.global-search input:focus {
    background: var(--baac-field);

    border-color: rgba(var(--baac-primary-rgb), 0.55);

    box-shadow:
        0 0 0 3px rgba(var(--baac-primary-rgb), 0.075);
}.topbar-language-btn {
    padding: 0 14px;
    border: 1px solid var(--baac-border);
    color: var(--baac-text);
    font-weight: var(--control-weight);
    cursor: pointer;
    transition:
    border-color var(--transition),
    background var(--transition);
    height: var(--control-h);
    padding-inline: 14px;
    border-radius: var(--control-radius);
    border-color: var(--baac-border);
    background: var(--baac-surface);
    font-size: 12px;
}

.topbar-language-btn:hover {
    color: var(--baac-bronze-dark);

    background: var(--baac-surface);

    border-color: rgba(var(--baac-primary-rgb), 0.40);
}.user-menu {
    display: flex;
    align-items: center;
    border-inline-start: 1px solid var(--baac-border);
    min-height: 44px;
    gap: 9px;
    padding-inline-start: 14px;
    border-inline-start-color: var(--baac-border);
}.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 800;
    width: 38px;
    height: 38px;
    font-size: 13px;
    background:
    linear-gradient(
    145deg,
    var(--baac-action),
    var(--baac-accent)
    );
    box-shadow:
    0 4px 10px rgba(var(--baac-action-rgb), 0.18);
}

.user-info {
    min-width: 105px;
}.user-info strong {
    display: block;
    line-height: 1.2;
    font-size: 12px;
    font-weight: 700;
}.user-info span {
    display: block;
    color: var(--baac-text-soft);
    margin-top: 2px;
    font-size: 10px;
}.logout-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--baac-text-soft);
    font-weight: var(--control-weight);
    cursor: pointer;
    border-radius: var(--control-radius);
    transition:
    color var(--transition),
    background var(--transition);
    padding: 7px 10px;
    font-size: var(--control-font-sm);
}

/* =========================================================
   PAGE SPACING REFINEMENT
   ========================================================= */

.page-content {
    padding: 28px 30px 34px;
    /* a soft wash of the room's colour behind the page's title */
    background-image: radial-gradient(ellipse 980px 260px at 50% 0, color-mix(in srgb, var(--door) 10%, transparent), transparent 72%);
    background-repeat: no-repeat;
}.page-header {
    display: flex;
    /* Centre, not flex-start: the copy block leads with a small eyebrow line,
    so aligning to the top left the page's main action floating above its
    own title. */
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}.page-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--baac-bronze-dark);
    margin-bottom: 6px;
    font-size: 10px;
}.page-title {
    margin: 0;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(30px, 3vw, 38px);
}.page-subtitle {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--baac-text-soft);
    line-height: 1.65;
    margin-top: 8px;
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .topbar {
        min-height: 66px;

        padding-inline: 16px;
    }

    .page-content {
        padding: 22px 16px 30px;
    }

    .sidebar-brand {
        padding-inline: 16px;
    }
}.sidebar-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    padding: 2px;
    background:
    linear-gradient(
    145deg,
    rgba(var(--baac-accent-rgb), 0.12),
    rgba(var(--baac-primary-rgb), 0.04)
    );
    border: 1px solid rgba(var(--baac-accent-rgb), 0.22);
}

.sidebar-logo {
    width: 58px;
    height: 58px;

    object-fit: contain;
    object-position: center;
}.sidebar-brand-text strong {
    display: block;
    line-height: 1.05;
    letter-spacing: 0.02em;
    font-size: 19px;
    font-weight: 800;
}.sidebar-brand-text span {
    display: block;
    margin-top: 6px;
    max-width: 145px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    line-height: 1.4;
}

/* =========================================================
   EXECUTIVE DASHBOARD
   ========================================================= */

.executive-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.executive-kpi-card {
    position: relative;
    min-width: 0;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--baac-border);
    background:
        linear-gradient(
            145deg,
            var(--baac-card-top) 0%,
            var(--baac-surface-soft) 100%
        );
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.executive-kpi-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background:
        linear-gradient(
            180deg,
            var(--baac-gold),
            var(--baac-bronze)
        );
}

.executive-kpi-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.executive-kpi-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--baac-text-soft);
}

.executive-kpi-value {
    margin-top: 8px;
    font-size: 31px;
    line-height: 1;
    font-weight: 800;
}

.executive-kpi-footer {
    margin-top: 14px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--baac-text-soft);
}

/* ---------- Main layout ---------- */

.executive-main-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, 0.72fr);

    gap: 18px;
    align-items: start;
}

.executive-main-column,
.executive-side-column {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.executive-panel {
    overflow: hidden;
}

.panel-subtitle {
    margin: 4px 0 0;
    color: var(--baac-text-soft);
    font-size: 11px;
    line-height: 1.5;
}

/* ---------- Pipeline ---------- */

.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pipeline-block {
    border: 1px solid var(--baac-border);
    border-radius: 13px;
    overflow: hidden;
}

.pipeline-heading {
    padding: 12px 14px;

    font-size: 12px;
    font-weight: 800;

    background: var(--baac-surface-soft);

    border-bottom: 1px solid var(--baac-border);
}

.pipeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    padding: 11px 14px;

    border-bottom: 1px solid var(--baac-border);

    font-size: 12px;
}

.pipeline-row:last-child {
    border-bottom: none;
}

.pipeline-row span {
    color: var(--baac-text-soft);
}

.pipeline-row strong {
    font-size: 14px;
}

/* ---------- Empty states ---------- */

.empty-state {
    min-height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: var(--baac-text-soft);
}

.empty-state.compact {
    min-height: 125px;
}

.empty-state-icon {
    margin-bottom: 10px;

    font-size: 28px;

    opacity: 0.5;
}

.empty-state strong {
    color: var(--baac-text);

    font-size: 13px;
}

/* ---------- Financial ---------- */

.financial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.financial-item {
    padding: 16px;

    border: 1px solid var(--baac-border);
    border-radius: 13px;

    background: var(--baac-surface-soft);
}

.financial-item span {
    display: block;

    color: var(--baac-text-soft);

    font-size: 11px;
    font-weight: 700;
}

.financial-item strong {
    display: block;

    margin-top: 8px;

    font-size: 25px;
}

.financial-item small {
    display: block;

    margin-top: 8px;

    color: var(--baac-text-soft);

    font-size: 10px;
    line-height: 1.45;
}

/* ---------- Quick Actions ---------- */

.quick-actions-grid {
    display: grid;
    gap: 8px;
}

.quick-action {
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px 11px;

    border: 1px solid var(--baac-border);
    border-radius: 10px;

    text-decoration: none;

    background: var(--baac-surface);

    font-size: 12px;
    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition);
}

.quick-action span {
    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(var(--baac-primary-rgb), 0.08);

    color: var(--baac-bronze-dark);

    font-weight: 800;
}

.quick-action:hover {
    background: var(--baac-surface-soft);
    border-color: rgba(var(--baac-primary-rgb), 0.30);
}

.quick-action.primary {
    color: var(--baac-on-action);

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--baac-action-dark),
            var(--baac-action)
        );
}

.quick-action.primary span {
    color: var(--baac-on-action);
    background: rgba(255,255,255,0.12);
}

/* ---------- Management attention ---------- */

.attention-row {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 9px 0;

    border-bottom: 1px solid var(--baac-border);

    font-size: 12px;
}

.attention-row:last-child {
    border-bottom: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1250px) {

    .executive-main-grid {
        grid-template-columns: 1fr;
    }

    .executive-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .pipeline-grid,
    .financial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {

    .executive-kpi-grid {
        grid-template-columns: 1fr;
    }
}.executive-kpi-icon {
    color: var(--baac-bronze-dark);
    font-size: 11px;
    font-weight: 800;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
    linear-gradient(
    145deg,
    rgba(var(--baac-accent-rgb), 0.14),
    rgba(var(--baac-primary-rgb), 0.07)
    );
    border: 1px solid rgba(var(--baac-primary-rgb), 0.12);
}

.executive-kpi-icon img {
    width: 23px;
    height: 23px;

    display: block;
    object-fit: contain;

    opacity: 0.92;

    filter:
        brightness(0)
        saturate(100%)
        invert(42%)
        sepia(42%)
        saturate(760%)
        hue-rotate(346deg)
        brightness(91%)
        contrast(90%);
}

.contract-value-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
}

.contract-value-list .badge {
    display: block !important;
    width: fit-content;
    white-space: nowrap;
}

/* ========================================================= CASH FLOW SUMMARY ========================================================= */
.cash-flow-currency { margin-top: 12px; padding: 12px;
border: 1px solid var(--baac-border);
border-radius: 10px;

background: var(--baac-surface-soft);
}
.cash-flow-header { margin-bottom: 8px;
font-size: 11px;
font-weight: 800;

color: var(--baac-bronze-dark);
}
.cash-flow-row { display: flex; align-items: center; justify-content: space-between;
gap: 12px;

padding: 6px 0;

font-size: 11px;
}
.cash-flow-row span { color: var(--baac-text-soft); }
.cash-flow-positive { color: var(--success); }
.cash-flow-negative { color: var(--danger); }
.cash-flow-net { margin-top: 4px; padding-top: 8px;
border-top: 1px solid var(--baac-border);

font-weight: 800;
}

/* ========================================================= CASH FLOW SUMMARY - SAFE LAYOUT ========================================================= */
.cash-flow-card { grid-column: 1 / -1; }
.cash-flow-card .cash-flow-currency { margin-top: 12px; padding: 12px;
border: 1px solid var(--baac-border);
border-radius: 10px;

background: var(--baac-surface-soft);
}
.cash-flow-card .cash-flow-header { margin-bottom: 8px; font-weight: 800; }
.cash-flow-card .cash-flow-row { display: flex; justify-content: space-between; align-items: center;
gap: 16px;
padding: 6px 0;
}
.cash-flow-card .cash-flow-net { margin-top: 6px; padding-top: 8px;
border-top: 1px solid var(--baac-border);
}
/* =========================================================
   INTEGRATED MODULE PAGES
   ========================================================= */
.form-card { max-width: 1180px; margin-inline: auto; }
.erp-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* Fields: one quiet box in both themes, a gold ring when you are in it, a
   red edge when it needs fixing, and a drawn chevron on every drop-down so a
   select no longer looks like a different program's control. */
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 12.5px; font-weight: 700; color: var(--baac-text); }
.form-group > small { color: var(--baac-text-soft); font-size: 11.5px; line-height: 1.5; }
.form-group-checkbox { justify-content: end; }
.form-control { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--baac-border); border-radius: 10px; background: var(--baac-field); color: var(--baac-text); font-size: 13.5px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.form-control::placeholder { color: var(--baac-text-soft); opacity: .75; }
.form-control:hover { border-color: rgba(var(--baac-action-rgb), .45); }
textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.6; }
.form-control:focus { outline: none; border-color: var(--baac-accent); box-shadow: 0 0 0 3px rgba(var(--baac-accent-rgb), .22); }
select.form-control:not([multiple]) {
    appearance: none;
    padding-inline-end: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
html[dir="rtl"] select.form-control:not([multiple]) { background-position: left 12px center; }
.has-error .form-control { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.form-group input[type="checkbox"], .form-group input[type="radio"] { width: 18px; height: 18px; accent-color: var(--baac-action); }
.field-error { font-size: 12px; color: var(--danger); font-weight: 600; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; }
.list-filter { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .35fr) auto; gap: 10px; margin-bottom: 18px; }
.erp-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.erp-table th, .erp-table td { padding: 13px 12px; border-bottom: 1px solid var(--baac-border); text-align: start; vertical-align: middle; }
.erp-table th { font-size: 12px; color: var(--baac-text-soft); background: var(--baac-surface-soft); }
.erp-table tbody tr:hover { background: var(--baac-surface-soft); }
.table-actions { display: flex; gap: 6px; white-space: nowrap; }
.empty-cell { padding: 34px !important; text-align: center !important; color: var(--baac-text-soft); }
.pagination-wrap { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.pagination-status { font-size: 13px; color: var(--baac-text-soft); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.detail-grid > div { padding: 16px; border: 1px solid var(--baac-border); border-radius: 12px; background: var(--baac-surface-soft); }
.detail-grid span { display: block; font-size: 12px; color: var(--baac-text-soft); margin-bottom: 6px; }
.detail-grid strong { font-size: 14px; }
.detail-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--baac-border); }
.is-empty-detail + .detail-section, .card-body > .detail-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.module-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.module-action-card { display: block; padding: 20px; text-decoration: none; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface); box-shadow: var(--shadow-sm); }
.module-action-card strong { display: block; margin-bottom: 7px; }
.module-action-card span { color: var(--baac-text-soft); font-size: 12px; }
.module-action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.account-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.account-card-top h3 { margin: 5px 0 0; }
.account-balance { font-size: 26px; font-weight: 800; margin: 22px 0 8px; }
.compact-panel { max-width: 720px; margin-inline: auto; }
@media (max-width: 980px) { .module-action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .account-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .erp-form .form-grid, .detail-grid, .module-action-grid, .list-filter { grid-template-columns: minmax(0, 1fr); } }
.filter-bar .form-control { flex:1 1 260px; }
/* A date field needs about 200px and no more. Letting it grow with the
   search box stretched two date pickers across a third of the screen and
   left the Apply button stranded at the far edge, a hand's width from the
   fields it applies to. */
.filter-bar .form-control[type="date"],
.filter-bar .date-field,
.filter-bar .form-control[type="month"],
.filter-bar .form-control[type="number"],
.filter-bar select.form-control { flex:0 1 200px; }
.data-table { width:100%; border-collapse:collapse; min-width:760px; }
.data-table th,.data-table td { padding:12px 11px; border-bottom:1px solid var(--baac-border); text-align:start; vertical-align:middle; }
.data-table th { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--baac-text-soft); background:var(--baac-surface-soft); }
.data-table tbody tr:hover { background:rgba(var(--baac-primary-rgb), .035); }
.table-subtext { display:block; margin-top:3px; color:var(--baac-text-soft); }
.btn-sm { min-height:var(--control-h-sm); padding:5px 10px; font-size:var(--control-font-sm); }
.two-column-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
/* A wide working area with a narrower aside (an inbox and its paste box). */
.main-aside-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:18px; align-items:start; }
.two-column-grid > *, .three-column-grid > *, .main-aside-grid > * { min-width: 0; }
.three-column-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.record-list { display:flex; flex-direction:column; gap:10px; }
.record-row { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:12px; border:1px solid var(--baac-border); border-radius:10px; background:var(--baac-surface-soft); }
.record-row > div { min-width:0; }
.record-row strong { display:block; margin-bottom:4px; }
.record-row small { color:var(--baac-text-soft); }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.summary-card { padding:17px; border:1px solid var(--baac-border); border-radius:12px; background:var(--baac-surface); box-shadow:var(--shadow-sm); }
.summary-card span { display:block; color:var(--baac-text-soft); font-size:11px; margin-bottom:8px; }
.summary-card strong { font-size:23px; }
.document-totals { display:flex; flex-direction:column; gap:8px; margin-top:18px; margin-inline-start:auto; max-width:360px; }

/* Label-over-value facts on detail pages. Wraps to one column on phones. */
.details-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px 22px; margin:6px 0 14px; }
.details-grid > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.details-grid small { color:var(--baac-text-soft); font-size:11.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.details-grid strong { font-weight: 600; overflow-wrap:anywhere; }
/* An email, a website or a phone number: one left-to-right run that never
   breaks at its hyphen or its dot, shortened with … in a narrow column (the
   whole value is in the tooltip), and a link that writes, opens or calls.
   Written by the filters in core/templatetags/erp_contact.py. */
/* Text people type -- a name, an address, a note -- keeps the direction of
   the language it was typed in: an English note on an Arabic page ends with
   its full stop, instead of starting with it. The box stays aligned with the
   page, so a column of values still lines up. */
.details-grid strong, .detail-grid strong, .detail-section p, .page-content .kv .v, .page-content dd, .document-notes { unicode-bidi:plaintext; }
html[dir="rtl"] .details-grid strong, html[dir="rtl"] .detail-grid strong, html[dir="rtl"] .page-content dd { text-align:right; }
html[dir="ltr"] .details-grid strong, html[dir="ltr"] .detail-grid strong, html[dir="ltr"] .page-content dd { text-align:left; }
/* Set by static/js/app.js on a field that has nothing in it. */
.is-empty-detail { display:none !important; }
.ltr-value { display:inline-block; max-width:100%; direction:ltr; unicode-bidi:isolate; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; color:inherit; text-decoration:none; }
a.ltr-value:hover { color:var(--baac-primary); text-decoration:underline; }
.details-grid .ltr-value { font-size:.94em; font-weight:500; }
.ltr-email { white-space:normal; overflow:visible; }
.ltr-email > span { white-space:nowrap; }

/* A short numbered explanation of a process, without list chrome. */
.plain-steps { margin:0 0 14px; padding-inline-start:1.25em; display:flex; flex-direction:column; gap:6px; }
.plain-steps li { line-height:1.45; }
.document-total-row { display:flex; justify-content:space-between; gap:20px; padding:7px 0; border-bottom:1px solid var(--baac-border); }
.document-total-row.grand-total { font-size:16px; font-weight:800; border-bottom:0; }
/* Update 15: the totals under a document are rows of "label ... figure". The
   pages write them as plain divs inside .document-totals, which had no row
   rule -- the label and its figure sat glued together. */
.document-totals > div { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:6px 0; border-bottom:1px solid var(--baac-border); }
.document-totals > div > span { color:var(--baac-text-soft); }
.document-totals > div > strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.document-totals > div.grand-total { font-size:16px; font-weight:800; border-bottom:0; }
.document-totals > div.grand-total > span { color:var(--baac-text); }
.row-danger { background:rgba(176,48,48,.06) !important; }
.row-warning { background:rgba(196,136,32,.06) !important; }
.print-toolbar { display:flex; justify-content:flex-end; gap:10px; margin-bottom:16px; }
.print-sheet { max-width:900px; margin:0 auto; padding:32px; background:#fff; color:#1f1a16; border:1px solid #ddd; }
.print-company { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; border-bottom:2px solid var(--baac-primary); padding-bottom:16px; margin-bottom:22px; }
.print-company img { max-height:64px; max-width:150px; object-fit:contain; }
.print-title { font-size:24px; font-weight:800; margin:0 0 14px; }
@media (max-width:900px){.two-column-grid,.three-column-grid,.summary-grid,.main-aside-grid{grid-template-columns:1fr}.record-row{flex-direction:column}.print-sheet{padding:18px}}
@media print { .sidebar,.topbar,.page-header,.print-toolbar,.messages { display:none !important; } .workspace,.page-content { margin:0 !important; padding:0 !important; } .print-sheet { border:0; max-width:none; padding:0; box-shadow:none; } }

/* Financial aging */
.aging-card { min-width:0; }
.aging-currency { margin-top:12px; padding:12px; border:1px solid var(--baac-border); border-radius:10px; background:var(--baac-surface-soft); }
.aging-currency > strong { display:block; margin-bottom:8px; }
.aging-row { display:flex; justify-content:space-between; gap:16px; padding:5px 0; }
.aging-row span:last-child { font-weight:700; white-space:nowrap; }
.aging-overdue { margin-top:4px; padding-top:8px; border-top:1px solid var(--baac-border); }

/* BAAC V3 professional navigation icons */
.sidebar-icon img { width:19px; height:19px; display:block; filter:none; }
.sidebar-link .sidebar-icon { color:rgba(229,176,112,.88); }
.sidebar-link:hover .sidebar-icon { color:#f4d5ac; }
.sidebar-link.active .sidebar-icon { color:#fff; }
.topbar-svg-icon { width:20px; height:20px; display:block; color:#6f4a2d; }
.notification-button:hover { background:var(--baac-surface-soft); border-color:rgba(var(--baac-primary-rgb), .45); }.notification-count {
    position:absolute; ; ; padding:0 4px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--baac-count); color:#fff; font-size:9px; font-weight:800;
    top:-3px; inset-inline-end:-5px; min-width:18px; height:18px; border:2px solid #fff; box-shadow:0 2px 7px rgba(0,0,0,.15);
}
/* Unread messages beside the sidebar's Messages link. */
.sidebar-count { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--baac-count); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.notification-button > .icon { width: 19px; height: 19px; color: var(--baac-text); }
.sidebar-link.active::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 4px;
    width: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
}
.notification-button .notification-count {
    position: absolute;
    top: -3px;
    inset-inline-end: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
}
.line-item-stack{display:grid;gap:14px}.line-item-editor{padding:16px;border:1px solid rgba(142,108,77,.18);border-radius:14px;background:rgba(255,255,255,.48)}

/* =========================================================
   RC1 NAVIGATION + DATA REGISTER UX
   ========================================================= */
.topbar-back-button {
    min-height: var(--control-h); display: inline-flex; align-items: center; gap: 8px;
    padding: 0 14px; border: 1px solid var(--baac-border); border-radius: var(--control-radius);
    background: var(--baac-surface); color: var(--baac-text); text-decoration: none;
    font-size: var(--control-font); font-weight: var(--control-weight); box-shadow: var(--shadow-sm); white-space: nowrap;
}
.topbar-back-button:hover { background: var(--baac-surface-soft); transform: translateY(-1px); }
html[dir="rtl"] .topbar-back-button span[aria-hidden="true"] { transform: rotate(180deg); }.notification-button {
    text-decoration:none;
    background:var(--baac-surface); border:1px solid var(--baac-border);
    width: var(--control-h);
    height: var(--control-h);
    min-width: var(--control-h);
    border-radius: var(--control-radius);
    display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0;
}.notification-button .topbar-svg-icon {
    flex: 0 0 19px;
    object-fit: contain;
    width: 20px; height: 20px; display: block; margin: 0;
}

.data-register-card { overflow: visible; }
.data-register-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.filter-bar-spacious { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(160px, .8fr) auto; gap: 14px; align-items: end; margin-bottom: 20px; }
.filter-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.filter-field label { font-size: 12px; font-weight: 700; color: var(--baac-text-soft); }
/* Update 15: a labelled field inside a plain .filter-bar. The bar's rule gives
   every control a 260px flex basis -- right along the row, but inside the
   field (a column) it became a 260px HEIGHT: the search box on the projects,
   assets, quality and maintenance lists stood a hand tall. */
.filter-bar > .filter-field { flex: 0 1 220px; }
.filter-bar > .filter-field-search { flex: 1 1 280px; }
.filter-bar > .filter-field .form-control,
.filter-bar > .filter-field .date-field { flex: 0 0 auto; width: 100%; }
.filter-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.data-register-table table { min-width: 900px; }
.data-register-table th, .data-register-table td { vertical-align: middle; }
.category-pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(var(--baac-primary-rgb), .09); color: var(--baac-bronze-dark); font-size: 12px; font-weight: 700; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }.empty-state span {
    max-width: 440px;
    line-height: 1.6;
    display: block; margin-top: 6px; color: var(--baac-text-soft); font-size: 13px;
}
.action-menu-panel a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--baac-text); text-decoration: none; font-size: 13px; font-weight: 600; }
.action-menu-panel a:hover { background: var(--baac-surface-soft); color: var(--baac-bronze-dark); }.filter-bar {
    display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap;
    width: 100%;
}.table-wrap {
    border: 1px solid var(--baac-border);
    background: var(--baac-surface);
    box-shadow: var(--shadow-sm);
    width: 100%; overflow-x: auto;
    border-radius: 12px;
}
.erp-table tbody tr, .data-table tbody tr { transition: background var(--transition); }
.erp-table tbody tr:hover, .data-table tbody tr:hover { background: color-mix(in srgb, var(--door) 7%, transparent); }

@media (max-width: 1050px) {
    .filter-bar-spacious { grid-template-columns: 1fr 1fr; }
    .filter-field-search { grid-column: 1 / -1; }
}
@media (max-width: 650px) { .filter-bar-spacious { grid-template-columns: 1fr; } .filter-field-search { grid-column: auto; } }

/* =========================================================
   PRINT / SAVE AS PDF
   ========================================================= */
@media print {
    @page { size: auto; margin: 14mm; }
    body { background: #fff !important; color: #111 !important; }
    .sidebar, .topbar, .page-actions, .form-actions, .pagination, .filter-bar,
    .btn, button, .no-print { display: none !important; }
    .workspace { margin: 0 !important; }
    .content, .page-content, main { padding: 0 !important; margin: 0 !important; }
    .card, .executive-panel, .executive-kpi-card { box-shadow: none !important; break-inside: avoid; border-color: #d7d7d7 !important; }
    .table-wrap { overflow: visible !important; }
    table { width: 100% !important; font-size: 10pt; }
}

/* =========================================================
   FINAL RELEASE: FINANCE WORKSPACE + ACTION MENUS
   ========================================================= */
.workspace-section {
    margin: 0 0 22px;
    padding: 20px;
    border: 1px solid var(--baac-border);
    border-radius: 16px;
    background: var(--baac-surface);
    box-shadow: var(--shadow-sm);
}
.workspace-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.workspace-section-heading h2 {
    margin: 2px 0 5px;
    font-size: 18px;
    line-height: 1.25;
}
.workspace-section-heading p {
    margin: 0;
    color: var(--baac-text-soft);
    font-size: 13px;
}
.section-kicker {
    color: var(--baac-bronze-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.finance-operation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.accounting-workspace-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accounting-card { position: relative; min-height: 132px; }
.module-step {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 9px;
    background: rgba(var(--baac-primary-rgb), .10);
    color: var(--baac-bronze-dark);
    font-size: 10px;
    font-weight: 800;
}

.action-menu { position: relative; display: inline-block; }
.action-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::marker { display: none; content: ""; }
.action-menu[open] > summary { border-color: rgba(var(--baac-primary-rgb), .55); background: var(--baac-surface-soft); }
.menu-chevron {
    display: inline-block;
    margin-inline-start: 7px;
    font-size: 12px;
    transition: transform var(--transition);
}
.action-menu[open] .menu-chevron { transform: rotate(180deg); }
.action-menu-panel {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 1200;
    min-width: 235px;
    padding: 8px;
    border: 1px solid var(--baac-border);
    border-radius: 13px;
    background: var(--baac-surface);
    box-shadow: 0 16px 38px rgba(55, 37, 25, .16);
}
.action-menu-heading {
    padding: 7px 9px 8px;
    color: var(--baac-text-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.action-menu-panel .action-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 39px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--baac-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.action-menu-panel .action-menu-item:hover,
.action-menu-panel .action-menu-item:focus-visible {
    background: var(--baac-surface-soft);
    border-color: var(--baac-border);
    color: var(--baac-bronze-dark);
    outline: none;
}
.action-menu-item small {
    min-width: 34px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(var(--baac-primary-rgb), .10);
    color: var(--baac-bronze-dark);
    text-align: center;
    font-size: 9px;
    font-weight: 800;
}
.inline-action-form { display: inline-flex; margin: 0; }
.inline-action-form .btn { margin: 0; }

.print-brand-header { display: none; }

@media (max-width: 1180px) {
    .accounting-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .finance-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .workspace-section { padding: 15px; }
    .accounting-workspace-grid,
    .finance-operation-grid { grid-template-columns: 1fr; }
    .action-menu-panel { min-width: min(235px, calc(100vw - 34px)); }
}

/* =========================================================
   FINAL RELEASE: PRINT LAYOUT
   No application scrollbars are allowed to become printed content.
   ========================================================= */
@media print {
    @page { size: A4 portrait; margin: 11mm; }
    .app-shell, .workspace, .page-content, main, .content {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .sidebar, .topbar, .page-actions, .form-actions, .pagination, .filter-bar,
    .list-filter, .print-toolbar, .messages, .btn, button, .no-print,
    details.action-menu {
        display: none !important;
    }
    .print-brand-identity {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .print-brand-copy,
    .print-document-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .print-brand-copy strong { font-size: 12pt; line-height: 1.1; }
    .print-brand-copy span,
    .print-document-copy span { color: #65584e; font-size: 7.5pt; }
    .print-document-copy { text-align: end; }

    /* Preserve the useful page title, but never print interactive actions. */
    .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 5mm !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .page-header-copy { width: 100% !important; max-width: none !important; }
    .page-eyebrow { font-size: 7.5pt !important; }
    .page-title { margin: 0 0 2mm !important; font-size: 18pt !important; line-height: 1.15 !important; }
    .page-subtitle { margin: 0 !important; font-size: 8.5pt !important; color: #5d554e !important; }

    .card, .executive-panel, .workspace-section, .executive-kpi-card,
    .summary-card, .module-action-card {
        min-width: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border-color: #d9d3cd !important;
    }
    .executive-kpi-card, .summary-card, .module-action-card { break-inside: avoid; }
    .executive-panel, .card, .workspace-section { break-inside: auto; }

    /* The root cause of the horizontal bar was overflow + fixed table min-width. */
    .table-wrap, .data-register-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        border-radius: 0 !important;
        scrollbar-width: none !important;
    }
    .table-wrap::-webkit-scrollbar,
    .data-register-table::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
    .data-register-table table,
    .erp-table,
    .data-table,
    .table-wrap table,
    table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        font-size: 7.5pt !important;
    }
    th, td {
        max-width: none !important;
        padding: 4px 5px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        vertical-align: top !important;
    }
    tfoot { display: table-footer-group; }

    .two-column-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6mm !important; }
    .three-column-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4mm !important; }
    .executive-kpi-grid, .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3mm !important; }
    .module-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3mm !important; }
    .record-row { break-inside: avoid; }
    .document-totals { max-width: 75mm !important; }
}

/* Final specificity adjustments for Finance workspace cards. */
.workspace-section .module-action-grid { margin-bottom: 0; }
.module-action-card .module-step {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 9px;
    background: rgba(var(--baac-primary-rgb), .10);
    color: var(--baac-bronze-dark);
    font-size: 10px;
    font-weight: 800;
}

/* =========================================================
   FINAL IDENTITY, DOCUMENT & NOTIFICATION SYSTEM
   ========================================================= */
.profile-identity{display:flex;align-items:center;gap:18px;min-width:0}.person-profile-header,.entity-profile-header{align-items:center}.person-avatar,.entity-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;border:1px solid var(--baac-border);background:var(--baac-surface-soft);color:var(--baac-text-soft);font-weight:700;text-align:center;line-height:1.1}.person-avatar img,.entity-logo img{width:100%;height:100%;display:block}.person-avatar img{object-fit:cover}.entity-logo img{object-fit:contain;padding:5px;background:#fff}.person-avatar .identity-initials,.entity-logo .identity-initials{padding:0;font-weight:700;letter-spacing:.02em;line-height:1}.person-avatar.is-placeholder,.entity-logo.is-placeholder{background:rgba(var(--baac-primary-rgb), .07);color:var(--baac-bronze);border-color:var(--baac-border)}.person-avatar-xs,.entity-logo-xs{width:32px;height:32px;border-radius:var(--radius-sm)}.person-avatar-xs .identity-initials,.entity-logo-xs .identity-initials{font-size:12px}.person-avatar-sm,.entity-logo-sm{width:44px;height:44px;border-radius:var(--radius-sm)}.person-avatar-sm .identity-initials,.entity-logo-sm .identity-initials{font-size:16px}.person-avatar-md,.entity-logo-md{width:58px;height:58px;border-radius:var(--radius-md)}.person-avatar-md .identity-initials,.entity-logo-md .identity-initials{font-size:21px}.person-avatar-xl,.entity-logo-xl{width:104px;height:104px;border-radius:var(--radius-md)}.person-avatar-xl .identity-initials,.entity-logo-xl .identity-initials{font-size:38px}.person-avatar-editable,.entity-logo-editable{border-style:dashed}.identity-inline{display:flex;align-items:center;gap:9px;min-width:0}.user-avatar-square{width:var(--control-h);height:var(--control-h);border-radius:var(--control-radius);overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center;text-decoration:none}.user-avatar-square img{width:100%;height:100%;object-fit:cover}.user-avatar-square .identity-initials{font-size:15px;font-weight:700;line-height:1}

.document-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.document-gallery-card{border:1px solid var(--baac-border);border-radius:10px;padding:13px;background:var(--baac-surface);min-width:0}.document-gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}.document-gallery-head small{display:block;margin-top:3px;color:var(--baac-text-soft)}.document-preview-pair{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.document-thumbnail-link{display:block;width:92px;height:72px;border:1px solid var(--baac-border);border-radius:7px;overflow:hidden;background:#fff}.document-thumbnail{width:100%;height:100%;object-fit:cover;display:block}.document-file-card{display:flex;align-items:center;gap:8px;min-height:54px;padding:8px 10px;border:1px solid var(--baac-border);border-radius:7px;text-decoration:none;color:inherit;background:var(--baac-surface-soft)}.document-file-icon{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:5px;font-size:10px;font-weight:800;background:var(--baac-surface);border:1px solid var(--baac-border)}.section-heading-inline{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading-inline h3{margin:0}

.notification-center{position:relative;display:inline-flex}.notification-dropdown{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:min(390px,calc(100vw - 28px));max-height:520px;z-index:1100;background:var(--baac-surface);border:1px solid var(--baac-border);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.16);overflow:hidden}.notification-dropdown-header,.notification-dropdown-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}.notification-dropdown-header{border-bottom:1px solid var(--baac-border)}.notification-dropdown-footer{border-top:1px solid var(--baac-border);flex-wrap:wrap}.notification-dropdown-footer form{margin:0}.notification-dropdown-list{max-height:380px;overflow:auto}.notification-dropdown-item,.notification-page-item{display:flex;gap:11px;text-decoration:none;color:inherit;border-bottom:1px solid var(--baac-border);padding:12px 14px}.notification-dropdown-item:hover,.notification-page-item:hover{background:var(--baac-surface-soft)}.notification-dropdown-item.is-unread,.notification-page-item.is-unread{font-weight:600;background:rgba(146,106,67,.07)}.notification-dropdown-item strong{display:block;font-size:13px}.notification-dropdown-item small,.notification-dropdown-item time{display:block;font-size:11px;color:var(--baac-text-soft);margin-top:3px}.notification-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:#888}.notification-dot-success{background:#27844a}.notification-dot-warning{background:#b87512}.notification-dot-danger{background:#b43b3b}.notification-dot-info{background:#477c9e}.notification-dropdown-empty{padding:28px;text-align:center;color:var(--baac-text-soft)}.notification-page-list{padding:0!important}.notification-page-item:last-child{border-bottom:0}.notification-page-item p{margin:4px 0;color:var(--baac-text-soft)}.notification-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.financial-statement-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.financial-statement-card{max-width:980px;margin-inline:auto}.financial-statement-table{width:100%;border-collapse:collapse}.financial-statement-table td,.financial-statement-table th{padding:10px 12px;border-bottom:1px solid var(--baac-border)}.financial-statement-table td:last-child,.financial-statement-table th:last-child{text-align:end;font-variant-numeric:tabular-nums}.statement-section th{padding-top:18px;font-size:1.05rem;background:var(--baac-surface-soft)}.statement-total th{border-top:1px solid var(--baac-border)}.statement-grand-total th{border-top:2px solid currentColor;border-bottom:3px double currentColor;font-size:1.04rem}.statement-warning td{font-weight:700}.report-filter-bar select,.report-filter-bar input{min-width:150px}.report-footnote{max-width:980px;margin:12px auto 0;color:var(--baac-text-soft);font-size:12px;line-height:1.6}.inline-form{display:inline-flex;margin:0}

@media(max-width:700px){.profile-identity{align-items:flex-start}.person-avatar-xl,.entity-logo-xl{width:82px;height:82px}.document-gallery{grid-template-columns:1fr}.notification-dropdown{position:fixed;top:68px;inset-inline:12px;width:auto}.financial-statement-table td,.financial-statement-table th{padding:8px 6px;font-size:12px}}

@media print{.person-avatar,.entity-logo{print-color-adjust:exact;-webkit-print-color-adjust:exact}.notification-center,.no-print,.export-actions{display:none!important}.financial-statement-card{max-width:none!important;box-shadow:none!important;border:0!important}.financial-statement-table{table-layout:fixed!important;width:100%!important}.financial-statement-table td:first-child,.financial-statement-table th:first-child{width:68%}.financial-statement-table td:last-child,.financial-statement-table th:last-child{width:32%}.report-footnote{max-width:none!important;font-size:9pt!important}}
.inline-image-preview{display:block;width:92px;height:92px;object-fit:cover;border:1px solid var(--baac-border);border-radius:8px;margin-top:8px;background:#fff}

.media-identity-link{display:inline-flex;text-decoration:none;color:inherit}.media-identity-link:focus-visible{outline:3px solid rgba(120,77,38,.25);outline-offset:3px;border-radius:10px}
.activity-item-with-person{display:flex;align-items:flex-start;gap:12px}.activity-item-copy{min-width:0;flex:1}
.notification-dropdown-item>.person-avatar,.notification-page-item>.person-avatar{flex:0 0 auto}
.ledger-opening-row{font-weight:700;background:rgba(120,77,38,.055)}

/* FINAL comparative financial-statement presentation */
.financial-statement-table.comparative th:not(:first-child),
.financial-statement-table.comparative td:not(:first-child){text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.financial-statement-table.comparative th:first-child,
.financial-statement-table.comparative td:first-child{width:56%}
.financial-statement-table.comparative th:nth-child(2),
.financial-statement-table.comparative td:nth-child(2),
.financial-statement-table.comparative th:nth-child(3),
.financial-statement-table.comparative td:nth-child(3){width:22%}
.report-filter-bar .filter-field{min-width:145px;flex:1 1 145px}
@media print{
  .financial-statement-table.comparative th:first-child,.financial-statement-table.comparative td:first-child{width:56%!important}
  .financial-statement-table.comparative th:nth-child(2),.financial-statement-table.comparative td:nth-child(2),
  .financial-statement-table.comparative th:nth-child(3),.financial-statement-table.comparative td:nth-child(3){width:22%!important}
  .financial-statement-table.comparative th:last-child,.financial-statement-table.comparative td:last-child{width:22%!important}
}

/* =========================================================
   FINAL ACCOUNTING UI REFINEMENT
   Professional registers, report filters and bilingual layout.
   ========================================================= */
.accounting-page-header {
    align-items: flex-end;
    gap: 24px;
}
.accounting-page-header .page-header-copy { max-width: 820px; }
.accounting-page-header .page-eyebrow {
    letter-spacing: .08em;
    text-transform: uppercase;
}
html[dir="rtl"] .accounting-page-header .page-eyebrow { letter-spacing: 0; text-transform: none; }

.accounting-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.accounting-summary-strip > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
    padding: 14px 16px;
    border: 1px solid var(--baac-border);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--baac-card-top), var(--baac-row-soft));
}
.accounting-summary-strip span { color: var(--baac-text-soft); font-size: 12px; font-weight: 700; }
.accounting-summary-strip strong { color: var(--baac-text); font-size: 16px; }

.accounting-register-card { overflow: hidden; }
.accounting-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 20px;
    border-bottom: 1px solid var(--baac-border);
    background: var(--baac-surface-soft);
}
.accounting-card-header h2 { margin: 0 0 4px; font-size: 16px; }
.accounting-card-header p { margin: 0; color: var(--baac-text-soft); font-size: 12px; line-height: 1.6; }
.accounting-card-body-flush { padding: 0 !important; }
.accounting-table-wrap { border-radius: 0 !important; }
.accounting-table { width: 100%; border-collapse: collapse; }
.accounting-table thead th {
    padding: 12px 13px;
    background: var(--baac-head-soft);
    color: var(--baac-text);
    border-bottom: 1px solid var(--baac-line-warm);
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
    white-space: nowrap;
}
.accounting-table tbody td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--baac-border);
    font-size: 12.5px;
    vertical-align: middle;
}
.accounting-table tbody tr:hover { background: var(--baac-surface-soft); }
.accounting-table tbody tr:last-child td { border-bottom: 0; }
.account-name-cell strong { display: block; line-height: 1.35; }
.account-name-cell small, .table-subline {
    display: block;
    margin-top: 4px;
    color: var(--baac-text-soft);
    font-size: 10.5px;
    line-height: 1.35;
}
.account-code-pill,
.account-code-inline,
.record-number-plain,
.currency-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 7px;
    background: var(--baac-pill);
    color: var(--baac-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.account-code-inline { min-height: 22px; padding: 2px 6px; margin-inline-end: 5px; font-size: 10px; }
.currency-pill { background: var(--baac-pill-cool); color: var(--baac-text); min-width: 44px; }
.record-number-link { color: var(--baac-bronze-dark); font-weight: 800; text-decoration: none; }
.record-number-link:hover { text-decoration: underline; }
.amount-cell { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.secondary-data, .muted { color: var(--baac-text-soft); }

.account-type-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
    background: var(--baac-pill);
    color: var(--baac-text-soft);
}
.account-type-asset { color: var(--success); background: color-mix(in srgb, currentColor 13%, transparent); }
.account-type-liability { color: var(--danger); background: color-mix(in srgb, currentColor 12%, transparent); }
.account-type-equity { color: var(--accent-purple); background: color-mix(in srgb, currentColor 13%, transparent); }
.account-type-revenue { color: var(--info); background: color-mix(in srgb, currentColor 13%, transparent); }
.account-type-expense { color: var(--warning); background: color-mix(in srgb, currentColor 14%, transparent); }.status-dot {
    width:8px; height:8px; border-radius:50%; margin-inline-end:6px; background:var(--baac-text-soft);
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
}
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9b948d; }
.status-dot-ok::before { background: #3d8b61; }
.status-dot-muted::before { background: #9b948d; }

.accounting-filter-card { margin-bottom: 16px; background: var(--baac-surface-soft); }
.filter-section-title { margin-bottom: 12px; color: var(--baac-text); font-size: 12px; font-weight: 800; }
.accounting-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    align-items: end;
}
.accounting-filter-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.accounting-filter-grid label > span { color: var(--baac-text-soft); font-size: 10.5px; font-weight: 700; }
.accounting-filter-grid select,
.accounting-filter-grid input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--baac-border);
    border-radius: 9px;
    background: var(--baac-field);
    color: var(--baac-text);
    outline: none;
}
.accounting-filter-grid select:focus,
.accounting-filter-grid input:focus { border-color: rgba(var(--baac-primary-rgb), .65); box-shadow: 0 0 0 3px rgba(var(--baac-primary-rgb), .08); }
.accounting-filter-wide { grid-column: span 2; }
.accounting-filter-action { display: flex; align-items: end; }
.accounting-filter-action .btn { width: 100%; min-height: var(--control-h); }
.trial-filter-grid { grid-template-columns: repeat(6, minmax(130px, 1fr)); }

.report-period-banner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--baac-border);
    border-inline-start: 3px solid var(--baac-bronze);
    border-radius: 10px;
    background: var(--baac-surface);
    font-size: 11.5px;
}
.report-period-banner span { color: var(--baac-text-soft); font-weight: 700; }
.report-period-banner strong { font-variant-numeric: tabular-nums; }
.ledger-opening-row td { background: var(--baac-row-soft) !important; border-top: 1px solid var(--baac-border); border-bottom: 1px solid var(--baac-border) !important; }
.trial-balance-table thead tr:first-child th[colspan] { text-align: center; background: var(--baac-head-strong); }
.trial-balance-table .statement-grand-total th { background: var(--baac-total-row); color: var(--baac-text); border-top: 2px solid var(--baac-primary); font-weight: 900; }

.accounting-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--baac-line-warm);
    border-radius: 10px;
    background: var(--baac-row-soft);
    color: var(--baac-text);
    font-size: 12px;
    line-height: 1.55;
}
.accounting-info-banner strong { white-space: nowrap; }
.page-section-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

.fx-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.fx-guidance-card {
    padding: 14px 15px;
    border: 1px solid var(--baac-border);
    border-radius: 11px;
    background: var(--baac-surface);
}
.fx-guidance-card span { display: block; margin-bottom: 5px; color: var(--baac-bronze-dark); font-size: 12px; font-weight: 800; }
.fx-guidance-card p { margin: 0; color: var(--baac-text-soft); font-size: 11px; line-height: 1.55; }
.fx-rate-value { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.fx-rate-value strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.fx-rate-value small { color: var(--baac-text-soft); font-size: 9.5px; font-weight: 700; }

@media (max-width: 1200px) {
    .accounting-filter-grid, .trial-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .accounting-filter-wide { grid-column: span 1; }
}
@media (max-width: 760px) {
    .accounting-summary-strip, .fx-guidance-grid { grid-template-columns: 1fr; }
    .accounting-filter-grid, .trial-filter-grid { grid-template-columns: 1fr; }
    .report-period-banner { grid-template-columns: 1fr 1fr; }
    .accounting-info-banner { flex-direction: column; }
}

/* Print brand: logo only. The system descriptor sits quietly beneath the mark. */
@media print {.print-brand-header {
    display: flex !important;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 10mm;
    padding: 0 0 5mm;
    border-bottom: 2px solid var(--baac-primary);
    break-inside: avoid;
    align-items: flex-end !important;
}
    .print-brand-mark { display: flex; flex-direction: column; align-items: center; gap: 2mm; }.print-brand-logo {
    display: block;
    width: auto !important; max-width: 46mm !important; height: 17mm !important; object-fit: contain !important;
}
    .print-system-name { color: #65584e; font-size: 7.5pt; font-weight: 600; line-height: 1.15; text-align: center; }
    .print-brand-copy { display: none !important; }.print-document-copy strong {
    line-height: 1.15;
    font-size: 13pt !important;
}
    .accounting-summary-strip, .fx-guidance-grid, .accounting-info-banner { display: none !important; }
    .accounting-card-header { padding: 0 0 3mm !important; border: 0 !important; background: transparent !important; }
    .accounting-card-header p { display: none !important; }
    .accounting-card-header h2 { font-size: 10pt !important; }
    .accounting-register-card { border: 0 !important; }
    .accounting-table thead th { background: #eee8e1 !important; font-size: 7pt !important; }
    .accounting-table tbody td { font-size: 7pt !important; }
    .accounting-table .no-print { display: none !important; }
    .report-period-banner { margin-bottom: 3mm !important; padding: 2.5mm 3mm !important; font-size: 7.5pt !important; }
    .account-type-badge, .account-code-pill, .account-code-inline, .currency-pill, .record-number-plain { border: 0 !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; }
}

/* Clean image/logo controls: never expose internal media paths beside form labels. */
/* =========================================================
   FINAL PRINT LETTERHEADS - company forms supplied by BAAC
   ========================================================= */
.print-letterhead,.print-letterhead-title{display:none}
@media print {
  @page { size:A4 portrait; margin:34mm 16mm 22mm; }
  html,body{background:#fff!important;color:#111!important;overflow:visible!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .sidebar,.topbar,.page-header,.page-actions,.form-actions,.pagination,.filter-bar,.btn,button,.messages,.no-print{display:none!important}
  .workspace,.page-content,main{margin:0!important;padding:0!important;max-width:none!important;width:auto!important;overflow:visible!important}
  .page-content>*:not(.print-letterhead){position:relative;z-index:2}
  .sheet,body>main,body>.print-letterhead-title{position:relative!important;z-index:2!important}
  .print-letterhead-title strong{display:block;font-size:15pt;font-weight:800;line-height:1.25;background:#fff!important;padding:1.2mm 4mm 0!important;border-radius:2mm!important}
  .print-letterhead-title::after{content:"";display:block;width:52mm;height:.45mm;border-radius:99px;background:#7b4d31}
  .print-letterhead-operations + .print-letterhead-title::after{background:#234f3d}
  .print-letterhead-general + .print-letterhead-title::after{background:#6b2f2b}
  .print-letterhead-title span{font-size:7.5pt;color:#6f6259}
  .card,.executive-panel,.workspace-section{box-shadow:none!important;background:rgba(255,255,255,.88)!important;border-color:#cfcfcf!important;break-inside:auto}
  .card-body{padding:4mm!important}
  table,.erp-table,.data-table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:auto!important;font-size:8.2pt!important}
  th,td{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;padding:1.6mm!important}
  thead{display:table-header-group}tr {
    break-after: auto;
    break-inside:avoid;
}
  .document-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}.document-thumbnail {
    max-width:100%!important;
    max-height:42mm!important;
}
  a{color:inherit!important;text-decoration:none!important}
}

.document-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--baac-border)}
.document-meta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;color:var(--baac-text-soft);font-size:12px}
.document-notes{margin:9px 0 0;color:var(--baac-text-soft);font-size:12px;line-height:1.55}
.document-preview-unit{display:flex;flex-direction:column;gap:6px;min-width:0}
.document-side-label{font-size:10px;font-weight:800;color:var(--baac-text-soft);text-transform:uppercase;letter-spacing:.04em}
.section-help{margin:4px 0 0;color:var(--baac-text-soft);font-size:12px;line-height:1.5}

/* FINAL FORM INTEGRATION: keep supplied letterheads visible while preserving readable ERP data. */
@media print {.print-letterhead-title {
    display:flex!important;position:relative;z-index:2;flex-direction:column;align-items:center;text-align:center;gap:2mm;margin:0 0 6mm;color:#241d18;
    margin-top:0!important;margin-bottom:6mm!important;
}
  .print-letterhead-title strong:empty{display:none!important}
  .print-letterhead-title:has(strong:empty)::after{display:none!important}
  .print-letterhead-operations~.print-letterhead-title{padding-top:1mm!important}
  .print-letterhead-general~.print-letterhead-title{padding-top:0!important}.table-wrap,.data-register-table {
    overflow:visible!important;max-width:100%!important;
    background:transparent!important;
}
}

/* FINAL document actions: secure View/Download controls. */
.document-preview-actions,.document-inline-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.document-file-static{cursor:default;text-decoration:none}
@media print{
  .document-preview-actions,.document-inline-actions,.document-actions{display:none!important}
}

/* =========================================================
   FINAL PRINT FORM VISIBILITY FIX
   The supplied company forms must occupy the physical A4 page. Chromium clips
   content positioned into @page margins, which previously hid the header/footer
   while leaving only the centre watermark visible. Keep page margins at zero
   and reserve safe content space inside the printable document instead.
   ========================================================= */
@media print {
  @page { size: A4 portrait; margin: 0 !important; }html, body {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    background: #fff !important;
    color: #17130f !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    margin:0 !important; padding:0 !important; width:210mm !important; min-height:297mm !important;
}.print-letterhead {
    top:-34mm;left:-16mm;pointer-events:none;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:210mm !important;
    height:297mm !important;
    overflow:visible !important;
    z-index:0 !important;
}
  .print-letterhead img {
    display:block !important;
    width:210mm !important;
    height:297mm !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:fill !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  main.page-content.print-form-operations {
    box-sizing:border-box !important;
    padding:34mm 14mm 21mm !important;
    min-height:297mm !important;
    background:transparent !important;
    overflow:visible !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  main.page-content.print-form-general {
    box-sizing:border-box !important;
    padding:31mm 14mm 15mm !important;
    min-height:297mm !important;
    background:transparent !important;
    overflow:visible !important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  main.page-content > .print-letterhead-title {
    position:relative !important;
    z-index:3 !important;
    margin:0 0 6mm !important;
    padding:0 !important;
  }
  main.page-content > .print-letterhead-title strong {
    background:#fff !important;
  }
  /* Browser-generated URL/date headers have no reserved CSS margin. */
  .app-shell,.app-main,.workspace { margin:0 !important; padding:0 !important; }
}

/* =========================================================
   SIMPLE-FIRST UX LAYER
   Keeps BAAC colors/identity unchanged; only reduces visual complexity.
   ========================================================= */
.simple-sidebar-nav { padding-block: 8px 16px; }
/* The six links at the top stay put while the doors scroll beneath them. */
.sidebar-primary-links {
    display: grid; gap: 4px; margin-bottom: 10px;
    position: sticky; top: var(--sidebar-brand-h); z-index: 2;
    margin-inline: -12px; padding: 6px 12px 8px;
    background: linear-gradient(180deg, var(--baac-sidebar), var(--baac-sidebar-2));
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 12px 16px -14px rgba(0, 0, 0, .65);
}
/* A short window (a laptop under the browser's own bars): the pinned links
   close up, so the sections below keep most of the menu. On a phone the menu
   is a drawer of its own, and there they scroll with the rest. */
@media (max-height: 820px) and (min-width: 901px) {
    .sidebar-primary-links { gap: 0; padding-block: 3px 5px; }
    .sidebar-primary-links .sidebar-link { min-height: 36px; padding-block: 6px; margin-bottom: 1px; }
}
@media (max-width: 900px) {
    .sidebar-primary-links { position: static; box-shadow: none; }
}
.sidebar-group { margin: 5px 8px; border-radius: 10px; }
.sidebar-group > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 11px; border-radius: 9px; color: rgba(255,255,255,.72);
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    user-select: none;
}
html[dir="rtl"] .sidebar-group > summary { letter-spacing: 0; }
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary::marker { display: none; content: ""; }
.sidebar-group > summary:hover, .sidebar-group[open] > summary { background: rgba(255,255,255,.055); color: #fff; }
.sidebar-group > summary .group-title { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.sidebar-group > summary .group-chevron { width: 15px; height: 15px; opacity: .6; transition: transform .18s ease, opacity .18s ease; }
.sidebar-group[open] > summary .group-chevron { transform: rotate(180deg); opacity: 1; }
.sidebar-group-links { display: grid; gap: 2px; padding: 2px 0 7px; }
.sidebar-group-links .sidebar-link { margin-inline: 3px; padding-block: 9px; font-size: 13px; color: var(--sidebar-child); }
.sidebar-section.workspace-navigation { margin: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-section-heading { padding: 8px 11px 5px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
html[dir="rtl"] .sidebar-section-heading { letter-spacing: 0; }
.sidebar-priority-link { font-weight: 700; }
.sidebar-group-advanced { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 5px; }

/* Second level: every screen inside a door, a section or "More / Setup". */
.sidebar-group-links .sidebar-link:hover { color: var(--sidebar-child-hover); background: rgba(var(--baac-accent-rgb), 0.10); }
/* The branches hang from one gold line that runs from the section's title
   to its last screen, with a short tick to each -- so where a section's
   screens begin and end is visible at a glance. */
.sidebar-group > .sidebar-group-links,
.workspace-navigation > .sidebar-group-links {
    position: relative;
    margin-inline-start: 17px;
    padding-inline-start: 12px;
}
.sidebar-group > .sidebar-group-links::before,
.workspace-navigation > .sidebar-group-links::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 29px;
    inset-inline-start: 0;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--sidebar-child), var(--sidebar-child-guide));
}
.sidebar-group-links > .sidebar-link { position: relative; }
.sidebar-group-links > .sidebar-link::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: -12px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--sidebar-child-guide);
}
.sidebar-group-links > .sidebar-link.active::after { width: 12px; background: var(--sidebar-child); }

/* A main section carries a gold star; the open one wears a halo. */
.door-star { width: 13px; height: 13px; color: var(--baac-accent); opacity: .7; transition: opacity .18s ease, filter .18s ease; }
.sidebar-group-door[open] > summary {
    color: #fff;
    background: linear-gradient(135deg, rgba(var(--baac-accent-rgb), .22), rgba(var(--baac-accent-rgb), .05));
    box-shadow: inset 0 0 0 1px rgba(var(--baac-accent-rgb), .45), 0 0 20px -3px rgba(var(--baac-accent-rgb), .45);
}
.sidebar-group-door[open] .door-star { fill: currentColor; opacity: 1; filter: drop-shadow(0 0 5px rgba(var(--baac-accent-rgb), .85)); }
.sidebar-group-door.is-current:not([open]) .door-star { opacity: 1; }
.sidebar-doors-heading { margin: 4px 8px 0; }

.topbar-export-menu { position: relative; }
.topbar-export-button, .topbar-report-link {
    min-height: var(--control-h); display: inline-flex; align-items: center; gap: 7px; padding: 0 14px;
    border: 1px solid var(--baac-border); border-radius: var(--control-radius); background: var(--baac-surface);
    color: var(--baac-text); text-decoration: none; font-size: var(--control-font);
    font-weight: var(--control-weight); cursor: pointer;
}
.topbar-export-button { list-style: none; }
.topbar-export-button::-webkit-details-marker { display: none; }
.topbar-export-button::marker { display: none; content: ""; }
.topbar-export-button:hover, .topbar-report-link:hover { border-color: rgba(var(--baac-primary-rgb), .55); background: var(--baac-surface-soft); }

.simple-page-header .page-subtitle { max-width: 720px; }
.simple-start-panel { margin-bottom: 22px; }
.simple-section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:10px; }
.simple-section-heading strong { display:block; font-size:16px; }
.simple-section-heading span { display:block; margin-top:3px; color:var(--baac-text-soft); font-size:12px; }
.report-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.report-launch-card { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:74px; padding:14px; border:1px solid var(--baac-border); border-radius:12px; background:var(--baac-surface); box-shadow:var(--shadow-sm); }
.report-launch-copy { min-width:0; }
.report-launch-copy strong { display:block; font-size:13px; }
.report-launch-copy span { display:block; margin-top:3px; color:var(--baac-text-soft); font-size:11px; }
.report-format-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
/* .btn-compact is .btn-sm under another name; same size, no !important. */
.btn-compact { min-height:var(--control-h-sm); padding:5px 10px; font-size:var(--control-font-sm); }

.management-print-report { background:#fff; color:#111; }
.management-print-header { text-align:center; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid #111; }
.management-print-company { font-size:15px; font-weight:800; }
.management-print-company-ar { font-size:13px; margin-top:2px; }
.management-print-header h1 { margin:9px 0 6px; font-size:20px; }
.management-print-meta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; font-size:9px; }
.management-print-section { margin:18px 0 24px; break-inside:auto; }
.management-print-section h2 { font-size:14px; margin:0 0 8px; border-bottom:1px solid #777; padding-bottom:4px; }
.management-report-table { font-size:9px; }
.management-report-table th { background:#f1f1f1 !important; color:#111 !important; border-color:#777 !important; }
.report-note { margin:0 0 8px; font-size:8px; font-style:italic; }

@media (max-width: 980px) { .report-card-grid { grid-template-columns:1fr; } }
@media (max-width: 700px) {
    .report-launch-card { align-items:flex-start; flex-direction:column; }
    .report-format-actions { width:100%; justify-content:flex-start; }
    .topbar-export-button, .topbar-report-link { padding-inline:9px; }
}
@media print {
    .management-print-report { padding:0 !important; }
    .management-print-section { break-inside:auto; page-break-inside:auto; }
    .management-report-table { width:100% !important; table-layout:auto !important; }
    .management-report-table tr { break-inside:avoid; }
}

/* Simple forms: required information first, optional empty details on demand. */
.simple-form-card { max-width: 1180px; }
.required-mark { color: var(--danger); margin-inline-start: 3px; }
.simple-optional-field.is-collapsed { display: none; }
/* "More details" is a real control, not a faint word: it is the only thing
   standing between the person and the other twenty fields. */
.simple-more-fields { display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:9px 14px;
                      border:1px solid var(--baac-border); border-radius:8px; background:var(--baac-surface-soft);
                      color:var(--baac-bronze-dark); font-weight: 700; font-size:13px; cursor:pointer; }
/* The button is shown by script only when there is something to fold; the
   display rule above must not bring back a button that has nothing to do. */
.simple-more-fields[hidden] { display:none; }
.simple-more-fields:hover { border-color:var(--baac-bronze-dark); background:var(--baac-surface); }
.simple-more-fields:focus-visible { outline:2px solid var(--baac-bronze-dark); outline-offset:2px; }
.simple-more-fields[aria-expanded="true"] span[aria-hidden] { transform:rotate(180deg); display:inline-block; }
.sticky-form-actions { position: sticky; bottom: 0; z-index: 20; padding: 12px 0; background: linear-gradient(to top, var(--baac-bg) 75%, rgba(255,255,255,0)); }
.line-item-editor-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.line-remove-button { border:0; background:transparent; color:var(--danger); font-size:12px; font-weight:700; cursor:pointer; }
.line-remove-button:hover { text-decoration:underline; }
.formset-delete-field { display:none !important; }
.line-item-editor.is-removed { display:none; }
.advanced-workspace { margin: 0 0 22px; border:1px solid var(--baac-border); border-radius:12px; background:var(--baac-surface); }
.advanced-workspace > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; }
.advanced-workspace > summary::-webkit-details-marker { display:none; }
.advanced-workspace > summary::marker { display:none; content:""; }
.advanced-workspace > summary strong { display:block; font-size:14px; }
.advanced-workspace > summary small { display:block; margin-top:2px; color:var(--baac-text-soft); font-size:11px; }
.advanced-workspace-body { padding:0 16px 16px; }
.simple-task-grid .module-action-card strong, .simple-report-grid .module-action-card strong { font-size:14px; }
.management-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.management-shortcut { display:flex; align-items:center; gap:11px; min-height:70px; padding:12px 14px; border:1px solid var(--baac-border); border-radius:12px; background:var(--baac-surface); color:var(--baac-text); text-decoration:none; box-shadow:var(--shadow-sm); }
.management-shortcut:hover { border-color:rgba(var(--baac-primary-rgb), .55); transform:translateY(-1px); }
.management-shortcut-value, .management-shortcut-icon { min-width:35px; font-size:22px; font-weight:800; color:var(--baac-bronze-dark); text-align:center; }
.management-shortcut strong, .management-shortcut small { display:block; }
.management-shortcut strong { font-size:12px; }
.management-shortcut small { margin-top:2px; color:var(--baac-text-soft); font-size:10px; }
.kpi-link { color:inherit; text-decoration:none; }
.attention-link { color:inherit; text-decoration:none; border-radius:8px; padding-inline:6px; }
.attention-link:hover { background:var(--baac-surface-soft); }
.management-money-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.money-summary-card { padding:15px; border:1px solid var(--baac-border); border-radius:12px; background:var(--baac-surface); }
.money-summary-card span, .money-summary-card small { display:block; color:var(--baac-text-soft); }
.money-summary-card span { font-size:11px; font-weight:700; }
.money-summary-card strong { display:block; margin-top:6px; font-size:20px; }
.money-summary-card small { margin-top:5px; font-size:10px; }
.flat-panel { box-shadow:none; }
@media (max-width:980px){ .management-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));}.management-money-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:620px){ .management-shortcuts,.management-money-grid{grid-template-columns:1fr;} }
.accounting-report-export { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:-6px 0 12px; flex-wrap:wrap; }
.accounting-report-export > span { margin-inline-end:4px; color:var(--baac-text-soft); font-size:11px; font-weight:700; }

/* =========================================================
   SIMPLE-FIRST UX — GLOBAL ACTIONS
   No new colors: uses the existing BAAC palette only.
   ========================================================= */
.topbar-new-menu { position: relative; }
.topbar-new-button {
    min-height: var(--control-h); display:inline-flex; align-items:center; gap:7px; padding:0 14px;
    border:1px solid var(--baac-action); border-radius:var(--control-radius); background:var(--baac-action);
    color:var(--baac-on-action); font-size:var(--control-font); font-weight:var(--control-weight-strong);
    cursor:pointer; list-style:none;
}
.topbar-new-button::-webkit-details-marker { display:none; }
.topbar-new-button::marker { display:none; content:""; }
.topbar-new-button:hover { background:var(--baac-action-dark); border-color:var(--baac-action-dark); }
.topbar-new-panel { min-width:260px; max-height:min(70vh,560px); overflow:auto; }
.topbar-new-panel .action-menu-heading { margin-top:5px; }
.topbar-new-panel .action-menu-heading:first-child { margin-top:0; }
.topbar-new-panel .action-menu-item span { display:block; font-size:12px; font-weight:800; }
.topbar-new-panel .action-menu-item small { display:block; margin-top:2px; color:var(--baac-text-soft); font-size:10px; font-weight:500; }
.simple-task-grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.simple-task-grid .module-action-card { min-height:92px; padding:16px; }
.simple-task-grid .module-action-card span { line-height:1.45; }
.simple-kpi-grid { margin-top:4px; }
.simple-module-section { margin-bottom:22px; }
.simple-module-section .section-kicker { margin-bottom:2px; }
.simple-table-note { margin:0 0 10px; color:var(--baac-text-soft); font-size:11px; }.report-filter-bar {
    flex-wrap:wrap;
    display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(130px,1fr)) auto; gap:8px; align-items:end; padding:12px; border:1px solid var(--baac-border); border-radius:12px; background:var(--baac-surface); margin-bottom:14px;
}
.report-filter-field label { display:block; margin-bottom:4px; color:var(--baac-text-soft); font-size:10px; font-weight:800; }
.report-filter-field input,.report-filter-field select { width:100%; min-height:36px; border:1px solid var(--baac-border); border-radius:8px; background:var(--baac-field); padding:7px 9px; color:var(--baac-text); }
.management-pack-card { border-color:rgba(var(--baac-primary-rgb), .42); }
.project-report-launcher { display:grid; grid-template-columns:minmax(230px,2fr) minmax(130px,1fr) minmax(130px,1fr) auto; gap:8px; align-items:end; padding:14px; border:1px solid var(--baac-border); border-radius:12px; background:var(--baac-surface); }
.project-report-launcher .report-format-actions { align-self:end; }
@media (max-width:980px){ .report-filter-bar,.project-report-launcher{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .report-filter-bar,.project-report-launcher{grid-template-columns:1fr;} .topbar-new-button{padding-inline:10px;} }

/* SIMPLE-FIRST: reduce icon noise inside grouped navigation; primary Home/Approvals/Reports keep their icons. */
.simple-sidebar-nav .sidebar-group-links .sidebar-icon { display:none; }
.simple-sidebar-nav .sidebar-group-links .sidebar-link { gap:0; padding-inline:12px; }

/* Compact per-row management menu used where administrative actions would otherwise crowd tables. */
.row-manage-menu { position:relative; display:inline-block; }
.row-manage-menu > summary { list-style:none; cursor:pointer; }
.row-manage-menu > summary::-webkit-details-marker { display:none; }
.row-manage-menu > summary::marker { display:none; content:""; }

/* Simple-first record lists: open a record by its reference/name instead of extra action buttons. */
.record-link {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    border-bottom-color: transparent;
}
.record-link:hover,
.record-link:focus-visible {
    border-bottom-color: currentColor;
}
.record-link-muted { font-weight: 600; }

/* Role workspace finance overview — uses existing BAAC palette only. */
.finance-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.finance-overview-card{border:1px solid var(--baac-border);border-radius:12px;background:var(--baac-surface);padding:15px;box-shadow:var(--shadow-sm)}
.finance-overview-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--baac-border)}
.finance-overview-head strong{font-size:18px;color:var(--baac-bronze-dark)}
.finance-overview-head span{font-size:10px;color:var(--baac-text-soft);font-weight:700}
.finance-overview-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.finance-overview-value{display:block;padding:10px;border-radius:9px;background:var(--baac-surface-soft);color:var(--baac-text);text-decoration:none}
.finance-overview-value:hover{outline:1px solid var(--baac-border)}
.finance-overview-value span,.finance-overview-value small{display:block;color:var(--baac-text-soft)}
.finance-overview-value span{font-size:10px;font-weight: 700}.finance-overview-value strong{display:block;margin:4px 0 2px;font-size:15px;font-variant-numeric:tabular-nums}.finance-overview-value small{font-size:9px}
@media(max-width:900px){.finance-overview-grid{grid-template-columns:1fr}}
@media(max-width:520px){.finance-overview-values{grid-template-columns:1fr}}

/* Personal action center: dense enough for daily work, calm enough for non-technical staff. */
.action-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.action-summary{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--baac-border);border-radius:12px;background:var(--baac-surface);box-shadow:var(--shadow-sm);text-decoration:none}
.action-summary:hover{border-color:var(--baac-bronze);transform:translateY(-1px)}
.action-summary strong{font-size:25px;color:var(--baac-bronze-dark);font-variant-numeric:tabular-nums}.action-summary span{font-size:11px;font-weight:800;color:var(--baac-text-soft)}
.action-summary-danger strong{color:var(--danger)}.action-summary-warning strong{color:var(--warning)}
.action-section{margin-bottom:16px;scroll-margin-top:90px}.action-list{padding-block:4px}
.action-row{display:grid;grid-template-columns:105px minmax(220px,1fr) 105px 20px;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--baac-border);color:inherit;text-decoration:none}
.action-row:last-child{border-bottom:0}.action-row:hover{background:var(--baac-surface-soft)}
.action-kind{display:inline-flex;width:max-content;max-width:100%;padding:5px 8px;border-radius:999px;background:var(--baac-surface-soft);color:var(--baac-bronze-dark);font-size:9px;font-weight: 800;text-transform:uppercase}
.action-main strong,.action-main small{display:block}.action-main strong{font-size:12px}.action-main small{margin-top:3px;color:var(--baac-text-soft);font-size:10px}
.action-due{font-size:10px;font-weight: 700;text-align:end;font-variant-numeric:tabular-nums}.action-row-overdue .action-due{color:var(--danger)}.action-row-today .action-due{color:var(--warning)}
.action-open{color:var(--baac-bronze-dark);font-weight:900}html[dir="rtl"] .action-open{transform:scaleX(-1)}
@media(max-width:900px){.action-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.action-row{grid-template-columns:90px minmax(180px,1fr) 90px 16px}}
@media(max-width:620px){.action-summary-grid{grid-template-columns:1fr 1fr}.action-row{grid-template-columns:1fr auto}.action-kind,.action-main{grid-column:1}.action-due,.action-open{grid-column:2}.action-due{grid-row:1}.action-open{grid-row:2}}

/* =========================================================
   Quick-add: create a related record without leaving the form
   ========================================================= */
.quick-add-wrap { display:flex; gap:6px; align-items:stretch; }
.quick-add-wrap > select { flex:1 1 auto; min-width:0; }
.quick-add-button { flex:0 0 auto; padding-inline:14px; font-weight:var(--control-weight-strong); line-height:1; }
.quick-add-dialog { border:1px solid var(--baac-border); border-radius:12px; padding:0; width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 640px); background:var(--baac-surface); color:inherit; box-shadow:0 24px 60px rgba(0,0,0,.22); }
.quick-add-dialog::backdrop { background:rgba(20,18,16,.45); }
.quick-add-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 10px; border-bottom:1px solid var(--baac-border); }
.quick-add-head .card-title { margin:0; }
.quick-add-close { border:0; background:transparent; font-size:16px; cursor:pointer; padding:6px 8px; border-radius:6px; color:var(--baac-text-soft); }
.quick-add-close:hover { background:var(--baac-surface-soft); color:inherit; }
.quick-add-body { padding:14px 18px 18px; overflow:auto; max-height:calc(min(80vh, 640px) - 60px); }
.quick-add-label { display:block; font-weight: 600; margin-bottom:6px; }
.quick-add-results { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.quick-add-result { width:100%; text-align:start; border:1px solid var(--baac-border); background:var(--baac-surface-soft); border-radius:8px; padding:10px 12px; cursor:pointer; font:inherit; color:inherit; }
.quick-add-result:hover, .quick-add-result:focus-visible { border-color:var(--baac-bronze-dark); background:var(--baac-surface); outline:none; }
.quick-add-empty { padding:10px 12px; color:var(--baac-text-soft); }
.quick-add-form .form-grid { grid-template-columns:1fr; }
.quick-add-toast { position:fixed; inset-inline-end:20px; bottom:20px; z-index:1200; max-width:min(420px, calc(100vw - 40px)); box-shadow:0 14px 34px rgba(0,0,0,.18); transition:opacity .5s ease, transform .5s ease; }
.quick-add-toast.is-leaving { opacity:0; transform:translateY(8px); }
@media (prefers-reduced-motion: reduce) { .quick-add-toast { transition:none; } }

/* =========================================================
   Charts: inline SVG, one system across every screen
   ========================================================= */
.viz-frame { margin-top: 10px; }
.viz { display:block; max-width:100%; height:auto; font-family:inherit; }
.viz-mark { cursor:default; }
.viz-mark:hover path, .viz-mark:focus-visible path { opacity:.82; }
.viz-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12px; color:var(--baac-text-soft); }
.viz-key { display:inline-flex; align-items:center; gap:6px; }
.viz-key i { width:11px; height:11px; border-radius:3px; display:inline-block; flex:0 0 auto; }
@media print { .viz-mark:hover path { opacity:1; } }

/* Remittance tracking: where the money is, before any accounting words. */
.rmt-timeline { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; }
.rmt-step { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; padding:8px 0; position:relative; }
.rmt-step + .rmt-step::before { content:""; position:absolute; inset-inline-start:13px; top:-8px; height:16px; width:2px; background:var(--baac-border); }
.rmt-dot { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:var(--baac-text-soft); background:var(--baac-surface-soft); border:1px solid var(--baac-border); }
.rmt-step.is-done .rmt-dot { color:#fff; background:var(--tone); border-color:var(--tone); }
.rmt-step.is-current .rmt-dot { color:var(--tone); background:color-mix(in srgb, var(--tone) 16%, var(--baac-surface)); border-color:var(--tone); box-shadow:0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent); }
.rmt-step-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rmt-step-body small { color:var(--baac-text-soft); }
@media (max-width: 560px) { .rmt-step { grid-template-columns:28px 1fr; } .rmt-step-state { grid-column:2; } }

/* =========================================================
   Table tools, live totals, and motion
   ========================================================= */
.table-tools { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.table-filter { max-width:280px; }
.table-tools-count { font-size:12px; color:var(--baac-text-soft); }
th.is-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.is-sortable:hover { color:var(--baac-bronze-dark,var(--baac-primary-dark)); }
th.is-sortable::after { content:"⇅"; margin-inline-start:6px; opacity:.35; font-size:11px; }
th.is-sortable[aria-sort="ascending"]::after { content:"↑"; opacity:1; }
th.is-sortable[aria-sort="descending"]::after { content:"↓"; opacity:1; }
th.is-sortable:focus-visible { outline:2px solid var(--baac-bronze-dark,var(--baac-primary-dark)); outline-offset:-2px; }

.live-total { margin:10px 0; padding:9px 12px; border:1px solid var(--baac-border); border-radius:8px;
              background:var(--baac-surface-soft); font-weight:700; text-align:end; }
.line-total { display:block; margin-top:4px; font-size:12px; font-weight:700; color:var(--baac-text-soft); }
/* The amount typed into a money field, repeated underneath in grouped digits
   with its currency and scale (see app.js). Figures keep their columns. */
.money-echo { margin-top:4px; font-size:12px; font-weight:600; color:var(--baac-primary);
              font-variant-numeric:tabular-nums; }
.money-echo bdi { font-weight:700; }
.money-echo-scale { color:var(--baac-text-soft); }
.money-echo.is-negative { color:var(--danger); }
/* Print or export any table: a button over the table and a small chooser. */
.table-print-button { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; }
.print-chooser { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface); color: var(--baac-text); box-shadow: var(--shadow-lg); }
.print-chooser::backdrop { background: rgba(10, 18, 30, .45); }
.print-chooser form { display: grid; gap: 14px; padding: 18px 20px; }
.print-chooser h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; }
.print-chooser h2 .icon { color: var(--baac-accent); }
.print-chooser-title { display: grid; gap: 6px; }
.print-chooser-title small { color: var(--baac-text-soft); font-weight: 700; }
.print-chooser fieldset { margin: 0; padding: 10px 12px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); }
.print-chooser legend { padding: 0 6px; color: var(--baac-text-soft); font-size: 12px; font-weight: 700; }
.print-chooser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; max-height: 240px; overflow: auto; }
.print-chooser label { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.print-chooser input[type="checkbox"], .print-chooser input[type="radio"] { width: 16px; height: 16px; accent-color: var(--baac-action); }
.print-chooser-way { display: flex; gap: 18px; }
.print-chooser-count { margin: 0; color: var(--baac-text-soft); font-size: 12.5px; }
.print-chooser-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dates: a dd/mm/yyyy box with a calendar button, and one calendar panel
   (baac-date.js). Months in the Iraqi names, week from Saturday. */
.date-field { position: relative; display: block; width: 100%; }
.date-field .date-text { padding-inline-end: 44px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
html[dir="rtl"] .date-field .date-text { text-align: right; }
.date-field .date-text.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.date-button {
    position: absolute; top: 50%; inset-inline-end: 5px; transform: translateY(-50%);
    width: var(--control-h-sm); height: var(--control-h-sm); display: grid; place-items: center;
    border: 0; border-radius: var(--control-radius); background: transparent; color: var(--baac-text-soft); cursor: pointer;
}
.date-button:hover, .date-button:focus-visible { color: var(--baac-accent); background: rgba(var(--baac-accent-rgb), .13); outline: none; }
.date-button:disabled { opacity: .4; cursor: default; }
.baac-cal {
    position: fixed; z-index: 1400; width: 300px; padding: 12px;
    border-radius: var(--radius-md); border: 1px solid var(--baac-border);
    background: var(--baac-surface); color: var(--baac-text); box-shadow: var(--shadow-lg);
}
.baac-cal[hidden] { display: none; }
.baac-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.baac-cal-head select {
    flex: 1 1 auto; min-width: 0; min-height: var(--control-h-sm); padding: 0 8px;
    border: 1px solid var(--baac-border); border-radius: var(--control-radius);
    background: var(--baac-field); color: var(--baac-text); font-weight: 700; font-size: 12.5px;
}
.baac-cal-head .baac-cal-year { flex: 0 0 82px; }
.baac-cal-nav {
    flex: 0 0 auto; width: var(--control-h-sm); height: var(--control-h-sm); display: grid; place-items: center;
    border: 1px solid var(--baac-border); border-radius: var(--control-radius);
    background: var(--baac-surface-soft); color: var(--baac-text); cursor: pointer;
}
.baac-cal-nav:hover { border-color: var(--baac-accent); color: var(--baac-accent); }
.baac-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.baac-cal-wd { padding: 4px 0; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--baac-text-soft); }
.baac-cal-day {
    aspect-ratio: 1; border: 0; border-radius: 9px; background: transparent; color: var(--baac-text);
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.baac-cal-day:hover, .baac-cal-day:focus-visible { background: rgba(var(--baac-accent-rgb), .15); outline: none; }
.baac-cal-day.is-other { color: var(--baac-text-soft); opacity: .45; }
.baac-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--baac-accent); }
.baac-cal-day.is-chosen { background: var(--baac-action); color: var(--baac-on-action); box-shadow: none; }
.baac-cal-day:disabled { opacity: .2; cursor: not-allowed; }
.baac-cal-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--baac-border); }
.baac-cal-link { padding: 6px 8px; border: 0; border-radius: var(--control-radius); background: transparent; color: var(--baac-accent); font-weight: 700; cursor: pointer; }
.baac-cal-link.is-quiet { color: var(--baac-text-soft); }
.baac-cal-link:hover { background: rgba(var(--baac-accent-rgb), .12); }

/* A profile (client, supplier...): only the facts that were recorded, each
   with its icon, grouped in cards. An empty group never reaches the page. */
.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.profile-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
    border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--baac-text);
    background: var(--baac-pill); box-shadow: inset 0 0 0 1px var(--baac-border);
}
.profile-chip .icon { color: var(--baac-accent); }
.profile-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.profile-layout > .card { margin: 0; }
.profile-card .card-title { display: flex; align-items: center; gap: 9px; }
.profile-card .card-title::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(to bottom, var(--baac-accent), rgba(var(--baac-accent-rgb), .35)); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.facts:not(:has(.fact)) { display: none; }
.fact {
    display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 11px 12px;
    border-radius: var(--radius-sm); background: var(--baac-surface-soft); border: 1px solid var(--baac-border);
}
.fact.is-wide { grid-column: 1 / -1; }
.fact-icon {
    flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
    color: var(--baac-accent); background: rgba(var(--baac-accent-rgb), .13);
}
.fact-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fact-body small { color: var(--baac-text-soft); font-size: 11px; font-weight: 700; }
.fact-body strong { color: var(--baac-text); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.fact-body strong p { margin: 0; }

/* Metals: the same three identities wherever a fund appears. */
.metal-gold { --m-bg: var(--metal-gold-bg); --m-edge: var(--metal-gold-edge); --m-ink: var(--metal-gold-ink); }
.metal-silver { --m-bg: var(--metal-silver-bg); --m-edge: var(--metal-silver-edge); --m-ink: var(--metal-silver-ink); }
.metal-bronze { --m-bg: var(--metal-bronze-bg); --m-edge: var(--metal-bronze-edge); --m-ink: var(--metal-bronze-ink); }
.metal-dot { display: inline-block; width: 12px; height: 12px; margin-inline-end: 8px; border-radius: 50%; background: var(--m-bg); box-shadow: inset 0 0 0 2px var(--m-edge), 0 0 0 2px color-mix(in srgb, var(--m-edge) 25%, transparent); vertical-align: -1px; }
.metal-chip { display: inline-flex; align-items: center; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--m-bg); box-shadow: inset 0 0 0 1px var(--m-edge); color: var(--m-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.metal-chip .metal-dot { width: 9px; height: 9px; margin-inline-end: 6px; }
.fund-card { border-top: 3px solid var(--m-edge); }
.fund-card .card-title { display: flex; align-items: center; }
.fund-one-total { margin: 10px 0 0; color: var(--baac-text-soft); font-size: 12.5px; }
.fund-one-total strong { color: var(--m-ink); }
.executive-kpi-card.metal-card { background: var(--m-bg); border-color: var(--m-edge); }
.executive-kpi-card.metal-card .executive-kpi-label { color: var(--m-ink); }

/* Remittance stages: the tone classes, and where they show. */
.tone-yellow { --tone: var(--stage-yellow); }
.tone-blue { --tone: var(--stage-blue); }
.tone-teal { --tone: var(--stage-teal); }
.tone-purple { --tone: var(--stage-purple); }
.tone-red { --tone: var(--stage-red); }
.tone-indigo { --tone: var(--stage-indigo); }
.tone-green { --tone: var(--stage-green); }
.tone-slate { --tone: var(--stage-slate); }
.stage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.board-column[class*="tone-"] { border-top: 3px solid var(--tone); }
.board-column-title { display: inline-flex; align-items: center; gap: 8px; }
.stage-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
.board-column[class*="tone-"] .board-card:not(.is-late):not(.is-due) { border-inline-start: 3px solid var(--tone); }
.tl-item[class*="tone-"] .tl-dot { color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, var(--baac-surface)); border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
.tl-item[class*="tone-"].kind-planned .tl-dot { background: transparent; }
.rmt-step.is-done + .rmt-step::before { background: var(--tone); }
/* The company's own stages: choosing a colour and an icon by sight. */
.st-heading { margin-bottom: 12px; }
.st-builtin { display: flex; flex-wrap: wrap; gap: 8px; }
.st-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.st-choices legend { margin-bottom: 8px; font-weight: 700; font-size: 13px; }
.st-options { display: flex; flex-wrap: wrap; gap: 8px; }
.st-option { position: relative; cursor: pointer; }
.st-option input { position: absolute; opacity: 0; pointer-events: none; }
.st-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--tone, var(--baac-primary)); }
.st-option:has(input:focus-visible) { outline: 2px solid var(--baac-primary); outline-offset: 2px; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); }
.st-icon-option { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface); font-size: 12px; font-weight: 600; }
.st-icon-option:has(input:checked) { border-color: var(--baac-primary); background: color-mix(in srgb, var(--baac-primary) 10%, var(--baac-surface)); }

/* The money view: a fund's money as one total or currency by currency. */
.money-view {
    position: relative; overflow: hidden; margin-bottom: 18px; padding: 18px 20px 20px;
    border-radius: var(--radius-lg); border: 1px solid var(--m-edge); background: var(--m-bg); box-shadow: var(--shadow-sm);
}
.money-view::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--m-edge), transparent); }
.money-view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.money-view-title { display: flex; align-items: center; margin: 0; font-size: 16px; color: var(--m-ink); }
.money-view-switch { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--control-radius); background: color-mix(in srgb, var(--baac-surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--m-edge); }
.money-view-switch button {
    min-height: var(--control-h-sm); padding: 0 14px; border: 0; border-radius: var(--control-radius);
    background: transparent; color: var(--baac-text-soft); font-size: var(--control-font-sm); font-weight: var(--control-weight); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.money-view-switch button[aria-pressed="true"] { background: var(--baac-surface); color: var(--m-ink); font-weight: var(--control-weight-strong); box-shadow: var(--shadow-sm); }
.money-view-panel[hidden] { display: none; }
.money-figures { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.money-figure { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.money-figure small { color: var(--m-ink); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.money-figure strong { color: var(--baac-text); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.money-figure em { color: var(--warning); font-size: 11.5px; font-style: normal; font-weight: 600; }
.money-view-note { margin: 12px 0 0; color: var(--baac-text-soft); font-size: 12px; }
.money-view-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--baac-text); }

/* The money integrity page: one verdict, then every check with its tick. */
.integrity-verdict .card-body { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; }
.integrity-verdict.is-good { border-inline-start:4px solid var(--success); }
.integrity-verdict.is-bad { border-inline-start:4px solid var(--danger); }
.integrity-verdict.is-good strong { color:var(--success); }
.integrity-verdict.is-bad strong { color:var(--danger); }
.integrity-list { list-style:none; margin:0; padding:0; }
.integrity-row { padding:10px 0; border-bottom:1px solid var(--baac-border); }
.integrity-row:last-child { border-bottom:0; }
.integrity-head { display:flex; gap:10px; align-items:center; }
.integrity-found { margin:6px 0 0; padding-inline-start:22px; font-variant-numeric:tabular-nums; }

/* Motion: a short, quiet settle on arrival — and nothing at all for anyone
   who has asked their system for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes baac-rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
    .executive-kpi-card, .card.executive-panel, .module-action-card { animation:baac-rise .28s ease-out both; }
    .executive-kpi-grid > :nth-child(2), .two-column-grid > :nth-child(2) { animation-delay:.04s; }
    .executive-kpi-grid > :nth-child(3) { animation-delay:.08s; }
    .executive-kpi-grid > :nth-child(4) { animation-delay:.12s; }
    .btn, .sidebar-link, .module-action-card, .record-link { transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
    .btn:active { transform:translateY(1px); }
    .module-action-card:hover { transform:translateY(-2px); }
    /* A button that submitted shows it is working, without a spinner library. */
    .btn[disabled], .btn.is-busy { opacity:.65; cursor:progress; }
}

/* Module icons carry their workspace's hue so the sidebar is scannable. */
.sidebar-link svg, .sidebar-link img.nav-icon { flex:0 0 auto; }.sidebar-link.active {
    color: #fff;
    background: rgba(var(--baac-accent-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--baac-accent-rgb), 0.28);
    position: relative;
    font-weight: 700;
}

/* First-run guide: an offer, not a modal that blocks the screen. */
.sidebar-help-link { margin:6px 12px 0; opacity:.85; }
.guide-steps li { margin-bottom:8px; }
.guide-steps strong { display:block; }

/* A statement's opening and closing rows, and any "unassigned" remainder a
   fund reports: quieter than the movements, never hidden. */
.row-muted td { color: var(--baac-text-soft); background: var(--baac-surface-soft); }

/* -------------------------------------------------------------------------
   The company's six doors
   The sidebar used to list every department at once, which is what the
   managing director called complicated. It now holds six doors, and the one
   containing the page you are on opens itself and marks the link, so the
   sidebar answers "where am I" without anyone having to remember.
   ------------------------------------------------------------------------- */
.sidebar-group-door > summary {
    letter-spacing: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.86);
}

.sidebar-group-door.is-current > summary {
    color: #fff;
}.sidebar-group-door .sidebar-link.active, .sidebar-group .sidebar-link.active {
    color: #fff;
    font-weight: 600;
    border-inline-start: 3px solid var(--baac-gold);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

[dir="rtl"] .sidebar-group-door .sidebar-link.active,
[dir="rtl"] .sidebar-group .sidebar-link.active {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Text for screen readers only: the avatar shows initials, but the
   person's name still has to be announced. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* =========================================================
   NUMERIC CELLS
   =========================================================
   253 cells across this system are marked up as numeric -- class "n" or
   class "num", two names for the same intent -- and until now the stylesheet
   defined neither. So a column of money was laid out as ordinary prose: not
   aligned on its digits, and free to wrap, which turned "USD 1,250,000.00"
   into two half-numbers on two lines and split "CN-2026-0011" down the
   middle.

   Right, not end: in English the right edge is where figures are read from,
   and in Arabic it is the side the column heading sits on. Either way the
   digits line up under each other, which is the whole point.

   tabular-nums makes every digit the same width, so a column of figures
   forms straight vertical columns of digits rather than a ragged edge. */

.erp-table .n, .erp-table .num,
.data-table .n, .data-table .num,
.financial-statement-table .n, .financial-statement-table .num,
td.n, td.num, th.n, th.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* A reference is one token. Breaking it across lines makes it unreadable and
   impossible to find with the browser's own search. */
.erp-table .record-link,
.data-table .record-link {
    white-space: nowrap;
}

/* =========================================================
   INTERACTION LAYER
   The pieces baac-ui.js drives: icons, drawer, toasts, command palette,
   skeletons, sortable headings, boards. Every colour is a token.
   ========================================================= */

/* ---------- icons: one sprite, currentColor ---------- */
.icon { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }
/* A directional icon (an arrow that means "next") mirrors in Arabic. */
html[dir="rtl"] .icon-flip { transform: scaleX(-1); }
.btn .icon { margin-inline-end: 2px; }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 1200; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(10, 18, 30, 0.42); opacity: 0; transition: opacity .22s ease; }
.drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(560px, 100vw); background: var(--baac-surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(var(--drawer-off)); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
html[dir="rtl"] .drawer-panel { --drawer-off: -100%; }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--baac-border); }
.drawer-title { margin: 0; font-size: 18px; }
.drawer-close { width: var(--control-h); height: var(--control-h); border-radius: var(--control-radius); border: 1px solid var(--baac-border); background: var(--baac-surface); color: var(--baac-text); cursor: pointer; display: grid; place-items: center; }
.drawer-close:hover { border-color: var(--baac-primary); color: var(--baac-primary); }
.drawer-body { padding: 20px 22px; overflow: auto; flex: 1; }
/* The drawer has its own title bar, so the page's h1 and buttons go; the
   eyebrow (which record) and the subtitle (planned date, what the bank said)
   stay as a short note above the form. */
.drawer-body .page-header { margin: 0 0 14px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--baac-border); box-shadow: none; background: transparent; border-radius: 0; }
.drawer-body .page-header .page-title, .drawer-body .page-header .page-actions { display: none; }
.drawer-body .page-header .page-subtitle { margin-top: 4px; }
.drawer-body .card { border: 0; box-shadow: none; padding: 0; }
body.has-drawer { overflow: hidden; }

/* ---------- toasts ---------- */
.toast-host { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 1300; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--baac-sidebar); color: #fff; box-shadow: var(--shadow-md); font-size: 13.5px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; border-inline-start: 3px solid var(--baac-accent); }
.toast.is-in { opacity: 1; transform: none; }
.toast-success { border-inline-start-color: var(--success); }
.toast-warning { border-inline-start-color: var(--warning); }
.toast-danger { border-inline-start-color: var(--danger); }

/* ---------- command palette ---------- */
.palette { position: fixed; inset: 0; z-index: 1250; }
.palette[hidden] { display: none; }
.palette-scrim { position: absolute; inset: 0; background: rgba(10, 18, 30, 0.42); opacity: 0; transition: opacity .18s ease; }
.palette-box { position: relative; width: min(640px, calc(100vw - 32px)); margin: 12vh auto 0; background: var(--baac-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-8px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
.palette.is-open .palette-scrim { opacity: 1; }
.palette.is-open .palette-box { transform: none; opacity: 1; }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--baac-border); color: var(--baac-text-soft); }
.palette-input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--baac-text); }
.palette-search kbd { font-size: 11px; border: 1px solid var(--baac-border); border-radius: 5px; padding: 2px 6px; color: var(--baac-text-soft); }
.palette-list { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow: auto; }
.palette-group { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--baac-text-soft); text-transform: uppercase; }
html[dir="rtl"] .palette-group { letter-spacing: 0; }
.palette-list li a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--baac-text); }
.palette-list li.is-active a { background: rgba(var(--baac-primary-rgb), 0.08); }
.palette-item-sub { font-size: 12px; color: var(--baac-text-soft); }
.search-kbd { font-size: 10.5px; border: 1px solid var(--baac-border); border-radius: 5px; padding: 1px 6px; color: var(--baac-text-soft); direction: ltr; margin-inline-start: auto; }

/* ---------- skeletons ---------- */
.skeleton-stack { display: grid; gap: 12px; }
.skeleton { height: 16px; border-radius: 6px; background: linear-gradient(90deg, var(--baac-surface-soft) 25%, var(--baac-border) 50%, var(--baac-surface-soft) 75%); background-size: 200% 100%; animation: baac-shimmer 1.2s infinite; }
.skeleton.short { width: 60%; }
@keyframes baac-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- theme toggle ---------- */
[data-theme-toggle] .icon-moon { display: none; }
:root[data-theme="dark"] .topbar-svg-icon { filter: invert(0.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar-svg-icon { filter: invert(0.9); } }
[data-theme-toggle][data-theme-state="dark"] .icon-sun { display: none; }
[data-theme-toggle][data-theme-state="dark"] .icon-moon { display: inline; }
@media (prefers-color-scheme: dark) {
    [data-theme-toggle][data-theme-state="auto"] .icon-sun { display: none; }
    [data-theme-toggle][data-theme-state="auto"] .icon-moon { display: inline; }
}

/* ---------- interface sounds: the speaker shows whether they are on ---------- */
[data-sound-toggle] .icon-sound-off { display: none; }
.topbar-icon-button[data-sound-toggle][data-sound-state="off"] { color: var(--baac-text-soft); }
[data-sound-toggle][data-sound-state="off"] .icon-sound-on { display: none; }
[data-sound-toggle][data-sound-state="off"] .icon-sound-off { display: inline; }

/* ---------- sortable headings: styled once, with the tables (th.is-sortable) ---------- */

/* ---------- boards ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.board-column { background: var(--baac-surface-soft); border: 1px solid var(--baac-border); border-radius: var(--radius-md); min-height: 200px; display: flex; flex-direction: column; }
.board-column-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--baac-border); font-weight: 700; font-size: 13.5px; }
.board-column-head .count { font-size: 11.5px; color: var(--baac-text-soft); font-weight: 600; background: var(--baac-surface); border: 1px solid var(--baac-border); border-radius: 999px; padding: 2px 8px; }
.board-cards { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; flex: 1; }
.board-card { background: var(--baac-surface); border: 1px solid var(--baac-border); border-radius: var(--radius-sm); padding: 12px 12px 10px; box-shadow: var(--shadow-sm); cursor: grab; transition: box-shadow .15s ease, transform .15s ease; position: relative; }
.board-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.board-card.is-late { border-inline-start: 3px solid var(--danger); }
.board-card.is-due { border-inline-start: 3px solid var(--warning); }
.board-card.is-ghost { opacity: .35; }
.board-card.is-dragging { cursor: grabbing; box-shadow: var(--shadow-lg); }
.board-card-ref { font-weight: 700; color: var(--baac-primary); font-size: 13px; text-decoration: none; }
.board-card-name { font-size: 13px; margin-top: 2px; }
.board-card-money { font-variant-numeric: tabular-nums; direction: ltr; text-align: left; font-weight: 700; margin-top: 8px; font-size: 14px; }
html[dir="rtl"] .board-card-money { text-align: right; }
.board-card-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 11.5px; color: var(--baac-text-soft); }
.board-card-age { font-weight: 700; white-space: nowrap; }
.board-card.is-late .board-card-age { color: var(--danger); }
.board-card.is-due .board-card-age { color: var(--warning); }
.board-empty { color: var(--baac-text-soft); font-size: 12.5px; text-align: center; padding: 22px 8px; border: 1px dashed var(--baac-border); border-radius: var(--radius-sm); }

/* ---------- live search ---------- */
.live-search { position: relative; }
.live-search .htmx-indicator { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
.live-search.htmx-request .htmx-indicator { opacity: 1; }

/* A table inside a card scrolls on its own on a narrow screen, never the page. */
.table-scroll { overflow-x: auto; }

/* ---------- segmented tabs (inbox states, list filters) ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--baac-surface-soft); border: 1px solid var(--baac-border); border-radius: var(--control-radius); margin-bottom: 16px; }
.seg a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: calc(var(--control-radius) - 2px); font-size: 13px; font-weight: 600; color: var(--baac-text-soft); text-decoration: none; }
.seg a:hover { color: var(--baac-text); }
.seg a.is-active { background: var(--baac-surface); color: var(--baac-primary); box-shadow: var(--shadow-sm); }
.seg .count { font-size: 11px; font-weight: 700; background: rgba(var(--baac-primary-rgb), 0.10); color: var(--baac-primary); border-radius: 999px; padding: 1px 7px; }
.seg a.is-active .count { background: var(--baac-action); color: var(--baac-on-action); }

/* ---------- plan of one remittance (planned steps, on the detail page) ---------- */
.plan-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.plan-step { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface); }
.plan-step-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--baac-surface-soft); color: var(--baac-text-soft); border: 1px solid var(--baac-border); }
.plan-step.is-done .plan-step-no { background: var(--success); color: var(--baac-surface); border-color: var(--success); }
.plan-step.is-next .plan-step-no { background: var(--baac-accent); color: var(--baac-sidebar); border-color: var(--baac-accent); }
.plan-step.is-late { border-inline-start: 3px solid var(--danger); }
.plan-step.is-skipped { opacity: .55; }
.plan-step-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-step-body strong { font-size: 13.5px; }
.plan-step-body small { color: var(--baac-text-soft); font-size: 12px; }
.plan-step-state { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.plan-step.is-late .plan-step-state { color: var(--danger); font-weight: 700; }
/* Update 15: what a stage leaves, beside its mark; the state wraps under the
   name on a narrow screen instead of pushing the row wide. */
.plan-step-left { color: var(--baac-text-soft); font-weight: 500; }
.plan-step-left b { color: var(--baac-text); font-variant-numeric: tabular-nums; }
.plan-step.is-late .plan-step-left { color: var(--baac-text-soft); font-weight: 500; }
.plan-note { margin: 10px 0 0; font-size: 12.5px; }
.plan-progress { height: 6px; border-radius: 999px; background: var(--baac-surface-soft); border: 1px solid var(--baac-border); overflow: hidden; margin-top: 10px; }
.plan-progress > span { display: block; height: 100%; background: var(--baac-accent); }

/* ---------- activity timeline (everything dated, in order) ---------- */
.tl { list-style: none; margin: 8px 0 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 8px 0; position: relative; }
.tl-item + .tl-item::before { content: ""; position: absolute; inset-inline-start: 16px; top: -10px; height: 20px; width: 2px; background: var(--baac-border); }
.tl-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--baac-surface-soft); border: 1px solid var(--baac-border); color: var(--baac-text-soft); }
.tl-item.kind-step .tl-dot, .tl-item.kind-arrived .tl-dot, .tl-item.kind-closed .tl-dot { background: rgba(var(--baac-primary-rgb), 0.10); color: var(--baac-primary); border-color: transparent; }
.tl-item.kind-alert .tl-dot { background: rgba(var(--baac-accent-rgb), 0.18); color: var(--baac-primary); border-color: transparent; }
.tl-item.kind-planned .tl-dot { border-style: dashed; }
.tl-item.is-late .tl-dot { color: var(--danger); border-color: var(--danger); }
.tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-title { font-weight: 700; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tl-when { font-weight: 600; color: var(--baac-text-soft); font-size: 12px; }
.tl-detail { color: var(--baac-text-soft); font-size: 12.5px; direction: ltr; unicode-bidi: isolate; text-align: left; }
html[dir="rtl"] .tl-detail { text-align: right; }
.tl-item.kind-planned .tl-body { color: var(--baac-text-soft); }

/* ---------- bank alert matching ---------- */
.match-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.match-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface); }
.match-row.is-best { border-color: var(--baac-accent); box-shadow: 0 0 0 3px rgba(var(--baac-accent-rgb), 0.18); }
.match-score { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; background: var(--baac-surface-soft); border: 3px solid var(--baac-border); color: var(--baac-text-soft); }
.match-score.hi { border-color: var(--success); color: var(--success); }
.match-score.mid { border-color: var(--warning); color: var(--warning); }
.match-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.match-reasons .pill { font-size: 11px; }
.alert-text { white-space: pre-wrap; direction: ltr; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--baac-surface-soft); border: 1px solid var(--baac-border); border-radius: var(--radius-sm); padding: 12px 14px; max-height: 320px; overflow: auto; }
.parsed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.parsed-grid > div { padding: 10px 12px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface); }
.parsed-grid .k { font-size: 11.5px; color: var(--baac-text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.parsed-grid .v { font-size: 15px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.parsed-grid .v.empty { color: var(--baac-text-soft); font-weight: 500; }

/* ---------- the phone: my steps ---------- */
.field-list { display: grid; gap: 12px; max-width: 640px; }
.field-card { display: block; padding: 14px 16px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.field-card.is-late { border-inline-start: 4px solid var(--danger); }
.field-card.is-today { border-inline-start: 4px solid var(--warning); }
.field-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.field-card-top strong { font-size: 15px; }
.field-card-due { font-size: 12.5px; font-weight: 700; color: var(--baac-text-soft); white-space: nowrap; }
.field-card.is-late .field-card-due { color: var(--danger); }
.field-card.is-today .field-card-due { color: var(--warning); }
.field-card-money { margin-top: 8px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.field-card-meta { margin-top: 6px; font-size: 12.5px; color: var(--baac-text-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.field-card-cta { margin-top: 12px; }
.field-card-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 640px) {
  .plan-step { grid-template-columns: 30px 1fr; }
  .plan-step-state { grid-column: 2; }
  .match-row { grid-template-columns: 56px 1fr; }
  .match-row .btn { grid-column: 2; }
}

/* ---------- department reports: the day's board and one report ---------- */
.dr-daybar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface); box-shadow: var(--shadow-sm); }
.dr-day { display: flex; flex-direction: column; min-width: 110px; line-height: 1.25; }
.dr-day strong { font-size: 15px; }
.dr-day span { font-size: 12.5px; color: var(--baac-text-soft); font-variant-numeric: tabular-nums; }
.dr-pick { flex: 0 1 200px; margin: 0; }
.dr-progress { margin-inline-start: auto; font-size: 12.5px; font-weight: 700; color: var(--baac-text-soft); }
[dir="rtl"] .dr-back, [dir="rtl"] .dr-forward { transform: scaleX(-1); }
.dr-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 20px; }
.dr-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--baac-border); border-inline-start: 4px solid var(--tone); border-radius: var(--radius-md); background: var(--baac-surface); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
.dr-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dr-card.state-issued { background: color-mix(in srgb, var(--stage-green) 6%, var(--baac-surface)); }
.dr-card-body { min-width: 0; }
.dr-card-body strong { display: block; font-size: 14.5px; }
.dr-card-body small { display: block; margin-top: 2px; font-size: 12px; color: var(--baac-text-soft); }
.dr-card-foot { grid-column: 1 / -1; font-size: 11.5px; color: var(--baac-text-soft); }
.dr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-quiet { margin: 0; color: var(--baac-text-soft); }
.dr-head .page-title { display: flex; align-items: center; gap: 12px; }
.dr-seal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--stage-green) 40%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--stage-green) 8%, var(--baac-surface)); }
.dr-seal > .icon { color: var(--stage-green); }
.dr-seal > span { flex: 1 1 320px; }
.dr-confirm { position: relative; }
.dr-confirm > summary { list-style: none; cursor: pointer; }
.dr-confirm > summary::-webkit-details-marker { display: none; }
.dr-confirm-body { margin-top: 10px; padding: 12px 14px; max-width: 460px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface-soft); }
.dr-confirm-body p { margin: 0 0 10px; font-size: 13px; }
.dr-section { margin-bottom: 20px; }
.dr-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.dr-section-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--baac-gold); }
.dr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dr-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--baac-border); border-top: 3px solid var(--tone); border-radius: var(--radius-md); background: var(--baac-surface); box-shadow: var(--shadow-sm); }
.dr-kpi.is-success { --tone: var(--stage-green); }
.dr-kpi.is-warning { --tone: var(--stage-yellow); }
.dr-kpi.is-danger { --tone: var(--stage-red); }
.dr-kpi.is-info { --tone: var(--stage-blue); }
.dr-kpi.is-muted { --tone: var(--stage-slate); }
.dr-kpi > small { font-size: 12px; font-weight: 700; color: var(--baac-text-soft); }
.dr-kpi strong { display: flex; flex-direction: column; align-items: flex-start; font-size: 19px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dr-kpi.is-danger strong { color: var(--tone); }
.dr-kpi > span { font-size: 11.5px; color: var(--baac-text-soft); }
.dr-table-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dr-quiet-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.dr-quiet-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--stage-green) 8%, var(--baac-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-green) 22%, transparent); font-size: 12.5px; color: var(--baac-text-soft); }
.dr-quiet-item .icon { color: var(--stage-green); }
.dr-notes-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dr-notes-form .form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0; }
.dr-note-1 { --tone: var(--stage-green); }
.dr-note-2 { --tone: var(--stage-red); }
.dr-note-3 { --tone: var(--stage-blue); }
.dr-note > label::before, .dr-note > dt::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 8px; border-radius: 50%; background: var(--tone); }
.dr-notes-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0; }
.dr-notes-read dt { font-size: 12.5px; font-weight: 700; }
.dr-notes-read dd { margin: 6px 0 0; line-height: 1.7; }

/* ---------- official letters ---------- */
.letter-form .form-group-wide { grid-column: 1 / -1; }
.letter-form textarea[data-letter-body] { min-height: 260px; font-size: 15px; line-height: 1.9; }
.letter-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.letter-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 16px; align-items: start; }
.letter-layout > .card { margin: 0; }
.letter-preview { display: block; width: 100%; aspect-ratio: 210 / 297; border: 0; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.letter-facts .facts { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .letter-layout { grid-template-columns: 1fr; }
}
.letter-rows { display: grid; gap: 8px; }
.letter-rows .record-row { color: inherit; text-decoration: none; }

/* ---------- the Permits department ---------- */
.cl-kpis { margin-bottom: 18px; }
a.dr-kpi { color: inherit; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
a.dr-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cl-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.cl-panels > .card { margin: 0; }
.cl-rows { display: grid; gap: 8px; }
.cl-rows .record-row { color: inherit; text-decoration: none; align-items: center; }
.cl-rows .record-row small { color: var(--baac-text-soft); }
.cl-wide { grid-column: 1 / -1; }
.cl-form .cl-section { margin-bottom: 16px; }
.cl-form .form-group-wide { grid-column: 1 / -1; }
.cl-form .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-column-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 6px; }
.cl-column { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface-soft); cursor: grab; }
.cl-column.is-dragging { opacity: .55; border-style: dashed; }
.cl-column label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 13px; cursor: inherit; }
.cl-column-tools { display: inline-flex; gap: 2px; flex: none; }
.cl-move { width: 26px; height: 26px; padding: 0; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface); color: var(--baac-text-soft); cursor: pointer; font-size: 13px; line-height: 1; }
.cl-move:hover { color: var(--baac-text); border-color: var(--baac-accent); }
.cl-papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl-papers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.cl-papers small { color: var(--baac-text-soft); }
.cl-paper-kind { font-weight: 700; }
.cl-paper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.cl-paper { margin: 0; padding: 10px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface-soft); }
.cl-paper figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cl-paper-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.cl-paper-side { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.cl-paper-side img { width: 100%; aspect-ratio: 86 / 54; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--baac-border); background: #fff; }
.cl-paper-file { display: grid; place-items: center; aspect-ratio: 86 / 54; border-radius: var(--radius-sm); border: 1px dashed var(--baac-border); color: var(--baac-accent); background: var(--baac-surface); }
.cl-paper-side small { color: var(--baac-text-soft); font-size: 11.5px; text-align: center; }
.cl-vehicle-photo { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--radius-md); }
.cl-avatar-cell { width: 44px; }
.cl-pick-box { width: 36px; text-align: center; }
.cl-pick-box input { width: 18px; height: 18px; accent-color: var(--baac-accent); }
.cl-pick label { display: block; margin: 0; cursor: pointer; }
.cl-pick tr:has(input:checked) td { background: color-mix(in srgb, var(--baac-accent) 9%, var(--baac-surface)); }
.cl-gaps { margin: 6px 0 0; padding-inline-start: 18px; }
.cl-answer { margin-bottom: 16px; border-top: 3px solid var(--stage-yellow); }
.cl-outcome > div { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-outcome label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--baac-border); border-radius: 999px; font-weight: 700; cursor: pointer; }
.cl-outcome label:has(input:checked) { border-color: var(--baac-accent); background: color-mix(in srgb, var(--baac-accent) 10%, var(--baac-surface)); }
.cl-refused { margin-top: 12px; }
.cl-refused summary { cursor: pointer; font-weight: 700; }
.cl-refused-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px 14px; margin-top: 8px; }
.cl-refused-grid label { display: flex; align-items: center; gap: 8px; }
.cl-reset { margin-top: 10px; }
.letter-preview.is-landscape { aspect-ratio: 297 / 210; }
.cl-form .form-break { grid-column: 1 / -1; height: 0; }

/* ---------- print formats ---------- */
.pf-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.pf-groups > .card { margin: 0; }
.pf-sheets { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.pf-sheets figure { margin: 0; width: 150px; text-align: center; }
.pf-sheets img { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: #fff; }
.pf-sheets figcaption { margin-top: 6px; font-size: 12px; color: var(--baac-text-soft); }
.pf-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pf-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pf-preview-card { position: sticky; top: 88px; margin: 0; }
.pf-history { margin: 0; }
.pf-general { border-inline-start: 4px solid var(--baac-gold); margin-bottom: 16px; padding: 16px 18px; color: inherit; text-decoration: none; align-items: center; }
.pf-general small { display: block; color: var(--baac-text-soft); margin-top: 4px; }
.pf-sheets .pf-stamp-figure img { aspect-ratio: 1 / 1; object-fit: contain; }
.nb-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.nb-rows > .record-row { margin: 0; }
.nb-next { font-variant-numeric: tabular-nums; }
.pf-settings input[type="color"] { padding: 4px; min-height: var(--control-h); }
@media (max-width: 1100px) {
  .pf-editor { grid-template-columns: 1fr; }
  .pf-preview-card { position: static; }
}

/* =========================================================
   New remittance: the stages and what the money becomes
   ========================================================= */
.rm-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.rm-main { display: grid; gap: 16px; min-width: 0; }
.rm-side { position: sticky; top: calc(var(--topbar-height) + 16px); min-width: 0; }
.rm-stages-card .card-header { display: flex; gap: 14px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.rm-route { display: grid; gap: 6px; min-width: min(100%, 260px); }
.rm-route label { font-size: 12px; font-weight: 700; color: var(--baac-text-soft); }
.rm-stage-stack { display: grid; gap: 10px; margin-bottom: 12px; counter-reset: rm; }
.rm-stage { border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface-soft); padding: 12px; transition: opacity .16s ease, transform .16s ease; border-inline-start: 3px solid var(--baac-accent); }
.rm-stage.is-leaving { opacity: 0; transform: translateY(-4px); }
.rm-stage-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.rm-stage-number { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; background: rgba(var(--baac-accent-rgb), .16); color: var(--baac-text); }
.rm-stage-remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--baac-border); background: var(--baac-surface); color: var(--baac-text-soft); display: inline-grid; place-items: center; cursor: pointer; }
.rm-stage-remove:hover { color: var(--danger); border-color: var(--danger); }
.rm-stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.rm-stage-grid .form-group { margin: 0; }
.rm-stage-label { grid-column: 1 / -1; }
.rm-empty { color: var(--baac-text-soft); font-size: 13px; margin: 0 0 12px; }
.rm-preview .card-body { display: grid; gap: 8px; }
.rm-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; }
.rm-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-start b { font-size: 15px; }
.rm-steps { list-style: none; margin: 0; padding: 8px 0; display: grid; gap: 6px; border-block: 1px dashed var(--baac-border); }
.rm-steps li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--baac-text-soft); }
.rm-steps li span { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.rm-steps li small { color: var(--baac-text-soft); opacity: .8; }
.rm-steps li b { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-steps li.is-company b { color: var(--warning); }
.rm-steps:empty { display: none; }
.rm-sub { font-weight: 700; }
.rm-commission b { color: var(--metal-gold-ink); }
.rm-total { padding: 10px 12px; margin-block: 4px; border-radius: var(--radius-sm); background: rgba(var(--baac-accent-rgb), .12); font-size: 15px; font-weight: 800; }
.rm-total b { font-size: 17px; }
.rm-company, .rm-net { font-size: 12.5px; color: var(--baac-text-soft); }
.rm-net b.is-negative { color: var(--danger); }
.rm-warning { margin: 4px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--danger); border: 1px solid rgba(180, 35, 24, .3); font-size: 12.5px; }
.rm-note { margin: 4px 0 0; font-size: 11.5px; color: var(--baac-text-soft); }
@media (max-width: 1100px) {
  .rm-layout { grid-template-columns: 1fr; }
  .rm-side { position: static; }
}
.plan-expected { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid rgba(var(--baac-accent-rgb), .35); background: rgba(var(--baac-accent-rgb), .07); display: grid; gap: 6px; font-size: 13px; }
.plan-expected > div { display: flex; justify-content: space-between; gap: 12px; }
.plan-expected b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-expected-total { font-size: 15px; font-weight: 800; border-top: 1px dashed var(--baac-border); padding-top: 6px; }
.plan-expected small { color: var(--baac-text-soft); }

/* =========================================================
   EACH ROOM ITS COLOUR, AND THE LAST TOUCHES
   The company's rooms are told apart at a glance by one colour each, carried
   quietly: a bar before the page's eyebrow, a wash behind its title, the
   tint of a table row under the pointer, the ring around what the keyboard
   is on. Nothing here is text, so reading contrast never depends on it.
   ========================================================= */
body[data-door="com"] { --door: var(--stage-indigo); }
body[data-door="ops"] { --door: var(--stage-teal); }
body[data-door="scm"] { --door: var(--stage-blue); }
body[data-door="hra"] { --door: var(--stage-green); }
body[data-door="exe"] { --door: var(--stage-slate); }
body[data-door="qhs"] { --door: var(--stage-red); }

.page-eyebrow::before {
    content: "";
    flex: none;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--door);
}

/* Where the keyboard is: one ring, in the room's colour, for everything that
   has not drawn its own. :where() keeps it the weakest rule on the page. */
:where(a, button, summary, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--door) 75%, var(--baac-text));
    outline-offset: 2px;
}

::selection { background: color-mix(in srgb, var(--door) 30%, transparent); }

/* Nothing here yet: one calm look for every "nothing" in the system, with a
   small mark so it reads as a state, not as a forgotten line. */
.rental-empty,
.exec-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 13px 15px;
    border: 1px dashed var(--baac-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--baac-surface-soft) 70%, transparent);
    color: var(--baac-text-soft);
    font-size: 13px;
    line-height: 1.5;
}
.rental-empty::before,
.exec-empty::before,
.empty-state::before,
.alert-empty::before,
.board-empty::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: color-mix(in srgb, var(--door) 80%, var(--baac-text-soft));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .85;
}
.empty-state::before { width: 30px; height: 30px; margin-bottom: 10px; opacity: .7; }
.alert-empty::before, .board-empty::before { display: block; margin: 0 auto 8px; width: 22px; height: 22px; }

/* =========================================================
   SAFETY DEPARTMENT
   ========================================================= */
.sf-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 16px; padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--baac-border)); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--success) 12%, var(--baac-surface)), var(--baac-surface)); box-shadow: var(--shadow-sm); }
.sf-hero.is-broken { border-color: color-mix(in srgb, var(--danger) 40%, var(--baac-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 10%, var(--baac-surface)), var(--baac-surface)); }
.sf-hero-count { display: flex; align-items: baseline; gap: 12px; }
.sf-hero-count strong { font-size: 44px; line-height: 1; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }
.sf-hero.is-broken .sf-hero-count strong { color: var(--danger); }
.sf-hero-count span { font-size: 15px; font-weight: 700; }
.sf-hero p { margin: 0; color: var(--baac-text-soft); font-size: 13px; }
.sf-text { margin: 0 0 10px; line-height: 1.75; }
.sf-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 800; color: var(--baac-text-soft); }
.sf-questions { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.6; }
.sf-checked { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.sf-checked li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--baac-border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success) 8%, var(--baac-surface)); font-weight: 600; }
.sf-checked li::before { content: "✓"; color: var(--success); font-weight: 800; }
.sf-inactive { opacity: .65; }
.sf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sf-tab { padding: 7px 14px; border: 1px solid var(--baac-border); border-radius: 999px; background: var(--baac-surface); color: var(--baac-text); text-decoration: none; font-size: 13px; font-weight: 700; }
.sf-tab:hover { border-color: color-mix(in srgb, var(--door) 55%, var(--baac-border)); }
.sf-tab.is-active { border-color: var(--door); background: color-mix(in srgb, var(--door) 12%, var(--baac-surface)); }
.sf-action { align-items: center; }
.sf-action.is-overdue { border-inline-start: 3px solid var(--danger); }
.sf-action-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.sf-done { gap: 6px; }
.sf-done .form-control { min-width: min(260px, 60vw); }
.sf-answers { margin: 0; padding: 0; list-style: none; counter-reset: sf-q; display: grid; gap: 10px; }
.sf-answer { counter-increment: sf-q; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface); }
.sf-answer.is-good { border-inline-start: 3px solid var(--success); }
.sf-answer.is-bad { border-inline-start: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 5%, var(--baac-surface)); }
.sf-question { font-weight: 700; line-height: 1.55; }
.sf-question::before { content: counter(sf-q) ". "; color: var(--baac-text-soft); }
.sf-note { grid-column: 1 / -1; }
.sf-choice { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sf-pill { position: relative; display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.sf-pill input { position: absolute; opacity: 0; pointer-events: none; }
.sf-pill span { padding: 6px 14px; border: 1px solid var(--baac-border); border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--baac-surface-soft); transition: background var(--transition), border-color var(--transition); }
.sf-pill input:focus-visible + span { outline: 2px solid var(--door); outline-offset: 2px; }
.sf-ok input:checked + span { border-color: var(--success); background: color-mix(in srgb, var(--success) 16%, var(--baac-surface)); color: var(--success); }
.sf-not_ok input:checked + span { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--baac-surface)); color: var(--danger); }
.sf-na input:checked + span { border-color: var(--baac-text-soft); background: var(--baac-surface-soft); }
.sf-given { display: flex; align-items: center; gap: 8px; }
.sf-ticks ul, .sf-ticks > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-ticks label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; }
.sf-ticks label:has(input:checked) { border-color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--baac-surface)); }
.sf-closing { margin-bottom: 16px; border-top: 3px solid var(--door); }
.sf-close-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-close-form label { font-weight: 700; }
.sf-close-form .form-control { flex: 1 1 280px; }
/* key figures: a plain list of label and count, not a register to filter */
.sf-stats { width: 100%; border-collapse: collapse; }
.sf-stats th, .sf-stats td { padding: 10px 2px; border-bottom: 1px solid var(--baac-border); vertical-align: middle; }
.sf-stats tr:last-child th, .sf-stats tr:last-child td { border-bottom: 0; }
.sf-stats th { text-align: start; font-weight: 600; color: var(--baac-text-soft); }
.sf-stats td { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--baac-text); }
.sf-stats tr.total th, .sf-stats tr.total td { font-weight: 800; color: var(--baac-text); }
.sf-lines td { vertical-align: top; }
.sf-remove { text-align: center; }
.sf-fill { margin-bottom: 16px; }
.sf-fill label { font-weight: 700; }
@media (max-width: 640px) {
    .sf-answer { grid-template-columns: minmax(0, 1fr); }
    .sf-hero-count strong { font-size: 36px; }
}

/* Project timesheets: the management's confirmation queue */
.ts-count { display: inline-block; min-width: 1.6em; margin-inline-start: 4px; padding: 0 6px; border-radius: 999px; background: var(--baac-surface-soft); color: var(--baac-text-soft); font-size: 12px; text-align: center; }
.sf-tab.is-active .ts-count { background: var(--baac-surface); color: var(--baac-text); }
.ts-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface-soft); }
.ts-check-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.ts-table .ts-tick { width: 44px; text-align: center; }
.ts-table .ts-tick input { width: 18px; height: 18px; cursor: pointer; }
.ts-table tr.is-waiting td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
[dir="rtl"] .ts-table tr.is-waiting td:first-child { box-shadow: inset -3px 0 0 var(--warning); }
.ts-reason { color: var(--danger); }
/* The table scrolls sideways on a phone: anything positioned inside it must
   stay inside it, or it widens the whole page. */
.ts-table { position: relative; }
.ts-return[open] { flex-basis: 100%; }
.ts-return .dr-confirm-body { display: grid; gap: 8px; width: min(300px, 70vw); }

/* Permit to work: the head's approval panel */
.wp-decide { border-inline-start: 4px solid var(--warning); }
.wp-decide .card-title { margin-bottom: 6px; }
.wp-return[open] { flex-basis: 100%; }
.wp-return .dr-confirm-body { display: grid; gap: 8px; }

/* Financial statements on a phone: a comparative year adds a column of wide
   figures; the table tightens, and if it still does not fit it scrolls inside
   its card instead of widening the page. */
@media screen and (max-width: 560px) {
  .financial-statement-card .card-body { overflow-x: auto; }
  .financial-statement-table td, .financial-statement-table th { padding: 8px 6px; font-size: 12.5px; }
}

/* Safety passports */
.sp-table td:nth-child(2) { white-space: nowrap; }
.sp-withdraw[open] { flex-basis: 100%; }
.sp-withdraw .dr-confirm-body { display: grid; gap: 8px; }

/* A hidden label inside a sideways-scrolling table must stay inside it: as an
   absolutely placed box it escaped the scroller and widened the whole page on
   a phone. In the flow it is still read aloud and still takes no room. */
.table-wrap .visually-hidden { position: static; display: inline-block; vertical-align: top; }

/* ==========================================================================
   Money, engineered (30 September 2026)
   "No USD sitting above 10000 -- everything engineered, nothing out of line."
   An amount and its currency are one piece: never broken over two lines,
   always left-to-right inside an Arabic sentence, figures of equal width so a
   column of them lines up on the decimal point.
   ========================================================================== */
.amt { display: inline-block; white-space: nowrap; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.amt.is-neg { color: var(--danger); }
td .amt, th .amt { vertical-align: baseline; }
/* Every figure column: end-aligned, one line, equal-width digits -- so the
   decimals of a column fall under one another. */
td.num, th.num, td.n, th.n, .amount-cell, td.is-num, th.is-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
/* Several currencies in one cell: one line each, the codes in a column, the
   figures end-aligned in theirs. */
.amt-stack { display: inline-grid; grid-template-columns: auto auto; column-gap: .45em; row-gap: 2px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; vertical-align: middle; }
.amt-stack > .c { color: var(--baac-text-soft); font-weight: 600; justify-self: start; }
.amt-stack > .v { justify-self: end; }
.amt-stack > .v.is-neg { color: var(--danger); }
/* A big figure in a tile shrinks to fit its tile rather than wrap. */
/* (Only boxes whose width the layout sets: a container never sizes itself
   from its content, so a flex item with auto width would collapse.) */
.dr-kpi, .money-card, .money-summary-card, .executive-kpi-card { container-type: inline-size; }
.dr-kpi strong, .money-card strong, .money-summary-card strong, .executive-kpi-card strong, .money-figure strong { white-space: nowrap; }
.dr-kpi strong .amt, .money-card strong .amt, .money-summary-card strong .amt, .executive-kpi-card strong .amt, .executive-kpi-value .amt, .money-figure strong .amt { font-size: min(1em, 9cqi); }
.executive-kpi-value .amt { display: block; width: fit-content; }

/* ==========================================================================
   Tables, engineered (update 12)
   Every table in the system: figure columns found and end-aligned (the
   script marks them), long tables keep their heading in view, the total row
   stands apart, and nothing a table holds ever widens the page.
   ========================================================================== */
.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table, .financial-statement-table, .ledger-table, .trial-balance-table { font-variant-numeric: tabular-nums lining-nums; }
.erp-table thead th, .data-table thead th, .rental-table thead th { background: var(--baac-surface-soft); font-weight: 700; letter-spacing: .01em; }
.erp-table tbody td, .data-table tbody td { transition: background-color var(--dur-1, .14s) ease; }
.erp-table tbody tr:last-child td, .data-table tbody tr:last-child td { border-bottom: 0; }
.table-wrap.is-tall { max-height: min(74vh, 920px); overflow: auto; overscroll-behavior: contain; }
.table-wrap.is-tall thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--baac-border); }
tr.is-total > td, tr.is-total > th { font-weight: 800; background: color-mix(in srgb, var(--baac-surface-soft) 70%, var(--baac-surface)); border-top: 2px solid color-mix(in srgb, var(--baac-text) 22%, var(--baac-border)); }
tr.is-total + tr.is-total > td, tr.is-total + tr.is-total > th { border-top-width: 1px; }
td.is-num .amt, td.num .amt { text-align: end; }
@media print {
  .table-wrap.is-tall { max-height: none !important; overflow: visible !important; }
  .table-wrap.is-tall thead th { position: static; box-shadow: none; }
}

/* ==========================================================================
   Motion (update 12)
   Short and quiet: it shows what just happened and where to look, never makes
   anyone wait. Three settings -- normal, light, off -- in the sidebar, and
   nothing at all for anyone whose computer asks for reduced motion.
   ========================================================================== */
html[data-motion="reduced"] { --dur-2: .14s; --dur-3: .2s; }

/* The loading line at the top of the page. */
.baac-loadbar { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 2000; pointer-events: none; opacity: 0; }
.baac-loadbar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: linear-gradient(90deg, var(--door, var(--baac-accent)), color-mix(in srgb, var(--door, var(--baac-accent)) 55%, #fff)); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px color-mix(in srgb, var(--door, var(--baac-accent)) 60%, transparent); }
.baac-loadbar.is-loading { opacity: 1; }
.baac-loadbar.is-loading::before { width: 82%; transition: width 3.2s cubic-bezier(.1, .7, .2, 1); }

/* The motion switch in the sidebar (always there: it has no room in the top bar). */
.sidebar-motion-button { width: calc(100% - 24px); margin: 0 12px 2px; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: start; }
.sidebar-motion-button[data-motion-state="off"] .sidebar-icon { opacity: .45; }

/* The toast's own mark: a tick that draws itself, a cross, a bang. */
.toast-icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.toast-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.toast-success .toast-icon { color: #6ee7a8; }
.toast-danger .toast-icon { color: #ff9b91; }
.toast-warning .toast-icon { color: #f7c66b; }
.toast-info .toast-icon { color: #9cc8f2; }

/* A button that has sent its form shows it is working. */
.btn.is-busy { position: relative; pointer-events: none; }
.btn.is-busy::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-inline-start: 8px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; vertical-align: -2px; }

/* "In force now": a small live light. */
.live-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--success); vertical-align: 1px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  /* 1. From page to page: the content crossfades; the frame stays still. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: baac-fade-out .14s ease-in both; }
  ::view-transition-new(root) { animation: baac-fade-in .2s var(--ease-out) both; }
  .sidebar { view-transition-name: baac-sidebar; }
  .topbar { view-transition-name: baac-topbar; }
  ::view-transition-group(baac-sidebar), ::view-transition-group(baac-topbar) { animation-duration: 0s; }
  ::view-transition-old(baac-sidebar), ::view-transition-old(baac-topbar) { display: none; }
  ::view-transition-new(baac-sidebar), ::view-transition-new(baac-topbar) { animation: none; }
  html[data-motion="off"]::view-transition-old(root), html[data-motion="off"]::view-transition-new(root) { animation: none; }

  @keyframes baac-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes baac-fade-out { to { opacity: 0; } }
  @keyframes baac-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes baac-row { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  @keyframes baac-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes baac-flash { 0% { background-color: color-mix(in srgb, var(--door, var(--baac-accent)) 26%, transparent); } 100% { background-color: transparent; } }
  @keyframes baac-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); transform: scale(1); } 50% { transform: scale(1.08); } 100% { box-shadow: 0 0 0 10px transparent; transform: scale(1); } }
  @keyframes baac-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
  @keyframes baac-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
  @keyframes baac-draw { from { stroke-dashoffset: var(--len, 30); } to { stroke-dashoffset: 0; } }
  @keyframes baac-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  @keyframes baac-spin { to { transform: rotate(360deg); } }
  @keyframes baac-badge-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

  html:not([data-motion="off"]) {
    /* 3-4. Sections and menus open instead of jumping. */
    /* (Not the sidebar's sections: they open at once, so the one clicked
       stays under the pointer -- update 10.) */
    & details.dr-confirm::details-content, & details.cl-more::details-content {
      block-size: 0; overflow: clip; transition: block-size var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete;
    }
    & details.dr-confirm[open]::details-content, & details.cl-more[open]::details-content { block-size: auto; }
    & details.action-menu[open] > .action-menu-panel, & .notification-dropdown.is-open, & [data-notification-center].is-open .notification-dropdown { animation: baac-pop var(--dur-2) var(--ease-out) both; transform-origin: top; }

    /* 6. Bars fill to their value. */
    & .plan-progress > span, & .progress > span, & .progress-bar > span, & .ops-bar > span, & .fund-meter > span { transform-origin: left; animation: baac-grow .6s var(--ease-out) both; }
    &[dir="rtl"] .plan-progress > span, &[dir="rtl"] .progress > span, &[dir="rtl"] .progress-bar > span, &[dir="rtl"] .ops-bar > span, &[dir="rtl"] .fund-meter > span { transform-origin: right; }

    /* 7. The first rows of a table arrive one after another. */
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(-n+12) { animation: baac-row var(--dur-3) var(--ease-out) both; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(2) { animation-delay: .02s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(3) { animation-delay: .04s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(4) { animation-delay: .06s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(5) { animation-delay: .08s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(6) { animation-delay: .1s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(7) { animation-delay: .12s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(8) { animation-delay: .14s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(9) { animation-delay: .16s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(10) { animation-delay: .18s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(11) { animation-delay: .2s; }
    & body:not(.motion-settled) :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr:nth-child(12) { animation-delay: .22s; }
    & body:not(.motion-settled) .cl-rows > .record-row:nth-child(-n+8), & body:not(.motion-settled) .action-row:nth-child(-n+10) { animation: baac-row var(--dur-3) var(--ease-out) both; }
    & body:not(.motion-settled) .dr-kpi, & body:not(.motion-settled) .money-view, & body:not(.motion-settled) .fund-card { animation: baac-rise .3s var(--ease-out) both; }

    /* 8. The record you just changed glows once. */
    & .is-flash > td, & .is-flash.record-row, & .is-flash.card { animation: baac-flash 1.8s ease-out both; }
    /* 9. A status that just changed pulses once. */
    & .badge.is-pulse { animation: baac-pulse .7s var(--ease-out) 1; }
    /* 10. Working... */
    & .btn.is-busy::after { animation: baac-spin .7s linear infinite; }
    /* 11. The toast's tick draws itself. */
    & .toast-icon path, & .toast-icon polyline, & .toast-icon line { stroke-dasharray: var(--len, 30); animation: baac-draw .45s .12s var(--ease-out) both; }
    /* 12. A form sent back with mistakes shakes its message once. */
    & .is-shake { animation: baac-shake .42s ease-in-out 1; }
    /* 13. A new notification rings the bell once. */
    & .is-ring { animation: baac-ring .9s ease-in-out 1; transform-origin: 50% 10%; }
    & .is-ring .notification-count { animation: baac-badge-pop .5s var(--ease-out) both; }
    /* 15. The live light breathes. */
    & .live-dot { animation: baac-live 2.2s ease-out infinite; }
    /* 16. Light to dark: a crossfade, not a flash. */
    &.theme-switching, &.theme-switching * { transition: background-color .28s ease, color .28s ease, border-color .28s ease, fill .28s ease, box-shadow .28s ease !important; }
    /* 17. The sign-in page settles in. */
    & .login-card, & .auth-card { animation: baac-fade-in .5s var(--ease-out) both; }
    & .login-logo, & .auth-logo { animation: baac-fade-in .7s .08s var(--ease-out) both; }
    /* 18. A currency pressed: the new total fades in. */
    & .money-view-panel.is-arriving, & .fund-table .fund-total [data-panel].is-arriving { animation: baac-fade-in .24s var(--ease-out) both; }
    /* 19. "Post the entry now?" rises in; the draft's bar calls once after "Not now". */
    & .journal-offer[open] { animation: baac-offer-in .32s var(--ease-out) both; }
    & .journal-offer[open]::backdrop { animation: baac-fade-in .25s ease-out both; }
    & .journal-offer.is-leaving { animation: baac-offer-out .16s ease-in both; }
    & .journal-offer[open] .journal-offer-row { animation: baac-row var(--dur-3) var(--ease-out) both; }
    & .journal-offer[open] .journal-offer-row:nth-child(2) { animation-delay: .05s; }
    & .journal-offer[open] .journal-offer-row:nth-child(3) { animation-delay: .1s; }
    & .journal-offer[open] .journal-offer-row:nth-child(n+4) { animation-delay: .14s; }
    & .journal-offer-icon path { stroke-dasharray: 60; animation: baac-draw .6s .15s var(--ease-out) both; --len: 60; }
    & .post-bar { animation: baac-rise .35s var(--ease-out) both; }
    & .post-bar.is-flash { animation: baac-bar-call 1.4s var(--ease-out) 1; }
  }
  @keyframes baac-offer-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes baac-offer-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
  @keyframes baac-bar-call { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 60%, transparent); } 35% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--warning) 22%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
  /* Light motion: movement becomes a plain fade; nothing loops. */
  html[data-motion="reduced"] {
    & :is(.erp-table, .data-table, .rental-table, .accounting-table, .exec-table, .ops-report-table, .alert-table, .sp-table) > tbody > tr, & .dr-kpi, & .money-view, & .fund-card, & .record-row { animation-name: baac-fade-out !important; animation-direction: reverse !important; animation-delay: 0s !important; }
    & .live-dot, & .is-ring, & .is-shake { animation: none !important; }
  }
}
/* Off, or asked for by the computer: still. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* The money view (update 12): one total, in the currency pressed. */
.money-view-switch button[data-unavailable] { color: color-mix(in srgb, var(--baac-text-soft) 70%, transparent); }
.money-view-switch button[data-unavailable]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.money-total { display: flex; flex-direction: column; gap: 4px; }
.money-total small { color: var(--m-ink); font-size: 12.5px; font-weight: 700; }
.money-total strong { color: var(--baac-text); font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; line-height: 1.15; }
.money-total .amt { max-width: 100%; }
.money-lines { width: auto; margin: 12px 0 0; border-collapse: collapse; font-size: 13px; color: var(--baac-text-soft); font-variant-numeric: tabular-nums lining-nums; }
.money-lines td { padding: 3px 0; }
.money-lines td.num { text-align: end; }
.money-lines-arrow { padding-inline: 12px !important; text-align: center; color: var(--m-edge); }
[dir="rtl"] .money-lines-arrow { transform: scaleX(-1); }
.money-rate { white-space: nowrap; }
.money-rate-date { color: var(--baac-text-soft); }
@media (max-width: 560px) {
  .money-view-head { align-items: stretch; }
  .money-view-switch { width: 100%; justify-content: space-between; }
  .money-view-switch button { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .money-total strong { font-size: clamp(22px, 7.5vw, 30px); }
}

/* Posting a journal (update 12): the question after the save, and the bar on
   the draft that keeps the button in sight. */
.post-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--baac-border)); border-inline-start: 5px solid var(--warning); border-radius: var(--radius-md); background: color-mix(in srgb, var(--warning) 8%, var(--baac-surface)); }
.post-bar.is-sent { border-color: color-mix(in srgb, var(--baac-accent) 40%, var(--baac-border)); border-inline-start-color: var(--baac-accent); background: color-mix(in srgb, var(--baac-accent) 7%, var(--baac-surface)); }
.post-bar.is-blocked { border-color: color-mix(in srgb, var(--danger) 40%, var(--baac-border)); border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--baac-surface)); }
.post-bar-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.post-bar.is-sent .post-bar-icon { color: var(--baac-accent); background: color-mix(in srgb, var(--baac-accent) 14%, transparent); }
.post-bar.is-blocked .post-bar-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.post-bar-title { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--baac-text); line-height: 1.4; }
.post-bar-note { margin: 3px 0 0; color: var(--baac-text-soft); font-size: 13px; }
.post-bar-reasons { margin: 6px 0 0; padding-inline-start: 18px; color: var(--baac-text); font-size: 13px; line-height: 1.6; }
.post-bar-actions form { margin: 0; }
.post-bar-actions .btn { min-height: var(--control-h); padding-inline: 22px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.post-bar-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 640px) {
  .post-bar { grid-template-columns: auto minmax(0, 1fr); }
  .post-bar-actions { grid-column: 1 / -1; }
  .post-bar-actions .btn { width: 100%; justify-content: center; }
}
.kpi-yes { color: var(--success); }
.kpi-no { color: var(--danger); }
tfoot tr.is-total td { font-weight: 800; border-top: 2px solid var(--baac-border); background: var(--baac-total-row, var(--baac-surface-soft)); }

.journal-offer { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 720px); padding: 0; border: 1px solid var(--baac-border); border-radius: var(--radius-lg); background: var(--baac-surface); color: var(--baac-text); box-shadow: 0 28px 70px rgba(0, 0, 0, .28); overflow: auto; }
.journal-offer::backdrop { background: rgba(20, 18, 16, .5); backdrop-filter: blur(2px); }
.journal-offer-card { display: grid; gap: 14px; margin: 0; padding: 22px 22px 18px; }
.journal-offer-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.journal-offer-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: var(--baac-accent); background: color-mix(in srgb, var(--baac-accent) 14%, transparent); }
.journal-offer-title { margin: 2px 0 4px; font-size: 19px; font-weight: 800; line-height: 1.35; }
.journal-offer-text, .journal-offer-who { margin: 0; color: var(--baac-text-soft); font-size: 13.5px; line-height: 1.6; }
.journal-offer-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 42vh; overflow: auto; }
.journal-offer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 11px 14px; border: 1px solid var(--baac-border); border-radius: var(--radius-sm); background: var(--baac-surface-soft); }
.journal-offer-row.is-blocked { border-color: color-mix(in srgb, var(--danger) 40%, var(--baac-border)); }
.journal-offer-main { display: grid; gap: 2px; min-width: 0; }
.journal-offer-number { font-weight: 800; color: var(--baac-text); text-decoration: none; }
.journal-offer-number:hover { text-decoration: underline; }
.journal-offer-desc { color: var(--baac-text-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-offer-reasons { margin: 4px 0 0; padding-inline-start: 18px; color: var(--danger); font-size: 12.5px; line-height: 1.55; }
.journal-offer-state { font-size: 12.5px; font-weight: 700; color: var(--baac-accent); }
.journal-offer-state.is-warn { color: var(--danger); }
.journal-offer-amount { font-weight: 800; font-size: 15px; white-space: nowrap; }
.journal-offer-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.journal-offer-actions .btn { min-height: var(--control-h); padding-inline: 20px; font-weight: 800; }
.journal-offer-hint { margin: 0; padding-top: 10px; border-top: 1px dashed var(--baac-border); color: var(--baac-text-soft); font-size: 12.5px; line-height: 1.6; }
@media (max-width: 560px) {
  .journal-offer-card { padding: 18px 16px 14px; }
  .journal-offer-actions .btn { flex: 1 1 100%; justify-content: center; }
  .journal-offer-row { grid-template-columns: minmax(0, 1fr); }
  .journal-offer-amount { justify-self: start; }
}

/* The journals waiting to be posted, at the top of the register. */
.jr-waiting { margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--baac-border)); border-inline-start: 5px solid var(--warning); }
.jr-waiting-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 18px 12px; }
.jr-waiting-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--baac-text); display: flex; align-items: center; gap: 10px; }
.jr-waiting-count { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--warning); color: #1f1a10; font-size: 15px; font-variant-numeric: tabular-nums; }
.jr-waiting-note { margin: 4px 0 0; color: var(--baac-text-soft); font-size: 13px; }
.jr-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.jr-check-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.jr-bulk .btn { min-height: var(--control-h); font-weight: 800; }
.jr-bulk .btn[disabled] { opacity: .5; cursor: not-allowed; }
.jr-tick { width: 42px; text-align: center; }
.jr-tick input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--baac-accent); }
.jr-waiting-table tr.is-ticked > td { background: color-mix(in srgb, var(--baac-accent) 8%, transparent); }
.jr-waiting-table tr.is-blocked .jr-reason { color: var(--danger); white-space: normal; max-width: 34ch; }
.jr-more { margin: 0; padding: 10px 18px 14px; font-size: 13px; }
.jr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jr-filter input[type="search"] { flex: 1 1 220px; max-width: 360px; }
.jr-status-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--baac-border); border-radius: 999px; color: var(--baac-text-soft); font-size: 13px; font-weight: 700; text-decoration: none; transition: background-color var(--dur-1, .14s) ease, color var(--dur-1, .14s) ease, border-color var(--dur-1, .14s) ease; }
.jr-chip:hover { color: var(--baac-text); border-color: color-mix(in srgb, var(--baac-accent) 50%, var(--baac-border)); }
.jr-chip.is-on { background: var(--baac-action); border-color: var(--baac-action); color: var(--baac-on-action, #fff); }
@media (max-width: 640px) {
  .jr-bulk { width: 100%; }
  .jr-bulk .btn { flex: 1 1 100%; justify-content: center; }
}

/* Who posts journals: one row per accountant, one button. */
.pa-card { margin-bottom: 18px; }
.pa-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pa-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pa-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface); transition: border-color var(--dur-2, .22s) ease, background-color var(--dur-2, .22s) ease; }
.pa-row.is-on { border-color: color-mix(in srgb, var(--success) 45%, var(--baac-border)); background: color-mix(in srgb, var(--success) 6%, var(--baac-surface)); }
.pa-row.is-role { grid-template-columns: auto minmax(0, 1fr) auto; background: var(--baac-surface-soft); }
.pa-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--baac-accent) 16%, transparent); color: var(--baac-accent); font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.pa-who { display: grid; gap: 2px; min-width: 0; }
.pa-who strong { color: var(--baac-text); }
.pa-who small { color: var(--baac-text-soft); font-size: 12.5px; }
.pa-trail.is-on { color: var(--success); font-weight: 600; }
.pa-action { margin: 0; }
.pa-action .btn { min-height: var(--control-h); min-width: 150px; justify-content: center; font-weight: 800; }
.pa-note { margin: 14px 0 0; color: var(--baac-text-soft); font-size: 13px; }
@media (max-width: 640px) {
  .pa-row { grid-template-columns: auto minmax(0, 1fr); }
  .pa-state { grid-column: 2; justify-self: start; }
  .pa-action { grid-column: 1 / -1; }
  .pa-action .btn { width: 100%; }
}

/* Drafts waiting to be posted, named where the balances are read. */
.waiting-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--baac-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--warning) 9%, var(--baac-surface)); }
.waiting-banner-count { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; background: var(--warning); color: #1f1a10; font-weight: 800; font-variant-numeric: tabular-nums; }
.waiting-banner-text { margin: 0; color: var(--baac-text-soft); font-size: 13.5px; line-height: 1.55; }
.waiting-banner-text strong { color: var(--baac-text); }
.waiting-banner-sent { color: var(--baac-accent); font-weight: 700; }
.waiting-banner .btn { white-space: nowrap; font-weight: 800; }
@media (max-width: 640px) {
  .waiting-banner { grid-template-columns: auto minmax(0, 1fr); }
  .waiting-banner .btn { grid-column: 1 / -1; justify-content: center; }
}

/* The funds table (update 12): one total per fund in the currency pressed. */
.fund-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 18px 0; }
.fund-table-head .card-title { margin: 0; }
.fund-table-head .muted { margin: 4px 0 0; font-size: 13px; }
.fund-table .fund-total strong { font-size: 15px; font-weight: 800; color: var(--baac-text); }
.fund-table .fund-total [data-panel] { display: inline-block; }
.fund-table .fund-total [data-panel][hidden] { display: none; }
.fund-total-ask { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); font-size: 12.5px; font-weight: 700; }
.fund-total-ask::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fund-table-card .money-view-note { margin: 12px 0 0; }

/* Figures line up on their decimal point (update 12). A number is written
   left to right whatever the page's direction, so its fils are on its right:
   a figure column is aligned there -- in Arabic as in English, the heading
   with its cells -- and every 0.00 sits under the one above it. */
:is(.erp-table, .data-table, .rental-table, .accounting-table, .financial-statement-table, .money-lines, table) :is(td, th):is(.num, .n, .is-num, .amount-cell) { text-align: right; }
.financial-statement-table td:last-child, .financial-statement-table th:last-child,
.financial-statement-table.comparative td:not(:first-child) { text-align: right; }

/* ==========================================================================
   The reference structure (update 13)
   Seven sector doors on the sidebar, each department a small heading inside
   its door; the Department Manager's rows and switch; the organisation chart.
   ========================================================================== */
.sidebar-unit-heading { margin: 8px 11px 2px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.5); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
.sidebar-group-links .sidebar-unit-heading:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }

.dm-kpis { margin-bottom: 18px; }
.dm-sector { margin-bottom: 18px; }
.dm-sector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dm-sector-code { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--door, var(--baac-accent)) 16%, transparent); color: var(--baac-text); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.dm-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface-soft); transition: border-color var(--dur-2, .22s) ease, background-color var(--dur-2, .22s) ease; }
.dm-row.is-on { border-color: color-mix(in srgb, var(--success) 45%, var(--baac-border)); background: var(--baac-surface); }
.dm-row.is-new:not(.is-on) { border-style: dashed; }
.dm-code { display: inline-grid; place-items: center; min-width: 72px; padding: 6px 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--baac-accent) 14%, transparent); color: var(--baac-text); font-size: 12px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.dm-who { display: grid; gap: 3px; min-width: 0; }
.dm-who strong { color: var(--baac-text); font-size: 15px; }
.dm-who small { color: var(--baac-text-soft); font-size: 12.5px; line-height: 1.5; }
.dm-facts { display: block; }
.dm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dm-actions .btn { min-height: var(--control-h); font-weight: 800; }
.dm-actions .pa-action .btn { min-width: 190px; justify-content: center; }
@media (max-width: 760px) {
  .dm-row { grid-template-columns: auto minmax(0, 1fr); }
  .dm-row > .badge, .dm-actions { grid-column: 1 / -1; }
  .dm-actions .pa-action, .dm-actions .pa-action .btn { width: 100%; }
}

.orgchart { display: grid; gap: 18px; }
.orgchart-top { display: flex; justify-content: center; }
.orgchart-node { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface); text-align: center; }
.orgchart-node strong { color: var(--baac-text); font-size: 14px; }
.orgchart-node small { color: var(--baac-text-soft); font-size: 12px; }
.orgchart-node em { color: var(--baac-text-soft); font-size: 11px; font-style: normal; }
.orgchart-node.is-top { min-width: 260px; border-width: 2px; border-color: var(--baac-accent); background: color-mix(in srgb, var(--baac-accent) 8%, var(--baac-surface)); }
.orgchart-node.is-top strong { font-size: 16px; }
.orgchart-node.is-sector { background: color-mix(in srgb, var(--baac-accent) 12%, var(--baac-surface)); border-color: color-mix(in srgb, var(--baac-accent) 40%, var(--baac-border)); }
.orgchart-node.is-unit { text-align: start; padding: 9px 12px; }
.orgchart-node.is-off { border-style: dashed; opacity: .68; }
.orgchart-code { color: var(--baac-text-soft); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.orgchart-sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.orgchart-sector { display: grid; gap: 8px; align-content: start; }
.orgchart-units { display: grid; gap: 6px; margin: 0; padding: 0 0 0 10px; list-style: none; border-inline-start: 2px solid color-mix(in srgb, var(--baac-accent) 35%, var(--baac-border)); }
html[dir="rtl"] .orgchart-units { padding: 0 10px 0 0; }

/* The budget check (update 13): read before the approval, on the purchase
   request and the fund request. */
.budget-panel { margin-bottom: 18px; }
.budget-panel.is-over { border-color: color-mix(in srgb, var(--warning) 55%, var(--baac-border)); }
.budget-panel .alert { margin: 12px 0 0; }
.erp-table tr.is-over td { background: color-mix(in srgb, var(--warning) 10%, transparent); }

/* Projects (update 13): the board and the handover card. */
.prj-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.prj-column { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface-soft); }
.prj-column-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--baac-text); }
.prj-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--baac-border); border-inline-start: 4px solid var(--success); border-radius: var(--radius-md); background: var(--baac-surface); color: inherit; text-decoration: none; transition: border-color var(--dur-2, .22s) ease, transform var(--dur-2, .22s) ease; }
.prj-card:hover { border-color: var(--baac-accent); transform: translateY(-1px); }
.prj-card.health-at_risk { border-inline-start-color: var(--warning); }
.prj-card.health-delayed { border-inline-start-color: var(--danger); }
.prj-card strong { color: var(--baac-text); font-size: 14px; }
.prj-card small { color: var(--baac-text-soft); font-size: 12px; }
.prj-code { color: var(--baac-text-soft); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.prj-progress { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--baac-accent) 16%, transparent); overflow: hidden; }
.prj-progress span { display: block; height: 100%; background: var(--baac-accent); border-radius: inherit; }
.prj-empty { margin: 0; font-size: 12.5px; }
.prj-handover-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.erp-table tr.wbs-child td:first-child { padding-inline-start: 26px; }

/* Output management (update 13): the issued copies of a record. */
.out-code { white-space: nowrap; font-variant-numeric: tabular-nums; }
.out-panel { margin-bottom: 18px; }
.out-panel .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.out-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.out-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.out-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--baac-border); border-radius: var(--radius-md); background: var(--baac-surface-soft); }
.out-row.is-failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--baac-border)); }
.out-copy { font-weight: 800; color: var(--baac-text); }
.out-meta { color: var(--baac-text-soft); font-size: 12.5px; }
.out-links { display: flex; gap: 6px; }
@media (max-width: 640px) { .out-row { grid-template-columns: auto minmax(0, 1fr); } .out-row > .badge, .out-links { grid-column: 1 / -1; } }

/* Update 14: the management's logged intervention. */
.intervention-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.intervention-offer { margin: 0 0 14px; }
.intervention-offer > summary { cursor: pointer; font-size: 13px; list-style: none; }
.intervention-offer > summary::-webkit-details-marker { display: none; }
.intervention-offer > summary::before { content: "ⓘ "; color: var(--baac-accent); }
.intervention-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.intervention-form .form-control { flex: 1 1 320px; }

/* Update 14: the management's decision desk. */
.dd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dd-head .page-title { margin-bottom: 6px; }
.dd-pulse { display: flex; gap: 10px; flex-wrap: wrap; }
.dd-pulse span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--baac-border); background: var(--baac-surface); font-weight: 700; font-size: 13px; }
.dd-pulse i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--baac-accent); }
.dd-pulse .is-red i { background: var(--danger, #c0392b); }
.dd-pulse .is-amber i { background: #b9770e; }
.dd-pulse .is-green i { background: var(--success, #1e8449); }
.dd-section { margin-bottom: 18px; }
.dd-section .card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dd-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--baac-border); border-radius: 12px; background: var(--baac-surface-soft); margin-bottom: 10px; }
.dd-row.is-hot { border-color: color-mix(in srgb, var(--danger, #c0392b) 45%, var(--baac-border)); }
.dd-row.is-warm { border-color: color-mix(in srgb, #b9770e 40%, var(--baac-border)); }
.dd-text { font-size: 15.5px; font-weight: 700; line-height: 1.55; }
.dd-meta { color: var(--baac-text-soft); font-size: 13px; margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.dd-ok { color: var(--success, #1e8449); font-weight: 700; }
.dd-warn { color: #b9770e; font-weight: 700; }
.dd-bad { color: var(--danger, #c0392b); font-weight: 700; }
.dd-muted { color: var(--baac-text-soft); }
.dd-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.dd-note { position: relative; }
.dd-note > summary { list-style: none; display: inline-flex; }
.dd-note > summary::-webkit-details-marker { display: none; }
.dd-note-form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; min-width: 280px; }
.dd-note-form .form-control { flex: 1 1 220px; }
.dd-kpi .executive-kpi-value { white-space: nowrap; font-size: clamp(20px, 1.9vw, 30px); }
.dd-kpi small { display: block; color: var(--baac-text-soft); font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.dd-more { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.dd-foot { color: var(--baac-text-soft); font-size: 13px; margin-top: 8px; }
@media (max-width: 700px) { .dd-row { grid-template-columns: 1fr; } .dd-actions { justify-content: flex-start; } }

/* ---------------------------------------------------------------- the management's desk (update 14) -- */
.erp-form .form-group-wide { grid-column: 1 / -1; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.pick-item { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--baac-border); border-radius: 10px; background: var(--baac-surface); cursor: pointer; font-weight: 600; font-size: 14px; }
.pick-item:has(input:checked) { border-color: var(--baac-action); background: color-mix(in srgb, var(--baac-action) 10%, var(--baac-surface)); }
.pick-item input { width: 18px; height: 18px; accent-color: var(--baac-action); flex: none; }
.pick-grid ul, .pick-group ul { list-style: none; margin: 0; padding: 0; }
.desk-letter { font-size: 15.5px; line-height: 1.85; white-space: normal; }
.desk-letter p { margin: 0 0 10px; }
.desk-ack { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.desk-inline { display: flex; gap: 6px; align-items: center; }
.desk-inline .form-control { min-width: 180px; }
.desk-respond { margin-top: 6px; }
.desk-respond-form { display: grid; gap: 8px; padding: 12px; margin-top: 8px; border: 1px solid var(--baac-border); border-radius: 12px; background: var(--baac-surface); min-width: 260px; }
.desk-task-form { margin-top: 14px; }
.dd-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dd-quick .btn { gap: 8px; }
@media (max-width: 700px) { .pick-grid { grid-template-columns: 1fr 1fr; } .desk-inline { flex-direction: column; align-items: stretch; } }
/* the department report's classic form (update 14) */
.dr-note-4 { --tone: var(--stage-yellow, #b7791f); }
.dr-note-5 { --tone: var(--stage-purple, #6b46c1); }
.dr-note-6 { --tone: var(--stage-slate, #64748b); }
.dr-note-7 { --tone: var(--stage-blue); }
.dr-fill, .dr-notes-form .dr-note[data-field="summary"], .dr-notes-form .dr-note[data-field="manual_figures"] { grid-column: 1 / -1; }
.dr-fill > label::before { display: none; }
.dr-summary .dr-summary-text { font-size: 15.5px; line-height: 1.8; margin: 0; }
.dr-manual { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.dr-manual li { break-inside: avoid; padding: 7px 0; border-bottom: 1px dotted var(--baac-border); font-weight: 600; }
.dr-src { font-weight: 600; font-size: 11px; vertical-align: middle; }
.dr-asked { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 700px) { .dr-manual { columns: 1; } }
.dr-other { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -8px 0 18px; font-size: 12.5px; color: var(--baac-text-soft); }
.dr-other-link { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--baac-border); font-weight: 600; font-size: 12px; }
.dr-other-link.state-issued { border-color: var(--stage-green); }
.dr-other-link.state-draft { border-color: var(--stage-yellow, #b7791f); }

/* ---------------------------------------------------------------- in-app tabs (update 14) -- */
body.is-tabs-shell { overflow: hidden; }
body.is-tabs-shell .workspace { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
body.is-tabs-shell .page-content { flex: 1 1 auto; min-height: 0; padding: 0; display: flex; flex-direction: column; background-image: none; }
body.is-tabs-shell #page-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tabs-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.tabstrip { display: flex; align-items: flex-end; gap: 4px; padding: 6px 10px 0; min-height: 44px; background: var(--baac-surface-soft); border-bottom: 1px solid var(--baac-border); }
.tabstrip-tabs { display: flex; align-items: flex-end; gap: 3px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabstrip-tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 210px; min-width: 96px; height: 36px; padding: 0 6px 0 12px; border: 1px solid var(--baac-border); border-bottom: 0; border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--baac-surface) 55%, var(--baac-surface-soft)); color: var(--baac-text-soft); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; position: relative; top: 1px; }
.tab:hover { color: var(--baac-text); background: var(--baac-surface); }
.tab.is-active { background: var(--baac-bg); color: var(--baac-text); box-shadow: inset 0 2px 0 var(--baac-action); }
.tab-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab.is-dirty .tab-label::before { content: "●"; margin-inline-end: 6px; font-size: 9px; color: #b9770e; vertical-align: middle; }
.tab-close { flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 11px; line-height: 1; cursor: pointer; opacity: .65; }
.tab-close:hover { opacity: 1; background: color-mix(in srgb, var(--baac-text) 12%, transparent); }
.tabstrip-menu, .tabstrip-new, .tabstrip-close-active, .tabstrip-off { flex: none; width: 34px; height: 34px; margin-bottom: 2px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--baac-text-soft); font-size: 17px; line-height: 1; cursor: pointer; }
.tabstrip-menu:hover, .tabstrip-new:hover, .tabstrip-close-active:hover, .tabstrip-off:hover { background: var(--baac-surface); border-color: var(--baac-border); color: var(--baac-text); }
.tabs-shell.is-full .tabstrip-new { opacity: .4; }
.tabstrip-close-active, .tabstrip-select { display: none; }
.tab-frames { flex: 1 1 auto; min-height: 0; position: relative; background: var(--baac-bg); }
.tab-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; pointer-events: none; background: var(--baac-bg); }
.tab-frame.is-active { visibility: visible; pointer-events: auto; }
.tabs-notice { position: absolute; inset-inline: 0; top: 52px; margin: 0 auto; width: fit-content; max-width: 90%; padding: 10px 16px; border-radius: 10px; background: var(--baac-primary); color: var(--baac-on-primary, #fff); font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; transition: opacity .2s; z-index: 5; }
.tabs-notice.is-shown { opacity: 1; }
/* a screen inside a tab: no sidebar of its own, the whole width */
.app-shell.is-embed .workspace, body.is-embed.sidebar-collapsed .workspace { margin-inline-start: 0 !important; }
body.is-embed #sidebarToggle { display: none; }
.sidebar-tabs-button { width: calc(100% - 24px); margin: 0 12px 2px; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: start; }
.sidebar-tabs-button[data-tabs-state="off"] .sidebar-icon { opacity: .45; }
@media (max-width: 760px) {
  .tabstrip { align-items: center; padding: 6px 8px; gap: 6px; }
  .tabstrip-tabs { display: none; }
  .tabstrip-select { display: block; flex: 1 1 auto; min-width: 0; height: 36px; padding-block: 0; font-weight: 600; }
  .tabstrip-close-active { display: inline-block; }
  .tabstrip-menu, .tabstrip-new, .tabstrip-close-active, .tabstrip-off { margin-bottom: 0; }
}
@media print { .tabstrip { display: none; } }

/* the word before an idle sign-out (update 14) */
.idle-notice { position: fixed; inset-inline: 0; bottom: 18px; margin: 0 auto; width: fit-content; max-width: min(92vw, 640px); padding: 12px 18px; border-radius: 12px; background: #7a4b00; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.28); z-index: 3000; }

/* the meeting page (update 14) */
.desk-proposals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.desk-proposal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.desk-invited td { vertical-align: top; }
.desk-invited td:first-child { white-space: nowrap; width: 1%; }
.desk-invited .desk-inline .form-control { flex: 1 1 220px; min-width: 0; }
.desk-minutes textarea { width: 100%; min-height: 180px; }
.desk-task-grid { display: grid; grid-template-columns: minmax(220px, 2.2fr) repeat(3, minmax(140px, 1fr)) auto; gap: 12px; align-items: end; }
.desk-task-grid .form-group { margin: 0; }
.desk-task-go .btn { white-space: nowrap; }
@media (max-width: 1100px) { .desk-task-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .desk-task-grid { grid-template-columns: 1fr; } }
.desk-readers td:last-child, .desk-readers th:last-child { text-align: end; white-space: nowrap; width: 1%; }
.desk-readers .muted { font-size: 12.5px; }
.desk-list { list-style: none; margin: 0; padding: 0; }
.desk-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--baac-border); }
.desk-list li:last-child { border-bottom: 0; }
.desk-list a { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.desk-list span { flex: none; color: var(--baac-text-soft); font-size: 12.5px; }
.desk-form select[multiple] { min-height: 190px; padding: 6px; }
.desk-form select[multiple] option { padding: 6px 8px; border-radius: 6px; }
.desk-form [hidden] { display: none !important; }
.dr-notes-form [hidden] { display: none !important; }
.dr-notes-form .dr-note[data-field="plan"] { grid-column: 1 / -1; }
.dr-note[data-field="summary"] { --tone: var(--stage-slate, #64748b); }
.dr-note[data-field="highlights"] { --tone: var(--stage-green); }
.dr-note[data-field="issues"] { --tone: var(--stage-red); }
.dr-note[data-field="needs"] { --tone: var(--stage-yellow, #b7791f); }
.dr-note[data-field="manual_figures"] { --tone: var(--stage-purple, #6b46c1); }
.dr-note[data-field="plan"] { --tone: var(--stage-blue); }
/* a long figure on a narrow card shrinks to fit instead of pushing the page sideways (update 14) */
.dr-kpi strong > span { font-size: min(1em, 10.5cqi); }
/* an older browser does not say "this is a frame": the page finds out itself and drops its own sidebar */
html[data-framed] .sidebar { display: none !important; }
html[data-framed] .workspace { margin-inline-start: 0 !important; }
html[data-framed] #sidebarToggle { display: none; }

/* ---- Update 16: the signature path --------------------------------------
   One row of small boxes, in signing order: who signed, who is being waited
   for, who was passed over. The same strip on the inbox, the paper's page
   and the panel on the document. */
.sig-trail { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sig-step { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--baac-border); border-radius: 10px; background: var(--baac-surface); font-size: 12.5px; min-width: 0; }
.sig-step .sig-role { font-weight: 700; color: var(--baac-text); }
.sig-step .sig-who { color: var(--baac-text-soft); overflow-wrap: anywhere; }
.sig-step .sig-when { color: var(--baac-text-soft); font-size: 11.5px; direction: ltr; unicode-bidi: isolate; text-align: start; }
.sig-step .sig-note { color: var(--baac-text-soft); font-size: 11.5px; overflow-wrap: anywhere; }
.sig-step.is-signed { border-color: color-mix(in srgb, var(--success) 55%, var(--baac-border)); }
.sig-step.is-signed .sig-who { color: var(--success); font-weight: 600; }
.sig-step.is-returned { border-color: color-mix(in srgb, var(--danger) 55%, var(--baac-border)); }
.sig-step.is-returned .sig-who { color: var(--danger); font-weight: 600; }
.sig-step.is-skipped { border-style: dashed; }
.sig-step.is-now { border-color: var(--baac-accent); box-shadow: 0 0 0 2px rgba(var(--baac-accent-rgb), .18); }
.sig-step.is-now .sig-who { color: var(--baac-text); font-weight: 600; }
.sig-actions { justify-content: flex-start; margin-top: 12px; }
.sig-warning { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--baac-border)); color: var(--danger); font-size: 13px; }
.sig-panel .panel-subtitle { margin-bottom: 4px; }
.sig-history { margin-top: 14px; }
.sig-history > summary { cursor: pointer; color: var(--baac-text-soft); font-size: 13px; }
.sig-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; margin: 8px 0 16px; }
.sig-facts > div { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--baac-border); }
.sig-facts dt { color: var(--baac-text-soft); font-size: 12.5px; }
.sig-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.sig-chip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) { .sig-trail { grid-template-columns: 1fr 1fr; } }

/* ---- Update 16: the attendance register ---------------------------------- */
.att-kpis { margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.att-filter { margin-bottom: 12px; }
.att-table td { vertical-align: top; }
.att-note { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.att-late { color: var(--danger); font-weight: 700; white-space: nowrap; }
.att-ontime { color: var(--success); font-weight: 600; white-space: nowrap; }
.att-map { font-size: 12.5px; white-space: nowrap; }
.att-foot { margin-top: 12px; font-size: 12.5px; }
.att-sub { margin-top: 18px; }
.att-days { grid-column: 1 / -1; }
.att-days > div, .att-days > ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 10px 12px; height: auto; min-height: 0; }
.att-days > div > div { display: inline-flex; }
.att-days label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; white-space: nowrap; }
.late-table td { vertical-align: top; }
.late-form { min-width: 260px; }
.late-form .late-all { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 100%; }
/* A section opened by its anchor (the machines of a rental contract, the
   signatures of a paper) stops below the fixed top bar, not under it. */
#machines, #signatures, #waiting, #sent, #signed, #site-form { scroll-margin-top: 96px; }

/* Update 17: the trial mark. While the company is trying the system out,
   every screen carries it; a page printed from the browser carries it
   across the sheet. It never takes a click from what lies under it. */
.trial-mark{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:1200;display:flex;gap:8px;align-items:center;justify-content:center;max-width:calc(100vw - 24px);padding:5px 14px;border-radius:999px;background:#b45309;color:#fff;font-size:.78rem;line-height:1.35;box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:none;opacity:.96;white-space:nowrap}
.trial-mark strong{font-weight:800;letter-spacing:.02em}
@media (max-width:640px){.trial-mark{bottom:6px;padding:3px 12px;font-size:.72rem}.trial-mark span{display:none}}
@media print{.trial-mark{position:fixed;top:45%;bottom:auto;left:50%;transform:translate(-50%,-50%) rotate(-30deg);background:none;box-shadow:none;border-radius:0;padding:0;color:rgba(0,0,0,.12);font-size:64pt;opacity:1}.trial-mark span{display:none}}