/* ── Reset & variables ──────────────────────────────────────────────────── */
:root {
  --bg:              #EEF4F8;
  --surface:         #ffffff;
  --border:          #C8D9E6;
  --border-soft:     #e6f0f5;
  --text:            #1A2B3C;
  --text-muted:      #6F8498;
  --header-bg:       #12345A;
  --sidebar-bg:      #12345A;
  --accent:          #1976C8;
  --accent-dark:     #0B2745;
  --radius:          8px;
  --shadow:          0 2px 8px rgba(18,52,90,0.13);
  /* Industrial Navy palette */
  --navy:            #12345A;
  --navy-dark:       #0B2745;
  --page-bg:         #EEF4F8;
  --card-bg:         #FFFFFF;
  --day-blue:        #1976C8;
  --afternoon-orange:#E86F00;
  --night-indigo:    #30308F;
  --success:         #2E9B57;
  --warning:         #E49B20;
  --danger:          #D8473F;
  --muted:           #6F8498;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  height: 100vh;
  overflow: hidden;
}

/* ── App shell ──────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
  background: #ffffff;
  color: var(--navy);
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  z-index: 50;
  border-bottom: 1px solid #C8D9E6;
  box-shadow: 0 2px 8px rgba(18,52,90,0.07);
}

.app-logo {
  height: 54px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.app-title {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ── App body (sidebar + content) ───────────────────────────────────────── */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 10;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px 11px 18px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 500;
  text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-transform: uppercase;
}
.nav-item:hover  { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.nav-item.active { background: rgba(255,255,255,0.14); color: #fff; font-weight: 500; border-left-color: rgba(255,255,255,0.9); }

.nav-emp-wrap {
  width: 100%;
}
.nav-hrs-wrap {
  width: 100%;
}
.nav-chevron {
  margin-left: auto;
  font-size: 1.1rem;
  opacity: 0.5;
  line-height: 1;
  transition: transform 0.15s;
}
.nav-emp-flyout {
  display: none;
  position: fixed;
  background: #12345A;
  border-radius: 0 6px 6px 0;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.35);
  min-width: 160px;
  z-index: 9999;
  overflow: hidden;
}
.nav-hrs-flyout {
  display: none;
  position: fixed;
  background: #12345A;
  border-radius: 0 6px 6px 0;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.35);
  min-width: 160px;
  z-index: 9999;
  overflow: hidden;
}
.nav-flyout-item {
  display: block;
  width: 100%;
  padding: 15px 18px;
  background: #12345A;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 0.93rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  text-transform: uppercase;
}
.nav-flyout-item:hover,
.nav-flyout-item.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.nav-icon  { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-label { flex: 1; letter-spacing: 0.01em; font-weight: 500; }

/* ── Sidebar footer (Info & Help) ───────────────────────────────────────── */
.sidebar-footer {
  margin-top: auto;
  width: 100%;
  padding-bottom: 8px;
  flex-shrink: 0;
}
.nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 6px 12px 6px;
}

/* ── Info & Help page ───────────────────────────────────────────────────── */
.info-page {
  max-width: 720px;
}
.info-section {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.info-section-hdr {
  padding: 12px 20px;
  background: var(--accent-dark);
  color: #fff;
}
.info-section-hdr h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
}
.info-section-body {
  padding: 16px 20px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.6;
}
.info-section-body p { margin: 0 0 10px; }
.info-section-body p:last-child { margin-bottom: 0; }
.info-subhdr {
  margin: 14px 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.info-list {
  margin: 10px 0 0;
  padding-left: 20px;
}
.info-list li {
  margin-bottom: 6px;
  line-height: 1.55;
}
.info-list li:last-child { margin-bottom: 0; }

/* ── Content area ───────────────────────────────────────────────────────── */
.content {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
}

/* page roots fill the content area */
#page-home,
#page-weekly,
#page-budget,
#page-hours,
#page-ft-hours,
#page-cas-hours,
#page-machine-hours,
#page-lskg,
#page-leave,
#page-employee,
#page-admin,
#page-attainment,
#page-att-data,
#page-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Attainment: flex chain so .att-table-wrap is the bounded scroll container
   and position:sticky on <thead> works relative to it, not the page. */
#page-attainment,
#page-att-data { min-height: 0; }

#att-tab-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Date bar ───────────────────────────────────────────────────────────── */
.date-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.date-nav {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: #4b5563;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.date-nav:hover  { background: #9ca3af; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.date-nav:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.16); }

/* ── Weekly toolbar — 3-area grid so centre nav is always mathematically centred */
#weekly-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 72px;
}

/* Left area: CURRENT WEEK + calendar picker */
.wk-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 210px;
}

/* Centre area: two rows — nav pinned, date range below independently */
.wk-center  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-shrink: 0; }
.wk-cnav    { display: flex; align-items: center; gap: 8px; }
.wk-crange  { display: flex; align-items: center; justify-content: center; }

/* Right area: empty balance column — keeps centre truly centred */
/* min-width is pinned to .srch-wrap's max-width (210px) so the grid track's
   floor is constant whether this column holds a search box or (on LSKG) is
   empty — otherwise the 1fr/1fr split becomes asymmetric per page and the
   centre badge/date-range shifts horizontally when switching pages. */
.wk-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 210px;
}

.wk-nav {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: #4b5563;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.wk-nav:hover  { background: #9ca3af; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.wk-nav:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.16); }

.wk-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  background: #4b5563;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: #fff;
  font-size: 0.80rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  min-width: 90px;
  justify-content: center;
}

.wk-range {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}

.wk-cur-btn {
  padding: 5px 12px;
  background: #4b5563;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  height: 30px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.wk-cur-btn:hover  { background: #9ca3af; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.wk-cur-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.16); }

/* Native week picker — styled to match app form inputs */
#weekly-week-input {
  height: 32px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(47,65,86,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
#weekly-week-input:hover {
  border-color: var(--accent);
}
#weekly-week-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(86,124,141,0.15);
}
/* Tint the calendar icon to match the app accent colour */
#weekly-week-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: invert(47%) sepia(22%) saturate(500%) hue-rotate(162deg) brightness(88%);
}
#weekly-week-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ── */
.date-label {
  font-size: 1rem;
  font-weight: 500;
  min-width: 0;
  text-align: center;
}

.today-badge {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  background: #e8f3f8;
  border: 1px solid #C8D9E6;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: -2px;
}

