/* ── Flux Notify Shared CSS ── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── Variables ── */
:root,[data-theme="dark"]{
  --bg-primary:#0a0a0f;
  --bg-secondary:#12121a;
  --bg-card:#161622;
  --bg-input:#1a1a2e;
  --border-color:#2a2a4a;
  --border-glow:#00f0ff;
  --text-primary:#eeeeff;
  --text-secondary:#b0b0cc;
  --text-muted:#7e7ea0;
  --text-table-head:#9999bb;
  --neon-cyan:#00f0ff;
  --neon-pink:#ff00aa;
  --neon-green:#00ff88;
  --neon-yellow:#ffee00;
  --neon-orange:#ff6600;
  --neon-red:#ff0044;
  --neon-purple:#aa00ff;
  --type-initial:#ff3366;
  --type-update:#ffee00;
  --type-resolved:#00ff88;
  --type-bridge:#cc55ff;
  --type-onetime:#00f0ff;
  --status-open:#ff3366;
  --status-closed:#00ff88;
  --status-sent:#00ff88;
  --status-failed:#ff3366;
  --status-pending:#ffee00;
  --status-draft:#9999bb;
  --status-queued:#00f0ff;
  --sev-p1:#ff0044;
  --sev-p2:#ff6600;
  --sev-p3:#ffee00;
  --sev-p4:#00f0ff;
  --glow-sm:0 0 5px;
  --glow-md:0 0 10px;
  --glow-lg:0 0 20px;
  --scanline-opacity:0.012;
  --shadow-card:0 2px 16px rgba(0,0,0,.55);
  --hover-row:rgba(0,240,255,.03);
}
[data-theme="light"]{
  --bg-primary:#f0f2f5;
  --bg-secondary:#ffffff;
  --bg-card:#ffffff;
  --bg-input:#f5f6fa;
  --border-color:#d0d4dd;
  --border-glow:#0077aa;
  --text-primary:#1a1a2e;
  --text-secondary:#4a4a6a;
  --text-muted:#6a6a8a;
  --text-table-head:#5a5a7a;
  --neon-cyan:#0088bb;
  --neon-pink:#cc0088;
  --neon-green:#00994d;
  --neon-yellow:#aa8800;
  --neon-orange:#cc5500;
  --neon-red:#cc0033;
  --neon-purple:#7700bb;
  --type-initial:#cc0033;
  --type-update:#aa8800;
  --type-resolved:#00884d;
  --type-bridge:#7700bb;
  --type-onetime:#0077aa;
  --status-open:#cc0033;
  --status-closed:#00884d;
  --status-sent:#00884d;
  --status-failed:#cc0033;
  --status-pending:#aa8800;
  --status-draft:#6a6a8a;
  --status-queued:#0077aa;
  --sev-p1:#cc0033;
  --sev-p2:#cc5500;
  --sev-p3:#aa8800;
  --sev-p4:#0088bb;
  --glow-sm:0 0 0px;
  --glow-md:0 0 0px;
  --glow-lg:0 0 0px;
  --scanline-opacity:0;
  --shadow-card:0 1px 6px rgba(0,0,0,.1);
  --hover-row:rgba(0,100,180,.04);
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg-primary);color:var(--text-primary);font-family:'Rajdhani',sans-serif;font-size:15px;line-height:1.55;min-height:100vh;}
a{color:var(--neon-cyan);text-decoration:none;}
a:hover{color:var(--neon-cyan);opacity:.85;}
button{cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* ── Scanlines ── */
body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,var(--scanline-opacity)) 2px,rgba(0,240,255,var(--scanline-opacity)) 4px);
  pointer-events:none;z-index:9999;
}

/* ── Layout ── */
.app-container{display:flex;min-height:100vh;}
.sidebar{
  width:230px;flex-shrink:0;background:var(--bg-secondary);
  border-right:1px solid var(--border-color);display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:200;overflow-y:auto;
}
.main-content{margin-left:230px;flex:1;display:flex;flex-direction:column;min-height:100vh;}

