/* ==============================================================
   Attendance admin — the manager's page. Inherits every token and
   surface from styles.css (which loads first); this file only adds
   the shapes the kiosk doesn't have: the tab rail, the schedule
   grid, the stats table, the chips.
   ============================================================== */

/* --topbar-h is .topbar in styles.css measured once: 16px of padding either
   side of a 32px .topbar-link. Anything that pins to the page has to clear
   it, and nothing below should carry the number a second time. */
body.admin { padding-bottom:48px; --topbar-h:64px; }

.admin-shell {
  max-width:var(--shell-max, 1100px); margin:0 auto;
  padding:88px 16px 48px;
}

/* The two tabs that are tables take the screen the manager has; Today,
   Adjustments and Settings are forms and cards and read badly stretched.
   1800px is the schedule grid's own width, measured rather than reasoned
   about: 31 day columns at their 52px minimum plus the 150px name column is
   1762px, and the wrapper's border and this shell's own padding cost another
   34px. So the longest month fits without scrolling, and the widest breakdown
   (1163px) has room to spare on anything from 1280px up. */
body.admin[data-tab="stats"], body.admin[data-tab="schedule"] { --shell-max:1800px; }

/* ==================== TAB RAIL ====================
   The POS board's pill vocabulary — scrolls sideways on a phone rather
   than wrapping into a second row that pushes the content down. */
.tabrail {
  display:flex; gap:8px; margin-bottom:18px;
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.tabrail::-webkit-scrollbar { display:none; }
.tab {
  flex:none; min-height:44px; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--linen);
  font-family:var(--sans); font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:background var(--motion-state), border-color var(--motion-state);
}
.tab:hover { border-color:rgba(236,234,213,.45); background:rgba(236,234,213,.06); }
.tab[aria-selected="true"] { background:var(--ember); border-color:var(--ember); color:var(--linen-100); }

.panel { display:flex; flex-direction:column; gap:16px; }

.panel-head {
  display:flex; flex-wrap:wrap; gap:12px; align-items:end; justify-content:space-between;
}
.panel-actions { display:flex; gap:8px; flex-wrap:wrap; }
.panel-actions .btn-secondary { padding:0 16px; font-size:13px; }

.inline-field { display:grid; gap:6px; }
.inline-field span {
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(236,234,213,.9);
}
input[type="date"], input[type="month"], input[type="text"], input[type="password"], input[type="number"] {
  min-height:44px; font-size:15px; color:var(--linen-100);
  border:1px solid var(--line); border-radius:11px;
  background:rgba(13,20,9,.4); padding:10px 13px;
  color-scheme:dark; font-family:var(--sans);
}
input:focus { outline:none; border-color:var(--slate); box-shadow:0 0 0 3px rgba(103,128,150,.3); }

.muted { margin:0; font-size:13px; color:var(--linen-300); }
.plain { margin:0; font-size:14px; line-height:1.6; color:rgba(236,234,213,.92); }

/* ==================== TODAY ==================== */
.group { display:flex; flex-direction:column; gap:10px; }
.group + .group { margin-top:20px; }
.group-title {
  margin:0; display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--linen-100);
}
.group-title::after {
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.group-count { color:var(--fairway-300); letter-spacing:.08em; }

.person {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px;
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(37,60,29,.55), rgba(20,31,14,.55));
}
.person-name {
  font-family:var(--display); font-weight:800; font-size:15px; color:var(--linen-100);
  margin-right:auto;
}
.person-meta { font-size:13px; color:var(--linen-300); }

/* An adjustment card carries more text than a person card, so its lines
   stack instead of sitting on one row. */
.adjustment-main { display:flex; flex-direction:column; gap:3px; margin-right:auto; min-width:0; }
.adjustment-main .person-name { margin-right:0; }

.chip {
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px; padding:5px 10px; white-space:nowrap;
  border:1px solid var(--line); color:var(--linen);
}
.chip[data-tone="late"] { border-color:rgba(255,210,194,.45); background:rgba(224,133,99,.12); color:#ffd2c2; }
.chip[data-tone="over"] { border-color:rgba(169,194,209,.45); background:rgba(78,108,136,.22); color:var(--ember-300); }
.chip[data-tone="ok"] { border-color:rgba(139,160,124,.45); background:rgba(139,160,124,.14); color:var(--fairway-300); }

/* ==================== SCHEDULE GRID ====================
   Scrolls inside itself; the page never scrolls sideways. Sideways is all it
   does: overflow-x:auto alone makes a scroll container on BOTH axes, and a
   classic scrollbar's own height then becomes vertical overflow a wheel
   gesture can nudge, which slid the sticky header up over the first row. */
.grid-scroll {
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(37,60,29,.55), rgba(20,31,14,.55));
}

