/*
 * MailTrack — SES Dashboard
 * css/styles.css  v3
 *
 * §1   Design tokens (variables CSS)
 * §2   Reset & base
 * §3   Layout: sidebar + content area
 * §4   Sidebar
 * §5   Topbar & controles
 * §6   Date range picker
 * §7   Export dropdown
 * §8   Alert Banner
 * §9   KPI Cards
 * §10  Chart Cards
 * §11  Donut legend
 * §12  Domains table
 * §13  Alert settings modal
 * §14  Utilidades (skeleton, toast, loading)
 * §15  Responsive
 */

/* ═══════════════════════════════════════════════════
   §1  DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  /* Modern, calm palette */
  --bg:          #0a0c10;
  --surface:     #111318;
  --surface2:    #181b22;
  --surface3:    #1f232b;
  --border:      #252a34;
  --border2:     #323842;
  
  /* Accent - muted teal (calming) */
  --accent:      #5eead4;
  --accent-dim:  rgba(94,234,212,.08);
  --accent-glow: rgba(94,234,212,.15);
  
  /* Accent text (for buttons on accent bg) */
  --text-on-accent: #0a1a0e;
  
  /* Paleta semántica - muted */
  --blue:        #93c5fd;
  --blue-dim:    rgba(147,197,253,.08);
  --red:         #fca5a5;
  --red-dim:     rgba(252,165,165,.08);
  --orange:      #fdba74;
  --orange-dim:  rgba(253,186,116,.08);
  --yellow:      #fde047;
  --yellow-dim:  rgba(253,224,71,.08);
  
  /* Texto - softer */
  --text:        #e8eaf0;
  --text2:       #94a3b8;
  --text3:       #475569;
  
  /* Tipografía */
  --font-display:'Syne', sans-serif;
  --font-sans:   'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;
  
  /* Espaciado */
  --r:     8px;
  --r-sm:  6px;
  --r-lg:  12px;
  --t:     .15s ease;
  /* Sidebar */
  --sb-w:  220px;
  --sb-collapsed: 52px;
  --sb-transition: width .25s cubic-bezier(.4,0,.2,1);
}

[data-theme="light"] {
  --bg:         #f8fafc;   --surface:    #ffffff;
  --surface2:   #f1f5f9;   --surface3:   #e2e8f0;
  --border:     #e2e8f0;   --border2:    #cbd5e1;
  --text:       #0f172a;   --text2:      #475569;   --text3: #94a3b8;
  --accent:     #0d9488;   --accent-dim: rgba(13,148,136,.08);
                           --accent-glow:rgba(13,148,136,.15);
  --text-on-accent: #fff;
  --blue:       #0284c7;   --blue-dim:   rgba(2,132,199,.08);
  --red:        #dc2626;   --red-dim:    rgba(220,38,38,.08);
  --orange:     #ea580c;   --orange-dim: rgba(234,88,12,.08);
  --yellow:     #ca8a04;   --yellow-dim: rgba(202,138,4,.08);
}

/* ═══════════════════════════════════════════════════
   §2  RESET & BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body  { height: 100%; }
body {
  font-family: var(--font-sans);
  background:  var(--bg);
  color:       var(--text);
  font-size:   15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Prevent flash of login screen when token exists */
