/* Icon color & effects */
i[data-lucide] { stroke-width: 2.5; transition: color 0.15s, filter 0.15s; filter: drop-shadow(0 0 1px rgba(0,0,0,0.05)); }
i[data-lucide]:hover { filter: drop-shadow(0 0 3px currentColor); }
.card-icon[data-lucide], .nav-icon[data-lucide] { stroke-width: 2.5; }
[data-theme="dark"] .status-active, [data-theme="dark"] .sector-mixed { color: #34d399 !important; }
:root {
  --primary: #6B2FA0;
  --primary-light: #8B4FBF;
  --primary-dark: #4A1F70;
  --accent: #00BFA5;
  --accent-dark: #009688;
  --bg: #0f0f1a;
  --bg-card: #1a1a2e;
  --bg-card-hover: #222240;
  --bg-input: #252545;
  --text: #e8e8f0;
  --text-muted: #9090b0;
  --border: #2a2a4a;
  --success: #00C853;
  --warning: #FFB300;
  --danger: #FF1744;
  --info: #40C4FF;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

#app { display:flex; flex-direction:column; min-height:100vh; }

/* ── Loading Overlay ── */
.loading-overlay {
  position:fixed; inset:0; z-index:9999;
  background: rgba(15,15,26,0.85);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  transition: opacity 0.3s;
}
.loading-overlay.hidden { opacity:0; pointer-events:none; }
.spinner {
  width:48px; height:48px;
  border:4px solid var(--border);
  border-top-color: var(--accent);
  border-radius:50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { margin-top:16px; color:var(--text-muted); font-size:14px; }

/* ── Toast ── */
.toast-container {
  position:fixed; top:16px; right:16px; z-index:10000;
  display:flex; flex-direction:column; gap:8px;
  max-width:380px;
}
.toast {
  padding:12px 40px 12px 16px;
  border-radius:var(--radius);
  color:#fff;
  font-size:14px;
  position:relative;
  animation: slideIn 0.3s ease;
  box-shadow:var(--shadow);
  word-break:break-word;
}
.toast-success { background:var(--success); }
.toast-error { background:var(--danger); }
.toast-info { background:var(--info); color:#000; }
.toast-warning { background:var(--warning); color:#000; }
.toast-close {
  position:absolute; top:8px; right:10px;
  background:none; border:none; color:inherit;
  font-size:18px; cursor:pointer; opacity:0.7;
  line-height:1;
}
.toast-close:hover { opacity:1; }
@keyframes slideIn {
  from { transform:translateX(100%); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}
@keyframes slideOut {
  from { transform:translateX(0); opacity:1; }
  to { transform:translateX(100%); opacity:0; }
}

/* ── Navbar ── */
#navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display:flex;
  align-items:center;
  gap:24px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.nav-brand { padding:12px 0; min-width:180px; }
.nav-brand h1 { font-size:18px; color:var(--accent); }
.nav-brand .nav-subtitle { font-size:11px; color:var(--text-muted); }
.nav-tabs {
  display:flex;
  gap:2px;
  overflow-x:auto;
  flex:1;
  scrollbar-width:thin;
}
.nav-tab {
  background:none; border:none; color:var(--text-muted);
  padding:16px 14px;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  transition: color 0.2s;
}
.nav-tab:hover { color:var(--text); }
.nav-tab.active { color:var(--accent); }
.nav-tab::after {
  content:'';
  position:absolute;
  bottom:0; left:50%;
  width:0; height:3px;
  background:var(--accent);
  transition: all 0.3s ease;
  border-radius:3px 3px 0 0;
}
.nav-tab.active::after { left:10%; width:80%; }

/* ── Main Content ── */
#main-content {
  flex:1;
  padding:24px 32px;
  max-width:1400px;
  margin:0 auto;
  width:100%;
}
#main-content h2 { font-size:22px; margin-bottom:20px; color:var(--text); }

/* ── Sections ── */
.section { display:none; }
.section.active { display:block; animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Stats Grid ── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  margin-bottom:24px;
}
.stat-card {
  background:var(--bg-card);
  border-radius:var(--radius);
  padding:20px;
  border:1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-card .stat-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.stat-card .stat-value { font-size:28px; font-weight:700; margin:8px 0 4px; color:var(--text); }
.stat-card .stat-trend { font-size:12px; }
.stat-trend.up { color:var(--success); }
.stat-trend.down { color:var(--danger); }
.stat-trend.flat { color:var(--text-muted); }

/* ── Cards ── */
.card { background:var(--bg-card); border-radius:var(--radius); padding:20px; border:1px solid var(--border); margin-bottom:16px; }
.card h3 { font-size:15px; margin-bottom:12px; color:var(--accent); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(400px,1fr)); gap:16px; margin-bottom:16px; }

/* ── Form Card ── */
.form-card {
  background:var(--bg-card);
  border-radius:var(--radius);
  padding:20px;
  border:1px solid var(--border);
  margin-bottom:16px;
}
.form-card h3 { font-size:15px; margin-bottom:12px; color:var(--accent); }
form label {
  display:block;
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:12px;
}
form input, form select, form textarea {
  width:100%;
  padding:10px 12px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-size:14px;
  font-family:var(--font);
  margin-top:4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
form input:focus, form select:focus, form textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,191,165,0.15);
}
form textarea { min-height:60px; resize:vertical; }
form .was-validated input:invalid, form .was-validated select:invalid, form .was-validated textarea:invalid { border-color:var(--danger); }
form .was-validated input:valid, form .was-validated select:valid, form .was-validated textarea:valid { border-color:var(--success); }

button {
  padding:10px 20px;
  background:var(--accent);
  color:#000;
  border:none;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition: background 0.2s, transform 0.1s, opacity 0.2s;
}
button:hover { background:var(--accent-dark); transform:translateY(-1px); }
button:active { transform:translateY(0); }
button:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

/* ── Toolbar ── */
.toolbar {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.toolbar button { background:var(--bg-input); color:var(--text); border:1px solid var(--border); }
.toolbar button:hover { background:var(--border); }

/* ── Table ── */
.table-responsive {
  overflow-x:auto;
  margin-bottom:16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
table {
  width:100%;
  border-collapse:collapse;
  min-width:600px;
  font-size:13px;
}
thead { background:var(--bg-input); }
th { padding:12px 14px; text-align:left; font-weight:600; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); }
td { padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text); }
tr:hover td { background:var(--bg-card-hover); }

/* ── Badges / Status ── */
.badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
}
.badge-ORDERED,.badge-ACTIVE { background:rgba(64,196,255,0.15); color:var(--info); }
.badge-COLLECTED,.badge-DEPLOYED { background:rgba(255,179,0,0.15); color:var(--warning); }
.badge-IN_PROGRESS { background:rgba(107,47,160,0.2); color:var(--primary-light); }
.badge-COMPLETED { background:rgba(0,200,83,0.15); color:var(--success); }
.badge-CANCELLED,.badge-REJECTED { background:rgba(255,23,68,0.15); color:var(--danger); }
.badge-CRITICAL,.badge-PANIC { background:rgba(255,23,68,0.2); color:var(--danger); animation:pulse 1.5s infinite; }
.badge-ABNORMAL { background:rgba(255,179,0,0.15); color:var(--warning); }
.badge-NORMAL { background:rgba(0,200,83,0.15); color:var(--success); }
.badge-URGENT,.badge-STAT { background:rgba(255,23,68,0.15); color:var(--danger); }
.badge-ROUTINE { background:rgba(0,200,83,0.15); color:var(--success); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }

/* ── Empty State ── */
.empty-state {
  text-align:center;
  padding:40px 20px;
  color:var(--text-muted);
}
.empty-state .empty-icon { font-size:48px; margin-bottom:8px; }
.empty-state p { font-size:14px; }

/* ── Section Description ── */
.section-desc { font-size:13px; color:var(--text-muted); margin-bottom:16px; }

/* ── Result Box ── */
.result-box {
  margin-top:12px;
  padding:12px;
  border-radius:6px;
  background:var(--bg-input);
  font-size:13px;
  white-space:pre-wrap;
  word-break:break-word;
  display:none;
  border:1px solid var(--border);
}
.result-box.show { display:block; }
.result-box.success { border-color:var(--success); color:var(--success); }
.result-box.error { border-color:var(--danger); color:var(--danger); }

/* ── Stats Row ── */
.stats-row {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.stat-chip {
  background:var(--bg-input);
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  color:var(--text-muted);
}
.stat-chip strong { color:var(--text); }

.pickup-summary {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  margin-bottom:16px;
}
.pickup-stat {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:4px solid var(--primary);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
}
.pickup-stat span {
  display:block;
  color:var(--text);
  font-size:22px;
  font-weight:800;
}
.pickup-stat small {
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}
.pickup-layout {
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap:16px;
  align-items:start;
}
.pickup-actions {
  display:grid;
  gap:16px;
}
.pickup-list {
  display:grid;
  gap:12px;
}
.pickup-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}
.pickup-card-head,
.pickup-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.pickup-meta,
.pickup-route {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  color:var(--text-muted);
  font-size:12px;
}
.pickup-meta span {
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
}
.pickup-route span {
  flex:1 1 190px;
  background:var(--bg-card-hover);
  border-radius:8px;
  padding:8px;
}
.pickup-footer {
  margin-top:12px;
  color:var(--text-muted);
  font-size:12px;
}
.pickup-footer button {
  border:1px solid var(--border);
  background:var(--primary);
  color:#fff;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:700;
}
.pickup-footer button:hover { filter:brightness(1.08); }

/* ── Responsive ── */
@media (max-width: 768px) {
  #navbar { flex-direction:column; gap:0; padding:0 16px; }
  .nav-brand { padding:8px 0; min-width:auto; }
  .nav-tabs { padding-bottom:4px; }
  .nav-tab { padding:10px 10px; font-size:12px; }
  #main-content { padding:16px; }
  .card-grid { grid-template-columns:1fr; }
  .pickup-layout { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  table { font-size:12px; }
  th, td { padding:8px 10px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr; }
  .toolbar { flex-direction:column; }
  .toolbar button { width:100%; }
  .nav-tab { padding:8px 8px; font-size:11px; }
  #main-content h2 { font-size:18px; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

[data-theme="light"] {
  --bg: #faf5ff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3e8ff;
  --bg-input: #ffffff;
  --text: #1a1a2e;
  --text-muted: #7c7caa;
  --border: #e9d5ff;
  --shadow: 0 4px 20px rgba(107, 47, 160, 0.08);
}

button.selected,
.btn-primary.selected,
.btn-secondary.selected,
.option-button.selected,
.nav-tab.active,
.tab-btn.active,
.card.selected,
.pickup-card.selected {
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--bg-card)) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .card,
[data-theme="dark"] .pickup-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] table {
  background: #10211d;
  border-color: #29463d;
  color: #f0fdf4;
}