/* ASRON Station360 stylesheet — THE single source of truth. Edit this
   file directly; it's served as-is with no build step, since shared
   hosting for this project doesn't run npm/Vite. Do not reintroduce a
   resources/css/app.css that this gets generated from — two copies is
   how they drift out of sync. */

:root {
    --bg: #0a0a0a;
    --surface: #161616;
    --surface-2: #1e1e1e;
    --surface-3: #242424;
    --border: #282828;
    --accent: #c6f73f;
    --accent-dim: rgba(198, 247, 63, 0.12);
    --text: #ffffff;
    --muted: #8b8b8b;
    --muted-2: #6a6a6a;
    --green: #7be04f;
    --yellow: #f2c94c;
    --red: #ff5c5c;
    --radius: 16px;
    --radius-sm: 10px;
    /* Native date pickers, dropdown lists and scrollbars follow this, not the computer's setting. */
    color-scheme: dark;
}

/* Light theme — activated via [data-theme="light"] on <html>,
   toggled and persisted by resources/js/app.js. Dark above stays
   the default so a JS-disabled load still renders correctly. */
html[data-theme="light"] {
    --bg: #f4f4f2;
    --surface: #ffffff;
    --surface-2: #f2f2ef;
    --surface-3: #e8e8e4;
    --border: #e0e0dc;
    --accent: #8fc71f;
    --accent-dim: rgba(143, 199, 31, 0.12);
    --text: #16160f;
    --muted: #6b6b62;
    --muted-2: #96968b;
    --green: #2e9c1c;
    --yellow: #a6790a;
    --red: #d93636;
    color-scheme: light;
}
html[data-theme="light"] .btn-accent,
html[data-theme="light"] .nav-item.active {
    color: #ffffff;
}
html[data-theme="light"] .nav-item.active .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* ---------- Component styles ported from /prototypes ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
.shell{display:flex;flex-direction:column;min-height:100vh;padding:16px;gap:14px}

