/*
    New Alamein Authority — admin console skin · "New Ground".

    The identity comes straight from the client's mark: a seedling forming the "A" of Alamein — a green
    city rising from the North-Coast sand. So the console is green-led (deep canopy → pine → a single
    living leaf accent) on warm limestone paper, with a restrained brass note for warmth. Bootstrap
    supplies the mechanics; this file supplies the identity.

    RTL-first: Bootstrap's own RTL build mirrors layout, and everything here uses LOGICAL properties
    (inset-inline, margin-inline, *-start/-end), so the whole shell — sidebar included — flips by
    direction, never by hard-coded left/right. Hierarchy comes from weight, colour and size, never from
    uppercasing (which means nothing in Arabic).
*/

/* ---- Typeface: IBM Plex Sans Arabic, one engineered family across both scripts, vendored (no CDN,
        works on the offline Edge box). The Latin face has no unicode-range so it is the default;
        the Arabic face overrides it for Arabic codepoints. ---- */
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 400; font-style: normal; font-display: swap;
    src: url("../lib/fonts/latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 400; font-style: normal; font-display: swap;
    src: url("../lib/fonts/arabic-400-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 500; font-style: normal; font-display: swap;
    src: url("../lib/fonts/latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 500; font-style: normal; font-display: swap;
    src: url("../lib/fonts/arabic-500-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600; font-style: normal; font-display: swap;
    src: url("../lib/fonts/latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 600; font-style: normal; font-display: swap;
    src: url("../lib/fonts/arabic-600-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 700; font-style: normal; font-display: swap;
    src: url("../lib/fonts/latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-weight: 700; font-style: normal; font-display: swap;
    src: url("../lib/fonts/arabic-700-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
    /* Greens, read straight off the logo: deep canopy for the sidebar, pine for the wordmark/primary,
       fresh leaf for the one living accent (active nav, growth, success). */
    --na-canopy-deep: #163B22;
    --na-canopy: #1E4A2A;
    --na-canopy-2: #235C31;
    --na-pine: #2E6B37;
    --na-pine-strong: #245A2D;
    --na-leaf: #71B843;
    --na-leaf-strong: #5CA233;
    --na-leaf-soft: #E6F1DC;

    /* Warm secondary — sand/brass — kept for attention moments, never the loud voice. */
    --na-brass: #B5842E;
    --na-brass-strong: #9A6F22;
    --na-brass-soft: #EFE4C7;

    --na-paper: #F4F7F1;
    --na-surface: #FFFFFF;
    --na-ink: #17301C;
    --na-muted: #5F6F5F;
    --na-line: #E1E7DD;

    --na-success: #3B8E4E;
    --na-danger: #B23A3A;
    --na-warning: #C08A2D;

    --na-sidebar-w: 264px;
    --na-topbar-h: 62px;
    --na-radius: 12px;
    --na-radius-sm: 9px;
    --na-shadow: 0 1px 2px rgba(19, 45, 25, 0.06), 0 10px 28px rgba(19, 45, 25, 0.05);
    --na-shadow-sm: 0 1px 2px rgba(19, 45, 25, 0.08);

    /* Hand the palette to Bootstrap so utilities (text-bg-*, links, focus, subtle bgs) inherit it. */
    --bs-primary: var(--na-pine);
    --bs-primary-rgb: 46, 107, 55;
    --bs-success-rgb: 59, 142, 78;
    --bs-body-bg: var(--na-paper);
    --bs-body-color: var(--na-ink);
    --bs-border-color: var(--na-line);
    --bs-link-color: var(--na-pine);
    --bs-link-hover-color: var(--na-pine-strong);
    --bs-font-sans-serif: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
}

body {
    min-height: 100vh;
    background-color: var(--na-paper);
    color: var(--na-ink);
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--na-ink); letter-spacing: -0.01em; }
.text-secondary { color: var(--na-muted) !important; }
.text-brass { color: var(--na-brass) !important; }
a { text-underline-offset: 0.15em; }

/* Inline icon system: sized to the text, recoloured by `currentColor`. */
.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.16em; }
.icon-lg { width: 1.5em; height: 1.5em; }
/* Direction-aware glyphs (chevrons, back-arrows) point the right way in RTL. */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ============================ Shell: sidebar + topbar + content ============================ */

.app-body { min-height: 100vh; }
@media (min-width: 992px) {
    .app-body { margin-inline-start: var(--na-sidebar-w); }
}
/* No sidebar (e.g. a page shown before sign-in): reclaim the rail. */
.app-body--full { margin-inline-start: 0 !important; }

/* ---- Sidebar (desktop, fixed) + offcanvas (mobile) share the same canopy skin ---- */
.app-sidebar,
.app-offcanvas {
    background: linear-gradient(180deg, var(--na-canopy-2) 0%, var(--na-canopy) 55%, var(--na-canopy-deep) 100%);
    color: rgba(255, 255, 255, 0.86);
}
.app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--na-sidebar-w);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

/* Logo on a white plate so the green mark reads on the dark rail without recolouring the asset. */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.15rem;
    color: #fff;
    text-decoration: none;
}
.sidebar-brand .brand-plate {
    background: #fff;
    border-radius: 14px;
    padding: 0.3rem;
    line-height: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
}
.sidebar-brand .brand-plate img { width: 42px; height: 42px; object-fit: contain; display: block; }
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand .brand-name { font-weight: 700; font-size: 0.98rem; }
.sidebar-brand .brand-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); }

.sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 0.75rem 1rem; }

