/* ══════════════════════════════════════════
   PandaServe Admin — Midnight Blue Theme
   ══════════════════════════════════════════ */

:root {
    /* Modals need a SOLID surface: --white here is a 6% overlay for panels sitting on the
       gradient body, which disappears when floated over the modal scrim. */
    --modal-bg: #16233b;
    --modal-fg: #e2e8f0;
    --modal-line: rgba(255,255,255,.14);
    --primary: #e2e8f0;
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --accent-light: rgba(167,139,250,.15);
    --accent-bg: rgba(124,58,237,.08);
    --white: rgba(255,255,255,.06);
    --gray-50: rgba(255,255,255,.03);
    --gray-100: rgba(255,255,255,.06);
    --gray-200: rgba(255,255,255,.1);
    --gray-300: rgba(255,255,255,.15);
    --gray-400: rgba(148,163,184,.8);
    --gray-500: rgba(148,163,184,.9);
    --gray-600: rgba(203,213,225,.85);
    --gray-700: #cbd5e1;
    --gray-800: rgba(255,255,255,.08);
    --blue: #60a5fa;
    --blue-light: rgba(59,130,246,.15);
    --success-light: rgba(22,163,74,.15);
    --success-bg: rgba(22,163,74,.08);
    --warning-light: rgba(217,119,6,.15);
    --danger-light: rgba(220,38,38,.15);
    --danger-bg: rgba(220,38,38,.08);
    --orange-light: rgba(234,88,12,.15);
    --sky-light: rgba(2,132,199,.15);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow: 0 2px 8px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.15);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.4);
}