/* A scroll container only when it has to be. admin.js marks each wrapper
   after every render; where the table already fits, the wrapper gives the
   role back to the page, and a sticky header inside it sticks to the page
   too — the normal state on any desktop now that the shell is wide. A phone
   is exempt: the day cards lean on the wrapper being a scroll container. */
@media (min-width:561px) {
  .grid-scroll[data-fits="true"], .detail-scroll[data-fits="true"] { overflow:visible; }

  /* Where a header pins. To the wrapper's own top edge while the wrapper
     scrolls; to the page, below the fixed topbar, once neither it nor
     anything between it and the page is a scroll container any more. */
  .grid-scroll[data-fits="true"] table.grid thead th,
  .grid-scroll[data-fits="true"] .detail-scroll[data-fits="true"] table.detail-table thead th {
    top:var(--topbar-h);
  }
}
table.grid { border-collapse:collapse; width:100%; font-size:12px; }
table.grid th, table.grid td { border-bottom:1px solid var(--line); padding:0; }
table.grid thead th {
  position:sticky; top:0; z-index:2;
  background:var(--reserve-900);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--linen-300); padding:10px 6px; text-align:center; white-space:nowrap;
}
table.grid thead th.dow { font-weight:600; letter-spacing:0; color:var(--fairway-300); }
.name-col {
  position:sticky; left:0; z-index:1;
  background:var(--reserve-900);
  min-width:150px; text-align:left !important;
  padding:10px 12px !important;
}
.name-btn {
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font-family:var(--display); font-weight:800; font-size:13px; color:var(--linen-100);
}
.name-sub { display:block; font-family:var(--sans); font-weight:600; font-size:10.5px; color:var(--fairway-300); }

.cell {
  width:100%; min-width:52px; min-height:44px;
  border:0; background:transparent; cursor:pointer;
  font-family:var(--sans); font-size:11px; font-weight:700; color:var(--linen);
  padding:8px 4px;
  transition:background var(--motion-instant);
}
.cell:hover { background:rgba(236,234,213,.08); }
.cell[data-weekend="true"] { background:rgba(13,20,9,.35); }
.cell[data-weekend="true"]:hover { background:rgba(236,234,213,.08); }
.cell[data-type="Rest"], .cell[data-type="Leave"], .cell[data-type="Holiday"] { color:var(--fairway-300); }
.cell[data-type=""] { color:rgba(236,234,213,.35); }
.cell[data-source="manual"] { box-shadow:inset 0 -2px 0 var(--ember-400); }
.cell[data-today="true"] { outline:2px solid var(--slate); outline-offset:-2px; }

/* ==================== EDITORS / FORMS ==================== */
.editor {
  display:grid; gap:10px; padding:16px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(13,20,9,.5);
}
.editor-title { font-family:var(--display); font-weight:800; font-size:14px; color:var(--linen-100); }
.editor-row { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.editor select {
  min-height:44px; padding:10px 30px 10px 13px; font-size:15px; border-radius:11px;
  background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px;
}

/* The venue's shifts in the cell editor. The chips themselves are the
   kiosk's — styles.css loads first on this page, so OPEN / MID / CLOSE look
   exactly as they do at the kiosk. Only the label above them and the
   "already this shift" marker belong to the admin page. */
.editor-picker { display:grid; gap:6px; }
.editor-picker > span {
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(236,234,213,.9);
}
.shift-chip[data-current="true"] {
  opacity:.55; cursor:default; border-style:dashed;
}
.shift-chip[data-current="true"]:hover {
  border-color:var(--line); background:transparent;
}

/* The punch fix — the cell editor's family, one size down. It opens inside
   a table cell or a person card, so it takes the whole width of whichever,
   and its own error sits under it rather than in the page banner. */
.punch-fix { display:grid; gap:8px; flex-basis:100%; min-width:210px; }
.punch-fix .editor-row { gap:8px; }
.punch-fix input[type="text"] { min-height:38px; font-size:13.5px; padding:8px 11px; }
.punch-fix .inline-field { min-width:120px; }
.punch-fix-buttons { display:flex; gap:6px; align-items:end; }
.punch-fix-status:empty { display:none; }
.punch-fix-status { margin:0; font-size:12px; color:#ffd2c2; }
.punch-fix-slot { display:flex; gap:6px; flex-wrap:wrap; }
.punch-fix-slot[data-open="true"] { flex-basis:100%; }
table.detail-table td .mini { margin-left:8px; }

/* What the page understood, beside a clock box a manager types into. */
.settings-grid .clock-echo, .inline-field .clock-echo {
  font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--fairway-300); font-variant-numeric:tabular-nums;
}

.settings-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.settings-grid label { display:grid; gap:6px; }
.settings-grid span {
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(236,234,213,.9);
}

/* ==================== STATS ====================
   A dashboard: headline numbers, then what needs deciding, then the
   people — rated, sortable, with a totals row. */

.quick-months { display:flex; gap:8px; align-items:end; }

/* ---- KPI strip ---- */
.kpi-strip {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.kpi {
  display:flex; flex-direction:column; gap:3px;
  padding:16px 18px; min-height:104px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(37,60,29,.55), rgba(20,31,14,.55));
}
.kpi-label {
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--linen-300);
}
.kpi-value {
  font-family:var(--display); font-weight:900; font-size:27px; line-height:1.1;
  color:var(--linen-050); font-variant-numeric:tabular-nums;
}
.kpi-unit { font-size:14px; font-weight:700; color:var(--linen-300); margin-left:3px; }
.kpi-sub { font-size:11.5px; color:var(--fairway-300); }
.kpi-delta {
  align-self:flex-start; margin-top:2px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  border-radius:999px; padding:3px 9px;
  border:1px solid var(--line); color:var(--linen-300);
}
.kpi-delta[data-tone="ok"] { border-color:rgba(139,160,124,.45); background:rgba(139,160,124,.14); color:var(--fairway-300); }
.kpi-delta[data-tone="late"] { border-color:rgba(255,210,194,.45); background:rgba(224,133,99,.12); color:#ffd2c2; }

/* ---- needs attention ---- */
.attention {
  display:grid; gap:12px; padding:18px;
  border:1px solid rgba(169,194,209,.4); border-radius:16px;
  background:rgba(78,108,136,.14);
}
.attention-title {
  margin:0; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember-300);
}
.attention-list { display:flex; flex-wrap:wrap; gap:8px; }
.attention-item {
  min-height:40px; padding:0 14px;
  border:1px solid rgba(169,194,209,.45); border-radius:999px;
  background:transparent; color:var(--linen-100);
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  cursor:pointer;
  transition:background var(--motion-state);
}
.attention-item:hover { background:rgba(169,194,209,.16); }

