/* =====================================================================
   GuardDesk — Security Guard Management & Company Assignment Dashboard
   Design language: "duty board" control-room aesthetic. Graphite + paper
   with a single signal-amber accent (hi-vis derived). Hairline structure
   over shadows; tables and numbers are the content, not decoration.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink-900:#12151A;
  --ink-800:#171B20;
  --ink-700:#232830;
  --ink-600:#333A45;
  --ink-500:#525B69;
  --ink-400:#7A8494;
  --paper-0:#F4F5F3;
  --paper-50:#FFFFFF;
  --paper-100:#EAEBE7;
  --line:#DCDEDA;
  --line-strong:#C7C9C4;

  --amber:#E8A33D;
  --amber-ink:#7A4A0B;
  --amber-soft:#FBEBD2;

  --duty-blue:#2E5C99;
  --duty-blue-soft:#E3EBF6;

  --ok:#2F7D4F;
  --ok-soft:#E1F2E7;
  --bad:#B8412F;
  --bad-soft:#FBE6E1;
  --warn:#B4790C;
  --warn-soft:#FBEBD2;
  --muted:#6B7280;
  --muted-soft:#EEEFEC;

  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;

  --font-head:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-pop: 0 8px 24px -6px rgba(18,21,26,0.22), 0 2px 8px -2px rgba(18,21,26,0.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper-0);
  color:var(--ink-800);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-head); margin:0; color:var(--ink-900); letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:var(--duty-blue); text-decoration:none; }
button{ font-family:inherit; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--amber-soft); }

.tabular{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- App shell */
#app{ display:flex; min-height:100vh; }

