/* ═══════════════════════════════════════════════════════════════════════════
   LAWFUNDER COMPONENTS - the shared look for every staff screen, written only in the tokens (lawfunder-tokens.css).
   File: Lawfunder.Admin/wwwroot/css/lawfunder.css
   LOOK-AND-FEEL-1 (Director, 24/10/2026). Loaded by Views/Shared/_Layout.cshtml AFTER Bootstrap and the older sheets, so it wins the
   cascade without !important. Colour means something: red outstanding, purple waiting on someone else, green done, grey not yet due.
   Gold is brand only and never text on white. The menu sets its own link colours, so no content-link rule can reach it
   (MenuContrastRenderedTests).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bootstrap 5.1 pointed at the tokens, so existing screens take the meaning colours before any view is edited ── */
:root {
    --bs-primary: #1A365D;  --bs-primary-rgb: 26, 54, 93;
    --bs-danger: #B42318;   --bs-danger-rgb: 180, 35, 24;
    --bs-success: #1E7B3C;  --bs-success-rgb: 30, 123, 60;
    --bs-body-font-family: var(--lf-font-sans);
    --bs-body-color: #17212E;
    --bs-body-bg: #F5F7FA;
}

body, .lf-body { font-family: var(--lf-font-sans); color: var(--lf-ink); background: var(--lf-surface); }
h1, h2, h3, h4, h5, h6 { font-family: var(--lf-font-sans); }

a { color: var(--lf-link); }
a:hover { color: var(--lf-link); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--lf-focus); outline-offset: 2px; }

.btn-primary { background-color: var(--lf-navy); border-color: var(--lf-navy); color: var(--lf-on-navy); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--lf-navy); border-color: var(--lf-navy); color: var(--lf-on-navy); filter: brightness(1.15); }
.btn-outline-primary { background-color: var(--lf-surface-raised); border-color: var(--lf-line-strong); color: var(--lf-link); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--lf-navy-soft); border-color: var(--lf-line-strong); color: var(--lf-link); }
.btn-outline-danger, .btn-danger { background-color: var(--lf-surface-raised); border-color: var(--lf-outstanding); color: var(--lf-outstanding); }
.btn-outline-danger:hover, .btn-danger:hover, .btn-outline-danger:focus, .btn-danger:focus { background-color: var(--lf-outstanding-soft); border-color: var(--lf-outstanding); color: var(--lf-outstanding); }

/* ── The side menu: navy, its own text colours, the gold marker on the active item only ── */
.lf-sidebar { background: var(--lf-navy); border-right: 0; }
.lf-sidebar a { color: var(--lf-menu-ink); }
.lf-sidebar a:hover { color: var(--lf-on-navy); }
.lf-brand-licence { color: var(--lf-menu-heading); }
.lf-nav-section-label { color: var(--lf-menu-heading); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; padding: 16px 16px 6px; }
.lf-nav-divider, .lf-menu-divider { height: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); background: none; margin: 12px 16px; }
.lf-nav-link, .lf-submenu .lf-nav-link { color: var(--lf-menu-ink); border-left: 4px solid transparent; font-size: 14px; }
.lf-nav-link:hover, .lf-submenu .lf-nav-link:hover { color: var(--lf-on-navy); background: rgba(255, 255, 255, .10); border-left-color: transparent; }
.lf-nav-link.lf-active, .lf-submenu .lf-nav-link.lf-active { color: var(--lf-on-navy); background: rgba(255, 255, 255, .10); border-left-color: var(--lf-gold); font-weight: 600; }
.lf-nav-link:focus { color: var(--lf-on-navy); }
.lf-nav-link:focus-visible { outline: 2px solid var(--lf-on-navy); outline-offset: -2px; }
/* The count beside Authorisations (and the critical count on My Day's link): white pill, red number */
.lf-count { margin-left: auto; display: inline-block; min-width: 20px; padding: 0 7px; border-radius: var(--lf-radius-pill);
            background: var(--lf-surface-raised); color: var(--lf-outstanding); font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; }

/* ── Page header: one search box, and who is signed in ── */
.lf-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lf-space-3); flex: 1 1 auto; min-width: 0; }
.lf-page-head .lf-global-search { flex: 1 1 240px; min-width: 0; max-width: 520px; }
.lf-page-head .lf-who { display: flex; align-items: center; gap: var(--lf-space-3); font-size: 14px; color: var(--lf-ink-muted); }
.lf-page-head .lf-who form { margin: 0; }
.lf-page-head .lf-signout { background: none; border: 0; padding: 0; color: var(--lf-link); font: inherit; cursor: pointer; }
.lf-page-head .lf-signout:hover { text-decoration: underline; }
.lf-crumb { font-size: 13px; color: var(--lf-ink-muted); }

