:root {
  --yellow: #ccff00;
  --dark: #1F1F1F;
  --surface: #2a2a2a;
  --surface-2: #333;
  --border: #3a3a3a;
  --text: #ffffff;
  --text-muted: #999;
  --danger: #ff4444;
  --success: #22c55e;
  --warning: #f0a92b;
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--dark);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: env(safe-area-inset-bottom); }

.wrap { max-width: 480px; margin: 0 auto; padding: 16px; }

/* ---------------------------------------------------------------- pin page */

.pin-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  max-width: 420px;
  margin: 0 auto;
}

.pin-brand { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 4px; }
.pin-brand span { color: var(--yellow); }
.pin-tagline { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; text-align: center; }

.pin-dots { display: flex; gap: 14px; margin-bottom: 26px; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.pin-dot.filled { background: var(--yellow); border-color: var(--yellow); }
.pin-dot.error  { border-color: var(--danger); background: var(--danger); }

.pin-grid { display: grid; grid-template-columns: repeat(3, 78px); gap: 14px; }
.pin-key {
  height: 78px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 1.6rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: background 0.1s, transform 0.1s;
}
.pin-key:active { background: var(--surface-2); transform: scale(0.94); }
.pin-key.del { font-size: 0.9rem; color: var(--text-muted); background: transparent; border-color: transparent; }
.pin-error { min-height: 22px; margin-top: 18px; color: var(--danger); font-size: 0.88rem; text-align: center; }

/* ---------------------------------------------------------------- header */

.appbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px calc(14px);
  max-width: 480px; margin: 0 auto;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.appbar-logo {
  width: 38px; height: 38px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0;
}
.appbar-name { flex: 1; min-width: 0; }
.appbar-name h1 { margin: 0; font-size: 1.02rem; font-weight: 600; }
.appbar-brand {
  font-size: 1.06rem; font-weight: 700; letter-spacing: -0.4px; line-height: 1.15;
}
.appbar-brand span { color: var(--yellow); }
.appbar-name p  { margin: 0; font-size: 0.76rem; color: var(--text-muted); }

.icon-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn.accent { background: var(--yellow); border-color: var(--yellow); color: #000; }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.card-label { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 2px; }

.balance-big { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 0; }
.balance-big small { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.balance-split {
  display: flex; gap: 20px; margin-top: 10px;
  border-top: 1px solid var(--border); padding-top: 9px;
}
.balance-split div { font-size: 0.78rem; color: var(--text-muted); }
.balance-split b { color: var(--text); font-size: 0.88rem; font-weight: 600; margin-left: 3px; }
.balance-none { font-size: 0.95rem; color: var(--text-muted); margin: 4px 0 0; }

/* Secondary filter row — same underline idea, quieter than the primary bar. */
/* The baseline is an inset shadow, not a border, so each tab's own underline
   sits flush on top of it — no negative margin, so nothing overflows. */
.type-tabs {
  display: flex; gap: 18px; margin: 0 0 14px;
  overflow-x: auto; overflow-y: hidden;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Setting overflow-x forces overflow-y to auto, and the -1px underline offset
   is enough to make a scrollbar appear. Keep the horizontal scroll for narrow
   screens, but never show the bars. */
.tabs, .type-tabs { scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar, .type-tabs::-webkit-scrollbar { display: none; }
.type-tab {
  padding: 9px 1px; font-size: 0.82rem; font-weight: 500;
  white-space: nowrap; cursor: pointer; font-family: inherit;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted);
}
.type-tab.on { color: var(--text); border-bottom-color: var(--yellow); font-weight: 600; }

/* ---------------------------------------------------------------- calendar */

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-size: 0.95rem; font-weight: 600; }
.cal-nav {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cal-nav:active { background: var(--surface-2); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 0.7rem; color: var(--text-muted); padding-bottom: 2px; }

.cal-day {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 0.82rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
}
.cal-day.pad { cursor: default; }
/* Today is wayfinding, not a status — so it must not borrow a colour that
   carries meaning in either key (yellow = needs a decision on the admin
   calendar). A neutral ring says "you are here" and nothing else. */
.cal-day.today { border-color: rgba(255,255,255,0.8); font-weight: 700; }
.cal-day.approved { background: rgba(34,197,94,0.22); color: #b7f5cd; font-weight: 600; }
.cal-day.pending  { background: rgba(240,169,43,0.18); color: #f6cf8e; border: 1px dashed var(--warning); }
.cal-day.denied   { background: rgba(255,68,68,0.18); color: #ffb0b0; text-decoration: line-through; }
/* The calendar sits on a lighter surface than the other cards so it reads as a
   distinct grid — and so the blackout hatch below has something to contrast
   against. On the old #2a2a2a card the hatch was nearly the same colour. */
.card.calendar { background: #343434; border-color: #454545; }

.cal-day.blackout {
  background: repeating-linear-gradient(45deg, #1c1c1c, #1c1c1c 3px, #262626 3px, #262626 6px);
  color: #8a8a8a;
  box-shadow: inset 0 0 0 1px #4a4a4a;
}
.cal-day.blackout.approved,
.cal-day.blackout.pending { color: inherit; }

.cal-others {
  position: absolute; bottom: 2px; left: 0; right: 0;
  font-size: 0.56rem; color: var(--text-muted); line-height: 1;
}
.cal-day.approved .cal-others,
.cal-day.pending .cal-others { color: inherit; opacity: 0.75; }

/* ---------------------------------------------------------------- admin calendar
   Deliberately NOT the employee key. A day can hold several people at once, so
   status colours would be ambiguous. Here: number = how many are off,
   dot = something needs a decision, hatch = blackout. */

.cal-day.adm { justify-content: flex-start; padding-top: 4px; }
.cal-day.adm .adm-n { font-size: 0.8rem; line-height: 1; }
.cal-day.adm .adm-out {
  font-size: 0.56rem; line-height: 1; margin-top: 3px; color: #cfcfcf; font-weight: 600;
}

/* Shading deepens with headcount, so thin weeks stand out without reading. */
.cal-day.out-1 { background: rgba(255,255,255,0.06); }
.cal-day.out-2 { background: rgba(255,255,255,0.11); }
.cal-day.out-3 { background: rgba(255,255,255,0.17); }

/* Anything still waiting on an admin. */
.cal-day.needs::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow);
}

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 0.7rem; color: var(--text-muted); }
.swatch.needs { background: var(--yellow); border-radius: 50%; width: 8px; height: 8px; }
.swatch.today { background: transparent; border: 2px solid rgba(255,255,255,0.8); }
.swatch.outs  { background: rgba(255,255,255,0.17); }
.legend span { display: flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.swatch.approved { background: rgba(34,197,94,0.5); }
.swatch.pending  { background: rgba(240,169,43,0.4); border: 1px dashed var(--warning); }
.swatch.denied   { background: rgba(255,68,68,0.4); }
.swatch.blackout {
  background: repeating-linear-gradient(45deg, #1c1c1c, #1c1c1c 2px, #262626 2px, #262626 4px);
  box-shadow: inset 0 0 0 1px #4a4a4a;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 16px; border-radius: var(--radius);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  margin-bottom: 10px; font-family: inherit;
}
.btn:active { transform: scale(0.99); }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: #000; }
.btn.danger  { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.ok      { background: var(--success); border-color: var(--success); color: #04240f; }
.btn.small   { width: auto; padding: 8px 14px; font-size: 0.83rem; margin: 0; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pill {
  background: rgba(240,169,43,0.2); color: #f6cf8e;
  font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; font-weight: 600;
}

/* ---------------------------------------------------------------- forms */

label.field { display: block; margin-bottom: 12px; }
label.field > span {
  display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 5px;
}
input[type=text], input[type=date], input[type=number], input[type=email], select, textarea {
  width: 100%; min-width: 0; max-width: 100%;
  padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--dark); border: 1px solid var(--border); color: var(--text);
  font-size: 0.95rem; font-family: inherit;
}

/* Safari gives date inputs their own intrinsic width and centres the text,
   which is what made them spill out of the card on iPhone. */
input[type=date] {
  -webkit-appearance: none; appearance: none;
  display: block; text-align: left;
}
textarea { resize: vertical; min-height: 74px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--yellow); }
/* minmax(0,1fr), not 1fr: a grid track's default min-width is auto, so a date
   input — which has a wide intrinsic size on iOS — pushes the column past the
   card instead of shrinking. */
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.row2 > * { min-width: 0; }

.check { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; margin-bottom: 12px; }
.check input { width: 18px; height: 18px; accent-color: var(--yellow); }

.hint { font-size: 0.78rem; color: var(--text-muted); margin: -4px 0 12px; }
.warn {
  background: rgba(240,169,43,0.12); border: 1px solid rgba(240,169,43,0.4);
  color: #f6cf8e; border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 0.82rem; margin-bottom: 12px;
}
.err {
  background: rgba(255,68,68,0.12); border: 1px solid rgba(255,68,68,0.4);
  color: #ffb0b0; border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 0.82rem; margin-bottom: 12px;
}

/* ---------------------------------------------------------------- sheet */

.sheet-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center; z-index: 100;
}
.sheet {
  background: var(--dark); border-top: 2px solid var(--yellow);
  border-radius: 18px 18px 0 0; width: 100%; max-width: 480px;
  max-height: 92vh; overflow-y: auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; font-size: 1.05rem; }
.sheet-x {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px;
}

/* ---------------------------------------------------------------- lists */

.item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item-dates { font-size: 0.95rem; font-weight: 600; margin: 0; }
.item-sub { font-size: 0.78rem; color: var(--text-muted); margin: 2px 0 0; }
.item-reason { font-size: 0.83rem; margin: 8px 0 0; color: #ddd; }

.tag {
  font-size: 0.62rem; padding: 3px 9px; border-radius: 999px; font-weight: 700;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em;
}

/* Leave type. Square-cornered so it never reads as a status pill — different
   shape, different meaning. Paid types are loud because they cost money. */
.type-chip {
  display: inline-block; vertical-align: 1px;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 3px 7px; border-radius: 4px;
  margin-right: 7px; white-space: nowrap;
}
.type-chip.paid {
  background: rgba(204,255,0,0.16); color: var(--yellow);
  border: 1px solid rgba(204,255,0,0.55);
}
.type-chip.free {
  background: transparent; color: #7d7d7d;
  border: 1px solid var(--border);
}

/* Card footer: archive tucked bottom-left where it won't be hit by accident,
   the paid check bottom-right. */
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.foot-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 3px 2px; cursor: pointer;
  color: #6f6f6f; font-size: 0.72rem; font-family: inherit;
}
.foot-btn:hover { color: var(--text-muted); }
.foot-btn.danger { color: #a05050; }
.foot-btn.danger:hover { color: var(--danger); }

.paid-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.75rem; color: var(--text-muted); cursor: pointer;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  user-select: none;
}
.paid-check input { width: 15px; height: 15px; accent-color: var(--success); margin: 0; }
.paid-check.is-paid { border-color: rgba(34,197,94,0.5); color: #a5efbf; }
.paid-when { font-size: 0.68rem; color: var(--text-muted); margin: 6px 0 0; }
.tag.pending   { background: rgba(240,169,43,0.2); color: #f6cf8e; }
.tag.approved  { background: rgba(34,197,94,0.2); color: #a5efbf; }
.tag.denied    { background: rgba(255,68,68,0.2); color: #ffb0b0; }
.tag.cancelled { background: var(--surface-2); color: var(--text-muted); }
.tag.admin     { background: rgba(204,255,0,0.18); color: var(--yellow); }
.tag.off       { background: var(--surface-2); color: var(--text-muted); }

.empty { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 32px 16px; }

.section-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 20px 0 10px;
}

/* Primary navigation — underline tabs, matching CSLTrack's admin bar. */
.tab-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.tabs { display: flex; max-width: 480px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; }
.tab {
  flex: 1; padding: 14px 10px; text-align: center;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; cursor: pointer; font-family: inherit;
  background: none; border: none; border-bottom: 2px solid transparent;
}
.tab.on { color: var(--yellow); border-bottom-color: var(--yellow); }

.loading { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 0.88rem; }