/* === CHIPGAZ — Modern Auto Service Theme === */

/* --- Light Theme (default) --- */
:root {
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f7f8fa;
  --bg-hover: #eef0f4;
  --text-primary: #1a1d2b;
  --text-secondary: #5f6577;
  /* was #9ca0ae — only 2.45:1 on white, failed AA everywhere it was used.
     Tuned against --bg-primary (#f0f2f5), not pure white, since that is the
     surface it actually sits on. */
  --text-muted: #666b7a;
  --accent: #e67e00;
  --accent-hover: #cc6f00;
  /* --accent is a fill colour: as small text on white it is only 2.69:1.
     Use --accent-text wherever the accent is TEXT on a light surface. */
  --accent-text: #a34e07;
  /* likewise --danger as small text on white is marginal */
  --danger-text: #c62828;
  --accent-glow: rgba(230, 126, 0, 0.2);
  --accent-soft: rgba(230, 126, 0, 0.08);
  --danger: #e53935;
  --danger-hover: #c62828;
  --success: #2e7d32;
  --success-hover: #1b5e20;
  --border: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px var(--accent-glow);
  --header-bg: #1b2131;
  --header-text: #eef0f6;
  --header-border: rgba(255, 255, 255, 0.06);
  --modal-overlay: rgba(0, 0, 0, 0.4);
  --input-bg: #f5f6f8;
  --scrollbar-thumb: #ccc;
  --scrollbar-hover: #aaa;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Theme --- */
[data-theme="dark"] {
  --bg-primary: #08090d;
  --bg-secondary: #14161f;
  --bg-card: #1e2130;
  --bg-elevated: #282c3e;
  --bg-hover: #333850;
  --text-primary: #f0f2f8;
  --text-secondary: #a0a5b8;
  /* was #626880 — only 3.03:1 on --bg-card (#1e2130), and the "+" cell button
     that uses it measured 2.29:1 */
  --text-muted: #8a91a6;
  --accent: #faa61a;
  --accent-hover: #e09000;
  /* on a dark surface the fill colours are already high-contrast as text */
  --accent-text: var(--accent);
  --danger-text: #fca5a5;
  --accent-glow: rgba(250, 166, 26, 0.3);
  --accent-soft: rgba(250, 166, 26, 0.12);
  --danger: #f87171;
  --danger-hover: #ef4444;
  --success: #4ade80;
  --success-hover: #22c55e;
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.15);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --header-bg: #0c0d14;
  --header-text: #f0f2f8;
  --header-border: rgba(255, 255, 255, 0.08);
  --modal-overlay: rgba(0, 0, 0, 0.75);
  --input-bg: #12141c;
  --scrollbar-thumb: #3a3f55;
  --scrollbar-hover: #50566e;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding-bottom: 72px;
  -webkit-user-select: text;
  user-select: text;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* === HEADER === */
.app-header {
  position: relative;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  color: var(--header-text);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.app-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}

.app-header h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--accent), #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-nav button {
  background: none;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.header-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.header-nav button.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(245, 158, 11, 0.2);
  font-weight: 700;
}

/* === THEME TOGGLE === */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  margin-left: 8px;
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
  line-height: 1;
}

/* Light: show moon (to switch to dark) */
:root:not([data-theme="dark"]) .theme-toggle .icon-moon,
html:not([data-theme="dark"]) .theme-toggle .icon-moon {
  display: inline;
}

/* Dark: show sun (to switch to light) */
[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline;
}

/* === WEEK NAVIGATION === */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.week-nav button {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  margin: 0 4px;
  line-height: 34px;
  text-align: center;
  padding: 0;
  transition: all var(--transition);
  font-family: inherit;
}

.week-nav button:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent-text);
}

.week-nav .week-label {
  font-size: 14px;
  font-weight: 600;
  min-width: 180px;
  text-align: center;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.btn-today {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  width: auto !important;
  padding: 0 16px !important;
  border-radius: 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.btn-today:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--shadow-glow) !important;
}

.btn-filter-today {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
  width: auto !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.btn-filter-today.active {
  background: var(--success) !important;
  color: white !important;
  border-color: var(--success) !important;
}

.btn-refresh {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
  width: auto !important;
  padding: 0 10px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  transition: all var(--transition) !important;
}

.btn-refresh:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* === SCHEDULE GRID === */
.schedule-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  position: relative;
  z-index: 1;
}

.schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 700px;
}