.nav-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 1rem 0.75rem 0.4rem;
}
[dir="rtl"] .nav-section-label { text-transform: none; letter-spacing: 0; }

.app-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    margin-block: 2px;
    border-radius: var(--na-radius-sm);
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav-link .icon { width: 1.2rem; height: 1.2rem; opacity: 0.9; }
.app-nav-link:hover,
.app-nav-link:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* The signature: the active item carries a fresh-leaf "stem" on its inline-start edge and a soft
   leaf wash — a sprout marking where you are, echoing the logo. */
.app-nav-link.active {
    background: rgba(113, 184, 67, 0.16);
    color: #fff;
    font-weight: 600;
}
.app-nav-link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.75rem;
    inset-block: 0.35rem;
    width: 3px;
    border-radius: 3px;
    background: var(--na-leaf);
}
.app-nav-link.active .icon { opacity: 1; color: var(--na-leaf); }

.app-nav-link.disabled {
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}
.app-nav-link .soon-tag {
    margin-inline-start: auto;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-foot {
    padding: 0.9rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sidebar-foot .icon { color: var(--na-leaf); }

.app-offcanvas { width: var(--na-sidebar-w) !important; }
.app-offcanvas .offcanvas-header { color: #fff; }
.app-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---- Topbar ---- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--na-topbar-h);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--na-line);
}
.app-topbar .topbar-title { font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--na-ink); }
.app-topbar .topbar-spacer { flex: 1 1 auto; }
.topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 0; border-radius: var(--na-radius-sm);
    background: transparent; color: var(--na-ink);
}
.topbar-toggle:hover { background: rgba(19, 45, 25, 0.06); }
@media (min-width: 992px) { .topbar-toggle { display: none; } }

.topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--na-radius-sm);
    background: transparent;
    color: var(--na-ink);
    font-weight: 500;
}
.topbar-btn:hover { background: rgba(19, 45, 25, 0.05); }
.topbar-btn .avatar {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--na-leaf-soft); color: var(--na-pine-strong);
}

/* ---- Content ---- */
.app-content { padding: 1.6rem 1.15rem 3rem; }
.app-container { max-width: 1180px; margin-inline: auto; }

/* ---- Page header (shared partial) ---- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.page-header .page-subtitle { color: var(--na-muted); margin: 0.25rem 0 0; }
.page-header .page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* The gate/growth thread: a hairline leaf gradient marking section breaks — the signature at 1px. */
.gate-rule {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--na-leaf) 20%, var(--na-leaf) 80%, transparent);
    opacity: 0.45;
    margin: 1.75rem 0;
}

/* ============================ Surfaces ============================ */

.card {
    background: var(--na-surface);
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius);
    box-shadow: var(--na-shadow-sm);
}
.card-header { background: transparent; border-bottom: 1px solid var(--na-line); font-weight: 600; }

