/* ================================================================
   Theme variables — data-theme="dark" (default) and data-theme="light"
   ================================================================ */

[data-theme="dark"] {
  --bg-body:    #111;
  --bg-surface: #222;
  --bg-hover:   #333;
  --text-main:  #eee;
  --text-muted: #ccc;
  --border:     #333;
  --nav-btn-bg: #444;
  --nav-btn-hover: #666;
  --weekday-bg: #1a1a2e;
  --today-bg:   #555;
}

[data-theme="light"] {
  --bg-body:    #f5f5f5;
  --bg-surface: #fff;
  --bg-hover:   #e9e9e9;
  --text-main:  #222;
  --text-muted: #333;
  --border:     #ccc;
  --nav-btn-bg: #ddd;
  --nav-btn-hover: #bbb;
  --weekday-bg: #fff;
  --today-bg:   #d0d0ff;
}

/* ================================================================
   Body + Headings
   ================================================================ */
html {
  overflow-x: hidden;
}

body {
  background: var(--bg-body);
  color: var(--text-main);
  font-family: Arial, sans-serif;
  font-size: var(--base-font-size, 14px);
  padding: 10px 12px;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  margin: 0;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--primary-color, var(--text-main));
}

h2 {
  color: var(--primary-color, var(--text-main));
}

/* ================================================================
   Top Bar — theme toggle + logout (desktop: right-aligned)
   ================================================================ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.top-bar-spacer {
  flex: 1;
}

.btn-logout {
  text-decoration: none;
}

/* ================================================================
   Navigation buttons (shared)
   ================================================================ */
.nav-btn {
  background: var(--nav-btn-bg);
  color: var(--text-main);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.85em;
  display: inline-block;
}

.nav-btn:hover {
  background: var(--nav-btn-hover);
}

.nav-btn.active {
  border: 1px solid var(--primary-color, var(--text-main));
  background: var(--bg-hover);
}

a.nav-btn {
  text-decoration: none;
}

/* Theme toggle — always visible */
.theme-toggle-btn {
  background: var(--nav-btn-bg);
  color: var(--text-main);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  vertical-align: middle;
}

.theme-toggle-btn:hover {
  background: var(--nav-btn-hover);
}

/* ================================================================
   Mobile navigation — hamburger dropdown
   ================================================================ */
.hamburger {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  padding: 8px 12px;
  min-height: 44px;
  min-width: 44px;
}

.mobile-nav {
  display: none;
}

.mobile-nav.open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.mobile-nav .nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 0.9em;
}

/* ================================================================
   View Toolbar — freshness + desktop nav + filter (above table)
   ================================================================ */
.view-toolbar {
  margin-bottom: 12px;
}

.toolbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}