.schedule-table th,
.schedule-table td {
  border: 1px solid var(--border);
  padding: 4px;
  vertical-align: top;
  min-width: 90px;
}

.schedule-table thead th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 4px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
}

.schedule-table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 0;
}

.schedule-table thead th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

.schedule-table thead th.today {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  border-bottom-color: var(--accent-hover);
}

.schedule-table .worker-name-cell {
  background: var(--bg-card);
  font-weight: 600;
  font-size: 13px;
  min-width: 110px;
  max-width: 130px;
  white-space: nowrap;
  color: var(--text-primary);
}

.worker-name-cell .worker-name-text {
  color: var(--text-primary);
}

.worker-name-cell .worker-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

.schedule-cell {
  background: var(--bg-card);
  min-height: 80px;
  height: 80px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition);
  overflow: visible;
}

/* Alternating day columns for visual separation on desktop */
@media (min-width: 769px) {
  .schedule-table td.schedule-cell:nth-child(even) {
    background: var(--bg-elevated);
  }
  .schedule-table thead th:nth-child(even) {
    background: var(--bg-elevated);
  }
  .schedule-table thead th.today {
    background: var(--accent);
  }
}

.schedule-cell:hover {
  background: var(--bg-hover);
}

.schedule-cell.dayoff {
  background: repeating-linear-gradient(
    -45deg,
    rgba(229, 57, 53, 0.06),
    rgba(229, 57, 53, 0.06) 5px,
    rgba(229, 57, 53, 0.03) 5px,
    rgba(229, 57, 53, 0.03) 10px
  ) !important;
  cursor: default;
  min-height: 60px;
}

.dayoff-label {
  color: var(--danger-text);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 16px 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* was 0.8 on --danger: 3.04:1 at 11px. Now 5.6:1. */
  opacity: 1;
}

/* === DAY OFF BUTTONS === */
.btn-set-dayoff {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  padding: 0;
  opacity: 0;
  transition: all var(--transition);
}

.schedule-cell:hover .btn-set-dayoff {
  opacity: 1;
}

.btn-set-dayoff:hover {
  background: rgba(229, 57, 53, 0.1);
  color: var(--danger);
  border-color: var(--danger);
}

.btn-remove-dayoff {
  display: block;
  margin: 4px auto 0;
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  z-index: 2;
}

.btn-remove-dayoff:hover {
  background: var(--danger);
  color: white;
}

/* === ADD APPOINTMENT BUTTON === */
.apt-add-btn {
  width: 100%;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 4px;
  transition: all var(--transition);
  /* was 0.5 — combined with the muted colour that gave 1.5:1, invisible */
  opacity: 0.9;
}

.apt-add-btn:hover {
  opacity: 1;
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* === COUNT BADGE === */
.apt-count-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--accent);
  color: #fff;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  z-index: 5;
}

/* === APPOINTMENT CARD === */
.apt-card {
  border-radius: var(--radius-sm);
  padding: 6px 30px 6px 8px;
  margin-bottom: 4px;
  font-size: 13px;
  color: white;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.apt-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.apt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  pointer-events: none;
}

.apt-card .apt-time {
  font-weight: 700;
  font-size: 11px;
  opacity: 0.95;
}

.apt-card .apt-client {
  font-weight: 600;
}

.apt-card .apt-service {
  font-size: 11px;
  opacity: 1;
}

.apt-card .apt-note {
  font-size: 10px;
  opacity: 0.88;
  font-style: italic;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Done button on card */
.btn-apt-done {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.15);
  color: white;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-apt-done:hover {
  background: var(--success);
  border-color: white;
  transform: scale(1.15);
}
.btn-apt-done:active {
  transform: scale(0.95);
}

/* Drag styles */
.apt-card.dragging {
  opacity: 0.25;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.apt-card.drag-clone {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--accent);
  border-radius: var(--radius-md);
  transform: scale(1.05) rotate(2deg);
  will-change: left, top;
}

.schedule-cell.drag-over {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 20px rgba(230, 126, 0, 0.15);
  transition: all 0.15s ease;
}

.schedule-cell.drop-success {
  animation: dropFlash 0.5s ease;
}

@keyframes dropFlash {
  0% { background: var(--accent-soft); }
  50% { background: rgba(46, 125, 50, 0.2); box-shadow: inset 0 0 0 3px var(--success); }
  100% { background: transparent; box-shadow: none; }
}

/* === SERVICE DROPDOWN === */
.service-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 150px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-lg);
}

