/* optimacat-app.css — styling for everything Task 7 ADDED: the Past Evaluations
 * home screen, the two-screen shell, the portfolio card, the upload panel, the
 * saved-evaluation banner and the session-expired overlay. Nothing here restyles
 * a legacy rule; css/optimacat.css stays byte-identical to legacy index.html's
 * <style> block (Gate A enforces that).
 *
 * The one exception is the LEGIBILITY block at the bottom, which is a genuine bug
 * fix — see its own comment.
 *
 * Reuses the legacy tokens (--gold/--black/--border/--muted/...) so the new
 * screens are the same design system, not a second one.
 */

/* ── two-screen shell ─────────────────────────────────────────────────────── */
/* Legacy #app is display:none because the password gate used to reveal it. There
   is no gate now, so the workspace wrapper does it declaratively. */
#screen-workspace{flex-direction:column;min-height:100vh}
#screen-workspace #app{display:flex}
/* The dark <header> spans the full width; only the content under it is inset.
   Padding used to sit on the screen itself, which would leave the bar floating
   in a margin instead of anchoring the page the way it does in the workspace. */
#screen-home,#screen-config{display:flex;flex-direction:column;min-height:100vh}
.screen-body{display:flex;flex-direction:column;gap:22px;padding:24px 30px 40px;max-width:1600px;margin:0 auto;width:100%}

/* ── home header ──────────────────────────────────────────────────────────── */
/* The bar itself needs NO rules here. Past Evaluations and Configurations use a
   real <header> with .brand / .brand-logo-img-sm / .brand-sub / .header-right /
   .hdr-stat, every one of which is defined in css/optimacat.css — the stylesheet
   Gate A holds byte-identical to legacy index.html. The new screens therefore
   wear the ORIGINAL chrome rather than a copy of it, and it cannot drift from
   the workspace's, because there is only one definition.

   Only two things are genuinely new, and both are lifted from the inline styles
   legacy used at those exact spots (index.html's #hdr-dataset and its back
   button). */
.hdr-dataset{flex:1;text-align:center;font-family:'Syne',sans-serif;color:#fff;font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-btn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:7px 14px;font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.04em;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.hdr-btn:hover{border-color:var(--gold);color:var(--gold)}

/* The page title sits BELOW the bar, so the bar stays brand-only and identical
   on every screen — which is what makes them read as one product. */
.screen-head h1{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;color:var(--black);letter-spacing:.02em}
.dead-home-head{display:none}
.home-sub{color:var(--muted);font-size:.78rem;margin-top:2px}
.home-user{font-family:'DM Mono',monospace;font-size:.66rem}

/* ── home layout: table + side cards ──────────────────────────────────────── */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:1100px){.home-grid{grid-template-columns:minmax(0,1fr)}}
.home-main{min-width:0;display:flex;flex-direction:column;gap:12px}
.home-side{display:flex;flex-direction:column;gap:14px}
/* MIRRORS .panel / .panel-title from css/optimacat.css. Values copied rather than
   the classes reused, because swapping class names in the markup would churn two
   declared Gate A hunks for no visual gain — and optimacat.css cannot change
   (byte-identical to legacy), so these cannot silently drift apart.

   What this replaces: a light title on var(--surface2) with a gold border-TOP on
   the card. That inversion is most of why these screens read as a different app.
   The original's signature is a BLACK title bar, white uppercase Syne, gold
   border-BOTTOM — the same treatment the workspace panels and the
   .risklog-table header already use. */
.home-card{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.home-card-t{font-family:'Syne',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--white);padding:9px 13px 6px;border-bottom:2px solid var(--gold);background:var(--black);display:flex;align-items:center;justify-content:space-between}
.home-card-b{padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.home-card-actions{padding:0 14px 13px;display:flex;flex-direction:column;gap:7px}
.hp-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hp-k{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;white-space:nowrap}
.hp-v{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--black);text-align:right;overflow-wrap:anywhere}
.hp-empty{font-size:.76rem;color:var(--muted);font-style:italic}

/* ── mode tabs + filters ──────────────────────────────────────────────────── */
/* One segmented control, not three floating pills — mirroring .section-tabs in
   css/optimacat.css, which is how the workspace presents a choice of view. Three
   separate bordered pills read as three buttons; a segment reads as one control
   with a current position, which is what this actually is. */