/* ---------- Top nav ---------- */
.topnav{
  background:var(--surface);border-radius:var(--radius);
  padding:11px 16px;display:flex;align-items:center;gap:20px;
}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-mark{
  width:26px;height:26px;border-radius:7px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.logo-mark svg{width:15px;height:15px}
.logo-text{font-size:14px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.logo-text span{color:var(--accent)}

.nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto}
.nav-item{
  display:flex;align-items:center;gap:7px;padding:8px 12px;
  border-radius:var(--radius-sm);color:var(--muted);
  text-decoration:none;font-size:12.5px;font-weight:500;white-space:nowrap;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent);color:#0A0A0A;font-weight:600}
.nav-item svg{width:15px;height:15px;flex-shrink:0}
.nav-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 4px}
.badge{
  background:var(--surface-3);color:var(--muted);
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;
}
.nav-item.active .badge{background:rgba(0,0,0,.18);color:#0A0A0A}
.badge.alert{background:rgba(255,92,92,.16);color:var(--red)}

.profile{display:flex;align-items:center;gap:9px;flex-shrink:0}
.avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#3A4A2A,#556B34);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;color:var(--accent);
}
.profile-name{font-size:11.5px;font-weight:600;line-height:1.25;text-align:left}
.profile-role{font-size:10px;color:var(--muted);line-height:1.25;text-align:left}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.topbar{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.page-title{font-size:16px;font-weight:600;letter-spacing:-.2px;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Nav "More" dropdown ---------- */
[x-cloak]{display:none!important}
.nav-dropdown{position:relative}
.nav-dropdown>.nav-item{background:none;border:none;font:inherit;cursor:pointer}
/* A dropdown button that is the current screen (Reports on a report page) keeps the active fill the rule above would strip. */
.nav-dropdown>.nav-item.active{background:var(--accent)}
.nav-dropdown>.nav-item svg:last-child{width:10px;height:10px;margin-left:1px}
.dropdown-panel{
  position:absolute;top:calc(100% + 6px);left:0;min-width:200px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px;box-shadow:0 12px 28px rgba(0,0,0,.35);z-index:40;
  max-height:calc(100vh - 90px);overflow-y:auto;
}
.dropdown-group-label{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted-2);font-weight:600;padding:7px 9px 4px;
}
.dropdown-item{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;
  color:var(--text);text-decoration:none;font-size:12.5px;font-weight:500;
}
.dropdown-item:hover{background:var(--surface-3)}
.dropdown-item svg{width:14px;height:14px;color:var(--muted);flex-shrink:0}

.profile-dropdown-wrap .dropdown-panel,
.station-actions-dropdown .dropdown-panel{left:auto;right:0}

/* Theme toggle — sliding pill switch */
.theme-switch-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:none;cursor:pointer;font-family:inherit;
  padding:8px 9px;border-radius:8px;
}
.theme-switch-row:hover{background:var(--surface-3)}
.theme-switch-label{font-size:11px;font-weight:600;color:var(--muted-2);transition:color .15s}
.theme-switch-row .theme-switch-label-dark{color:var(--text)}
.theme-switch-row.is-light .theme-switch-label-light{color:var(--text)}
.theme-switch-row.is-light .theme-switch-label-dark{color:var(--muted-2)}
.theme-switch-track{
  position:relative;flex-shrink:0;width:40px;height:21px;border-radius:999px;
  background:#1E2761;transition:background-color .2s;
}
.theme-switch-row.is-light .theme-switch-track{background:#8FC7FF}
.theme-switch-thumb{
  position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#0A0A0A;display:flex;align-items:center;justify-content:center;
  transition:left .2s,background-color .2s;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.theme-switch-row.is-light .theme-switch-thumb{left:21px;background:#FFFFFF}

.btn-accent{
  background:var(--accent);color:#0A0A0A;border:none;border-radius:var(--radius-sm);
  padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:7px;font-family:inherit;white-space:nowrap;
}
.btn-accent svg{width:14px;height:14px}
.icon-btn{
  width:34px;height:34px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--muted);position:relative;
}
.icon-btn svg{width:15px;height:15px}
.icon-btn .dot{
  position:absolute;top:7px;right:8px;width:6px;height:6px;
  border-radius:50%;background:var(--red);border:1.5px solid var(--surface);
}

/* ---------- Grid & cards ---------- */
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g-main{grid-template-columns:1.55fr 1fr}
.g-bottom{grid-template-columns:1.35fr .95fr .9fr}
@media(max-width:1400px){.g-bottom{grid-template-columns:1fr 1fr}.g-bottom>:last-child{grid-column:span 2}}
@media(max-width:1400px){.g-bottom-2{grid-template-columns:1fr}.g-bottom-2>*{grid-column:span 1}}
@media(max-width:1150px){.g4{grid-template-columns:repeat(2,1fr)}.g-main{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;min-width:0;
}
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.card-title{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.card-title svg{width:14px;height:14px;color:var(--muted)}
.selector{
  margin-left:auto;background:var(--surface-2);border:1px solid var(--border);
  color:var(--muted);font-size:10.5px;padding:4px 9px;border-radius:14px;
  display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;
}
.selector svg{width:9px;height:9px}

/* KPI card */
.kpi-value{font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.kpi-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.delta{font-size:11px;font-weight:600;display:flex;align-items:center;gap:3px}
.delta.up{color:var(--green)}
.delta.down{color:var(--red)}
.kpi-sub{font-size:10.5px;color:var(--muted);margin-top:5px}
.kpi-sub b{color:var(--accent);font-weight:600}
.spark{margin-top:12px;height:38px;width:100%}
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  padding:3px 9px;border-radius:20px;
}
.pill.ok{background:rgba(123,224,79,.13);color:var(--green)}
.pill.warn{background:rgba(242,201,76,.13);color:var(--yellow)}
.pill.bad{background:rgba(255,92,92,.13);color:var(--red)}
.pill-row{display:flex;align-items:center;gap:8px;margin-top:11px}

/* progress bar */
.bar{height:5px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}

/* sub-tiles inside chart card */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.tile{background:var(--surface-2);border-radius:var(--radius-sm);padding:11px}
.tile-label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:6px}
.tile-label svg{width:11px;height:11px}
.tile-value{font-size:15px;font-weight:700;letter-spacing:-.3px}
.tile-delta{font-size:9.5px;margin-top:3px}

/* table */
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:10px;color:var(--muted-2);font-weight:600;
  padding:0 0 9px;text-transform:none;
}
td{padding:9px 0;font-size:11.5px;border-top:1px solid var(--border)}
tbody tr:hover{background:var(--surface-2)}
tbody tr.hl{background:var(--accent-dim)}
tbody tr.hl td:first-child{border-left:2px solid var(--accent);padding-left:8px}
.status{display:flex;align-items:center;gap:6px;font-size:11px}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot.g{background:var(--green)}
.dot.y{background:var(--yellow)}
.dot.r{background:var(--red)}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--muted)}
tfoot td{border-top:2px solid var(--border);font-weight:700;padding:10px 0}
tfoot tr:hover{background:transparent}