.service-dropdown-item {
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  transition: background var(--transition);
}

.service-dropdown-item:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* === EMPTY STATE === */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state .icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 15px;
}

/* === FAB === */
.fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border: none;
  font-size: 28px;
  cursor: pointer;
  box-shadow: var(--shadow-md), var(--shadow-glow);
  z-index: 50;
  line-height: 56px;
  text-align: center;
  padding: 0;
  transition: all var(--transition);
}

.fab:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow);
}

.fab:active {
  transform: scale(0.95);
}

/* === BOTTOM NAV === */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--header-bg);
  display: flex;
  border-top: 1px solid var(--header-border);
  z-index: 200;
}

#bottom-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}

#bottom-nav button {
  flex: 1;
  background: none;
  border: none;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  text-align: center;
  padding: 8px 4px;
  transition: color var(--transition);
  font-family: inherit;
}

#bottom-nav button .nav-icon {
  display: block;
  font-size: 22px;
  margin-bottom: 2px;
}

#bottom-nav button.active {
  color: var(--accent);
  font-weight: 700;
}

#bottom-nav button:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* === MODAL === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 300;
  display: none;
  overflow-y: auto;
}

.modal-overlay.open {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  width: 100%;
  max-width: 500px;
  margin: 40px auto 20px;
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s ease-out;
}

.modal-content h2 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--accent-text);
  font-weight: 700;
}

/* PIN Modal */
.modal-pin-content {
  max-width: 340px;
  margin-top: 100px;
  text-align: center;
  border: 1px solid rgba(230, 126, 0, 0.2);
}

.modal-pin-content::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}

.modal-pin-content h2 {
  color: var(--text-primary) !important;
}

.modal-pin-content .form-group {
  text-align: left;
}

.modal-pin-content input {
  text-align: center;
  font-size: 28px !important;
  letter-spacing: 8px;
  background: var(--input-bg) !important;
  border-color: var(--border-light) !important;
}

.modal-pin-content input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.pin-error {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* === FORMS === */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text-primary);
  transition: all var(--transition);
}

.form-group input:not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Checkboxes must stay checkbox-sized — the rule above stretched them into
   empty text fields with the tick invisible. */
.form-group input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b90a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.form-group select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.form-group textarea { resize: vertical; min-height: 60px; }

.form-row {
  display: flex;
  gap: 10px;
}

.form-row .form-group {
  flex: 1;
  margin-right: 0;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  letter-spacing: 0.3px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: var(--danger-hover); }

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

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

.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: var(--success-hover); }

.btn-group {
  display: flex;
  margin-top: 16px;
  gap: 8px;
}

.btn-group .btn {
  flex: 1;
  margin-right: 0;
}

/* === SETTINGS === */
.settings-section {
  padding: 16px;
  position: relative;
  z-index: 1;
}

.settings-section h2 {
  font-size: 16px;
  color: var(--accent-text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.worker-item {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.worker-item:hover {
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

.worker-item .worker-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 12px;
  display: inline-block;
}

.worker-item .worker-info {
  flex: 1;
  min-width: 0;
}

.worker-item .worker-info .name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.worker-item .worker-info .details {
  font-size: 12px;
  color: var(--text-secondary);
}

.worker-item .worker-actions {
  display: flex;
  margin-left: 8px;
  gap: 6px;
}

.worker-item .worker-actions button {
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition);
  font-family: inherit;
}

.worker-item .worker-actions .btn-edit:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: rgba(230, 126, 0, 0.3);
}

.worker-item .worker-actions .btn-delete {
  color: var(--danger);
}

.worker-item .worker-actions .btn-delete:hover {
  background: rgba(229, 57, 53, 0.1);
  border-color: rgba(229, 57, 53, 0.3);
}

.add-worker-form {
  display: flex;
  margin-top: 12px;
  gap: 8px;
}

.add-worker-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: inherit;
  transition: all var(--transition);
}

.add-worker-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.add-worker-form input::placeholder {
  color: var(--text-muted);
}

/* === COLLAPSIBLE === */
.collapsible-header {
  cursor: pointer;
  user-select: none;
  transition: opacity var(--transition);
}

.collapsible-header:hover {
  opacity: 0.8;
}

.collapse-arrow {
  font-size: 12px;
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--transition);
  color: var(--text-muted);
}

.collapsible-header.open .collapse-arrow {
  transform: rotate(180deg);
}