/* ── Sidebar ── */
.sidebar-brand{
  padding:20px 20px 16px;border-bottom:1px solid var(--border-color);
  display:flex;flex-direction:column;gap:4px;
}
.sidebar-brand h1{
  font-family:'Orbitron',monospace;font-size:16px;font-weight:900;
  color:var(--neon-cyan);text-shadow:var(--glow-sm) var(--neon-cyan);
  letter-spacing:.08em;
}
.sidebar-brand .subtitle{
  font-family:'Share Tech Mono',monospace;font-size:10px;
  color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase;
}
.nav-section{
  padding:14px 16px 5px;font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);
}
.nav-link{
  display:flex;align-items:center;gap:9px;padding:8px 18px;
  color:var(--text-secondary);font-size:14px;font-weight:500;
  border-left:3px solid transparent;transition:all .18s;
}
.nav-link:hover{
  background:rgba(0,240,255,.04);color:var(--text-primary);
  border-left-color:rgba(0,240,255,.3);
}
.nav-link.active{
  background:rgba(0,240,255,.08);color:var(--neon-cyan);
  border-left-color:var(--neon-cyan);
}
.nav-link .icon{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
.nav-badge{
  margin-left:auto;background:var(--neon-red);color:#fff;
  border-radius:10px;padding:1px 7px;font-size:11px;
  font-family:'Share Tech Mono',monospace;line-height:1.5;
}
.sidebar-footer{
  margin-top:auto;padding:16px;border-top:1px solid var(--border-color);
}
.user-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.user-avatar{
  width:34px;height:34px;border-radius:50%;background:rgba(0,240,255,.1);
  border:1px solid var(--neon-cyan);display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-size:12px;font-weight:700;color:var(--neon-cyan);
  flex-shrink:0;
}
.user-name{font-size:13px;font-weight:600;color:var(--text-primary);}
.sidebar-actions{display:flex;gap:8px;}
.btn-sidebar{
  flex:1;padding:6px 10px;border-radius:4px;font-family:'Orbitron',monospace;
  font-size:9px;font-weight:700;letter-spacing:.08em;border:1px solid var(--border-color);
  background:transparent;color:var(--text-secondary);transition:all .2s;text-align:center;
}
.btn-sidebar:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);}
.btn-sidebar.danger:hover{border-color:var(--neon-red);color:var(--neon-red);}

/* ── Topbar ── */
.topbar{
  background:var(--bg-secondary);border-bottom:1px solid var(--border-color);
  padding:0 24px;height:54px;display:flex;align-items:center;
  justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:100;
}
.topbar-left{display:flex;align-items:center;gap:16px;}
.page-title-bar{font-family:'Orbitron',monospace;font-size:15px;font-weight:700;color:var(--text-primary);}
.breadcrumb{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);letter-spacing:.15em;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.utc-clock{
  font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--neon-cyan);
  letter-spacing:.1em;padding:4px 10px;border:1px solid var(--border-color);border-radius:4px;
}
.theme-btn{
  background:none;border:1px solid var(--border-color);border-radius:4px;
  color:var(--text-muted);padding:5px 10px;font-size:14px;transition:all .2s;
}
.theme-btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);}

/* ── Page Content ── */
.page-body{padding:24px;flex:1;}
.page-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:24px;gap:16px;flex-wrap:wrap;
}
.page-header h2{
  font-family:'Orbitron',monospace;font-size:18px;font-weight:700;
  color:var(--text-primary);
}
.page-header .sub{
  font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);
  letter-spacing:.15em;margin-top:4px;
}

/* ── Stat Cards ── */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0;margin-bottom:24px;
  background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;overflow:hidden;
}
.stat-card{
  padding:16px 20px;border-right:1px solid var(--border-color);
}
.stat-card:last-child{border-right:none;}
.stat-label{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
}
.stat-value{
  font-family:'Orbitron',monospace;font-size:26px;font-weight:700;line-height:1;
}
.stat-value.cyan{color:var(--neon-cyan);text-shadow:var(--glow-sm) var(--neon-cyan);}
.stat-value.red{color:var(--neon-red);text-shadow:var(--glow-sm) var(--neon-red);}
.stat-value.green{color:var(--neon-green);text-shadow:var(--glow-sm) var(--neon-green);}
.stat-value.yellow{color:var(--neon-yellow);}
.stat-delta{font-size:11px;color:var(--text-muted);margin-top:4px;}

/* ── Cards ── */
.card{
  background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;
  margin-bottom:20px;box-shadow:var(--shadow-card);
}
.card-header{
  padding:14px 18px;border-bottom:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:space-between;
}
.card-header h3{
  font-family:'Orbitron',monospace;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
}
.card-body{padding:18px;}

/* ── Tables ── */
.data-table{width:100%;border-collapse:collapse;}
.data-table th{
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-table-head);
  padding:9px 14px;border-bottom:1px solid var(--border-color);
  text-align:left;font-weight:400;background:var(--bg-secondary);
}
.data-table td{
  padding:10px 14px;border-bottom:1px solid var(--border-color);
  font-size:14px;color:var(--text-secondary);vertical-align:middle;
}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--hover-row);}
.data-table tr.selected td{background:rgba(0,240,255,.06);}

