/* styles.css — single source of truth for visual styling across all pages/components */

:root{
  --navy:#16233F; --slate:#45566E; --paper:#F5F2EC; --line:#DED8C9;
  --ink:#1E2430; --green:#2F6B4F; --blue:#2C5F8A; --red:#A8432F; --gray:#9C9587; --gold:#B98F3F;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  background:var(--paper); color:var(--ink);
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
.small{ font-size:12px; }
.muted{ color:var(--slate); }
.spin{ animation:spin 1s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Login page ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ width:min(400px,92vw); background:#fff; border:1px solid var(--line); border-radius:3px; padding:32px 28px; }
.login-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; margin-bottom:6px; }
.login-title{ font-family:'Source Serif 4',Georgia,serif; font-size:24px; font-weight:600; color:var(--navy); margin-bottom:22px; }
.login-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.login-field label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); }
.login-field input{ font-size:14px; padding:10px 11px; border:1px solid var(--line); border-radius:2px; background:#FBF9F4; }
.login-btn{ width:100%; padding:11px; background:var(--navy); color:#fff; border:none; border-radius:2px; font-size:14px; font-weight:600; cursor:pointer; margin-top:6px; }
.login-btn:hover{ background:#223259; }
.login-btn-google{ display:flex; align-items:center; justify-content:center; background:#fff; color:var(--ink); border:1px solid var(--line); }
.login-btn-google:hover{ background:#FBF9F4; }
.login-btn-google:disabled{ opacity:.6; cursor:default; }
.login-error{ background:rgba(168,67,47,.08); border:1px solid var(--red); color:var(--red); font-size:12.5px; padding:9px 11px; border-radius:2px; margin-bottom:14px; }
.login-hint{ margin-top:20px; padding-top:16px; border-top:1px dashed var(--line); font-size:11.5px; color:var(--slate); line-height:1.7; }
.login-hint b{ color:var(--ink); }

/* ---------- App shell ---------- */
.app-header{ display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#F5F2EC; padding:12px 22px; border-bottom:3px solid var(--gold); }
.app-header .brand-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:#C9BE9E; text-transform:uppercase; }
.app-header .brand-title{ font-family:'Source Serif 4',Georgia,serif; font-size:19px; font-weight:600; }
.app-header .header-right{ display:flex; align-items:center; gap:14px; }
.role-badge{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border:1px solid rgba(255,255,255,.35); border-radius:2px; }
.logout-btn{ background:transparent; border:1px solid rgba(255,255,255,.4); color:#F5F2EC; padding:7px 12px; border-radius:2px; font-size:12.5px; cursor:pointer; }
.logout-btn:hover{ background:rgba(255,255,255,.1); }

.layout{ display:flex; min-height:calc(100vh - 110px); }
.sidebar{ width:220px; flex-shrink:0; background:#EFEAE0; border-right:1px solid var(--line); padding:18px 0; }
.sidebar-section{ padding:0 16px 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin-top:14px; }
.sidebar-item{ display:flex; align-items:center; gap:9px; padding:10px 18px; font-size:13.5px; color:var(--ink); cursor:pointer; border-left:3px solid transparent; }
.sidebar-item:hover{ background:#E4DECF; }
.sidebar-item.active{ background:#fff; border-left-color:var(--gold); font-weight:600; color:var(--navy); }

.content{ flex:1; padding:24px 26px 40px; min-width:0; }

.app-footer{ display:flex; justify-content:space-between; align-items:center; padding:12px 22px; background:#EFEAE0; border-top:1px solid var(--line); font-size:11.5px; color:var(--slate); }

/* ---------- Controls ---------- */
.control-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); }
.field select{ font-size:13px; padding:7px 9px; border:1px solid var(--line); background:#fff; border-radius:2px; min-width:150px; }

.letterhead{ display:flex; justify-content:space-between; padding:6px 2px 12px; border-bottom:1px dashed var(--line); margin-bottom:12px; }
.page-title{ font-family:'Source Serif 4',serif; font-size:20px; color:var(--navy); margin:0 0 4px; }
.page-sub{ color:var(--slate); font-size:13px; margin:0 0 18px; }

/* ---------- Legend ---------- */
.legend{ display:flex; gap:16px; margin:10px 0 14px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--slate); }
.dot{ width:10px; height:10px; border-radius:2px; display:inline-block; }
.dot-uploaded{ background:var(--green); } .dot-replaced{ background:var(--blue); }
.dot-pending{ background:var(--red); } .dot-notdue{ background:var(--gray); opacity:.5; }

/* ---------- Grid table ---------- */
.grid-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:2px; }
.grid-table{ border-collapse:collapse; width:100%; min-width:800px; background:#fff; }
.grid-table th, .grid-table td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.grid-rowhead{ text-align:left; padding:9px 12px; background:#FBF9F4; position:sticky; left:0; min-width:200px; }
.grid-colhead{ padding:8px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); text-align:center; min-width:48px; }
.lock-icon{ display:block; margin:2px auto 0; color:var(--gold); font-size:11px; }
.col-highlight{ background:#F1ECDC; }
.grid-cell{ text-align:center; padding:4px; }
.row-name{ font-size:13px; font-weight:600; color:var(--navy); }
.row-tags{ margin-top:2px; }
.cell-btn{ width:32px; height:26px; border-radius:2px; border:none; cursor:pointer; font-weight:700; font-size:12px; color:#fff; }
.cell-uploaded{ background:var(--green); } .cell-replaced{ background:var(--blue); } .cell-pending{ background:var(--red); }
.cell-notdue{ background:#EFEAE0; color:var(--gray); border:1px dashed var(--line); cursor:default; }

.verify-row{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.btn-verify{ display:flex; align-items:center; gap:7px; padding:10px 16px; background:var(--navy); color:#fff; border:none; border-radius:2px; font-size:13px; font-weight:600; cursor:pointer; }
.btn-verify:disabled{ opacity:.4; cursor:default; }

/* ---------- Buttons ---------- */
.icon-btn{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:#fff; border:1px solid var(--line); border-radius:2px; cursor:pointer; color:var(--navy); }
.icon-btn:disabled{ opacity:.35; cursor:default; }
.btn-upload{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:6px 10px; background:var(--navy); color:#fff; border:none; border-radius:2px; cursor:pointer; }
.btn-secondary{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:6px 10px; background:#fff; border:1px solid var(--navy); color:var(--navy); border-radius:2px; cursor:pointer; }
.btn-alert-sm{ display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:6px 10px; background:#fff; border:1px solid var(--gold); color:#8a6a29; border-radius:2px; cursor:pointer; }
.btn-alert-sm:disabled{ opacity:.5; cursor:default; }
.btn-unlock{ display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:6px 10px; background:#fff; border:1px solid var(--red); color:var(--red); border-radius:2px; cursor:pointer; }
.btn-complete{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:9px 15px; background:var(--gold); color:#211804; border:none; border-radius:2px; cursor:pointer; box-shadow:0 0 0 2px rgba(185,143,63,.25); }
.btn-complete:disabled{ opacity:.6; cursor:default; }

/* ---------- Pills ---------- */
.pill{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:4px 9px; border-radius:2px; white-space:nowrap; }
.pill-uploaded{ background:rgba(47,107,79,.1); color:var(--green); border:1px solid var(--green); }
.pill-replaced{ background:rgba(44,95,138,.1); color:var(--blue); border:1px solid var(--blue); }
.pill-pending{ background:rgba(168,67,47,.08); color:var(--red); border:1px dashed var(--red); }
.pill-notdue{ background:#EFEAE0; color:var(--gray); border:1px dotted var(--gray); }
.pill-nil{ background:#EFEAE0; color:var(--slate); border:1px solid var(--slate); }

.btn-error{ display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:6px 10px; background:#fff; border:1px solid var(--red); color:var(--red); border-radius:2px; cursor:pointer; }
.btn-error:disabled{ opacity:.35; cursor:default; border-style:dashed; }

/* ---------- Modals & side panel ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(22,35,63,.55); display:flex; align-items:center; justify-content:center; z-index:80; }
.modal-panel{ width:min(640px,92vw); height:min(80vh,760px); background:#fff; border-radius:3px; display:flex; flex-direction:column; overflow:hidden; }
.modal-panel.wide{ width:min(940px,94vw); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); }
.modal-frame{ flex:1; border:none; width:100%; }
.coverage-body{ overflow-y:auto; padding:16px; }

.side-panel{ position:fixed; top:0; right:0; height:100%; width:min(430px,92vw); background:#fff; box-shadow:-8px 0 24px rgba(0,0,0,.18); display:flex; flex-direction:column; z-index:90; }
.side-head{ display:flex; justify-content:space-between; align-items:flex-start; padding:16px 18px; border-bottom:2px solid var(--navy); }
.side-title{ font-family:'Source Serif 4',serif; font-size:17px; font-weight:600; color:var(--navy); }
.side-body{ padding:10px 18px; overflow-y:auto; flex:1; }
.period-row{ display:flex; justify-content:space-between; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); }
.period-row:last-child{ border-bottom:none; }
.period-label{ font-size:13.5px; font-weight:600; }
.period-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.period-btns{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.lock-banner{ display:flex; align-items:center; gap:7px; background:#FBF3E4; color:#8a6a29; font-size:12.5px; padding:9px 18px; border-bottom:1px solid var(--line); }

/* ---------- Coverage matrix ---------- */
.matrix-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px; }
.matrix-card{ border:1px solid var(--line); border-radius:2px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.matrix-name{ font-size:13px; font-weight:600; color:var(--navy); }
.matrix-actions{ display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }

/* ---------- Manage reports (admin) ---------- */
.manage-form{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#fff; border:1px solid var(--line); padding:16px; border-radius:2px; margin-bottom:20px; }
.manage-form input, .manage-form select{ font-size:13px; padding:8px 9px; border:1px solid var(--line); border-radius:2px; }
.report-list-table{ width:100%; border-collapse:collapse; background:#fff; }
.report-list-table th{ text-align:left; font-size:11px; text-transform:uppercase; color:var(--slate); padding:8px 10px; border-bottom:2px solid var(--navy); }
.report-list-table td{ padding:9px 10px; border-bottom:1px solid var(--line); font-size:13px; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:11px 20px; border-radius:3px; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:100; }

@media (max-width: 760px){
  .layout{ flex-direction:column; }
  .sidebar{ width:100%; display:flex; overflow-x:auto; padding:8px; }
  .sidebar-item{ border-left:none; border-bottom:3px solid transparent; white-space:nowrap; }
  .sidebar-item.active{ border-bottom-color:var(--gold); }
}