/* === READ-ONLY MODE === */
body.readonly .fab { display: none !important; }
body.readonly .nav-manager-only { display: none !important; }
body.readonly .schedule-cell { cursor: default; }
body.readonly .schedule-cell:hover { background: var(--bg-card); }
body.readonly .apt-card { cursor: default; }
body.readonly .apt-card:hover { transform: none; }

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .schedule-table { min-width: auto; }
  .schedule-container { padding: 8px; }

  .schedule-table,
  .schedule-table thead,
  .schedule-table tbody,
  .schedule-table tr,
  .schedule-table th,
  .schedule-table td {
    display: block;
  }

  .schedule-table thead { display: none; }

  .schedule-table tr.worker-row {
    margin-bottom: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .schedule-table .worker-name-cell {
    background: var(--bg-elevated);
    padding: 10px 14px;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
  }

  .schedule-table .worker-name-cell .worker-dot { display: none; }

  .worker-name-cell .worker-name-text {
    color: var(--wc, var(--text-primary));
    font-weight: 700;
  }

  .schedule-table td.schedule-cell {
    min-height: auto;
    height: auto;
    padding: 10px 12px;
    padding-bottom: 12px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    overflow: visible;
    margin-top: 6px;
    border-top: 3px solid var(--accent);
  }

  .schedule-table td.schedule-cell:first-of-type {
    margin-top: 0;
    border-top: none;
  }

  .schedule-table td.schedule-cell:before {
    content: attr(data-day);
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
  }

  .schedule-table td.schedule-cell.dayoff {
    min-height: auto;
    height: auto;
    padding: 10px 12px;
    margin-top: 6px;
    border-top: 3px solid var(--accent);
  }

  .schedule-table td.schedule-cell.dayoff:first-of-type {
    margin-top: 0;
    border-top: none;
  }

  .schedule-table td.schedule-cell.dayoff:before {
    color: var(--danger);
  }

  .schedule-table td.schedule-cell.dayoff .dayoff-label {
    padding: 4px 2px;
    font-size: 12px;
  }

  .apt-card {
    margin-bottom: 6px;
    padding: 8px 10px;
  }

  .apt-count-badge {
    position: static;
    display: inline-block;
    margin-bottom: 6px;
    margin-right: 4px;
    vertical-align: middle;
  }

  .btn-set-dayoff {
    opacity: 1;
    position: static;
    display: inline-block;
    margin-top: 6px;
  }

  .fab {
    bottom: 72px;
    right: 14px;
    width: 52px;
    height: 52px;
    font-size: 24px;
    line-height: 52px;
  }

  .modal-content {
    margin: 20px 8px;
    border-radius: var(--radius-lg);
  }
}

/* === SEARCH BAR === */
.search-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.search-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: inherit;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-results {
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--accent);
}

.search-result-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  transition: background var(--transition);
}

.search-result-item:hover {
  background: var(--accent-soft);
}

.search-date {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.search-time {
  color: var(--accent-text);
  font-weight: 700;
}

.search-svc {
  color: var(--text-secondary);
  font-size: 12px;
}

.search-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
}

.btn-search-toggle,
.btn-export {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
  width: auto !important;
  padding: 0 10px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  transition: all var(--transition) !important;
}

.btn-search-toggle:hover,
.btn-export:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* === SCHEDULE TOTALS === */
.schedule-totals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-wrap: wrap;
}

.total-item {
  color: var(--text-secondary);
}

.total-item b {
  color: var(--text-primary);
}

.total-waiting b { color: var(--accent-text); }
.total-inprogress b { color: #2196F3; }
.total-done b { color: var(--success); }

/* === STATUS INDICATORS ON CARDS === */
.apt-card.status-waiting {
  border-left: 4px solid #FF9800;
}

.apt-card.status-inprogress {
  border-left: 4px solid #2196F3;
  animation: pulseBlue 2s ease-in-out infinite;
}

@keyframes pulseBlue {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 4px rgba(33, 150, 243, 0.3); }
  50% { box-shadow: var(--shadow-sm), 0 0 14px rgba(33, 150, 243, 0.6); }
}

