/* Accura Control Room — approved dashboard visual design (ported from dashboard-final-design-mockup).
   The page never scrolls; only .table-scroll (#tableWrap) scrolls internally. */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --border: #d7dde3;
  --text: #1b232c;
  --text-muted: #5b6773;
  --header-bg: #12233f;
  --header-text: #ffffff;

  --ok: #1c7a3d;
  --ok-bg: #e3f4e9;
  --warn: #8a5a00;
  --warn-bg: #fdf1d8;
  --danger: #a3241f;
  --danger-bg: #fbe4e2;
  --info: #1b4f96;
  --info-bg: #e4edfb;
  --neutral: #4b5563;
  --neutral-bg: #eceff2;
}
:root{--navy:#102740;--navy-2:#1b3652;--gold:#c69a46;--text:#243447;--muted:#66778a;--line:#dbe2e9;--canvas:#f3f6f8;--green:#187452;--green-bg:#eaf6ef;--amber:#926116;--amber-bg:#fff5df;--red:#aa3540;--red-bg:#fbecee;--blue:#315f86;--blue-bg:#eaf2f9}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--canvas);font-size:14px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.table-scroll:focus-visible{outline:3px solid #77a9d4;outline-offset:2px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}

.topbar{height:78px;flex:0 0 78px;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:14px;padding:0 18px;background:#fff;color:var(--navy);border-bottom:2px solid #d9e2e9}
.brand-area{display:flex;align-items:center;gap:11px;min-width:max-content}
.logo-tile{width:143px;height:47px;flex:0 0 143px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-tile img{display:block;width:133px;height:auto;max-height:40px;object-fit:contain}
.product-title{display:flex;flex-direction:column;min-width:max-content;gap:3px}
.product-title h1{font-size:20px;font-weight:680;letter-spacing:-.4px;white-space:nowrap;margin:0}
.product-title span{font-size:10px;letter-spacing:.55px;color:#67798b;white-space:nowrap}
.kpis{min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.kpi{height:60px;min-width:0;padding:4px 9px 3px;background:#1b3652;border:1px solid #38516a;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.kpi:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;background:#6c839a;border-radius:2px}
.kpi-green:before{background:#4cb78a}.kpi-amber:before{background:#dda94f}.kpi-red:before{background:#e5767e}
.kpi span{font-size:11.5px;font-weight:600;color:#d4dce5;line-height:1.08;white-space:normal}
.kpi strong{font-size:26px;font-weight:670;line-height:1;letter-spacing:-.7px;color:#fff}
.operator-area{display:grid;grid-template-columns:max-content 32px 70px;align-items:center;gap:10px;width:max-content}
.operator-copy{min-width:max-content;text-align:right;display:flex;flex-direction:column;gap:3px}
.operator-copy strong{font-size:13px;white-space:nowrap}.operator-copy span{font-size:11px;color:#617385;white-space:nowrap}
.operator-avatar{width:32px;height:32px;border:1px solid #cbd9e4;border-radius:50%;display:grid;place-items:center;background:#e7eef4;color:#1b3652;font-size:11px;font-weight:800}
.sign-out{width:70px;border:1px solid #c8d4df;border-radius:4px;background:#fff;color:var(--navy-2);font-size:12px;padding:7px 0;white-space:nowrap}
.sign-out:hover{background:#edf3f8}

.workspace{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.attention-section{flex:0 0 auto;padding:5px 20px 6px;background:#f7f9fb;border-bottom:1px solid var(--line)}
.section-heading{min-height:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.section-heading>div{display:flex;align-items:baseline;gap:12px;min-width:0}
.section-heading h2{display:flex;align-items:center;gap:7px;margin:0;color:var(--navy);font-size:17px;font-weight:720;white-space:nowrap}
.attention-rule{width:4px;height:17px;background:var(--red);border-radius:3px}
.attention-count{display:inline-grid;place-items:center;min-width:21px;height:20px;padding:0 5px;border-radius:4px;background:var(--red-bg);color:var(--red);font-size:12px}
.section-heading p{margin:0;font-size:12px;color:var(--muted);white-space:nowrap}
.view-all{border:0;background:none;color:var(--blue);font-size:13px;font-weight:650;white-space:nowrap;padding:3px 0}
.view-all:hover{text-decoration:underline}
.attention-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.attention-card{height:62px;min-width:0;display:grid;grid-template-columns:3px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px 7px 0;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px #172d4010}
.attention-card:before{content:"";align-self:stretch;background:var(--red);border-radius:2px}
.attention-card.amber:before{background:#c48d32}
.attention-card-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.attention-card-main strong{font-size:14px;line-height:1.12;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attention-card-main span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attention-card-main small{font-size:12px;color:var(--red);font-weight:750;letter-spacing:.15px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attention-card.amber small{color:var(--amber)}
.attention-card button{border:1px solid #cfd9e3;border-radius:4px;background:#fff;color:var(--navy-2);font-size:12px;font-weight:650;padding:7px 9px;white-space:nowrap}
.attention-card button:hover{background:#edf3f8}

.roster-section{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.toolbar{min-height:55px;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:7px 20px;border-bottom:1px solid var(--line)}
.roster-label{display:flex;align-items:baseline;gap:8px;white-space:nowrap;flex:0 0 auto}
.roster-label h2{margin:0;color:var(--navy);font-size:17px;font-weight:710}.roster-label span{color:var(--muted);font-size:12px}
.filter-pills{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.filter-pills::-webkit-scrollbar{display:none}
.filter-pill{flex:0 0 auto;border:1px solid transparent;border-radius:5px;background:transparent;color:#617286;padding:8px 9px;font-size:13px;font-weight:570;white-space:nowrap}
.filter-pill:hover{background:#eef3f7;color:var(--navy)}
.filter-pill.active{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:660}
.search-field{flex:0 1 230px;min-width:155px}
.search-field input,.site-field select{display:block;width:100%;height:34px;border:1px solid #cfd9e3;border-radius:5px;background:#fff;color:var(--text);font-size:13px;padding:0 10px}
.search-field input::placeholder{color:#8896a5}
.site-field{flex:0 1 155px;min-width:120px}
.table-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.shift-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.c-shift{width:9%}.c-officer{width:15%}.c-site{width:18%}.c-confirmation{width:13%}.c-journey{width:18%}.c-bookon{width:11%}.c-attention{width:10%}.c-action{width:6%}
.shift-table th{position:sticky;top:0;z-index:2;height:39px;padding:9px 10px;text-align:left;background:#eff3f6;border-bottom:1px solid #ccd7e0;color:#5c6e80;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:750;white-space:nowrap}
.shift-table th:first-child,.shift-table td:first-child{padding-left:20px}
.shift-table td{height:50px;padding:5px 10px;border-bottom:1px solid #e8edf1;vertical-align:middle;font-size:14px;line-height:1.15}
.shift-table tbody tr{background:#fff;cursor:pointer}
.shift-table tbody tr:hover{background:#f1f6fa}
.shift-table tbody tr.row-red{background:#fff7f7}.shift-table tbody tr.row-red:hover{background:#ffeff0}
.shift-table tbody tr.row-amber{background:#fffcf5}.shift-table tbody tr.row-amber:hover{background:#fff6e7}
.shift-table tbody tr.row-red td:first-child{box-shadow:inset 3px 0 var(--red)}
.shift-table tbody tr.row-amber td:first-child{box-shadow:inset 3px 0 #c79031}
.shift-time{display:block;color:var(--navy);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.shift-end{display:block;margin-top:2px;color:#7c8b9b;font-size:11.5px;font-variant-numeric:tabular-nums}
.officer-name{display:block;color:#25364a;font-size:15px;font-weight:680;line-height:1.15;overflow-wrap:anywhere}
.site-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:#46586b;line-height:1.18}
.pill{display:inline-block;max-width:100%;padding:4px 7px;border:1px solid transparent;border-radius:4px;font-size:12px;font-weight:640;line-height:1.1;white-space:normal;overflow-wrap:anywhere}
.pill.green{background:#f1f8f4;color:#31745a;border-color:#deebe2}
.pill.amber{background:var(--amber-bg);color:var(--amber);border-color:#f1dfb9}
.pill.red{background:var(--red-bg);color:var(--red);border-color:#efcfd3}
.pill.blue{background:var(--blue-bg);color:var(--blue);border-color:#d3e2ef}
.pill.gray{background:#f0f3f6;color:#68798a;border-color:#e0e6eb}
.journey-primary{display:block;font-size:14px;font-weight:720;color:var(--navy);line-height:1.1}
.journey-primary.urgent{color:var(--red)}.journey-primary.waiting{color:var(--amber)}
.journey-secondary{display:block;color:#738295;font-size:11.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attention-text{font-size:12.5px;font-weight:680;line-height:1.2;color:var(--red)}
.attention-text.amber{color:var(--amber)}.attention-text.none{color:#9aa7b3;font-weight:450}
.row-action{min-width:59px;border:1px solid #cbd6df;border-radius:4px;background:#fff;color:var(--navy-2);padding:7px 8px;font-size:12px;font-weight:680;white-space:nowrap}
.row-action:hover{border-color:#8ca5bc;background:#f1f5f9}
.row-action.urgent{background:var(--navy);border-color:var(--navy);color:#fff}
.row-action.urgent:hover{background:#284c6c}
.table-foot{min-height:23px;flex:0 0 23px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;border-top:1px solid var(--line);font-size:11.5px;color:#718296;white-space:nowrap}
.live-dot{display:inline-block;width:5px;height:5px;margin-right:5px;background:#38a275;border-radius:50%;vertical-align:middle}
.empty-row td{text-align:center;color:var(--muted);padding:26px!important;font-size:13px}

@media(max-width:1180px){
  .topbar{height:130px;flex-basis:130px;grid-template-columns:1fr auto;grid-template-rows:47px 60px;gap:4px 14px;padding:9px 17px}
  .kpis{grid-column:1 / -1;grid-row:2}.kpi{height:60px}
  .operator-area{grid-column:2;grid-row:1}
    .toolbar{flex-wrap:wrap;min-height:84px;gap:5px 12px;align-content:center}
  .roster-label{width:auto;flex:0 0 auto}
  .filter-pills{flex:1 1 calc(100% - 160px)}
  .search-field{flex:1 1 55%}.site-field{flex:1 1 28%}
  .shift-table{min-width:980px}
  .c-shift{width:9%}.c-officer{width:14%}.c-site{width:16%}.c-confirmation{width:13%}.c-journey{width:17%}.c-bookon{width:11%}.c-attention{width:11%}.c-action{width:9%}
}
@media(max-width:1050px){
  .section-heading p{display:none}
  .attention-card-main span{display:none}
  .attention-card-main{gap:3px}
  .attention-card{height:57px}
}
@media(max-height:800px) and (min-width:1181px){
  .topbar{height:72px;flex-basis:72px}
  .attention-section{padding-top:4px;padding-bottom:5px}
  .attention-card{height:58px}
  .toolbar{min-height:51px}
}

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #0d243b83;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid #d6e0e8;
  max-width: 660px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 20px 24px 24px;
  position: relative;
  box-shadow: 0 24px 70px #11283d40;
}
.modal h2 { margin: 0 0 14px; font-size: 20px; color: var(--navy); letter-spacing: -.2px; }
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}
.modal-note { font-size: 12px; color: var(--text-muted); }

.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 14px; margin-bottom: 14px; }
.evidence-grid dt { color: #77879a; font-size: 11px; font-weight: 750; letter-spacing: .5px; text-transform: uppercase; }
.evidence-grid dd { margin: 0 0 6px; color: var(--navy); font-weight: 600; }

.evidence-photo-wrap { text-align: center; margin: 10px 0 16px; }
.evidence-photo-wrap img { max-width: 100%; max-height: 320px; border: 1px solid var(--border); border-radius: 6px; }
.evidence-photo-wrap .no-image { color: var(--text-muted); font-size: 13px; padding: 32px; border: 1px dashed var(--border); border-radius: 6px; }

.review-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.review-actions button {
  border: none;
  border-radius: 5px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
}
.btn-approve { background: var(--ok); }
.btn-reject { background: var(--danger); }
.btn-needs-review { background: var(--warn); }
.review-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

.review-notes-field { width: 100%; }
.review-notes-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.review-notes-field textarea, .review-notes-field select {
  width: 100%;
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font: inherit;
  resize: vertical;
}
.review-notes-field select { min-height: auto; }

.form-message { font-size: 12px; padding: 8px 10px; border-radius: 6px; margin-top: 8px; }
.form-message.error { background: var(--danger-bg); color: var(--danger); }
.form-message.success { background: var(--ok-bg); color: var(--ok); }
.form-message.warn { background: var(--warn-bg); color: var(--warn); }

.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { padding: 7px 0; border-bottom: 1px solid #eef1f4; font-size: 13px; }
.history-list .ts { color: var(--text-muted); font-size: 11px; display: block; }
.history-list .cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--info); margin-right: 6px; }

.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-list li { padding: 8px 0; border-bottom: 1px solid #eef1f4; font-size: 13px; }
.queue-list .sub { color: var(--text-muted); font-size: 11px; }


/* ---------- Sign-in / access-denied pages (Phase 4G) ---------- */
body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px 36px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.auth-card h1 { font-size: 20px; margin: 0 0 8px; color: var(--header-bg); }
.auth-sub { color: var(--text); font-size: 14px; margin: 0 0 20px; }
.auth-footnote { color: var(--text-muted); font-size: 12px; margin-top: 18px; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.auth-label { font-size: 12px; color: var(--text-muted); }
.auth-input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.auth-form .btn-microsoft { border: 0; cursor: pointer; text-align: center; }
.btn-microsoft {
  display: inline-block;
  background: var(--header-bg);
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.btn-microsoft:hover { opacity: 0.92; }
.btn-secondary {
  display: inline-block;
  margin-top: 14px;
  color: var(--info);
  text-decoration: none;
  font-size: 13px;
}
.btn-secondary:hover { text-decoration: underline; }

/* ---------- Helpers shared with the restyled shell ---------- */
.hidden { display: none !important; }
.kpi { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.kpi:hover { background: #23425f; }
.kpi.active { border-color: #c69a46; box-shadow: 0 0 0 1px #c69a46; }
.kpi:focus-visible { outline: 3px solid #77a9d4; outline-offset: 2px; }
.heading-actions { display: flex; align-items: center; gap: 16px; }
.view-all.warn-link { color: var(--amber); }
.attention-cards .attention-empty { grid-column: 1 / -1; height: 62px; display: flex; align-items: center; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 13px; }
.shift-table tbody tr .row-action + .row-action { margin-left: 4px; }
.evidence-link { color: inherit; text-decoration: none; }
.modal-backdrop { z-index: 50; }

/* Old-token aliases still used by the sign-in / access-denied pages and modal forms */
:root { --info: #315f86; }

/* One-screen contract (also asserted by test 44): the app shell fills exactly
   one viewport and #tableWrap is the only region that scrolls. */
#app { height: 100vh; height: 100dvh; overflow: hidden; }
#tableWrap { overflow-y: auto; overflow-x: auto; }