:root {
  --dp-bg: #0f1117;
  --dp-bg-2: #111722;
  --dp-panel: #161b27;
  --dp-panel-2: #1e2535;
  --dp-panel-3: #252d40;
  --dp-border: rgba(255,255,255,0.08);
  --dp-border-strong: rgba(255,255,255,0.15);
  --dp-text: #f0f2f8;
  --dp-muted: #8892a4;
  --dp-muted-2: #5a6478;
  --dp-primary: #6366f1;
  --dp-primary-2: #8b5cf6;
  --dp-blue: #3b82f6;
  --dp-green: #10b981;
  --dp-red: #ef4444;
  --dp-orange: #f59e0b;
  --dp-shadow: 0 4px 24px rgba(0,0,0,0.30);
  --dp-radius: 14px;

  --bg: var(--dp-bg);
  --bg2: var(--dp-panel);
  --bg3: var(--dp-panel-2);
  --bg4: var(--dp-panel-3);
  --border: var(--dp-border);
  --text: var(--dp-text);
  --text2: var(--dp-muted);
  --text3: var(--dp-muted-2);
  --accent: var(--dp-primary);
  --accent2: var(--dp-primary-2);
  --green: var(--dp-green);
  --orange: var(--dp-orange);
  --red: var(--dp-red);
  --blue: var(--dp-blue);

  --bg-main: var(--dp-bg);
  --bg-card: var(--dp-panel);
  --bg-card-hover: var(--dp-panel-2);
  --text-primary: var(--dp-text);
  --text-secondary: var(--dp-muted);
  --accent-hover: #5457e8;
  --accent-glow: rgba(99,102,241,0.20);
  --danger: var(--dp-red);
  --success: var(--dp-green);
  --warning: var(--dp-orange);
}

html, body {
  background: var(--dp-bg) !important;
  color: var(--dp-text) !important;
}

body,
.main,
.main-content,
.page-content,
.module-view,
.home-view,
.settings-view,
.app-container {
  background: var(--dp-bg) !important;
  color: var(--dp-text) !important;
}

.app-header,
.topbar,
.top-bar,
.sidebar,
.module-toolbar,
header,
.card,
.stat-card,
.module-card,
.settings-panel,
.login-card,
.panel,
.section-card,
.list-card,
.manager-card,
.period-card,
.day-card,
.shift-card,
.schedule-cell,
.summary-table,
.table-container,
.warning-card,
.fault-card,
.crm-ranking-card,
.side-ranking-card {
  background: var(--dp-panel) !important;
  color: var(--dp-text) !important;
  border-color: var(--dp-border) !important;
  box-shadow: var(--dp-shadow) !important;
}

.sidebar,
.app-header,
.top-bar,
header {
  border-color: var(--dp-border) !important;
}

h1, h2, h3, h4,
.logo h2,
.brand h1,
.top-bar-title,
.stat-value,
.card-title,
.nav-item.active,
.nav-btn.active {
  color: var(--dp-text) !important;
}

p, small, label,
.date-display,
.stat-label,
.stat-sub,
.user-role,
.login-subtitle,
.text-muted,
.nav-item,
.nav-btn,
.sidebar-note span,
.section-subtitle {
  color: var(--dp-muted) !important;
}

.nav-item.active,
.nav-btn.active,
.date-btn.active,
.brand-select:focus {
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.16)) !important;
  color: var(--dp-primary) !important;
  border-color: rgba(99,102,241,.35) !important;
}

button,
.btn,
.primary-btn,
.save-btn,
.module-card button,
.ghost-btn,
.date-btn,
.brand-select,
.status-pill,
.status-badge,
input,
select,
textarea {
  border-color: var(--dp-border) !important;
}

input,
select,
textarea,
.form-input,
.search-input,
.password-row input,
.add-user-form input {
  background: var(--dp-panel-2) !important;
  color: var(--dp-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--dp-muted-2) !important;
}

.btn.primary,
.btn-primary,
.primary-btn,
.save-btn,
.module-card button,
.date-btn.active,
.login-form button,
#login-btn,
.mode-btn.primary,
.role-switch-btn.active {
  background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(99,102,241,.24) !important;
}

.btn.outline,
.btn-ghost,
.ghost-btn,
.ghost-action,
.nav-btn,
.date-btn,
.brand-select,
.theme-toggle,
.logout-btn {
  background: var(--dp-panel-2) !important;
  color: var(--dp-muted) !important;
}

.btn-danger,
#reset-planning-btn,
.logout-btn:hover {
  background: rgba(239,68,68,.14) !important;
  color: #ff6b6b !important;
  border-color: rgba(239,68,68,.35) !important;
}

.status-badge.online-db,
.status-pill,
.module-tag.green {
  background: rgba(16,185,129,.14) !important;
  color: var(--dp-green) !important;
}

