/* ---------------------------------------------------------------------
   Plan Review — modern theme (v1.7.0)

   A layer on top of app.css: it changes how things look, never what they
   do. Same TCC navy and gold as the client portal, so staff and clients
   see one product. To roll back, remove the <link> to this file in
   index.html; app.css on its own is the previous look.
   --------------------------------------------------------------------- */

:root {
    --navy:           #1b2a4a;
    --navy-2:         #24365d;
    --navy-ink:       #101828;
    --gold:           #b8933e;
    --gold-soft:      #f6efdf;

    --primary:        #1b2a4a;
    --primary-dark:   #24365d;
    --primary-soft:   #e8edf6;
    --link:           #1d4f91;

    --bg:             #f4f5f8;
    --surface:        #ffffff;
    --border:         #e6e8ee;
    --border-strong:  #d0d5dd;

    --text:           #1c2433;
    --text-muted:     #667085;

    --neutral:        #475467;  --neutral-bg: #eef0f3;
    --pending:        #7a5a00;  --pending-bg: #fdf3d6;
    --progress:       #1d4f91;  --progress-bg:#e8f0fb;
    --success:        #17663a;  --success-bg: #e7f6ed;
    --problem:        #b42318;  --problem-bg: #fdeceb;

    --radius:         14px;
    --shadow:         0 1px 2px rgba(16, 24, 40, .04),
                      0 1px 3px rgba(16, 24, 40, .06);
    --shadow-lg:      0 12px 32px -8px rgba(16, 24, 40, .18),
                      0 4px 8px -4px rgba(16, 24, 40, .06);
    --ring:           0 0 0 4px rgba(27, 42, 74, .12);
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-feature-settings: "cv11", "ss01";
    color: var(--text);
    background: var(--bg);
}