/* Finished jobs must read as "done" without becoming illegible.
   `opacity: 0.55` faded the TEXT too, giving 1.9:1 white-on-pale — unreadable.
   Instead dim only the fill: background-image paints over the inline
   background-color but under the text, so white text stays crisp.
   The scrim is the palette's darkest neutral rather than pure black, so every
   worker colour settles toward the same muted slate — done rows recede
   instead of out-shouting the active ones, and even a bright yellow worker
   colour still clears AA (measured 9:1 on mid blue, 5.4:1 on yellow).
   !important is required because the worker colour is an inline style. */
.apt-card.status-done {
  border-left: 4px solid var(--success);
  opacity: 1;
  background-image: linear-gradient(rgba(26, 29, 43, 0.62), rgba(26, 29, 43, 0.62)) !important;
}

.apt-card.status-done::after {
  content: '\2714';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 13px;
  color: #fff;
  pointer-events: none;
}

[data-theme="dark"] .apt-card.status-waiting { border-left-color: #FFA726; }
[data-theme="dark"] .apt-card.status-inprogress { border-left-color: #42A5F5; }

/* === CLICK TO CALL === */
.apt-phone a {
  color: #fff;
  text-decoration: none;
  font-size: 11px;
}

.apt-phone a:hover {
  text-decoration: underline;
}

/* === TRANSFER SECTION === */
.transfer-section {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* === CLIENT HISTORY === */
.client-history {
  margin-top: 8px;
  margin-bottom: 8px;
}

.client-history label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.history-item {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  border-left: 2px solid var(--accent);
  margin-bottom: 4px;
  background: var(--bg-elevated);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.history-date {
  font-weight: 600;
  color: var(--text-primary);
}

.history-status {
  font-size: 11px;
  font-weight: 600;
}

.history-status.status-done { color: var(--success); }
.history-status.status-inprogress { color: #2196F3; }
.history-status.status-waiting { color: var(--accent-text); }

/* === WORKER SELECT MODAL === */
.worker-select-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all var(--transition);
}

.worker-select-item:active,
.worker-select-item:hover {
  background: var(--accent-soft);
  border-color: rgba(230, 126, 0, 0.3);
}

.worker-select-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

.worker-select-item .worker-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 12px;
  display: inline-block;
  flex-shrink: 0;
}

/* === WORKER FILTER BUTTON === */
.btn-worker-filter {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-worker-filter.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: rgba(230, 126, 0, 0.3) !important;
  font-weight: 700 !important;
}

/* === WAITLIST PANEL === */
.waitlist-panel {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--accent);
  padding: 10px 12px;
}

.waitlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.waitlist-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.waitlist-header h3 span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.waitlist-items {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.waitlist-card {
  flex-shrink: 0;
  min-width: 160px;
  max-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  cursor: grab;
  position: relative;
  transition: all var(--transition);
}

.waitlist-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.waitlist-card .wl-client {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.waitlist-card .wl-car {
  color: var(--text-secondary);
}

.waitlist-card .wl-service {
  color: var(--accent-text);
  font-size: 11px;
}

.waitlist-card .wl-phone {
  color: var(--text-muted);
  font-size: 11px;
}

.waitlist-card .wl-remove {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.waitlist-card .wl-remove:hover {
  color: var(--danger);
}

.waitlist-card.dragging {
  opacity: 0.3;
}

.waitlist-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 0;
}

/* === DAY VIEW === */
.dayview-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dayview-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.dayview-nav button {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  line-height: 34px;
  text-align: center;
  padding: 0;
  transition: all var(--transition);
  font-family: inherit;
}

.dayview-nav button:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent-text);
}

.dayview-nav .dv-today {
  width: auto;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dayview-nav .dv-today:hover {
  background: var(--accent-hover);
}

.dv-date-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 160px;
  text-align: center;
}

.dayview-apt .dv-service {
  opacity: 0.85;
  font-size: 10px;
  font-style: italic;
}

.dayview-apt .dv-note {
  opacity: 0.75;
  font-size: 9px;
}

.dayview-table {
  width: 100%;
  border-collapse: collapse;
}

.dayview-table th {
  background: var(--bg-elevated);
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
  min-width: 140px;
}

.dayview-table th:first-child {
  width: 70px;
  min-width: 70px;
  background: var(--bg-secondary);
}

.dayview-table td {
  border: 1px solid var(--border);
  height: 44px;
  padding: 0;
  position: relative;
  vertical-align: top;
}

.dayview-table td:first-child {
  background: var(--bg-secondary);
  text-align: right;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.dayview-table td.dayview-cell {
  cursor: pointer;
  transition: background var(--transition);
}

.dayview-table td.dayview-cell:hover {
  background: var(--bg-hover);
}

.dayview-apt {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 6px;
  padding: 4px 28px 4px 8px;
  font-size: 11px;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
}

.dayview-apt .dv-time {
  font-weight: 700;
  font-size: 10px;
}

.dayview-apt .dv-client {
  opacity: 0.9;
  font-size: 11px;
  font-weight: 600;
}

.dayview-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--danger);
  z-index: 3;
  pointer-events: none;
}

.dayview-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

.btn-dayview-toggle {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-light) !important;
  width: auto !important;
  padding: 0 10px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
}

