/* Dark Theme (Default) */
:root,
[data-theme="dark"] {
  --bg: #0a0e1a;
  --panel: #141b2d;
  --border: #2a3441;
  --muted: #94a3b8;
  --text: #f1f5f9;
  --acc: #3b82f6;
  --acc-hover: #2563eb;
  --acc-light: rgba(59, 130, 246, 0.1);
  --acc-lighter: rgba(59, 130, 246, 0.15);
  --border-light: #3a4553;
  --text-strong: #ffffff;
  --shadow-light: rgba(0, 0, 0, 0.3);
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --shadow: rgba(0, 0, 0, 0.25);
  --gradient: linear-gradient(135deg, var(--panel) 0%, rgba(20, 27, 45, 0.8) 100%);
}

/* Light Theme */
[data-theme="light"] {
  --bg: #f8fafc;
  --panel: #ffffff;
  --border: #e2e8f0;
  --muted: #64748b;
  --text: #1e293b;
  --acc: #3b82f6;
  --acc-hover: #2563eb;
  --acc-light: rgba(59, 130, 246, 0.05);
  --acc-lighter: rgba(59, 130, 246, 0.08);
  --border-light: #cbd5e1;
  --text-strong: #0f172a;
  --shadow-light: rgba(0, 0, 0, 0.15);
  --green: #16a34a;
  --amber: #ca8a04;
  --red: #dc2626;
  --shadow: rgba(0, 0, 0, 0.1);
  --gradient: linear-gradient(135deg, var(--panel) 0%, rgba(248, 250, 252, 0.8) 100%);
}

/* System Theme Detection */
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg: #f8fafc;
    --panel: #ffffff;
    --border: #e2e8f0;
    --muted: #64748b;
    --text: #1e293b;
    --acc: #3b82f6;
    --acc-hover: #2563eb;
    --acc-light: rgba(59, 130, 246, 0.05);
    --acc-lighter: rgba(59, 130, 246, 0.08);
    --border-light: #cbd5e1;
    --text-strong: #0f172a;
    --shadow-light: rgba(0, 0, 0, 0.15);
    --green: #16a34a;
    --amber: #ca8a04;
    --red: #dc2626;
    --shadow: rgba(0, 0, 0, 0.1);
    --gradient: linear-gradient(135deg, var(--panel) 0%, rgba(248, 250, 252, 0.8) 100%);
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #0a0e1a;
    --panel: #141b2d;
    --border: #2a3441;
    --muted: #94a3b8;
    --text: #f1f5f9;
    --acc: #3b82f6;
    --acc-hover: #2563eb;
    --acc-light: rgba(59, 130, 246, 0.1);
    --acc-lighter: rgba(59, 130, 246, 0.15);
    --border-light: #3a4553;
    --text-strong: #ffffff;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --green: #22c55e;
    --amber: #f59e0b;
    --red: #ef4444;
    --shadow: rgba(0, 0, 0, 0.25);
    --gradient: linear-gradient(135deg, var(--panel) 0%, rgba(20, 27, 45, 0.8) 100%);
  }
}
*{box-sizing:border-box}html,body{height:100%}
.hidden{display:none !important}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:60px;background:var(--gradient);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px var(--shadow);backdrop-filter:blur(8px)}
.nav-brand{display:flex;align-items:center}
.brand-logo{font-weight:700;font-size:24px;letter-spacing:.5px;color:var(--text);cursor:pointer;transition:color 0.3s ease}
.brand-logo:hover{color:var(--acc)}
.nav-menu{display:flex;align-items:center;gap:8px}
.nav-item{position:relative;padding:8px 16px;cursor:pointer;border-radius:8px;transition:all 0.3s ease}
.nav-item:hover{background:var(--acc-lighter);transform:translateY(-1px);box-shadow:0 2px 4px var(--shadow-light)}
.nav-item.active{background:var(--acc-light);color:var(--acc);box-shadow:0 2px 8px rgba(59, 130, 246, 0.2)}
.nav-item.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--acc);border-radius:1px;box-shadow:0 0 4px var(--acc)}
.nav-link{font-size:14px;font-weight:500;color:var(--text);transition:color 0.3s ease}
.nav-item:hover .nav-link{color:var(--acc)}
.nav-item.active .nav-link{color:var(--acc)}
.nav-right{display:flex;align-items:center;gap:12px}
.health-badge{background:var(--panel);color:var(--muted);padding:4px 12px;border-radius:20px;font-size:12px;border:1px solid var(--border);transition:all 0.3s ease}
.settings-btn{background:transparent;border:1px solid var(--border);color:var(--muted);padding:8px;border-radius:8px;cursor:pointer;transition:all 0.3s ease}
.settings-btn:hover{background:var(--border);color:var(--text)}
.settings-btn.active{background:var(--acc);color:white;border-color:var(--acc)}
.btn{background:var(--acc);color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(59, 130, 246, 0.3)}
.btn:hover{background:var(--acc-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(59, 130, 246, 0.4)}
.btn-secondary{background:var(--panel);border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{background:var(--border);color:var(--text)}
.btn-small{padding:4px 8px;font-size:12px}
.badge{background:var(--panel);color:var(--muted);padding:4px 8px;border-radius:6px;font-size:12px;border:1px solid var(--border)}
.container{padding:20px 24px;max-width:1200px;margin:0 auto}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap;gap:16px}
.header-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.page-title h1{margin:0 0 4px 0;font-size:28px;font-weight:700;color:var(--text)}
.page-title p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.header-actions{display:flex;gap:8px;align-items:center}
.filters-toggle{background:var(--panel);border:1px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:all 0.3s ease;display:flex;align-items:center;gap:6px}
.filters-toggle:hover{background:var(--acc-light);color:var(--acc);border-color:var(--acc)}
.filters-toggle.active{background:var(--acc);color:white;border-color:var(--acc)}
.filter-icon{font-size:12px}
.filter-text{font-weight:500}
.btn-compact{padding:6px 12px;font-size:12px}
.filters-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;margin-bottom:16px;overflow:hidden;transition:all 0.3s ease}
.filters-panel.hidden{max-height:0;margin-bottom:0;border:none}
.filters-panel:not(.hidden){max-height:200px}
.filters-content{padding:12px 16px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.filter-section{display:flex;align-items:center;gap:8px}
.filter-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;min-width:60px}
.date-presets.compact{display:flex;gap:4px}
.preset-btn.compact{padding:4px 8px;font-size:11px;font-weight:500}
.date-inputs.compact{display:flex;gap:8px}
.date-input.compact,.refresh-select.compact{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:4px 6px;border-radius:4px;font-size:11px;transition:border-color 0.3s ease}
.date-input.compact:focus,.refresh-select.compact:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(59, 130, 246, 0.15)}
.filter-actions{display:flex;gap:6px;margin-left:auto}