.ev-tabs{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ev-tab-group{display:flex;gap:0;background:var(--grey);border:1px solid var(--border);border-radius:10px;padding:3px;width:fit-content}
.ev-tab{background:transparent;border:none;color:var(--muted);border-radius:8px;padding:7px 16px;cursor:pointer;font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.03em;user-select:none;white-space:nowrap;transition:color .15s,background .15s}
.ev-tab:hover{color:var(--black)}
.ev-tab.active{background:var(--black);color:var(--gold)}
.ev-new-btn{margin-left:auto;background:var(--black);color:var(--gold);border:1px solid var(--black);border-radius:8px;padding:8px 18px;cursor:pointer;font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.03em}
.ev-new-btn:hover{background:var(--gold);color:var(--black)}
.ev-filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ev-filters input[type=text]{background:var(--white);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 11px;font-size:.76rem;font-family:'Inter',sans-serif;outline:none;min-width:230px}
.ev-filters input[type=text]:nth-of-type(2){min-width:130px}
.ev-filters input[type=date]{background:var(--white);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 9px;font-size:.72rem;font-family:'DM Mono',monospace;outline:none}
.ev-filters input:focus{border-color:var(--gold)}
.ev-filters label{font-size:.68rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.ev-btn{background:var(--white);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:7px 14px;cursor:pointer;font-size:.72rem;font-family:'Inter',sans-serif;transition:color .15s,border-color .15s}
.ev-btn:hover:not(:disabled){color:var(--black);border-color:var(--black)}
.ev-btn:disabled{opacity:.45;cursor:default}
.ev-btn-primary{background:var(--gold);border-color:var(--gold);color:var(--black);font-weight:700}
.ev-btn-primary:hover:not(:disabled){background:var(--gold-dark);border-color:var(--gold-dark);color:var(--black)}
.ev-status{font-size:.72rem;color:var(--muted);min-height:1.1em}

/* ── evaluations table ────────────────────────────────────────────────────── */
/* .risklog-scroll / .risklog-table come from css/optimacat.css — the session log
   and this table are deliberately the same object visually. */
.ev-panel{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:12px}
.ev-panel .risklog-scroll{max-height:62vh}
.risklog-table tr.ev-row{cursor:pointer}
.risklog-table tr.ev-row:hover td{background:var(--gold-light)}
.ev-empty{padding:26px 10px;font-size:.8rem;color:var(--muted);font-style:italic;text-align:center}
.ev-badge{display:inline-block;border-radius:5px;padding:2px 8px;font-family:'Inter',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ev-badge-uw{background:#e0e7ff;color:#3730a3;border:1px solid #c7d2fe}
.ev-badge-cat{background:var(--gold-light);color:#8a6d00;border:1px solid var(--gold)}
/* The third state the access gate introduced: a person with no row in
   dbo.UserRoles. Deliberately the quietest of the three — most of a 484-person
   directory has no access, and a loud badge on 480 rows would drown the handful
   that matter. */
.ev-badge-none{background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.ev-btn-danger{color:var(--danger);border-color:var(--border)}
.ev-btn-danger:hover{border-color:var(--danger);color:var(--danger)}

/* ── access-not-granted overlay (terminal state) ───────────────────────────── */
/* Signed in, but not on the list. Styled like the session-expired overlay it sits
   beside, because they are the same KIND of thing: an end state the app enters,
   not a screen it routes to. */
#no-access-overlay{position:fixed;inset:0;background:rgba(26,26,26,.92);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px}
.na-box{background:var(--white);border-radius:14px;border-top:3px solid var(--gold);padding:34px 38px;max-width:460px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.na-logo img{height:38px;margin-bottom:18px}
.na-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.15rem;color:var(--black);margin-bottom:12px}
.na-body{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:22px}
.na-btn{background:var(--gold);color:var(--black);border:none;border-radius:8px;padding:10px 26px;font-family:'Syne',sans-serif;font-weight:700;font-size:.76rem;cursor:pointer}
.na-btn:hover{opacity:.88}
/* The sign-in name under a display name in the roles grid. Two people can share
   a display name, and the UPN is what tells them apart — assigning manager to the
   wrong "J. Rivera" is the mistake this line exists to prevent. */
.ev-sub{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted);margin-top:2px}
.ev-pager{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.ev-page-label{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--muted)}

/* ── upload panel ─────────────────────────────────────────────────────────── */
/* Lives inside .home-card-t, which is a dark bar now — var(--muted) on black is
   unreadable. */
.up-close{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:.8rem;line-height:1;padding:0}
.up-close:hover{color:var(--gold)}
.up-label{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:3px}
#upload-panel input[type=file]{font-size:.7rem;color:var(--text)}
#upload-panel input[type=text]{background:var(--grey);border:1px solid var(--border);border-radius:6px;padding:6px 9px;font-size:.72rem;font-family:'Inter',sans-serif;color:var(--text);outline:none}
#upload-panel input[type=text]:focus{border-color:var(--gold)}
.up-status{font-size:.7rem;color:var(--muted);min-height:1.1em;line-height:1.4}
.up-result{margin-top:4px;max-height:230px;overflow-y:auto;border-top:1px solid var(--border);padding-top:8px}
.up-block{margin-bottom:9px}
.up-block-t{font-size:.62rem;font-weight:700;color:var(--black);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.up-block-b{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}

/* ── saved-evaluation banner (workspace side panel) ───────────────────────── */
#stored-eval-banner{display:flex;flex-direction:column;gap:7px;margin:12px 14px 0;padding:10px 12px;background:var(--gold-light);border:1px solid var(--gold);border-radius:8px}
#stored-eval-banner .se-text{font-size:.68rem;color:#6b5500;line-height:1.45;font-weight:600}
#stored-eval-banner .se-btn{background:var(--black);color:var(--gold);border:none;border-radius:6px;padding:6px 10px;font-family:'Syne',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.04em;cursor:pointer}
#stored-eval-banner .se-btn:hover{background:var(--gold);color:var(--black)}

/* ── historical (frozen) weight sliders on a stored snapshot ──────────────── */
/* The sliders must not merely be inert — they must LOOK inert, or the user reads a
   composite score next to controls they believe are live. */
#weights-historical-note{font-size:.6rem;color:#6b5500;background:var(--gold-light);border:1px solid var(--gold);border-radius:6px;padding:6px 8px;margin-bottom:7px;line-height:1.45}
.weights-frozen{opacity:.62}
.weights-frozen .w-slider{cursor:not-allowed}
.weights-frozen .w-slider:disabled{accent-color:var(--muted)}
.reset-btn:disabled{opacity:.45;cursor:not-allowed}

/* ── degraded-capability notice (fail-closed bootstrap) ───────────────────── */
#degraded-mode-notice{position:sticky;top:0;z-index:9000;background:#7f1d1d;color:#fff;font-family:'Inter',sans-serif;font-size:.74rem;line-height:1.5;padding:10px 18px;text-align:center}
#degraded-mode-notice b{color:var(--gold)}

/* ── session-expired overlay (terminal state) ─────────────────────────────── */
#session-expired-overlay{position:fixed;inset:0;z-index:99999;background:rgba(26,26,26,.92);display:flex;align-items:center;justify-content:center;padding:24px}
#session-expired-overlay .sx-box{background:var(--white);border-top:3px solid var(--gold);border-radius:12px;padding:26px 30px;max-width:430px;text-align:center}
#session-expired-overlay .sx-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;color:var(--black);margin-bottom:10px}
#session-expired-overlay .sx-body{font-size:.8rem;color:var(--muted);line-height:1.55;margin-bottom:18px}
#session-expired-overlay .sx-btn{background:var(--gold);color:var(--black);border:none;border-radius:8px;padding:9px 22px;font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;cursor:pointer}

/* ── LEGIBILITY FIX: dark-theme leftovers in legacy inline styles ──────────
 * index.html's side-panel help panels carry inline colours from an older dark
 * build (#999/#bbb/#aaa text, a #3a3a3a table rule) that render on the WHITE
 * .layer-section-body surface — grey-on-white at 1.9:1 to 2.8:1 contrast. This is
 * not a mode issue: index.html's palette is light too, so the text is illegible in
 * BOTH modes and the fix is unscoped.
 *
 * uw.html is the light source of truth: its equivalent help panel uses #555 body
 * text, #333 emphasis, #444 table bodies and a #ddd table rule. Those are the
 * values applied here. !important is required (and only here) because the values
 * being corrected are INLINE style attributes; the alternative — rewriting ~15
 * long markup lines — would churn the legacy-parity diff for no functional gain.
 */
.layer-section-body details > div[style]{color:#555!important}
.layer-section-body details > div[style] b[style]{color:#333!important}
.layer-section-body details table thead tr[style]{color:#666!important}
.layer-section-body details table th[style]{border-bottom-color:#ddd!important}
.layer-section-body details table tbody[style]{color:#444!important}
.layer-section-body details > div[style] span[style*="color:#777"]{color:#6b6b6b!important}
.layer-section-body > div[style*="color:#aaa"]{color:#666!important}

/* ── CONFIGURATIONS SCREEN + ROLE AFFORDANCES ─────────────────────────────
 * Added with the role/type split. #screen-config is the third screen (the other
 * two are #screen-home and #screen-workspace); it is shown only for managers and
 * carries NO data-feature attribute, so applyModeConfig never prunes any of it —
 * this screen belongs to the caller's role, not to an evaluation's type.
 */
#screen-config{flex-direction:column;gap:18px;padding:26px 30px 34px;max-width:1500px;margin:0 auto;width:100%}
.cfg-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;align-items:start}
.cfg-card{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
/* The roles grid is the reason to open this screen, so it gets the tall column
 * to itself and the three settings cards stack beside it. */
.cfg-card-wide{grid-row:span 3}
.cfg-note{font-size:.72rem;color:var(--muted);line-height:1.5}
.cfg-note b{color:var(--black)}
.cfg-toolbar{display:flex;align-items:center;gap:10px;margin-top:4px}
.cfg-toolbar input{flex:1;min-width:0}
.cfg-count{font-size:.65rem;color:var(--muted);white-space:nowrap}
.cfg-status{font-size:.7rem;color:var(--muted);min-height:1em}
.cfg-scroll{max-height:520px}
.cfg-weights{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfg-weights label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.7rem;color:var(--muted)}
.cfg-weights input{width:68px;text-align:right}
.cfg-total{font-family:'Syne',sans-serif;font-weight:700;font-size:.72rem;color:var(--black);display:flex;justify-content:space-between;padding-top:4px;border-top:1px solid var(--border)}

/* Sits in the home tab strip beside "+ New Evaluation"; hidden for non-managers. */
.ev-cfg-btn{margin-left:8px}

/* Per-row rename. stopPropagation on the click keeps it from also opening the row. */
.ev-rename-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:3px 9px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.62rem;white-space:nowrap}
.ev-rename-btn:hover{color:var(--black);border-color:var(--black)}

/* The manager's evaluation-type prompt. Same visual language as the
 * session-expired overlay, which is the app's only other modal. */
#mode-choice-modal{position:fixed;inset:0;z-index:99998;background:rgba(26,26,26,.88);display:flex;align-items:center;justify-content:center;padding:24px}
#mode-choice-modal .mc-box{background:var(--white);border-top:3px solid var(--gold);border-radius:12px;padding:24px 28px;max-width:640px;width:100%}
#mode-choice-modal .mc-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.02rem;color:var(--black);margin-bottom:6px}
#mode-choice-modal .mc-body{font-size:.76rem;color:var(--muted);line-height:1.5;margin-bottom:16px}
#mode-choice-modal .mc-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#mode-choice-modal .mc-opt{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s}
#mode-choice-modal .mc-opt:hover,#mode-choice-modal .mc-opt:focus-visible{border-color:var(--gold);background:var(--gold-light);outline:none}
#mode-choice-modal .mc-opt-t{font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;color:var(--black)}
#mode-choice-modal .mc-opt-d{font-size:.68rem;color:var(--muted);line-height:1.45}
#mode-choice-modal .mc-cancel{margin-top:14px;background:none;border:none;color:var(--muted);font-size:.7rem;cursor:pointer;text-decoration:underline}
@media (max-width:760px){
  .cfg-grid{grid-template-columns:minmax(0,1fr)}
  .cfg-card-wide{grid-row:auto}
  #mode-choice-modal .mc-actions{grid-template-columns:1fr}
}