/* ---- the table ---- */
table.stats {
  border-collapse:collapse; width:100%; font-size:13px; min-width:900px;
  font-variant-numeric:tabular-nums;
}
table.stats th, table.stats td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; }
table.stats th:first-child, table.stats td:first-child { text-align:left; }
/* Not pinned. Only one header can hold the top of the page, and the
   breakdown's is worth more: this one labels five rows that are almost
   always on screen together, and two stacked cost 95px of a laptop. */
table.stats thead th {
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--linen-300); white-space:nowrap;
  background:var(--reserve-900);
}
table.stats thead tr.group-row th {
  font-size:9.5px; color:var(--fairway-300); letter-spacing:.16em;
  padding-bottom:4px; border-bottom:0;
}

/* The name column holds still. It is already sticky and already opaque, from
   the .name-col the schedule grid shares with it — every cell but this one.
   The totals row overrides that background with its own tint, which is
   translucent, and a cell with rows sliding under it cannot be. */
table.stats tfoot td.name-col {
  background:linear-gradient(rgba(13,20,9,.35), rgba(13,20,9,.35)), var(--reserve-900);
}

.sort-btn {
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  display:inline-flex; align-items:center; gap:4px;
}
.sort-btn:hover { color:var(--linen-050); }
.sort-arrow { font-size:8px; color:var(--ember-300); }