.btn-ghost {
  padding: 6px 14px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  background: #4b5563;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.btn-ghost:hover    { background: #9ca3af; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-ghost:active   { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.16); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ── Daily date-bar layout — 3-area grid, centre always mathematically centred */
.date-bar-daily  { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.date-bar-left   { display: flex; align-items: center; gap: 8px; }
.date-bar-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.date-bar-cnav   { display: flex; align-items: center; gap: 8px; }
.date-bar-clabel { display: flex; align-items: center; gap: 6px; }
.date-bar-right  { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* Daily date picker — styled to match app inputs */
#daily-date-input {
  height: 32px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(47,65,86,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
#daily-date-input:hover { border-color: var(--accent); }
#daily-date-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(86,124,141,0.15);
}
#daily-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: invert(47%) sepia(22%) saturate(500%) hue-rotate(162deg) brightness(88%);
}
#daily-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }


/* ── Daily action buttons (Clear / Copy / Paste) ─────────────────────────── */
.daily-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.btn-day-action {
  padding: 7px 15px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  background: #4b5563;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  user-select: none;
}
.btn-day-action:hover         { background: #9ca3af; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-day-action:active        { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.16); }
.btn-day-action:disabled      { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
.btn-day-clear                { background: #b71c1c; color: #fff; border-color: rgba(255,255,255,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12); }
.btn-day-clear:hover          { background: #e53935; color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15); }

.toggle-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.toggle-wrap input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }

/* ── Main content ───────────────────────────────────────────────────────── */
.main { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }

/* ── Roster section label (sits above special-grid) ─────────────────────── */
.roster-section-lbl {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0 2px;
}

/* ── Special roles grid (3 columns) ─────────────────────────────────────── */
.special-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}

/* ── Team grid ──────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  gap: 10px;
  align-items: start;
}
.team-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.team-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.team-grid.cols-7 { grid-template-columns: repeat(7, 1fr); }
.team-grid.cols-8 { grid-template-columns: repeat(8, 1fr); }

/* ── Away Staff card ────────────────────────────────────────────────────── */
.away-staff-hdr {
  background: #374151;
  color: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ── Team card ──────────────────────────────────────────────────────────── */
.team-card {
  background: #fafcfe;
  border-radius: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ── Shift body — spreadsheet-style unified card ─────────────────────────── */
.shift-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow);
}

/* Inside shift-body, grids have no gap — borders become the column dividers */
.shift-body .team-grid,
.shift-body .special-grid {
  gap: 0;
}

/* Cards inside shift-body: flush, no radius, no shadow */
.shift-body .team-card {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  /* stretch all cards to full height of the grid row */
  display: flex;
  flex-direction: column;
}
.shift-body .team-card:last-child {
  border-right: none;
}
/* push add-btn (and add-btn-group) to bottom of each card */
.shift-body .team-card > .add-btn,
.shift-body .team-card .add-btn-group {
  margin-top: auto;
}

/* Labeled divider strip between machine row and support row */
.shift-divider {
  padding: 4px 14px;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3a5568;
  background: #dceef5;
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.team-hdr {
  padding: 7px 12px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.team-total { font-size: 0.78rem; font-weight: 500; opacity: 0.92; }

/* Offline card state */
.team-card-offline {
  opacity: 0.72;
}
.machine-select-offline {
  font-style: italic;
  letter-spacing: 0.04em;
}
.offline-body {
  padding: 14px 12px;
  font-size: 0.78rem;
  color: #5a7080;
  font-style: italic;
  text-align: center;
  flex: 1;
}

/* Machine selector inside team header */
.machine-select {
  flex: 1;
  min-width: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolyline points='0,0 5,5.5 10,0' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 10px 6px;
  border: none;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 18px 0 0;
}
.machine-select option {
  color: #1a1a2e;
  background: #fff;
  font-weight: 500;
}

.section-lbl {
  padding: 3px 12px;
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #3a5568;
  background: #e8f3f8;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Entry row ──────────────────────────────────────────────────────────── */
.entry-row {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.1s;
}
.entry-row:hover { background: #eef6fa; }
.entry-row:last-of-type { border-bottom: none; }

.e-name  { font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1e2d3d; }
.e-meta  { font-size: 0.75rem; color: #3d5a6e; margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.e-hrs   { font-weight: 500; color: #2F4156; }
.e-note  { color: #5a7080; }
.e-empty { padding: 5px 12px; font-size: 0.78rem; color: #6a8090; font-style: italic; }

.add-btn {
  width: 100%;
  padding: 7px;
  border: none;
  border-top: 1px solid var(--border-soft);
  background: #eaf3f8;
  cursor: pointer;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 0 rgba(86,124,141,0.15);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.add-btn:hover  { background: #d8ecf5; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -2px 0 rgba(86,124,141,0.28); }
.add-btn:active { background: #c8e4f0; transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }

/* ── Available / vacancy rows ───────────────────────────────────────────── */
.available-row {
  background: #eafaf1;
  border-left: 3px solid #27ae60;
  cursor: pointer;
}
.available-row:hover { background: #d4f5e3; }
.available-row .vac-name { color: #1a7a45; font-style: italic; }
.available-row .vac-meta { color: #276749; }
.vac-del-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 0.78rem;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.vac-del-btn:hover { color: #e53e3e; }
/* Two-button group at the bottom of a team card */
.add-btn-group {
  display: flex;
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.add-btn-group .add-btn {
  border-top: none;
  flex: 1;
  border-right: 1px solid var(--border-soft);
}
.add-btn-group .add-btn:last-child { border-right: none; }
.add-btn-available { color: #1a7a45 !important; background: #eafaf1 !important; }
.add-btn-available:hover { background: #d4f5e3 !important; }

/* ── Away section ───────────────────────────────────────────────────────── */
.away-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.away-hdr {
  padding: 7px 12px;
  background: #475569;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
}
.away-groups { display: flex; }
.away-group  { flex: 1; border-right: 1px solid var(--border); }
.away-group:last-child { border-right: none; }

.away-entry {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.1s;
}
.away-entry:hover { background: #fafafa; }
.away-entry:last-child { border-bottom: none; }

.badge {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-sick   { background: #fee2e2; color: #b91c1c; }
.badge-annual { background: #dcfce7; color: #166534; }
.badge-other    { background: #fef9c3; color: #854d0e; }
.badge-training  { background: #dbeafe; color: #1e40af; }
.badge-workcover { background: #ede9fe; color: #6d28d9; }
.e-hrs-training  { color: #6b7280; font-style: italic; }

/* ── Away + Paid Hours two-column row ──────────────────────────────────── */
.away-totals-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
  gap: 12px;
  align-items: flex-start;
}
.away-totals-row.no-away {
  grid-template-columns: minmax(260px, 3fr);
  justify-content: end;
}
/* Away staff card (table style) */
.away-tbl-card {
  flex: 1;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.away-tbl-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: #475569;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
}
.away-count-pill {
  font-size: 0.72rem;
  font-weight: 500;
  background: rgba(255,255,255,0.2);
  padding: 1px 8px;
  border-radius: 10px;
}
.away-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.away-tbl thead th {
  text-align: left;
  padding: 5px 12px;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.away-row td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.away-row:last-child td { border-bottom: none; }
.away-row[onclick]       { cursor: pointer; }
.away-row[onclick]:hover td { background: var(--surface-hover, #f8fafc); }
.away-shift-cell { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
/* Paid hours card (right column) */
.away-paid-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
}
.totals-action { margin-top: 10px; }

/* Two-stat layout inside the totals card */
.totals-stats-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.totals-stat {
  display: flex;
  flex-direction: column;
}
.totals-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  align-self: center;
}
.totals-budget-num {
  color: var(--text-muted);
}
/* Diff pill shown in totals-sub */
.totals-vs {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}
.totals-vs-eq   { background: #dcfce7; color: #166534; }
.totals-vs-rem  { background: #dcfce7; color: #166534; }
.totals-vs-over { background: #fee2e2; color: #991b1b; }

/* ── Search bar (Weekly / Hours / Employee) ─────────────────────────────── */
.srch-wrap {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  height: 32px;
  padding: 0 8px;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(47,65,86,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 155px;
  max-width: 210px;
}
.srch-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(86,124,141,0.15);
}
.srch-icon {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.srch-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.83rem;
  color: var(--text);
  min-width: 0;
}
.srch-input::placeholder { color: var(--text-muted); }
.srch-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  padding: 0;
  transition: background 0.1s, color 0.1s;
}
.srch-clear:hover { background: var(--border); color: var(--text); }
/* Employee search bar — sits just above each section */
.emp-srch-bar {
  padding: 6px 20px 0;
  display: flex;
  align-items: center;
}
.emp-srch-bar .srch-wrap { max-width: 240px; }
/* No-results inside a section */
.srch-empty {
  padding: 14px 16px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-style: italic;
  text-align: center;
}
/* Filtered total label in Hours footer */
.hrs-foot-sub {
  font-size: 0.68rem;
  font-weight: 400;
  display: block;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .away-totals-row       { grid-template-columns: 1fr; }
  .away-totals-row.no-away { grid-template-columns: 1fr; }
  .away-paid-card        { width: 100%; }
  /* Daily nav — stack groups vertically on narrow screens */
  .date-bar-daily  { grid-template-columns: 1fr; row-gap: 6px; }
  .date-bar-left   { justify-content: center; flex-wrap: wrap; }
  .date-bar-centre { justify-content: center; flex-wrap: wrap; }
  .date-bar-right  { justify-content: center; flex-wrap: wrap; }
}

/* ── Totals ─────────────────────────────────────────────────────────────── */
.totals-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.totals-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.totals-label { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.totals-big   { font-size: 1.8rem; font-weight: 500; line-height: 1; }
.totals-sub   { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.28);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  position: relative;
  user-select: none;
}
.btn:active { transform: translateY(1px) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important; }

/* Primary — teal */
.btn-primary {
  background: #2F4156;
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover {
  background: #567C8D;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

/* Secondary — dark grey */
.btn-secondary {
  background: #4b5563;
  color: #fff;
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-secondary:hover {
  background: #9ca3af;
  box-shadow: 0 2px 5px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

/* Danger — red */
.btn-danger {
  background: #b71c1c;
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-danger:hover {
  background: #e53935;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 6px 13px;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-sm:hover  { transform: translateY(-1px); }
.btn-sm:active { transform: translateY(1px) !important; }

/* ── Employees page ─────────────────────────────────────────────────────── */
.emp-page { max-width: 960px; width: 100%; }
.page-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.page-hdr h2 { font-size: 1rem; font-weight: 500; }

.emp-add-btns { display: flex; gap: 6px; }

#emp-list { width: 100%; }

.emp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
}

.emp-col {
  background: var(--surface);
  border-radius: 4px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.emp-section-hdr {
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.emp-section-ft  { background: #2F4156; }
.emp-section-mgr { background: #4b5563; }

.emp-hdr-add-btn {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.emp-hdr-add-btn:hover  { background: rgba(255,255,255,0.28); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.16); }
.emp-hdr-add-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.emp-section-cas { background: #567C8D; }

.emp-col-count {
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 1px 8px;
  letter-spacing: 0;
}

.emp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
}
.emp-row:last-child { border-bottom: none; }
.emp-row:hover { background: #fafafa; }
.emp-inactive { opacity: 0.5; }

.emp-name { flex: 1; font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.emp-type-badge {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 10px;
}
.ft-badge  { background: #C8D9E6; color: #2F4156; }
.cas-badge { background: #daeaf2; color: #567C8D; }

.inactive-note { font-size: 0.75rem; color: #ccc; }

.emp-edit-btn {
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  background: #4b5563;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.emp-edit-btn:hover  { background: #9ca3af; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.emp-edit-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.14); }

/* table-layout:fixed + colgroup percentages make every emp-table use identical
   column widths regardless of content — FT, Casual and Management all match. */
.emp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; table-layout: fixed; }
.emp-table th { padding: 6px 8px; text-align: left; font-size: 0.7rem; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; background: #f3f5f7; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.emp-table td { padding: 7px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; overflow: hidden; box-sizing: border-box; }
.emp-table tr:last-child td { border-bottom: none; }
.emp-table tr:hover td { background: #eef6fa; }
/* Name and machine can be long — clip with ellipsis rather than expanding the column */
.emp-tbl-name { font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.emp-tbl-shift { color: #6b7280; font-size: 0.82rem; white-space: nowrap; overflow: hidden; }
.emp-tbl-date  { color: #6b7280; font-size: 0.82rem; white-space: nowrap; overflow: hidden; }
.emp-new-badge { display:inline-block; margin-left:6px; padding:1px 6px; background:#16a34a; color:#fff; font-size:0.68rem; font-weight:700; border-radius:3px; vertical-align:middle; letter-spacing:0.04em; line-height:1.5; }
.entry-cancelled-badge { display:inline-block; margin-left:6px; padding:1px 6px; background:#991b1b; color:#fff; text-transform:uppercase; font-size:0.68rem; font-weight:700; border-radius:3px; vertical-align:middle; letter-spacing:0.04em; line-height:1.5; }
.entry-leave-warn { display:inline-block; margin-left:6px; padding:1px 6px; background:#b45309; color:#fff; font-size:0.68rem; font-weight:700; border-radius:3px; vertical-align:middle; letter-spacing:0.04em; line-height:1.5; }
.entry-row.is-cancelled { opacity:0.55; }
.entry-row.is-cancelled .e-hrs { display:none; }
.wk-emp-cancelled { opacity:0.55; }
.wk-cancelled-lbl { font-size:0.7rem; color:#b71c1c; font-style:normal; font-weight:700; text-transform:uppercase; margin-left:4px; letter-spacing:0.04em; }
.checkbox-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:0.88rem; font-weight:500; color:#2f4156; }
.cancel-shift-banner-inner { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; background:#fffbeb; border:1.5px solid #f59e0b; border-radius:7px; padding:9px 12px; margin-top:12px; margin-bottom:0; }
.cancel-shift-icon { font-size:1.15rem; color:#d97706; flex-shrink:0; }
.cancel-shift-text { flex:1; font-size:0.85rem; color:#92400e; font-weight:500; }
.btn-cancel-shift { background:#b71c1c; color:#fff; border-color:rgba(255,255,255,0.22); box-shadow:0 1px 3px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12); white-space:nowrap; }
.btn-cancel-shift:hover { background:#e53935; box-shadow:0 2px 5px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.15); transform:translateY(-1px); }
.btn-restore-shift { background:#4b5563; color:#fff; border-color:rgba(255,255,255,0.18); box-shadow:0 1px 3px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.1); white-space:nowrap; }
.btn-restore-shift:hover { background:#9ca3af; box-shadow:0 2px 5px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.15); transform:translateY(-1px); }
.emp-tbl-machine { color: #6b7280; font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
/* Width now comes from <colgroup> — remove hard-coded pixel width */
.emp-tbl-action { text-align: right; padding-right: 10px; white-space: nowrap; overflow: visible; }

/* ── Sortable column headers ────────────────────────────────────────────────── */
.emp-th-sort {
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.emp-th-sort:hover { color: var(--accent-dark); background: #e8eef4; }
.sort-col-active { color: var(--accent-dark) !important; }
.sort-arrow { font-size: 0.65rem; opacity: 0.35; margin-left: 3px; }
.sort-arrow-active { opacity: 1; color: var(--accent-dark); }
.emp-edit-active { background: #e0e7ef !important; color: var(--accent-dark) !important; }

/* ── Cell-level inline preference editing ────────────────────────────────────── */
.emp-cell-edit {
  cursor: pointer;
  transition: background 0.12s;
}
.emp-cell-edit:hover {
  background: #e8eef4;
  color: var(--accent-dark);
}
/* Position:relative turns the cell into a containing block for the absolute select.
   No padding or size changes — the cell keeps its natural dimensions. */
.emp-cell-editing {
  position: relative;
}
/* The select is absolutely positioned so it sits ON TOP of the cell without
   contributing any height to the layout. The native dropdown opens outside
   the cell's flow, so nothing below shifts. */
.emp-cell-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0.82rem;
  padding: 0 6px;
  border: 2px solid var(--accent-dark);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
  z-index: 10;
  margin: 0;
  -webkit-appearance: auto;
  appearance: auto;
}

/* ── Admin page ─────────────────────────────────────────────────────────── */
.admin-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-card-title {
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  background: #f8f9fb;
  border-bottom: 1px solid var(--border);
}

.admin-card > *:not(.admin-card-title) {
  padding: 14px 16px;
}

.admin-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.admin-team-row:last-child { border-bottom: none; }

.admin-team-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-team-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.86rem;
  color: var(--text);
  background: var(--surface);
  transition: border 0.15s, box-shadow 0.15s;
}
.admin-team-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
}
.admin-team-input.saved {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.14);
}

/* ── Weekly grid ────────────────────────────────────────────────────────── */
.wk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: start;
}

.wk-day {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.wk-today { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.25), var(--shadow); }

.wk-day-hdr {
  padding: 6px 10px;
  background: #334155;
  color: #fff;
  text-align: center;
}
.wk-today-hdr { background: var(--accent); }

.wk-dayname {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.wk-daydate {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
}

.wk-day-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.wk-team-block {
  border-radius: 5px;
  overflow: hidden;
}

.wk-team-lbl {
  padding: 3px 8px;
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* colour is set inline per team */
}

.wk-emp {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 3px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

.wk-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wk-name {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.wk-h {
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.wk-away {
  padding: 2px 8px;
  font-size: 0.68rem;
  color: #9ca3af;
  font-style: italic;
}

.wk-empty {
  padding: 10px 8px;
  font-size: 0.75rem;
  color: #d1d5db;
  text-align: center;
  font-style: italic;
}

.wk-day-foot {
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  background: #f8f9fb;
  border-top: 1px solid var(--border-soft);
  text-align: right;
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-main {
  padding: 20px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-hdr {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-title { font-size: 1.15rem; font-weight: 700; }
.dash-date  { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }

/* ── Dashboard title banner ─────────────────────────────────────────── */
.dash-title-banner {
  background: var(--navy);
  border-radius: 10px;
  padding: 18px 22px 16px;
}
.dash-banner-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 3px;
}
.dash-banner-date {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.70);
  font-weight: 400;
}

/* ── Dashboard 3-col overview (KPI left + chart right) ──────────────── */
.dash-overview {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  grid-template-rows: auto auto;
  gap: 10px;
  align-items: stretch;
}
.dash-overview .kpi-card {
  /* stretch is now the grid default */
}
.dash-week-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  min-width: 0;
  grid-column: 3;
  grid-row: 1 / span 2;
}

/* Alert strip */
.dash-alerts { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 5px;
  font-size: 0.75rem; font-weight: 500; line-height: 1.3;
}
.dash-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dash-chip.warn { background: #fef3c7; color: #92400e; }
.dash-chip.ok   { background: #dcfce7; color: #15803d; }

/* Stat tiles */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.dash-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px 12px;
}
.dt-lbl {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted); margin-bottom: 7px;
}
.dt-val {
  font-size: 2rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.dt-val.warn { color: #b45309; }
.dt-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }

/* Shift cards */
.dash-shifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dash-shift-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.dsc-hdr {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.dsc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dsc-name { font-size: 0.82rem; font-weight: 700; flex: 1; }
.dsc-time { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }
.dsc-count { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dsc-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.dsc-role { display: flex; align-items: flex-start; gap: 8px; }
.dsc-rlbl {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); width: 82px; flex-shrink: 0; padding-top: 1px;
}
.dsc-rname { font-size: 0.82rem; font-weight: 500; }
.dsc-rgap  { font-size: 0.78rem; font-weight: 500; color: #b45309; }
.dsc-hr    { height: 1px; background: var(--border); }
.dsc-machines { display: flex; flex-wrap: wrap; gap: 4px; }
.dsc-chip {
  font-size: 0.7rem; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; background: var(--bg); color: var(--text-secondary);
}

/* ── New shift card design (dsc2) ────────────────────────────────────────── */
.dsc2-card {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  overflow: hidden;
  flex: 1;
  min-width: 240px;
}
.dsc2-hdr {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dsc2-hdr-left { display: flex; flex-direction: column; gap: 2px; }
.dsc2-shift-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
.dsc2-shift-time { font-size: 0.7rem; color: rgba(255,255,255,0.78); }
.dsc2-hdr-right { display: flex; gap: 18px; }
.dsc2-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dsc2-stat-val {
  font-size: 1.35rem; font-weight: 700; color: #fff;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.dsc2-stat-val.dsc2-stat-warn { color: #fde68a; }
.dsc2-stat-lbl {
  font-size: 0.6rem; color: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dsc2-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 0; }
.dsc2-role-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
}
.dsc2-role-lbl {
  font-size: 0.62rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; padding-right: 8px;
}
.dsc2-role-name { font-size: 0.82rem; font-weight: 500; text-align: right; }
.dsc2-role-unassigned { font-size: 0.78rem; color: #d97706; text-align: right; }
.dsc2-divider { height: 1px; background: var(--border); margin: 10px 0 8px; }
.dsc2-machines { display: flex; flex-direction: column; gap: 4px; }
.dsc2-machine-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 8px;
  border-radius: 5px;
  border-left: 3px solid #9ca3af;
  background: var(--bg);
}
.dsc2-machine-row.dsc2-machine-offline { opacity: 0.45; }
.dsc2-machine-name { font-size: 0.78rem; color: var(--text); font-weight: 500; }
.dsc2-machine-count {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dsc2-machine-status { font-size: 0.72rem; color: var(--text-muted); font-style: italic; }

/* Bottom: chart only (full width) */
.dash-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.dash-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.dash-card-lbl {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted); margin-bottom: 14px;
}
#dash-week-canvas { display: block; width: 100%; height: 220px; }
/* inside .dash-week-card the canvas fills remaining space */
.dash-week-card #dash-week-canvas { height: 220px; min-height: 160px; }

/* Pool breakdown */
.dash-pool-items { display: flex; flex-direction: column; gap: 15px; }
.dash-pool-item {}
.dpi-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dpi-lbl  { font-size: 0.82rem; font-weight: 600; }
.dpi-cnt  { font-size: 0.75rem; color: var(--text-muted); }
.dpi-track { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.dpi-fill  { height: 100%; border-radius: 4px; }
.dpi-sub   { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); }

/* Dashboard loading */
.dash-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; font-size: 0.9rem; color: var(--text-muted);
}

/* ── KPI cards (Industrial Navy) ─────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-items: stretch;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.kpi-left {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 14px 16px 18px;
  min-width: 0;
}
.kpi-icon {
  width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.kpi-icon-blue   { background: rgba(25,118,200,0.12); color: var(--day-blue); }
.kpi-icon-orange { background: rgba(232,111,0,0.12);  color: var(--afternoon-orange); }
.kpi-icon-ft  { background: rgba(25,118,200,0.12); color: #1565c0; }
.kpi-icon-cas { background: rgba(5,150,105,0.12);  color: #059669; }
.kpi-value-sm { font-size: 1.4rem; }
.kpi-breakdown-sm { gap: 2px; }

/* Left-column stack for dashboard overview */
.dash-left-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  align-self: stretch;
}
.kpi-info { flex: 1; min-width: 0; }
.kpi-label {
  font-size: 0.63rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); margin-bottom: 3px;
}
.kpi-value {
  font-size: 2rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--navy);
}
.kpi-value.warn { color: var(--danger); }
.kpi-sub { font-size: 0.7rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.kpi-breakdown {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 1px solid var(--border);
  padding: 16px 14px 16px 14px;
  align-self: stretch;
  justify-content: center;
}
.kpi-bd-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; white-space: nowrap;
}
.kpi-dot {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.kpi-dot-day  { background: var(--day-blue); }
.kpi-dot-aft  { background: var(--afternoon-orange); }
.kpi-dot-ngt  { background: var(--night-indigo); }
.kpi-bd-lbl { color: var(--muted); flex: 1; }
.kpi-bd-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); min-width: 22px; text-align: right; }

/* ── Shift cards (sc-* Industrial Navy) ──────────────────────────────── */
.sc-card {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sc-hdr {
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  color: #fff;
}
.sc-hdr-day   { background: var(--day-blue); }
.sc-hdr-aft   { background: var(--afternoon-orange); }
.sc-hdr-ngt   { background: var(--night-indigo); }
.sc-hdr-left  { display: flex; flex-direction: column; gap: 2px; }
.sc-name  { font-size: 0.88rem; font-weight: 700; color: #fff; }
.sc-time  { font-size: 0.68rem; color: rgba(255,255,255,0.76); }
.sc-hdr-right { display: flex; gap: 16px; }
.sc-stat  { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sc-stat-val  {
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
}
.sc-stat-val.warn { color: #fde68a; }
.sc-stat-lbl  {
  font-size: 0.58rem; color: rgba(255,255,255,0.72);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.sc-body  { padding: 12px 14px; display: flex; flex-direction: column; gap: 0; }
.sc-role-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0;
}
.sc-role-lbl {
  font-size: 0.6rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; padding-right: 8px;
}
.sc-role-name       { font-size: 0.8rem; font-weight: 500; text-align: right; }
.sc-role-unassigned { font-size: 0.76rem; color: var(--warning); text-align: right; }
.sc-divider { height: 1px; background: var(--border); margin: 9px 0 7px; }
/* Machine table */
.sc-machine-tbl {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.sc-machine-tbl thead tr th {
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); padding: 0 4px 5px;
  border-bottom: 1px solid var(--border); text-align: left;
}
.sc-machine-tbl thead tr th:last-child { text-align: right; }
.sc-mrow td {
  padding: 4px 4px;
  background: var(--row-tint, transparent);
}
.sc-mname {
  display: flex; align-items: center; gap: 7px;
  font-weight: 500; color: var(--text);
}
.sc-color-dot {
  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
}
.sc-mcount {
  text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--navy);
}
.sc-moffline { color: var(--muted); font-style: italic; text-align: right; font-size: 0.72rem; }
.sc-no-machines { font-size: 0.74rem; color: var(--muted); padding: 4px 0; font-style: italic; }

/* Responsive */
@media (max-width: 900px) {
  .dash-shifts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kpi-grid      { grid-template-columns: 1fr; }
  .dash-overview { grid-template-columns: 1fr; grid-template-rows: none; }
  .dash-week-card { grid-column: auto; grid-row: auto; }
}
@media (max-width: 480px) {
  .dash-main { padding: 12px 10px 24px; gap: 12px; }
}

/* ── Dashboard placeholder ───────────────────────────────────────────────── */
.dashboard-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.dashboard-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
}
.dashboard-placeholder-inner svg { opacity: 0.3; }
.dashboard-placeholder-inner p { font-size: 0.9rem; font-weight: 500; opacity: 0.6; }

/* ── Weekly shift sub-sections ──────────────────────────────────────────── */
.wk-shift-section { margin-bottom: 4px; }
.wk-shift-section:last-child { margin-bottom: 0; }
.wk-shift-hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
}
.wk-shift-name {
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.95);
}
.wk-shift-time {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.65);
  font-family: 'SF Mono', 'Consolas', monospace;
  margin-left: auto;
}
.wk-shift-body { padding: 2px 0; }

/* ── Hours table ────────────────────────────────────────────────────────── */
.hrs-wrap {
  overflow-x: auto;
}

.hrs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hrs-table th,
.hrs-table td {
  padding: 8px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  white-space: nowrap;
}

.hrs-table th:last-child,
.hrs-table td:last-child { border-right: none; }

.hrs-table th {
  background: #334155;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hrs-name-col {
  text-align: left !important;
  font-weight: 500;
  color: var(--text);
  min-width: 140px;
}

.hrs-date { }

.hrs-group-hdr td {
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  background: #2F4156;
}

.hrs-today-col { background: #e8f3f8 !important; }
th.hrs-today-col { background: var(--accent) !important; }

.hrs-rowtotal {
  font-weight: 500;
  color: #2F4156;
  background: #e8f3f8 !important;
}

.hrs-coltotal {
  font-weight: 500;
  color: #2F4156;
  background: #e8f3f8 !important;
}

.hrs-nil { color: #d1d5db; }
.hrs-status-lbl { display:inline-block; padding:1px 6px; border-radius:3px; font-size:0.68rem; font-weight:700; letter-spacing:0.04em; line-height:1.5; }
.hrs-status-cancelled { background:#991b1b; color:#fff; text-transform:uppercase; }

.hrs-table tfoot tr { background: #f8f9fb; }
.hrs-foot-lbl {
  text-align: left !important;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ── Non-Working Hours table (ft-hours page) ─────────────────────────────── */
.hrs-nw-wrap {
  margin-top: 24px;
}

.hrs-nw-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 8px 0;
}

.hrs-nw-missing {
  color: #9ca3af;
  font-size: 0.72rem;
  cursor: help;
}

/* ── Machine Hours table ─────────────────────────────────────────────────── */
.mhrs-wrap { overflow-x: auto; }

.mhrs-table { width: 100%; }

.mhrs-table th,
.mhrs-table td { text-align: center; }

.mhrs-name-col { text-align: left !important; min-width: 180px; }

/* Machine group header row */
.mhrs-machine-hdr td {
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 2px solid transparent;
}

/* Per-shift sub-row */
.mhrs-shift-row { }
.mhrs-shift-label {
  text-align: left !important;
  font-size: 0.78rem;
  font-weight: 500;
  padding-left: 20px !important;
  white-space: nowrap;
}
.mhrs-machine-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}
.mhrs-shift-cell { font-size: 0.82rem; }

/* Team total row */
.mhrs-total-row { }
.mhrs-total-label {
  text-align: left !important;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding-left: 20px !important;
}

/* Today column highlight */
.mhrs-today-col { background: #e8f3f8 !important; }
th.mhrs-today-col { background: var(--accent) !important; }

/* Row/col totals */
.mhrs-rowtotal { font-weight: 600; color: #2F4156; }
.mhrs-coltotal { font-weight: 500; color: #2F4156; background: #e8f3f8 !important; }

/* Grand total footer */
.mhrs-grand-row { background: #f1f5f9 !important; }
.mhrs-grand-label {
  text-align: left !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.mhrs-grand-cell { font-weight: 700; background: #d9e9f5 !important; }

/* ── Shift sections ──────────────────────────────────────────────────────── */
#home-body { display: flex; flex-direction: column; gap: 20px; }

.shift-section { display: flex; flex-direction: column; gap: 0; }

.shift-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 0.88rem;
}

.shift-name { font-weight: 500; letter-spacing: 0.02em; font-size: 1.05rem; }
.shift-time { font-size: 0.88rem; opacity: 0.65; margin-left: 4px; font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.04em; }

.shift-badge {
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}

.shift-empty-badge { opacity: 0.55; font-weight: 400; }

/* ── Shift leadership dropdowns ─────────────────────────────────────────── */
.shift-leadership {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
}

.shift-role-lbl {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}

.shift-role-select {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4px;
  color: #fff;
  padding: 2px 20px 2px 6px;
  height: 26px;
  cursor: pointer;
  max-width: 160px;
  min-width: 90px;
  appearance: auto;
  flex-shrink: 1;
}

.shift-role-select:focus {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 1px;
}

.shift-role-select option {
  background: #2d2d2d;
  color: #fff;
}

.shift-role-select:disabled {
  opacity: 0.6;
  cursor: default;
}

.shift-badge {
  margin-left: 10px;
  flex-shrink: 0;
}

/* ── Loading / misc ─────────────────────────────────────────────────────── */
.loading-msg {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal {
  background: var(--surface);
  border-radius: 10px;
  padding: 28px;
  width: 440px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}

.modal h2 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.3;
}
.label-hint { font-weight: 400; color: #aaa; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  line-height: 1.4;
  transition: border 0.15s, box-shadow 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(86,124,141,0.15);
}
.form-group select:disabled {
  background: var(--bg);
  color: var(--text-muted);
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
  box-shadow: none;
}

.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* Shift presets */
.preset-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.preset-btn {
  padding: 6px 13px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  background: #4b5563;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: background 0.1s, box-shadow 0.12s, transform 0.08s;
  user-select: none;
}
.preset-btn:hover  { background: #9ca3af; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }
.preset-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
.preset-btn.active { background: #2F4156; color: #fff; border-color: rgba(255,255,255,0.22); box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12); }
.preset-btn.active:hover { background: #567C8D; box-shadow: 0 2px 5px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.15); transform: translateY(-1px); }
/* When one preset is active, dim the others — still clickable */
.preset-btns.has-active .preset-btn:not(.active) {
  background: #374151;
  opacity: 0.42;
  box-shadow: none;
  transform: none;
}
.preset-btns.has-active .preset-btn:not(.active):hover {
  opacity: 0.72;
  background: #4b5563;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

.hours-preview {
  font-size: 0.82rem;
  font-weight: 500;
  color: #567C8D;
  min-height: 18px;
  margin: -8px 0 10px;
}

.check-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.check-group input  { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.check-group label  { margin: 0; font-size: 0.88rem; color: var(--text); cursor: pointer; font-weight: 500; line-height: 1.3; }

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 0;
}
.modal-actions .btn-danger { margin-right: auto; }

/* ── Modal header / body / footer variants ──────────────────────────────── */
.modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.modal-hdr h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 26px;
  padding-top: 4px;
}
.modal-footer .btn-danger { margin-right: auto; }
.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--text-muted);
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}
.close-btn:hover { color: var(--text); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ── Backup section ─────────────────────────────────────────────────────── */
.backup-section {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.backup-title {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.backup-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.backup-import-lbl {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.backup-hint {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Print ──────────────────────────────────────────────────────────────── */
.no-print { }

@media print {
  .wk-team-block { border: 1px solid #e2e8f0 !important; }
  .no-print,
  .sidebar,
  .add-btn,
  .modal-actions,
  .overlay,
  .backup-section,
  .emp-page .page-hdr .btn { display: none !important; }

  body { background: #fff; font-size: 12px; height: auto; overflow: visible; }

  .app-shell { height: auto; }
  .app-body  { display: block; }
  .content   { overflow: visible; }

  #page-home { display: block !important; }
  .special-grid { grid-template-columns: repeat(3, 1fr); }
  .shift-hdr {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .shift-role-select { display: none; }
  .shift-leadership::before {
    content: attr(data-print);
    color: rgba(255,255,255,0.9);
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .app-header {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none;
    border-bottom: 2px solid #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .app-title { color: #000 !important; font-size: 1rem; }

  .date-bar {
    border-bottom: 1px solid #ccc;
    padding: 4px 12px;
  }
  .date-label { font-size: 0.95rem; }
  /* Daily nav print — collapse grid so only date-label shows, centred */
  .date-bar-daily  { display: block !important; }
  .date-bar-centre { display: flex !important; justify-content: center; }

  .main { padding: 8px 12px; gap: 8px; }

  .team-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .team-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
  .team-grid.cols-8 { grid-template-columns: repeat(8, 1fr); }

  .team-card {
    box-shadow: none;
    break-inside: avoid;
    border: 1px solid #ccc;
  }

  .team-hdr {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .entry-row { cursor: default; break-inside: avoid; }
  .entry-row:hover { background: transparent; }

  .shift-body { box-shadow: none; border: 1px solid #ccc; }
  .shift-body .team-card { border-right-color: #ccc; border-bottom-color: #ccc; }
  .shift-divider { background: #f0f0f0; border-top-color: #aaa; border-bottom-color: #ccc; }

  .away-card     { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .away-tbl-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .away-row[onclick]       { cursor: default; }
  .away-row[onclick]:hover td { background: transparent; }
  .away-totals-row  { flex-direction: column; gap: 6px; }
  .away-paid-card   { min-width: unset; width: 100%; }
  .totals-action    { margin-top: 6px; }
  .away-entry { cursor: default; }
  .away-entry:hover { background: transparent; }

  .totals-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ── Auth screens ───────────────────────────────────────────────────────────── */
.auth-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: #1e2d3d;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.auth-card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.45);
  padding: 44px 40px 40px; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 0;
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-bottom: 36px;
}
.auth-logo { width: 120px; height: auto; object-fit: contain; }
.auth-brand-title {
  font-size: 0.78rem; font-weight: 500; color: #567C8D;
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  white-space: nowrap;
}
.auth-heading {
  font-size: 1.35rem; font-weight: 700; color: #1e2d3d;
  margin: 0 0 24px; text-align: center; letter-spacing: -0.01em;
}
.auth-sub {
  font-size: 0.85rem; color: #6b7280; text-align: center; margin: 0 0 24px; line-height: 1.5;
}
.auth-error {
  background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c;
  border-radius: 6px; padding: 10px 14px; font-size: 0.87rem;
  margin-bottom: 16px; line-height: 1.4;
}
/* icon + input wrapper */
.auth-field-wrap {
  position: relative; margin-bottom: 16px;
}
.auth-field-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: #9ca3af; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.auth-field-icon svg { width: 17px; height: 17px; }
.auth-field-wrap input {
  width: 100%; box-sizing: border-box;
  padding: 12px 44px 12px 42px;
  border: 1.5px solid #d1d5db; border-radius: 9px; font-size: 0.95rem;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  color: #1e2d3d; background: #f9fafb;
}
.auth-field-wrap input:focus {
  border-color: #567C8D; box-shadow: 0 0 0 3px rgba(86,124,141,0.15);
  background: #fff;
}
.auth-eye-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: #9ca3af; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: color 0.15s;
}
.auth-eye-btn svg { width: 17px; height: 17px; }
.auth-eye-btn:hover { color: #2F4156; }
/* remember + forgot row */
.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; gap: 8px;
}
.auth-remember {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.85rem; color: #374151; cursor: pointer; user-select: none;
}
.auth-remember input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: #567C8D; cursor: pointer; flex-shrink: 0;
}
.auth-forgot {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 0.85rem; color: #567C8D; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s;
}
.auth-forgot:hover { color: #2F4156; text-decoration: underline; }
.auth-btn {
  width: 100%; padding: 14px;
  font-size: 0.95rem; letter-spacing: 0.06em; border-radius: 9px;
}

/* ── Header user section ────────────────────────────────────────────────────── */
.header-user-section {
  margin-left: auto; display: flex; align-items: center; gap: 10px; padding-right: 4px;
  flex-wrap: wrap;
}
.header-account-group {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 7px;
  padding: 4px 10px; white-space: nowrap;
  /* button reset + interactive treatment */
  font: inherit; cursor: pointer;
  transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
}
.header-account-group:hover {
  background: var(--surface-hover, #f0f4ff); border-color: var(--navy, #1e3a5f);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.header-account-group:focus-visible {
  outline: 2px solid var(--navy, #1e3a5f); outline-offset: 2px;
}
.header-username { font-size: 0.88rem; font-weight: 500; color: var(--text); }
.badge-role {
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 9px; border-radius: 20px; background: var(--border); color: var(--text-muted);
}
.role-badge-admin      { background: #fef3c7; color: #92400e; }
.role-badge-supervisor { background: #d1fae5; color: #065f46; }
.role-badge-viewer     { background: #f3f4f6; color: #6b7280; }
.role-badge-agency     { background: #e0e7ff; color: #3730a3; }
.header-logout {
  font-size: 0.82rem; color: var(--navy); padding: 5px 12px;
  border: 1.5px solid var(--navy); border-radius: 6px;
  background: none; cursor: pointer; font-weight: 500; transition: background 0.15s, color 0.15s;
}
.header-logout:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Role-based visibility ──────────────────────────────────────────────────── */
body.role-viewer .editor-only { display: none !important; }
body.role-agency .editor-only { display: none !important; }
/* casual-editor-only: visible to admin, supervisor, AND agency; hidden only for viewer */
body.role-viewer .casual-editor-only { display: none !important; }

/* ── Admin / User Management ────────────────────────────────────────────────── */
.admin-section {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  overflow: hidden; max-width: 860px;
}
.admin-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--accent-dark); /* navy header like team-hdr */
  color: #fff;
}
.admin-section-hdr h2 { margin: 0; font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: 0.02em; }
.admin-section-hdr .btn {
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
}
.admin-section-hdr .btn:hover { background: rgba(255,255,255,0.3); }
.users-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.users-table th {
  background: #f4f6f8; font-size: 0.73rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); padding: 9px 16px;
  text-align: left; border-bottom: 1px solid var(--border);
}
.users-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover td { background: #f8fbfd; }
.users-table-self td { background: #eef5ff; }
.users-table-date { color: var(--text-muted); font-size: 0.82rem; }
.self-badge {
  font-size: 0.7rem; font-weight: 500; background: #dbeafe; color: #1d4ed8;
  padding: 1px 6px; border-radius: 10px; margin-left: 4px; vertical-align: middle;
}
.role-chip {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 20px;
}
.role-chip-admin      { background: #fef3c7; color: #92400e; }
.role-chip-supervisor { background: #d1fae5; color: #065f46; }
.role-chip-viewer     { background: #f3f4f6; color: #6b7280; }
.role-chip-agency     { background: #e0e7ff; color: #3730a3; }
.status-active   { color: #16a34a; font-weight: 500; font-size: 0.85rem; }
.status-inactive { color: #9ca3af; font-weight: 500; font-size: 0.85rem; }
.btn-link {
  background: none; border: none; color: #567C8D; font-size: 0.85rem;
  font-weight: 500; cursor: pointer; padding: 2px 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.btn-link:hover { color: #2F4156; }

/* ── Mobile / small-screen ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .shift-hdr {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .shift-leadership {
    margin-left: 0;
    width: 100%;
    order: 3; /* push below name/time row */
    flex-wrap: wrap;
    gap: 4px;
  }
  .shift-badge {
    order: 2;
    margin-left: auto;
  }
  .shift-role-select {
    max-width: 140px;
  }

  .modal {
    padding: 20px 16px 16px;
    width: 100%;
    max-width: 100vw;
    border-radius: 10px 10px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 88vh;
  }

  .overlay {
    align-items: flex-end;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .modal-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-actions .btn,
  .modal-actions .btn-sm {
    flex: 1 1 auto;
    min-width: 90px;
  }

  .modal-actions .btn-danger {
    flex-basis: 100%;
    margin-right: 0;
    order: 3;
  }

  .auth-card {
    padding: 32px 24px 28px;
    border-radius: 12px;
    max-width: 95vw;
  }
  .auth-logo { width: 90px; height: auto; }
  .auth-brand-title { white-space: normal; font-size: 0.72rem; letter-spacing: 0.08em; }

  .preset-btns { gap: 5px; }
  .preset-btn  { padding: 5px 10px; }
  #weekly-toolbar { padding: 8px 12px; grid-template-columns: 1fr; row-gap: 8px; }
  #weekly-toolbar .wk-left   { flex-wrap: wrap; justify-content: center; }
  #weekly-toolbar .wk-center { flex-wrap: wrap; justify-content: center; }
  #weekly-toolbar .wk-right  { display: none; }
  #weekly-week-input { min-width: 116px; }
  #hours-toolbar,
  #ft-hours-toolbar,
  #cas-hours-toolbar,
  #machine-hours-toolbar,
  #lskg-toolbar { padding: 8px 12px; grid-template-columns: 1fr; row-gap: 8px; }
  #hours-toolbar .wk-left,
  #ft-hours-toolbar .wk-left,
  #cas-hours-toolbar .wk-left,
  #machine-hours-toolbar .wk-left,
  #hours-toolbar .wk-center,
  #ft-hours-toolbar .wk-center,
  #cas-hours-toolbar .wk-center,
  #machine-hours-toolbar .wk-center,
  #hours-toolbar .wk-right,
  #ft-hours-toolbar .wk-right,
  #cas-hours-toolbar .wk-right,
  #machine-hours-toolbar .wk-right,
  #shared-hours-week-input,
  #hours-week-input,
  #ft-hours-week-input,
  #cas-hours-week-input,
  #machine-hours-week-input { min-width: 116px; }
}

/* Hours toolbar — same 3-area grid as weekly toolbar */
#hours-nav-shell,
#hours-toolbar,
#ft-hours-toolbar,
#cas-hours-toolbar,
#machine-hours-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 72px;
}

/* Native week picker for hours — same style as weekly */
#shared-hours-week-input,
#hours-week-input,
#ft-hours-week-input,
#cas-hours-week-input,
#machine-hours-week-input {
  height: 32px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(47,65,86,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
#shared-hours-week-input:hover,
#hours-week-input:hover,
#ft-hours-week-input:hover,
#cas-hours-week-input:hover,
#machine-hours-week-input:hover { border-color: var(--accent); }
#shared-hours-week-input:focus,
#hours-week-input:focus,
#ft-hours-week-input:focus,
#cas-hours-week-input:focus,
#machine-hours-week-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(86,124,141,0.15);
}
#shared-hours-week-input::-webkit-calendar-picker-indicator,
#hours-week-input::-webkit-calendar-picker-indicator,
#ft-hours-week-input::-webkit-calendar-picker-indicator,
#cas-hours-week-input::-webkit-calendar-picker-indicator,
#machine-hours-week-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: invert(47%) sepia(22%) saturate(500%) hue-rotate(162deg) brightness(88%);
}
#shared-hours-week-input::-webkit-calendar-picker-indicator:hover,
#hours-week-input::-webkit-calendar-picker-indicator:hover,
#ft-hours-week-input::-webkit-calendar-picker-indicator:hover,
#cas-hours-week-input::-webkit-calendar-picker-indicator:hover,
#machine-hours-week-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

@media (max-width: 480px) {
  #hours-nav-shell,
  #hours-toolbar,
  #ft-hours-toolbar,
  #cas-hours-toolbar,
  #machine-hours-toolbar,
  #lskg-toolbar { padding: 8px 12px; gap: 8px; }
  #hours-week-input,
  #ft-hours-week-input,
  #cas-hours-week-input,
  #machine-hours-week-input { min-width: 116px; }
}

/* ── Employee modal context banner ──────────────────────────────────────────── */
.emp-modal-context {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-dark, #2563eb);
  background: color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.01em;
}
.emp-modal-context[data-type="casual"] {
  color: #7c3aed;
  background: rgba(124,58,237,0.07);
  border-color: rgba(124,58,237,0.2);
}

/* ── Nav flyout icons ────────────────────────────────────────────────────────── */
.flyout-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
  opacity: 0.75;
}
.nav-flyout-item {
  display: flex;
  align-items: center;
}

/* ── User form field hints ───────────────────────────────────────────────────── */
.field-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ── Users table username column ─────────────────────────────────────────────── */
.users-table-uname {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
}

/* ── Backup & Restore section ───────────────────────────────────────────────── */
.backup-body {
  padding: 0;
}
.backup-row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 20px;
  flex-wrap: wrap;
}
.backup-row + .backup-row { border-top: 1px solid var(--border-soft); }
.backup-info { flex: 1; min-width: 200px; }
.backup-info-title {
  font-weight: 600; font-size: 0.9rem; margin: 0 0 6px;
}
.backup-info-desc {
  font-size: 0.84rem; color: var(--text-muted); margin: 0 0 4px; line-height: 1.5;
}
.backup-info-desc:last-child { margin-bottom: 0; }
.backup-action-btn {
  flex-shrink: 0; align-self: center; white-space: nowrap;
}
.backup-divider {
  border: none; border-top: 1px solid var(--border-soft); margin: 0;
}
/* Confirmation panel */
.backup-confirm-panel {
  margin: 0 20px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.backup-confirm-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: #f4f6f8;
  border-bottom: 1px solid var(--border);
  font-weight: 500; font-size: 0.88rem;
}
.backup-confirm-title { font-weight: 600; font-size: 0.88rem; }
.backup-confirm-body { padding: 16px; }
.backup-confirm-actions {
  display: flex; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  background: #f9fafb;
}
/* Meta row (file / date / server) */
.bk-meta {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 12px; margin-bottom: 14px; font-size: 0.84rem;
}
.bk-meta-lbl { color: var(--text-muted); font-weight: 500; }
/* Section table inside confirm/result panels */
.bk-sections-table {
  width: 100%; border-collapse: collapse; font-size: 0.84rem; margin-bottom: 12px;
}
.bk-sections-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.bk-sections-table td:first-child {
  color: var(--text-muted); width: 180px; white-space: nowrap;
}
.bk-sections-table tr:last-child td { border-bottom: none; }
.bk-row-preserved td { color: var(--text-muted); }
.bk-preserved { color: var(--text-muted); font-style: italic; }
/* Notes */
.bk-note {
  font-size: 0.82rem; color: var(--text-muted);
  margin: 8px 0 0; line-height: 1.5;
}
.bk-warn { color: #92400e; }
/* Recovery backup path */
.bk-recovery {
  font-size: 0.82rem; color: var(--text-muted); margin: 6px 0;
}
.bk-recovery code {
  font-family: ui-monospace, monospace; font-size: 0.8rem;
  background: #f4f6f8; padding: 1px 5px; border-radius: 3px;
}
/* Status panel */
.backup-status {
  margin: 0 20px 20px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  border: 1px solid transparent;
}
.bk-ok {
  background: #f0fdf4; border-color: #bbf7d0; color: #166534;
}
.bk-err {
  background: #fef2f2; border-color: #fecaca; color: #991b1b;
}
.bk-result-table { margin-top: 10px; }
.bk-result-table td:first-child { color: inherit; }

/* display was previously "contents" unconditionally, which overrides the
   browser's [hidden] { display: none } rule (author beats UA at equal
   specificity) -- Chrome applies that literally so every "hidden" panel's
   child still generated a real flex-participating box; Firefox special-cases
   [hidden] with higher effective precedence, which is why this only showed
   up in Chrome. Only give the panel a box when it is NOT hidden, so [hidden]
   is never fought and inactive panels truly stop generating boxes. */
.shell-right-panel[hidden] { display: none; }
.shell-right-panel:not([hidden]) { display: block; }

/* ── Labour Seconds/KG page ──────────────────────────────────────────────────── */
/* LSKG toolbar — same 3-area grid as hours-toolbar */
#lskg-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 72px;
}
#lskg-week-input {
  height: 32px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(47,65,86,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
#lskg-week-input:hover { border-color: var(--accent); }
#lskg-week-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(86,124,141,0.15);
}
#lskg-week-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: invert(47%) sepia(22%) saturate(500%) hue-rotate(162deg) brightness(88%);
}
#lskg-week-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Page title shown in the right balance column */
.lskg-page-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Import/Export buttons (used in the status strip) */
.lskg-import-btn, .lskg-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--text);
  transition: background 0.15s;
  white-space: nowrap;
}
.lskg-import-btn { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.lskg-import-btn:hover { background: #1e40af; border-color: #1e40af; }
.lskg-export-btn:hover { background: var(--hover); }
.lskg-import-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status strip — file info left, controls right */
#lskg-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 20px;
  background: var(--hover);
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
  gap: 10px;
  flex-wrap: wrap;
  min-height: 36px;
}
.lskg-strip-meta { flex: 1; min-width: 0; }
.lskg-strip-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lskg-strip-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.lskg-strip-delete {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.76rem;
  color: #c0392b;
  cursor: pointer;
  white-space: nowrap;
}
.lskg-strip-delete:hover { background: #ffeaea; }
/* Machine filter inside strip */
.lskg-mfilter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#lskg-machine-select {
  height: 28px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.80rem;
  cursor: pointer;
}

/* KPI row */
.lskg-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 700px) { .lskg-kpi-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .lskg-kpi-row { grid-template-columns: 1fr; } }

.lskg-kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 14px;
}
.lskg-kpi-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lskg-kpi-icon svg { width: 22px; height: 22px; display: block; }
.lskg-kpi-icon-blue   { background: #dbeafe; color: #1d4ed8; }
.lskg-kpi-icon-green  { background: #dcfce7; color: #15803d; }
.lskg-kpi-icon-orange { background: #ffedd5; color: #ea580c; }
.lskg-kpi-icon-purple { background: #ede9fe; color: #7c3aed; }
.lskg-kpi-body { flex: 1; min-width: 0; }
.lskg-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.lskg-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}
.lskg-kpi-unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 3px;
}
.lskg-kpi-card.lskg-status-on-track { border-left: 4px solid #16a34a; }
.lskg-kpi-card.lskg-status-review   { border-left: 4px solid #d97706; }
/* Paired KPI card layout */
.lskg-kpi-card-paired { align-items: flex-start; }
.lskg-kpi-card-paired .lskg-kpi-body { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lskg-kpi-paired {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 2px;
}
.lskg-kpi-pair-item {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}
.lskg-kpi-pair-item:first-child { padding-left: 0; }
.lskg-kpi-pair-item:last-child  { padding-right: 0; }
.lskg-kpi-pair-div {
  width: 1px;
  align-self: stretch;
  background: var(--border-light, #e2e8f0);
  margin: 2px 0;
  flex-shrink: 0;
}
.lskg-kpi-pair-label {
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 3px;
  white-space: nowrap;
}
.lskg-kpi-pair-label-tip { cursor: help; }
.lskg-tip-icon {
  font-size: 0.7rem;
  color: var(--text-muted);
  vertical-align: middle;
  margin-left: 2px;
}
.lskg-kpi-pair-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  white-space: nowrap;
}

/* Wide KPI card — spans 2 of 4 grid columns */
.lskg-kpi-card-wide {
  grid-column: span 2;
  align-items: flex-start;
}
.lskg-kpi-card-wide .lskg-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
/* Responsive: single column stacks wide cards to full width */
@media (max-width: 700px) {
  .lskg-kpi-card-wide { grid-column: span 1; }
}

/* KG variance colour classes */
.lskg-var-over  { color: #2563eb !important; } /* blue  — over plan  */
.lskg-var-under { color: #d97706 !important; } /* amber — under plan */
.lskg-var-on    { color: #16a34a !important; } /* green — on plan   */

/* Budget variance colour classes */
.lskg-bgt-over   { color: #dc2626 !important; } /* red  — over budget     */
.lskg-bgt-remain { color: #2563eb !important; } /* blue — remaining budget */
/* on-budget reuses .lskg-var-on (green) */

/* Table */
.lskg-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.86rem;
  background: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.lskg-table th {
  background: var(--hover);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.lskg-table td {
  padding: 0 12px;
  height: 44px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.lskg-table tbody tr:last-child td { border-bottom: none; }
.lskg-col-num { text-align: right; }
.lskg-table th.lskg-col-num { text-align: right; }
.lskg-col-status { padding-left: 28px !important; }
.lskg-lskg-cell { font-weight: 700; }
.lskg-machine-cell { display: flex; align-items: center; gap: 8px; min-height: 100%; }
.lskg-machine-label { font-weight: 600; }
.lskg-team-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
/* Row tints */
.lskg-row-on-track  { background: rgba(22,163,74,0.05); }
.lskg-row-review    { background: rgba(217,119,6,0.05); }
.lskg-row-no-output { background: rgba(185,28,28,0.05); }
.lskg-row-unmatched  { background: rgba(190,18,60,0.05); }
.lskg-row-zero-hours { background: rgba(37,99,235,0.05); }
.lskg-row-on-track:hover  { background: rgba(22,163,74,0.10); }
.lskg-row-review:hover    { background: rgba(217,119,6,0.10); }
.lskg-row-no-output:hover { background: rgba(185,28,28,0.10); }
.lskg-row-unmatched:hover  { background: rgba(190,18,60,0.10); }
.lskg-row-zero-hours:hover { background: rgba(37,99,235,0.10); }
/* Total row */
.lskg-row-total td { font-weight: 700; border-top: 2px solid var(--border) !important; background: var(--hover); }
/* Section header */
.lskg-section-header {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  padding: 12px 0 8px;
}
/* Status badges with dot */
.lskg-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.lskg-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lskg-status-on-track  { background: #dcfce7; color: #15803d; }
.lskg-status-on-track  .lskg-status-dot { background: #15803d; }
.lskg-status-review    { background: #fef3c7; color: #92400e; }
.lskg-status-review    .lskg-status-dot { background: #d97706; }
.lskg-status-no-output { background: #fee2e2; color: #b91c1c; }
.lskg-status-no-output .lskg-status-dot { background: #b91c1c; }
.lskg-status-unmatched { background: #ffe4e6; color: #be123c; }
.lskg-status-unmatched .lskg-status-dot { background: #be123c; }
.lskg-status-zero-hours { background: #eff6ff; color: #1e40af; }
.lskg-status-zero-hours .lskg-status-dot { background: #2563eb; }

.lskg-on-track  { color: #15803d; }
.lskg-review    { color: #92400e; }
.lskg-no-output { color: #475569; }
.lskg-unmatched { color: #be123c; }

/* ── Budget KPI badge row (between Machine Performance and Planned vs Budget) ── */
.lskg-bgt-badges { margin-top: 20px; }

/* Red icon variant (over-budget badge) */
.lskg-kpi-icon-red { background: #fee2e2; color: #b91c1c; }

/* Supporting sub-text below KPI value */
.lskg-kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  line-height: 1.3;
}

/* Attention sub-badges */
.bgt-attn-badge {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.bgt-attn-over        { background: #fee2e2; color: #b91c1c; }
.bgt-attn-unmatched   { background: #fef3c7; color: #92400e; }
.bgt-attn-incomplete  { background: #fef3c7; color: #b45309; }

/* ── Planned vs Budget Hours table (LSKG page) ──────────────────────────────── */
.lskg-bgt-table { margin-top: 16px; }

/* Budget status badges (reuse lskg-status-badge base; only colours differ) */
.bgt-status-under      { background: #dcfce7; color: #15803d; }
.bgt-status-under      .lskg-status-dot { background: #15803d; }
.bgt-status-on         { background: #dcfce7; color: #15803d; }
.bgt-status-on         .lskg-status-dot { background: #15803d; }
.bgt-status-over       { background: #fee2e2; color: #b91c1c; }
.bgt-status-over       .lskg-status-dot { background: #b91c1c; }
.bgt-status-neutral    { background: #f1f5f9; color: #64748b; }
.bgt-status-neutral    .lskg-status-dot { background: #94a3b8; }
.bgt-status-incomplete { background: #fef3c7; color: #92400e; }
.bgt-status-incomplete .lskg-status-dot { background: #d97706; }

/* "Over" value text in Remaining/Over column */
.bgt-over-text { color: #b91c1c; font-weight: 600; }

/* Draft / Partial inline badge */
.bgt-draft-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 3px;
  background: #fef3c7;
  color: #92400e;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Empty/error states */
.lskg-empty, .lskg-loading, .lskg-error {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.lskg-error { color: #c0392b; }

/* Import modal */
.lskg-modal-box { max-width: 480px; width: 96vw; }
.lskg-preview-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lskg-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.lskg-preview-label { color: var(--text-muted); }
.lskg-preview-val   { font-weight: 600; text-align: right; }
.lskg-preview-warn .lskg-preview-label { color: #d97706; }
.lskg-preview-warn .lskg-preview-val   { color: #d97706; }
.lskg-replace-warn {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: 6px;
  border: 1px solid #fde68a;
  font-size: 0.83rem;
  color: #92400e;
}

.lskg-preview-section {
  margin-top: 12px;
}
.lskg-preview-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}
.lskg-preview-blocking .lskg-preview-section-title {
  color: #dc2626;
}
.lskg-preview-blocking {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 12px;
}
.lskg-blocking-table {
  width: 100%;
  font-size: 0.75rem;
  border-collapse: collapse;
}
.lskg-blocking-table th,
.lskg-blocking-table td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid #fecaca;
}
.lskg-blocking-table th {
  font-weight: 600;
  color: #991b1b;
  background: #fee2e2;
}
.lskg-mach-group {
  font-size: 0.78rem;
  margin-bottom: 4px;
  line-height: 1.8;
}
.lskg-mach-label {
  font-weight: 600;
  color: #475569;
  margin-right: 6px;
}
.lskg-mach-ok {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 1px 2px;
  font-size: 0.74rem;
}
.lskg-mach-warn {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 1px 2px;
  font-size: 0.74rem;
}
.lskg-mach-note {
  color: #64748b;
  font-style: italic;
  font-size: 0.74rem;
}

/* ── LSKG modal inner layout ─────────────────────────────────────────────────── */
.lskg-modal-inner { padding: 20px 24px; min-width: 320px; }
.lskg-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.lskg-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.lskg-modal-close:hover { background: var(--hover); }
.lskg-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ── Weekly Budget ────────────────────────────────────────────────────────── */
/* Controls live inside the shared hours-nav-shell's .wk-right panel */
.budget-shell-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.budget-lock-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.budget-unlocked { background: #dcfce7; color: #166534; padding: 4px 12px; border-radius: 6px; }
.budget-locked   { background: #fee2e2; color: #991b1b; }

/* Copied-week indicator badge — matches UNLOCKED badge shape */
.budget-copied-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 6px;
  white-space: nowrap;
  background: #dbeafe;
  color: #1e40af;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .budget-copied-badge { background: #1e3a8a; color: #bfdbfe; }
}
:root[data-theme="dark"] .budget-copied-badge { background: #1e3a8a; color: #bfdbfe; }

/* ── Budget grid ─────────────────────────────────────────────────────────── */
.bgt-shift-section {
  margin-bottom: 16px;
}

/* ── Shift header bar (sits above the table, spans its full width) ── */

/* Inner wrapper — inline-block so it shrink-wraps to the table's
   natural width; min-width:100% ensures it fills the viewport when
   the table is narrower; overflow-x:auto on .bgt-table-wrap scrolls
   the whole block (bar + table) together. */
.bgt-shift-inner {
  display: inline-block;
  min-width: 100%;
  vertical-align: top;
}

/* The coloured bar is now a plain div — no table-cell quirks,
   border-radius works reliably, and width is always 100% of
   .bgt-shift-inner (= the table width). */
.bgt-shift-hdr-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 0.88rem;
  width: 100%;
  box-sizing: border-box;
}
/* Day = blue */
.bgt-shift-day    .bgt-shift-hdr-cell { background: #2563eb; }
/* Afternoon = burnt orange */
.bgt-shift-afternoon .bgt-shift-hdr-cell { background: #c2410c; }
/* Night = purple */
.bgt-shift-night  .bgt-shift-hdr-cell { background: #6d28d9; }

.bgt-shift-name {
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
}
.bgt-shift-time {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  margin-left: 4px;
  font-family: 'SF Mono', 'Consolas', monospace;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.bgt-table-wrap {
  overflow-x: auto;
}
.bgt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.bgt-table th {
  border: 1px solid #cbd5e1;
  text-align: center;
}
.bgt-table td {
  border: 1px solid #cbd5e1;
  padding: 0;
  text-align: center;
}

/* Column header row */
.bgt-machine-hdr {
  text-align: left;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #334155;
  color: #fff;
  white-space: nowrap;
  min-width: 150px;
}
.bgt-day-hdr {
  padding: 5px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #334155;
  color: #fff;
  min-width: 78px;
  white-space: nowrap;
}
.bgt-today-hdr { background: var(--accent) !important; }
.bgt-total-hdr {
  padding: 5px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #1e40af;
  color: #fff;
  white-space: nowrap;
  min-width: 78px;
}

/* Body cells */
.bgt-machine-cell {
  text-align: left;
  padding: 5px 10px;
  font-size: 0.75rem;
  color: var(--text);
  background: #f8fafc;
  white-space: nowrap;
  font-weight: 500;
}
.bgt-cell {
  vertical-align: middle;
  background: #fff;
}
.bgt-input {
  width: 100%;
  min-width: 62px;
  padding: 5px 6px;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
  box-sizing: border-box;
  outline: none;
  -moz-appearance: textfield;
}
.bgt-input::-webkit-outer-spin-button,
.bgt-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bgt-input:focus { background: rgba(59,130,246,0.08); }
.bgt-people-val {
  display: block;
  padding: 5px 6px;
  font-size: 0.84rem;
  color: var(--text);
  min-height: 28px;
}

/* WEEK TOTAL column (individual row) */
.bgt-total-cell {
  padding: 5px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e3a5f;
  background: #dbeafe;
  white-space: nowrap;
}
/* Individual row WEEK TOTAL cells */
.bgt-row-total {
  background: #dbeafe;
  color: #1e3a5f;
  font-weight: 700;
  font-size: 0.77rem;
}
.bgt-total-day {
  font-size: 0.75rem;
  font-weight: 600;
  color: #e2e8f0;
}
.bgt-grand {
  font-weight: 700;
  color: #e2e8f0;
  background: #1e293b;
}

/* Forklift / Pasteuriser / Training — warm cream highlight */
.bgt-row-special .bgt-machine-cell,
.bgt-row-special .bgt-cell { background: #fef9c3; }
.bgt-row-special .bgt-machine-cell { color: #78350f; font-weight: 600; }

/* ── Offline row — greyed out, inputs disabled ───────────────────────────── */
.bgt-row-offline .bgt-machine-cell,
.bgt-row-offline .bgt-cell {
  background: #f1f5f9 !important;
  opacity: 0.55;
}
.bgt-row-offline .bgt-input,
.bgt-row-offline .bgt-people-val { color: #94a3b8; }
.bgt-row-offline .bgt-row-total  { background: #e2e8f0 !important; color: #94a3b8; }

/* Machine cell when offline (label text colour) */
.bgt-machine-offline { color: #94a3b8 !important; font-style: italic; }

/* ── Machine / activity dropdown ─────────────────────────────────────────── */
.bgt-machine-select {
  width: 100%;
  min-width: 130px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Subtle chevron via SVG background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 22px;
  box-sizing: border-box;
  outline: none;
}
.bgt-machine-select:focus {
  background-color: rgba(59,130,246,0.07);
  border-radius: 3px;
}
/* Option labelled Offline shows in muted italic */
.bgt-machine-select option[value="OFFLINE"] { color: #94a3b8; font-style: italic; }

/* Odd/even zebra (machine rows only, non-special) */
.bgt-table tbody .bgt-row:not(.bgt-row-special):nth-child(even) .bgt-machine-cell,
.bgt-table tbody .bgt-row:not(.bgt-row-special):nth-child(even) .bgt-cell { background: #f1f5f9; }

/* ── Daily allocation colour coding (3–6 people) ───────────────────────────
   !important overrides the zebra-stripe and special-row backgrounds above.
   Text colour rules beat .bgt-input / .bgt-people-val { color: var(--text) }
   via higher class-specificity (3 classes vs 1). ─────────────────────────── */
/* Allocation colours: full cell background with accessible text */
/* Light green — approaching target (below optimal) */
.bgt-cell.bgt-alloc-light-green { background: #f0fdf4 !important; }
.bgt-cell.bgt-alloc-light-green .bgt-input,
.bgt-cell.bgt-alloc-light-green .bgt-people-val { color: #166534; background: transparent; }

/* Green — exactly at target */
.bgt-cell.bgt-alloc-green { background: #bbf7d0 !important; }
.bgt-cell.bgt-alloc-green .bgt-input,
.bgt-cell.bgt-alloc-green .bgt-people-val { color: #14532d; background: transparent; }

/* Red — over-allocated */
.bgt-cell.bgt-alloc-red   { background: #fecaca !important; }
.bgt-cell.bgt-alloc-red .bgt-input,
.bgt-cell.bgt-alloc-red .bgt-people-val   { color: #7f1d1d; background: transparent; }

/* Keep focus indicator visible without overriding cell background */
.bgt-cell.bgt-alloc-light-green .bgt-input:focus,
.bgt-cell.bgt-alloc-green .bgt-input:focus,
.bgt-cell.bgt-alloc-red   .bgt-input:focus { background: transparent; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18); }

/* Shift TOTAL HOURS summary row */
.bgt-shift-total-row td {
  background: #1e293b;
  font-weight: 700;
  font-size: 0.73rem;
  color: #e2e8f0;
  border-top: 2px solid #334155;
  padding: 6px 8px;
}
.bgt-shift-total-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  text-align: left;
  background: #1e293b;
}

/* Grand total (all shifts) */
.bgt-grand-total-wrap { margin-top: 6px; }
/* Grand-total column fallback min-widths (JS _syncGrandTotalColWidths sets exact widths) */
.bgt-grand-total-table .bgt-col-machine { min-width: 150px; }
.bgt-grand-total-table .bgt-col-day     { min-width: 78px;  }
.bgt-grand-total-table .bgt-col-total   { min-width: 78px;  }
.bgt-all-shifts-row td {
  background: #0f172a;
  color: #e2e8f0;
  font-weight: 700;
  font-size: 0.75rem;
  border-color: #334155;
  padding: 7px 8px;
}
.bgt-all-shifts-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  text-align: left;
}
.bgt-all-total { color: #e2e8f0 !important; }

/* Dark mode adjustments */
/* Budget table intentionally keeps a fixed light palette in both light and
   dark system themes — the machine/day/total grid needs consistent, high
   -contrast readability regardless of OS theme. Only the lock-status badge
   follows the app's dark-mode palette. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .budget-unlocked { background: #14532d; color: #86efac; }
  :root:not([data-theme="light"]) .budget-locked   { background: #7f1d1d; color: #fca5a5; }
}
:root[data-theme="dark"] .budget-unlocked { background: #14532d; color: #86efac; }
:root[data-theme="dark"] .budget-locked   { background: #7f1d1d; color: #fca5a5; }

/* Responsive */
@media (max-width: 700px) {
  .bgt-machine-hdr, .bgt-machine-cell { min-width: 110px; }
  .bgt-day-hdr { min-width: 54px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Daily Roster — Budget Tracking Bands & Shift Header Badges
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shift header budget badge group ─────────────────────────────────────── */
.shift-bgt-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: 8px;
  vertical-align: middle;
}

.shift-bgt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  color: #fff;
  white-space: nowrap;
}

.shift-bgt-badge strong {
  font-weight: 700;
}

/* Draft label inside the budget badge */
.shift-bgt-draft {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.35);
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 3px;
}

/* Status variants — shift header badges */
.shift-bgt-eq {                          /* ON BUDGET — green */
  background: rgba(34,197,94,0.35);
  color: #bbf7d0;
  outline: 1px solid rgba(34,197,94,0.55);
}

.shift-bgt-rem {                         /* REMAINING — green */
  background: rgba(34,197,94,0.35);
  color: #bbf7d0;
  outline: 1px solid rgba(34,197,94,0.55);
}

.shift-bgt-over {                        /* OVER BUDGET — red */
  background: rgba(220,38,38,0.55);
  color: #fecaca;
  outline: 1px solid rgba(220,38,38,0.75);
}

.shift-bgt-inc {                         /* INCOMPLETE BUDGET — orange */
  background: rgba(234,88,12,0.55);
  color: #fed7aa;
  outline: 1px solid rgba(234,88,12,0.75);
}

/* 'No budget set' — muted neutral */
.shift-bgt-none {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
}

/* 'Budget unavailable' — soft warning amber */
.shift-bgt-err {
  background: rgba(251,191,36,0.22);
  color: #fef9c3;
  outline: 1px solid rgba(251,191,36,0.35);
}

/* ── Per-machine budget band (inside machine cards on daily page) ── */
.daily-bgt-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 10px;
  font-size: 0.7rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #f8fafc;
}
.daily-bgt-nums {
  color: #64748b;
  font-weight: 500;
}
.daily-bgt-status {
  font-weight: 700;
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.daily-bgt-no-bgt {
  color: #94a3b8;
  font-style: italic;
  justify-content: center;
}
.daily-bgt-on  { background: #dcfce7; color: #166534; }  /* On budget — green */
.daily-bgt-rem { background: #dcfce7; color: #166534; }  /* Remaining — green */
.daily-bgt-over{ background: #fee2e2; color: #991b1b; }  /* Over — red */

/* Responsive — hide shift budget badges on very narrow screens */
@media (max-width: 600px) {
  .shift-bgt-group { display: none; }
}

/* ── Notice Board ────────────────────────────────────────────────────────────── */
.nb-card {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin: 20px 0 8px;
  overflow: hidden;
}

.nb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px 14px;
  gap: 12px;
}
.nb-header-left { text-align: center; flex: 1 1 auto; }
.nb-title-hdr { font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.nb-subtitle   { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.nb-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.nb-add-btn { white-space: nowrap; }

.nb-controls {
  display: none;
}

.nb-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.nb-filter-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nb-filter-btn:hover { background: var(--hover); color: var(--text); }
.nb-filter-btn.nb-filter-active {
  background: var(--accent, #1e40af);
  border-color: var(--accent, #1e40af);
  color: #fff;
}

.nb-past-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
}
.nb-past-toggle input { cursor: pointer; }

.nb-table-wrap { overflow-x: auto; }
.nb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
.nb-th {
  padding: 9px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--row-alt, #f8fafc);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.nb-th-date    { width: 110px; }
.nb-th-type    { width: 90px; }
.nb-th-applies { width: 160px; }
.nb-th-actions { width: 110px; text-align: right; }

.nb-row { border-bottom: 1px solid var(--border-light, #f1f5f9); }
.nb-row:last-child { border-bottom: none; }
.nb-row:hover { background: var(--hover, #f8fafc); }

.nb-date-cell    { padding: 11px 14px; color: var(--text); white-space: nowrap; vertical-align: top; font-size: 0.84rem; font-weight: 500; }
.nb-type-cell    { padding: 11px 14px; vertical-align: top; }
.nb-notice-cell  { padding: 11px 14px; vertical-align: top; }
.nb-applies-cell { padding: 11px 14px; vertical-align: top; color: var(--text-muted); font-size: 0.84rem; }
.nb-actions-cell { padding: 11px 14px; text-align: right; vertical-align: top; white-space: nowrap; }

.nb-title { font-weight: 600; color: var(--text); line-height: 1.35; }
.nb-desc  { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

.nb-edit-btn {
  font-size: 0.82rem;
  color: var(--accent-link, #2563eb);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  margin-right: 6px;
}
.nb-edit-btn:hover { background: var(--hover); }
.nb-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0.55;
  padding: 2px 4px;
  border-radius: 4px;
}
.nb-del-btn:hover { opacity: 1; background: #fee2e2; }

.nb-empty-cell {
  padding: 28px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.87rem;
}

.nb-footer-note {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: right;
  padding: 8px 22px;
  margin: 0;
  border-top: 1px solid var(--border-light, #f1f5f9);
}

/* Type badges */
.nb-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.nb-badge-holiday  { background: #dbeafe; color: #1d4ed8; }
.nb-badge-rdo      { background: #fef3c7; color: #92400e; }
.nb-badge-birthday { background: #ede9fe; color: #6d28d9; }

/* Notice modal tweaks */
.nb-modal { width: 480px; }


/* ── Leave Roster ─────────────────────────────────────────────────────────── */
.lv-loading { padding: 40px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.lv-loading-err { color: #dc2626; }

.lv-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  margin: 20px;
}

/* Header with tab buttons + controls */
.lv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
}

.lv-tabs { display: flex; gap: 8px; }

/* Tab buttons — use .btn .btn-sm base; active/inactive override colours only */
.lv-tab {
  /* inherits .btn .btn-sm sizing */
}
.lv-tab-active  { background: #2F4156 !important; color: #fff !important; border-color: #2F4156 !important; box-shadow: none !important; }
.lv-tab-inactive {
  background: #f1f5f9 !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  box-shadow: none !important;
}
.lv-tab-inactive:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
}

.lv-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lv-add-btn { white-space: nowrap; }

.lv-past-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.lv-past-toggle input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); }

/* ── Gantt top bar ────────────────────────────────────────────────────────── */
.lv-gantt-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-light);
}

.lv-gantt-title    { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.lv-gantt-subtitle { font-size: 0.8rem;  color: var(--text-muted); margin-top: 2px; }

.lv-gantt-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Employee filter buttons */
.lv-emp-filter { display: flex; gap: 6px; }

.lv-filter-btn {
  /* inherits .btn .btn-sm */
  white-space: nowrap;
}
.lv-filter-active  { background: #2F4156 !important; color: #fff !important; border-color: #2F4156 !important; box-shadow: none !important; }
.lv-filter-inactive {
  background: #f1f5f9 !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  box-shadow: none !important;
}
.lv-filter-inactive:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
}

/* Month navigation */
.lv-month-nav { display: flex; align-items: center; gap: 4px; }

.lv-nav-btn {
  padding: 5px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s;
}
.lv-nav-btn:hover { background: var(--hover-bg, #f1f5f9); }

.lv-today-btn { padding: 5px 12px; font-size: 0.8rem; }
.lv-today-btn-dim { color: var(--text-muted); }

.lv-month-label { font-size: 0.9rem; font-weight: 600; color: var(--text); padding: 0 6px; white-space: nowrap; }

.lv-month-sel {
  padding: 4px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.lv-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--row-alt, #f8fafc);
}

.lv-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}

.lv-legend-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lv-legend-sep { display: inline-block; width: 1px; height: 16px; background: var(--border-light); margin: 0 4px; }
.lv-legend-bd-ph  { background: #fca5a5; border: 1px solid #f87171; border-radius: 3px; }
.lv-legend-bd-rdo { background: #fcd34d; border: 1px solid #f59e0b; border-radius: 3px; }

/* ── Gantt Table ─────────────────────────────────────────────────────────── */
.lv-gantt-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.lv-gantt {
  border-collapse: collapse;
  table-layout: fixed;
}

/* Two-row sticky thead */
/* Row 1: month headers — top: 0 */
.lv-gantt thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-light);
}

/* Row 2: day headers — top: 28px (height of row 1) */
.lv-gantt thead tr:last-child th {
  position: sticky;
  top: 28px;
  z-index: 3;
  background: var(--card-bg);
  border-bottom: 2px solid var(--border-light);
}

/* Employee header cell (rowspan=2): stays at top:0, left:0, highest z-index */
.lv-emp-th {
  width: 180px;
  min-width: 180px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  position: sticky;
  top: 0 !important;
  left: 0;
  z-index: 5 !important; /* above month headers and day headers */
  background: var(--card-bg);
  border-right: 1px solid var(--border-light);
  vertical-align: middle;
}

/* Month header spanning cells */
.lv-month-hdr {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  padding: 5px 8px;
  white-space: nowrap;
  height: 28px;
  box-sizing: border-box;
}

/* Day header cells */
.lv-day-th {
  width: 34px;
  min-width: 34px;
  padding: 4px 0;
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  box-sizing: border-box;
}
.lv-day-th .lv-dow { display: block; font-weight: 500; }
.lv-day-th .lv-dom { display: block; font-weight: 700; font-size: 0.78rem; color: var(--text); }

.lv-day-th.lv-wknd         { background: #dbeafe; color: #3b82f6; }
.lv-day-th.lv-wknd .lv-dom  { color: #2563eb; }
.lv-day-th.lv-today-col    { background: #eff6ff; }
.lv-day-th.lv-today-col .lv-dom { color: #1d4ed8; font-weight: 800; }

/* Gantt body rows */
.lv-row { position: relative; }

.lv-emp-cell {
  width: 180px;
  min-width: 180px;
  padding: 0 14px;
  font-size: 0.83rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  height: 44px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-bg);
  box-sizing: border-box;
}
.lv-row:nth-child(even) .lv-emp-cell { background: var(--row-alt, #f8fafc); }

.lv-emp-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
  vertical-align: middle;
}


/* Day cells */
.lv-day-cell {
  width: 34px;
  min-width: 34px;
  height: 44px;
  padding: 0;
  border-bottom: 1px solid var(--border-light);
  box-sizing: border-box;
  vertical-align: middle;
  background: var(--card-bg);
}
.lv-row:nth-child(even) .lv-day-cell { background: var(--row-alt, #f8fafc); }

.lv-day-cell.lv-wknd      { background: #eff6ff; }
.lv-row:nth-child(even) .lv-day-cell.lv-wknd { background: #dbeafe40; }
.lv-day-cell.lv-today-col { background: rgba(59,130,246,0.08); }

/* Blocked date column highlight (all-staff) */
.lv-day-th.lv-bd-col { position: relative; }
.lv-day-th.lv-bd-ph  { background: #fee2e2 !important; color: #991b1b !important; }
.lv-day-th.lv-bd-rdo { background: #fef3c7 !important; color: #92400e !important; }
.lv-day-cell.lv-bd-col { position: relative; }
.lv-day-cell.lv-bd-ph  { background: rgba(252,165,165,0.28) !important; }
.lv-day-cell.lv-bd-rdo { background: rgba(253,230,138,0.35) !important; }
/* Row-only scoped highlight (softer overlay, narrower) */
.lv-day-cell.lv-bd-row.lv-bd-ph  { background: rgba(252,165,165,0.16) !important; }
.lv-day-cell.lv-bd-row.lv-bd-rdo { background: rgba(253,230,138,0.22) !important; }

/* Bars overlay */
.lv-bar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 36px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3px 8px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  box-sizing: border-box;
  transition: opacity 0.12s, filter 0.12s;
  pointer-events: auto;
  min-width: 0;
}
.lv-bar-name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.lv-bar-detail {
  font-size: 0.63rem;
  font-weight: 500;
  opacity: 0.9;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.lv-bar:hover { opacity: 0.88; filter: brightness(1.08); }

.lv-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

.lv-gantt-empty {
  padding: 14px 20px;
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border-light);
}

/* ── Entries Table ───────────────────────────────────────────────────────── */
.lv-entries-wrap { overflow-x: auto; }

.lv-entries-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.lv-entries-table thead th {
  padding: 9px 14px;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  background: var(--card-bg);
  white-space: nowrap;
}
.lv-actions-th { text-align: center; }

.lv-entries-table tbody tr { border-bottom: 1px solid var(--border-light); }
.lv-entries-table tbody tr:last-child { border-bottom: none; }
.lv-entries-table tbody tr:nth-child(even) { background: var(--row-alt, #f8fafc); }
.lv-entries-table tbody tr:hover { background: var(--hover-bg, #f1f5f9); }

.lv-entry-emp     { padding: 10px 14px; white-space: nowrap; font-weight: 500; }
.lv-entry-type    { padding: 10px 14px; white-space: nowrap; }
.lv-entry-date    { padding: 10px 14px; white-space: nowrap; color: var(--text); }
.lv-entry-dur     { padding: 10px 14px; white-space: nowrap; color: var(--text-muted); }
.lv-entry-notes   { padding: 10px 14px; color: var(--text-muted); max-width: 260px; }
.lv-entry-actions { padding: 8px 14px; text-align: center; white-space: nowrap; }
.lv-entry-actions-inner { display: inline-flex; gap: 6px; align-items: center; }

/* Leave type badge */
.lv-type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #dbeafe;
  color: #1d4ed8;
  white-space: nowrap;
}

/* Action icon buttons */
.lv-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-light);
  background: var(--card-bg);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  color: var(--text-muted);
}
.lv-action-btn:hover { background: var(--hover-bg, #f1f5f9); color: var(--text); }
.lv-edit-btn:hover      { border-color: var(--primary); color: var(--primary); background: #eff6ff; }
.lv-del-entry-btn:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

.lv-empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}


/* ── Leave Modal ─────────────────────────────────────────────────────────── */
.leave-modal { width: 480px; max-width: 95vw; }

.form-err { margin-top: 10px; padding: 8px 12px; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px; color: #dc2626; font-size: 0.83rem; }
.form-ok  { margin-top: 10px; padding: 8px 12px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px; color: #15803d; font-size: 0.83rem; }
.required-star { color: #dc2626; margin-left: 2px; }

/* ── Bug Reports table (admin) ──────────────────────────────────────────────── */
/* Bug reports table — matches .users-table pattern: card chrome from .admin-section, no inner radius */
#bug-reports-list { overflow-x: auto; }
.bug-reports-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bug-reports-table th {
  background: #f4f6f8; font-size: 0.73rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); padding: 9px 16px;
  text-align: left; border-bottom: 1px solid var(--border);
}
.bug-reports-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text); }
.bug-reports-table tbody tr:last-child td { border-bottom: none; }
.bug-reports-table tbody tr:hover td { background: #f8fbfd; }
.bug-reports-row:hover { cursor: pointer; }

/* Status badges */
.bug-status { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; }
.bug-status-open     { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.bug-status-resolved { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

/* Resolve checkbox */
.bug-resolve-label { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bug-resolve-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

/* Bug detail modal */
.bug-detail-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.bug-detail-row  { display: flex; gap: 12px; font-size: 0.87rem; }
.bug-detail-label { flex-shrink: 0; width: 110px; color: var(--text-muted); font-weight: 500; }
.bug-detail-section { margin-bottom: 14px; font-size: 0.87rem; }
.bug-detail-section strong { display: block; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 4px; }
.bug-detail-section p { margin: 0; color: var(--text); line-height: 1.55; white-space: pre-wrap; }


/* ══════════════════════════════════════════════════════════════════════════════
   ATTAINMENT PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tabs */
.att-header          { padding: 12px 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.att-tabs            { display: flex; gap: 8px; flex-wrap: wrap; }  /* matches lv-tabs spacing */
.att-controls        { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* .att-tab rules removed — buttons now use .btn.btn-sm.lv-tab.lv-tab-active/inactive */

/* States */
.att-loading, .att-empty, .att-error {
  padding: 2.5rem 1.5rem; text-align: center; color: var(--muted);
}
.att-error { color: var(--danger, #c0392b); }
.att-notice {
  margin: .75rem 1rem;
  padding: .6rem .9rem;
  background: var(--warning-bg, #fff3cd);
  border: 1px solid var(--warning-border, #ffc107);
  border-radius: 6px; font-size: .85rem;
}
.att-source-warn {
  margin: 0 1rem .5rem;
  padding: .55rem .85rem;
  background: var(--danger-bg, #fde8e8);
  border: 1px solid var(--danger-border, #e74c3c);
  border-radius: 6px; font-size: .84rem;
}

/* Overall attainment badge */
.att-overall {
  padding: .6rem 1rem; font-size: .92rem;
}
.att-pct-good { color: var(--success, #27ae60); font-weight: 700; }
.att-pct-warn { color: var(--warning, #e67e22); font-weight: 700; }
.att-pct-bad  { color: var(--danger,  #c0392b); font-weight: 700; }
.att-var-pos  { color: var(--success, #27ae60); font-weight: 700; }  /* positive variance */
.att-var-neg  { color: var(--danger,  #c0392b); font-weight: 700; }  /* negative variance */

/* Table */
.att-table-wrap { flex: 1; min-height: 0; overflow-x: auto; overflow-y: auto; padding: 0 .5rem .5rem; }
.att-table {
  width: 100%; border-collapse: collapse; font-size: .83rem;
  table-layout: fixed;
}
.att-table th {
  background: #334155;
  color: #fff;
  padding: .45rem .65rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid rgba(255,255,255,0.15);
  white-space: nowrap;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 2;
}

.att-sortable:hover { background: #2c3e50; cursor: pointer; }
.att-table td {
  padding: .38rem .65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.att-table tr:last-child td { border-bottom: none; }
.att-table tr:hover td     { background: var(--row-hover, #f9fbfd); }
.att-num { text-align: right; font-variant-numeric: tabular-nums; }
.att-mat { font-weight: 600; white-space: nowrap; }
.att-subtotal td { background: var(--table-subtotal-bg, #eef2f6); font-style: italic; }

/* Comment textarea */
.att-comment-cell  { overflow: hidden; }
.att-comment-th    { }
.att-comment-input {
  width: 100%; height: 1.55rem; padding: .15rem .4rem;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; font-size: .82rem;
  color: var(--text); font-family: inherit; line-height: 1.45;
  resize: none; overflow: hidden;
  transition: border-color .15s, background .15s;
  box-sizing: border-box; display: block;
  white-space: nowrap; text-overflow: ellipsis;
}
.att-comment-input.att-comment-expanded {
  height: auto; min-height: 4.5rem; resize: vertical;
  overflow-y: auto; white-space: pre-wrap; text-overflow: clip;
}
.att-comment-input:hover  { border-color: var(--border); }
.att-comment-input:focus  { outline: none; border-color: var(--accent); background: var(--surface); }

/* Source tab */
.att-source-panel { padding: 1rem 1.25rem; max-width: 900px; }
.att-source-header { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.att-source-header h3 { margin: 0; font-size: 1rem; }
.att-source-badge {
  font-size: .75rem; font-weight: 600; padding: .2rem .55rem;
  border-radius: 9999px;
}
.att-source-badge--has  { background: var(--success-bg, #d4edda); color: var(--success-text, #155724); }
.att-source-badge--none { background: var(--neutral-bg, #e9ecef); color: var(--muted); }
.att-source-hint { font-size: .84rem; color: var(--muted); margin: .3rem 0 .7rem; }
.att-paste-area {
  width: 100%; box-sizing: border-box;
  padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 6px;
  font-family: monospace; font-size: .78rem;
  resize: vertical; background: var(--surface); color: var(--text);
}
.att-paste-area:focus { outline: none; border-color: var(--accent); }
.att-source-actions { display: flex; gap: .5rem; margin-top: .6rem; }

/* Preview */
.att-preview { margin-top: 1rem; }
.att-preview-header { margin-bottom: .5rem; }
.att-preview-hdrs { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.att-preview-table td, .att-preview-table th { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.att-preview-more { font-size: .82rem; color: var(--muted); margin: .4rem 0; }
.att-preview-actions { display: flex; gap: .6rem; margin-top: .75rem; }

/* Attainment totals row */
.att-totals-row td { background: var(--table-header-bg, #f0f4f8); border-top: 2px solid var(--border); }

/* COOISPI-only unmatched section */
.att-unmatched-section { margin-top: 1.5rem; padding: 0 0 .5rem; }
.att-unmatched-title   { font-size: .9rem; margin: 0 0 .25rem; color: var(--muted); }
.att-unmatched-note    { font-size: .8rem; color: var(--muted); margin: 0 0 .6rem; }

/* ── Attainment % progress bar ─────────────────────────────────────────────── */
.att-bar-td {
  padding: 2px 0;
  vertical-align: middle;
}
.att-bar-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 90px;
  height: 1.9rem;
  border-radius: 3px;
  overflow: hidden;
}
.att-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  transition: width .25s ease;
}
.att-bar-good { background: #27ae60; opacity: .20; }
.att-bar-warn { background: #e67e22; opacity: .28; }
.att-bar-bad  { background: #c0392b; opacity: .22; }
.att-bar-label {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  font-weight: 700;
  white-space: nowrap;
  font-size: .9rem;
}
.att-bar-label.att-pct-good { color: var(--success, #27ae60); }
.att-bar-label.att-pct-warn { color: var(--warning, #e67e22); }
.att-bar-label.att-pct-bad  { color: var(--danger,  #c0392b); }
.att-pct-neutral { padding: 0 8px; color: var(--muted, #888); font-weight: 400; }

/* Sortable column headers */
.att-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.att-sort-ind { color: rgba(255,255,255,0.5); margin-left: 4px; font-size: 0.85em; }
.att-sort-ind--on { color: #fff; }

/* Remove reserved space that was used by the now-removed COOISPI-only section */
.att-unmatched-section { display: none; }

/* ── Hours Export button ─────────────────────────────────────────────────────── */
.export-hours-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 4px 10px;
}
.export-hours-btn svg {
  flex-shrink: 0;
}

/* ── Hours Export header button (wk-left, red-styled) ───────────────────── */
.export-hours-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 4px 11px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.export-hours-header-btn svg {
  flex-shrink: 0;
  stroke: #991b1b;
}
.export-hours-header-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #7f1d1d;
}
.export-hours-header-btn:hover svg {
  stroke: #7f1d1d;
}
.export-hours-header-btn:focus-visible {
  outline: 2px solid #f87171;
  outline-offset: 2px;
}

/* ── Attainment Dashboard layout ──────────────────────────────────────────── */
#att-data-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#att-dashboard-panel { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px 1rem 1.5rem; }
.att-sub-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 1rem; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.att-data-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
/* Scorecards */
.dash-scorecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex-shrink: 0; }
.dash-scorecard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.dash-sc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.dash-sc-value { font-size: 1.65rem; font-weight: 700; line-height: 1.1; }
.dash-sc-unit  { font-size: .75rem; color: var(--muted); }
/* Main and bottom rows */
.dash-main-row   { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: 10px; }
.dash-bottom-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.dash-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.dash-panel-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); flex-shrink: 0; }
/* Bar fills */
.dash-bar-fill  { height: 100%; border-radius: 3px; transition: width .3s; flex-shrink: 0; }
.dash-bar-plan    { background: #1976C8; opacity: .5; }
.dash-bar-good    { background: var(--success); opacity: .72; }
.dash-bar-warn    { background: var(--warning); opacity: .72; }
.dash-bar-bad     { background: var(--danger);  opacity: .72; }
.dash-bar-neutral { background: var(--muted);   opacity: .4; }
/* Grouped bars */
.dash-grouped-bars { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.dash-gbar-row     { display: flex; align-items: center; gap: 8px; }
.dash-gbar-label   { font-size: .75rem; font-weight: 600; width: 80px; flex-shrink: 0; color: var(--text); }
.dash-gbar-group   { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dash-gbar-track   { height: 14px; background: var(--bg); border-radius: 3px; display: flex; align-items: center; overflow: hidden; position: relative; }
.dash-gbar-num     { font-size: .7rem; color: var(--muted); margin-left: 4px; white-space: nowrap; position: absolute; right: 0; padding-right: 2px; }
.dash-gbar-legend  { display: flex; gap: 12px; font-size: .72rem; margin-top: 4px; }
.dash-legend-plan   { color: #1976C8; font-weight: 600; }
.dash-legend-actual { color: var(--success); font-weight: 600; }
/* Machine bars */
.dash-machine-bars { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.dash-mbar-row     { display: flex; align-items: center; gap: 8px; }
.dash-mbar-label   { font-size: .75rem; font-weight: 600; width: 80px; flex-shrink: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-mbar-track   { flex: 1; height: 16px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.dash-mbar-val     { font-size: .75rem; font-weight: 700; width: 46px; text-align: right; flex-shrink: 0; }
/* SKU bars */
.dash-sku-bars  { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.dash-sku-row   { display: flex; align-items: center; gap: 8px; }
.dash-sku-label { font-size: .75rem; font-weight: 600; width: 80px; flex-shrink: 0; color: var(--text); }
.dash-sku-track { flex: 1; height: 14px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.dash-sku-fill  { height: 100%; border-radius: 3px; transition: width .3s; opacity: .75; }
.dash-sku-pct   { font-size: .73rem; color: var(--muted); width: 38px; text-align: right; flex-shrink: 0; }
/* Trend chart */
.dash-trend-svg    { width: 100%; height: auto; display: block; }
.dash-trend-axis   { font-size: 9px; fill: var(--muted); font-family: inherit; }
.dash-trend-legend { display: flex; gap: 14px; font-size: .72rem; margin-top: 4px; }
/* Takeaways */
.dash-takeaways       { flex: 1; }
.dash-takeaway-list   { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-takeaway-list li { font-size: .84rem; color: var(--text); line-height: 1.5; padding-left: 1.1em; position: relative; }
.dash-takeaway-list li::before { content: '\25B8'; position: absolute; left: 0; color: var(--accent); }
.dash-takeaway-warn { color: var(--warning) !important; }
.dash-takeaway-warn::before { color: var(--warning) !important; }
/* Empty state */
.att-dash-empty-chart { color: var(--muted); font-size: .84rem; padding: 24px 0; text-align: center; }
/* Responsive */
@media (max-width: 900px) {
  .dash-scorecards { grid-template-columns: repeat(2, 1fr); }
  .dash-main-row   { grid-template-columns: 1fr; }
  .dash-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .dash-scorecards { grid-template-columns: 1fr 1fr; }
}

/* ── Attainment Dashboard viz update (2026-09-25) ─────────────────────────── */
/* Plan vs Actual — Plan/Actual sublabel rows */
.dash-gbar-subrow    { display: flex; align-items: center; gap: 6px; }
.dash-gbar-sublabel  { font-size: .68rem; color: var(--muted); width: 36px; flex-shrink: 0; text-align: right; }
/* More vertical spacing between category groups */
.dash-grouped-bars   { gap: 14px; }
/* Consistent actual-bar colour (not threshold-coloured) */
.dash-bar-actual     { background: #2E9B57; opacity: .78; }
/* Donut chart */
.dash-donut-wrap     { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; }
.dash-donut-svg      { width: min(160px, 100%); height: auto; display: block; overflow: visible; }
.dash-donut-ctr-val  { font-size: 18px; font-weight: 700; fill: var(--text); font-family: inherit; }
.dash-donut-ctr-lbl  { font-size: 10px; fill: var(--muted); font-family: inherit; }
.dash-donut-legend   { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 0; overflow-y: auto; max-height: 160px; }
.dash-donut-legend-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dash-donut-swatch   { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dash-donut-cat      { font-size: .73rem; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-donut-pct      { font-size: .73rem; color: var(--muted); font-weight: 600; flex-shrink: 0; }
/* SKU panel layout — stack donut above legend */
#att-dash-sku-panel  { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }

/* ── Attainment Dashboard layout fix (2026-09-25) ─────────────────────────── */

/* ── Plan vs Actual: fix number escaping card ─────────────────────────────── *
 * In the new subrow layout, .dash-gbar-num is a flex SIBLING of .dash-gbar-track,
 * not a child. The original position:absolute was for the old inside-track placement.
 * Override to static so values stay inside the card. */
.dash-gbar-subrow .dash-gbar-num {
  position: static;
  min-width: 50px;
  text-align: right;
  flex-shrink: 0;
  font-size: .72rem;
  white-space: nowrap;
  padding-right: 0;
}
/* Track is a flex sibling — give it flex:1 so the bar fills the available space */
.dash-gbar-subrow .dash-gbar-track {
  flex: 1;
  min-width: 0;
  /* keep position:relative for the bar fill, but the old absolute num is gone */
  position: relative;
  overflow: hidden;
}
/* Prevent subrow and group from escaping their column */
.dash-gbar-subrow { min-width: 0; overflow: hidden; }
.dash-gbar-group  { min-width: 0; }
.dash-gbar-row    { min-width: 0; overflow: hidden; }

/* ── SKU donut: two-column layout inside card ──────────────────────────────── */
.dash-donut-container {
  display: flex;
  flex-direction: row;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: flex-start;
}
/* Donut SVG wrapper — fixed width so the chart doesn't shrink */
.dash-donut-wrap {
  flex-shrink: 0;
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-donut-svg { width: 100%; height: auto; overflow: visible; }
/* Legend fills remaining width, scrolls vertically, never overflows right */
.dash-donut-legend {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 0;
}
.dash-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
}
.dash-donut-cat {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .73rem;
}
.dash-donut-pct {
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
  font-size: .73rem;
  font-weight: 600;
  color: var(--muted);
}
/* On small screens stack donut above legend */
@media (max-width: 540px) {
  .dash-donut-container { flex-direction: column; align-items: stretch; }
  .dash-donut-wrap { width: 100%; max-width: 140px; align-self: center; }
}

/* ── General: prevent panel content from bursting out of grid cells ─────── */
.dash-main-row > .dash-panel,
.dash-bottom-row > .dash-panel { overflow: hidden; min-width: 0; }

/* ── Import-tab scroll fix (2026-09-25) ─────────────────────────────────────
   #att-tab-content keeps overflow:hidden so the Attainment Data sticky header
   still works. Import sub-tabs get their own bounded scroll container here,
   so Preview content + Save button are always reachable. */
.att-source-scroll-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Dashboard middle row: fill card height (2026-09-25) ──────────────────────
   Machine bars and SKU donut were compressed to the top of their cards because
   neither container had flex:1.  These overrides fix both panels.              */

/* Machine Attainment %: give the bars container the remaining card flex space,
   then distribute rows evenly so they spread top-to-bottom.
   gap:0 lets justify-content control all vertical spacing.
   overflow-y:auto is a safety fallback when many machines are listed.          */
.dash-machine-bars {
  flex: 1;
  min-height: 0;
  gap: 0;
  justify-content: space-evenly;
  overflow-y: auto;
}
/* Taller bar track for better visual weight at wider row spacing */
.dash-mbar-track { height: 20px; }

/* SKU Volume %: centre the donut+legend group in the available card space.
   The container already has flex:1 but was pinned to the top with align-items:
   flex-start — override it here.  Increase donut column width slightly.        */
.dash-donut-container { align-items: center; }
.dash-donut-wrap      { width: 160px; }

/* On small screens keep the stacked layout — donut centred above the legend */
@media (max-width: 540px) {
  .dash-donut-wrap { width: 100%; max-width: 160px; }
}

/* ── Machine Attainment %: wider label column (2026-09-25) ──────────────────
   width:80px truncated names like "JALBULK 3.5KG". Widen to 130px so all
   machine line names display in full. The bar track (flex:1) shrinks to
   fill remaining space automatically. On narrow screens labels can wrap.   */
.dash-mbar-label {
  width: 130px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
@media (min-width: 901px) {
  .dash-mbar-label {
    white-space: nowrap;    /* no wrap needed on desktop — 130px is enough */
  }
}

/* ── Attainment sidebar submenu (2026-09-25) ─────────────────────────────────
   Mirrors .nav-hrs-wrap / .nav-hrs-flyout exactly.                            */
.nav-att-wrap {
  width: 100%;
}
.nav-att-flyout {
  display: none;
  position: fixed;
  background: #1e3248;
  border-radius: 0 6px 6px 0;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.35);
  min-width: 160px;
  z-index: 9999;
  overflow: hidden;
}