/* Redesigned Inline Filters */
.quick-filters{display:flex;align-items:center;gap:12px}
.quick-date-range{display:flex;gap:4px}
.quick-preset{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.2s ease}
.quick-preset:hover{background:var(--border);color:var(--text)}
.quick-preset.active{background:var(--acc);color:white;border-color:var(--acc);box-shadow:0 2px 4px rgba(59, 130, 246, 0.3)}
.date-separator{color:var(--muted);font-size:14px;margin:0 4px}
.more-filters-btn{background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center}
.more-filters-btn:hover{background:var(--border);color:var(--text)}
.more-filters-btn.active{background:var(--acc-light);color:var(--acc);border-color:var(--acc)}
.more-icon{font-size:16px;font-weight:bold}

/* Active Filters Indicator */
.active-filters-indicator{display:flex;gap:6px;align-items:center}
.filter-tag{background:var(--acc-light);color:var(--acc);padding:4px 8px;border-radius:4px;font-size:11px;font-weight:500;border:1px solid rgba(59, 130, 246, 0.3)}

/* Redesigned Advanced Panel */
.advanced-filters-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;margin-bottom:16px;box-shadow:0 2px 8px var(--shadow);display:block}
.advanced-filters-panel.hidden{display:none !important}
.advanced-filters-content{padding:20px;display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.advanced-filter-group{display:flex;flex-direction:column;gap:8px;min-width:140px}
.advanced-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px}
.custom-date-inputs{display:flex;gap:8px;align-items:center}
.custom-date-input{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:6px;font-size:14px;transition:all 0.2s ease;min-width:130px}
.custom-date-input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(59, 130, 246, 0.15);transform:translateY(-1px)}
.custom-date-input:hover{border-color:var(--acc)}
.date-range-separator{color:var(--muted);font-size:13px;font-weight:500;margin:0 6px}
.advanced-select{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:8px 12px;border-radius:6px;font-size:14px;min-width:180px;transition:all 0.2s ease}
.advanced-select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(59, 130, 246, 0.15);transform:translateY(-1px)}
.advanced-select:hover{border-color:var(--acc)}
.advanced-actions{display:flex;gap:12px;margin-left:auto;align-items:flex-end;padding-top:20px}
.refresh-icon{font-size:14px;margin-right:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-bottom:32px}
.card{background:var(--gradient);padding:20px;border-radius:16px;border:1px solid var(--border);box-shadow:0 6px 20px var(--shadow);transition:all 0.3s ease;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 32px var(--shadow);border-color:var(--acc)}
.card .label{font-size:12px;color:var(--muted);margin-bottom:4px}
.card .value{font-size:24px;font-weight:600}

/* Enhanced KPI Cards */
.kpi-card{position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.kpi-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;height:24px}
.kpi-header .label{margin-bottom:0;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;font-size:11px;color:var(--text);opacity:0.9}
.kpi-date{font-size:10px;color:var(--muted);font-weight:600;background:var(--border-light);padding:2px 6px;border-radius:4px}

/* Enhanced Trend Icons */
.kpi-trend{
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:all 0.3s ease;
}

.kpi-trend:hover{
  transform:scale(1.1);
  background:rgba(255,255,255,0.25);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

.kpi-trend .trend-up{
  color:var(--green);
  filter:drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
}

.kpi-trend .trend-down{
  color:var(--red);
  filter:drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

.kpi-trend .trend-neutral{
  color:var(--muted);
  filter:drop-shadow(0 2px 4px rgba(148, 163, 184, 0.3));
}

/* Enhanced KPI Icons */
.kpi-icon{
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:rgba(255,255,255,0.1);
  border-radius:50%;
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:all 0.3s ease;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.kpi-icon:hover{
  transform:scale(1.1) rotate(5deg);
  background:rgba(255,255,255,0.2);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

/* Subtle pulse animation for trend icons */
.kpi-trend{
  animation:trendPulse 3s ease-in-out infinite;
}

@keyframes trendPulse {
  0%, 100% { 
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
  }
  50% { 
    box-shadow:0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(255,255,255,0.1);
  }
}

/* Special animations for different trend states */
.kpi-trend .trend-up{
  animation:trendUpGlow 2s ease-in-out infinite;
}

.kpi-trend .trend-down{
  animation:trendDownGlow 2s ease-in-out infinite;
}

@keyframes trendUpGlow {
  0%, 100% { 
    filter:drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
  }
  50% { 
    filter:drop-shadow(0 2px 8px rgba(34, 197, 94, 0.6));
  }
}

@keyframes trendDownGlow {
  0%, 100% { 
    filter:drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
  }
  50% { 
    filter:drop-shadow(0 2px 8px rgba(239, 68, 68, 0.6));
  }
}
.kpi-content{display:flex;flex-direction:column;flex:1;justify-content:center;text-align:center;padding:8px 0}
.kpi-main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.kpi-value{font-size:32px;font-weight:800;line-height:1;margin-bottom:8px;text-shadow:0 1px 3px rgba(0,0,0,0.1);font-family:monospace}
.kpi-status{font-size:20px;font-weight:700;margin-bottom:8px;text-shadow:0 1px 2px rgba(0,0,0,0.1)}
.kpi-subtitle{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600;opacity:0.8;line-height:1.2}
.kpi-change{font-size:11px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;margin-top:4px}

/* Enhanced trend styling for both inline trends and icon trends */
.trend-up{color:var(--green);background:rgba(34, 197, 94, 0.1);border-radius:4px;padding:2px 6px}
.trend-down{color:var(--red);background:rgba(239, 68, 68, 0.1);border-radius:4px;padding:2px 6px}
.trend-neutral{color:var(--muted);background:rgba(156, 163, 175, 0.1);border-radius:4px;padding:2px 6px}
.trend-icon{font-size:14px;font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,0.2)}

/* Enhance trend icons in kpi-trend containers */
.kpi-trend .trend-up,
.kpi-trend .trend-down,
.kpi-trend .trend-neutral {
  background:none;
  padding:0;
  border-radius:0;
  font-size:24px;
  font-weight:900;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

/* KPI Card Visual Enhancements */
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--acc), var(--purple));opacity:0.6}
.kpi-card:nth-child(1)::before{background:linear-gradient(90deg, var(--purple), var(--blue))}
.kpi-card:nth-child(2)::before{background:linear-gradient(90deg, var(--blue), var(--green))}
.kpi-card:nth-child(3)::before{background:linear-gradient(90deg, var(--green), var(--amber))}
.kpi-card:nth-child(4)::before{background:linear-gradient(90deg, var(--amber), var(--red))}

/* Responsive KPI adjustments */
@media (max-width: 768px) {
  .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .kpi-card{min-height:110px;padding:16px}
  .kpi-value{font-size:28px}
  .kpi-status{font-size:18px}
}
.status-good{color:var(--green)}
.status-warning{color:var(--amber)}
.status-critical{color:var(--red)}
.kpi-card.alert{border-left:4px solid var(--red)}
.kpi-card.warning{border-left:4px solid var(--amber)}
.kpi-card.good{border-left:4px solid var(--green)}
.kpi-card.learning{border-left:4px solid var(--acc);background:linear-gradient(135deg, var(--panel) 0%, var(--acc-light) 100%)}
.kpi-card.clickable-card{cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}
.kpi-card.clickable-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow)}