/* ---- Dashboard tiles ---- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.tile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--na-surface);
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius);
    box-shadow: var(--na-shadow-sm);
    text-decoration: none;
    color: var(--na-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--na-shadow);
    border-color: var(--na-leaf);
}
.tile .tile-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--na-radius-sm);
    background: var(--na-leaf-soft);
    color: var(--na-pine-strong);
}
.tile .tile-icon .icon { width: 1.5rem; height: 1.5rem; }
.tile .tile-title { font-weight: 600; font-size: 1.05rem; }
.tile .tile-desc { color: var(--na-muted); font-size: 0.9rem; margin: 0; }
.tile.tile-soon { opacity: 0.72; cursor: default; }
.tile.tile-soon .tile-icon { background: #EEF1EC; color: var(--na-muted); }
.tile .soon-tag {
    align-self: flex-start;
    font-size: 0.68rem; font-weight: 600;
    padding: 0.12rem 0.5rem; border-radius: 999px;
    background: var(--na-brass-soft); color: var(--na-brass-strong);
}

.kpi-placeholder {
    border: 1px dashed var(--na-line);
    border-radius: var(--na-radius);
    padding: 1.25rem;
    color: var(--na-muted);
    background: rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; gap: 0.6rem;
}
.kpi-placeholder .icon { color: var(--na-leaf); }

/* ============================ Buttons ============================ */
.btn { font-weight: 600; border-radius: var(--na-radius-sm); }
.btn .icon { vertical-align: -0.18em; }
.btn-primary {
    --bs-btn-bg: var(--na-pine);
    --bs-btn-border-color: var(--na-pine);
    --bs-btn-hover-bg: var(--na-pine-strong);
    --bs-btn-hover-border-color: var(--na-pine-strong);
    --bs-btn-active-bg: var(--na-pine-strong);
    --bs-btn-active-border-color: var(--na-pine-strong);
    --bs-btn-disabled-bg: var(--na-pine);
    --bs-btn-disabled-border-color: var(--na-pine);
}
.btn-outline-primary {
    --bs-btn-color: var(--na-pine);
    --bs-btn-border-color: var(--na-pine);
    --bs-btn-hover-bg: var(--na-pine);
    --bs-btn-hover-border-color: var(--na-pine);
    --bs-btn-active-bg: var(--na-pine);
    --bs-btn-active-border-color: var(--na-pine);
}
.btn-link { --bs-btn-color: var(--na-pine); --bs-btn-hover-color: var(--na-pine-strong); font-weight: 600; }

