/* ── Timesheet page — standalone dark theme ── */
:root {
  --bg:          #0f1419;
  --surface:     #1a2332;
  --surface-2:   #212d3d;
  --text:        #e8eef7;
  --muted:       #8b9aaf;
  --border:      rgba(255, 255, 255, 0.07);
  --accent:      #3d9cfd;
  --accent-dim:  rgba(61, 156, 253, 0.13);
  --green:       #34d399;
  --green-dim:   rgba(52, 211, 153, 0.12);
  --amber:       #fbbf24;
  --amber-dim:   rgba(251, 191, 36, 0.12);
  --red:         #f87171;
  --red-dim:     rgba(248, 113, 113, 0.12);
  --radius:      10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/*
 * Tailwind CDN is loaded with preflight:false, so it doesn't include the
 * [hidden] → display:none rule. Without this, CSS display:flex/grid rules
 * on .ts-manager-layout and .ts-self-view override the hidden attribute and
 * both views render at the same time.
 */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Main area ── */
#ts-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* account for sticky header height */
  min-height: calc(100dvh - 3.5rem);
}

/* ── Loading / empty state ── */
.ts-loading-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ── Buttons ──
 * Base size is bumped up from the original ~0.85rem to match the POS page weight.
 * --sm variant is still smaller but readable; xl: overrides are handled via
 * Tailwind arbitrary-variant selectors on the <header> element in the HTML.
 */