/* Learning state styling */
.learning-icon{font-size:16px;opacity:0.8;cursor:help}
.insufficient-data{color:var(--muted);cursor:help;border-bottom:1px dotted var(--muted);transition:color 0.2s ease}
.insufficient-data:hover{color:var(--text);border-bottom-color:var(--text)}
.panel{background:var(--gradient);border-radius:12px;border:1px solid var(--border);margin-bottom:24px;box-shadow:0 4px 12px var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.panel-head h2{margin:0;font-size:18px}
.panel-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.table-controls{display:flex;gap:12px;align-items:center}
.limit-control{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.limit-select{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:4px 8px;border-radius:6px;font-size:12px}
.limit-select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(37,99,235,0.2)}
.filter{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:6px 8px;border-radius:6px;font-size:12px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
th{background:var(--bg);font-weight:600;font-size:12px;color:var(--muted);position:relative}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{background:var(--border-light);color:var(--text-strong)}
th.sortable::after{content:'';position:absolute;right:4px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;opacity:0.3}
th.sortable.asc::after{border-bottom:4px solid var(--muted)}
th.sortable.desc::after{border-top:4px solid var(--muted)}
td{font-size:13px}
tbody tr{transition:all 0.2s ease}
tbody tr:hover{background:var(--acc-lighter);transform:translateX(2px);box-shadow:0 2px 4px var(--shadow-light);border-left:3px solid var(--acc)}
.num{text-align:right;font-family:monospace}

/* Enhanced table column styling */
.col-date{text-align:center;width:120px}
.col-datetime{text-align:center;width:140px}
.col-numeric{text-align:center;width:100px;font-family:monospace}
.col-text{text-align:left;min-width:140px}
.col-status{text-align:center;width:120px}
.col-action{text-align:center;width:120px}
.col-checkbox{text-align:center;width:50px}
.col-description{text-align:left;min-width:200px}

/* Header alignment */
.col-numeric th{text-align:center}
.col-date th{text-align:center}
.col-datetime th{text-align:center}
.col-text th{text-align:left}
.col-status th{text-align:center}
.col-action th{text-align:center}
.col-checkbox th{text-align:center}
.col-description th{text-align:left}

/* Data cell alignment - override default left alignment */
td.num{text-align:center;font-family:monospace;font-weight:500}
td.date{text-align:center}
td.datetime{text-align:center;font-family:monospace}
td.text{text-align:left}
td.status{text-align:center}
td.action{text-align:center}
td.checkbox{text-align:center}
td.description{text-align:left}

.clickable{cursor:pointer}
.clickable:hover{background:var(--acc-light);transform:scale(1.01);box-shadow:0 2px 8px var(--shadow)}
.good{color:var(--green)}
.warn{color:var(--amber)}
.bad{color:var(--red)}
.hint{font-size:12px;color:var(--muted);margin:8px 16px;font-style:italic}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal.hidden{display:none}
.modal-content{background:var(--panel);border-radius:12px;border:1px solid var(--border);max-width:90%;max-height:80%;overflow:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0;font-size:16px}
.auto-refresh-controls{display:flex;gap:8px;align-items:center}
.refresh-countdown{font-size:11px;color:var(--muted);background:var(--bg);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.refresh-countdown.hidden{display:none}
.date-presets{display:flex;gap:6px;margin-bottom:8px}
.preset-btn{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.3s ease;box-shadow:0 2px 4px var(--shadow)}
.preset-btn:hover{background:var(--acc-light);color:var(--acc);transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow)}
.preset-btn.active{background:var(--acc);color:white;border-color:var(--acc);box-shadow:0 4px 12px rgba(59, 130, 246, 0.4);transform:translateY(-1px)}
.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-radius:50%;border-top:2px solid var(--acc);animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.loading-row{text-align:center;color:var(--muted);font-style:italic}
.fade-in{animation:fadeIn 0.3s ease-in}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.table-wrap{transition:opacity 0.2s ease}
.table-wrap.loading{opacity:0.6}
/* Settings panel - elegant overlay with sophisticated animation */
#settingsPanel {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 20px !important;
  overflow-y: auto !important;
  max-height: calc(80vh - 60px) !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(12px) saturate(1.8) !important;
  
  /* Complex multi-layered animation */
  transform: translateY(-100%) scale(0.95) rotateX(-10deg) !important;
  opacity: 0 !important;
  filter: blur(8px) !important;
  
  /* Staggered timing for layered effect */
  transition: 
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.3s ease-out,
    box-shadow 0.4s ease-out !important;
  
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  transform-origin: center top !important;
}

#settingsPanel:not(.hidden) {
  transform: translateY(0) scale(1) rotateX(0deg) !important;
  opacity: 1 !important;
  filter: blur(0px) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important;
  pointer-events: all !important;
}