html.has-token #login-screen { display: none !important; }
html.has-token #app { display: flex !important; }
button      { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }
input,select{ font-family: var(--font-sans); }
a           { color: inherit; text-decoration: none; }
::-webkit-scrollbar       { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ═══════════════════════════════════════════════════
   §3  LAYOUT: página con sidebar + área de contenido
   ═══════════════════════════════════════════════════ */
.an-page {
  display:    flex;
  flex-direction: row;
  height:     100vh;
  overflow:   hidden;
  background: var(--bg);
}

/* Área de contenido: flex column, toma el espacio restante */
.an-content-area {
  flex:     1;
  display:  flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════
   §4  SIDEBAR — Modern, clean design
   ═══════════════════════════════════════════════════ */
.an-sidebar {
  width:          var(--sb-w);
  flex-shrink:    0;
  background:     var(--surface);
  border-right:   1px solid var(--border);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  transition:     var(--sb-transition);
  height:         100vh;
  position:       relative;
  z-index:        10;
}

/* Colapsado: solo iconos */
.an-sidebar.collapsed { 
  width: var(--sb-collapsed); 
}

/* Brand row — clean header */
.asb-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     0 14px;
  height:      52px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.asb-logo {
  width:    28px; 
  height:   28px; 
  border-radius: 8px; 
  flex-shrink: 0;
  background: linear-gradient(135deg, #5eead4, #2dd4bf);
  display:    flex; 
  align-items: center; 
  justify-content: center;
  font-size:  13px; 
  box-shadow: 0 0 0 1px rgba(94,234,212,.25);
}

.asb-name { 
  font-family: var(--font-display); 
  font-size: 15px; 
  font-weight: 700; 
  letter-spacing: -.03em; 
  white-space: nowrap; 
  overflow: hidden;
}

.asb-name em { 
  font-style: normal; 
  color: var(--accent); 
}

.asb-collapse {
  margin-left: auto; 
  flex-shrink: 0;
  width:  24px; 
  height: 24px; 
  border-radius: 6px;
  border: 1px solid var(--border); 
  color: var(--text3); 
  font-size: 12px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; 
  transition: all var(--t);
}

.asb-collapse:hover { 
  border-color: var(--accent); 
  color: var(--accent); 
  background: var(--accent-dim); 
}

/* Nav section */
.asb-nav {
  flex: 1; 
  overflow-y: auto; 
  overflow-x: hidden;
  padding: 8px; 
  display: flex; 
  flex-direction: column; 
  gap: 2px;
}

.asb-section-label {
  font-size: 10px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: .08em;
  color: var(--text3); 
  padding: 10px 8px 6px; 
  white-space: nowrap;
}

.asb-item {
  display: flex; 
  align-items: center; 
  gap: 10px;
  padding: 8px 10px; 
  border-radius: var(--r-sm);
  font-size: 13px; 
  font-weight: 500; 
  color: var(--text2);
  cursor: pointer; 
  transition: all var(--t); 
  white-space: nowrap;
  text-decoration: none; 
  border: none; 
  background: none; 
  width: 100%; 
  text-align: left;
}

.asb-item:hover { 
  background: var(--surface2); 
  color: var(--text); 
}

.asb-item.active { 
  background: var(--accent-dim); 
  color: var(--accent); 
}

.asb-item-dot { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  flex-shrink: 0; 
  transition: background var(--t); 
}

.asb-item-label { 
  flex: 1; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.asb-item-count {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--surface3);
  color: var(--text3);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 24px;
  text-align: center;
}

.asb-item.active .asb-item-count {
  background: var(--accent-glow);
  color: var(--accent);
}

/* Footer — user info */
.asb-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex-shrink: 0;
}

.asb-avatar {
  width: 30px; 
  height: 30px; 
  border-radius: 50%; 
  flex-shrink: 0;
  background: var(--accent-dim); 
  border: 1px solid rgba(94,234,212,.3);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 12px; 
  font-weight: 700; 
  color: var(--accent);
}

.asb-footer-info { 
  flex: 1; 
  min-width: 0; 
  overflow: hidden; 
}

.asb-footer-name { 
  font-size: 12px; 
  font-weight: 600; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.asb-footer-role { 
  font-size: 10px; 
  color: var(--text3); 
  font-family: var(--font-mono); 
}

.asb-theme-btn {
  width: 28px; 
  height: 28px; 
  border-radius: 6px; 
  flex-shrink: 0;
  border: 1px solid var(--border); 
  color: var(--text3); 
  font-size: 14px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; 
  transition: all var(--t);
}

.asb-theme-btn:hover { 
  border-color: var(--yellow); 
  color: var(--yellow); 
}

/* ── Colapsed state: clean minimal look ── */
.an-sidebar.collapsed .asb-name,
.an-sidebar.collapsed .asb-section-label,
.an-sidebar.collapsed .asb-item-label,
.an-sidebar.collapsed .asb-item-count,
.an-sidebar.collapsed .asb-footer-info { 
  display: none !important; 
}

.an-sidebar.collapsed .asb-brand { 
  justify-content: center; 
  padding: 0 8px; 
  gap: 0; 
}

.an-sidebar.collapsed .asb-logo { 
  margin: 0 auto; 
}

.an-sidebar.collapsed .asb-collapse { 
  display: none;
}

.an-sidebar.collapsed .asb-item { 
  justify-content: center; 
  padding: 10px 6px; 
}

.an-sidebar.collapsed .asb-item-dot { 
  margin: 0; 
}

.an-sidebar.collapsed .asb-footer { 
  justify-content: center; 
  padding: 10px 6px; 
  flex-wrap: wrap; 
  gap: 6px; 
}

.an-sidebar.collapsed .asb-footer-info,
.an-sidebar.collapsed .asb-theme-btn { 
  display: none; 
}

/* Tooltip for collapsed items */
.an-sidebar.collapsed .asb-item {
  position: relative;
}

.an-sidebar.collapsed .asb-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface3);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  margin-left: 6px;
}

.an-sidebar.collapsed .asb-item:hover::after {
  opacity: 1;
}

/* Overlay for mobile */
.an-sidebar-overlay {
  display: none; 
  position: fixed; 
  inset: 0; 
  z-index: 9;
  background: rgba(0,0,0,.55);
}

.an-sidebar-overlay.show { 
  display: block; 
}

/* ── Brand row ── */
.asb-brand {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     0 14px;
  height:      48px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.asb-logo {
  width:    26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(135deg,#5eead4,#2dd4bf);
  display:    flex; align-items: center; justify-content: center;
  font-size:  13px; box-shadow: 0 0 0 1px rgba(94,234,212,.25);
}
.asb-name    { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:-.03em; white-space:nowrap; overflow:hidden; }
.asb-name em { font-style:normal; color:var(--accent); }

.asb-collapse {
  margin-left: auto; flex-shrink: 0;
  width:  22px; height: 22px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--text3); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor:pointer; transition: all var(--t);
}
.asb-collapse:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* ── Nav ── */
.asb-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.asb-section-label {
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text3); padding:8px 8px 4px; white-space:nowrap;
}
.asb-item {
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; border-radius:var(--r-sm);
  font-size:12px; font-weight:500; color:var(--text2);
  cursor:pointer; transition:all var(--t); white-space:nowrap;
  text-decoration:none; border:none; background:none; width:100%; text-align:left;
}
.asb-item:hover  { background:var(--surface2); color:var(--text); }
.asb-item.active { background:var(--accent-dim); color:var(--accent); }
.asb-item-dot    { width:7px; height:7px; border-radius:50%; flex-shrink:0; transition:background var(--t); }
.asb-item-label  { flex:1; overflow:hidden; text-overflow:ellipsis; }

/* ── Footer ── */
.asb-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.asb-avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--accent-dim); border:1px solid rgba(94,234,212,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--accent);
}
.asb-footer-info { flex:1; min-width:0; overflow:hidden; }
.asb-footer-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asb-footer-role { font-size:10px; color:var(--text3); font-family:var(--font-mono); }
.asb-theme-btn {
  width:26px; height:26px; border-radius:5px; flex-shrink:0;
  border:1px solid var(--border); color:var(--text3); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--t);
}
.asb-theme-btn:hover { border-color:var(--yellow); color:var(--yellow); }