/* ── Badges ── */
.badge{
  display:inline-block;padding:2px 8px;border-radius:3px;
  font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.06em;white-space:nowrap;
}
/* Type */
.badge-initial{background:rgba(255,51,102,.15);color:var(--type-initial);border:1px solid rgba(255,51,102,.35);}
.badge-update{background:rgba(255,238,0,.12);color:var(--type-update);border:1px solid rgba(255,238,0,.3);}
.badge-resolved{background:rgba(0,255,136,.1);color:var(--type-resolved);border:1px solid rgba(0,255,136,.3);}
.badge-bridge{background:rgba(204,85,255,.12);color:var(--type-bridge);border:1px solid rgba(204,85,255,.3);}
.badge-onetime,.badge-one-time{background:rgba(0,240,255,.1);color:var(--type-onetime);border:1px solid rgba(0,240,255,.3);}
/* Status */
.badge-open{background:rgba(255,51,102,.12);color:var(--status-open);border:1px solid rgba(255,51,102,.3);}
.badge-closed{background:rgba(0,255,136,.1);color:var(--status-closed);border:1px solid rgba(0,255,136,.3);}
.badge-sent{background:rgba(0,255,136,.1);color:var(--status-sent);border:1px solid rgba(0,255,136,.3);}
.badge-failed{background:rgba(255,0,68,.12);color:var(--status-failed);border:1px solid rgba(255,0,68,.3);}
.badge-pending{background:rgba(255,238,0,.1);color:var(--status-pending);border:1px solid rgba(255,238,0,.3);}
.badge-draft{background:rgba(153,153,187,.1);color:var(--status-draft);border:1px solid rgba(153,153,187,.3);}
.badge-queued{background:rgba(0,240,255,.1);color:var(--status-queued);border:1px solid rgba(0,240,255,.3);}
/* Severity */
.badge-p1{background:rgba(255,0,68,.15);color:var(--sev-p1);border:1px solid rgba(255,0,68,.35);}
.badge-p2{background:rgba(255,102,0,.12);color:var(--sev-p2);border:1px solid rgba(255,102,0,.3);}
.badge-p3{background:rgba(255,238,0,.1);color:var(--sev-p3);border:1px solid rgba(255,238,0,.25);}
.badge-p4{background:rgba(0,240,255,.08);color:var(--sev-p4);border:1px solid rgba(0,240,255,.25);}
/* Role */
.badge-superadmin,.badge-admin{background:rgba(255,0,68,.12);color:var(--neon-red);border:1px solid rgba(255,0,68,.3);}
.badge-operator{background:rgba(0,240,255,.1);color:var(--neon-cyan);border:1px solid rgba(0,240,255,.3);}
.badge-viewer{background:rgba(153,153,187,.1);color:var(--text-muted);border:1px solid rgba(153,153,187,.3);}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:4px;font-family:'Orbitron',monospace;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:none;transition:all .2s;white-space:nowrap;
}
.btn-primary{background:var(--neon-cyan);color:#000;box-shadow:var(--glow-sm) var(--neon-cyan);}
.btn-primary:hover{box-shadow:var(--glow-md) var(--neon-cyan);transform:translateY(-1px);}
.btn-success{background:var(--neon-green);color:#000;box-shadow:var(--glow-sm) var(--neon-green);}
.btn-success:hover{box-shadow:var(--glow-md) var(--neon-green);}
.btn-warning{background:var(--neon-yellow);color:#000;}
.btn-danger{background:var(--neon-red);color:#fff;}
.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);}
.btn-secondary:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);}
.btn-sm{padding:5px 12px;font-size:10px;}
.btn-xs{padding:3px 8px;font-size:9px;}

/* ── Forms ── */
.form-group{margin-bottom:16px;}
.form-group label{
  display:block;font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
}
.form-control{
  width:100%;background:var(--bg-input);border:1px solid var(--border-color);
  border-radius:4px;padding:9px 12px;color:var(--text-primary);font-size:14px;
  font-family:'Rajdhani',sans-serif;transition:border-color .2s;
}
.form-control:focus{outline:none;border-color:var(--neon-cyan);}
.form-control::placeholder{color:var(--text-muted);}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237e7ea0' fill='none' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
textarea.form-control{resize:vertical;min-height:100px;line-height:1.6;}

