/* ---------- sheet (History / Profile / prompts) ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,9,13,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--wk-sheet-bg);color:var(--wk-white);
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);border-bottom:0;
  border-radius:20px 20px 0 0;transform:translateY(101%);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
  /* full-width on phones (a bottom sheet inset from the edges reads as a
     mistake), capped to the app column from tablet up */
  max-width:460px;margin:0 auto;max-height:92dvh;overflow-y:auto;
  padding:10px 18px calc(env(safe-area-inset-bottom) + 18px);
  box-shadow:0 -20px 48px rgba(0,0,0,.4);
}
.sheet.on{transform:none}
.grab{width:38px;height:4px;border-radius:999px;background:rgba(255,255,255,.35);margin:6px auto 16px}
.sheet h2{font-family:var(--wk);text-transform:uppercase;letter-spacing:.02em;font-size:19px;margin:0 0 6px;font-weight:700;color:var(--wk-white)}
.sheet .hint{margin:0 0 18px;color:var(--wk-white-70);font-size:14px;line-height:1.45}
.req{color:#ff9d9d}

label.fld{display:block;margin-bottom:16px}
label.fld > span{
  display:block;font-family:var(--wk);text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;font-weight:500;color:var(--wk-white-70);margin-bottom:8px;
}
/* type=date is included so due-date fields never fall back to the browser
   default - a white box with a black calendar glyph sitting in a dark sheet.
   color-scheme:dark also darkens the native picker popup.
   Keep font-size at 16px: anything smaller makes iOS Safari zoom on focus. */
input[type=text],input[type=date],input[type=month],input[type=time],input[type=number],select,textarea{
  width:100%;font-family:var(--wk);font-size:16px;padding:16px 14px;
  border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(255,255,255,.08);color:var(--wk-white);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
input[type=date],input[type=month],input[type=time]{color-scheme:dark;min-height:56px}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer}
textarea{min-height:110px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
/* same reason as the date inputs above: the OPEN dropdown list is native
   browser chrome, and without a declared color-scheme it renders as a
   plain white panel dropped into a dark sheet. color-scheme darkens the
   popup itself; the option rule covers engines that paint options from
   CSS instead. The closed control is fully custom-styled already, so
   nothing else changes. */
select{color-scheme:dark}
select option{background-color:#161922;color:#fff}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.4)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wk-white);outline-offset:2px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.chip{
  border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:var(--wk-white);border-radius:999px;
  padding:12px 16px;font-family:var(--wk);font-weight:500;font-size:14px;
  letter-spacing:.02em;cursor:pointer;transition:transform .14s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.chip[aria-pressed=true]{background:var(--wk-white);color:#12131a;border-color:transparent}
.chip[disabled]{opacity:.35;cursor:not-allowed}

/* ---------- profile avatar ---------- */
.prof-avatar-row{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.prof-avatar{
  flex:none;width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wk-white);color:var(--wk-navy);background-size:cover;background-position:center;
  font-family:var(--wk);font-weight:700;font-size:26px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3);
}
.prof-avatar-acts{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.prof-avatar-btn{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:8px 14px;cursor:pointer;color:var(--wk-white);
  font-family:var(--wk);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  transition:background .15s ease;
}
.prof-avatar-btn svg{width:15px;height:15px;flex:none}
.prof-avatar-btn:hover{background:rgba(255,255,255,.18)}
.prof-avatar-btn[disabled]{opacity:.5;cursor:default}
.prof-avatar-btn.is-danger{color:#ff8a7e;border-color:rgba(255,92,92,.4)}
.prof-avatar-btn.is-danger:hover{background:rgba(255,92,92,.14)}

.stars{display:flex;gap:8px;margin-bottom:8px}
.star{
  flex:1;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);border-radius:14px;padding:14px 0;
  cursor:pointer;font-family:var(--wk);font-size:18px;color:var(--wk-white);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.star:hover{border-color:var(--wk-white)}
.star[aria-pressed=true]{background:var(--wk-white);color:#12131a;border-color:transparent}

/* ---------- shared dropdown primitives ----------
   Originally built for the assign flow (since deleted), these are now the
   app-wide custom dropdown kit: the Pomodoro theme/sound pickers (.pdrop)
   and the @mention autocomplete (.mention-pop) all render .af-trigger /
   .af-panel / .af-opt rows, so the primitives outlive that feature. The
   warm-cream trigger fill matches the tlog status cards / Daily Mission
   card at a higher opacity, since a sheet's near-opaque dark backdrop
   leaves little bright marble for a 16% fill to catch. */
.af-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 14px;border-radius:14px;cursor:pointer;text-align:left;
  background:rgba(255,244,229,.4);border:1px solid rgba(255,255,255,.4);
  color:var(--wk-white);font-family:var(--wk);font-size:15px;
  backdrop-filter:blur(9px) saturate(130%);-webkit-backdrop-filter:blur(9px) saturate(130%);
  transition:background .18s ease,border-color .18s ease;
}
.af-trigger:hover{background:rgba(255,244,229,.5)}
.af-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-caret{width:18px;height:18px;flex:none;opacity:.7;transition:transform .2s ease}
.af-trigger[aria-expanded="true"] .af-caret{transform:rotate(180deg)}

.af-panel{
  margin-top:6px;padding:6px;max-height:236px;overflow-y:auto;
  background:rgba(9,11,16,.97);border:1px solid rgba(255,255,255,.18);border-radius:14px;
  box-shadow:0 18px 38px rgba(0,0,0,.45);
  animation:afPanelIn .18s cubic-bezier(.22,1,.36,1);
}
@keyframes afPanelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.af-opt{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 12px;border:0;border-radius:10px;cursor:pointer;text-align:left;
  background:none;color:var(--wk-white);font-family:var(--wk);font-size:14px;
  transition:background .14s ease;
}
.af-opt:hover,.af-opt:focus-visible{background:rgba(255,255,255,.13);outline:none}
/* flex:1 so the label sits beside its checkbox and the meta stays right -
   space-between alone pushed the label across to the far side */
.af-opt-main{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-opt-meta{flex:none;font-size:11px;color:var(--wk-white-60);letter-spacing:.04em}
/* multi-select: the panel stays open, so each row carries its own state */
.af-check{
  flex:none;width:17px;height:17px;border-radius:5px;
  border:1.5px solid rgba(255,255,255,.34);
  display:flex;align-items:center;justify-content:center;
  color:#0a2a0d;transition:background .14s ease,border-color .14s ease;
}
.af-check svg{width:11px;height:11px}
.af-opt.is-on .af-check{background:var(--wk-green);border-color:var(--wk-green)}
.af-opt.is-on{color:var(--wk-white)}
/* an author display rule beats the UA stylesheet's [hidden], so the panel has
   to opt back out explicitly or a closed dropdown is always on screen */
.af-panel[hidden]{display:none}

.preview{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:16px;
  margin-bottom:16px;font-family:var(--wk);font-size:12.5px;line-height:1.65;color:var(--wk-white-70);
  white-space:pre-wrap;word-break:break-word;
}
.tally{list-style:none;margin:0 0 18px;padding:0}
.tally li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.22);font-family:var(--wk);font-size:13px;color:var(--wk-white-70)}
.tally li b{font-weight:700;color:var(--wk-white)}

/* ---------- report charts ---------- */
.chart-wrap{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.donut{flex:none;width:96px;height:96px;border-radius:50%;position:relative}
.donut::after{
  content:"";position:absolute;inset:20px;border-radius:50%;
  background:var(--wk-navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.chart-legend{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.chart-legend li{display:flex;align-items:center;gap:8px;font-family:var(--wk);font-size:11.5px;color:var(--wk-white-70)}
.chart-swatch{flex:none;width:9px;height:9px;border-radius:3px}
.chart-legend .chart-bar-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wk-white);font-weight:600}
.chart-legend .chart-bar-value{flex:none;white-space:nowrap}
.chart-bars{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.chart-bar-track{height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.chart-bar-fill{height:100%;border-radius:999px}

.hist{list-style:none;margin:0 0 18px;padding:0}
.hist li{border-bottom:1px solid rgba(255,255,255,.18);padding:14px 0;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
/* the text block is an unclassed <div>; without min-width:0 a long email or
   store name pushes the row wider than the list instead of wrapping */
.hist li > div{min-width:0}
/* buttons carry their own padding, so baseline-aligning them against the
   text next to them leaves them sitting low - centre those rows instead */
.hist li > .btn{align-self:center;flex:none}
/* Approve + reject sit inside their own .row-acts wrapper here (a labeled
   button beside a small icon button, not the equal-sized icon pair
   .row-acts was first built for), so it needs its own gap and centering
   rather than the cramped 2px meant for two same-sized icons. */
#teamPending li{align-items:center}
#teamPending .row-acts{gap:8px;align-items:center}
.hist .h-c{font-family:var(--wk);font-weight:600;font-size:16px;letter-spacing:.02em;color:var(--wk-white);overflow-wrap:anywhere}
.hist .h-d{font-family:var(--wk);font-size:11.5px;color:var(--wk-white-60);margin-top:3px;overflow-wrap:anywhere}
.hist .h-h{font-family:var(--wk);font-size:15px;font-weight:600;white-space:nowrap;color:var(--wk-white)}

/* Fixed layout with declared column widths, so the table always fits its
   container and long values wrap into a taller row instead of pushing the
   whole thing sideways. nowrap on every cell was what produced the
   full-width horizontal scrollbar. min-width only bites on a phone, where
   scrolling beats columns two characters wide. */
/* The table lives in its own panel rather than floating on the marble, which
   gives the rows something to sit on and the header something to stick to.
   Same glass recipe as the punch card / tlog status cards - a dark navy
   tint (even blurred) just compounds into near-black against this page's
   already-dark backdrop, so this needs the warm/light family, not more
   opacity on the dark one. */
.table-card{
  background:rgba(255,244,229,.16);
  backdrop-filter:blur(9px) saturate(110%);-webkit-backdrop-filter:blur(9px) saturate(110%);
  border:1px solid rgba(255,255,255,.26);
  border-radius:16px;overflow:hidden;margin-bottom:18px;
}
/* No min-width and no horizontal scroll anywhere: the table always fits its
   container, and a cell with more in it than fits grows the ROW downward. */
.assign-table{
  width:100%;table-layout:fixed;
  border-collapse:separate;border-spacing:0;
  font-family:var(--wk);font-size:12px;
}
.assign-table th{
  position:sticky;top:0;z-index:1;background:#12151d;
  text-align:left;padding:12px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wk-white-60);white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.assign-table td{
  padding:13px 12px;vertical-align:top;color:var(--wk-white);line-height:1.45;
  border-top:1px solid rgba(255,255,255,.07);
  white-space:normal;overflow-wrap:anywhere;
}
.assign-table tbody tr:first-child td{border-top:0}
.assign-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.022)}
.assign-table tbody tr:hover td{background:rgba(255,255,255,.06)}
/* short, predictable values keep their own line */
.assign-table .nowrap{white-space:nowrap}

/* click-to-sort column headers (History page's by-member breakdown) */
.assign-table th[data-sort]{cursor:pointer;user-select:none;transition:color .14s ease}
.assign-table th[data-sort]:hover{color:var(--wk-white)}
.assign-table th[data-sort].is-sorted{color:var(--wk-white)}
.hx-sort-arrow{display:inline-block;margin-left:5px;font-size:9px;opacity:.85}

/* assignments log: To / Store / Task / Status / Assigned / Due / Completed / delete */
.assign-table:not(.work-table):not(.month-table) th:nth-child(1),.assign-table:not(.work-table):not(.month-table) td:nth-child(1){width:12%}
.assign-table:not(.work-table):not(.month-table) th:nth-child(2),.assign-table:not(.work-table):not(.month-table) td:nth-child(2){width:15%}
.assign-table:not(.work-table):not(.month-table) th:nth-child(3),.assign-table:not(.work-table):not(.month-table) td:nth-child(3){width:13%}
.assign-table:not(.work-table):not(.month-table) th:nth-child(4),.assign-table:not(.work-table):not(.month-table) td:nth-child(4){width:10%}
.assign-table:not(.work-table):not(.month-table) th:nth-child(5),.assign-table:not(.work-table):not(.month-table) td:nth-child(5){width:13%}
.assign-table:not(.work-table):not(.month-table) th:nth-child(6),.assign-table:not(.work-table):not(.month-table) td:nth-child(6){width:13%}
.assign-table:not(.work-table):not(.month-table) th:nth-child(7),.assign-table:not(.work-table):not(.month-table) td:nth-child(7){width:19%}
.assign-table:not(.work-table):not(.month-table) th:nth-child(8),.assign-table:not(.work-table):not(.month-table) td:nth-child(8){width:5%}

/* History page's by-member breakdown: Member / Days / Shifts / Total Hours / Avg per Day / Avg Rating */
.month-table th:nth-child(1),.month-table td:nth-child(1){width:30%}
.month-table th:nth-child(2),.month-table td:nth-child(2){width:10%}
.month-table th:nth-child(3),.month-table td:nth-child(3){width:10%}
.month-table th:nth-child(4),.month-table td:nth-child(4){width:18%}
.month-table th:nth-child(5),.month-table td:nth-child(5){width:16%}
.month-table th:nth-child(6),.month-table td:nth-child(6){width:16%}

/* today's work: Member / Status / In / Out / Stores / Tasks / Break / Worked */
.work-table th:nth-child(1),.work-table td:nth-child(1){width:14%}
.work-table th:nth-child(2),.work-table td:nth-child(2){width:13%}
.work-table th:nth-child(3),.work-table td:nth-child(3){width:6%}
.work-table th:nth-child(4),.work-table td:nth-child(4){width:6%}
.work-table th:nth-child(5),.work-table td:nth-child(5){width:21%}
.work-table th:nth-child(6),.work-table td:nth-child(6){width:24%}
.work-table th:nth-child(7),.work-table td:nth-child(7){width:7%}
.work-table th:nth-child(8),.work-table td:nth-child(8){width:9%}

/* Below this width eight columns cannot be honest - they would be a few
   characters wide each. Rather than reintroduce a sideways scroll, each row
   becomes its own labelled block. Same data, same order, no slider.
   The threshold is on the viewport but the table lives inside admin-page-inner,
   which is ~80px narrower - so this has to trip earlier than the width the
   table itself needs, or the last columns get squeezed off the edge. */

/* ---------- squircle corners (superellipse, progressive enhancement) ----------
   Pills/circles (.chip, .donut, .chart-bar-track/-fill) are left alone on
   purpose - see the token comment in base.css for why. .af-check is a boxy
   tick square (5px radius), not a circle, so it gets the smallest squircle
   tier instead of an exclusion. */
@supports (corner-shape:superellipse(1)){
  .sheet{corner-shape:var(--squircle-xl)}
  .table-card{corner-shape:var(--squircle-lg)}
  .af-panel{corner-shape:var(--squircle-lg)}
  .preview{corner-shape:var(--squircle-md)}
  .star,.af-trigger,input[type=text],input[type=date],input[type=month],input[type=time],
  input[type=number],select,textarea{corner-shape:var(--squircle-sm)}
  .af-check{corner-shape:var(--squircle-xs)}
}