#settingsPanel.hidden {
  transform: translateY(-100%) scale(0.95) rotateX(-10deg) !important;
  opacity: 0 !important;
  filter: blur(8px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  pointer-events: none !important;
}

/* Elegant backdrop for settings panel */
#settingsPanel::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  backdrop-filter: blur(2px) brightness(0.96);
  z-index: -1;
  opacity: 0;
  transform: scale(1.1);
  transition: 
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#settingsPanel:not(.hidden)::before {
  opacity: 1;
  transform: scale(1);
}
.settings-content{
  max-width:900px;
  margin:0 auto;
  transform: translateY(20px);
  opacity: 0;
  transition: 
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

#settingsPanel:not(.hidden) .settings-content {
  transform: translateY(0);
  opacity: 1;
}

#settingsPanel.hidden .settings-content {
  transform: translateY(20px);
  opacity: 0;
}

/* Staggered animation for settings sections */
.settings-category {
  transform: translateY(15px);
  opacity: 0;
  transition: 
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#settingsPanel:not(.hidden) .settings-category:nth-child(1) {
  transition-delay: 0.2s;
}

#settingsPanel:not(.hidden) .settings-category:nth-child(2) {
  transition-delay: 0.25s;
}

#settingsPanel:not(.hidden) .settings-category:nth-child(3) {
  transition-delay: 0.3s;
}

#settingsPanel:not(.hidden) .settings-category {
  transform: translateY(0);
  opacity: 1;
}

#settingsPanel.hidden .settings-category {
  transform: translateY(15px);
  opacity: 0;
  transition-delay: 0s;
}

/* Settings Header */
.settings-header{text-align:center;margin-bottom:30px;border-bottom:1px solid var(--border);padding-bottom:20px}
.settings-header h3{margin:0 0 8px 0;color:var(--text);font-size:24px;font-weight:600}
.settings-header p{margin:0;color:var(--muted);font-size:14px}

/* Settings Sections Container */
.settings-sections{display:flex;flex-direction:column;gap:30px}