.brand-icon,
.logo ion-icon,
.user-avatar,
.stat-icon.purple,
.auth-logo-icon {
  background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-2)) !important;
  color: #fff !important;
}

iframe {
  background: var(--dp-bg) !important;
}

#connection-status {
  display: none !important;
}

/* Planning readability: keep dark theme, but preserve agent and brand colors */
#planning-view #planning-table td:not(.time-slot) {
  background: #ffffff !important;
  color: #172033 !important;
}

#planning-view .agent-slot {
  background: rgba(255,255,255,0.96) !important;
  border-color: #eef1f6 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important;
}

#planning-view .table-container,
#planning-view .stats-section .table-container {
  background: transparent !important;
  box-shadow: none !important;
}

#planning-view .stats-section h3 {
  color: #ffffff !important;
}

#planning-view table:not(#planning-table) {
  background: #ffffff !important;
  color: #172033 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

#planning-view table:not(#planning-table) th,
#planning-view table:not(#planning-table) td {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #e8edf5 !important;
}

#planning-view table:not(#planning-table) th {
  color: #4b5565 !important;
  background: #f8fafc !important;
}


/* Planning sidebar ranking toggle matches nav items */
.ranking-toggle {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem 1.2rem !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--dp-muted) !important;
  font: inherit !important;
  font-weight: 800 !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  box-shadow: none !important;
}

.ranking-toggle:hover,
.ranking-toggle.open {
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.16)) !important;
  color: var(--dp-primary) !important;
  border-color: rgba(99,102,241,.35) !important;
}

.ranking-toggle ion-icon {
  font-size: 1.35rem !important;
  color: inherit !important;
}

.ranking-toggle .toggle-arrow {
  margin-left: auto !important;
}

.side-ranking-card .crm-ranking-item {
  background: #f4f7ff !important;
  color: #172033 !important;
  border: 1px solid #dce6ff !important;
  box-shadow: none !important;
}

.side-ranking-card .crm-rank-name,
.side-ranking-card .crm-ranking-item span,
.side-ranking-card .crm-ranking-item strong {
  color: #172033 !important;
}

.side-ranking-card .crm-ranking-empty,
.side-ranking-card small {
  color: #aab4c6 !important;
}

.side-ranking-top button {
  background: #f4f7ff !important;
  color: var(--dp-primary) !important;
  border-color: #dce6ff !important;
}

/* Agent colors */
select.color-0, .agent-select.color-0, .brand-select.color-0, .brand-stat-badge.color-0 { background-color: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important; }
select.color-1, .agent-select.color-1, .brand-select.color-1, .brand-stat-badge.color-1 { background-color: #dcfce7 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
select.color-2, .agent-select.color-2, .brand-select.color-2, .brand-stat-badge.color-2 { background-color: #ffedd5 !important; color: #c2410c !important; border-color: #fed7aa !important; }
select.color-3, .agent-select.color-3, .brand-select.color-3, .brand-stat-badge.color-3 { background-color: #ecfeff !important; color: #0891b2 !important; border-color: #c5f6fa !important; }
select.color-4, .agent-select.color-4, .brand-select.color-4, .brand-stat-badge.color-4 { background-color: #f3e8ff !important; color: #7e22ce !important; border-color: #e9d5ff !important; }
select.color-5, .agent-select.color-5, .brand-select.color-5, .brand-stat-badge.color-5 { background-color: #dbeafe !important; color: #1e40af !important; border-color: #bfdbfe !important; }
select.color-6, .agent-select.color-6, .brand-select.color-6, .brand-stat-badge.color-6 { background-color: #e0e7ff !important; color: #3730a3 !important; border-color: #c7d2fe !important; }
select.color-7, .agent-select.color-7, .brand-select.color-7, .brand-stat-badge.color-7 { background-color: #f5ebe0 !important; color: #6f4e37 !important; border-color: #e6ccb2 !important; }
select.color-8, .agent-select.color-8, .brand-select.color-8, .brand-stat-badge.color-8 { background-color: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important; }


/* Planning final readability fixes */
.side-ranking-card.ranking-collapsed {
  display: none !important;
}

#planning-view #planning-table td:not(.time-slot) {
  background: #ffffff !important;
  color: #111827 !important;
}

#planning-view .agent-slot {
  background: #ffffff !important;
  border: 1px solid #eef2f7 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10) !important;
}

#planning-view .agent-select,
#planning-view .brand-select,
#planning-view .agent-slot select {
  font-weight: 800 !important;
  text-shadow: none !important;
}

#planning-view .agent-select:not(.color-0):not(.color-1):not(.color-2):not(.color-3):not(.color-4):not(.color-5):not(.color-6):not(.color-7):not(.color-8),
#planning-view .brand-select:not(.color-0):not(.color-1):not(.color-2):not(.color-3):not(.color-4):not(.color-5):not(.color-6):not(.color-7):not(.color-8) {
  background: #172033 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

#planning-view select option {
  background: #ffffff !important;
  color: #111827 !important;
}

#planning-view .stats-section,
#planning-view .stats-section h3 {
  color: #f8fafc !important;
}

#planning-view .summary-table,
#planning-view .summary-table th,
#planning-view .summary-table td,
#planning-view table:not(#planning-table),
#planning-view table:not(#planning-table) th,
#planning-view table:not(#planning-table) td {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #e5e7eb !important;
}

#planning-view .summary-table th,
#planning-view table:not(#planning-table) th {
  background: #f8fafc !important;
  color: #475569 !important;
}