/* ── PAGE BACKGROUND ─────────────────────── */
body {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 35%, #1a2e4a 65%, #0f172a 100%);
    background-attachment: fixed;
    color: #e2e8f0;
}
body::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 700px 500px at 15% 10%, rgba(124,58,237,.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 80% 20%, rgba(37,99,235,.06) 0%, transparent 70%),
        radial-gradient(ellipse 600px 400px at 60% 85%, rgba(2,132,199,.06) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.admin-layout { position: relative; z-index: 1; }

/* ── SIDEBAR (pinned to original dark) ───── */
.sidebar { background: #0f172a; color: #fff; border-right: none; }
.sidebar-header { border-bottom-color: #1e293b; }
.sidebar-header img { filter: none; }
.sidebar-nav .nav-section { color: #94a3b8; }
.sidebar-nav a { color: #cbd5e1; }
.sidebar-nav a:hover { background: #1e293b; color: #fff; }
.sidebar-nav a.active { background: #7c3aed; color: #fff; }
.sidebar-nav a svg { color: inherit; }
.nav-badge { background: #dc2626; color: #fff; }
.sidebar-footer { border-top-color: #1e293b; }
.sidebar-avatar { background: #7c3aed; color: #fff; }
.sidebar-user .name { color: #fff; }
.sidebar-user .email, .sidebar-user .role { color: #94a3b8; }
.sidebar-logout { color: #94a3b8; }
.sidebar-logout:hover { color: #fff; background: #1e293b; }

/* ── HEADER ──────────────────────────────── */
.admin-header {
    background: rgba(15,23,42,.7);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom-color: rgba(255,255,255,.06);
}
.admin-header h1 { color: #f1f5f9; }
.mobile-menu-btn { color: #e2e8f0; }

/* ── PANELS ──────────────────────────────── */
.panel {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,.08);
}
.panel-header { border-bottom-color: rgba(255,255,255,.06); }
.panel-header h2 { color: #f1f5f9; }

/* ── STAT CARDS ──────────────────────────── */
.stat-card {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,.08);
}
.stat-card .stat-value { color: #f1f5f9; }

/* ── TABLES ──────────────────────────────── */
.data-table th {
    background: rgba(255,255,255,.03);
    border-bottom-color: rgba(255,255,255,.08);
    color: rgba(148,163,184,.9);
}
.data-table td { border-bottom-color: rgba(255,255,255,.04); color: rgba(203,213,225,.9); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255,255,255,.03); }

/* ── BUTTONS ─────────────────────────────── */
.btn-outline {
    background: rgba(255,255,255,.05);
    color: rgba(203,213,225,.85);
    border-color: rgba(255,255,255,.12);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { color: rgba(148,163,184,.8); }
.btn-ghost:hover { color: var(--accent); background: rgba(124,58,237,.1); }

/* ── FORMS ────────────────────────────────── */
.form-group label { color: rgba(203,213,225,.85); }
.form-group input, .form-group select, .form-group textarea {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #f1f5f9;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
    background: rgba(255,255,255,.08);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(148,163,184,.5); }
.search-box {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #f1f5f9;
}
.search-box:focus { border-color: #a78bfa; }
.search-box::placeholder { color: rgba(148,163,184,.5); }

/* ── BADGES ──────────────────────────────── */
.badge-success { background: rgba(22,163,74,.15); }
.badge-warning { background: rgba(217,119,6,.15); }
.badge-danger { background: rgba(220,38,38,.15); }
.badge-info { background: rgba(59,130,246,.15); }
.badge-purple { background: rgba(124,58,237,.15); }
.badge-gray { background: rgba(255,255,255,.06); color: rgba(148,163,184,.8); }

/* ── MODALS ───────────────────────────────── */
.modal-overlay { background: rgba(0,0,0,.6); }
.modal {
    background: rgba(20,30,55,.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1);
}
.modal-header { border-bottom-color: rgba(255,255,255,.06); }
.modal-header h3 { color: #f1f5f9; }
.modal-close { color: rgba(148,163,184,.6); }
.modal-close:hover { color: #f1f5f9; background: rgba(255,255,255,.08); }
.modal-footer { border-top-color: rgba(255,255,255,.06); }

/* ── TICKET MESSAGES ─────────────────────── */
.ticket-msg { border-color: rgba(255,255,255,.08); }
.ticket-msg.staff { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.15); }
.ticket-msg-body { color: rgba(203,213,225,.9); }

/* ── CLIENT DETAIL ───────────────────────── */
[style*="linear-gradient(135deg,var(--primary),#1e3a5f)"] {
    background: linear-gradient(135deg, #0f172a, #1e3a5f) !important;
}
.cd-tabs { border-bottom-color: rgba(255,255,255,.08); }
.cd-tab { color: rgba(148,163,184,.7); border-bottom-color: transparent; }
.cd-tab.active { color: #a78bfa; border-bottom-color: #7c3aed; }
.cd-tab:hover { color: #c4b5fd; }
.cd-stat { border-right-color: rgba(255,255,255,.06); }
.cd-stat-lbl { color: rgba(148,163,184,.7); }

/* ── TOAST ────────────────────────────────── */
.toast { background: rgba(15,23,42,.95); border: 1px solid rgba(255,255,255,.1); }

/* ── LOGIN PAGE ──────────────────────────── */
.login-card {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1);
}
.login-card h2 { color: #f1f5f9; }
.login-card .login-sub { color: rgba(148,163,184,.8); }
.login-card .login-footer { color: rgba(148,163,184,.7); }
.login-card .login-footer a { color: #a78bfa; }
.login-card .form-group label { color: rgba(203,213,225,.85); }
.login-card .form-group input {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #f1f5f9;
}
.login-card .form-group input:focus { border-color: #a78bfa; background: rgba(255,255,255,.08); }
.login-card .form-group input::placeholder { color: rgba(148,163,184,.5); }
.login-card img { filter: none; }
.login-demo { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.2); color: rgba(203,213,225,.85); }
.login-demo strong { color: #a78bfa; }

/* ── BULK BAR ────────────────────────────── */
.bulk-bar { background: #7c3aed; }
.bulk-select { background: rgba(255,255,255,.2) !important; color: #fff !important; border-color: rgba(255,255,255,.3) !important; }
.bulk-select option { background: #fff !important; color: #0f172a !important; }
select option { background: #fff; color: #0f172a; }

/* ── ALL LOGOS WHITE ──────────────────────── */
img[src*="logo"] { filter: none; }

/* ── LINKS ───────────────────────────────── */
a { color: #a78bfa; }
a:hover { color: #c4b5fd; }

/* ── SETTINGS TABS ───────────────────────── */
.settings-tab { color: rgba(148,163,184,.7); }
.settings-tab.active { color: #a78bfa; border-bottom-color: #7c3aed; }
.settings-tab:hover { color: #c4b5fd; }
.settings-tabs { border-bottom-color: rgba(255,255,255,.08); }

/* ── GAUGE CARDS (settings) ──────────────── */
.gauge-card { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; }
.gauge-val { color: #f1f5f9 !important; }
.gauge-label { color: #e2e8f0 !important; }

/* ── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ══════════════════════════════════════════
   GLOBAL HARDCODED COLOR OVERRIDES
   Catches inline styles and page-specific CSS
   ══════════════════════════════════════════ */

/* ── Any element with hardcoded white bg ── */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background: white"] {
    background: rgba(255,255,255,.06) !important;
    color: #e2e8f0 !important;
}

/* ── Any element with hardcoded light gray bg ── */
[style*="background:#f1f5f9"],
[style*="background:#f9fafb"],
[style*="background:#f8fafc"],
[style*="background:var(--gray-50)"],
[style*="background:#e2e8f0"],
[style*="background:#eff6ff"] {
    background: rgba(255,255,255,.04) !important;
}

/* ── Any element with hardcoded dark text colors ── */
[style*="color:#0f172a"],
[style*="color: #0f172a"],
[style*="color:#1e293b"],
[style*="color: #1e293b"],
[style*="color:#334155"],
[style*="color: #334155"] {
    color: #f1f5f9 !important;
}
[style*="color:#475569"],
[style*="color: #475569"],
[style*="color:#64748b"],
[style*="color: #64748b"] {
    color: rgba(203,213,225,.85) !important;
}
[style*="color:#94a3b8"],
[style*="color: #94a3b8"] {
    color: rgba(148,163,184,.8) !important;
}

/* ── Contenteditable editors ── */
[contenteditable="true"] {
    background: rgba(255,255,255,.04) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,.1) !important;
}

/* ── Inline inputs/selects/textareas not in .form-group ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
select, textarea {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f1f5f9 !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"])::placeholder,
textarea::placeholder {
    color: rgba(148,163,184,.5) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus,
select:focus, textarea:focus {
    border-color: #a78bfa !important;
    background: rgba(255,255,255,.08) !important;
}
select option { background: #1e293b; color: #e2e8f0; }

/* ── Email template list items ── */
[style*="border:1px solid var(--gray-200)"][style*="border-radius:8px"][style*="background:#fff"],
[style*="border:1px solid #e2e8f0"][style*="background:#fff"] {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* ── Template editor panel ── */
#templateEditor, [id="templateEditor"] {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(167,139,250,.2) !important;
}

/* ── WYSIWYG toolbar (settings + KB + marketing) ── */
[style*="border-bottom:1px solid var(--gray-200)"][style*="background:var(--gray-50)"],
[style*="background:var(--gray-50)"][style*="flex-wrap:wrap"] {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
}
[style*="border:1px solid var(--gray-200)"][style*="border-radius:4px"][style*="background:none"] {
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(203,213,225,.85) !important;
}

/* ── Toggle switches (keep white knob) ── */
input[type="checkbox"] + span + span,
label[style*="position:relative"] span:last-child {
    background: #fff !important;
}

/* ── Client detail header gradient ── */
[style*="linear-gradient(135deg,var(--accent)"] {
    color: #fff !important;
}

/* ── Client detail active tab ── */
.cd-tab.active {
    background: rgba(255,255,255,.08) !important;
    color: #a78bfa !important;
}

/* ── Order tabs ── */
.order-tab { color: rgba(148,163,184,.7) !important; background: transparent !important; border-color: rgba(255,255,255,.08) !important; }
.order-tab.active { background: rgba(255,255,255,.08) !important; color: #f1f5f9 !important; border-color: rgba(255,255,255,.12) !important; }

/* ── Inline modals (JS-generated with background:#fff) ── */
div[style*="background:#fff"][style*="border-radius:14px"],
div[style*="background:#fff"][style*="border-radius:12px"] {
    background: rgba(20,30,55,.95) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #e2e8f0 !important;
}

/* ── Client search dropdown (invoices) ── */
#createInvClientResults, #createInvClientResults * {
    background: #fff !important;
    color: #0f172a !important;
}
#createInvClientResults div[style*="color:#64748b"], #createInvClientResults div[style*="font-size:.75rem"] {
    color: #64748b !important;
}

/* ── Announcement KB search dropdown ── */
#annKbResults, #annKbResults * { background: #fff !important; color: #0f172a !important; }
#annKbResults div[style*="border-bottom"] { border-bottom-color: #e2e8f0 !important; }
#annKbResults div[style*="opacity"] { color: #94a3b8 !important; }

/* ── KBSearch dropdown ── */
#kbSearchDropdown {
    background: rgba(20,30,55,.97) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* ── Marketing campaign editor ── */
.camp-editor, [class*="camp-editor"] {
    background: rgba(255,255,255,.04) !important;
    color: #e2e8f0 !important;
}

/* ── Reports/charts ── */
canvas { filter: none; }

/* ── Coupon/product rows ── */
[style*="border:1px solid var(--gray-100)"],
[style*="border:1.5px solid var(--gray-100)"] {
    border-color: rgba(255,255,255,.06) !important;
}

/* ── Warning/info banners with light bg ── */
[style*="background:#fef3c7"] {
    background: rgba(217,119,6,.12) !important;
}
[style*="background:#fee2e2"] {
    background: rgba(220,38,38,.12) !important;
}
[style*="background:#dcfce7"] {
    background: rgba(22,163,74,.12) !important;
}
[style*="background:#eff6ff"], [style*="background:#dbeafe"] {
    background: rgba(59,130,246,.1) !important;
}
[style*="background:#f3e8ff"] {
    background: rgba(124,58,237,.1) !important;
}

/* ── Reseller panel border ── */
[style*="border-color:var(--purple-light)"] {
    border-color: rgba(124,58,237,.2) !important;
}

/* ── hr and dividers ── */
hr { border-color: rgba(255,255,255,.06) !important; }

/* ── Announcement toggle ── */
.ann-toggle .slider { background: rgba(255,255,255,.15) !important; }
.ann-toggle input:checked + .slider { background: #16a34a !important; }

/* ── KNOWLEDGE BASE ──────────────────────── */
/* Action bar */
.kb-action-bar { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
.kb-search-wrap input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f5f9 !important; }
.kb-search-wrap input::placeholder { color: rgba(148,163,184,.5) !important; }
.kb-search-wrap input:focus { border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important; }
.kb-search-wrap svg { color: rgba(148,163,184,.5) !important; }
.kb-cat-select { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f5f9 !important; }
.kb-cat-select option { background: #1e293b !important; color: #e2e8f0 !important; }
button.kb-cat-mgr-btn, .btn.kb-cat-mgr-btn { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(203,213,225,.85) !important; }
button.kb-cat-mgr-btn:hover, .btn.kb-cat-mgr-btn:hover { background: rgba(124,58,237,.15) !important; color: #a78bfa !important; border-color: #a78bfa !important; }
/* Stats */
.kb-stat { background: rgba(255,255,255,.06) !important; }
.kb-stat:nth-child(1) { background: rgba(124,58,237,.12) !important; }
.kb-stat:nth-child(2) { background: rgba(37,99,235,.12) !important; }
.kb-stat:nth-child(3) { background: rgba(22,163,74,.12) !important; }
.kb-stat-val { color: #f1f5f9 !important; }
.kb-stat:nth-child(1) .kb-stat-val { color: #c4b5fd !important; }
.kb-stat:nth-child(2) .kb-stat-val { color: #93c5fd !important; }
.kb-stat:nth-child(3) .kb-stat-val { color: #86efac !important; }
.kb-stat-lbl { color: #e2e8f0 !important; }
/* Category panel */
.kb-cat-panel { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
.kb-cat-item { border-bottom-color: rgba(255,255,255,.04) !important; }
.kb-cat-item:hover { background: rgba(255,255,255,.04) !important; }
.kb-cat-item-name { color: #f1f5f9 !important; }
.kb-cat-panel-header { border-bottom-color: rgba(255,255,255,.06) !important; }
.kb-cat-panel-header h3 { color: #f1f5f9 !important; }
.kb-cat-add-row { background: rgba(255,255,255,.03) !important; border-top-color: rgba(255,255,255,.06) !important; }
.kb-cat-add-row input { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #f1f5f9 !important; }
/* Group cards */
.kb-group { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
.kb-group:hover { box-shadow: 0 6px 24px rgba(0,0,0,.3) !important; }
.kb-group-header { background: rgba(255,255,255,.04) !important; color: #f1f5f9 !important; }
.kb-group-name { color: #f1f5f9 !important; }
.kb-group-count { background: rgba(255,255,255,.08) !important; }
.kb-group-icon { opacity: .9; }
/* Article rows */
.kb-article-row { border-top-color: rgba(255,255,255,.04) !important; background: transparent !important; }
.kb-article-row:hover { background: rgba(255,255,255,.04) !important; }
.kb-article-row .kb-art-title { color: #e2e8f0 !important; }
.kb-article-row .kb-art-id { color: rgba(148,163,184,.5) !important; }
.kb-art-btn-edit { background: rgba(124,58,237,.15) !important; }
.kb-art-btn-del { color: rgba(148,163,184,.4) !important; }
/* Editor */
.kb-toolbar { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.1) !important; }
.kb-toolbar button { color: rgba(203,213,225,.85) !important; }
.kb-toolbar button:hover { background: rgba(255,255,255,.08) !important; }
.kb-editor { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; }
/* Edit form panels */
.kb-edit-form, [id*="kbEdit"] { color: #e2e8f0 !important; }
.kb-edit-form label, [id*="kbEdit"] label { color: rgba(203,213,225,.85) !important; }

/* ── PRINT: revert ───────────────────────── */
@media print {
    body { background: #fff !important; color: #0f172a !important; }
    .panel, .stat-card { background: #fff !important; border-color: #e2e8f0 !important; }
}


/* ==== SSH Protection panel buttons (midnight) ==== */
.f2b-btn-danger { color:#fca5a5; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.12); }
.f2b-btn-danger:hover { background:rgba(239,68,68,.22); border-color:rgba(239,68,68,.7); color:#fecaca; }
.f2b-btn-accent { color:#7dd3fc; border-color:rgba(56,189,248,.4); background:rgba(56,189,248,.12); }
.f2b-btn-accent:hover { background:rgba(56,189,248,.22); border-color:rgba(56,189,248,.7); color:#bae6fd; }
.f2b-btn-quiet { color:rgba(203,213,225,.8); border-color:rgba(255,255,255,.15); }
.f2b-btn-quiet:hover { color:#fca5a5; border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.12); }