/* ── Ocultar texto cuando está colapsado ── */
.an-sidebar.collapsed .asb-name,
.an-sidebar.collapsed .asb-section-label,
.an-sidebar.collapsed .asb-item-label,
.an-sidebar.collapsed .asb-footer-info { display:none !important; }
.an-sidebar.collapsed .asb-brand        { justify-content:center; padding:0 8px; gap:6px; }
.an-sidebar.collapsed .asb-logo         { margin:0 auto; }
.an-sidebar.collapsed .asb-collapse     { margin:0 auto; width:26px; height:26px; } /* keep visible */
.an-sidebar.collapsed .asb-item         { justify-content:center; padding:8px 6px; }
.an-sidebar.collapsed .asb-item-dot     { margin:0; }
.an-sidebar.collapsed .asb-footer       { justify-content:center; padding:8px 6px; flex-wrap:wrap; gap:5px; }
.an-sidebar.collapsed .asb-footer-info,
.an-sidebar.collapsed .asb-theme-btn    { display:none; }

/* Overlay oscuro (móvil) */
.an-sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:9;
  background:rgba(0,0,0,.55);
}
.an-sidebar-overlay.show { display:block; }

/* ═══════════════════════════════════════════════════
   §5  TOPBAR
   ═══════════════════════════════════════════════════ */
.an-topbar {
  height:48px; flex-shrink:0;
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px; padding:0 16px;
  overflow:visible;        /* must be visible so dropdown escapes */
  position:relative; z-index:20;
}
/* Ocultar scrollbar horizontal en topbar */