/* Channel toggles */
.channel-toggles{display:flex;gap:8px;flex-wrap:wrap;}
.ch-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:4px;font-family:'Share Tech Mono',monospace;
  font-size:12px;cursor:pointer;border:1px solid var(--border-color);
  color:var(--text-muted);transition:all .18s;user-select:none;
}
.ch-toggle.active-email{border-color:var(--neon-cyan);color:var(--neon-cyan);background:rgba(0,240,255,.08);}
.ch-toggle.active-sms{border-color:var(--neon-green);color:var(--neon-green);background:rgba(0,255,136,.08);}
.ch-toggle.active-slack{border-color:var(--neon-purple);color:var(--neon-purple);background:rgba(170,0,255,.08);}
.ch-toggle.active-teams{border-color:var(--neon-pink);color:var(--neon-pink);background:rgba(255,0,170,.08);}
.ch-toggle.active-voice{border-color:var(--neon-orange);color:var(--neon-orange);background:rgba(255,102,0,.08);}

/* Checkbox grid */
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;}
.checkbox-item{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border:1px solid var(--border-color);border-radius:4px;cursor:pointer;
  font-size:13px;color:var(--text-secondary);transition:all .18s;
}
.checkbox-item:hover{border-color:var(--neon-cyan);color:var(--text-primary);}
.checkbox-item input{accent-color:var(--neon-cyan);width:14px;height:14px;}
.checkbox-item.checked{border-color:var(--neon-cyan);background:rgba(0,240,255,.06);color:var(--text-primary);}

/* Preset cards */
.preset-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.preset-card{
  padding:10px 16px;background:var(--bg-input);border:1px solid var(--border-color);
  border-radius:6px;cursor:pointer;transition:all .2s;min-width:140px;
}
.preset-card:hover{border-color:var(--neon-cyan);}
.preset-card .preset-name{font-size:13px;font-weight:600;color:var(--text-primary);}
.preset-card .preset-meta{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);margin-top:3px;}

/* Thread timeline */
.thread-timeline{display:flex;flex-direction:column;gap:0;}
.thread-msg{
  display:flex;gap:16px;padding:18px;border-bottom:1px solid var(--border-color);
  transition:background .15s;
}
.thread-msg:last-child{border-bottom:none;}
.thread-msg:hover{background:var(--hover-row);}
.msg-icon{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  border:1px solid var(--border-color);background:var(--bg-input);
  margin-top:2px;
}
.msg-body{flex:1;min-width:0;}
.msg-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.msg-time{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-muted);}
.msg-user{font-size:13px;font-weight:600;color:var(--text-secondary);}
.msg-brief{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:6px;}
.msg-details{font-size:13px;color:var(--text-secondary);line-height:1.7;white-space:pre-wrap;}
.delivery-log{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-color);}
.delivery-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px;}
.delivery-row .channel{font-family:'Share Tech Mono',monospace;color:var(--text-muted);}
.delivery-row .recipient{color:var(--text-secondary);}

/* Audit entries */
.audit-row{
  display:grid;grid-template-columns:140px 120px 160px 1fr;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--border-color);
  font-size:13px;align-items:start;
}
.audit-row:hover{background:var(--hover-row);}
.audit-time{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-muted);}
.audit-user{color:var(--text-secondary);}
.audit-action{color:var(--neon-cyan);font-family:'Share Tech Mono',monospace;font-size:12px;}
.audit-detail{color:var(--text-muted);font-size:12px;}

/* Settings sections */
.settings-section{margin-bottom:28px;}
.settings-section .section-title{
  font-family:'Orbitron',monospace;font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-secondary);
  margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border-color);
}
.settings-row{
  display:grid;grid-template-columns:200px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--border-color);align-items:center;
}
.settings-row:last-child{border-bottom:none;}
.setting-label{font-size:14px;font-weight:600;color:var(--text-secondary);}
.setting-desc{font-size:12px;color:var(--text-muted);margin-top:2px;}

/* Misc */
.mono{font-family:'Share Tech Mono',monospace;}
.text-cyan{color:var(--neon-cyan);}
.text-green{color:var(--neon-green);}
.text-red{color:var(--neon-red);}
.text-yellow{color:var(--neon-yellow);}
.text-muted{color:var(--text-muted);}
.flex{display:flex;align-items:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-sm{gap:8px;}
.gap-md{gap:14px;}
.gap-lg{gap:20px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.mt-sm{margin-top:8px;}
.mt-md{margin-top:16px;}
.mb-sm{margin-bottom:8px;}
.mb-md{margin-bottom:16px;}
.demo-topbanner{
  background:rgba(255,102,0,.08);border-bottom:1px solid var(--neon-orange);
  padding:6px 24px;display:flex;align-items:center;justify-content:space-between;
  font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--neon-orange);letter-spacing:.1em;
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform .3s;}
  .sidebar.open{transform:translateX(0);}
  .main-content{margin-left:0;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-3{grid-template-columns:1fr;}
}