.sidebar{
  width:236px; flex:0 0 236px;
  background:var(--ink-800);
  color:#E7E9EC;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .mark{
  width:30px; height:30px; border-radius:6px;
  background:var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; color:var(--ink-900); font-size:15px;
}
.sidebar-brand .name{ font-family:var(--font-head); font-weight:700; font-size:15.5px; color:#fff; }
.sidebar-brand .sub{ font-size:10.5px; color:#9AA3B0; letter-spacing:.03em; margin-top:1px; }

.nav{ flex:1; overflow-y:auto; padding:12px 10px 14px; }
.nav-group{ margin-bottom:4px; }
.nav-group-label{
  font-size:10.5px; font-weight:700; color:#7A8494; text-transform:uppercase;
  letter-spacing:.08em; padding:14px 10px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:6px; color:#C7CCD4;
  font-size:13.5px; font-weight:500; cursor:pointer; user-select:none;
  border:1px solid transparent;
}
.nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{ background:rgba(232,163,61,0.14); color:#fff; border-color:rgba(232,163,61,0.35); }
.nav-item.active .nav-dot{ background:var(--amber); }
.nav-item .nav-icon{ width:16px; height:16px; flex:0 0 16px; opacity:.9; }
.nav-item .nav-badge{
  margin-left:auto; background:var(--bad); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:999px; padding:1px 6px; min-width:16px; text-align:center;
}

.sidebar-foot{
  padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--duty-blue);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; flex:0 0 32px;
}
.sidebar-foot .who{ min-width:0; }
.sidebar-foot .who .name{ font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-foot .who .role{ font-size:11px; color:#9AA3B0; text-transform:capitalize; }
.sidebar-foot .logout{ margin-left:auto; background:none; border:none; color:#9AA3B0; cursor:pointer; padding:6px; border-radius:6px; }
.sidebar-foot .logout:hover{ color:#fff; background:rgba(255,255,255,0.08); }

/* ---------------------------------------------------------------- Main */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:60px; flex:0 0 60px;
  background:var(--paper-50); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:0 22px;
  position:sticky; top:0; z-index:20;
}
.topbar .page-title{ font-family:var(--font-head); font-weight:700; font-size:17px; }
.topbar .page-sub{ font-size:12px; color:var(--ink-500); margin-top:1px; }
.topbar-spacer{ flex:1; }
.topbar-clock{ font-size:12.5px; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.icon-btn{
  width:34px; height:34px; border-radius:7px; border:1px solid var(--line);
  background:var(--paper-50); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-600); position:relative;
}
.icon-btn:hover{ background:var(--paper-100); }
.icon-btn .dot{
  position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
  background:var(--bad); border:1.5px solid var(--paper-50);
}

.content{ padding:22px 26px 60px; max-width:1440px; width:100%; }

/* ---------------------------------------------------------------- Stat ledger (dashboard hero) */
.ledger{
  display:flex; background:var(--ink-800); border-radius:var(--radius-lg);
  overflow-x:auto; margin-bottom:22px; box-shadow:var(--shadow-pop);
}
.ledger-cell{
  flex:1 0 150px; padding:16px 18px; border-right:1px solid rgba(255,255,255,0.08);
  position:relative;
}
.ledger-cell:last-child{ border-right:none; }
.ledger-cell .lbl{ font-size:11px; color:#9AA3B0; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.ledger-cell .val{ font-family:var(--font-head); font-size:26px; font-weight:800; color:#fff; margin-top:6px; font-variant-numeric:tabular-nums; }
.ledger-cell .val.amber{ color:var(--amber); }
.ledger-cell .val.bad{ color:#F08877; }
.ledger-cell .val.ok{ color:#7FD49C; }
.ledger-cell .delta{ font-size:11px; color:#7A8494; margin-top:3px; }

/* ---------------------------------------------------------------- Cards / panels */
.panel{
  background:var(--paper-50); border:1px solid var(--line); border-radius:var(--radius-lg);
  margin-bottom:20px;
}
.panel-head{
  display:flex; align-items:center; gap:10px;
  padding:15px 18px; border-bottom:1px solid var(--line);
}
.panel-head h3{ font-size:14.5px; font-weight:700; }
.panel-head .hint{ font-size:12px; color:var(--ink-500); }
.panel-body{ padding:16px; }
.panel-body.flush{ padding:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1100px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--radius-md); font-size:13px; font-weight:600;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; line-height:1;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary{ background:var(--amber); color:var(--ink-900); }
.btn-primary:hover{ background:#DB9530; }
.btn-dark{ background:var(--ink-800); color:#fff; }
.btn-dark:hover{ background:var(--ink-700); }
.btn-outline{ background:var(--paper-50); border-color:var(--line-strong); color:var(--ink-700); }
.btn-outline:hover{ background:var(--paper-100); }
.btn-ghost{ background:transparent; color:var(--ink-600); }
.btn-ghost:hover{ background:var(--paper-100); }
.btn-danger{ background:var(--bad-soft); color:var(--bad); }
.btn-danger:hover{ background:#F5D3CB; }
.btn-sm{ padding:6px 10px; font-size:12px; border-radius:5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-icon{ width:32px; height:32px; padding:0; border-radius:6px; }

/* ---------------------------------------------------------------- Forms */
.field{ margin-bottom:11px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-700); margin-bottom:4px; }
.field .req{ color:var(--bad); }
.field .help{ font-size:11.5px; color:var(--ink-500); margin-top:4px; }
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=password],input[type=search],input[type=tel],select,textarea{
  width:100%; padding:7px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-md);
  font-size:13px; font-family:inherit; background:var(--paper-50); color:var(--ink-900);
}
textarea{ resize:vertical; min-height:56px; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--duty-blue); box-shadow:0 0 0 3px var(--duty-blue-soft);
}
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:0 14px; }
.form-grid .span-2{ grid-column:1 / -1; }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } }
.form-actions{ display:flex; justify-content:flex-end; gap:10px; padding-top:6px; border-top:1px solid var(--line); margin-top:6px; }
.fieldset-title{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-500); margin:14px 0 8px; padding-top:10px; border-top:1px solid var(--line);
}
.fieldset-title:first-child{ border-top:none; padding-top:0; margin-top:0; }
.computed-amount{
  background:var(--amber-soft); border:1px dashed #D9AF6B; border-radius:var(--radius-md);
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.computed-amount .lbl{ font-size:12px; color:var(--amber-ink); font-weight:600; }
.computed-amount .amt{ font-family:var(--font-head); font-size:19px; font-weight:800; color:var(--amber-ink); }

/* ---------------------------------------------------------------- Table toolbar */
.toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.toolbar .search-box{ position:relative; flex:1 1 220px; max-width:280px; }
.toolbar .search-box input{ padding-left:32px; }
.toolbar .search-box svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ink-400); }
.toolbar select{ width:auto; min-width:110px; padding:6px 9px; font-size:12px; }
.toolbar-spacer{ flex:1; }

/* ---------------------------------------------------------------- Data table */
.table-wrap{ overflow-x:auto; }
table.data th{
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-500); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--paper-0);
}
table.data td{ padding:8px 12px; border-bottom:1px solid var(--line); font-size:12.5px; vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tbody tr:hover{ background:var(--paper-0); }
.cell-primary{ font-weight:600; color:var(--ink-900); }
.cell-muted{ color:var(--ink-500); }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------------------------------------------------------------- Badges */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-ok{ background:var(--ok-soft); color:var(--ok); }
.badge-bad{ background:var(--bad-soft); color:var(--bad); }
.badge-warn{ background:var(--warn-soft); color:var(--warn); }
.badge-muted{ background:var(--muted-soft); color:var(--muted); }
.badge-blue{ background:var(--duty-blue-soft); color:var(--duty-blue); }
.badge-amber{ background:var(--amber-soft); color:var(--amber-ink); }

/* ---------------------------------------------------------------- Empty / loading states */
.empty-state{ text-align:center; padding:48px 20px; color:var(--ink-500); }
.empty-state .icon{ font-size:30px; margin-bottom:10px; opacity:.5; }
.empty-state h4{ font-size:14px; margin-bottom:5px; color:var(--ink-700); }
.empty-state p{ font-size:12.5px; max-width:320px; margin:0 auto; }
.skeleton{ background:linear-gradient(90deg,var(--paper-100) 25%,#F6F6F4 37%,var(--paper-100) 63%); background-size:400% 100%; animation:shimmer 1.4s infinite; border-radius:5px; }
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
.spinner{ width:16px; height:16px; border:2px solid rgba(0,0,0,.12); border-top-color:var(--ink-700); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
.spinner.on-dark{ border-color:rgba(255,255,255,.25); border-top-color:#fff; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------------- Pagination */
.pagination{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--line); }
.pagination .info{ font-size:12px; color:var(--ink-500); }
.pagination .pages{ display:flex; gap:6px; }
.page-btn{ width:28px; height:28px; border-radius:5px; border:1px solid var(--line-strong); background:var(--paper-50); cursor:pointer; font-size:12px; }
.page-btn.active{ background:var(--ink-800); color:#fff; border-color:var(--ink-800); }
.page-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------------------------------------------------------------- Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(18,21,26,0.5); display:flex; align-items:flex-start;
  justify-content:center; padding:5vh 16px; z-index:100; overflow-y:auto; backdrop-filter:blur(1px);
}
.modal{
  background:var(--paper-50); border-radius:var(--radius-lg); width:100%; max-width:600px;
  box-shadow:var(--shadow-pop); margin-bottom:5vh;
}
.modal.wide{ max-width:900px; }
.modal-head{ display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:15px; }
.modal-head .close{ margin-left:auto; background:none; border:none; cursor:pointer; color:var(--ink-500); font-size:18px; line-height:1; padding:4px; }
.modal-body{ padding:20px; max-height:70vh; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--line); }

/* ---------------------------------------------------------------- Toasts */
.toast-stack{ position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:var(--ink-800); color:#fff; padding:12px 16px; border-radius:var(--radius-md);
  font-size:13px; box-shadow:var(--shadow-pop); min-width:260px; max-width:360px;
  display:flex; align-items:flex-start; gap:10px; animation:toast-in .18s ease;
}
.toast.err{ background:var(--bad); }
.toast.ok{ background:var(--ok); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---------------------------------------------------------------- Misc */
.hairline{ height:1px; background:var(--line); border:none; margin:16px 0; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--paper-100); font-size:12px; font-weight:600; }
.tag-select{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-option{ padding:8px 14px; border-radius:7px; border:1.5px solid var(--line-strong); font-size:12.5px; font-weight:600; cursor:pointer; background:var(--paper-50); }
.tag-option.selected{ border-color:var(--amber); background:var(--amber-soft); color:var(--amber-ink); }
.small-note{ font-size:11.5px; color:var(--ink-500); }
.kpi-row{ display:flex; gap:22px; flex-wrap:wrap; }
.kpi{ min-width:110px; }
.kpi .n{ font-family:var(--font-head); font-size:22px; font-weight:800; }
.kpi .l{ font-size:11px; color:var(--ink-500); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

.sparkbar{ display:flex; align-items:flex-end; gap:4px; height:80px; }
.sparkbar .bar-group{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.sparkbar .stack{ width:100%; max-width:20px; display:flex; flex-direction:column-reverse; border-radius:3px 3px 0 0; overflow:hidden; }
.sparkbar .seg-present{ background:var(--ok); }
.sparkbar .seg-absent{ background:var(--bad); }
.sparkbar .day-lbl{ font-size:9.5px; color:var(--ink-400); }

.progress-track{ background:var(--paper-100); border-radius:999px; height:6px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--amber); border-radius:999px; }

.link-btn{ background:none; border:none; color:var(--duty-blue); cursor:pointer; font-size:12.5px; font-weight:600; padding:0; }
.link-btn:hover{ text-decoration:underline; }

.two-ref-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:720px){ .two-ref-grid{ grid-template-columns:1fr; } }
.ref-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; background:var(--paper-0); }
.ref-card h4{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-500); margin-bottom:10px; }

.avail-badge{ font-family:var(--font-head); font-weight:800; }

/* Board view (assignment) */
.board-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.board-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; background:var(--paper-50); }
.board-card .co-name{ font-weight:700; font-size:13.5px; margin-bottom:10px; }
.board-card .stat-line{ display:flex; justify-content:space-between; font-size:12px; padding:3px 0; }
.board-card .stat-line .l{ color:var(--ink-500); }
.board-card .stat-line .v{ font-weight:700; }

@media print{
  .sidebar,.topbar,.toolbar,.row-actions,.pagination,.btn,.no-print{ display:none !important; }
  .content{ padding:0; max-width:none; }
  .panel{ border:none; box-shadow:none; }
}