h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; color: var(--navy-ink); }
h2 { font-size: 15px; font-weight: 600; color: var(--navy-ink); }
h3 { font-size: 12px; letter-spacing: .07em; color: var(--gold); font-weight: 700; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible { outline: none; box-shadow: var(--ring); }

/* --- forms --------------------------------------------------------------- */

label { font-size: 13px; color: #344054; font-weight: 500; margin: 16px 0 6px; }

input, select, textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: var(--ring);
}
input[type=checkbox], input[type=radio] { box-shadow: none; accent-color: var(--navy); }
input[type=search] {
    padding-left: 38px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 17px;
}

/* --- buttons ------------------------------------------------------------- */

button {
    border-radius: 9px;
    border-color: var(--border-strong);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
button:hover:not(:disabled) { background: #f8f9fb; border-color: #b9c0cc; }

button.primary { background: var(--navy); border-color: var(--navy); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--navy-2); border-color: var(--navy-2); }

button.danger { color: var(--problem); border-color: #f4c7c3; }
button.danger:hover:not(:disabled) { background: var(--problem-bg); border-color: #eea8a1; }

button.block { padding: 11px; border-radius: 10px; }
button.small { padding: 6px 12px; font-size: 13px; }
button.link  { box-shadow: none; color: var(--link); text-underline-offset: 2px; }
button.link:hover:not(:disabled) { background: none; }

/* --- sign in ------------------------------------------------------------- */

.signin {
    background:
        radial-gradient(1200px 400px at 50% -120px, #2c4170 0%, transparent 70%),
        linear-gradient(180deg, var(--navy) 0, var(--navy) 320px, var(--bg) 320px);
    align-content: start;
    padding-top: 12vh;
}

.signin-card {
    max-width: 400px;
    border: 0;
    border-top: 3px solid var(--gold);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 32px 32px 24px;
}
.signin-card h1 { font-size: 20px; }

.brand-tile {
    flex: 0 0 52px;
    height: 52px;
    background: url(/portal/img/tcc-mark.svg) no-repeat center / contain;
    color: transparent;
    font-size: 0;
}
.brand-header h1 { font-size: 17px; line-height: 1.25; }

/* --- app shell: dark navy sidebar --------------------------------------- */

.sidebar {
    width: 240px;
    flex: 0 0 240px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--navy);
    background-image: linear-gradient(180deg, #1f3054 0%, var(--navy) 40%);
    border-right: 0;
    color: #cdd5e3;
    padding: 20px 12px 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.005em;
}
.brand::before {
    content: "";
    flex: 0 0 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff url(/portal/img/tcc-mark.svg) no-repeat center / 26px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

.sidebar nav { gap: 2px; }

.sidebar nav a {
    justify-content: flex-start;
    gap: 11px;
    padding: 9px 12px;
    border-left: 0;
    border-radius: 9px;
    color: #c3cbdb;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar nav a::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    background: currentColor;
    opacity: .85;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar nav a.active {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--gold);
}
.sidebar nav a.active::before { opacity: 1; color: var(--gold); }

.sidebar nav .badge { margin-left: auto; color: #9fb0cc; }
.sidebar nav .badge:not(:empty) {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 11.5px;
}
.sidebar nav a.active .badge { color: #fff; }
.note-badge:not(:empty) { background: var(--gold) !important; color: #fff; }

.sidebar-tools { display: flex; align-items: center; gap: 8px; padding: 18px 8px 0; }
.sidebar-tools button {
    flex: 1;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #e6eaf2;
    box-shadow: none;
}
.sidebar-tools button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); }
.live-dot { margin-left: 0; flex: none; }
.live-dot.on  { background: #3ccf7a; box-shadow: 0 0 0 3px rgba(60, 207, 122, .2); }
.live-dot.off { background: #6b7a96; }

.sidebar-foot {
    margin-top: auto;
    padding: 14px 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
}
.who { color: #e6eaf2; font-weight: 500; }
.who:hover { color: #fff; }
.sidebar-foot button.link { color: #9fb0cc; }
.sidebar-foot button.link:hover { color: #fff; }
.sidebar .build { color: #7f8da8; }
.sidebar .powered-by { color: #7f8da8; padding: 12px 8px 0; }

main { padding: 32px 40px 48px; max-width: 1240px; }
.loading { padding: 60px 0; }

/* --- page furniture ------------------------------------------------------ */

.page-head { align-items: center; margin-bottom: 24px; }
.crumb { font-size: 13px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.card { border-color: var(--border); margin-bottom: 20px; }
.card-head { padding: 15px 20px; border-bottom-color: var(--border); }
.card-body { padding: 20px; }

.empty { padding: 40px 20px; }

/* --- tables -------------------------------------------------------------- */

th {
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    background: #f9fafb;
    padding: 11px 20px;
    border-bottom-color: var(--border);
}
td { padding: 14px 20px; border-bottom-color: #eef0f3; }
td strong { color: var(--navy-ink); font-weight: 600; }
tbody tr.clickable { transition: background .12s; }
tbody tr.clickable:hover { background: #f6f8fc; }

/* --- status pills: a dot, then the word ---------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* --- tabs ---------------------------------------------------------------- */

.tabs { gap: 4px; border-bottom-color: var(--border); margin-bottom: 22px; overflow-x: auto; }
.tabs button { box-shadow: none; padding: 10px 14px; font-weight: 500; white-space: nowrap; }
.tabs button:hover:not(:disabled) { background: none; color: var(--navy-ink); }
.tabs button.active { color: var(--navy-ink); font-weight: 600; border-bottom-color: var(--gold); }

/* --- details, notes, messages ------------------------------------------- */

.facts dt { font-size: 13px; }
.facts dd { color: var(--navy-ink); }

.check { border-color: var(--border); border-radius: 10px; transition: border-color .15s, background .15s; }
.check:hover { border-color: #c9d0dc; background: #fbfcfd; }

.note {
    background: #f1f5fc;
    border-left-color: var(--link);
    border-radius: 0 10px 10px 0;
}
.note.warn { background: var(--gold-soft); border-left-color: var(--gold); }

.msg { border-radius: 14px; padding: 10px 14px; }
.msg-client { border-bottom-left-radius: 4px; }
.msg-staff  { border-bottom-right-radius: 4px; }

.chip { border-color: var(--border-strong); }

.triage-group, .ev-file { border-radius: 10px; }
.ev-thumb { border-radius: 8px; }

/* --- filter chips -------------------------------------------------------- */

.filter-chips { gap: 8px; }
.filter-chips button { border-radius: 100px; padding: 6px 14px; }
.filter-chips button .muted { color: var(--text-muted); font-weight: 600; }

/* --- performance tiles --------------------------------------------------- */

.perf-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}
.perf-num { font-size: 28px; font-weight: 650; letter-spacing: -.02em; color: var(--navy-ink); }

/* --- toasts, alerts, update bar ----------------------------------------- */

.toast { background: var(--navy-ink); border-radius: 10px; box-shadow: var(--shadow-lg); }
.alert-card { border-left-color: var(--gold); border-radius: 12px; box-shadow: var(--shadow-lg); }
.update-bar { background: var(--navy); border-top: 2px solid var(--gold); }

.coc-step.done .coc-mark { box-shadow: 0 0 0 3px var(--success-bg); }
.coc-step.current .coc-mark { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

.sig-modal-card { border-radius: 16px; }

/* --- phone width: icon strip on top ------------------------------------- */

@media (max-width: 760px) {
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        height: auto;
        width: auto;
        flex: none;
        overflow: visible;
        padding: 8px 10px;
        gap: 6px;
        background: var(--navy);
        border-bottom: 2px solid var(--gold);
    }
    .brand { font-size: 0; padding: 0; gap: 0; }
    .brand::before { flex-basis: 32px; height: 32px; background-size: 22px; }
    .sidebar { flex-wrap: wrap; row-gap: 4px; }
    .sidebar nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none;
                   justify-content: space-between; }
    .sidebar nav a { font-size: 0; padding: 9px 10px; gap: 4px; flex: none; }
    .sidebar nav a.active { box-shadow: inset 0 -2px 0 var(--gold); border-bottom: 0; }
    .sidebar nav .badge:not(:empty) { font-size: 10.5px; padding: 0 6px; }
    .sidebar-tools { padding: 0; margin-left: auto; }
    .sidebar-tools button { flex: none; width: auto; padding: 6px 10px; }
    .sidebar-foot { border: 0; padding: 0 2px 0 12px; margin: 0; }
    .sidebar-tools .live-dot { margin-right: 2px; }
    .sidebar .build { display: none; }
    main { padding: 20px 14px 40px; }
    h1 { font-size: 21px; }
    .signin { padding-top: 6vh; }
}

/* --- nav icons (Lucide, ISC licence) ------------------------------------ */
.sidebar nav a[data-nav="queue"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012h-6l-2%203h-4l-2-3H2%22%2F%3E%3Cpath%20d%3D%22M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012h-6l-2%203h-4l-2-3H2%22%2F%3E%3Cpath%20d%3D%22M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z%22%2F%3E%3C%2Fsvg%3E"); }
.sidebar nav a[data-nav="projects"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.93a2%202%200%200%201-1.66-.9l-.82-1.2A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13c0%201.1.9%202%202%202Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.93a2%202%200%200%201-1.66-.9l-.82-1.2A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13c0%201.1.9%202%202%202Z%22%2F%3E%3C%2Fsvg%3E"); }
.sidebar nav a[data-nav="notifications"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22%2F%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22%2F%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22%2F%3E%3C%2Fsvg%3E"); }
.sidebar nav a[data-nav="clients"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01%22%2F%3E%3C%2Fsvg%3E"); }
.sidebar nav a[data-nav="staff"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E"); }
.sidebar nav a[data-nav="performance"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M18%2017V9M13%2017V5M8%2017v-3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M18%2017V9M13%2017V5M8%2017v-3%22%2F%3E%3C%2Fsvg%3E"); }

/* --- 1.8.0: staff municipalities ------------------------------------------ */
.muni-group { border: 1px solid var(--border, #e3e1da); border-radius: 10px;
              padding: 8px 12px; margin-top: 8px; }
.muni-group summary { cursor: pointer; }
.muni-group summary [data-count] { margin-left: 8px; }
.muni-group[open] summary { margin-bottom: 6px; }
.muni-tools { display: flex; gap: 14px; margin: 2px 0 8px; font-size: 13px; }
.ev-src { font-size: 12px; margin-top: 2px; }
.ev-src .pill { margin-right: 4px; }