/* ---- Compact icon actions used in every table row ---- */
.table-actions { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    border-radius: var(--na-radius-sm);
    border: 1px solid var(--na-line);
    background: var(--na-surface);
    color: var(--na-muted);
    line-height: 0;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn-icon .icon { width: 1.05rem; height: 1.05rem; }
.btn-icon:hover { background: var(--na-paper); color: var(--na-pine); border-color: var(--na-leaf); }
.btn-icon.btn-icon-danger:hover { color: var(--na-danger); border-color: var(--na-danger); background: #FBEDED; }
.btn-icon.btn-icon-warning:hover { color: var(--na-brass-strong); border-color: var(--na-brass); background: #FBF3E0; }
.btn-icon.btn-icon-success:hover { color: var(--na-success); border-color: var(--na-success); background: #EAF5EC; }
.table-actions form { display: inline-flex; margin: 0; }

/* ============================ Badges ============================ */
.badge { font-weight: 600; letter-spacing: 0.01em; padding: 0.35em 0.6em; }
.text-bg-warning { background-color: var(--na-brass) !important; color: #fff !important; }
.text-bg-success { background-color: var(--na-success) !important; }
.text-bg-danger { background-color: var(--na-danger) !important; }
.text-bg-secondary { background-color: #E7ECE5 !important; color: var(--na-muted) !important; }

/* ============================ Tables ============================ */
.table { --bs-table-bg: var(--na-surface); border-color: var(--na-line); margin-bottom: 0; }
.table > thead th {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--na-muted);
    border-bottom: 1px solid var(--na-line);
    white-space: nowrap;
    padding-block: 0.85rem;
}
.table > tbody > tr > td { padding-block: 0.7rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(46, 107, 55, 0.028); }
.table-card { border: 1px solid var(--na-line); border-radius: var(--na-radius); overflow: hidden; background: var(--na-surface); box-shadow: var(--na-shadow-sm); }

/* The unit-picker card holds a type-ahead panel that drops BELOW its input; the card's overflow:hidden
   (there to clip table corners) would cut the results off at the card edge. Its padded content never
   reaches the rounded corners, so letting this card overflow is safe and lets the panel show in full. */
.table-card[data-unit-picker] { overflow: visible; }

/* ============================ Modals ============================ */
/* A scrollable modal keeps its header and footer fixed and scrolls only the body — but Bootstrap does
   that by making .modal-body a shrinkable flex child of .modal-content. Our dialogs wrap header/body/
   footer in a <form> (they have to: the submit button lives in the footer), which becomes the ONLY flex
   child, is not itself a flex container, and therefore grows to the full content height — pushing the
   footer, and its submit button, off the bottom of the screen once the body is tall (2026-07-20).
   Making the wrapping form the flex column restores the intended behaviour for every such dialog. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; min-height: 0; }

/* ============================ Forms ============================ */
.form-label { font-weight: 600; font-size: 0.875rem; color: var(--na-ink); }
.form-control, .form-select { border-color: var(--na-line); border-radius: var(--na-radius-sm); }
.form-control:focus, .form-select:focus, .btn:focus-visible, .form-check-input:focus {
    border-color: var(--na-leaf);
    box-shadow: 0 0 0 0.2rem rgba(113, 184, 67, 0.28);
}
.form-check-input:checked { background-color: var(--na-pine); border-color: var(--na-pine); }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; inset-inline-start: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--na-muted); pointer-events: none; }
.input-icon .form-control { padding-inline-start: 2.2rem; }

.form-narrow { max-width: 680px; }

/* ---- Alerts / list groups keep the palette instead of Bootstrap's stock tints ---- */
.alert { border-radius: var(--na-radius-sm); }
.alert-warning { --bs-alert-bg: #FBF3E0; --bs-alert-border-color: var(--na-brass-soft); --bs-alert-color: #6E5316; }
.alert-danger  { --bs-alert-bg: #F7E9E9; --bs-alert-border-color: #E4C4C4; --bs-alert-color: #7C2626; }
.alert-secondary { --bs-alert-bg: #EEF1EC; --bs-alert-border-color: var(--na-line); --bs-alert-color: var(--na-muted); }
.bg-success-subtle { background-color: var(--na-leaf-soft) !important; }
.bg-danger-subtle { background-color: #F7E9E9 !important; }
.bg-warning-subtle { background-color: #FBF3E0 !important; }
.bg-secondary-subtle { background-color: #EEF1EC !important; }
.border-success { border-color: var(--na-leaf) !important; }
.border-danger { border-color: #E4C4C4 !important; }
.border-warning { border-color: var(--na-brass-soft) !important; }

/* ============================ Sign-in "new ground" ============================ */
.auth-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(120% 78% at 50% -12%, rgba(113, 184, 67, 0.30), transparent 55%),
        linear-gradient(180deg, var(--na-canopy-2) 0%, var(--na-canopy) 55%, var(--na-canopy-deep) 100%);
}
.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--na-surface);
    border-radius: 16px;
    box-shadow: 0 26px 64px rgba(9, 34, 18, 0.45);
    padding: 2.25rem 2rem;
}
.auth-card .brand-mark { justify-content: center; margin-bottom: 0.5rem; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 1rem; }
.auth-logo img { width: 96px; height: 96px; object-fit: contain; }
.auth-lang { position: fixed; top: 1rem; inset-inline-end: 1rem; }
.auth-lang .btn { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.auth-lang .btn:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Credentials shown once: unmistakable, and never mirrored (a password has no direction) ---- */
.credential-value {
    font-family: ui-monospace, "IBM Plex Mono", SFMono-Regular, Consolas, monospace;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    padding: 0.35rem 0.6rem;
    background: var(--na-paper);
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius-sm);
}

/* ---- Grant editor ---- */
.module-card .form-check { margin-bottom: 0.35rem; }
.module-card .form-check-input:disabled + .form-check-label { opacity: 0.6; }
.feature-description { display: block; font-size: 0.825rem; color: var(--na-muted); }
/* Sticky action bar keeps Save/Cancel in reach while working the two-column editor. */
.sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.85rem 0;
    margin-top: 1rem;
    background: linear-gradient(180deg, rgba(244, 247, 241, 0), var(--na-paper) 40%);
}

/* ============================ Type-ahead (autocomplete) ============================ */
/* One dropdown for every picker (owners, transfer, unit links). The height is capped with an internal
   scroll so a full ten-row result never runs off the viewport — the old list grew unbounded and, inside
   a modal near the bottom of the screen, spilled past its edge. */
.autocomplete-menu {
    z-index: 1080;                       /* above modal content, so a picker in a dialog is never clipped by z-order */
    max-height: min(42vh, 21rem);
    overflow-y: auto;
    overscroll-behavior: contain;        /* scrolling the list to its end does not then scroll the page/modal */
    -webkit-overflow-scrolling: touch;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--na-surface);
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius-sm);
    box-shadow: var(--na-shadow);
}
.autocomplete-menu .list-group-item {
    border: 0;
    border-radius: var(--na-radius-sm);
    padding: 0.45rem 0.55rem;
}
.autocomplete-menu .list-group-item + .list-group-item { margin-top: 2px; }
.autocomplete-menu .list-group-item-action:hover,
.autocomplete-menu .list-group-item-action:focus {
    background: var(--na-leaf-soft);
    color: var(--na-ink);
}

/* A rich row: a leading avatar (initials for people, a glyph for units), a bold primary line, and a
   muted secondary line that truncates rather than wrapping a long location path into three lines. */
.ac-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; }
.ac-avatar {
    flex: 0 0 auto;
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--na-leaf-soft);
    color: var(--na-pine-strong);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
}
.ac-avatar .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.ac-body { flex: 1 1 auto; min-width: 0; }          /* min-width:0 lets the sub line actually truncate */
.ac-title {
    display: block;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--na-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-sub[dir="ltr"] { unicode-bidi: isolate; }        /* a masked ID / unit path keeps its own direction */

/* ============================ Quality floor ============================ */
:focus-visible { outline: 2px solid var(--na-leaf-strong); outline-offset: 2px; }
.skip-link {
    position: absolute;
    inset-inline-start: -999px;
    top: 0.5rem;
    z-index: 2000;
    background: var(--na-surface);
    color: var(--na-pine);
    padding: 0.5rem 0.9rem;
    border-radius: var(--na-radius-sm);
    box-shadow: var(--na-shadow);
}
.skip-link:focus { inset-inline-start: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Access Matrix (P11, FR-2.4) — tree layout only; everything else is Bootstrap ---------- */
.matrix-tree, .matrix-children, .matrix-gates { list-style: none; margin: 0; padding: 0; }
.matrix-children, .matrix-gates { padding-inline-start: 1.5rem; border-inline-start: 1px dashed var(--na-line); margin-inline-start: .5rem; }
.matrix-node { margin: .35rem 0; }
.matrix-node-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.matrix-node-name { font-weight: 600; }
.matrix-node-hint { color: var(--na-muted); font-size: .8rem; }
.matrix-gate { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; flex-wrap: wrap; }
.matrix-gate.is-inactive { opacity: .6; }
.matrix-gate-code { color: var(--na-muted); font-size: .8rem; }
.matrix-check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin: 0; }
.matrix-check .form-check-input { margin: 0; float: none; }

/* Gates must read as a different KIND of thing from the locations that contain them (2026-07-20): the
   admin is picking two different scopes in one tree, so they cannot look alike. */
.matrix-gate.is-gate .matrix-gate-name { font-weight: 500; }
.matrix-gate-icon { color: var(--na-leaf); }
.matrix-gate.is-gate { border-inline-start: 2px solid var(--na-leaf); padding-inline-start: .5rem; margin-inline-start: -.5rem; }