.btn-dayview-toggle.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: rgba(230, 126, 0, 0.3) !important;
}

/* === SINGLE DAY MODE (desktop) === */
@media (min-width: 769px) {
  .schedule-table.single-day {
    min-width: auto;
    table-layout: auto;
  }
  .schedule-table.single-day thead { display: none; }
  .schedule-table.single-day,
  .schedule-table.single-day tbody,
  .schedule-table.single-day tr,
  .schedule-table.single-day th,
  .schedule-table.single-day td {
    display: block;
  }
  .schedule-table.single-day tr.worker-row {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .schedule-table.single-day .worker-name-cell {
    min-width: 140px;
    max-width: 160px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-right: 2px solid var(--border);
    border-bottom: none;
    background: var(--bg-elevated);
    font-size: 15px;
  }
  .schedule-table.single-day td.schedule-cell {
    flex: 1;
    min-height: auto;
    height: auto;
    padding: 10px 14px;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
  }
  .schedule-table.single-day td.schedule-cell .apt-card {
    flex: 0 0 auto;
    width: 260px;
    max-width: 100%;
    margin-bottom: 0;
  }
  .schedule-table.single-day td.schedule-cell .apt-card .apt-note {
    max-width: 220px;
  }
  .schedule-table.single-day td.schedule-cell .apt-add-btn {
    width: 120px;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .schedule-table.single-day td.schedule-cell .apt-count-badge {
    position: static;
    margin-right: 8px;
    align-self: center;
  }
  .schedule-table.single-day .btn-set-dayoff {
    position: static;
    opacity: 1;
    align-self: center;
    margin-left: auto;
  }
  .schedule-table.single-day td.dayoff {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    min-height: auto;
  }
  .schedule-table.single-day td.dayoff .dayoff-label {
    padding: 8px 16px;
  }
}

/* === BACKUP SECTION === */
.backup-info {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.backup-warning {
  font-size: 12px;
  color: var(--danger);
  margin-top: 6px;
  font-weight: 600;
}

/* Hide sections */
.view { display: none; }
.view.active { display: block; }

/* === INPUT type=color fix === */
input[type="color"] {
  height: 42px;
  padding: 4px;
  cursor: pointer;
}

/* === DARK THEME CONTRAST OVERRIDES === */
[data-theme="dark"] .schedule-table th,
[data-theme="dark"] .schedule-table td {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .schedule-cell {
  background: #171a26;
}

[data-theme="dark"] .schedule-cell:hover {
  background: #252940;
}

[data-theme="dark"] .schedule-table .worker-name-cell {
  background: #1c1f2e;
  border-right: 2px solid rgba(250, 166, 26, 0.15);
}

[data-theme="dark"] .schedule-table thead th {
  background: #1c1f2e;
  color: #c0c4d4;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .worker-item {
  background: #1a1d2c;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .worker-item:hover {
  background: #242840;
  border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .modal-content {
  background: #161925;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .form-group input:not([type="checkbox"]),
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .add-worker-form input {
  background: #0e1018;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .week-nav {
  background: #0e1018;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .week-nav button {
  background: #1e2130;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .btn-secondary {
  background: #1e2130;
  border-color: rgba(255, 255, 255, 0.12);
  color: #c0c4d4;
}

[data-theme="dark"] .settings-section h2 {
  border-bottom-color: rgba(250, 166, 26, 0.25);
}

[data-theme="dark"] .service-dropdown {
  background: #161925;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .apt-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .search-bar {
  background: #0e1018;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-bar input {
  background: #12141c;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .search-results {
  background: #14161f;
}

[data-theme="dark"] .search-result-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .schedule-totals {
  background: #0e1018;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .transfer-section {
  background: #1a1d2c;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .history-item {
  background: #1a1d2c;
}

[data-theme="dark"] .btn-search-toggle,
[data-theme="dark"] .btn-export {
  background: #1e2130 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .worker-select-item {
  background: #1a1d2c;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .btn-worker-filter {
  background: #1e2130 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .waitlist-panel {
  background: #0e1018;
}

[data-theme="dark"] .waitlist-card {
  background: #1a1d2c;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .dayview-table th {
  background: #1c1f2e;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .dayview-table td {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dayview-table td:first-child {
  background: #14161f;
}

[data-theme="dark"] .btn-dayview-toggle {
  background: #1e2130 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Loading overlay */
#loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

[data-theme="dark"] #loading-overlay { background: rgba(0,0,0,0.5); }

/* Confirm/Alert modal header */
.modal-header {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* Confirm/Alert modal message */
#confirm-message, #alert-message {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Dark mobile worker name row */
@media (max-width: 768px) {
  [data-theme="dark"] .schedule-table .worker-name-cell {
    background: #1a1e30;
    border-right: none;
    border-bottom: 2px solid rgba(250, 166, 26, 0.2);
  }

  [data-theme="dark"] .schedule-table tr.worker-row {
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* Mobile: bigger touch targets */
  .apt-card {
    padding: 10px 34px 10px 10px;
    font-size: 14px;
    min-height: 44px;
  }

  .apt-add-btn {
    height: 44px;
    line-height: 44px;
    font-size: 22px;
    opacity: 0.7;
  }

  .btn-apt-done {
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
  }

  .btn-set-dayoff,
  .btn-remove-dayoff {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
  }

  /* Mobile: modal full-width */
  .modal-content {
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
    padding: 16px 14px;
    padding-bottom: 30px;
  }

  .modal-content h2 {
    font-size: 17px;
    margin-bottom: 16px;
  }

  /* Mobile: form inputs bigger */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
    padding: 10px 12px;
    min-height: 44px;
  }

  .form-group label {
    font-size: 13px;
    margin-bottom: 4px;
  }

  /* Mobile: buttons bigger */
  .btn {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 16px;
  }

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

  .btn-group .btn {
    width: 100%;
  }

  /* Mobile: header compact */
  .app-header {
    height: 52px;
    padding: 0 10px;
  }

  .app-header h1 {
    font-size: 16px;
    letter-spacing: 1px;
  }

  .header-nav button {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Mobile: week nav compact */
  .week-nav {
    padding: 8px 8px;
    gap: 4px;
  }

  .week-nav .week-label {
    font-size: 13px;
    min-width: 140px;
  }

  .week-nav button {
    width: 34px;
    height: 34px;
  }

  /* Mobile: search bar */
  .search-bar {
    padding: 6px 8px;
  }

  .search-bar input {
    font-size: 16px;
    min-height: 40px;
  }

  /* Mobile: settings sections */
  .settings-section {
    padding: 14px 12px;
  }

  /* Mobile: apt-note visible */
  .apt-card .apt-note {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* === EXTRA SMALL SCREENS (phones < 400px) === */
@media (max-width: 400px) {
  .app-header h1 {
    font-size: 14px;
  }

  .header-nav button {
    padding: 5px 6px;
    font-size: 11px;
  }

  .theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .week-nav .week-label {
    font-size: 12px;
    min-width: 120px;
  }

  .btn-today, .btn-filter-today {
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}

/* === PRINT STYLES === */
@media print {
  .app-header, .bottom-nav, .week-nav, .fab, .search-bar,
  .waitlist-panel, .btn-set-dayoff, .btn-remove-dayoff,
  .apt-add-btn, .btn-apt-done, .btn-export, .btn-search-toggle,
  .btn-refresh, .btn-dayview-toggle, .btn-worker-filter,
  .theme-toggle, #loading-overlay, .modal-overlay,
  .apt-count-badge { display: none !important; }

  body { padding: 0; background: #fff; color: #000; font-size: 11px; }
  .schedule-container { padding: 4px; overflow: visible; }
  .schedule-table { min-width: auto; }
  .schedule-table th, .schedule-table td { border: 1px solid #ccc; padding: 3px; }
  .schedule-table thead th { background: #eee; color: #333; }
  .apt-card { color: #000 !important; background: #f0f0f0 !important; border-left: 3px solid #666; padding: 3px 6px; margin: 2px 0; }
  .apt-card.status-done { opacity: 0.5; }
  .schedule-cell.dayoff { background: #f5f5f5 !important; }
  .dayoff-label { color: #999; }

  @page { margin: 10mm; }
}