/* AMC Workforce: shared admin shell + management pages (extends app.css tokens) */

/* ---------- navigation ---------- */
.appnav { display: flex; align-items: center; gap: 12px; padding: 8px var(--gutter); background: var(--dark); color: #fff;
          overflow-x: auto; scrollbar-width: none; }
.appnav::-webkit-scrollbar { display: none; }
.appnav-brand { font: 700 17px var(--display); color: #fff; text-decoration: none; white-space: nowrap; }
.appnav-brand span { color: #fdba74; }
.appnav-tabs { display: flex; gap: 4px; flex: 1; }
.appnav-tab { color: #cbd5e1; text-decoration: none; font-weight: 600; font-size: 13.5px; padding: 8px 12px;
              border-radius: 8px; white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center; }
.appnav-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.appnav-tab.is-active { background: #fff; color: var(--dark); }
.appnav-user { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.appnav-user .muted { color: #94a3b8; }
.appnav .btn-ghost { color: #fff; border-color: rgba(255,255,255,.25); }
.btn-sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
@media (max-width: 720px) { .appnav-user .muted { display: none; } }

/* ---------- page layout ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: 18px var(--gutter) 96px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.page-head h1 { font: 700 22px/1.2 var(--display); margin: 0; flex: 1 1 auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.panel h2 { font: 700 16px var(--display); margin: 0 0 10px; }
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; flex: 1; }
.split { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 14px; align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.stat .label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font: 700 22px var(--display); font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat.is-bad .value { color: var(--bad); } .stat.is-warn .value { color: var(--warn); }
.empty { padding: 18px; text-align: center; color: var(--muted); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
table.data th { background: #faf9f6; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
                position: sticky; top: 0; z-index: 1; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: #faf9f6; }
table.data tr.clickable { cursor: pointer; }
table.data tfoot td { font-weight: 700; background: #faf9f6; }
.grid-table th.day { text-align: center; min-width: 54px; }
.grid-table td.cell { text-align: center; font-variant-numeric: tabular-nums; min-width: 54px; }
.grid-table .weekend { background: #faf7f0; }
.grid-table td.cell .r { display: block; font-size: 10.5px; color: var(--accent); font-weight: 700; }
.grid-table td.cell .lv { display: block; font-size: 10.5px; color: var(--warn); font-weight: 700; text-transform: uppercase; }
.grid-table td.sticky, .grid-table th.sticky { position: sticky; left: 0; background: var(--surface); z-index: 2; }
.grid-table th.sticky { background: #faf9f6; z-index: 3; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px; }
.form-grid .full { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.fld input, .fld select, .fld textarea { min-height: 40px; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 6px 10px; font: inherit; font-weight: 400; background: #fff; }
.fld.check { flex-direction: row; align-items: center; gap: 8px; }
.fld.check input { min-height: auto; width: 18px; height: 18px; }
.hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.status-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.st-open { background: var(--info-soft); color: var(--info); }
.st-locked { background: var(--warn-soft); color: var(--warn); }
.st-exported, .st-active, .lv-ok { background: var(--ok-soft); color: var(--ok); }
.st-onboarding, .lv-near, .lv-due_30 { background: var(--warn-soft); color: var(--warn); }
.st-suspended, .st-resigned { background: #eee; color: #555; }
.lv-expired, .lv-over, .lv-due_14 { background: var(--bad-soft); color: var(--bad); }

/* ---------- roster matrix ---------- */
.roster td select { min-height: 34px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12.5px;
                    max-width: 130px; background: #fff; }
.roster td.unset select { color: var(--muted); }

/* ---------- generic dialog ---------- */
.dialog-backdrop { position: fixed; inset: 0; background: rgba(15,20,25,.45); z-index: 70; display: flex;
                   align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow-y: auto; }
.dialog { background: var(--surface); border-radius: 16px; width: 100%; max-width: 640px; padding: 18px; }
.dialog h2 { font: 700 18px var(--display); margin: 0 0 12px; }
.dialog .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.dialog .errors { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 10px; font-size: 13px; margin-bottom: 10px; }
.dialog ul { margin: 6px 0; padding-left: 18px; }
.subtabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.pill-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
            background: var(--info-soft); color: var(--info); margin-right: 4px; }
[data-role="supervisor"] .needs-manager, [data-role="admin"] .needs-owner, [data-role="supervisor"] .needs-owner { display: none !important; }

/* weekday hours & budget matrix */
input.hours-in { width: 64px; text-align: right; }
tr.budget-row td { background: var(--warn-soft); }
td.neg { color: var(--bad); font-weight: 600; }
.panel.notice { background: var(--info-soft); color: var(--info); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
label.fld.check input.date-in { width: auto; min-width: 150px; height: 34px; appearance: auto; -webkit-appearance: auto; border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 8px; }

/* Sites & Rosters sidebar: names wrap, the Sections count keeps its column, never a sideways scrollbar */
.site-list-wrap { border: 0; overflow-x: hidden; }
table.site-list { width: 100%; table-layout: fixed; }
table.site-list th:first-child, table.site-list td:first-child { white-space: normal; overflow-wrap: anywhere; }
table.site-list th.num, table.site-list td.num { width: 92px; padding-left: 4px; }

/* Weekday roster + weekday hours: fixed grids that share the width evenly, so all seven days
   and the "Mon → Fri" button fit without a sideways scrollbar on desktop screens */
table.roster-matrix, table.hours-matrix { width: 100%; table-layout: fixed; }
table.roster-matrix th, table.roster-matrix td,
table.hours-matrix th, table.hours-matrix td { padding: 6px 4px; }
table.roster-matrix th:first-child, table.roster-matrix td:first-child,
table.hours-matrix th:first-child, table.hours-matrix td:first-child { width: 150px; padding-left: 10px; }
table.roster-matrix.has-actions th:last-child, table.roster-matrix.has-actions td:last-child { width: 88px; padding-right: 10px; }
.roster-matrix .sec-cell, .hours-matrix td:first-child { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.roster-matrix .sec-cell .small { display: block; }
.roster-matrix td select { width: 100%; max-width: none; min-width: 0; padding: 0 2px; font-size: 12px;
                           text-overflow: ellipsis; }
.roster-matrix .act-cell .btn { width: 100%; padding: 4px 6px; white-space: nowrap; }
.hours-matrix input.hours-in { width: 100%; max-width: 72px; }

/* Cleaners & Rates > Registrations */
.notice-plain { display: flex; flex-direction: column; gap: 4px; background: var(--info-soft); border-color: transparent; }
table.reg-table td { white-space: normal; vertical-align: middle; }
table.reg-table select { width: 100%; max-width: 380px; min-height: 34px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; }
table.reg-table .reg-actions { white-space: nowrap; text-align: right; }
table.reg-table .reg-actions .btn + .btn { margin-left: 6px; }

#amc-toast { display: flex; gap: 14px; align-items: center; }
#amc-toast .toast-undo { background: none; border: 0; color: #fdba74; font-weight: 700; min-height: 32px; padding: 0 4px; cursor: pointer; }
.plain-list { margin: 4px 0 8px; padding-left: 18px; line-height: 1.5; }
.plain-list li + li { margin-top: 4px; }

/* Fortnight & Payroll: payment readiness checklist (012) */
.rd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.rd-list li { display: flex; gap: 8px; align-items: baseline; }
.rd-mark { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.rd-list .is-ok .rd-mark { background: var(--ok-soft); color: var(--ok); }
.rd-list .is-todo .rd-mark { background: var(--warn-soft); color: var(--warn); }
.warn-text { color: var(--warn); font-weight: 600; }
textarea.reason-in { width: 100%; font: inherit; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px; }

/* Settings page (012) */
.settings-intro { max-width: 900px; margin: -4px 0 14px; }
.set-list { display: grid; }
.set-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(240px, 1fr) 130px; gap: 8px 16px;
           align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.set-row:first-child { border-top: 0; }
.set-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-edit { display: flex; gap: 8px; align-items: center; min-width: 0; }
.set-in { flex: 1; min-width: 0; min-height: 36px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 10px; font: inherit; background: #fff; }
.set-in.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.set-row.is-ro .set-in { background: #faf9f6; color: var(--muted); }
.set-meta { display: flex; gap: 4px; align-items: center; justify-content: flex-end; white-space: nowrap; }
@media (max-width: 900px) { .set-row { grid-template-columns: 1fr; } .set-meta { justify-content: flex-start; } }
.rd-list .is-none .rd-mark { background: var(--border); color: var(--muted); }
.set-who { font-size: 11.5px; color: var(--soft); }
.set-who:empty { display: none; }