.an-topbar-divider { width:1px; height:18px; background:var(--border); flex-shrink:0; }
.an-topbar-section { font-family:var(--font-display); font-size:13px; font-weight:700; white-space:nowrap; }
.an-topbar-right   { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.an-sep            { width:1px; height:20px; background:var(--border); flex-shrink:0; }

/* Icon buttons genéricos */
.btn-icon {
  width:30px; height:30px; border-radius:var(--r-sm);
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text2); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t); flex-shrink:0;
}
.btn-icon:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.btn-icon.btn-menu { display:none; } /* visible solo en móvil */
.btn-icon.spinning span { display:inline-block; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Pills de período */
.an-pill-group { display:flex; gap:3px; flex-shrink:0; }
.an-pill {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:5px 11px; font-size:11px; font-weight:600; color:var(--text2);
  cursor:pointer; transition:all var(--t); font-family:var(--font-mono); white-space:nowrap;
}
.an-pill:hover  { border-color:var(--border2); color:var(--text); }
.an-pill.active { background:var(--accent-dim); border-color:rgba(94,234,212,.4); color:var(--accent); }

/* Domain select */
.an-domain-select {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:5px 10px; color:var(--text); font-size:11px; outline:none;
  height:30px; min-width:160px; font-family:var(--font-mono);
  cursor:pointer; transition:border-color var(--t);
}
.an-domain-select:focus { border-color:var(--accent); }

/* Body scrollable */
.an-body {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:18px 20px; gap:16px;
  display:flex; flex-direction:column;
  background:var(--bg);
}

/* ═══════════════════════════════════════════════════
   §6  DATE RANGE PICKER
   ═══════════════════════════════════════════════════ */
.date-range-group { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.date-input {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:4px 7px; color:var(--text); font-size:11px; outline:none;
  height:30px; font-family:var(--font-mono); color-scheme:dark;
  transition:border-color var(--t); width:128px;
}
.date-input:focus { border-color:var(--accent); }
[data-theme="light"] .date-input { color-scheme:light; }
.date-range-sep { font-size:10px; color:var(--text3); padding:0 1px; }

/* ═══════════════════════════════════════════════════
   §7  EXPORT DROPDOWN
   ═══════════════════════════════════════════════════ */
.export-wrap { position:relative; display:inline-flex; flex-shrink:0; }
.btn-export {
  display:flex; align-items:center; gap:5px;
  height:30px; padding:0 12px; border-radius:var(--r-sm);
  background:var(--accent-dim); border:1px solid rgba(94,234,212,.35);
  color:var(--accent); font-size:11px; font-weight:600;
  font-family:var(--font-mono); cursor:pointer; transition:all var(--t); white-space:nowrap;
}
.btn-export:hover { background:var(--accent-glow); border-color:var(--accent); }
.btn-export .arrow { font-size:9px; transition:transform var(--t); }
.btn-export.open .arrow { transform:rotate(180deg); }

.export-dropdown {
  display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:200;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r); box-shadow:0 12px 32px rgba(0,0,0,.45);
  min-width:190px; overflow:hidden;
}
.export-dropdown.open { display:block; }
.export-option {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; font-size:12px; color:var(--text2);
  cursor:pointer; transition:background var(--t);
}
.export-option:hover    { background:var(--surface2); color:var(--text); }
.export-option-icon     { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.export-option-sub      { font-size:10px; color:var(--text3); font-family:var(--font-mono); margin-top:1px; }

/* ═══════════════════════════════════════════════════
   §8  ALERT BANNER
   ═══════════════════════════════════════════════════ */
.an-alert {
  display:flex; align-items:center; gap:12px;
  background:var(--red-dim); border:1px solid rgba(248,113,113,.35);
  border-radius:var(--r); padding:12px 16px;
  animation:alert-pulse 2.5s ease-in-out infinite;
}
@keyframes alert-pulse {
  0%,100% { border-color:rgba(248,113,113,.35); box-shadow:none; }
  50%     { border-color:rgba(248,113,113,.70); box-shadow:0 0 0 3px rgba(248,113,113,.08); }
}
.an-alert-icon  { font-size:20px; flex-shrink:0; }
.an-alert-body  { flex:1; }
.an-alert-title { font-size:13px; font-weight:700; color:var(--red); font-family:var(--font-display); }
.an-alert-desc  { font-size:11px; color:rgba(248,113,113,.8); margin-top:2px; font-family:var(--font-mono); }
.an-alert-badge {
  font-family:var(--font-mono); font-size:16px; font-weight:700;
  color:var(--red); background:rgba(248,113,113,.15); border-radius:8px;
  padding:4px 12px; flex-shrink:0;
}
.an-alert.is-warning                 { background:var(--yellow-dim); border-color:rgba(251,191,36,.35); animation:none; }
.an-alert.is-warning .an-alert-title { color:var(--yellow); }
.an-alert.is-warning .an-alert-desc  { color:rgba(251,191,36,.8); }
.an-alert.is-warning .an-alert-badge { color:var(--yellow); background:rgba(251,191,36,.15); }
.an-alert.is-ok                      { background:var(--accent-dim); border-color:rgba(94,234,212,.3); animation:none; }
.an-alert.is-ok .an-alert-title      { color:var(--accent); }
.an-alert.is-ok .an-alert-desc       { color:rgba(94,234,212,.7); }
.an-alert.is-ok .an-alert-badge      { color:var(--accent); background:rgba(94,234,212,.12); }
.an-alert.is-hidden                  { display:none; }

/* ═══════════════════════════════════════════════════
   §9  KPI CARDS
   ═══════════════════════════════════════════════════ */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

.kpi-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 18px;
  position:relative; overflow:hidden;
  transition:border-color .2s, transform var(--t);
  animation: kpiFadeIn .3s ease-out;
}
@keyframes kpiFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.kpi-card:hover           { border-color:var(--border2); transform:translateY(-1px); }
.kpi-card::after          { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.kpi-card.c-blue::after   { background:var(--blue); }
.kpi-card.c-green::after  { background:var(--accent); }
.kpi-card.c-yellow::after { background:var(--yellow); }
.kpi-card.c-red::after    { background:var(--red); }
.kpi-card.c-orange::after { background:var(--orange); }

.kc-label  { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.kc-icon   { font-size:14px; }
.kc-val    { font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.kc-sub    { font-size:11px; color:var(--text3); margin-top:4px; font-family:var(--font-mono); }
.kc-delta  { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; font-family:var(--font-mono); margin-top:7px; }
.kc-delta.good { background:var(--accent-dim); color:var(--accent); }
.kc-delta.bad  { background:var(--red-dim);    color:var(--red); }
.kc-delta.warn { background:var(--yellow-dim); color:var(--yellow); }
.kc-delta.neu  { background:var(--surface2);   color:var(--text3); }

/* ═══════════════════════════════════════════════════
   §10  CHART CARDS
   ═══════════════════════════════════════════════════ */
.chart-row       { display:grid; gap:12px; }
.chart-row.r-1   { grid-template-columns:1fr; }
.chart-row.r-2   { grid-template-columns:1fr 1fr; }
.chart-row.r-3-1 { grid-template-columns:2fr 1fr; }

.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; overflow:visible; position:relative; }
.chart-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.chart-card-title  { font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.chart-card-sub    { font-size:11px; color:var(--text3); margin-top:2px; font-family:var(--font-mono); }
.chart-canvas-wrap { position:relative; width:100%; }
.chart-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.cl-item      { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--text2); font-family:var(--font-mono); }
.cl-dot       { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ═══════════════════════════════════════════════════
   §11  DONUT LEGEND
   ═══════════════════════════════════════════════════ */
.donut-container   { display:flex; align-items:center; gap:20px; padding:4px 0; }
.donut-canvas-wrap { flex-shrink:0; position:relative; }
.donut-legend-list { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.dli       { display:flex; align-items:center; gap:8px; cursor:pointer; border-radius:5px; padding:3px 5px; transition:background var(--t); }
.dli:hover { background:var(--surface2); }
.dli-dot   { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dli-name  { font-size:11px; color:var(--text2); flex:1; }
.dli-val   { font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text); }
.dli-pct   { font-family:var(--font-mono); font-size:10px; color:var(--text3); min-width:34px; text-align:right; }

/* ═══════════════════════════════════════════════════
   §12  DOMAINS TABLE
   ═══════════════════════════════════════════════════ */
.an-table              { width:100%; border-collapse:collapse; font-size:12px; }
.an-table th           { text-align:left; padding:7px 10px; font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); border-bottom:1px solid var(--border); font-weight:700; }
.an-table td           { padding:9px 10px; border-bottom:1px solid var(--border); }
.an-table tr:last-child td { border-bottom:none; }
.an-table tr:hover td  { background:var(--surface2); }
.an-table .t-mono      { font-family:var(--font-mono); font-size:11px; }
.an-table .col-email   { color:var(--text); font-weight:500; }
.an-table .col-bar     { width:130px; }
.mini-bar-track        { height:4px; background:var(--surface3); border-radius:2px; overflow:hidden; margin-top:2px; }
.mini-bar-fill         { height:100%; border-radius:2px; background:var(--accent); transition:width .6s ease; }

/* ═══════════════════════════════════════════════════
   §13  ALERT SETTINGS MODAL
   ═══════════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }

.modal {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r-lg); width:420px; max-width:calc(100vw - 32px);
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-header {
  display:flex; align-items:center; gap:10px;
  padding:15px 18px; border-bottom:1px solid var(--border);
}
.modal-header-icon { font-size:18px; }
.modal-title       { font-family:var(--font-display); font-size:14px; font-weight:700; flex:1; }
.modal-close {
  width:26px; height:26px; border-radius:5px;
  border:1px solid var(--border2); color:var(--text2); font-size:13px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--t);
}
.modal-close:hover  { border-color:var(--red); color:var(--red); }
.modal-body         { padding:18px; display:flex; flex-direction:column; gap:14px; }
.modal-footer       { padding:13px 18px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* Form fields */
.form-field        { display:flex; flex-direction:column; gap:5px; }
.form-label        { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); }
.form-hint         { font-size:10px; color:var(--text3); font-family:var(--font-mono); }
.form-slider-wrap  { display:flex; align-items:center; gap:10px; }
.form-slider {
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px; background:var(--surface3); outline:none; cursor:pointer;
}
.form-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:var(--accent);
  border:2px solid var(--surface); cursor:pointer; transition:transform var(--t);
}
.form-slider::-webkit-slider-thumb:hover { transform:scale(1.3); }
.form-slider-val { min-width:42px; text-align:right; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text); }

/* Threshold preview grid */
.threshold-preview {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 12px;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.tp-item  { display:flex; flex-direction:column; gap:2px; }
.tp-label { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:.07em; }
.tp-val   { font-family:var(--font-mono); font-size:13px; font-weight:700; }
.tp-val.good { color:var(--accent); }
.tp-val.warn { color:var(--yellow); }
.tp-val.bad  { color:var(--red); }

/* Modal buttons */
.btn-modal-save {
  height:32px; padding:0 16px; border-radius:var(--r-sm);
  background:var(--accent); border:none; color:#000;
  font-size:12px; font-weight:700; cursor:pointer; transition:opacity var(--t);
}
.btn-modal-save:hover   { opacity:.85; }
.btn-modal-cancel {
  height:32px; padding:0 14px; border-radius:var(--r-sm);
  background:none; border:1px solid var(--border2); color:var(--text2);
  font-size:12px; cursor:pointer; transition:all var(--t);
}
.btn-modal-cancel:hover { border-color:var(--border); color:var(--text); }

/* ═══════════════════════════════════════════════════
   §14  UTILIDADES
   ═══════════════════════════════════════════════════ */
.u-loading {
  text-align:center; padding:48px;
  color:var(--text3); font-size:12px; font-family:var(--font-mono);
}
.u-error { text-align:center; padding:32px; color:var(--red); font-size:12px; }

.u-skeleton {
  background:linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size:200% 100%; border-radius:6px; animation:shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.toast {
  position:fixed; bottom:18px; right:18px; z-index:500;
  background:var(--surface); border:1px solid rgba(94,234,212,.3); color:var(--accent);
  border-radius:8px; padding:8px 14px; font-size:11px; font-weight:600;
  font-family:var(--font-mono); opacity:0; transform:translateY(5px);
  transition:opacity .25s, transform .25s; pointer-events:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:flex; align-items:center; gap:8px; cursor:pointer;
}
.toast.show { opacity:1; transform:translateY(0); }
.toast-close {
  background:none; border:none; color:var(--text3); font-size:14px;
  padding:0; line-height:1; cursor:pointer; transition:color var(--t);
}
.toast-close:hover { color:var(--text); }

/* ═══════════════════════════════════════════════════
   §15  RESPONSIVE
   ═══════════════════════════════════════════════════ */

/* 1280px: contraer columna donut */
@media (max-width:1280px) {
  .chart-row.r-3-1 { grid-template-columns:3fr 2fr; }
}

/* 1024px: r-3-1 a columna única */
@media (max-width:1024px) {
  .chart-row.r-3-1 { grid-template-columns:1fr; }
  .kpi-row         { grid-template-columns:repeat(2,1fr); }
}

/* 900px: r-2 a columna única */
@media (max-width:900px) {
  .chart-row.r-2   { grid-template-columns:1fr; }
}

/* 768px: sidebar como drawer lateral, topbar siempre visible */
@media (max-width:768px) {
  /* La página vuelve a flex-column: topbar encima, body debajo */
  .an-page { flex-direction:column; }

  /* Sidebar se convierte en drawer */
  .an-sidebar {
    position: fixed; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    width: var(--sb-w) !important;
    box-shadow: none;
  }

  .an-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.55);
  }

  /* Cuando el sidebar está abierto en móvil, mostrar todos los textos */
  .an-sidebar.open .asb-name,
  .an-sidebar.open .asb-section-label,
  .an-sidebar.open .asb-item-label,
  .an-sidebar.open .asb-item-count,
  .an-sidebar.open .asb-footer-info { 
    display: flex !important; 
  }

  .an-sidebar.open .asb-brand { 
    justify-content: flex-start; 
    padding: 0 14px; 
  }

  .an-sidebar.open .asb-logo { 
    margin: 0; 
  }

  .an-sidebar.open .asb-item { 
    justify-content: flex-start; 
    padding: 8px 10px; 
  }

  /* Mostrar botón hamburguesa en móvil */
  .btn-icon.btn-menu { display: flex; }

  .an-content-area { height: 100vh; }
}

/* 600px: KPIs en 1 col, fecha contraída */
@media (max-width:600px) {
  .kpi-row    { grid-template-columns:1fr; }
  .an-body    { padding:12px; gap:12px; }
  /* Ocultar fechas en pantallas muy pequeñas */
  .date-range-group { display:none; }
  /* Etiqueta del export solo ícono */
  .btn-export-label { display:none; }
  .btn-export { padding:0 10px; }
}

/* ═══════════════════════════════════════════════════
   §16  PDF REPORT BUTTON
   ═══════════════════════════════════════════════════ */
.btn-pdf {
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 13px; border-radius:var(--r-sm);
  background:var(--surface2); border:1px solid var(--border2);
  color:var(--text2); font-size:11px; font-weight:600;
  font-family:var(--font-mono); cursor:pointer; transition:all var(--t);
  white-space:nowrap; flex-shrink:0;
}
.btn-pdf:hover   { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.btn-pdf.loading { opacity:.6; pointer-events:none; }
.btn-pdf .pdf-icon { font-size:13px; }

/* PDF progress overlay */
.pdf-progress-overlay {
  display:none; position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
.pdf-progress-overlay.show { display:flex; }
.pdf-progress-box {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r-lg); padding:28px 36px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 32px 80px rgba(0,0,0,.6); min-width:280px;
}
.pdf-progress-title { font-family:var(--font-display); font-size:15px; font-weight:700; }
.pdf-progress-sub   { font-size:11px; color:var(--text3); font-family:var(--font-mono); }
.pdf-progress-bar-track {
  width:100%; height:4px; background:var(--surface3); border-radius:2px; overflow:hidden;
}
.pdf-progress-bar-fill {
  height:100%; background:var(--accent); border-radius:2px;
  width:0%; transition:width .4s ease;
}

/* ═══════════════════════════════════════════════════
   §17  CHART INTERACTION ENHANCEMENTS
   ═══════════════════════════════════════════════════ */
/* Cursor pointer over canvas (Chart.js handles click internally) */
.chart-canvas-wrap canvas  { cursor:crosshair; }
.donut-canvas-wrap canvas  { cursor:pointer; }

/* Zoom hint badge shown on trend chart */
.chart-zoom-hint {
  position:absolute; top:6px; right:8px;
  font-size:9px; font-family:var(--font-mono); color:var(--text3);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:4px; padding:2px 6px; pointer-events:none;
  opacity:1; transition:opacity .3s;
}
.chart-zoom-hint.hidden { opacity:0; }

/* Highlighted KPI card (when a donut segment is clicked) */
.kpi-card.chart-highlight {
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px var(--accent-dim);
  transform:translateY(-2px);
}

/* Sidebar collapsed expand button — always visible strip */
.sb-expand-strip {
  display:none; /* shown via JS when collapsed */
  position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:20px; height:56px;
  background:var(--surface); border:1px solid var(--border);
  border-left:none; border-radius:0 6px 6px 0;
  align-items:center; justify-content:center;
  cursor:pointer; z-index:11; color:var(--text3); font-size:11px;
  transition:all var(--t);
  padding:0;
}
.sb-expand-strip:hover { color:var(--accent); background:var(--accent-dim); }
.an-sidebar.collapsed .sb-expand-strip { display:flex; }
.an-sidebar:not(.collapsed) .sb-expand-strip { display:none; }

/* ═══════════════════════════════════════════════════
   §18  TABLA DE CORREOS CON ACCIONES
   → React: <EmailsTable rows={items} onAction={} />
   ═══════════════════════════════════════════════════ */

/* Cabecera de la sección con contador y controles */
.emails-table-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.emails-table-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
}
.emails-table-count {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 2px 8px; color: var(--text3);
}
.emails-table-sub {
  font-size: 11px; color: var(--text3);
  font-family: var(--font-mono); margin-left: auto;
}

/* Tabla */
.emails-action-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.emails-action-table th {
  text-align: left; padding: 7px 10px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text3); border-bottom: 1px solid var(--border); font-weight: 700;
  white-space: nowrap;
}
.emails-action-table th.th-actions { text-align: center; width: 110px; }