.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  min-height: 2.25rem;
}
.ts-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ts-btn--primary { background: var(--accent); color: #fff; }
.ts-btn--primary:not(:disabled):hover { opacity: 0.85; }
.ts-btn--ghost { background: none; border-color: var(--border); color: var(--muted); }
.ts-btn--ghost:not(:disabled):hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.ts-btn--danger { background: var(--red-dim); color: var(--red); border-color: rgba(248,113,113,0.3); }
.ts-btn--danger:not(:disabled):hover { background: rgba(248,113,113,0.22); }
/* sm: still compact but not tiny — was 0.78rem / 0.28rem */
.ts-btn--sm { padding: 0.38rem 0.8rem; font-size: 0.83rem; min-height: 2rem; }
.ts-btn--active { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ── Badges ── */
.ts-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.ts-badge--green  { background: var(--green-dim);  color: var(--green); }
.ts-badge--amber  { background: var(--amber-dim);  color: var(--amber); }
.ts-badge--red    { background: var(--red-dim);    color: var(--red); }
.ts-badge--muted  { background: rgba(255,255,255,0.05); color: var(--muted); }
.ts-badge--accent { background: var(--accent-dim); color: var(--accent); }

/* ── Helpers ── */
.ts-muted  { color: var(--muted); font-size: 0.9rem; }
.ts-center { text-align: center; padding: 1.5rem 0; }
.ts-hint   { color: var(--muted); font-size: 0.95rem; text-align: center; padding: 3rem 2rem; }

/* Section title is an all-caps label — slightly larger than original 0.75rem */
.ts-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 2rem 0 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   MANAGER SHELL — Staff vs Payroll (payroll tab is manager-only)
   ═══════════════════════════════════════════════════════════════ */

.ts-manager-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ts-manager-layout-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tab strip under global header — matches dark pill language */
.ts-manager-toolbar {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.ts-manager-tabs {
  display: flex;
  gap: 0.35rem;
}

.ts-tab {
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ts-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.ts-tab.ts-tab--active {
  background: rgba(61, 156, 253, 0.18);
  border-color: rgba(61, 156, 253, 0.35);
  color: #93c5fd;
}

/* Payroll workspace fills remaining width; printable report body */
.ts-payroll-workspace {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.ts-payroll-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.ts-payroll-toolbar__left,
.ts-payroll-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ts-payroll-week-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ts-payroll-week-label__text {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.ts-payroll-select {
  min-width: 11rem;
  min-height: 2rem;
  font-size: 0.85rem;
}

.ts-payroll-report {
  flex: 1;
  padding: 1rem 1.25rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.ts-payroll-report__title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.25rem;
}

.ts-payroll-report__meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

.ts-payroll-report__warn {
  font-size: 0.82rem;
  color: var(--amber);
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--amber-dim);
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.ts-payroll-report .ts-table tfoot th,
.ts-payroll-report .ts-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: var(--surface-2);
}

.ts-payroll-shift-block {
  margin-top: 1.75rem;
}

.ts-payroll-shift-block__name {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}

/* ── Print: prefer Payroll tab; unhide report column and drop nav/toolbars ── */
@media print {
  header.top-bar,
  .no-print,
  #ts-loading,
  #view-employee,
  #ts-staff-workspace {
    display: none !important;
  }
  body {
    background: #fff;
  }
  #ts-main,
  #view-manager,
  .ts-manager-shell,
  .ts-manager-layout-wrap {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* Override [hidden] + flex layout so the report prints even if attributes say hidden */
  #ts-payroll-workspace {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    background: #fff;
  }
  .ts-payroll-report {
    max-width: none;
    padding: 0;
    color: #111;
  }
  .ts-payroll-report .ts-table {
    font-size: 9pt;
  }
  .ts-payroll-report__title,
  .ts-payroll-report__meta,
  .ts-payroll-shift-block__name {
    color: #111;
  }
  .ts-table,
  .ts-table th,
  .ts-table td {
    border-color: #ccc;
    color: #111;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MANAGER VIEW — two-column layout
   ═══════════════════════════════════════════════════════════════ */

.ts-manager-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar ──
 * Width bumped to 310px (was 288px); employee rows use larger padding + font
 * so names and stats are legible at a glance on laptop/tablet.
 */
.ts-sidebar {
  width: 310px;
  min-width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.ts-sidebar__head {
  padding: 1.1rem 1.1rem 0.85rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

.ts-sidebar__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.ts-sidebar__controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ts-sidebar__list {
  overflow-y: auto;
  flex: 1;
  padding: 0.5rem 0;
}

/* Employee row — taller and more readable (was 0.65rem 1rem padding, 0.88rem name) */
.ts-emp-row {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ts-emp-row:hover { background: rgba(255,255,255,0.03); }
.ts-emp-row--active {
  background: var(--accent-dim) !important;
  border-left: 3px solid var(--accent);
}

.ts-emp-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ts-emp-row__name {
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-emp-row__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
/* Meta items bumped from 0.72rem → 0.78rem for legibility */
.ts-emp-row__role {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: capitalize;
}
.ts-emp-row__hours {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ts-emp-row__cost {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* ── Detail panel — more breathing room than original 1.5rem 1.75rem ── */
.ts-detail {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem 2rem 2.5rem;
  min-width: 0;
}

.ts-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
/* Name bumped from 1.25rem → 1.45rem */
.ts-detail-name {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* Sub bumped from 0.82rem → 0.88rem */
.ts-detail-sub {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.ts-detail-head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Summary cards ──
 * Padding, min-width, and value font bumped significantly so the key numbers
 * (hours, pay, rate) read as prominent data at a glance.
 * Was: 0.85rem 1.1rem padding, 1.4rem value, 0.68rem label.
 */
.ts-summary-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.ts-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  min-width: 145px;
}
.ts-summary-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.ts-summary-card__value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ts-summary-card__value--green { color: var(--green); }
.ts-summary-card__value--amber { color: var(--amber); }
.ts-summary-card__value--muted { color: var(--muted); }
.ts-summary-card__value--red   { color: var(--red); }

/* ── Shifts table ──
 * Row height driven by td padding: was 0.6rem 0.85rem, now 0.85rem 1rem.
 * Font bumped from 0.85rem → 0.92rem; th from 0.7rem → 0.75rem.
 */
.ts-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
}
.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ts-table th {
  background: var(--surface-2);
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.ts-table th.num,
.ts-table td.num { text-align: right; }
.ts-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.ts-table tr:last-child td { border-bottom: none; }
.ts-table tr:hover td { background: rgba(255,255,255,0.02); }

.ts-detail-footer {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE SELF-SERVICE VIEW
   Full-width centered layout; no sidebar, so content can breathe.
   Padding and max-width increased to fill laptop/tablet canvas.
   ═══════════════════════════════════════════════════════════════ */

.ts-self-view {
  flex: 1;
  /* More vertical breathing room; wider cap lets it fill the screen */
  padding: 2rem 2rem 4rem;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ts-self-head {
  margin-bottom: 2rem;
}
/* Title bumped from 1.35rem → 1.8rem — this is a page-level heading */
.ts-self-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── Clock-in / clock-out widget ──
 * Increased padding + gap; the card is the primary action on this page.
 */
.ts-clock-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2.5rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-bottom: 2rem;
  text-align: center;
}

/* Status line — bigger dot and text (was 10px dot, 0.88rem font) */
.ts-clock-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1rem;
  font-weight: 600;
}
.ts-clock-status__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ts-clock-status--in  .ts-clock-status__dot { background: var(--green); animation: ts-pulse 2s ease-in-out infinite; }
.ts-clock-status--out .ts-clock-status__dot { background: var(--muted); }
.ts-clock-status--in  { color: var(--green); }
.ts-clock-status--out { color: var(--muted); }

@keyframes ts-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Elapsed counter — hero number, bumped from 2.25rem → 3.25rem */
.ts-clock-elapsed {
  font-size: 3.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--text);
  min-width: 7rem;
}

/* Clock button — large prominent CTA (was 180px / 1rem 2rem / 1.1rem) */
.ts-clock-btn {
  min-width: 220px;
  padding: 1.2rem 2.75rem;
  border-radius: 14px;
  border: none;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.ts-clock-btn:active  { transform: scale(0.97); }
.ts-clock-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ts-clock-btn--in  { background: var(--green); color: #0a1a0f; }
.ts-clock-btn--out { background: var(--red);   color: #fff; }
.ts-clock-btn--in:not(:disabled):hover  { opacity: 0.88; }
.ts-clock-btn--out:not(:disabled):hover { opacity: 0.88; }

/* "Since HH:MM" caption below the button */
.ts-clock-since {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   MODALS (Add / Edit employee)
   ═══════════════════════════════════════════════════════════════ */

.ts-modal-root {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ts-modal-root[hidden] { display: none; }

.ts-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 20, 0.75);
  backdrop-filter: blur(6px);
}

.ts-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 1.75rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.ts-modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

/* Form inside modal */
.ts-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ts-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.ts-label {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.ts-label span.req { color: var(--amber); }

.ts-input,
.ts-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  color: var(--text);
  font-size: 0.88rem;
  min-height: 2.5rem;
  font-family: inherit;
}
.ts-input:focus,
.ts-select:focus { outline: none; border-color: var(--accent); }

.ts-form-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.ts-form-msg {
  font-size: 0.8rem;
  text-align: center;
  min-height: 1.1em;
}
.ts-form-msg--ok  { color: var(--green); }
.ts-form-msg--err { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   Three tiers:
     ≤768px  — mobile stack (sidebar on top, single column forms)
     ≥1280px — xl: wider sidebar, bigger card values, larger clock
     ≥1536px — 2xl: further bumps (rides the html font-size increase)
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .ts-manager-layout {
    flex-direction: column;
    overflow: visible;
  }

  .ts-sidebar {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 45dvh;
  }

  .ts-detail {
    padding: 1rem;
  }

  .ts-self-view {
    padding: 1.25rem 1rem 2.5rem;
  }

  .ts-clock-section {
    padding: 1.75rem 1rem;
  }

  /* Smaller clock on mobile — still bigger than the original base */
  .ts-clock-elapsed { font-size: 2.5rem; }
  .ts-clock-btn { min-width: 180px; padding: 1rem 2rem; font-size: 1.1rem; }

  .ts-self-title { font-size: 1.45rem; }

  .ts-summary-card { padding: 0.9rem 1.1rem; }
  .ts-summary-card__value { font-size: 1.4rem; }

  .ts-form-row {
    grid-template-columns: 1fr;
  }

  .ts-detail-head {
    flex-direction: column;
  }
}

/* ── xl (≥1280px) — laptop and large tablets in landscape ── */
@media (min-width: 1280px) {
  /* Sidebar gains width so names never truncate */
  .ts-sidebar { width: 330px; }

  /* Cards: larger value numbers on big screens */
  .ts-summary-card { padding: 1.25rem 1.6rem; min-width: 160px; }
  .ts-summary-card__value { font-size: 2rem; }

  /* Clock: the hero number can be even bolder on xl */
  .ts-clock-elapsed { font-size: 3.75rem; }
  .ts-clock-btn { min-width: 240px; padding: 1.35rem 3rem; font-size: 1.35rem; }

  /* Detail panel: wider gutter */
  .ts-detail { padding: 2rem 2.5rem 3rem; }

  /* Self view: more horizontal room */
  .ts-self-view { padding: 2.5rem 2.5rem 5rem; max-width: 960px; }
  .ts-self-title { font-size: 2rem; }

  /* Table rows taller */
  .ts-table td { padding: 1rem 1.1rem; }
  .ts-table th { padding: 0.8rem 1.1rem; }
}

/* ── 2xl (≥1536px) — rides the html font-size bump to 18px already;
   add a wider sidebar and extra self-view room ── */
@media (min-width: 1536px) {
  .ts-sidebar { width: 360px; }
  .ts-self-view { max-width: 1040px; }
}

/* ── Amber button variant — used for the "Adjust Time" CTA ── */
.ts-btn--amber {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: rgba(251, 191, 36, 0.3);
}
.ts-btn--amber:not(:disabled):hover { background: rgba(251, 191, 36, 0.22); }

/* ── Section title row: title + action button side by side ── */
.ts-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 2rem 0 1rem;
}
/* Reset margin because it is now carried by the parent flex row */
.ts-section-title-row .ts-section-title { margin: 0; }

/* ── Textarea reuses ts-input styling; override min-height for multi-line ── */
.ts-textarea {
  min-height: 4rem;
  resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════
   BUSINESS SETTINGS (bottom of manager sidebar)
   ═══════════════════════════════════════════════════════════════ */

/* Pinned below the scrollable employee list — flex-shrink:0 keeps it
   visible when the list is long.  */
.ts-settings-section {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 1rem 1.1rem 1.1rem;
  background: var(--surface);
}

.ts-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.ts-settings-footer-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Status message stays inline next to the Save button */
.ts-settings-msg {
  flex: 1;
  text-align: left !important;
}

/* ══════════════════════════════════════════════════════════════════
   SCHEDULE GRID — manager weekly schedule
   Layout strategy:
   • One CSS grid, four columns: Day | Start (1fr) | End (1fr) | Clear.
   • Equal 1fr columns for Start/End so header titles sit above the same
     horizontal band as the picker clusters on every row.
   • .ts-sched-block--start gets a right border + padding — visual “lane”
     between start and end without cramming controls together.
   • Pickers use ~55px-wide selects (Tailwind) + .ts-sched-select-compact.
   ══════════════════════════════════════════════════════════════════ */

/* Outer container — subtle card border like the shifts table */
.ts-sched-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 1rem;
}

/* Shared grid: header + body rows use identical tracks for alignment */
.ts-sched-head,
.ts-sched-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1fr) 2.25rem;
  column-gap: 0.65rem;
  align-items: center;
}

.ts-sched-head {
  padding: 0.5rem 0.85rem 0.45rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  min-height: 2.5rem;
}

.ts-sched-head-day {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  justify-self: start;
}

/* Start / End column shells — header shows title; body shows time cluster */
.ts-sched-block {
  min-width: 0;
  justify-self: stretch;
  align-self: center;
}

/* Vertical separation between Start and End columns (header + data rows) */
.ts-sched-block--start {
  padding-right: 0.75rem;
  margin-right: 0.15rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ts-sched-block--end {
  padding-left: 0.35rem;
}

.ts-sched-block--head {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.05rem;
}

.ts-sched-block-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  line-height: 1.2;
}

.ts-sched-head-clear {
  justify-self: center;
}

/* One data row per weekday */
.ts-sched-row {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.ts-sched-row:last-child { border-bottom: none; }

/* Day name label */
.ts-sched-day {
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--text);
  justify-self: start;
}

/* Tighter select chrome so ~55px cells don’t look oversized */
.ts-sched-select-compact.ts-select {
  min-height: 0;
  min-width: 0;
  padding-top: 0.26rem;
  padding-bottom: 0.26rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  line-height: 1.2;
  font-family: inherit;
}

/* Clear (✕) */
.ts-sched-clear-btn {
  justify-self: center;
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
  min-height: 1.8rem;
  color: var(--muted);
}
.ts-sched-clear-btn:hover { color: var(--danger); border-color: var(--danger); }

/* Save + status message row below the grid */
.ts-sched-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* ── Employee self-service schedule cards ──
 * Read-only display: one compact card per scheduled day.
 */
.ts-sched-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 2rem;
}

.ts-sched-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.12s;
}

/* Highlight today's entry */
.ts-sched-card--today {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

.ts-sched-card__day {
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 2.8rem;
  color: var(--text);
}

.ts-sched-card__time {
  font-weight: 600;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.ts-sched-card--today .ts-sched-card__time {
  color: var(--accent);
}

.ts-sched-card__notes {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Time cluster stays left within its 1fr lane (doesn’t stretch edge-to-edge). */
.ts-sched-time-pair {
  width: fit-content;
  max-width: 100%;
}

/* ── Responsive tweaks for the schedule grid ── */
@media (max-width: 480px) {
  .ts-sched-head,
  .ts-sched-row {
    grid-template-columns: 2.35rem minmax(0, 1fr) minmax(0, 1fr) 1.85rem;
    column-gap: 0.4rem;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
  .ts-sched-block--start {
    padding-right: 0.5rem;
  }
  .ts-sched-block--end {
    padding-left: 0.25rem;
  }
}

@media (min-width: 640px) {
  .ts-sched-head,
  .ts-sched-row {
    column-gap: 0.75rem;
  }
}

@media (min-width: 1280px) {
  .ts-sched-head,
  .ts-sched-row {
    column-gap: 0.85rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .ts-sched-day { font-size: 0.92rem; }
}