table.stats tbody tr.stat-row { cursor:pointer; }
table.stats tbody tr.stat-row:hover { background:rgba(236,234,213,.05); }
.stat-name { display:block; font-family:var(--display); font-weight:800; color:var(--linen-100); }
.stat-sub { display:block; font-size:10.5px; color:var(--fairway-300); }
.nil { color:rgba(236,234,213,.28); }
.on-shift { color:rgba(236,234,213,.55); font-style:italic; }
[data-tone="late"] { color:#ffd2c2; font-weight:700; }
[data-tone="over"] { color:var(--ember-300); font-weight:700; }

/* Rate cell: the bar is decoration, the number is the value. */
.rate { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.rate-value { font-weight:700; color:var(--linen-100); }
.bar { width:56px; height:5px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; background:var(--fairway-300); }
.bar-fill[data-band="fair"] { background:var(--ember-400); }
.bar-fill[data-band="poor"] { background:#e08563; }

table.stats tfoot td {
  border-top:1px solid rgba(236,234,213,.3); border-bottom:0;
  font-family:var(--display); font-weight:800; color:var(--linen-100);
  background:rgba(13,20,9,.35);
}

/* ---- drill-down ---- */
table.stats tr.detail td { background:rgba(13,20,9,.45); padding:12px; }
.detail-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
table.detail-table {
  border-collapse:collapse; width:100%; min-width:820px; font-size:12px;
  font-variant-numeric:tabular-nums;
}
table.detail-table th, table.detail-table td {
  padding:7px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap;
}
table.detail-table th:first-child, table.detail-table td:first-child,
table.detail-table th:nth-child(2), table.detail-table td:nth-child(2) { text-align:left; }

/* Adjustment — the one free-text cell in the row, and the one that reads
   wrong right-aligned. Two lines of "Shift change to CLOSE (4:30 PM–1:30 AM)"
   cost nothing; 300px of nowrap cost the layout. */
table.detail-table th:nth-child(12), table.detail-table td:nth-child(12) {
  white-space:normal; max-width:280px; text-align:left;
}

/* Pinned, and opaque over the weekend and absent tints sliding beneath it. */
table.detail-table thead th {
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--linen-300);
  position:sticky; top:0; z-index:2; background:var(--reserve-900);
}
table.detail-table tr[data-weekend="true"] td { background:rgba(13,20,9,.3); }
table.detail-table tr[data-absent="true"] td { background:rgba(224,133,99,.1); }
.detail-actions { display:flex; gap:6px; align-items:center; justify-content:flex-end; }
.detail-actions input[type="number"] { min-height:34px; width:64px; padding:5px 7px; font-size:12px; }

.mini {
  min-height:38px; padding:0 12px; border-radius:10px;
  font-size:12px; font-weight:800; letter-spacing:.04em;
  border:1px solid var(--line); background:transparent; color:var(--linen);
  cursor:pointer; font-family:var(--sans);
}
.mini:hover { border-color:rgba(236,234,213,.45); background:rgba(236,234,213,.06); }
.mini[data-variant="primary"] { background:var(--ember); border-color:var(--ember); color:var(--linen-100); }
.mini[data-variant="primary"]:hover { background:var(--slate-600); border-color:var(--slate-600); }

/* ---- loading / empty ---- */
/* ---- drill-down as cards on a phone ----
   A horizontally-scrolling table nested inside another one is unusable
   with a thumb; below 560px each day becomes a card instead. */
.day-cards { display:grid; gap:8px; }

/* The cards live inside a cell of the wide stats table, so without this
   they inherit ITS width (~1070px) and need the very sideways scrolling
   they exist to avoid. Sticking them to the left edge and sizing them to
   the viewport keeps them in view however far the table is scrolled. */
@media (max-width:560px) {
  .day-cards {
    position:sticky; left:0;
    width:calc(100vw - 48px);
  }
}
.day-card {
  display:grid; gap:6px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(37,60,29,.5);
}
.day-card[data-weekend="true"] { background:rgba(13,20,9,.45); }
.day-card[data-absent="true"] { border-color:rgba(255,210,194,.4); background:rgba(224,133,99,.1); }
.day-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.day-card-date {
  font-family:var(--display); font-weight:800; font-size:14px; color:var(--linen-100);
  margin-right:auto;
}
.day-card-times { font-size:13px; color:var(--linen-300); font-variant-numeric:tabular-nums; }
.day-card-times[data-tone="shift"] { color:rgba(236,234,213,.55); font-style:italic; }
/* The card sets its own colour, so the global warm tone needs saying again here. */
.day-card-times[data-tone="late"] { color:#ffd2c2; }
.day-card-facts { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; }
.day-card-facts span { color:var(--linen-300); }
.day-card-facts b { color:var(--linen-100); font-weight:700; font-variant-numeric:tabular-nums; }
.day-card-note { font-size:11.5px; color:var(--fairway-300); }

@keyframes shimmer { 0%,100% { opacity:.45; } 50% { opacity:.8; } }
.kpi.skeleton, .row-skeleton {
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(37,60,29,.4), rgba(20,31,14,.4));
  animation:shimmer 1.4s ease-in-out infinite;
}
.kpi.skeleton { min-height:104px; }
.row-skeleton { height:46px; margin:8px; border-radius:10px; }
.empty-state { padding:32px 20px; text-align:center; }

@media (max-width:560px) {
  .admin-shell { padding:80px 12px 40px; }
  .panel-head { flex-direction:column; align-items:stretch; }
  .panel-filters .inline-field { flex:1 1 130px; }
  /* Actions stay compact and share one line — two full-width buttons
     before any content pushes the numbers off the screen. */
  .panel-actions { justify-content:flex-start; }
  .panel-actions .btn-secondary { flex:0 0 auto; padding:0 16px; font-size:12.5px; min-height:40px; }
  .kpi-strip { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .kpi { padding:13px 14px; min-height:92px; }
  .kpi-value { font-size:22px; }
  .attention-item { width:100%; text-align:left; }
}