/* ── SETTINGS PAGE STYLES ──
   Phase 12E: extracted verbatim from components.css lines 469-759 (no rule changes).
   Cascade order preserved exactly: stylesheet links in index.html load these files
   in the original source order. Contents: Settings full-screen page, inner tabs, section cards, ETA countdown classes, handoff report modal, SMTP test field, WH summary bar, CEO dashboard, analytics mode switcher, notification toggles, daily summary time input, holiday week-tab indicators + settings table, carrier/customer filter dropdowns */

/* ── Settings full-screen page ──────────────────────────────────────────── */
#settingsModal { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 250; flex-direction: column; }
#settingsModal.open { display: flex; }

.settings-page-header { height: 64px; background: var(--surface); border-bottom: 2px solid var(--accent); display: flex; align-items: center; padding: 0 28px; gap: 16px; flex-shrink: 0; }
.settings-page-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 4px; color: var(--accent); }
.settings-page-body { display: flex; flex: 1; overflow: hidden; }

.settings-sidebar { width: 220px; background: var(--surface); border-right: 1px solid var(--border); padding: 24px 0; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.settings-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 24px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; color: var(--muted); cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; text-transform: uppercase; user-select: none; }
.settings-nav-item:hover { color: var(--text); background: var(--surface2); }
.settings-nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--surface2); }
.settings-nav-item .nav-icon { font-size: 1.1rem; width: 20px; text-align: center; }

.settings-content { flex: 1; overflow-y: auto; padding: 36px 48px; }
.settings-content::-webkit-scrollbar { width: 6px; }
.settings-content::-webkit-scrollbar-track { background: var(--bg); }
.settings-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.settings-tab { display: none; max-width: 780px; }
.settings-tab.active { display: block; }

.settings-tab-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 3px; color: var(--accent); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