/* ── Status pills: the word is always shown; colour never alone ── */
.lf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--lf-radius-pill); font-size: 13px; line-height: 18px;
           font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.lf-pill-outstanding { color: var(--lf-outstanding); background: var(--lf-outstanding-soft); }
.lf-pill-waiting { color: var(--lf-waiting); background: var(--lf-waiting-soft); }
.lf-pill-done { color: var(--lf-done); background: var(--lf-done-soft); }
.lf-dot { width: 8px; height: 8px; border-radius: var(--lf-radius-pill); background: currentColor; }
.lf-later { color: var(--lf-later); }

/* ── Buttons: at most one primary per page or card ── */
.lf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: var(--lf-radius-sm);
          font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.lf-btn:hover { text-decoration: none; }
.lf-btn-primary { background: var(--lf-navy); color: var(--lf-on-navy); border: 1px solid var(--lf-navy); }
.lf-btn-primary:hover { color: var(--lf-on-navy); filter: brightness(1.15); }
.lf-btn-secondary { background: var(--lf-surface-raised); color: var(--lf-link); border: 1px solid var(--lf-line-strong); }
.lf-btn-secondary:hover { color: var(--lf-link); background: var(--lf-navy-soft); }
.lf-btn-danger { background: var(--lf-surface-raised); color: var(--lf-outstanding); border: 1px solid var(--lf-outstanding); }
.lf-btn-danger:hover { color: var(--lf-outstanding); background: var(--lf-outstanding-soft); }
.lf-btn-text { background: none; border: 0; padding: 0; min-height: 0; color: var(--lf-link); }
@media (max-width: 600px) { .lf-btn { min-height: 44px; } }

/* ── Cards, rows, tiles, tables ── */
.lf-card { background: var(--lf-surface-raised); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-md); }
.lf-card > h2, .lf-card-head { margin: 0; padding: var(--lf-space-4); font-size: 16px; line-height: 24px; font-weight: 600; border-bottom: 1px solid var(--lf-line);
                               display: flex; align-items: center; gap: var(--lf-space-2); }
.lf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: var(--lf-space-3) var(--lf-space-4); border-bottom: 1px solid var(--lf-line); }
.lf-row:last-child { border-bottom: 0; }
.lf-row .lf-what { flex: 1 1 280px; min-width: 0; }
.lf-when { font-size: 13px; color: var(--lf-ink-muted); white-space: nowrap; }
.lf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--lf-space-4); }
.lf-tile { background: var(--lf-surface-raised); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-md); padding: var(--lf-space-4);
           display: flex; flex-direction: column; gap: var(--lf-space-1); }
.lf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--lf-space-6); align-items: start; }
.lf-stack { display: flex; flex-direction: column; gap: var(--lf-space-6); }
.lf-table-box { overflow-x: auto; }
.lf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lf-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--lf-ink-muted); text-transform: uppercase; letter-spacing: .04em;
               background: var(--lf-surface); padding: 10px 16px; border-bottom: 1px solid var(--lf-line); white-space: nowrap; }
.lf-table td { padding: 10px 16px; border-bottom: 1px solid var(--lf-line); }
.lf-table .lf-num { text-align: right; font-variant-numeric: tabular-nums; }
.lf-date { white-space: nowrap; }

/* ── The outstanding bar under a heading, stages, Key dates, More actions ── */
.lf-needs { background: var(--lf-outstanding-soft); border: 1px solid var(--lf-outstanding); border-radius: var(--lf-radius-md); padding: var(--lf-space-3) var(--lf-space-4);
            display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--lf-ink); }
.lf-needs strong { color: var(--lf-outstanding); }
.lf-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--lf-space-2); padding: var(--lf-space-4); }
.lf-stage { border-radius: var(--lf-radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: var(--lf-space-1); border: 1px solid var(--lf-line); }
.lf-stage-done { background: var(--lf-done-soft); border-color: var(--lf-done); }
.lf-stage-waiting { background: var(--lf-waiting-soft); border-color: var(--lf-waiting); }
.lf-stage-outstanding { background: var(--lf-outstanding-soft); border-color: var(--lf-outstanding); }
.lf-stage-later { background: var(--lf-surface); }
.lf-more { border-top: 1px solid var(--lf-line); padding-top: var(--lf-space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--lf-space-3); }
.lf-more > h2 { margin: 0; width: 100%; font-size: 13px; font-weight: 600; color: var(--lf-ink-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── The AI suggestion box: display only ── */
.lf-ai { display: inline-block; margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--lf-ink-muted); border: 1px dashed var(--lf-line-strong);
         border-radius: var(--lf-radius-sm); padding: 4px 8px; }
.lf-ai b { color: var(--lf-ink); font-weight: 600; }