.emails-action-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.emails-action-table tr:last-child td { border-bottom: none; }
.emails-action-table tr:hover td     { background: var(--surface2); }
.emails-action-table tr.row-pending  { opacity: .5; pointer-events: none; }

/* Status badge */
.em-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.em-status.s-delivered { background: var(--accent-dim);  color: var(--accent); }
.em-status.s-bounce    { background: var(--red-dim);     color: var(--red); }
.em-status.s-open      { background: var(--yellow-dim);  color: var(--yellow); }
.em-status.s-complaint { background: var(--orange-dim);  color: var(--orange); }
.em-status.s-send      { background: var(--blue-dim);    color: var(--blue); }
.em-status.s-other     { background: var(--surface2);    color: var(--text3); }
.em-status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Email / subject cells */
.em-to      { font-family: var(--font-mono); font-size: 11px; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-subject { font-size: 12px; color: var(--text2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-date    { font-family: var(--font-mono); font-size: 10px; color: var(--text3); white-space: nowrap; }

/* Action buttons cell */
.em-actions {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* Individual action button */
.em-btn {
  width: 26px; height: 26px; border-radius: 5px; flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text3); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t);
  position: relative;
}
.em-btn:hover { transform: translateY(-1px); }
.em-btn:active { transform: translateY(0); }

/* Variants */
.em-btn.btn-resend:hover    { border-color: var(--blue);   color: var(--blue);   background: var(--blue-dim); }
.em-btn.btn-delete:hover    { border-color: var(--red);    color: var(--red);    background: var(--red-dim); }
.em-btn.btn-block:hover     { border-color: var(--orange); color: var(--orange); background: var(--orange-dim); }

/* Disabled state (after action) */
.em-btn:disabled {
  opacity: .35; cursor: not-allowed; pointer-events: none; transform: none;
}

/* Spinner inside button */
.em-btn.spinning::after {
  content: '';
  position: absolute; inset: 4px;
  border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
.em-btn.spinning > span { opacity: 0; }

/* Tooltip on hover */
.em-btn[title]:hover::before {
  content: attr(title);
  position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text); font-size: 9px; font-family: var(--font-mono);
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
  pointer-events: none; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* Pagination */
.emails-pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.pg-btn {
  height: 26px; min-width: 26px; padding: 0 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface2); color: var(--text2); font-size: 11px;
  font-family: var(--font-mono); cursor: pointer; transition: all var(--t);
}
.pg-btn:hover         { border-color: var(--accent); color: var(--accent); }
.pg-btn.active        { background: var(--accent-dim); border-color: rgba(94,234,212,.4); color: var(--accent); }
.pg-btn:disabled      { opacity: .35; cursor: not-allowed; }
.pg-info              { font-size: 10px; color: var(--text3); font-family: var(--font-mono); }

/* Confirmation modal overlay (acciones destructivas) */
.action-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 450;
  background: rgba(0,0,0,.65); backdrop-filter: blur(5px);
  align-items: center; justify-content: center;
}
.action-confirm-overlay.open { display: flex; }
.action-confirm-box {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--r-lg); width: 360px; max-width: calc(100vw - 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
.action-confirm-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.action-confirm-icon  { font-size: 18px; }
.action-confirm-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; flex: 1; }
.action-confirm-body  { padding: 14px 16px; font-size: 12px; color: var(--text2); line-height: 1.6; }
.action-confirm-email { font-family: var(--font-mono); font-size: 11px; color: var(--text); margin-top: 6px; padding: 6px 10px; background: var(--surface2); border-radius: 5px; }
.action-confirm-footer{ padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.btn-confirm-action {
  height: 32px; padding: 0 14px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; cursor: pointer; border: none; transition: opacity var(--t);
}
.btn-confirm-action.danger  { background: var(--red);    color: var(--text-on-accent); }
.btn-confirm-action.warning { background: var(--orange); color: var(--text-on-accent); }
.btn-confirm-action.info    { background: var(--blue);   color: var(--text-on-accent); }
.btn-confirm-action:hover   { opacity: .85; }
.btn-confirm-cancel {
  height: 32px; padding: 0 13px; border-radius: var(--r-sm);
  background: none; border: 1px solid var(--border2); color: var(--text2);
  font-size: 12px; cursor: pointer; transition: all var(--t);
}
.btn-confirm-cancel:hover   { border-color: var(--border); color: var(--text); }

/* Row flash animation after action */
@keyframes row-success {
  0%   { background: rgba(94,234,212,.15); }
  100% { background: transparent; }
}
@keyframes row-error {
  0%,50% { background: rgba(248,113,113,.15); }
  100%   { background: transparent; }
}
.row-flash-success td { animation: row-success .8s ease forwards; }
.row-flash-error   td { animation: row-error   .8s ease forwards; }

/* Responsive */
@media (max-width: 768px) {
  .em-subject         { display: none; }
  .emails-action-table th:nth-child(3) { display: none; }
  .em-to              { max-width: 120px; }
  .em-subject         { max-width: 150px; }
}
@media (max-width: 540px) {
  .em-date            { display: none; }
  .emails-action-table th:nth-child(4) { display: none; }
  .em-to              { max-width: 100px; }
}

/* ═══════════════════════════════════════════════════
   §19  INDEX.HTML RESPONSIVE (Inbox Page)
   ═══════════════════════════════════════════════════ */

/* 768px: Sidebar drawer, split-view adjustments */
@media (max-width: 768px) {
  /* Sidebar as drawer */
  .an-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    width: 240px !important;
    box-shadow: none;
  }
  .an-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, .55);
  }
  .an-sidebar.collapsed {
    width: 54px !important;
  }

  /* Show all text when sidebar is open */
  .an-sidebar.open .asb-name,
  .an-sidebar.open .asb-section-label,
  .an-sidebar.open .asb-item-label,
  .an-sidebar.open .asb-item-count,
  .an-sidebar.open .asb-footer-info {
    display: flex !important;
  }
  .an-sidebar.open .asb-brand {
    justify-content: flex-start;
    padding: 0 14px;
  }
  .an-sidebar.open .asb-logo {
    margin: 0;
  }
  .an-sidebar.open .asb-item {
    justify-content: flex-start;
    padding: 8px 10px;
  }

  /* Show hamburger button */
  .btn-menu {
    display: flex !important;
  }

  /* Main panel full width */
  .main-panel {
    width: 100%;
  }

  /* Split-view: stack vertically on mobile */
  .split-view {
    flex-direction: column;
  }
  .split-list {
    width: 100%;
    min-width: 0;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .split-detail {
    min-height: 60vh;
  }

  /* Topbar: allow wrapping */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
  }
  .topbar-title {
    display: none;
  }
  .topbar-filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  /* Search expand */
  .search-wrap {
    max-width: 100%;
    flex: 1;
  }

  /* Detail panel padding */
  .detail-panel {
    padding: 12px 16px;
  }

  /* Blocked table scroll */
  .blocked-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* PDF modal */
  .pdf-modal {
    width: 95vw;
    height: 80vh;
  }

  /* Date inputs */
  .fsel[type="date"] {
    width: 100px;
  }
}

