/* ADFA New Issue Project Tracker — Phase 1 application chrome */
:root {
    --navy: #14304f;
    --navy-deep: #0d2237;
    --accent: #1668b8;
    --accent-soft: #e8f1fa;
    --ink: #1c2733;
    --ink-soft: #5a6b7d;
    --line: #d9e1e8;
    --paper: #f4f6f8;
    --card: #ffffff;
    --green: #166437;
    --green-soft: #e2f3e8;
    --amber: #7a4e00;
    --amber-soft: #fdf1dc;
    --red: #b3362c;
    --red-soft: #fbe7e5;
    --radius: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-size: 14.5px;
    line-height: 1.45;
}
h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
/* Route-change focus lands on the h1 for screen-reader announcement; no visible ring */
h1:focus, h1:focus-visible { outline: none; }

/* Keyboard focus is always visible (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-color: #fff; }

.sr-only {
    /* left/top pinned so the absolute box can never widen the document, regardless of
       whether an ancestor is positioned */
    position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--navy); color: #fff; padding: .5rem 1rem; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
h2 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 230px; flex: 0 0 230px;
    background: var(--navy); color: #cfdcea;
    display: flex; flex-direction: column;
}
.brand { padding: 1.1rem 1rem .9rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { display: block; font-weight: 700; font-size: 1.25rem; color: #fff; letter-spacing: .06em; }
.brand-sub { display: block; font-size: .72rem; opacity: .8; margin-top: .15rem; }
/* The mark sits to the left of the wordmark; .brand-mark is display:block, so they need a row. */
.brand-row { display: flex; align-items: center; gap: .5rem; }
.brand-uat-mark, .brand-uat img { display: block; border-radius: 50%; }
/* Full reset: the global `button` rule paints white-on-navy in the sidebar. Same reset .th-sort
   and .tabs button already use. */
.brand-uat {
    background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit;
    cursor: pointer; line-height: 0; border-radius: 50%;
}
.brand-uat:hover img { filter: brightness(1.15); }
.brand-uat[aria-busy="true"] { opacity: .6; cursor: progress; }
.brand-uat-error { color: #ffc9c4; font-size: .72rem; margin-top: .4rem; }
.brand-uat-note { color: #b9e3c7; font-size: .72rem; margin-top: .4rem; }

/* The overlay-proof capture trigger. Hidden by default and revealed only while a dialog backdrop
   is actually up: the brand button is inside the sidebar, which .overlay covers at z-index 50, so
   without this the one screen you most want to report — the one with a dialog on it — is the one
   screen you cannot report from. z-index sits above .overlay so it stays clickable, and
   data-capture="exclude" keeps it out of its own screenshot. :has() is supported by every browser
   this application targets; where it is not, the trigger simply stays hidden and the brand button
   still covers every non-dialog screen. */
.uat-fab { display: none; }
body:has(.overlay) .uat-fab {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: 50%;
    padding: .35rem; line-height: 0; cursor: pointer;
    box-shadow: 0 2px 10px rgba(13,34,55,.35);
}
body:has(.overlay) .uat-fab:hover { border-color: var(--accent); }
.uat-fab[aria-busy="true"] { opacity: .6; cursor: progress; }
.uat-fab img { display: block; border-radius: 50%; }
.sidebar nav { display: flex; flex-direction: column; padding: .6rem 0; flex: 1; }
.sidebar nav a {
    color: #cfdcea; padding: .55rem 1rem; font-size: .92rem;
    display: flex; align-items: center; gap: .5rem;
}
.sidebar nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.sidebar nav a.active { background: var(--accent); color: #fff; }
.nav-badge {
    background: var(--red); color: #fff; border-radius: 999px;
    font-size: .7rem; padding: .05rem .45rem; font-weight: 600;
}
.sidebar-user { padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; }
.user-name { color: #fff; font-weight: 600; }
.user-role { opacity: .8; margin: .1rem 0 .4rem; }
.logout { color: #9fc2e4; font-size: .78rem; }
.content { flex: 1; padding: 1.4rem 1.8rem; max-width: 1500px; min-width: 0; }

/* Small screens: sidebar becomes a top bar; content gets the full width */
@media (max-width: 760px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; flex: none; }
    .brand { padding: .7rem 1rem .5rem; }
    .brand-sub { display: none; }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; padding: .2rem .4rem; }
    .sidebar nav a { padding: .45rem .6rem; font-size: .85rem; }
    .sidebar-user { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .4rem 1rem .6rem; }
    .user-role { margin: 0; }
    .content { padding: .9rem .8rem; }
    .card { overflow-x: auto; }
    .page-head .actions { width: 100%; }
    .rollup .stat { min-width: 96px; }
}

/* ---------- login ---------- */
.login-wrap { max-width: 560px; margin: 8vh auto; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.persona-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
.persona-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink);
}
.persona-list a:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.persona-role { font-size: .78rem; color: var(--ink-soft); }

/* ---------- cards, chips, tables ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; font-weight: 600;
}
.chip.green { background: var(--green-soft); color: var(--green); }
.chip.amber { background: var(--amber-soft); color: var(--amber); }
.chip.red { background: var(--red-soft); color: var(--red); }
.chip.gray { background: #eceff2; color: var(--ink-soft); }
.chip.blue { background: var(--accent-soft); color: var(--accent); }

table.grid { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table.grid th, table.grid td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); font-size: .88rem; }
table.grid th { background: #eef2f5; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
table.grid tr:last-child td { border-bottom: none; }

/* ---------- dashboard ---------- */
.rollup { display: flex; gap: .9rem; flex-wrap: wrap; margin: .9rem 0 1.1rem; }
.rollup .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; min-width: 120px; font: inherit; text-align: left; color: var(--ink); }
.rollup button.stat { cursor: pointer; }
.rollup button.stat:hover { border-color: var(--accent); }
.rollup .stat.active-filter { border-color: var(--accent); background: var(--accent-soft); }
.stat-value { font-size: 1.3rem; font-weight: 700; }
.stat-label { font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.toolbar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar select, .toolbar input, select, input[type=text], input[type=number], input[type=date], textarea {
    padding: .42rem .55rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; color: var(--ink);
}
.toolbar label { font-size: .82rem; color: var(--ink-soft); }
.board { display: flex; gap: .8rem; overflow-x: auto; align-items: flex-start; padding-bottom: .8rem; }
.column { background: #eceff3; border-radius: var(--radius); min-width: 250px; width: 250px; flex: 0 0 250px; padding: .55rem; }
.column-head { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .2rem .3rem .5rem; display: flex; justify-content: space-between; }
.column .kcard { background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: .6rem .7rem; margin-bottom: .55rem; display: block; color: var(--ink); }
.column .kcard:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 1px 4px rgba(20,48,79,.12); }
.kcard-number { font-size: .72rem; color: var(--ink-soft); }
.kcard-name { font-weight: 600; margin: .1rem 0 .3rem; }
.kcard-meta { font-size: .78rem; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.kcard-stages { font-size: .74rem; color: var(--accent); margin-top: .3rem; }
.kcard-blocker { font-size: .74rem; color: var(--amber); font-weight: 600; margin-top: .3rem; }

/* ---------- project detail ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.page-head .meta { color: var(--ink-soft); font-size: .85rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
button, .btn {
    font: inherit; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--line);
    background: #fff; color: var(--ink); cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #12579c; color: #fff; }
button.danger { color: var(--red); }
button.danger:hover { border-color: var(--red); }
button:disabled { opacity: .5; cursor: not-allowed; }

.stepper { display: flex; gap: .15rem; overflow-x: auto; margin: 1rem 0 1.2rem; }
/* position:relative keeps absolutely-positioned .sr-only children inside the scroll
   container — without it they escape and widen the document on small screens */
.step { position: relative; min-width: 120px; flex: 1 0 120px; padding: .45rem .55rem; border-top: 4px solid var(--line); font-size: .76rem; }
.step .step-name { font-weight: 600; }
.step .step-date { color: var(--ink-soft); font-size: .72rem; }
.step.completed { border-top-color: var(--green); }
.step.active { border-top-color: var(--accent); background: var(--accent-soft); border-radius: 0 0 6px 6px; }
.step.skipped { border-top-color: #b8c2cc; color: var(--ink-soft); }
.step.reopened, .step.returned { border-top-color: var(--amber); }

.tabs { display: flex; gap: .2rem; border-bottom: 2px solid var(--line); margin-bottom: 1rem; }
.tabs button { border: none; background: none; border-radius: 6px 6px 0 0; padding: .5rem .9rem; font-weight: 600; color: var(--ink-soft); }
.tabs button.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

.stage-work { display: grid; grid-template-columns: minmax(380px, 1.2fr) minmax(320px, 1fr); gap: 1.1rem; align-items: start; }
.stage-work.single { grid-template-columns: 1fr; max-width: 820px; }
@media (max-width: 1100px) { .stage-work { grid-template-columns: 1fr; } }
.upload-details { padding: .25rem 0 .35rem .5rem; }
.upload-details summary { cursor: pointer; font-size: .8rem; color: var(--accent); font-weight: 600; }
.upload-details summary:hover { text-decoration: underline; }
.form-field { margin-bottom: .85rem; }
.form-field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .25rem; }
.form-field .help, .help { font-size: .74rem; color: var(--ink-soft); margin-top: .2rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; }
.form-field .req { color: var(--red); }
.field-section { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 1rem 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .25rem; }
.save-note { font-size: .74rem; color: var(--green); }
.conflict-note { font-size: .78rem; color: var(--red); }

.check-item { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: none; }
.check-name { font-size: .87rem; font-weight: 600; }
.check-meta { font-size: .74rem; color: var(--ink-soft); }
.check-actions { display: flex; gap: .3rem; }
.check-actions button { padding: .2rem .5rem; font-size: .74rem; }

.check-block { border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.check-block:last-of-type { border-bottom: none; }
.check-block .check-item { border-bottom: none; }
.doc-version { display: flex; gap: .5rem; align-items: center; font-size: .8rem; padding: .15rem 0 .15rem .5rem; }
.upload-slot { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .3rem 0 .3rem .5rem; }
.upload-slot input[type=file] { font-size: .78rem; max-width: 220px; }
.upload-slot button { padding: .25rem .6rem; font-size: .78rem; }

.gate-panel .gate { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem 0; }
.gate-icon { width: 1.1rem; text-align: center; }
.gate.pass .gate-icon { color: var(--green); }
.gate.fail .gate-icon { color: var(--red); }
.gate-reasons { margin: .15rem 0 0; padding-left: 1.1rem; font-size: .78rem; color: var(--ink-soft); }

.feed-item { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.feed-item:last-child { border-bottom: none; }
.feed-when { color: var(--ink-soft); font-size: .74rem; }

/* ---------- dialog ---------- */
.overlay { position: fixed; inset: 0; background: rgba(13,34,55,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.dialog { background: #fff; border-radius: var(--radius); padding: 1.2rem 1.3rem; width: 480px; max-width: 92vw; }
.dialog h3 { margin-top: 0; }
.dialog textarea { width: 100%; min-height: 90px; }
.dialog .dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }
.error-note { color: var(--red); font-size: .82rem; margin-top: .5rem; white-space: pre-line; }
.dialog.wide { width: 920px; max-width: 96vw; max-height: 92vh; overflow-y: auto; }
/* The capture is a full-page raster, so it is scrolled inside its own box rather than being
   allowed to set the dialog's height. No src until JS injects one - height:auto keeps the empty
   element from reserving a slab of blank space in that moment. */
/* Backlog thumbnail: the capture is a whole page, so it is clipped to its top-left rather than
   squashed - the part a reporter is describing is almost always above the fold. */
.uat-thumb {
    display: block; width: 100%; height: 66px; object-fit: cover; object-position: top left;
    border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
}
.uat-shot {
    display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain;
    object-position: top; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .9rem;
}

/* ---------- document version diff ---------- */
.diff-view { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); font-family: ui-monospace, Consolas, monospace; font-size: .78rem; line-height: 1.45; }
.diff-line { display: flex; padding: 0 .5rem; white-space: pre-wrap; word-break: break-word; }
.diff-line.ins { background: var(--green-soft); }
.diff-line.del { background: var(--red-soft); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.diff-line .diff-marker { flex: none; width: 1.1rem; color: var(--ink-soft); user-select: none; }
.diff-gap { display: block; width: 100%; border: none; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); background: #f6f8fa; color: var(--accent); font-size: .74rem; padding: .25rem; cursor: pointer; text-align: center; }
.diff-gap:hover { text-decoration: underline; }
.diff-line ins, .diff-line del { text-decoration: none; color: inherit; }
.diff-line.del del { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }

/* "ADFA asks" change-request note: collaborative amber, not alarm red */
.ask-note {
  background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 6px;
  color: var(--ink); font-size: .84rem; padding: .45rem .6rem; margin-top: .35rem;
}
mark { background: var(--amber-soft); color: inherit; padding: 0 .1em; }

/* ---------- notifications ---------- */
.notif { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem .4rem; border-bottom: 1px solid var(--line); }
.notif.unread { background: var(--accent-soft); }
.unread-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-right: .4rem; flex: none; }
.legend-note { font-size: .74rem; color: var(--ink-soft); margin: .1rem 0 .6rem; }
.th-sort {
    background: none; border: none; padding: 0; font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.th-sort:hover { color: var(--accent); }
.notif .n-title { font-size: .88rem; }
.notif .n-when { font-size: .74rem; color: var(--ink-soft); }

#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---------- error boundary fallback ---------- */
/* Rendered in place of whatever failed, so navigation and page context survive the failure. */
.error-panel { border-left: 3px solid var(--red); max-width: 46rem; }
.error-panel h2 { font-size: 1rem; margin: 0 0 .4rem; }
.error-panel p { margin: 0 0 .6rem; font-size: .88rem; }
.error-panel .meta { color: var(--ink-soft); font-size: .82rem; }
.error-panel code { background: #eceff2; border-radius: 4px; padding: .05rem .35rem; font-size: .8rem; }
.error-panel .actions { margin-top: .8rem; align-items: center; }
.error-panel .actions a { font-size: .85rem; }