/* rank list */
.rank{
  width:17px;height:17px;border-radius:5px;background:var(--surface-3);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:var(--muted);
}
tr.hl .rank{background:var(--accent);color:#0A0A0A}
.minibar{height:5px;border-radius:3px;background:var(--surface-3);width:100%;min-width:52px;overflow:hidden}
.minibar i{display:block;height:100%;border-radius:3px;background:var(--accent)}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.donut{position:relative;width:132px;height:132px;flex-shrink:0}
.donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.donut-pct{font-size:22px;font-weight:700;letter-spacing:-.5px}
.donut-label{font-size:9.5px;color:var(--muted);margin-top:1px}
.legend{display:flex;flex-direction:column;gap:9px;font-size:11px;flex:1;min-width:110px}
.legend-row{display:flex;align-items:center;gap:8px}
.legend-key{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.legend-val{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}

/* alerts */
.alert-item{
  display:flex;gap:10px;padding:10px;border-radius:var(--radius-sm);
  background:var(--surface-2);margin-bottom:8px;align-items:flex-start;
}
.alert-ico{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.alert-ico svg{width:13px;height:13px}
.alert-ico.r{background:rgba(255,92,92,.14);color:var(--red)}
.alert-ico.y{background:rgba(242,201,76,.14);color:var(--yellow)}
.alert-txt{font-size:11.5px;font-weight:500;line-height:1.4}
.alert-meta{font-size:10px;color:var(--muted);margin-top:3px}

.foot-row{
  display:flex;gap:16px;padding-top:12px;margin-top:12px;
  border-top:1px solid var(--border);font-size:10.5px;color:var(--muted);flex-wrap:wrap;
}
.foot-row b{color:var(--text);font-weight:600}
.legend-inline{display:flex;gap:14px;font-size:10.5px;color:var(--muted);margin-top:10px}
.legend-inline span{display:flex;align-items:center;gap:6px}
/* ---------- Forms, tables, upload (from prototypes/assets/forms.css) ---------- */
/* ---------- Filter bar ---------- */
.filterbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;
}
.filter-label{font-size:10px;color:var(--muted-2);font-weight:600;margin-right:2px}
.select{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:12px;padding:7px 11px;border-radius:9px;font-family:inherit;
  display:flex;align-items:center;gap:8px;cursor:pointer;
}
.select svg{width:10px;height:10px;color:var(--muted);flex-shrink:0}
.select.active{border-color:var(--accent);color:var(--accent)}
.chip{
  background:var(--accent-dim);color:var(--accent);border:1px solid rgba(198,247,63,.3);
  font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:16px;
  display:inline-flex;align-items:center;gap:6px;
}
.chip svg{width:9px;height:9px;cursor:pointer}
.btn-ghost{
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  font-size:11.5px;padding:7px 13px;border-radius:9px;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:7px;
}
.btn-ghost:hover{color:var(--text);border-color:#3A3A3A}
.btn-ghost svg{width:13px;height:13px}
.btn-warn{
  background:rgba(242,201,76,.13);border:1px solid rgba(242,201,76,.35);color:var(--yellow);
  font-size:11.5px;padding:7px 13px;border-radius:9px;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:7px;
}
.btn-warn:hover{background:rgba(242,201,76,.22)}
.btn-warn svg{width:13px;height:13px}

/* ---------- Form ---------- */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:1000px){.form-grid{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field.span2{grid-column:span 2}
.field label{font-size:11px;color:var(--muted);font-weight:500}
.field label .req{color:var(--accent)}
select.input{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
  padding-right:34px;
}
.input{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:13px;padding:9px 12px;border-radius:9px;font-family:inherit;
  outline:none;width:100%;transition:border-color .15s;
}
.input:focus{border-color:var(--accent)}
.input::placeholder{color:var(--muted-2)}
.input.readonly{background:var(--surface-3);color:var(--muted);cursor:not-allowed}
.input.err{border-color:var(--red)}
.input-group{display:flex;align-items:center;gap:0}
.input-group .input{border-radius:9px 0 0 9px}
.suffix{
  background:var(--surface-3);border:1px solid var(--border);border-left:none;
  border-radius:0 9px 9px 0;padding:9px 11px;font-size:11.5px;color:var(--muted);
  white-space:nowrap;
}
.hint{font-size:10px;color:var(--muted-2)}
.hint.err{color:var(--red)}
.hint.ok{color:var(--green)}
.hint.warn{color:var(--yellow)}

/* ---------- Editable table ---------- */
.tbl-form td{padding:7px 8px;vertical-align:middle}
.tbl-form th{padding:0 8px 9px}
.tbl-form td:first-child,.tbl-form th:first-child{padding-left:0}
.tbl-form .input{padding:7px 10px;font-size:12.5px}
.tbl-form tbody tr:hover{background:transparent}
.grp-row td{
  background:var(--surface-2);font-size:10.5px;font-weight:600;
  color:var(--muted);padding:7px 8px;border-top:1px solid var(--border);
}
.calc{
  font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;
}
.calc.pos{color:var(--accent)}
.calc.neg{color:var(--red)}

/* ---------- Upload ---------- */
.drop{
  border:1.5px dashed #333;border-radius:var(--radius-sm);
  padding:26px 18px;text-align:center;background:var(--surface-2);
  transition:border-color .15s;
}
.drop:hover{border-color:var(--accent)}
.drop-ico{
  width:38px;height:38px;border-radius:11px;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;margin:0 auto 11px;
  color:var(--accent);
}
.drop-ico svg{width:18px;height:18px}
.drop-title{font-size:12.5px;font-weight:600;margin-bottom:4px}
.drop-sub{font-size:10.5px;color:var(--muted)}
.file-row{
  display:flex;align-items:center;gap:11px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;
}
.file-ico{
  width:30px;height:30px;border-radius:8px;background:rgba(198,247,63,.13);
  color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.file-ico svg{width:15px;height:15px}
.file-name{font-size:12px;font-weight:600}
.file-meta{font-size:10px;color:var(--muted);margin-top:2px}

/* validation summary */
.valid-box{
  border-radius:var(--radius-sm);padding:12px 14px;font-size:11.5px;
  display:flex;gap:10px;align-items:flex-start;
}
.valid-box.ok{background:rgba(123,224,79,.09);border:1px solid rgba(123,224,79,.25)}
.valid-box.err{background:rgba(255,92,92,.08);border:1px solid rgba(255,92,92,.25)}
.valid-box.warn{background:rgba(242,201,76,.1);border:1px solid rgba(242,201,76,.3)}
.valid-box svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.valid-title{font-weight:600;margin-bottom:3px}
.err-list{margin:7px 0 0;padding-left:16px;color:var(--muted);line-height:1.7}
.err-list b{color:var(--red);font-weight:600}
.err-list code{
  background:var(--surface-3);padding:1px 5px;border-radius:4px;
  font-size:10.5px;color:var(--text);
}

/* stepper */
.steps{display:flex;align-items:center;gap:0;margin-bottom:18px;flex-wrap:wrap}
.step{
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted-2);
  background:none;border:none;padding:4px 2px;font-family:inherit;cursor:pointer;
  border-radius:8px;
}
.step:hover{color:var(--text)}
.step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.step-num{
  width:22px;height:22px;border-radius:50%;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;flex-shrink:0;
}
.step.done{color:var(--muted)}
.step.done .step-num{background:rgba(123,224,79,.16);color:var(--green)}
.step.now{color:var(--text);font-weight:600}
.step.now .step-num{background:var(--accent);color:#0A0A0A}
.step-line{width:34px;height:1px;background:var(--border);margin:0 11px}

.actions{
  display:flex;gap:9px;justify-content:flex-end;padding-top:15px;
  margin-top:16px;border-top:1px solid var(--border);flex-wrap:wrap;
}
.section-head{
  font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  margin:20px 0 11px;padding-bottom:8px;border-bottom:1px solid var(--border);
}
.section-head:first-child{margin-top:0}
.banner{
  display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-radius:var(--radius-sm);font-size:11.5px;
  background:rgba(242,201,76,.09);border:1px solid rgba(242,201,76,.25);
}
.banner svg{width:15px;height:15px;color:var(--yellow);flex-shrink:0}
.banner b{color:var(--yellow)}

/* ---------- Global loading indicator ---------- */
/* Indeterminate sweep bar, shown via wire:loading.delay so it only
   appears once a request has actually taken a moment (avoids flashing
   on fast round-trips) — addresses clicks otherwise feeling "frozen"
   with zero feedback while Livewire processes the request. */
.loading-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  overflow:hidden;opacity:0;pointer-events:none;transition:opacity .15s;
}
.loading-bar.active{opacity:1}
.loading-bar.active::before{
  content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:loading-sweep 1s ease-in-out infinite;
}
@keyframes loading-sweep{
  0%{left:-30%}
  100%{left:100%}
}

/* Per-button instant feedback, 20 Aug 2026 — client: "when button click
   it need to be disabled and load state." Added by public/js/app.js the
   instant any [wire:click] element is clicked, before the request even
   starts; Livewire's own DOM morph on the response clears it again
   automatically since the server-rendered HTML never has this class. */
.is-wire-loading{position:relative;opacity:.6;pointer-events:none;cursor:wait}
.is-wire-loading::after{
  content:'';position:absolute;top:50%;left:50%;width:13px;height:13px;
  margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  padding:20px;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.modal-title{font-size:14px;font-weight:600}
.modal-close{
  background:none;border:none;color:var(--muted);cursor:pointer;
  width:28px;height:28px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{color:var(--text);background:var(--surface-2)}
.modal-close svg{width:16px;height:16px}
.modal .form-grid{grid-template-columns:1fr 1fr}

/* ---------- Row actions (edit/delete icon buttons) ---------- */
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-action{
  width:28px;height:28px;border-radius:var(--radius-sm);background:var(--surface-2);
  border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;flex-shrink:0;
}
.icon-action svg{width:13px;height:13px}
.icon-action:hover{color:var(--text);border-color:#3A3A3A}
.icon-action.danger:hover{color:var(--red);border-color:rgba(255,92,92,.4)}

/* ---------- Table search/filter bar ---------- */
.table-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.search-input{position:relative;flex:1;min-width:180px;max-width:280px}
.search-input svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;color:var(--muted);pointer-events:none;
}
.search-input input{padding-left:32px}

/* ---------- Roster grid ---------- */
.roster-table th, .roster-table td{text-align:center}
.roster-table th:first-child, .roster-table td:first-child{text-align:left}
.roster-table.compact th, .roster-table.compact td{width:136px;padding-left:12px;padding-right:12px}
.roster-table.compact th:first-child, .roster-table.compact td:first-child{width:auto;padding-left:0}
.roster-table.compact td{padding-top:6px;padding-bottom:6px}
.roster-table.compact th + th, .roster-table.compact td + td{border-left:1px solid var(--border)}
.roster-table.compact .pill{min-width:88px;justify-content:center}
.shift-toggle{display:flex;gap:3px;justify-content:center}
.shift-toggle button{
  width:20px;height:20px;border-radius:5px;font-size:9px;font-weight:700;
  border:1px solid var(--border);background:var(--surface-3);color:var(--muted-2);
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
}
.shift-toggle button.active{background:var(--accent);color:#0A0A0A;border-color:var(--accent)}
.shift-toggle.double button.active{background:var(--yellow);border-color:var(--yellow)}

/* ---------- Responsive — mobile & tablet, 20 Aug 2026 ----------
   Client request: "check the responsiveness of the screens, all the
   tables need to be cards and pagination design, and forms/the wizard
   form all need to be mobile and tablet responsive." Three breakpoints:
   ~1024px (tablet, tightens grids/padding), ~768px (small tablet /
   large phone, forms drop to one column), ~640px (phone, tables become
   stacked cards). Table → card conversion is fully generic — it needs
   no per-screen markup changes. `public/js/app.js` copies each table's
   `<thead>` header text onto its `<td>`s as `data-label` on load and on
   every Livewire re-render, and the CSS below reads that attribute to
   print a label in front of each value once the table collapses to
   block layout. `.roster-table` (a real day×shift matrix, not a list of
   records) is excluded on purpose — turning a matrix into stacked cards
   would make it unreadable, so it keeps scrolling horizontally inside
   its existing `overflow-x:auto` wrapper instead. */

/* Client, 14 Oct 2026: on a laptop-width screen the Accountant's menu ran
   68 px past the window and clipped the avatar - a menu with dropdowns
   cannot shrink (it would clip them), and the hamburger only took over on
   phones. Below 1200 px the menu goes compact first: the logo text and the
   name beside the avatar go (the avatar stays, with its own menu), and the
   items sit closer. The hamburger takes over below that (see further down). */
@media(max-width:1199px){
  .topnav{gap:12px}
  .logo-text{display:none}
  .profile-name,.profile-role{display:none}
  .nav-item{padding:8px 9px;gap:6px}
}

@media(max-width:1024px){
  .shell{padding:12px;gap:10px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .modal .form-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .g4{grid-template-columns:1fr}
  .g-main{grid-template-columns:1fr}
  .g-bottom{grid-template-columns:1fr}
  .g-bottom>:last-child{grid-column:span 1}
  .form-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .topbar{flex-wrap:wrap}
  .topbar-right{margin-left:0;flex-wrap:wrap}
  .nav-dropdown .dropdown-panel{right:0;left:auto;max-width:calc(100vw - 32px)}
  .donut-wrap{flex-direction:column;align-items:flex-start}

}

/* The hamburger now takes over below 980 px, not 768 (client, 14 Oct 2026):
   the compact menu above still needs about 934 px for the Accountant. */
@media(max-width:979px){
  /* Client feedback, 20 Aug 2026: "the menu is overflowing the screen,"
     then "no hamburger menu" once the first fix just wrapped the nav
     onto a second visible row — still ate vertical space and looked
     unfinished on a phone-sized screen. Real fix: the nav collapses
     behind a hamburger button (topnav.blade.php's `.nav-hamburger`,
     Alpine-toggled) below this breakpoint, dropping open as a full-width
     vertical list under the topnav instead of a horizontal strip. Also a
     hard `overflow-x:hidden` backstop on `.topnav` so nothing inside it
     — nav open or closed — can ever widen the page past the viewport. */
  .topnav{flex-wrap:wrap;row-gap:0;overflow-x:hidden;position:relative}
  .nav-hamburger{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:var(--radius-sm);
    background:none;border:none;color:var(--text);cursor:pointer;flex-shrink:0;
  }
  .nav-hamburger:hover{background:var(--surface-2)}
  .nav-hamburger svg{width:18px;height:18px}
  .nav{
    display:none;order:4;flex-basis:100%;width:100%;max-width:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
    overflow-x:visible;
  }
  .nav.nav-open{display:flex}
  .nav .nav-item{width:100%}
  .nav .nav-dropdown{width:100%}
  .nav .nav-dropdown .dropdown-panel{position:static;box-shadow:none;margin:2px 0 2px 14px;width:calc(100% - 14px)}
}

@media(min-width:980px){
  .nav-hamburger{display:none}
}

@media(max-width:640px){
  .logo-text{display:none}
  .profile-name,.profile-role{display:none}
  .page-title{white-space:normal}
  .table-toolbar{flex-direction:column;align-items:stretch}
  .search-input{max-width:none}
  .actions{flex-direction:column-reverse;align-items:stretch}
  .actions .btn-accent, .actions .btn-ghost{width:100%;justify-content:center}
  .steps{gap:6px}
  .step-line{width:16px;margin:0 4px}

  table:not(.roster-table),
  table:not(.roster-table) thead,
  table:not(.roster-table) tbody,
  table:not(.roster-table) tr,
  table:not(.roster-table) th,
  table:not(.roster-table) td{display:block}
  table:not(.roster-table) thead{position:absolute;left:-9999px;top:-9999px}
  table:not(.roster-table){border:none}
  table:not(.roster-table) tbody tr{
    background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
    margin-bottom:10px;padding:10px 12px;
  }
  table:not(.roster-table) tbody tr.hl{border-left:2px solid var(--accent);padding-left:10px}
  table:not(.roster-table) tbody tr.hl td:first-child{border-left:none;padding-left:0}

  /* Each cell fills the card's full width, label stacked above the
     value — not squeezed onto one line — so long content (notes,
     pills, action buttons) has room instead of overflowing. */
  table:not(.roster-table) td{
    display:block;width:100%;padding:6px 0;border:none;text-align:left;min-height:16px;
  }
  table:not(.roster-table) td[data-label]:not([data-label=""])::before{
    content:attr(data-label);display:block;color:var(--muted);font-size:10px;
    font-weight:600;margin-bottom:3px;
  }
  table:not(.roster-table) td:empty{display:none}
  table:not(.roster-table) .row-actions{justify-content:flex-start;width:100%}

  /* Show more/less — public/js/app.js marks every column after the
     first 3 (and before the last) as .mobile-collapsed and injects the
     toggle button; only its display is CSS's job. */
  table:not(.roster-table) td.mobile-collapsed{display:none}
  table:not(.roster-table) tr.row-expanded td.mobile-collapsed{display:block}
  table:not(.roster-table) .mobile-row-toggle{
    display:block;width:100%;margin:4px 0 2px;padding:6px 0;
    background:none;border:none;border-top:1px dashed var(--border);
    color:var(--accent);font-size:11px;font-weight:600;font-family:inherit;
    cursor:pointer;text-align:left;
  }
}

@media(min-width:641px){
  .mobile-row-toggle{display:none}
}

/* Contextual help icon in the topnav, next to the profile block. */
.nav-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--muted);
  background:var(--surface-2);
  transition:color .12s,border-color .12s;
}
.nav-help:hover{color:var(--accent);border-color:var(--accent)}
.nav-help svg{width:16px;height:16px}

/* ---------- Help guide (/help) ---------- */
/* The screenshot is a plain <img>; the numbered callouts are absolutely
   positioned over it from percentages measured by
   scripts/capture-help.mjs. Percentages, not pixels, is what lets the
   image be displayed at any size - shrinking the figure below keeps
   every dot on its control. */

.help-crumb{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:2px}
.help-crumb a{color:var(--muted);text-decoration:none}
.help-crumb a:hover{color:var(--accent)}

.help-when{
  background:var(--accent-dim);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  font-size:13.5px;
  line-height:1.55;
  margin-bottom:16px;
}

.help-concepts{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px;line-height:1.55}
.help-concepts dt{font-weight:650;white-space:nowrap;color:var(--accent)}
.help-concepts dd{color:var(--text);opacity:.82}
@media (max-width:640px){
  .help-concepts{grid-template-columns:1fr;gap:2px 0}
  .help-concepts dd{margin-bottom:10px}
}

.help-shot{margin-bottom:16px}

/* Deliberately small. It's a map of where things are, not a document to
   read - "View full size" below it covers the rest. */
.help-figure{
  position:relative;
  display:block;
  margin:12px auto 10px;
  max-width:720px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--surface-2);
  line-height:0;
}
.help-img{width:100%;height:auto;display:block}
.help-img-light{display:none}
html[data-theme="light"] .help-img-dark{display:none}
html[data-theme="light"] .help-img-light{display:block}

.help-fullsize{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;color:var(--muted);text-decoration:none;
  margin-bottom:18px;
}
.help-fullsize:hover{color:var(--accent)}
.help-fullsize svg{width:12px;height:12px}

.help-ring{
  position:absolute;
  border:2px solid var(--accent);
  border-radius:5px;
  box-shadow:0 0 0 2px rgba(0,0,0,.3);
  pointer-events:none;
  opacity:.7;
}
.help-dot{
  position:absolute;
  transform:translate(-50%,-50%);
  min-width:19px;
  height:19px;
  padding:0 4px;
  border-radius:10px;
  background:var(--accent);
  color:#0a0a0a;
  font-size:11px;
  font-weight:700;
  line-height:19px;
  text-align:center;
  text-decoration:none;
  box-shadow:0 2px 5px rgba(0,0,0,.5);
  border:2px solid var(--bg);
}
.help-dot:hover{outline:3px solid var(--accent-dim)}

/* The action list is the part people actually read, so it gets real body
   copy: full-contrast text, a wider measure, and one clear label per
   line rather than a wall of same-weight grey. */
.help-actions{list-style:none;display:flex;flex-direction:column;gap:0;margin:0}
.help-actions>li{
  display:flex;
  gap:13px;
  padding:15px 0;
  border-top:1px solid var(--border);
  scroll-margin-top:80px;
}
.help-actions>li:first-child{border-top:none;padding-top:4px}
.help-actions>li:target{background:var(--accent-dim);border-radius:var(--radius-sm);padding-left:10px;padding-right:10px}
.help-num{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:12px;
  background:var(--accent);
  color:#0a0a0a;
  font-size:12.5px;font-weight:700;
  line-height:24px;text-align:center;
}
.help-action-body{min-width:0;max-width:78ch}
.help-action-label{
  font-weight:650;
  font-size:15px;
  line-height:1.35;
  color:var(--text);
  margin-bottom:6px;
}
.help-line{
  font-size:13.5px;
  line-height:1.6;
  color:var(--text);
  opacity:.86;
  margin-top:4px;
  display:flex;
  gap:7px;
}
.help-line b{
  color:var(--muted);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  flex:0 0 104px;
  padding-top:3px;
}
.help-rules{margin:9px 0 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--text);opacity:.78}
.help-rules li{margin-top:3px}
.help-note{
  margin-top:9px;
  padding:9px 12px;
  border-left:2px solid var(--accent);
  background:var(--surface-2);
  border-radius:0 7px 7px 0;
  font-size:13px;
  line-height:1.6;
  color:var(--text);
  opacity:.85;
}

@media (max-width:640px){
  .help-line{flex-direction:column;gap:1px}
  .help-line b{flex:none;padding-top:0}
}

/* Prev/next live in the page header next to "Open this screen". */
.help-pager{display:flex;align-items:center;gap:6px}
.help-pager-btn{
  text-decoration:none;
  max-width:190px;
  gap:5px;
}
.help-pager-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-pager-btn svg{width:13px;height:13px;flex:0 0 auto;transform:rotate(90deg)}
.help-pager-btn.next svg{transform:rotate(-90deg)}
@media (max-width:900px){
  .help-pager-btn span{display:none}
  .help-pager-btn{max-width:none}
}

.help-card{text-decoration:none;color:inherit;display:block;transition:border-color .12s}
.help-card:hover{border-color:var(--accent)}
.help-card.mine{border-color:var(--accent)}
.help-card .card-title{display:flex;align-items:center;gap:7px}
.help-card .card-title svg{width:15px;height:15px}
.help-thumb{
  margin:-2px 0 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  height:120px;
  background:var(--surface-2);
}
.help-thumb img{width:100%;display:block}

.help-navmap{display:flex;flex-wrap:wrap;gap:7px}
.help-navchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  font-size:12px;
}
.help-navchip svg{width:13px;height:13px;color:var(--muted)}
.help-navchip.sub{color:var(--muted)}

.help-search{position:relative;display:flex;align-items:center}
.help-search svg{position:absolute;left:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.help-search .input{padding-left:30px;width:260px}

.help-results{list-style:none;display:flex;flex-direction:column;gap:12px}
.help-results a{color:var(--text);font-weight:650;text-decoration:none;font-size:14px}
.help-results a:hover{color:var(--accent)}
.help-results .mut{font-size:11.5px;margin-left:8px}

@media (max-width:640px){
  .help-search .input{width:100%}
  .help-dot{min-width:16px;height:16px;line-height:16px;font-size:9.5px;border-width:1.5px}
}

/* An amount on a list that opens how it was made up. */
.amount-link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.amount-link:hover{color:var(--accent)}

.skel-card{min-height:140px}
.skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--border) 25%,rgba(128,128,128,.28) 50%,var(--border) 75%);background-size:200% 100%;animation:skel-shimmer 1.3s ease-in-out infinite}
.skel-title{height:11px;width:42%;margin-bottom:16px}
.skel-big{height:26px;width:60%;margin-bottom:12px}
.skel-line{height:9px;width:90%;margin-bottom:9px}
.skel-line.short{width:55%}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}