/* Desktop-only toolbar nav — hidden on mobile */
/* Centered by default (standalone under heading); left-aligned when inside action-bar-left */
.toolbar-nav-desktop {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.action-bar-left .toolbar-nav-desktop {
  justify-content: flex-start;
}

/* ================================================================
   Freshness Indicator — colored dot + date text
   ================================================================ */
.freshness-indicator {
  font-size: 0.85em;
  color: var(--text-muted);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.freshness-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================================================
   Table
   ================================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

th, td {
  border: 1px solid var(--border);
  padding: 3px;
  text-align: center;
  min-width: 36px;
}

th.name-col, td:first-child {
  width: 1%;
  max-width: max-content;
  text-align: left;
  white-space: nowrap;
}

.team-row {
  background: var(--bg-surface);
  font-weight: bold;
}

button.td-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  font-weight: bold;
}

button.td-btn:hover {
  background: var(--bg-hover);
}

button.shift-btn {
  display: inline-block;
  width: 95%;
  padding: 2px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  height: 24px;
  line-height: 18px;
  box-sizing: border-box;
  overflow: hidden;
}

button.shift-btn.combo-3 {
  font-size: 0.6em;
  padding: 2px 1px;
  white-space: nowrap;
}

/* ================================================================
   Shift colors — UNCHANGED (locked decision: shift colors unchanged)
   ================================================================ */

.btn-F { background: var(--shift-F, #ff69b4); color: #000; }
.btn-S { background: var(--shift-S, #4caf50); }
.btn-N { background: var(--shift-N, #1e40af); }
.btn-T { background: var(--shift-T, #006400); }
.btn-H { background: var(--shift-H, #d2691e); color: #000; }
.btn-B { background: var(--shift-B, #40e0d0); color: #000; }
.btn-U { background: var(--shift-U, #f1c40f); color: #000; }
.btn-K { background: var(--shift-K, #ff0000); }
.btn-KR { background: var(--shift-K, #ff0000); }

.btn-F-HO { background: linear-gradient(90deg, var(--shift-F, #ff69b4) 50%, var(--shift-H, #d2691e) 50%); color: #000; }
.btn-F-B  { background: linear-gradient(90deg, var(--shift-F, #ff69b4) 50%, var(--shift-B, #40e0d0) 50%); color: #000; }
.btn-F-HO-B { background: linear-gradient(90deg, var(--shift-F, #ff69b4) 33%, var(--shift-H, #d2691e) 33%, var(--shift-H, #d2691e) 66%, var(--shift-B, #40e0d0) 66%); color: #000; }

.btn-S-HO { background: linear-gradient(90deg, var(--shift-S, #4caf50) 50%, var(--shift-H, #d2691e) 50%); }
.btn-S-B  { background: linear-gradient(90deg, var(--shift-S, #4caf50) 50%, var(--shift-B, #40e0d0) 50%); }
.btn-S-HO-B { background: linear-gradient(90deg, var(--shift-S, #4caf50) 33%, var(--shift-H, #d2691e) 33%, var(--shift-H, #d2691e) 66%, var(--shift-B, #40e0d0) 66%); }

.btn-N-HO { background: linear-gradient(90deg, var(--shift-N, #1e40af) 50%, var(--shift-H, #d2691e) 50%); }
.btn-N-B  { background: linear-gradient(90deg, var(--shift-N, #1e40af) 50%, var(--shift-B, #40e0d0) 50%); }
.btn-N-HO-B { background: linear-gradient(90deg, var(--shift-N, #1e40af) 33%, var(--shift-H, #d2691e) 33%, var(--shift-H, #d2691e) 66%, var(--shift-B, #40e0d0) 66%); }

.btn-T-HO { background: linear-gradient(90deg, var(--shift-T, #006400) 50%, var(--shift-H, #d2691e) 50%); }
.btn-T-B  { background: linear-gradient(90deg, var(--shift-T, #006400) 50%, var(--shift-B, #40e0d0) 50%); }
.btn-T-HO-B { background: linear-gradient(90deg, var(--shift-T, #006400) 33%, var(--shift-H, #d2691e) 33%, var(--shift-H, #d2691e) 66%, var(--shift-B, #40e0d0) 66%); }

/* ================================================================
   Today column — highlighted with slow pulsing border
   ================================================================ */
col.today {
  background: var(--today-bg, #555) !important;
}
.today th, .today td {
  background: var(--today-bg, #555) !important;
}

/* Slow pulsing border on today's entire column — uses accent/primary color */
.today-pulse {
  animation: today-pulse 4s ease-in-out infinite;
}

@keyframes today-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--border); }
  50% { box-shadow: inset 0 0 0 2px transparent; }
}

/* ================================================================
   Weekend + Holidays
   ================================================================ */
.weekend {
  background: var(--bg-surface);
}

.holiday {
  background: orange !important;
  color: #000;
}

/* ================================================================
   Legend — collapsible on mobile
   ================================================================ */
.legend {
  margin-top: 30px;
  text-align: center;
}

.legend button {
  margin: 0 5px;
  font-size: 0.85em;
  padding: 4px 8px;
  width: auto;
  display: inline-block;
}

.legend-toggle {
  display: none;
}

/* ================================================================
   Shift type filter — dimmed when filtered out (used by filter.js)
   ================================================================ */
[data-filtered="true"] {
  opacity: 0.15;
}

.filter-toggle {
  transition: opacity 0.2s;
  border: 2px solid transparent;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  pointer-events: auto;
  width: auto;
}

.filter-toggle.active {
  opacity: 1;
  border-color: var(--text-main);
}

.filter-toggle:not(.active) {
  opacity: 0.3;
  border-color: transparent;
}

/* ================================================================
   Filter bar
   ================================================================ */
.filter-bar {
  margin-bottom: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.filter-details {
  margin: 0;
}

.filter-summary {
  cursor: pointer;
  font-weight: bold;
  padding: 6px 12px;
  color: var(--text-main);
  background: var(--nav-btn-bg);
  border-radius: 4px;
  display: inline-block;
  font-size: 0.85em;
}

.filter-badge {
  background: var(--nav-btn-bg);
  color: var(--text-main);
  border-radius: 50%;
  padding: 2px 7px;
  font-size: 0.8em;
  margin-left: 6px;
}

.filter-panel {
  padding: 10px;
  margin-top: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.filter-section {
  margin-bottom: 12px;
}

.filter-team-fieldset {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  margin: 6px 0;
}

.filter-team-fieldset legend {
  font-weight: bold;
  padding: 0 6px;
}

.filter-emp-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 10px 2px 0;
}

.btn-small {
  font-size: 0.8em;
  padding: 2px 8px;
  background: var(--nav-btn-bg);
  color: var(--text-main);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 6px;
}

.filter-shift-types {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

.filter-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.filter-reset-link {
  color: var(--text-muted);
  font-size: 0.9em;
}

.filter-info-banner {
  padding: 8px 12px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: var(--text-muted);
}

/* ================================================================
   Shift table wrapper — horizontal scroll container
   ================================================================ */
.shift-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.shift-table-wrapper table {
  min-width: 600px;
}

/* ================================================================
   Action Bar — 3-column layout: left (nav) | center (month nav) | right (filter)
   ================================================================ */
.action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
}

.action-bar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.action-bar-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.month-label {
  font-weight: bold;
  font-size: 1em;
  padding: 0 6px;
}

.action-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
}

.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ================================================================
   View-specific nav container (legacy, kept for compatibility)
   ================================================================ */
.view-nav {
  text-align: center;
  margin-bottom: 12px;
}

.view-nav form,
.view-nav a,
.view-nav button {
  display: inline-block;
  margin: 0 5px;
}

/* ================================================================
   Admin Dashboard — card grid
   ================================================================ */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

.admin-card {
  display: block;
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  transition: background 0.2s, border-color 0.2s;
}

.admin-card:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}

.admin-card-icon {
  font-size: 2em;
  margin-bottom: 8px;
}

.admin-card h3 {
  margin: 0 0 8px;
  color: var(--primary-color, var(--text-main));
}

.admin-card p {
  margin: 0;
  font-size: 0.9em;
  color: var(--text-muted);
}

/* Hide Zulagen/HR-Export on touch devices (works even with width=1200 viewport) */
.touch-device .desktop-only-nav {
  display: none !important;
}

/* ================================================================
   Responsive / Mobile
   ================================================================ */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  /* Top bar: show hamburger on mobile */
  .hamburger {
    display: block;
  }

  /* Hide desktop toolbar nav on mobile (hamburger handles navigation) */
  .toolbar-nav-desktop {
    display: none !important;
  }

  .view-toolbar .toolbar-nav-desktop {
    display: none !important;
  }

  /* Hide desktop nav in view toolbar on mobile */
  .toolbar-nav {
    display: none;
  }

  /* Table cells */
  th, td {
    padding: 2px;
  }

  /* Sticky first column on mobile — only when data-sticky-col="1" */
  [data-sticky-col="1"] .shift-table-wrapper td:first-child,
  [data-sticky-col="1"] .shift-table-wrapper th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--weekday-bg);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
  }

  [data-sticky-col="1"] .shift-table-wrapper .team-row td:first-child {
    background: inherit;
  }

  /* Shift buttons */
  button.shift-btn {
    width: 100%;
    font-size: 0.85em;
    height: 26px;
  }

  button.shift-btn.combo-3 {
    font-size: 0.55em;
    padding: 1px;
    white-space: nowrap;
  }

  button.td-btn {
    font-size: 0.85em;
  }

  /* Buttons: compact on mobile */
  .nav-btn,
  .btn-logout {
    min-height: 0;
    padding: 6px 10px;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* HomeOffice checkboxes: touch-friendly */
  .ho-checkbox {
    width: 28px;
    height: 28px;
    min-width: 44px;
    min-height: 44px;
    transform: none;
    cursor: pointer;
    display: block;
    margin: auto;
  }

  /* Action bar: stack vertically on mobile */
  .action-bar {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
  }

  .action-bar-left,
  .action-bar-center,
  .action-bar-right {
    width: 100%;
    justify-content: flex-start;
    flex: unset;
  }

  .action-bar-center {
    justify-content: center;
    flex-wrap: wrap;
  }

  .inline-form {
    flex-wrap: wrap;
  }

  /* Month nav buttons: smaller on mobile */
  .action-bar-center .nav-btn {
    padding: 4px 8px;
    font-size: 0.8em;
  }

  /* Week mode: show week-view, hide table wrapper */
  [data-mobile-mode="week"] .shift-table-wrapper {
    display: none;
  }

  [data-mobile-mode="week"] .week-view {
    display: block !important;
  }

  /* Week view styles */
  .week-view {
    display: none;
  }

  .week-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 12px;
  }

  .week-nav button {
    min-height: 36px;
    padding: 6px 10px;
  }

  #week-label {
    font-weight: bold;
    font-size: 1em;
    color: var(--text-main);
  }

  #week-content table {
    min-width: 0;
    width: 100%;
  }

  /* Legend: collapsible on mobile */
  .legend-toggle {
    display: block;
    cursor: pointer;
    font-weight: bold;
    padding: 6px 12px;
    color: var(--text-main);
    background: var(--nav-btn-bg);
    border-radius: 4px;
    text-align: center;
    margin-top: 12px;
    font-size: 0.85em;
    border: none;
    width: 100%;
  }

  .legend {
    display: none;
    margin-top: 8px;
  }

  .legend.open {
    display: block;
  }

  .legend button {
    margin: 3px;
    font-size: 0.8em;
    padding: 4px 6px;
    width: auto;
  }

  /* Admin cards: single column on mobile */
  .admin-cards {
    grid-template-columns: 1fr;
  }

  /* Statistics: stack content vertically */
  .stat-chart-row {
    flex-direction: column;
  }
}

/* ================================================================
   Desktop overrides
   ================================================================ */
@media (min-width: 769px) {
  /* Hamburger always hidden on desktop */
  .hamburger {
    display: none;
  }

  /* Mobile nav always hidden on desktop */
  .mobile-nav,
  .mobile-nav.open {
    display: none !important;
  }

  /* Desktop: hide top-bar border, keep controls */
  .top-bar {
    border-bottom: none;
    padding: 4px 0;
    margin-bottom: 0;
  }

  /* Desktop: btn-logout visible in top bar */
  .btn-logout {
    display: inline-block;
  }

  /* Week view is mobile-only */
  .week-view {
    display: none !important;
  }
}

/* ================================================================
   Error page
   ================================================================ */
.error-container {
  max-width: 600px;
  margin: 60px auto;
  padding: 30px;
  background: var(--bg-surface);
  border-radius: 8px;
  box-shadow: 0 0 10px #000;
  text-align: center;
}

.error-container h1 {
  color: #f44336;
  margin-bottom: 16px;
}

.error-container p {
  color: var(--text-muted);
  font-size: 1.1em;
}

/* ================================================================
   Profile page
   ================================================================ */
.profile-section {
  max-width: 700px;
  margin: 0 auto 30px;
  padding: 20px;
  background: var(--bg-surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.profile-section h2 {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--primary-color, var(--text-main));
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--text-main);
}

.input-readonly {
  background: var(--bg-body);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.input-field {
  background: var(--bg-body);
  color: var(--text-main);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.radio-group-vertical {
  flex-direction: column;
  gap: 8px;
}

.radio-group label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.color-swatches {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.color-swatch-label {
  cursor: pointer;
}

.color-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  vertical-align: middle;
}

.color-swatch-label input[type="radio"]:checked + .color-swatch {
  border-color: var(--text-main);
  box-shadow: 0 0 0 2px var(--border);
}

.color-swatch-label input[type="radio"] {
  display: none;
}

.hint {
  font-size: 0.85em;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.info-banner {
  background: var(--bg-body);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--text-muted);
}

.profile-actions {
  max-width: 700px;
  margin: 0 auto 16px;
  display: flex;
  gap: 12px;
}

.btn-primary {
  background: var(--nav-btn-bg);
  color: var(--text-main);
}

.btn-primary:hover {
  filter: brightness(1.15);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-main);
}

/* Dual accent color pickers (profile page) */
.accent-picker-row { display: flex; gap: 24px; flex-wrap: wrap; }
.accent-picker-col { flex: 1; min-width: 180px; }

.flash-success {
  max-width: 700px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  background: #4caf50;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

.flash-error {
  max-width: 700px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  background: #f44336;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

.flash-warning {
  max-width: 700px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  background: #ff9800;
  color: #000;
  border-radius: 4px;
  font-weight: bold;
}

/* ================================================================
   Nav logo (home page only, large)
   ================================================================ */
.nav-logo {
  max-height: 50px;
  vertical-align: middle;
}

/* ================================================================
   Admin sections — boxed card layout
   ================================================================ */
.admin-section,
.branding-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.admin-section h2,
.branding-section h2 {
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 1.1em;
}

.admin-section h3,
.branding-section h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 1em;
  color: var(--text-muted);
}

.admin-section--muted {
  opacity: 0.5;
}

.branding-section--danger {
  border-color: #f44336;
}

.branding-flash {
  max-width: 700px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border-radius: 4px;
  font-weight: bold;
}

.branding-flash--success {
  background: #4caf50;
  color: #fff;
}

.branding-flash--error {
  background: #f44336;
  color: #fff;
}

.branding-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.branding-text-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-body);
  color: var(--text-main);
  font-size: 1em;
  width: 250px;
  max-width: 100%;
}

.branding-hex-input {
  width: 80px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-body);
  color: var(--text-main);
  font-family: monospace;
  font-size: 0.9em;
}

.color-preview-box {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 2px solid var(--border);
  vertical-align: middle;
}

.branding-shift-colors {
  margin-bottom: 12px;
}

.branding-team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.branding-team-row input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-body);
  color: var(--text-main);
}

.btn-remove-team {
  background: #f44336;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
}

.btn-remove-team:hover {
  background: #d32f2f;
}

.form-hint {
  font-size: 0.85em;
  color: var(--text-muted);
  margin: 4px 0 12px;
}

.badge-success {
  background: #4caf50;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
}

.badge-error {
  background: #f44336;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
}

.nav-btn--danger {
  background: #f44336;
  color: #fff;
}

.nav-btn--danger:hover {
  background: #d32f2f;
}

/* ================================================================
   Admin tables and forms
   ================================================================ */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.admin-table th,
.admin-table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--border);
}

.admin-table th {
  background: var(--bg-surface);
  font-weight: bold;
}

.badge-admin {
  background: #6f42c1;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
}

.badge-employee {
  background: var(--nav-btn-bg);
  color: var(--text-main);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
}

.status-active {
  color: #4caf50;
  font-weight: bold;
}

.status-inactive {
  color: #f44336;
  font-weight: bold;
}

.action-cell {
  white-space: normal;
  min-width: 260px;
}

.action-cell .btn-action,
.action-cell .btn-warning,
.action-cell .btn-danger {
  margin-bottom: 2px;
}

.btn-action {
  background: var(--nav-btn-bg);
  color: var(--text-main);
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85em;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
}

.btn-action:hover {
  background: var(--nav-btn-hover);
}

.btn-danger {
  background: #f44336;
  color: #fff;
}

.btn-danger:hover {
  background: #d32f2f;
}

.btn-warning {
  background: #ff9800;
  color: #000;
}

.btn-warning:hover {
  background: #e68900;
}

.edit-row td {
  background: var(--bg-hover);
  padding: 12px;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-box {
  background: var(--bg-surface);
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
  max-width: 500px;
  width: 90%;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* ================================================================
   Permission checkboxes in admin user edit
   ================================================================ */
.perm-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
}

.perm-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
  cursor: pointer;
}

/* ================================================================
   Statistics — Tabbed Chart Layout
   ================================================================ */

.tab-bar,
.action-bar-center {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.tab-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
  background: var(--nav-btn-bg);
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.95em;
  transition: background 0.15s, color 0.15s;
}

.tab-btn:hover {
  background: var(--nav-btn-hover);
}

.tab-btn.active {
  background: var(--primary-color, #007bff);
  color: #fff;
  border-color: var(--primary-color, #007bff);
}

.tab-panel {
  display: none;
  padding: 12px 0;
}

.tab-panel.active {
  display: block;
}

.chart-container {
  position: relative;
  height: 300px;
  margin-bottom: 20px;
  width: 100%;
}

/* Shared-shifts comparison cards */
.shared-shifts-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 16px;
  margin-bottom: 16px;
}

.shared-shifts-overlap {
  padding: 4px 8px;
  margin: 3px 0;
  border-left: 4px solid var(--shift-bg, #888);
  border-radius: 0 4px 4px 0;
  background: var(--bg-hover);
}

.overlap-bar-wrap {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  margin: 6px 0 10px;
  overflow: hidden;
}

.overlap-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color, #007bff), var(--primary-color, #007bff) 60%, #40e0d0);
  border-radius: 4px;
  transition: width 0.4s ease;
  max-width: 100%;
}

.overlap-percentage {
  font-weight: bold;
  color: var(--primary-color, #007bff);
  font-size: 1.05em;
}

/* Mobile — stats tabs wrap, charts full-width */
@media (max-width: 600px) {
  .tab-bar {
    gap: 4px;
  }

  .tab-btn {
    padding: 5px 10px;
    font-size: 0.85em;
  }

  .chart-container {
    height: 220px;
  }

  .shared-shifts-card {
    margin-bottom: 12px;
    padding: 12px;
  }
}

/* ============================================================
 * Export selection and button bar (Plan 05.3-01)
 * ============================================================ */

/* Export selection highlight on employee name cell */
td.export-selected {
  background: var(--bg-hover);
  outline: 2px solid var(--primary-color, #007bff);
  outline-offset: -2px;
}

/* Export button bar — label + two buttons inline */
.export-btn-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-right: 8px;
}

.export-label {
  font-size: 0.85em;
  font-weight: bold;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Calendar subscription widget — two buttons row */
.cal-subscribe-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Surcharge rule cards — ensure buttons stay inside */
.rule-card,
.stacking-rule {
  overflow: hidden;
  box-sizing: border-box;
}

.tier-section {
  overflow: hidden;
}

/* Deactivated surcharge rule — reduced opacity + strikethrough label */
.rule-inactive {
    opacity: 0.5;
}
.rule-inactive .rule-label {
    text-decoration: line-through;
}

/* Login status dots — admin user list */
.login-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.login-dot-green  { background: #28a745; }
.login-dot-orange { background: #fd7e14; }
.login-dot-red    { background: #dc3545; }
.login-dot-gray   { background: #6c757d; }

/* Sortable table headers */
th[data-col] {
    cursor: pointer;
    user-select: none;
}