#planning-view .side-ranking-card .crm-ranking-item {
  background: #f4f7ff !important;
  color: #172033 !important;
  border-color: #dce6ff !important;
}

#planning-view .side-ranking-card .crm-rank-name,
#planning-view .side-ranking-card .crm-ranking-item span,
#planning-view .side-ranking-card .crm-ranking-item strong {
  color: #172033 !important;
}

#planning-view .side-ranking-card .crm-rank-number {
  background: #6366f1 !important;
  color: #ffffff !important;
}

#planning-view #connection-status,
#planning-view .status-badges,
#planning-view .online-db {
  display: none !important;
}


/* DESIGN PLUS FINAL PLANNING POLISH 2026-07-01 */
#planning-view .sidebar .logo,
#planning-view .sidebar-logo,
#planning-view .planning-logo,
#planning-view .logo-section,
#planning-view #connection-status,
#planning-view .status-badge.online-db,
#planning-view .status-badge.offline-db,
#planning-view .online-db {
  display: none !important;
}

#planning-view .sidebar .nav-item,
#planning-view .sidebar .ranking-toggle {
  width: 100% !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 0 20px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #96a0b5 !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

#planning-view .sidebar .nav-item.active,
#planning-view .sidebar .nav-item:hover,
#planning-view .sidebar .ranking-toggle.open,
#planning-view .sidebar .ranking-toggle:hover {
  background: #2b2855 !important;
  color: #706bff !important;
  border-color: rgba(112,107,255,.22) !important;
}

#planning-view .ranking-toggle .toggle-arrow {
  margin-left: auto !important;
  transition: transform .2s ease !important;
}

#planning-view .ranking-toggle.open .toggle-arrow {
  transform: rotate(180deg) !important;
}

#planning-view .side-ranking-card.ranking-collapsed {
  display: none !important;
}

#planning-view .side-ranking-card {
  margin: 14px 0 22px !important;
  padding: 22px !important;
  border-radius: 22px !important;
  background: #151b26 !important;
  border: 1px solid #2a3446 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

#planning-view .side-ranking-top span,
#planning-view .side-ranking-card strong {
  color: #f8fafc !important;
}

#planning-view .side-ranking-card small,
#planning-view .side-ranking-card .crm-ranking-empty {
  color: #a8b1c3 !important;
}

#planning-view .side-ranking-top button {
  background: #eef3ff !important;
  color: #6366f1 !important;
  border: 1px solid #dce6ff !important;
  border-radius: 14px !important;
}

#planning-view .side-ranking-card .crm-ranking-item {
  min-height: 56px !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  border-radius: 14px !important;
  background: #eef3ff !important;
  color: #111827 !important;
  border: 1px solid #dce6ff !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#planning-view .side-ranking-card .crm-rank-number {
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: #6366f1 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
}

#planning-view .side-ranking-card .crm-rank-name {
  color: #111827 !important;
  font-weight: 900 !important;
}

select.color-9, .agent-select.color-9, .brand-select.color-9, .brand-stat-badge.color-9 {
  background-color: #ccfbf1 !important;
  color: #0f766e !important;
  border-color: #99f6e4 !important;
}

select.color-10, .agent-select.color-10, .brand-select.color-10, .brand-stat-badge.color-10 {
  background-color: #fae8ff !important;
  color: #a21caf !important;
  border-color: #f5d0fe !important;
}

#planning-view .agent-select,
#planning-view .brand-select,
#planning-view .agent-slot select,
#planning-view .brand-stat-badge {
  opacity: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

#planning-view .agent-select:not([class*="color-"]),
#planning-view .brand-select:not([class*="color-"]),
#planning-view .agent-slot select:not([class*="color-"]) {
  background: #172033 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

#planning-view select option {
  background: #ffffff !important;
  color: #111827 !important;
}

#planning-view .summary-table,
#planning-view .summary-table th,
#planning-view .summary-table td,
#planning-view table:not(#planning-table),
#planning-view table:not(#planning-table) th,
#planning-view table:not(#planning-table) td {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #e5e7eb !important;
}

#planning-view .summary-table th,
#planning-view table:not(#planning-table) th {
  background: #f8fafc !important;
  color: #475569 !important;
}