.settings-section { margin-bottom: 36px; }
.settings-section-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.settings-section-hint { font-size: 0.72rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ── Settings toggle rows (checkbox + label + helper text) ─────────────────── */
.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}
.settings-toggle-row + .settings-toggle-row { border-top: 1px solid var(--border, #334155); }
.settings-toggle-input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent, #f59e0b); }
.settings-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.settings-toggle-hint { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }

/* ── Settings inner tabs ─────────────────────────────────────────────────── */
.settings-inner-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border, #334155); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.settings-inner-tabs::-webkit-scrollbar { display: none; }
.settings-inner-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted, #64748b); padding: 10px 18px; font-size: 0.82rem; cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: inherit; margin-bottom: -1px; }
.settings-inner-tab:hover { color: var(--text-primary, #f1f5f9); }
.settings-inner-tab.active { color: var(--accent, #f59e0b); border-bottom-color: var(--accent, #f59e0b); font-weight: 600; }
.settings-inner-panel { display: none; }
.settings-inner-panel.active { display: block; }

/* ── Settings section cards ──────────────────────────────────────────────── */
.settings-section-card { background: var(--surface2, #1e293b); border: 1px solid var(--border, #334155); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.settings-section-card-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted, #64748b); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; font-weight: 700; }

/* ── Settings-scoped feedback banner (e.g. "User deleted") ──────────────────
   Renders inside the Settings page so confirmed actions are visible without
   closing Settings. It sticks to the top of the scrollable Settings content so
   that even if the user has scrolled down the user list, the result stays in
   view (paired with scrollIntoView in showSettingsFeedback). Color is always
   paired with text + an icon (never color-only). */
.settings-feedback { position: sticky; top: 0; z-index: 5; font-size: 0.85rem; font-weight: 600; padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,0.28); }
.settings-feedback.is-success { background: rgba(74,222,128,0.12); border-color: var(--accent2, #4ade80); color: var(--accent2, #4ade80); }
.settings-feedback.is-success::before { content: '✓ '; font-weight: 800; }
.settings-feedback.is-error { background: rgba(220,38,38,0.12); border-color: var(--red, #dc2626); color: var(--red, #f87171); }
.settings-feedback.is-error::before { content: '✕ '; font-weight: 800; }

/* ── Settings-scoped confirmation dialog (e.g. Delete User) ──────────────────
   The delete confirmation is appended INSIDE #settingsModal (see
   confirmDeleteUser) rather than document.body, so:
     • it inherits the Settings stacking context and always paints ABOVE the
       Settings content — never behind it,
     • it is bounded to the Settings page, so the user can never mistake it for a
       modal over the main Live Board, and
     • the dim is lighter than the global .modal-backdrop (0.45 vs 0.75, no blur)
       so the Settings page stays clearly visible behind it as the active context.
   position:absolute fills #settingsModal (a fixed, inset:0 ancestor). */
.settings-scoped-modal { display: none; position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,0.45); align-items: center; justify-content: center; padding: 20px; }
.settings-scoped-modal.open { display: flex; }
/* A small breadcrumb tying the dialog to where the user is, reinforcing that the
   action is owned by Settings. */
.settings-scoped-modal-context { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #f59e0b); margin-bottom: 10px; }

.settings-input-row { display: flex; gap: 10px; align-items: center; }
.settings-input-row input, .settings-input-row select { flex: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.85rem; padding: 9px 12px; border-radius: 5px; }
.settings-input-row input:focus, .settings-input-row select:focus { outline: none; border-color: var(--accent2); }
.settings-input-row select option { background: var(--surface2); }

/* ── ETA countdown classes ──────────────────────────────────────────────── */
@keyframes eta-pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
.eta-far      { color: #94a3b8; }
.eta-soon     { color: var(--text); }
.eta-warn     { color: #f59e0b; font-weight: 700; }
.eta-imminent { color: #f97316; font-weight: 700; }
.eta-now      { color: var(--accent); font-weight: 700; animation: eta-pulse 1s infinite; }
.eta-overdue  { color: #ef4444; font-weight: 700; }

/* ── Handoff report modal ────────────────────────────────────────────────── */
#handoff-modal {
  background: white;
  color: #0f172a;
  font-family: sans-serif;
  padding: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.handoff-section {
  margin-bottom: 28px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 20px;
}
.handoff-section h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  margin: 0 0 12px 0;
}
.handoff-attention-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.88rem;
  align-items: center;
  flex-wrap: wrap;
}
.handoff-overdue  { background: #fef2f2; border-left: 4px solid #ef4444; }
.handoff-arriving { background: #fffbeb; border-left: 4px solid #f59e0b; }
.handoff-loading  { background: #eff6ff; border-left: 4px solid #3b82f6; }
.handoff-dwell    { background: #fdf4ff; border-left: 4px solid #a855f7; }

@media print {
  #handoff-modal-overlay > div:first-child { display: none; }
  #handoff-modal { padding: 0; }
  .handoff-overdue, .handoff-arriving,
  .handoff-loading, .handoff-dwell {
    border-left-width: 3px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

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

@media print {
  #qr-all-overlay {
    position: static;
    background: white;
    padding: 0;
  }
  #qr-all-overlay button,
  #qr-all-overlay h2 { display: none; }
  .qr-all-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}

/* ── SMTP test To field ──────────────────────────────────────────────────── */
#smtp-test-to {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  flex: 1;
}
#smtp-test-to:focus {
  outline: none;
  border-color: var(--accent2);
}

/* ── WH summary bar (CEO all-warehouse view) ─────────────────────────────── */
#wh-summary-bar { display: flex; gap: 12px; padding: 0 0 16px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
#wh-summary-bar::-webkit-scrollbar { display: none; }
.wh-summary-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; cursor: pointer; min-width: 140px; transition: border-color 0.15s; flex-shrink: 0; }
.wh-summary-card:hover { border-color: var(--accent); }
.wh-summary-code { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.wh-summary-name { font-size: 0.7rem; color: var(--muted); margin-bottom: 8px; }
.wh-summary-counts { display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; }
.wh-count-total   { color: var(--text); }
.wh-count-pending { color: #f59e0b; }
.wh-count-active  { color: #22c55e; }
.wh-summary-alerts { color: #ef4444; font-size: 0.7rem; font-weight: 700; margin-top: 4px; }

/* ── CEO Dashboard ───────────────────────────────────────────────────────── */
.ceo-dashboard-header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--surface2); font-size:0.85rem; font-weight:600; color:var(--accent); }
.ceo-totals-row { display:flex; gap:12px; padding:16px; flex-wrap:wrap; }
.ceo-total-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px 20px; text-align:center; min-width:100px; transition:transform 0.15s, border-color 0.15s; }
.ceo-total-card[onclick]:hover { transform:translateY(-2px); border-color:var(--accent, #f59e0b); }
.ceo-alert-card { border-color:#ef4444; }
.ceo-alert-card[onclick]:hover { border-color:#ef4444; box-shadow:0 4px 12px rgba(239,68,68,0.2); transform:translateY(-2px); }
.ceo-total-value { font-family:'Bebas Neue',sans-serif; font-size:2rem; line-height:1; }
.ceo-total-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-top:4px; }
.ceo-breakdown-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.ceo-breakdown-table th { text-align:left; padding:8px 12px; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); border-bottom:1px solid var(--border); }
.ceo-breakdown-table td { padding:10px 12px; border-bottom:1px solid rgba(51,65,85,0.5); }
.ceo-row-alert { background:rgba(239,68,68,0.05); }
.ceo-count-cell { transition:background 0.12s; border-radius:4px; }
.ceo-count-cell:hover { background:rgba(245,158,11,0.1); }

/* ── Analytics mode switcher ─────────────────────────────────────────────── */
.analytics-mode-pills { display:flex; gap:4px; }
.analytics-mode-btn { background:var(--surface2); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 12px; font-size:0.78rem; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.15s; }
.analytics-mode-btn.active { background:var(--accent); border-color:var(--accent); color:#000; font-weight:700; }
.analytics-mode-btn:hover:not(.active) { border-color:var(--accent2); color:var(--accent2); }
.analytics-wh-section { margin-bottom:32px; border-bottom:1px solid var(--border); padding-bottom:24px; }
.analytics-wh-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:1rem; font-weight:600; }
.analytics-grid-compare { grid-template-columns:1fr 1fr !important; max-height:none !important; }

/* ── Notification toggles ────────────────────────────────────────────────── */
.notif-toggle-row { margin-bottom: 16px; }
.notif-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.88rem; color: var(--text); }
.notif-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }

/* ── Daily summary time input (Notifications → Alert Settings) ───────────── */
#notif-summary-time {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
}
#notif-summary-time:focus {
  outline: none;
  border-color: var(--accent2);
}
#notif-summary-time::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.settings-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.settings-tag-container { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; min-height: 52px; }

/* ── Phase 17C: Settings readability polish ─────────────────────────────────
   Warehouse + Display tabs reuse the .settings-section-card look already used
   by System → Operations. Long lists scroll inside their card instead of
   growing the page. */

/* Capped scrollable lists (doors / loaders rows inside the WH panel) */
.settings-scroll-list { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.settings-scroll-list::-webkit-scrollbar { width: 6px; }
.settings-scroll-list::-webkit-scrollbar-track { background: transparent; }
.settings-scroll-list::-webkit-scrollbar-thumb { background: var(--border, #334155); border-radius: 3px; }

/* Global list sub-cards (Customers / Ship To / Carriers / Import / Merge) */
.global-list-card { margin-bottom: 16px; }
.global-list-card .settings-tag-container { background: var(--surface, #0f172a); max-height: 200px; overflow-y: auto; align-content: flex-start; }
.global-list-card .settings-tag-container::-webkit-scrollbar { width: 6px; }
.global-list-card .settings-tag-container::-webkit-scrollbar-track { background: transparent; }
.global-list-card .settings-tag-container::-webkit-scrollbar-thumb { background: var(--border, #334155); border-radius: 3px; }

/* Inputs inside section cards sit on the card surface, so use the darker
   surface token for contrast (default .settings-input-row uses surface2,
   which blends into a surface2 card). */
.settings-section-card .settings-input-row input,
.settings-section-card .settings-input-row select,
.settings-section-card .form-group input,
.settings-section-card .form-group select,
.settings-section-card .form-group textarea { background: var(--surface, #0f172a); }

/* Cards never overflow horizontally; long content wraps or scrolls inside */
.settings-section-card { min-width: 0; overflow-x: hidden; }

/* ── Holiday week-tab indicators ────────────────────────────────────────── */




/* ── Holiday settings table ──────────────────────────────────────────────── */
.holiday-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  margin-top: 4px;
}
.holiday-table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #64748b);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #334155);
  text-align: left;
}
.holiday-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(51,65,85,0.4);
  vertical-align: middle;
}
.holiday-table tr:last-child td { border-bottom: none; }

.holiday-add-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.holiday-add-form input {
  background: var(--surface, #0f172a);
  border: 1px solid var(--border, #334155);
  color: var(--text-primary, #f1f5f9);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
}
.holiday-add-form input:focus {
  outline: none;
  border-color: var(--accent, #f59e0b);
}

/* ── Carrier / Customer filter dropdowns ────────────────────────────────── */
.filter-dropdowns {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
}

.filter-dropdown {
  background: var(--surface2, #1e293b);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  max-width: 140px;
  transition: border-color 0.15s;
}

.filter-dropdown:focus {
  outline: none;
  border-color: var(--accent, #f59e0b);
  color: var(--text-primary, #f1f5f9);
}

.filter-dropdown option {
  background: var(--surface2, #1e293b);
  color: var(--text-primary, #f1f5f9);
}

@media (max-width: 768px) {
  .filter-dropdowns { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 100%; }
  .filter-dropdowns .filter-dropdown { flex: 1 1 calc(50% - 3px); max-width: calc(50% - 3px); min-width: 80px; }
}


/* ── Phase 17M: Global Lists duplicate detector ─────────────────────────────── */
.dup-type-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #f5a623);
  margin: 10px 0 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dup-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface, #0f172a);
  border: 1px solid var(--border, #2a3140);
  border-radius: 6px;
}
.dup-group-values { display: flex; flex-wrap: wrap; gap: 6px; }
.dup-group-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dup-canonical-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem; color: var(--muted, #8b93a7);
}
.dup-canonical-label select { font-size: 0.76rem; max-width: 220px; }

/* ── BOL Email Rules editor (Phase 17P) ──────────────────────────────────── */
.bol-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface2, #181c23); border: 1px solid var(--border, #252a35); border-radius: 8px;
}
.bol-row.is-disabled { opacity: 0.6; }
.bol-row-main { min-width: 0; flex: 1; }
.bol-row-title { font-size: 0.84rem; font-weight: 600; color: var(--text, #e5e7eb); }
.bol-row-sub { font-size: 0.74rem; color: var(--muted, #6b7280); margin-top: 2px; word-break: break-word; }
.bol-row-note { font-size: 0.72rem; color: var(--muted, #6b7280); font-style: italic; margin-top: 2px; }
.bol-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bol-tag-off {
  font-size: 0.64rem; background: rgba(239,68,68,0.18); color: #ef4444;
  padding: 1px 6px; border-radius: 4px; vertical-align: middle;
}
.bol-form-card {
  padding: 12px; margin: 8px 0 4px;
  background: var(--surface, #14181f); border: 1px dashed var(--border, #252a35); border-radius: 8px;
}
.bol-form-title { font-size: 0.78rem; font-weight: 700; color: var(--accent, #f5a623); margin-bottom: 8px; }
.bol-rule-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bol-rule-form-row > * { flex: 1; min-width: 120px; }
.bol-check-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.bol-check { font-size: 0.78rem; color: var(--text, #e5e7eb); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.bol-preview-grid { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bol-preview-grid > input { flex: 1; min-width: 130px; }
.bol-preview-box {
  padding: 12px; background: var(--surface2, #181c23); border: 1px solid var(--border, #252a35);
  border-radius: 8px; font-size: 0.8rem; line-height: 1.6;
}
.bol-preview-box strong { color: var(--accent2, #00d4ff); }
.bol-preview-warn { margin-top: 8px; color: #f59e0b; font-size: 0.76rem; }
@media (max-width: 640px) {
  .bol-row { flex-direction: column; }
  .bol-row-actions { width: 100%; }
}