/* Settings Categories */
.settings-category{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:0 2px 8px var(--shadow)}
.category-title{margin:0 0 20px 0;color:var(--text);font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px}
.setting-group{display:flex;flex-direction:column;gap:4px}
.setting-group label{font-size:13px;font-weight:600;color:var(--text)}
.setting-input{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:6px;font-size:13px}
.setting-input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(37,99,235,0.2)}
.setting-checkbox{width:18px;height:18px;accent-color:var(--acc)}
.admin-controls{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.checkbox-container{display:flex;align-items:center;gap:8px;cursor:pointer}
.checkbox-container input[type="checkbox"]{width:18px;height:18px;accent-color:var(--acc)}
.checkbox-container .checkmark{font-size:13px;color:var(--text)}
.setting-group small{color:var(--muted);font-size:11px;margin-top:2px}
.settings-actions{display:flex;gap:16px;justify-content:center;padding:25px 0;margin-top:20px;border-top:1px solid var(--border)}
.settings-icon{font-size:14px}
#settingsToggle.active{background:var(--acc);color:white}
.ai-analysis-panel{background:var(--gradient);border-radius:12px;border:1px solid var(--border);margin-bottom:24px;padding:20px;box-shadow:0 6px 20px var(--shadow);position:relative}
.ai-analysis-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--acc), #8b5cf6);border-radius:12px 12px 0 0}
.analysis-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.analysis-title h2{margin:0;font-size:20px;color:var(--text);display:flex;align-items:center;gap:8px}
.analysis-date{font-size:14px;color:var(--muted);font-weight:normal}
.analysis-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.analysis-description{margin:16px 0;padding:12px 16px;background:rgba(37,99,235,0.05);border-left:3px solid var(--acc);border-radius:6px}
.analysis-description p{margin:0;color:var(--text);font-size:14px;line-height:1.5}
.timestamp{font-size:13px;color:var(--muted)}
.status-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.status-badge.complete{background:rgba(34,197,94,0.2);color:var(--green);border:1px solid rgba(34,197,94,0.3)}
.status-badge.running{background:rgba(59,130,246,0.2);color:#60a5fa;border:1px solid rgba(59,130,246,0.3)}
.status-badge.error{background:rgba(239,68,68,0.2);color:var(--red);border:1px solid rgba(239,68,68,0.3)}
.status-badge.no-issues{background:rgba(34,197,94,0.2);color:var(--green);border:1px solid rgba(34,197,94,0.3)}
.action-items-section{margin-top:16px}
.section-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.trek-table-controls{display:flex;align-items:center}
.bulk-select{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;cursor:pointer}
.bulk-select input[type="checkbox"]{width:16px;height:16px;accent-color:var(--acc)}
.action-buttons{display:flex;gap:8px;flex-wrap:wrap}
.btn-primary{background:var(--acc);color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.2s}
.btn-primary:hover:not(:disabled){background:#1d4ed8}
.btn-primary:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}
.action-items-table{width:100%}
.action-items-table th{background:var(--bg);font-weight:600;font-size:12px;color:var(--muted);padding:12px 8px}
.action-items-table td{padding:12px 8px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.action-items-table tbody tr:hover{background:rgba(37,99,235,0.05)}
.action-item-checkbox{width:16px;height:16px;accent-color:var(--acc)}
.priority-badge{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase}
.priority-high{background:rgba(239,68,68,0.2);color:var(--red);border:1px solid rgba(239,68,68,0.3)}
.priority-medium{background:rgba(245,158,11,0.2);color:var(--amber);border:1px solid rgba(245,158,11,0.3)}
.priority-low{background:rgba(34,197,94,0.2);color:var(--green);border:1px solid rgba(34,197,94,0.3)}
.issue-description{max-width:300px;line-height:1.4}
.proposed-action{max-width:250px;line-height:1.4;color:var(--text)}
.action-status{font-size:12px;padding:2px 6px;border-radius:8px}
.status-pending{background:rgba(156,163,175,0.2);color:var(--muted)}
.status-executed{background:rgba(34,197,94,0.2);color:var(--green)}
.status-failed{background:rgba(239,68,68,0.2);color:var(--red)}
.execute-btn{background:var(--acc);color:white;border:none;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:11px;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(59, 130, 246, 0.3)}
.execute-btn:hover:not(:disabled){background:var(--acc-hover);transform:translateY(-1px);box-shadow:0 4px 8px rgba(59, 130, 246, 0.4)}
.execute-btn:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;box-shadow:none}
.execute-btn.executing{background:var(--amber);color:white;box-shadow:0 2px 4px rgba(245, 158, 11, 0.3)}
.execute-btn.success{background:var(--green);color:white;box-shadow:0 2px 4px rgba(34, 197, 94, 0.3)}
.execute-btn.error{background:var(--red);color:white;box-shadow:0 2px 4px rgba(239, 68, 68, 0.3)}
.monitoring-section{margin-bottom:24px}
.section-header{margin-bottom:16px}
.section-header h2{margin:0;font-size:18px;display:flex;align-items:center;gap:8px}
.section-header small{color:var(--muted);font-size:12px;margin-left:4px}

/* Route Tester Styles */
.test-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

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

.control-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.trunk-select, .test-type-select {
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  min-width: 250px;
}

.trunk-select:focus, .test-type-select:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.control-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.test-status {
  font-size: 14px;
  padding: 4px 0;
}

.test-status.success {
  color: var(--green);
}

.test-status.error {
  color: var(--red);
}

.test-status.info {
  color: var(--acc);
}

.live-results {
  padding: 20px;
}

.result-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-item .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-item span:last-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* Trunk Management Modal */
.trunk-management {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.trunk-form {
  background: var(--panel);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.trunk-form h4 {
  margin: 0 0 16px 0;
  color: var(--text);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.form-row input {
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
}

.form-row input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.trunk-list {
  background: var(--panel);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.trunk-list h4 {
  margin: 0 0 16px 0;
  color: var(--text);
}

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

.btn-danger:hover {
  background: #dc2626;
}

/* Status badges for route tester */
.status-badge.complete {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.error {
  background: rgba(239, 68, 68, 0.2);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Trek Profiles Specific Styles */

/* Readiness Legend */
.readiness-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--muted);
}

.status-icon {
  font-size: 16px;
}

/* Setup Progress Bar */
.setup-progress {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.progress-bar {
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  background: linear-gradient(90deg, var(--acc), var(--green));
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
  width: 0%;
}

.progress-text {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Wizard Container */
.wizard-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px;
  margin-top: 20px;
}

/* Wizard Steps */
.wizard-steps {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}

.wizard-steps::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 150px;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: var(--acc);
  color: white;
}

.step.completed .step-number {
  background: var(--green);
  color: white;
}

.step-label {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  transition: color 0.3s ease;
}

.step.active .step-label {
  color: var(--text);
  font-weight: 500;
}

/* Wizard Content */
.wizard-content {
  margin-bottom: 30px;
}

.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
}

.wizard-step h3 {
  color: var(--text);
  margin-bottom: 25px;
  font-size: 20px;
}

/* Form Grid for Wizard */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

.form-control {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  color: var(--text);
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.form-control::placeholder {
  color: var(--muted);
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked {
  background: var(--acc);
  border-color: var(--acc);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Test Section */
.test-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.test-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}

.test-item:last-child {
  border-bottom: none;
}

.test-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.test-info strong {
  color: var(--text);
}

.test-info span {
  color: var(--muted);
  font-size: 14px;
}

.test-status {
  margin-left: 10px;
  font-size: 14px;
}

.test-status.success {
  color: var(--green);
}

.test-status.error {
  color: var(--red);
}

.test-status.pending {
  color: var(--amber);
}

/* Completion Summary */
.completion-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.completion-summary h4 {
  color: var(--text);
  margin-bottom: 15px;
}

.completion-meter {
  margin-bottom: 20px;
}

.completion-bar {
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  height: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

.completion-fill {
  background: linear-gradient(90deg, var(--acc), var(--green));
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
  width: 0%;
}

.completion-text {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.missing-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.missing-field {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Wizard Navigation */
.wizard-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.wizard-navigation .btn {
  min-width: 120px;
}

/* Carrier Readiness Table Enhancements */
.data-table tbody tr.trek-ready {
  background: rgba(34, 197, 94, 0.02);
}

.data-table tbody tr.needs-attention {
  background: rgba(245, 158, 11, 0.02);
}

.data-table tbody tr.no-profile {
  background: rgba(239, 68, 68, 0.02);
}

.carrier-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.completeness-bar {
  width: 80px;
  height: 6px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.completeness-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.completeness-fill.high {
  background: var(--green);
}

.completeness-fill.medium {
  background: var(--amber);
}

.completeness-fill.low {
  background: var(--red);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.contact-info .primary {
  color: var(--text);
}

.contact-info .secondary {
  color: var(--muted);
}

/* Action Buttons */
.btn.btn-setup {
  background: linear-gradient(135deg, var(--acc), #3b82f6);
  color: white;
  border: none;
  font-weight: 500;
  font-size: 12px;
  padding: 6px 12px;
}

.btn.btn-setup:hover {
  background: linear-gradient(135deg, var(--acc-hover), #2563eb);
}

.btn.btn-edit {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 12px;
  padding: 6px 12px;
}

.btn.btn-edit:hover {
  background: rgba(245, 158, 11, 0.2);
}

/* Trek Ready Column Styles */
.trek-column {
  width: 120px;
  text-align: center;
}

.trek-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
}

.trek-status.ready {
  color: var(--green);
}

.trek-status.partial {
  color: var(--amber);
}

.trek-status.none {
  color: var(--muted);
}

.trek-status .status-icon {
  font-size: 14px;
}

/* Large Modal for Trek Setup */
.large-modal {
  max-width: 900px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.large-modal .modal-body {
  padding: 30px;
}

/* Auto-detect settings integration */

/* Trek button group styling */
.trek-button-group {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.trek-button-group .btn {
  flex: 1;
  min-width: 180px;
}

/* SMTP Configuration Modal */
.smtp-config-container {
  max-width: 800px;
  margin: 0 auto;
}

.config-section {
  margin-bottom: 30px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.config-section h4 {
  margin: 0 0 20px 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.test-email-section {
  background: var(--bg);
  padding: 20px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.test-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 15px;
}

.modal-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Email Method Selection */
.email-method-selection {
  margin: 20px 0;
}

.method-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.method-option {
  cursor: pointer;
  margin: 0;
}

.method-option input[type="radio"] {
  display: none;
}

.method-card {
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
  background: var(--card-bg);
}

.method-option input[type="radio"]:checked + .method-card {
  border-color: var(--primary);
  background: var(--primary-light);
}

.method-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
}

.method-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.method-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.method-desc {
  font-size: 13px;
  color: var(--muted);
}

/* Setup guides */
.setup-guide {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.setup-guide h5 {
  margin: 0 0 10px 0;
  color: var(--text);
  font-size: 14px;
}

.setup-guide ol {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.setup-guide ol li {
  margin-bottom: 5px;
}

.setup-guide a {
  color: var(--primary);
  text-decoration: none;
}

.setup-guide a:hover {
  text-decoration: underline;
}

/* Responsive grid for smaller screens */
@media (max-width: 768px) {
  .trunk-management {
    grid-template-columns: 1fr;
  }
  
  .result-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .wizard-steps {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .wizard-navigation {
    flex-direction: column;
    gap: 15px;
  }
  
  .readiness-legend {
    flex-direction: column;
    gap: 10px;
  }
  
  /* Responsive Filters */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .header-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .quick-date-range {
    gap: 2px;
  }
  
  .quick-preset {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .advanced-filters-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .advanced-actions {
    margin-left: 0;
    justify-content: center;
  }
}

/* Enhanced Trek Wizard Styles */
.smart-suggestion {
  background: linear-gradient(135deg, #3b82f6 0%, rgba(59, 130, 246, 0.8) 100%);
  border: 1px solid var(--acc);
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 14px;
}

.suggestion-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.suggestion-text {
  flex: 1;
}

.link-button {
  background: none;
  border: none;
  color: white;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.link-button:hover {
  opacity: 0.8;
}

/* Match Preview Modal Styles */
.match-preview-modal {
  max-width: 600px;
  width: 90vw;
}

.match-preview-content {
  max-height: 80vh;
  overflow-y: auto;
}

.match-overview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.carrier-comparison {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.your-carrier, .suggested-carrier {
  text-align: center;
}

.carrier-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}

.carrier-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.carrier-category {
  font-size: 13px;
  color: var(--acc);
  margin-top: 2px;
}

.match-arrow {
  font-size: 24px;
  color: var(--acc);
  font-weight: bold;
}

.confidence-display {
  text-align: center;
  flex-shrink: 0;
}

.confidence-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}

.confidence-score-large {
  font-size: 28px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  min-width: 80px;
}

.confidence-score-large.high {
  background: var(--green);
  color: white;
}

.confidence-score-large.medium {
  background: var(--amber);
  color: black;
}

.confidence-score-large.low {
  background: var(--red);
  color: white;
}

.contact-preview, .preferences-preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.contact-preview h4, .preferences-preview h4 {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 16px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
}

.contact-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-name {
  font-weight: 600;
  color: var(--text);
}

.contact-email, .contact-phone {
  font-size: 14px;
  color: var(--muted);
  font-family: monospace;
}

.preferences-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.preference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.preference-item:last-child {
  border-bottom: none;
}

.pref-label {
  font-size: 14px;
  color: var(--muted);
}

.pref-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.preview-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px 0;
}

.btn-large {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
}

.auto-fill-info {
  background: var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-top: 20px;
}

.info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.info-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Responsive adjustments for match preview */
@media (max-width: 768px) {
  .match-header {
    flex-direction: column;
    text-align: center;
  }
  
  .carrier-comparison {
    flex-direction: column;
  }
  
  .match-arrow {
    transform: rotate(90deg);
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .preferences-grid {
    grid-template-columns: 1fr;
  }
  
  .preview-actions {
    flex-direction: column;
  }
}

.carrier-select-container {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.help-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.help-text .icon {
  font-size: 16px;
}

.match-suggestion {
  background: linear-gradient(135deg, var(--amber) 0%, rgba(245, 158, 11, 0.8) 100%);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  color: #000;
}

.suggestion-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.suggestion-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.suggestion-text {
  flex: 1;
}

.suggestion-text strong {
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.match-details {
  font-size: 13px;
  opacity: 0.8;
}

.match-confidence {
  margin-top: 4px;
}

.suggestion-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.field-info {
  margin-top: 4px;
}

.source-label {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 500;
}

.source-label.user_data {
  background: var(--border);
  color: var(--muted);
}

.source-label.known_carrier {
  background: var(--green);
  color: white;
}

.source-label.auto_match {
  background: var(--amber);
  color: black;
}

.auto-populated-banner {
  background: linear-gradient(135deg, var(--green) 0%, rgba(34, 197, 94, 0.8) 100%);
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  color: white;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.banner-text {
  flex: 1;
  font-weight: 500;
}

/* Bulk Matching Styles */
.matching-progress {
  text-align: center;
  padding: 40px 20px;
}

.progress-bar {
  background: var(--border);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.progress-fill {
  background: var(--acc);
  height: 100%;
  border-radius: 8px;
  transition: width 2s ease;
  width: 0%;
}

.progress-text {
  color: var(--muted);
  font-size: 14px;
}

.matching-config .config-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.threshold-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-range {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  appearance: none;
}

.form-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--acc);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.form-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--acc);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.threshold-value {
  font-weight: 600;
  color: var(--acc);
  font-size: 14px;
  min-width: 40px;
}

.matching-info {
  margin: 24px 0;
}

.info-card {
  background: var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 12px;
}

.info-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
}

.info-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.info-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.matching-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-icon {
  margin-right: 8px;
}

.results-header {
  margin-bottom: 24px;
}

.results-header h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
}

.results-count {
  background: var(--border);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
}

.results-summary {
  color: var(--muted);
  font-size: 14px;
}

.confidence-high {
  color: var(--green);
  font-weight: 600;
}

.confidence-medium {
  color: var(--amber);
  font-weight: 600;
}

.results-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-group label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.results-table {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

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

.results-table th {
  background: var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding: 12px 16px;
}

.results-table td {
  padding: 16px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

.user-carrier strong {
  color: var(--text);
  font-weight: 600;
}

.carrier-details {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.known-carrier strong {
  color: var(--acc);
  font-weight: 600;
}

.match-method {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.confidence-score {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

.confidence-score.high {
  color: var(--green);
}

.confidence-score.medium {
  color: var(--amber);
}

.confidence-score.low {
  color: var(--red);
}

.confidence-bar {
  background: var(--border);
  border-radius: 3px;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.confidence-score.high .confidence-fill {
  background: var(--green);
}

.confidence-score.medium .confidence-fill {
  background: var(--amber);
}

.confidence-score.low .confidence-fill {
  background: var(--red);
}

.contact-info {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.proposal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proposal-actions .btn {
  font-size: 12px;
  padding: 6px 12px;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.status.approved {
  background: var(--green);
  color: white;
}

.status.rejected {
  background: var(--red);
  color: white;
}

.status.pending {
  background: var(--amber);
  color: black;
}

.results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.button-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .carrier-select-container {
    flex-direction: column;
  }
  
  .suggestion-content {
    flex-direction: column;
    text-align: center;
  }
  
  .suggestion-actions {
    justify-content: center;
  }
  
  .results-filters {
    flex-direction: column;
  }
  
  .results-actions {
    flex-direction: column;
  }
  
  .trek-button-group {
    flex-direction: column;
  }
  
  .trek-button-group .btn {
    min-width: unset;
    width: 100%;
  }
}

/* CSV Upload Section */
.settings-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
}
.settings-section:not(:last-child) {
  border-bottom: 1px solid rgba(42, 52, 65, 0.5);
}
.settings-section h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--acc);
}

.csv-upload-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.csv-file-input {
  background: var(--bg);
  color: var(--text);
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.csv-file-input:hover {
  border-color: var(--acc);
  background: var(--acc-light);
}

.csv-file-input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.csv-upload-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.csv-upload-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.upload-status {
  padding: 8px;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.upload-progress {
  margin-top: 12px;
}

.upload-progress .progress-bar {
  background: var(--border);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.upload-progress .progress-fill {
  background: linear-gradient(90deg, var(--acc), var(--green));
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
  width: 0%;
}

.upload-progress .progress-text {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 768px) {
  .csv-upload-actions {
    flex-direction: column;
  }
  
  .csv-upload-actions .btn {
    width: 100%;
  }
}

/* Aggregation Section */

.aggregation-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aggregation-info {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.aggregation-status {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 24px;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.aggregation-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.aggregation-progress {
  margin-top: 12px;
}

.aggregation-progress .progress-bar {
  background: var(--border);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.aggregation-progress .progress-fill {
  background: linear-gradient(90deg, var(--acc), var(--green));
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
  width: 0%;
}

.aggregation-progress .progress-text {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
}

.progress-details {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.steps-container h5 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 13px;
}

.step-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}

.step-item:last-child {
  border-bottom: none;
}

.step-item.completed {
  color: var(--green);
}

.step-item.failed {
  color: var(--red);
}

.error-text {
  color: var(--red);
  font-size: 11px;
  margin-top: 2px;
}

.aggregation-result {
  margin-top: 12px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.success-result {
  color: var(--green);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.error-result {
  color: var(--red);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

@media (max-width: 768px) {
  .aggregation-status {
    flex-direction: column;
    gap: 12px;
  }
  
  .aggregation-actions {
    flex-direction: column;
  }
  
  .aggregation-actions .btn {
    width: 100%;
  }
}

/* Intake Processing Section */

.intake-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intake-info {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.intake-status {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.intake-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.intake-progress {
  margin-top: 12px;
}

.intake-progress .progress-bar {
  background: var(--border);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.intake-progress .progress-fill {
  background: linear-gradient(90deg, var(--acc), var(--green));
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
  width: 0%;
}

.intake-progress .progress-text {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
}

.intake-result {
  margin-top: 12px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.intake-sessions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.intake-sessions h5 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.sessions-list {
  max-height: 200px;
  overflow-y: auto;
}

.session-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.3;
}

.session-item:last-child {
  margin-bottom: 0;
}

.session-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.session-id {
  font-family: monospace;
  font-weight: 500;
}

.session-time {
  color: var(--muted);
  font-size: 11px;
}

.session-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
}

.stat-item {
  color: var(--muted);
}

.stat-value {
  font-weight: 500;
}

.stat-pending {
  color: var(--amber);
}

.stat-completed {
  color: var(--green);
}

.stat-failed {
  color: var(--red);
}

.stat-duplicate {
  color: var(--muted);
}

@media (max-width: 768px) {
  .status-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .intake-actions {
    flex-direction: column;
  }
  
  .intake-actions .btn {
    width: 100%;
  }
  
  .session-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  .session-stats {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---- IP Intelligence Specific Styles ---- */

/* IP Status Filter Buttons */
.ip-status-filter {
  display: flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}

.status-preset {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.status-preset:hover {
  background: var(--border);
  color: var(--text);
}

.status-preset.active {
  background: var(--acc);
  color: white;
}

/* Chart Container */
.chart-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.distribution-chart {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-loading {
  color: var(--muted);
  font-style: italic;
}

.chart-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.chart-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  min-width: 120px;
  flex-shrink: 0;
}

.bar-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.bar-fill {
  height: 16px;
  background: linear-gradient(90deg, var(--acc) 0%, var(--acc-hover) 100%);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
  min-width: 2px;
}

.bar-fill:hover {
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.bar-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 40px;
  text-align: right;
}

/* IP Lookup Modal Styles */
.ip-input-container {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ip-input-container input {
  flex: 1;
}

.ip-input-container button {
  flex-shrink: 0;
}

.lookup-progress {
  padding: 16px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 16px;
}

.progress-indicator {
  color: var(--acc);
  font-weight: 500;
}

.lookup-results {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-top: 16px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.result-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.result-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.confidence-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confidence-badge.high {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.confidence-badge.medium {
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.confidence-badge.low {
  background: rgba(239, 68, 68, 0.2);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.lookup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.lookup-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 500;
}

.error-icon {
  font-size: 16px;
}

/* IP Address Column */
.col-ip {
  font-family: 'Courier New', monospace;
}

.col-ip code {
  background: rgba(59, 130, 246, 0.1);
  color: var(--acc);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* Performance Grade Badges */
.grade-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-width: 24px;
}

.grade-a {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.grade-b {
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.grade-c {
  background: rgba(239, 68, 68, 0.2);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Control Group Styles */
.view-control,
.metric-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.view-select,
.metric-select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* Mobile Responsiveness for IP Intelligence */
@media (max-width: 768px) {
  .ip-status-filter {
    flex-wrap: wrap;
  }
  
  .status-preset {
    flex: 1;
    min-width: 0;
  }
  
  .chart-bar-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .bar-label {
    min-width: auto;
    width: 100%;
  }
  
  .bar-container {
    width: 100%;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
  }
  
  .ip-input-container {
    flex-direction: column;
  }
  
  .lookup-actions {
    flex-direction: column;
  }
  
  .lookup-actions button {
    width: 100%;
  }
}

/* Theme Selector Styling */
.theme-selector {
  margin-top: 8px;
}

.theme-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.theme-option:hover {
  background: var(--acc-light);
}

.theme-option input[type="radio"] {
  display: none;
}

.theme-option input[type="radio"]:checked + .theme-preview {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px var(--acc-light);
}

.theme-option input[type="radio"]:checked ~ .theme-label {
  color: var(--acc);
  font-weight: 600;
}

.theme-preview {
  width: 48px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid var(--border);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.theme-preview.dark {
  background: linear-gradient(135deg, #0a0e1a 0%, #141b2d 100%);
}

.theme-preview.light {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.theme-preview.system {
  background: linear-gradient(45deg, #0a0e1a 0%, #0a0e1a 50%, #f8fafc 50%, #f8fafc 100%);
}

.theme-preview.system::after {
  content: "⚙️";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  opacity: 0.7;
}

.theme-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  transition: all 0.2s ease;
}

/* Media IP Page Styling */

.chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #495057;
}

.view-select {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: white;
}

.distribution-chart {
  min-height: 300px;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #6c757d;
  font-style: italic;
}

.media-ip-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.media-ip-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ip-performance-filter {
  padding: 8px 16px;
  border: 2px solid #e0e6ed;
  background: #ffffff;
  color: #495057;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ip-performance-filter:hover {
  border-color: #007bff;
  background: #f8f9fa;
  color: #007bff;
}

.ip-performance-filter.active {
  border-color: #007bff;
  background: #007bff;
  color: white;
}

.ip-performance-filter.excellent {
  border-color: #28a745;
  color: #28a745;
}

.ip-performance-filter.excellent.active {
  background: #28a745;
  color: white;
}

.ip-performance-filter.good {
  border-color: #17a2b8;
  color: #17a2b8;
}

.ip-performance-filter.good.active {
  background: #17a2b8;
  color: white;
}

.ip-performance-filter.poor {
  border-color: #dc3545;
  color: #dc3545;
}

.ip-performance-filter.poor.active {
  background: #dc3545;
  color: white;
}

.media-ip-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 30px;
}

.media-ip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.media-ip-table th {
  background: #f8f9fa;
  color: #495057;
  font-weight: 600;
  padding: 15px 12px;
  text-align: left;
  border-bottom: 2px solid #e9ecef;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.media-ip-table th:hover {
  background: #e9ecef;
}

.media-ip-table th.sortable::after {
  content: '↕';
  position: absolute;
  right: 8px;
  opacity: 0.5;
}

.media-ip-table th.sort-asc::after {
  content: '↑';
  opacity: 1;
  color: #007bff;
}

.media-ip-table th.sort-desc::after {
  content: '↓';
  opacity: 1;
  color: #007bff;
}

.media-ip-table td {
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

.media-ip-table tbody tr:hover {
  background: #f8f9fa;
}

.media-ip-table tbody tr:nth-child(even) {
  background: #fdfdfd;
}

.media-ip-table tbody tr:nth-child(even):hover {
  background: #f0f0f0;
}

.media-ip-performance-grade {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-width: 50px;
}

.media-ip-performance-grade.excellent {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.media-ip-performance-grade.good {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.media-ip-performance-grade.poor {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.performers-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.performers-list {
  background: var(--gradient);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px var(--shadow);
}

.performers-list h3 {
  margin: 0 0 15px 0;
  color: #495057;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 10px;
}

.performers-list h3.top-performers {
  color: #28a745;
  border-bottom-color: #28a745;
}

.performers-list h3.bottom-performers {
  color: #dc3545;
  border-bottom-color: #dc3545;
}

.card .panel-head {
  margin-bottom: 15px;
}

.card .panel-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.cards .performers-list {
  max-height: 300px;
  overflow-y: auto;
}

.refresh-icon,
.export-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
}

.btn-compact {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 4px;
}

.performer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f3f4;
}

.performer-item:last-child {
  border-bottom: none;
}

.performer-ip {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #495057;
}

.performer-score {
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.performer-score.high {
  background: #d4edda;
  color: #155724;
}

.performer-score.low {
  background: #f8d7da;
  color: #721c24;
}

.media-ip-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.media-ip-chart-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
}

.media-ip-chart-container h3 {
  margin: 0 0 20px 0;
  color: #495057;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.media-ip-chart {
  width: 100%;
  height: 250px;
}

/* Responsive design for Media IP page */
@media (max-width: 1200px) {
  .performers-section {
    grid-template-columns: 1fr;
  }
  
  .media-ip-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .media-ip-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .media-ip-filters {
    justify-content: center;
  }
  
  .ip-performance-filter {
    flex: 1;
    justify-content: center;
    min-width: 80px;
  }
  
  .media-ip-table {
    font-size: 12px;
  }
  
  .media-ip-table th,
  .media-ip-table td {
    padding: 8px 6px;
  }
  
  .performer-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .media-ip-chart {
    height: 200px;
  }
}

/* IP Modal Filter Button */
.btn-filter {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all 0.2s ease;
}

.btn-filter:hover {
  background: var(--border);
  color: var(--text);
}

.btn-filter.active {
  background: var(--acc);
  color: white;
  border-color: var(--acc);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}