/* 600px: KPIs single column, hide secondary elements */
@media (max-width: 600px) {
  /* Email row: hide date and status on small screens */
  .email-row {
    grid-template-columns: 16px 1fr 58px;
  }
  .er-date,
  .er-status {
    display: none;
  }

  /* Pagination compact */
  .pagination {
    padding: 6px 8px;
  }
  .pag-info {
    font-size: 9px;
  }

  /* View content padding */
  .view-content {
    padding: 12px;
  }

  /* Login responsive */
  .login-wrap {
    width: 100%;
    max-width: 340px;
    padding: 0 16px;
  }

  /* Flag dots slightly larger */
  .flag {
    width: 6px;
    height: 6px;
  }

  /* Message ID responsive */
  .msg-id {
    max-width: 150px;
  }
}

/* 480px: Very small phones */
@media (max-width: 480px) {
  /* Email row: single column */
  .email-row {
    grid-template-columns: 16px 1fr;
    padding: 0 8px;
    min-height: 48px;
  }
  .er-flags {
    display: none;
  }

  /* Modal padding */
  .modal-body {
    padding: 12px;
  }
  .modal-header {
    padding: 12px 14px;
  }
  .modal-footer {
    padding: 10px 14px;
  }

  /* Message ID */
  .msg-id {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════
   §20  FOCUS-VISIBLE STATES (Accessibility)
   ═══════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.asb-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════
   §21  PREFERS-REDUCED-MOTION (Accessibility)
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sh-live::before {
    animation: none;
  }
  .hbar-fill {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════
   §22  CONSISTENT BORDER-RADIUS
   ═══════════════════════════════════════════════════ */
/* Override hardcoded border-radius values with CSS variables */
.asb-collapse,
.asb-theme-btn,
.modal-close,
.btn-logout,
.btn-theme,
.pag-btn,
.em-btn {
  border-radius: var(--r-sm) !important;
}
.kc-delta,
.em-status,
.an-alert-badge {
  border-radius: var(--r) !important;
}

/* ═══════════════════════════════════════════════════
   §23  SCROLLBAR FOR FIREFOX
   ═══════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

/* ═══════════════════════════════════════════════════
   §24  LIGHT THEME FIXES
   ═══════════════════════════════════════════════════ */
[data-theme="light"] input[type="date"].fsel {
  color-scheme: light;
}
[data-theme="light"] .btn-modal-save {
  color: #fff;
}
[data-theme="light"] .pdf-modal-body {
  background: var(--surface2);
}

/* ═══════════════════════════════════════════════════
   §26  VIEW LAYOUTS & CHART HEIGHTS
   ═══════════════════════════════════════════════════ */
.view-inbox,
.view-blocked,
.view-alerts {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   §27  MOBILE SCROLL FIXES
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Allow body to scroll on mobile */
  body {
    overflow: auto;
  }
  
  /* App container - allow growth beyond viewport */
  #app {
    height: auto;
    min-height: 100vh;
  }
  
  /* Main panel - allow overflow */
  .main-panel {
    overflow: visible;
    height: auto;
  }
  
  /* Views - allow overflow */
  .view-inbox,
  .view-blocked {
    height: auto;
    overflow: visible;
  }
  
  /* Split view - full width, no overflow hidden */
  .split-view {
    flex-direction: column;
    overflow: visible;
    flex: none;
  }
  
  /* Split list - full width, no height cap */
  .split-list {
    width: 100%;
    min-width: 0;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  
  /* Split detail - no min-height, allow overflow */
  .split-detail {
    min-height: auto;
    overflow: visible;
    flex: 1;
  }
  
  /* Email list - allow scrolling */
  .email-list {
    max-height: 50vh;
    overflow-y: auto;
  }
  
  /* Detail panel - allow scrolling */
  .detail-panel {
    overflow-y: auto;
  }
}

/* Table scroll wrapper */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Chart heights - responsive with clamp() */
.chart-canvas-wrap,
.donut-container {
  height: clamp(140px, 20vw, 200px);
}
.chart-canvas-wrap.chart-sm,
.donut-container.donut-sm {
  height: clamp(120px, 18vw, 150px);
}
.u-skeleton {
  height: 80px;
  position: relative;
  overflow: hidden;
}
.u-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  animation: shimmer 1.5s infinite;
}

/* Hamburger menu button */
.btn-menu {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 16px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--t);
}
.btn-menu:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════
   §25  PRINT STYLES
   ═══════════════════════════════════════════════════ */
@media print {
  .an-sidebar,
  .topbar,
  .an-topbar,
  .pagination,
  .btn-export,
  .btn-pdf,
  .refresh-btn {
    display: none !important;
  }
  .main-panel,
  .an-content-area {
    width: 100% !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}