/* =========================
   ADMIN DARK THEME — style.css
   ========================= */

/* Colors & tokens */
:root{
  --bg:#0f172a;         /* page background */
  --panel:#111827;      /* header/nav glass */
  --card:#1f2937;       /* cards and blocks */
  --text:#e5e7eb;       /* main text */
  --muted:#9ca3af;      /* secondary text */
  --primary:#3b82f6;    /* primary button */
  --primary-2:#1d4ed8;
  --success:#10b981;
  --danger:#ef4444;
  --warn:#f59e0b;
  --border:#334155;
  --chip:#0b1222;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background: radial-gradient(1200px 800px at 50% -200px, #0b1222 0%, #0f172a 40%, #0f172a 100%);
  color: var(--text);
}

/* Layout shell */
.container{max-width:1200px;margin:0 auto;padding:16px}
header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background: linear-gradient(89deg, rgba(32,42,74,0.7), rgba(24,32,59,0.7));
  border:1px solid var(--border);border-radius:14px;padding:10px 12px;backdrop-filter: blur(7px);
  margin:16px auto 8px auto;
}
.brand .title{font-weight:800;letter-spacing:.2px}

/* Navigation tabs */
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{
  appearance:none;border:0;background:#22304b;color:#cbd5e1;
  padding:8px 12px;border-radius:12px;cursor:pointer;text-decoration:none;
  transition:transform .08s ease, opacity .2s ease, box-shadow .2s ease;
}
.nav a:hover{opacity:.95;transform:translateY(-1px)}
.nav a.active{
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:white;
  box-shadow:0 8px 22px rgba(59,130,246,.25);
}

/* Header actions */
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions > a{
  appearance:none;border:0;background:linear-gradient(180deg,#2b3b64,#1c2742);color:#e5e7eb;
  padding:8px 12px;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;gap:8px
}
.actions > a.ghost{background:transparent;border:1px solid var(--border)}
.actions > a:hover{opacity:.95;transform:translateY(-1px)}

/* Flash messages */
.flash-wrap{margin:12px 0}
.alert{
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#1f2937;
}
.alert.success{border-color:#0e7a5f;background:#132d28}
.alert.danger{border-color:#7a0e18;background:#2b1215}

/* Footer */
footer{margin:16px auto;color:var(--muted);font-size:12px;text-align:center}

/* Typography helpers */
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.hidden{display:none !important}

/* Forms */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--muted)}

input,select,textarea{
  background:#0b1222;border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:10px 12px;outline:none;min-height:42px;
}
textarea{resize:vertical}

/* Placeholder color */
::placeholder{color:var(--muted);opacity:.8}

/* Buttons */
button{
  appearance:none;border:0;background:linear-gradient(180deg,var(--primary),var(--primary-2));
  color:white;border-radius:12px;padding:10px 14px;cursor:pointer;
  transition:transform .08s ease, opacity .2s ease, box-shadow .2s ease;
}
button:hover{opacity:.97;transform:translateY(-1px);box-shadow:0 10px 26px rgba(59,130,246,.25)}
button:disabled, .ghost.disabled{opacity:.5;pointer-events:none}
button.secondary{background:#22304b;color:#e5e7eb}
button.danger{background:linear-gradient(180deg,#ef4444,#b91c1c)}
a.ghost, button.ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
  border-radius:12px;padding:10px 14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px
}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.card .label{color:var(--muted);font-size:12px}
.card .value{font-size:24px;margin-top:6px}
.card .sub{font-size:12px;color:var(--muted)}

/* Tables (use <table class="table">) */
.card table{width:100%}
.table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--card);
}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left}
.table th{background:#0b1222;color:var(--muted);font-weight:700}
.table tr:last-child td{border-bottom:0}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.03)}
.table tbody tr:nth-child(even){background:rgba(255,255,255,.06)}
.table tbody tr:hover{background:rgba(255,255,255,.09)}

/* Badges/Chips */
.badge{
  display:inline-flex;align-items:center;gap:6px;background:#0b1222;border:1px solid var(--border);
  padding:4px 8px;border-radius:999px;font-size:12px;color:#cbd5e1
}
.badge.success{border-color:#0e7a5f;color:#86efac}
.badge.warn{border-color:#f59e0b;color:#fde68a}
.badge.danger{border-color:#ef4444;color:#fca5a5}

/* Toolbars (filters/actions rows) */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px 0;align-items:center}

/* Broadcast page */
.broadcast-wrap{max-width:760px}
.broadcast-preview{position:sticky;top:12px}
@media (min-width: 1040px){
  #page-broadcast{display:grid;grid-template-columns:1fr 360px;gap:16px}
}
.chat-preview{background:linear-gradient(180deg,#101828,#0b1222);border:1px solid var(--border);border-radius:14px;padding:10px}
.bubble{background:#0b1222;border:1px solid var(--border);border-radius:12px;padding:8px;margin-top:8px}
.bubble .name{color:#79b1ff;font-weight:600;font-size:12px}
.bubble .msg{white-space:pre-wrap;margin-top:6px}
.bubble .time{color:var(--muted);font-size:11px;margin-top:6px}
.progress{height:8px;background:#0b1222;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress>div{height:100%;width:0%}

/* SimpleMDE / CodeMirror dark */
.simplemde-wrapper{background:transparent !important}
.editor-toolbar{
  background:#0b1222 !important;border:1px solid var(--border) !important;
  border-radius:12px 12px 0 0 !important
}
.editor-toolbar a{color:#cbd5e1 !important}
.editor-toolbar a:hover, .editor-toolbar a.active{background:#22304b !important}
.CodeMirror, .editor-preview, .editor-preview-side{
  background:#0b1222 !important;color:var(--text) !important;
  border:1px solid var(--border) !important;border-top:0 !important;border-radius:0 0 12px 12px !important
}
.CodeMirror-gutters{background:#0b1222 !important;border-right:1px solid var(--border) !important}
.CodeMirror-linenumber{color:#9ca3af !important}
.editor-statusbar{background:transparent !important;color:#9ca3af !important}

/* System date/time inputs on dark */
input[type="date"], input[type="datetime-local"], input[type="time"]{
  color-scheme: dark;
  background:#0b1222;color:var(--text);border:1px solid var(--border);border-radius:12px
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(0.9);
  opacity:.9;
}

/* Login page */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{
  max-width:380px;width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:18px
}
.login-card h2{margin:0 0 10px 0}

/* Legacy light containers killer (in case any remain) */
main,.content,.panel,.box,.section,.card-white{
  background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important
}

/* Responsive */
@media (max-width: 1040px){
  .row{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  header{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width: 540px){
  .cards{grid-template-columns:1fr}
}

/* === Link buttons (for <a>) + sizes === */
a.btn, .btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  text-decoration:none; cursor:pointer; border:0;
  transition:transform .08s ease, opacity .2s ease, box-shadow .2s ease;
}
a.btn:hover, .btn:hover { opacity:.97; transform:translateY(-1px); box-shadow:0 10px 26px rgba(59,130,246,.2); }

.btn.primary { background:linear-gradient(180deg,var(--primary),var(--primary-2)); color:#fff; }
.btn.secondary { background:#22304b; color:#e5e7eb; }
.btn.ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn.danger { background:linear-gradient(180deg,#ef4444,#b91c1c); color:#fff; }
.btn.sm { padding:7px 12px; border-radius:10px; font-size:13px; }

/* Utilities */
.inline { display:inline; }
.right { margin-left:auto; }
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}