/* ============================================
   main.css - Shared styles for CAGEwrx Ops
   ============================================ */

/* ---- Reset & Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080808;
  color: #e0e0e0;
  min-height: 100vh;
  color-scheme: dark;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #777;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.btn:hover { background: #1e1e1e; color: #ccc; }
.btn-green { background: #0a1f0a; border-color: #1a4a1a; color: #4caf50; }
.btn-green:hover { background: #0f2a0f; }
.btn-red { background: #1f0808; border-color: #4a1010; color: #ef5350; }
.btn-red:hover { background: #2a0f0f; }
.btn-blue { background: #0a1525; border-color: #1a3a5a; color: #42a5f5; }
.btn-blue:hover { background: #0f1f35; }
.btn-amber { background: #1a0f00; border-color: #3a2200; color: #ffa726; }
.btn-amber:hover { background: #251500; }

/* ---- Banner notifications ---- */
.banner {
  position: fixed !important;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  display: none;
  z-index: 99999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  max-width: 90vw;
  text-align: center;
  white-space: nowrap;
}
.banner.show { display: block; }
.banner.error { background: #2a0d0d; border: 1px solid #c62828; color: #ff8a80; }
.banner.success { background: #0d2a0d; border: 1px solid #2e7d32; color: #81c784; }

@media (max-width: 768px) {
  .banner { top: auto; bottom: 78px; max-width: 92vw; white-space: normal; }
}

/* ---- Spinner ---- */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #1a1a1a;
  border-top-color: #42a5f5;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Avatar ---- */
.avatar-wrap { position: relative; }

#user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3949ab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  user-select: none;
  flex-shrink: 0;
}
#user-avatar:hover { border-color: #42a5f5; }

/* ---- Avatar trigger wrap ---- */
.avatar-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.avatar-trigger:hover { background: rgba(255,255,255,0.05); }

.avatar-name-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-trigger:hover .avatar-name-label { color: #ccc; }

#av-dd {
  display: none;
  position: fixed;
  right: 16px;
  top: 70px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  min-width: 240px;
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  overflow: hidden;
}
.av-profile { padding: 16px 18px; border-bottom: 1px solid #222; }
.av-profile-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.av-profile-email { font-size: 12px; color: #555; margin-bottom: 10px; }
#avatar-role-badge {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  background: #0a1525;
  color: #42a5f5;
  border: 1px solid #1a3a5a;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.av-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 13px;
  color: #888;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.av-menu-item:hover { background: #1a1a1a; color: #e0e0e0; }
.av-menu-item.danger:hover { background: #1f0808; color: #ef5350; }
.av-divider { border: none; border-top: 1px solid #1a1a1a; margin: 0; }

/* ---- Modals ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

/* Date picker always floats above other modals */
#date-picker-modal { z-index: 3000; }

.modal {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 24px;
  width: 380px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 #1a1a1a;
}
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: #1a1a1a; }
.modal::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.modal::-webkit-scrollbar-thumb:hover { background: #444; }

#split-items-list {
  scrollbar-width: thin;
  scrollbar-color: #333 #1a1a1a;
}
#split-items-list::-webkit-scrollbar { width: 6px; }
#split-items-list::-webkit-scrollbar-track { background: #1a1a1a; }
#split-items-list::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.modal-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.modal label {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: block;
  margin-bottom: 4px;
  margin-top: 12px;
}
.modal input,
.modal select,
.modal textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e0e0e0;
  outline: none;
  font-family: inherit;
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus { border-color: #42a5f5; }
.modal textarea { resize: vertical; min-height: 80px; }
.modal-btns { display: flex; gap: 8px; margin-top: 20px; }
.modal-btn {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.modal-btn-cancel { background: #1a1a1a; color: #888; }
.modal-btn-save { background: #0f2a0f; color: #4caf50; border: 1px solid #1a4a1a; }
.modal-btn-save:hover { background: #1a3a1a; }

/* ---- Form helpers ---- */
.field-label {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
}
.field-input {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e0e0e0;
  outline: none;
  font-family: inherit;
}
.field-input:focus { border-color: #42a5f5; }

/* ---- Color classes ---- */
.green  { color: #4caf50; }
.red    { color: #ef5350; }
.blue   { color: #42a5f5; }
.amber  { color: #ffa726; }
.purple { color: #ce93d8; }
.teal   { color: #4db6ac; }
.purple { color: #b39ddb; }
.orange { color: #ff7043; }
.pink   { color: #f48fb1; }

/* ============================================
   Date Picker styles
   ============================================ */

.date-input-wrap {
  position: relative;
}

.date-input-btn {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e0e0e0;
  outline: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.date-input-btn:hover { border-color: #42a5f5; }
.date-input-btn .placeholder { color: #333; }

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 14px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.picker-cell {
  text-align: center;
  padding: 7px 4px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #bbb;
}
.picker-cell:hover { background: #1a1a1a; color: #fff; }
.picker-cell.picker-empty { cursor: default; }
.picker-cell.picker-today {
  background: #2a0000;
  color: #ff5252;
  font-weight: 800;
  border: 2px solid #e53935;
  border-radius: 6px;
  position: relative;
  padding-bottom: 12px;
}
.picker-cell.picker-today::after {
  content: 'TODAY';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6px;
  letter-spacing: .06em;
  color: #e53935;
  font-weight: 700;
  white-space: nowrap;
}
.picker-cell.picker-selected {
  background: #1565c0;
  color: #fff;
  font-weight: 700;
}

/* ============================================
   Light Mode — warm neutral palette
   ============================================ */
body.light-mode {
  background: #ffffff;
  color: #1a1a1a;
  color-scheme: light;
}

/* Header */
body.light-mode .shared-header {
  background: #2c3440;
  border-bottom-color: #1e2530;
}
body.light-mode .shared-header-title { color: #ffffff; }
body.light-mode .shared-header-label { color: #ff6b6b; }
body.light-mode .shared-header-logo { filter: brightness(1.1); }

/* Buttons in header need to pop against dark header */
body.light-mode .shared-header-right .btn {
  background: #3d4654;
  border-color: #4a5568;
  color: #e0e0e0;
}
body.light-mode .shared-header-right .btn:hover {
  background: #4a5568;
  color: #fff;
}
body.light-mode .shared-header-right .btn-green {
  background: #2e7d32;
  border-color: #1b5e20;
  color: #fff;
}
body.light-mode .shared-header-right .btn-blue {
  background: #1565c0;
  border-color: #0d47a1;
  color: #fff;
}
body.light-mode .avatar-name-label { color: #ccc; }
body.light-mode .avatar-trigger:hover { background: rgba(255,255,255,0.1); }
body.light-mode #user-avatar {
  background: #e53935;
  color: #fff;
}

/* Search bar below header (ops page) */
body.light-mode .ops-search-bar {
  background: #3a4452;
  border-bottom-color: #2c3440;
}
body.light-mode .ops-search-bar .search-wrap {
  background: #4a5568;
  border-color: #5a6680;
}
body.light-mode .ops-search-bar .search-input { color: #fff; }
body.light-mode .ops-search-bar .search-input::placeholder { color: #aab; }
body.light-mode .ops-search-bar .search-clear { color: #aab; }

/* Search */
body.light-mode .search-wrap { background: #e8e4df; border-color: #c0bcb7; }
body.light-mode .search-input { color: #1a1a1a; background: transparent; }
body.light-mode .search-input::placeholder { color: #999; }
body.light-mode .search-clear { color: #999; }
body.light-mode .ops-search-bar { background: #fff; border-bottom-color: #d0ccc7; }

/* Buttons */
body.light-mode .btn { background: #fff; border-color: #c8c4bf; color: #444; }
body.light-mode .btn:hover { background: #f0ede8; color: #111; }
body.light-mode .btn-green { background: #e6f4ea; border-color: #8bc49a; color: #1b5e20; }
body.light-mode .btn-amber { background: #fff8e1; border-color: #f9a825; color: #e65100; }
body.light-mode .btn-blue  { background: #e3f0fc; border-color: #7ab3e0; color: #0d47a1; }
body.light-mode .btn-green:hover { background: #c8e6c9; }

/* Banners */
body.light-mode .banner.success { background: #e6f4ea; border-color: #8bc49a; color: #1b5e20; }
body.light-mode .banner.error   { background: #fdecea; border-color: #e57373; color: #b71c1c; }

/* Main layout */
body.light-mode .main { background: #ffffff; }

/* Stats bar */
body.light-mode .stat { background: #fff; border-color: #d8d4cf; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
body.light-mode .stat-label { color: #777; }
body.light-mode .stat-val { color: #1a1a1a; }

/* Sidebar */
body.light-mode .sidebar { background: #fff; border-right-color: #d8d4cf; }
body.light-mode .sidebar-link { color: #555; }
body.light-mode .sidebar-link:hover { background: #f0ede8; color: #1a1a1a; }
body.light-mode .sidebar-link.active { background: #fdecea; color: #c62828; }
body.light-mode .sidebar-brand { color: #1a1a1a; }

/* Pipeline stages */
body.light-mode .stage { background: #fff; border-color: #b0b8c4; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
body.light-mode .stage-body { background: #dadfe5; }
body.light-mode .kits-body { background: #dadfe5; }
body.light-mode .backorder-body { background: #dadfe5; }
body.light-mode .tagpull-body { background: #dadfe5; }
body.light-mode .stage-chevron { color: #444 !important; }
body.light-mode .stage-header span { opacity: 1; filter: none; }

/* Order cards */
body.light-mode .order-card { background: #fff; border-color: #d8d4cf; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
body.light-mode .order-card:hover { border-color: #b0aca7; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
body.light-mode .order-card.highlight { background: #e6f4ea; border-color: #66bb6a; }
body.light-mode .order-card.dimmed { opacity: 0.35; }
body.light-mode .order-num,
body.light-mode .order-num[style] { color: #c62828 !important; font-weight: 700; }
body.light-mode .order-item { color: #2a2a2a; }
body.light-mode .order-ship { background: #e8e4df; color: #666; }

/* Buttons on cards */
body.light-mode .edit-btn { color: #bbb; }
body.light-mode .edit-btn:hover { color: #1565c0; }
body.light-mode .done-btn { color: #bbb; }
body.light-mode .done-btn:hover { color: #2e7d32; }
body.light-mode .split-btn:hover { color: #e65100; }

/* Pills */
body.light-mode .pill-color { background: #f0ede8; color: #555; border-color: #ccc8c3; }
body.light-mode .pill-date  { background: #e3f0fc; color: #0d47a1; border-color: #7ab3e0; }
body.light-mode .pill-po    { background: #fff8e1; color: #e65100; border-color: #f9a825; }
body.light-mode .pill-eta   { background: #fff3e0; color: #bf360c; border-color: #ffb74d; }
body.light-mode .pill-order { background: #ede7f6; color: #311b92; border-color: #9575cd; }

/* Empty state */
body.light-mode .empty { color: #bbb; }
body.light-mode .task-empty { color: #bbb; }

/* Kits/special sections */
body.light-mode .kits-body { background: #fafaf8; }
body.light-mode .backorder-body { background: #fafaf8; }

/* Modals */
body.light-mode .modal-overlay { background: rgba(0,0,0,0.4); }
body.light-mode .move-modal,
body.light-mode .modal { background: #fff; border-color: #d0ccc7; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
body.light-mode .modal-title { color: #1a1a1a; }
body.light-mode .modal label { color: #666; }
body.light-mode .modal input,
body.light-mode .modal select,
body.light-mode .modal textarea {
  background: #f5f2ee;
  border-color: #ccc8c3;
  color: #1a1a1a;
}
body.light-mode .modal input:focus,
body.light-mode .modal select:focus,
body.light-mode .modal textarea:focus { border-color: #e53935; }
body.light-mode .modal-btn-cancel { background: #f0ede8; border-color: #ccc; color: #555; }
body.light-mode .modal-btn-save { background: #e53935; color: #fff; border-color: #c62828; }
body.light-mode .modal-btn-save:hover { background: #c62828; }
body.light-mode .modal { scrollbar-color: #b0aca7 #f5f2ee; }
body.light-mode .modal::-webkit-scrollbar-track { background: #f5f2ee; }
body.light-mode .modal::-webkit-scrollbar-thumb { background: #b0aca7; }
body.light-mode .modal::-webkit-scrollbar-thumb:hover { background: #999; }
body.light-mode #split-items-list { scrollbar-color: #b0aca7 #f5f2ee; }
body.light-mode #split-items-list::-webkit-scrollbar-track { background: #f5f2ee; }
body.light-mode #split-items-list::-webkit-scrollbar-thumb { background: #b0aca7; }

/* Date input */
body.light-mode .date-input-btn { background: #f5f2ee; border-color: #ccc8c3; color: #333; }

/* Avatar dropdown */
body.light-mode #av-dd { background: #fff; border-color: #d0ccc7; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.light-mode .av-profile-name { color: #1a1a1a; }
body.light-mode .av-profile-email { color: #777; }
body.light-mode #avatar-role-badge { background: #e3f0fc; color: #0d47a1; border-color: #7ab3e0; }
body.light-mode .av-menu-item { color: #555; }
body.light-mode .av-menu-item:hover { background: #f0ede8; color: #1a1a1a; }
body.light-mode .av-menu-item.danger:hover { background: #fdecea; color: #c62828; }
body.light-mode .avatar-name-label { color: #555; }

/* Calendar */
body.light-mode .calendar-section { background: #fff; border-color: #b0b8c4; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
body.light-mode .cal-header { background: #dadfe5; border-bottom-color: #b0b8c4; }
body.light-mode .cal-title { color: #1a1a1a; }
body.light-mode .cal-nav { background: rgba(0,0,0,0.12); border-color: #9aa0aa; color: #1a1a1a; }
body.light-mode .cal-nav:hover { background: rgba(0,0,0,0.2); color: #000; }
body.light-mode .cal-grid { border-left-color: #e0dbd5; }
body.light-mode .cal-dayname { color: #888; border-color: #e0dbd5; }
body.light-mode .cal-cell { border-color: #dadfe5; background: #f5f7fa; }
body.light-mode .cal-cell:hover { background: #f5f2ee; }
body.light-mode .cal-cell.cal-empty { background: #e8ecf0; }
body.light-mode .cal-cell.cal-today { background: #b8bec8; border: 2px solid #6b7280; }
body.light-mode .cal-date { color: #999; }
body.light-mode .cal-cell.cal-today .cal-date { color: #fff; font-weight: 700; }
body.light-mode .cal-month-label { background: #b8bec8; color: #1a1a1a; border-color: #9aa0aa; }
body.light-mode .cal-load-more-btn { background: #f0ede8; color: #999; border-color: #d8d4cf; }
body.light-mode .cal-load-more-btn:hover { background: #e8e4df; color: #555; }
body.light-mode .cal-legend { background: #fafaf8; border-color: #e0dbd5; }

/* Misc */
body.light-mode .refresh-indicator { background: #fff; border-color: #d8d4cf; color: #777; }
body.light-mode .timestamp { color: #aaa; }
body.light-mode .section-label { color: #aaa; }
body.light-mode .spinner { border-color: #d8d4cf; border-top-color: #e53935; }

/* Date picker */
body.light-mode .picker-cell { color: #444; }
body.light-mode .picker-cell:hover { background: #f0ede8; color: #1a1a1a; }
body.light-mode .picker-cell.picker-selected { background: #c62828; color: #fff; }
body.light-mode .picker-header { background: #f5f2ee; border-color: #d8d4cf; color: #333; }

/* ---- Light mode: Production page ---- */
body.light-mode .prod-main { background: #ffffff; }
body.light-mode .prod-stage { background: #fff; border-color: #d8d4cf; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
body.light-mode .prod-stage-header { background: #dadfe5; border-bottom-color: #b0b8c4; }
body.light-mode .prod-stage-title { color: #1a1a1a; }
body.light-mode .prod-stage-header span { filter: none; }
body.light-mode .task-card { background: #fff; border-color: #d8d4cf; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
body.light-mode .task-card:hover { border-color: #b0aca7; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
body.light-mode .task-title { color: #1a1a1a; }
body.light-mode .task-desc { color: #666; }
body.light-mode .task-pill { background: #f0ede8; color: #555; border-color: #ccc8c3; }
body.light-mode .task-pill-priority-high { background: #fdecea; color: #c62828; border-color: #e57373; }
body.light-mode .task-pill-priority-medium { background: #fff8e1; color: #e65100; border-color: #ffb74d; }
body.light-mode .task-pill-priority-low { background: #e6f4ea; color: #2e7d32; border-color: #81c784; }
body.light-mode .task-pill-assigned { background: #e3f0fc; color: #0d47a1; border-color: #7ab3e0; }
body.light-mode .task-empty { color: #bbb; }
body.light-mode .welcome-bar { background: #fff; border-color: #d8d4cf; color: #444; }
body.light-mode .welcome-bar strong { color: #1a1a1a; }
body.light-mode .assignee-btn { background: #fff; border-color: #d8d4cf; color: #555; }
body.light-mode .assignee-btn:hover { background: #f0ede8; color: #1a1a1a; }
body.light-mode .assignee-btn.active { background: #fdecea; border-color: #e53935; color: #c62828; }

/* ---- Light mode: FAQ page ---- */
body.light-mode .faq-main { background: #ffffff; }
body.light-mode .faq-search-wrap { background: #fff; border-color: #d8d4cf; }
body.light-mode .faq-search-input { color: #1a1a1a; background: transparent; }
body.light-mode .faq-cat-btn { background: #fff; border-color: #d8d4cf; color: #555; }
body.light-mode .faq-cat-btn.active { background: #fdecea; border-color: #e53935; color: #c62828; }
body.light-mode .faq-item { background: #fff; border-color: #d8d4cf; }
body.light-mode .faq-question { color: #1a1a1a; }
body.light-mode .faq-answer { color: #444; background: #f5f2ee; border-top-color: #e0dbd5; }

/* ---- Light mode: Activity Log ---- */
body.light-mode .act-main { background: #ffffff; }
body.light-mode .act-search-wrap { background: #fff; border-color: #d8d4cf; }
body.light-mode .act-search-input { color: #1a1a1a; background: transparent; }
body.light-mode .act-select { background: #fff; border-color: #d8d4cf; color: #444; }
body.light-mode .act-entry { background: #fff; border-color: #d8d4cf; }
body.light-mode .act-summary { color: #1a1a1a; }
body.light-mode .act-changes { background: #f5f2ee; color: #555; }
body.light-mode .act-timestamp { color: #888; }

/* ---- Light mode: Admin Panel ---- */
body.light-mode .doc-main { background: #ffffff; }
body.light-mode .doc-toolbar { background: #fff; border-color: #d8d4cf; }
body.light-mode .doc-search-wrap { background: #f5f2ee; border-color: #ccc8c3; }
body.light-mode .doc-search-input { color: #1a1a1a; background: transparent; }
body.light-mode .doc-card { background: #fff; border-color: #d8d4cf; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
body.light-mode .doc-card-name { color: #1a1a1a; }
body.light-mode .doc-card-meta { color: #777; }
body.light-mode .admin-section { background: #f0ede8; }
body.light-mode .user-row { background: #fff; border-color: #d8d4cf; }
body.light-mode .user-name { color: #1a1a1a; }
body.light-mode .user-email { color: #666; }

/* ---- Light mode: Shared sidebar ---- */
body.light-mode .sidebar { background: #fff; border-right-color: #d8d4cf; }
body.light-mode .sidebar-link { color: #555; }
body.light-mode .sidebar-link:hover,
body.light-mode .sidebar-link:hover .sidebar-link-icon,
body.light-mode .sidebar-link:hover .sidebar-link-label { background: #f0ede8; color: #1a1a1a; }
body.light-mode .sidebar-link.active { background: #fdecea; color: #c62828; }
body.light-mode .sidebar-brand { color: #1a1a1a; }
body.light-mode .sidebar-pin { color: #888; }
body.light-mode #av-dd { background: #fff; border-color: #d0ccc7; }
body.light-mode .admin-submenu-popup { background: #fff; border-color: #d0ccc7; }
body.light-mode .admin-submenu-item { color: #555; }
body.light-mode .admin-submenu-item:hover { background: #fdecea; color: #c62828; }

/* ---- Light mode: Mobile bottom bar ---- */
body.light-mode .mobile-nav { background: #fff; border-top-color: #d8d4cf; }
body.light-mode .mobile-nav-item { color: #888; }
body.light-mode .mobile-nav-item.active { color: #c62828; }

/* ---- Light mode: App shell ---- */
body.light-mode .app-content { background: #ffffff; }
body.light-mode .app-shell { background: #ffffff; }

/* ---- Light mode: vivid color-coded section headers — white text ---- */

/* New Orders — vivid orange */
body.light-mode [id="stage-new"] .stage-header,
body.light-mode [id="stage-new"] .stage-header.stage-toggle {
  background: #e65100 !important; border-bottom-color: #bf360c !important;
}
body.light-mode [id="stage-new"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-new"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Ready to Ship — vivid green */
body.light-mode [id="stage-ready"] .stage-header,
body.light-mode [id="stage-ready"] .stage-header.stage-toggle {
  background: #2e7d32 !important; border-bottom-color: #1b5e20 !important;
}
body.light-mode [id="stage-ready"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-ready"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Drop Shipping — vivid purple */
body.light-mode [id="stage-dropship"] .stage-header,
body.light-mode [id="stage-dropship"] .stage-header.stage-toggle {
  background: #7b1fa2 !important; border-bottom-color: #6a1b9a !important;
}
body.light-mode [id="stage-dropship"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-dropship"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Assembled — vivid blue */
body.light-mode [id="stage-assembled"] .stage-header,
body.light-mode [id="stage-assembled"] .stage-header.stage-toggle {
  background: #1565c0 !important; border-bottom-color: #0d47a1 !important;
}
body.light-mode [id="stage-assembled"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-assembled"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Powder Coat — vivid amber */
body.light-mode [id="stage-powdercoat"] .stage-header,
body.light-mode [id="stage-powdercoat"] .stage-header.stage-toggle {
  background: #e65100 !important; border-bottom-color: #bf360c !important;
}
body.light-mode [id="stage-powdercoat"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-powdercoat"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Ready for Pickup — vivid teal */
body.light-mode [id="stage-pickup"] .stage-header,
body.light-mode [id="stage-pickup"] .stage-header.stage-toggle {
  background: #00695c !important; border-bottom-color: #004d40 !important;
}
body.light-mode [id="stage-pickup"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-pickup"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Cage Kits — vivid deep purple */
body.light-mode [id="stage-kits"] .stage-header,
body.light-mode [id="stage-kits"] .stage-header.stage-toggle {
  background: #4527a0 !important; border-bottom-color: #311b92 !important;
}
body.light-mode [id="stage-kits"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-kits"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Tag & Pull — vivid gold/brown */
body.light-mode [id="stage-tagpull"] .stage-header,
body.light-mode [id="stage-tagpull"] .stage-header.stage-toggle {
  background: #f57f17 !important; border-bottom-color: #e65100 !important;
}
body.light-mode [id="stage-tagpull"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-tagpull"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Backordered — vivid red */
body.light-mode [id="stage-backorder"] .stage-header,
body.light-mode [id="stage-backorder"] .stage-header.stage-toggle {
  background: #c62828 !important; border-bottom-color: #b71c1c !important;
}
body.light-mode [id="stage-backorder"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-backorder"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* Out of Stock — dark red */
body.light-mode [id="stage-oos"] .stage-header,
body.light-mode [id="stage-oos"] .stage-header.stage-toggle {
  background: #8b0000 !important; border-bottom-color: #6a0000 !important;
}
body.light-mode [id="stage-oos"] .stage-title { color: #fff !important; }
body.light-mode [id="stage-oos"] .stage-count { background: rgba(255,255,255,0.25) !important; color: #fff !important; }

/* ---- Powder coat SENT date sub-headers ---- */
body.light-mode .powder-group-label {
  background: #ffddb0 !important;
  color: #7a3d00 !important;
  border-left-color: #ffa726 !important;
}
body.light-mode .powder-group + .powder-group {
  border-top-color: #b8bec8 !important;
}

/* ---- Stage body — unified medium gray (no blue tint) ---- */
body.light-mode .stage-body,
body.light-mode .kits-body,
body.light-mode .backorder-body,
body.light-mode .tagpull-body,
body.light-mode .pc-group-body,
body.light-mode .oos-body { background: #dadfe5 !important; }

/* Stage card area (white bg with gray body looks patchy) */
body.light-mode .stage { background: #dadfe5 !important; border-color: #a8adb8; }
body.light-mode .order-card { background: #ffffff !important; }

/* ---- Calendar day-name row (top key) — dark text ---- */
body.light-mode .cal-dayname { color: #1a1a1a !important; border-color: #b0b8c4; }
body.light-mode .cal-daynames-row { background: #dadfe5 !important; }

/* ---- Main shared header — keep it dark ---- */
body.light-mode .shared-header { background: #111827 !important; border-bottom-color: #0a0f1a !important; }

/* ---- Prod stage headers ---- */
body.light-mode .prod-stage-header { background: #dadfe5 !important; border-bottom-color: #a8adb8 !important; }
body.light-mode .prod-stage-title { color: #1a1a1a !important; }

/* ---- Light mode: dark color-coded borders per section ---- */
body.light-mode [id="stage-new"]       { border: 2px solid #c45000 !important; }
body.light-mode [id="stage-ready"]     { border: 2px solid #2a7a40 !important; }
body.light-mode [id="stage-dropship"]  { border: 2px solid #7a2ab0 !important; }
body.light-mode [id="stage-assembled"] { border: 2px solid #0d4a9e !important; }
body.light-mode [id="stage-powdercoat"]{ border: 2px solid #b05a00 !important; }
body.light-mode [id="stage-pickup"]    { border: 2px solid #006650 !important; }
body.light-mode [id="stage-kits"]      { border: 2px solid #5a1aaa !important; }
body.light-mode [id="stage-tagpull"]   { border: 2px solid #8a6000 !important; }
body.light-mode [id="stage-backorder"] { border: 2px solid #aa0000 !important; }
body.light-mode [id="stage-oos"]       { border: 2px solid #8b0000 !important; }

/* ---- Light mode: calendar events - force white text to read on colored bg ---- */
body.light-mode .cal-event { color: #ffffff !important; font-weight: 600; }

/* ---- Light mode: stat counter boxes color-coded ---- */
body.light-mode .stat { background: #fff; border: 1px solid #d0d5dc; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
body.light-mode .stat-label { color: #555; }
body.light-mode #stat-new      { color: #e65100; }
body.light-mode #stat-ready    { color: #2e7d32; }
body.light-mode #stat-back     { color: #c62828; }
body.light-mode #stat-dropship { color: #7b1fa2; }
body.light-mode #stat-assembled{ color: #1565c0; }
body.light-mode #stat-powder   { color: #e65100; }
body.light-mode #stat-pickup   { color: #00695c; }
body.light-mode #stat-kits     { color: #4527a0; }