/* =========================================================
   منصة الاستطلاعات الرقمية — Government Design System
   معايير: كود المنصات الموحد (DGA)
   الخط: IBM Plex Sans Arabic
   لوحة الألوان الافتراضية: أخضر حكومي #007456 (لون إمارة الحدود الشمالية)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');

/* ══════════════════════════════════════
   TOKENS — متغيرات التصميم
   (الإفتراضي: الأخضر الحكومي — إمارة الحدود الشمالية)
══════════════════════════════════════ */
:root {
    /* ── Sidebar palette (light) ─────────── */
    --sb-bg-top:        #ffffff;
    --sb-bg-bot:        #f0fdf6;
    --sb-border:        rgba(15,23,42,.09);
    --sb-link:          #344156;
    --sb-label:         #94a3b8;
    --sb-active-bg:     rgba(0,116,86,.09);
    --sb-active-txt:    #007456;
    --sb-active-bar:    #007456;

    /* ── Sidebar extras (light) ──────────── */
    --sb-shadow:        -2px 0 20px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06);
    --sb-brand-border:  rgba(15,23,42,.07);
    --sb-hover-bg:      rgba(15,23,42,.04);
    --sb-hover-txt:     #0f172a;
    --sb-sep:           rgba(15,23,42,.07);
    --sb-foot-bg:       rgba(15,23,42,.025);
    --sb-foot-border:   rgba(15,23,42,.07);
    --sb-username:      #0f172a;
    --sb-logout-bg:     rgba(15,23,42,.04);
    --sb-logout-border: rgba(15,23,42,.12);
    --sb-logout-txt:    #64748b;

    /* ── Accent gradient (أخضر → فاتح) ──── */
    --accentGrad:    linear-gradient(135deg, #007456 0%, #00c47a 100%);
    --accent1:       #007456;
    --accent2:       #00b374;
    --accentSoft:    rgba(0,116,86,.10);
    --accentGlow:    0 8px 24px rgba(0,116,86,.22);

    /* ── Tint palette (للمكونات الداخلية) ── */
    --t04:  rgba(0,116,86,.04);
    --t05:  rgba(0,116,86,.05);
    --t07:  rgba(0,116,86,.07);
    --t08:  rgba(0,116,86,.08);
    --t10:  rgba(0,116,86,.10);
    --t12:  rgba(0,116,86,.12);
    --t14:  rgba(0,116,86,.14);
    --t15:  rgba(0,116,86,.15);
    --t18:  rgba(0,116,86,.18);
    --t28:  rgba(0,116,86,.28);
    --t30:  rgba(0,116,86,.30);
    --t35:  rgba(0,116,86,.35);
    --t40:  rgba(0,116,86,.40);
    --tIcon:#007456;
    --sbDot:rgba(0,116,86,.04);
    --bannerOverlay: linear-gradient(135deg, rgba(0,30,16,.88) 0%, rgba(0,180,110,.45) 100%);

    /* ── Gold accent (prestige) ──────────── */
    --gold:          #c4920c;
    --goldSoft:      rgba(196,146,12,.10);
    --goldGrad:      linear-gradient(135deg, #d4a017, #c4920c);

    /* ── Page / card ─────────────────────── */
    --pageBg:        #eef2f7;
    --bgCard:        rgba(255,255,255,.98);
    --bgInner:       rgba(241,245,249,.75);

    /* ── Strokes ─────────────────────────── */
    --stroke:        rgba(15,23,42,.08);
    --stroke2:       rgba(15,23,42,.13);

    /* ── Text ────────────────────────────── */
    --text:          #0f172a;
    --muted:         #4a5568;

    /* ── Shadows ─────────────────────────── */
    --shadow:        0 4px 24px rgba(15,23,42,.09);
    --shadowSm:      0 2px 8px rgba(15,23,42,.06);
    --shadowCard:    0 1px 3px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.07);
    --inner:         inset 0 1px 0 rgba(255,255,255,.60);

    /* ── Layout ──────────────────────────── */
    --radius:        12px;
    --radiusLg:      16px;
    --radiusXl:      20px;
    --sidebar-w:     272px;
    --topbar-h:      62px;
    --trans:         .14s ease;
}

/* ══════════════════════════════════════
   THEMES — السمات المتاحة
══════════════════════════════════════ */

/* ── Dark sidebar shared vars ───────── */
/* (يُستخدم في السمات ذات الشريط الداكن) */
:root {
    --_sb-dark-shadow:  -2px 0 40px rgba(0,0,0,.25);
    --_sb-dark-bborder: rgba(255,255,255,.06);
    --_sb-dark-hover:   rgba(255,255,255,.06);
    --_sb-dark-htxt:    #ffffff;
    --_sb-dark-sep:     rgba(255,255,255,.06);
    --_sb-dark-foot:    rgba(0,0,0,.18);
    --_sb-dark-fborder: rgba(255,255,255,.07);
    --_sb-dark-uname:   rgba(255,255,255,.90);
    --_sb-dark-lbg:     rgba(255,255,255,.05);
    --_sb-dark-lborder: rgba(255,255,255,.10);
    --_sb-dark-ltxt:    rgba(186,230,253,.75);
}

/* الزمردي السماوي */
[data-theme="teal"] {
    --sb-bg-top:        #071e29;
    --sb-bg-bot:        #092d3e;
    --sb-border:        rgba(13,148,136,.18);
    --sb-link:          rgba(186,230,253,.78);
    --sb-label:         rgba(103,185,182,.65);
    --sb-active-bg:     rgba(13,148,136,.18);
    --sb-active-txt:    #ffffff;
    --sb-active-bar:    #0d9488;
    --sb-shadow:        var(--_sb-dark-shadow);
    --sb-brand-border:  var(--_sb-dark-bborder);
    --sb-hover-bg:      var(--_sb-dark-hover);
    --sb-hover-txt:     var(--_sb-dark-htxt);
    --sb-sep:           var(--_sb-dark-sep);
    --sb-foot-bg:       var(--_sb-dark-foot);
    --sb-foot-border:   var(--_sb-dark-fborder);
    --sb-username:      var(--_sb-dark-uname);
    --sb-logout-bg:     var(--_sb-dark-lbg);
    --sb-logout-border: var(--_sb-dark-lborder);
    --sb-logout-txt:    var(--_sb-dark-ltxt);
    --accentGrad:    linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    --accent1:       #0d9488;
    --accent2:       #0891b2;
    --accentSoft:    rgba(13,148,136,.10);
    --accentGlow:    0 8px 24px rgba(13,148,136,.28);
    --t04: rgba(13,148,136,.04);  --t05: rgba(13,148,136,.05);
    --t07: rgba(13,148,136,.07);  --t08: rgba(13,148,136,.08);
    --t10: rgba(13,148,136,.10);  --t12: rgba(13,148,136,.12);
    --t14: rgba(13,148,136,.14);  --t15: rgba(13,148,136,.15);
    --t18: rgba(13,148,136,.18);  --t28: rgba(13,148,136,.28);
    --t30: rgba(13,148,136,.30);  --t35: rgba(13,148,136,.35);
    --t40: rgba(13,148,136,.40);
    --tIcon: #5eead4;
    --sbDot: rgba(13,148,136,.06);
    --bannerOverlay: linear-gradient(135deg, rgba(4,47,53,.85) 0%, rgba(8,145,178,.45) 100%);
}

/* الأزرق الملكي */
[data-theme="royal"] {
    --sb-bg-top:        #0d1b3e;
    --sb-bg-bot:        #162d5e;
    --sb-border:        rgba(30,64,175,.22);
    --sb-link:          rgba(191,219,254,.78);
    --sb-label:         rgba(100,149,220,.65);
    --sb-active-bg:     rgba(37,99,235,.20);
    --sb-active-txt:    #ffffff;
    --sb-active-bar:    #2563eb;
    --sb-shadow:        var(--_sb-dark-shadow);
    --sb-brand-border:  var(--_sb-dark-bborder);
    --sb-hover-bg:      var(--_sb-dark-hover);
    --sb-hover-txt:     var(--_sb-dark-htxt);
    --sb-sep:           var(--_sb-dark-sep);
    --sb-foot-bg:       var(--_sb-dark-foot);
    --sb-foot-border:   var(--_sb-dark-fborder);
    --sb-username:      var(--_sb-dark-uname);
    --sb-logout-bg:     var(--_sb-dark-lbg);
    --sb-logout-border: var(--_sb-dark-lborder);
    --sb-logout-txt:    var(--_sb-dark-ltxt);
    --accentGrad:    linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    --accent1:       #1e40af;
    --accent2:       #2563eb;
    --accentSoft:    rgba(37,99,235,.10);
    --accentGlow:    0 8px 24px rgba(37,99,235,.28);
    --t04: rgba(37,99,235,.04);   --t05: rgba(37,99,235,.05);
    --t07: rgba(37,99,235,.07);   --t08: rgba(37,99,235,.08);
    --t10: rgba(37,99,235,.10);   --t12: rgba(37,99,235,.12);
    --t14: rgba(37,99,235,.14);   --t15: rgba(37,99,235,.15);
    --t18: rgba(37,99,235,.18);   --t28: rgba(37,99,235,.28);
    --t30: rgba(37,99,235,.30);   --t35: rgba(37,99,235,.35);
    --t40: rgba(37,99,235,.40);
    --tIcon: #93c5fd;
    --sbDot: rgba(37,99,235,.06);
    --bannerOverlay: linear-gradient(135deg, rgba(10,20,55,.88) 0%, rgba(37,99,235,.48) 100%);
}

/* البنفسجي الفخم */
[data-theme="violet"] {
    --sb-bg-top:        #160a2e;
    --sb-bg-bot:        #281050;
    --sb-border:        rgba(124,58,237,.22);
    --sb-link:          rgba(221,214,254,.78);
    --sb-label:         rgba(160,130,230,.65);
    --sb-active-bg:     rgba(124,58,237,.20);
    --sb-active-txt:    #ffffff;
    --sb-active-bar:    #7c3aed;
    --sb-shadow:        var(--_sb-dark-shadow);
    --sb-brand-border:  var(--_sb-dark-bborder);
    --sb-hover-bg:      var(--_sb-dark-hover);
    --sb-hover-txt:     var(--_sb-dark-htxt);
    --sb-sep:           var(--_sb-dark-sep);
    --sb-foot-bg:       var(--_sb-dark-foot);
    --sb-foot-border:   var(--_sb-dark-fborder);
    --sb-username:      var(--_sb-dark-uname);
    --sb-logout-bg:     var(--_sb-dark-lbg);
    --sb-logout-border: var(--_sb-dark-lborder);
    --sb-logout-txt:    var(--_sb-dark-ltxt);
    --accentGrad:    linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    --accent1:       #7c3aed;
    --accent2:       #6d28d9;
    --accentSoft:    rgba(124,58,237,.10);
    --accentGlow:    0 8px 24px rgba(124,58,237,.28);
    --t04: rgba(124,58,237,.04);  --t05: rgba(124,58,237,.05);
    --t07: rgba(124,58,237,.07);  --t08: rgba(124,58,237,.08);
    --t10: rgba(124,58,237,.10);  --t12: rgba(124,58,237,.12);
    --t14: rgba(124,58,237,.14);  --t15: rgba(124,58,237,.15);
    --t18: rgba(124,58,237,.18);  --t28: rgba(124,58,237,.28);
    --t30: rgba(124,58,237,.30);  --t35: rgba(124,58,237,.35);
    --t40: rgba(124,58,237,.40);
    --tIcon: #c4b5fd;
    --sbDot: rgba(124,58,237,.06);
    --bannerOverlay: linear-gradient(135deg, rgba(20,5,45,.88) 0%, rgba(109,40,217,.48) 100%);
}

/* ══════════════════════════════════════
   GLOBAL
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
    direction: rtl;
    text-align: right;
    font-family: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
    background: var(--pageBg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main, .container, .container-fluid { background: transparent; }
a { color: inherit; }
a:hover { color: inherit; }

/* Scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(226,232,240,.30); }
::-webkit-scrollbar-thumb { background: var(--t30); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--t40); }

/* ══════════════════════════════════════
   SIDEBAR — الشريط الجانبي
══════════════════════════════════════ */
.vs-sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    position: fixed;
    right: 0; top: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);

    /* background with subtle dot pattern */
    background-image:
        radial-gradient(var(--sbDot) 1px, transparent 1px),
        linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-bot) 100%);
    background-size: 22px 22px, auto;
}

/* Brand area — default (no logo) */
.vs-brand {
    padding: 0 18px;
    height: 62px;
    border-bottom: 1px solid var(--sb-brand-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Brand area — with logo (taller, centered) */
.vs-brand.has-logo {
    height: auto;
    padding: 18px 16px 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.vs-brand.has-logo .vs-brand-name {
    font-size: 1rem;
    font-weight: 800;
}
.vs-brand.has-logo .vs-brand-sub {
    font-size: .70rem;
}

.vs-brand-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accentGrad);
    display: grid; place-items: center;
    font-size: 1rem; color: #fff;
    box-shadow: var(--accentGlow);
    flex: 0 0 auto;
}

.vs-brand-logo {
    width: 80px; height: 80px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(15,23,42,.13), 0 0 0 1px rgba(15,23,42,.07);
}

.vs-brand-name {
    font-weight: 700;
    font-size: .93rem;
    color: var(--sb-hover-txt);
    line-height: 1.2;
    letter-spacing: .2px;
}
.vs-brand-sub {
    font-size: .68rem;
    color: var(--sb-label);
    margin-top: 1px;
    letter-spacing: .3px;
}

/* Nav scroll area */
.vs-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: none;
}
.vs-nav::-webkit-scrollbar { display: none; }

/* Section labels */
.vs-nav-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sb-label);
    padding: 14px 12px 5px;
}

/* Nav links */
.vs-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--sb-link);
    font-size: .86rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
    border-right: 3px solid transparent;
    position: relative;
}

.vs-nav-link i {
    font-size: .95rem;
    width: 18px;
    text-align: center;
    opacity: .70;
    flex: 0 0 auto;
    transition: opacity var(--trans), color var(--trans);
}

.vs-nav-link:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-hover-txt);
    border-right-color: var(--t40);
}
.vs-nav-link:hover i { opacity: 1; color: var(--accent1); }

.vs-nav-link.active {
    background: var(--sb-active-bg);
    color: var(--sb-active-txt);
    font-weight: 700;
    border-right-color: var(--sb-active-bar);
    box-shadow: inset 0 0 0 1px var(--t15), 0 2px 8px var(--t10);
}
.vs-nav-link.active i {
    opacity: 1;
    color: var(--sb-active-bar);
}

/* Section divider in nav */
.vs-nav-sep {
    height: 1px;
    background: var(--sb-sep);
    margin: 8px 4px;
    border: 0;
}

/* User footer */
.vs-user {
    padding: 14px 16px;
    border-top: 1px solid var(--sb-foot-border);
    background: var(--sb-foot-bg);
    flex-shrink: 0;
}

.vs-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accentGrad);
    display: grid; place-items: center;
    font-weight: 700; font-size: .85rem; color: #fff;
    flex: 0 0 auto;
    box-shadow: var(--accentGlow);
}

.vs-username  { font-size: .84rem; font-weight: 600; color: var(--sb-username); }
.vs-useremail { font-size: .70rem; color: var(--sb-label); }

.vs-logout {
    width: 100%;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid var(--sb-logout-border);
    background: var(--sb-logout-bg);
    color: var(--sb-logout-txt);
    font-size: .81rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
    transition: background var(--trans), border-color var(--trans), color var(--trans);
    font-family: inherit;
}
.vs-logout:hover {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.22);
    color: #dc2626;
}

/* ══════════════════════════════════════
   MAIN WRAP
══════════════════════════════════════ */
.vs-main {
    margin-right: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ══════════════════════════════════════
   TOP BAR
══════════════════════════════════════ */
.vs-topbar {
    height: var(--topbar-h);
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--stroke2);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.04);
}

.vs-page-title {
    font-size: .93rem;
    font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; gap: 10px;
}

.vs-page-title::before {
    content: '';
    width: 3px; height: 16px;
    border-radius: 999px;
    background: var(--accentGrad);
    display: block; flex: 0 0 auto;
}

.vs-topbar-meta { display: flex; align-items: center; gap: 10px; }

.vs-topbar-date {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--bgCard);
    border: 1px solid var(--stroke2);
    border-radius: 9px;
    font-size: .77rem; color: var(--muted);
    box-shadow: var(--shadowSm);
}

/* ══════════════════════════════════════
   CONTENT
══════════════════════════════════════ */
.vs-content {
    padding: 24px;
    flex: 1;
    background: var(--pageBg);
    min-height: calc(100vh - var(--topbar-h));
}

/* ══════════════════════════════════════
   ALERTS
══════════════════════════════════════ */
.vs-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1.5px solid;
    font-size: .87rem; font-weight: 500;
    margin-bottom: 16px;
    animation: slideDown .22s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vs-alert-success {
    background: var(--t08);
    border-color: var(--t28);
    color: #064e3b;
}
.vs-alert-danger  {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.28);
    color: #991b1b;
}

/* ══════════════════════════════════════
   GLASS CARD
══════════════════════════════════════ */
.card.glass,
.smsx-glassCard {
    background: #fff;
    border: 1px solid var(--stroke2);
    border-radius: var(--radiusLg);
    box-shadow: var(--shadowCard);
    color: var(--text);
    overflow: hidden;
}

.card.glass .card-header,
.smsx-cardHeader {
    border-bottom: 1px solid var(--stroke);
    padding: 14px 18px;
    background: rgba(248,250,252,.80);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}

.card-title-white,
.smsx-titleWhite {
    color: var(--text);
    font-weight: 800;
    letter-spacing: .2px;
}

/* ══════════════════════════════════════
   KPI CARDS (legacy)
══════════════════════════════════════ */
.kpi {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--stroke2);
    box-shadow: var(--shadowCard);
    transition: transform var(--trans), box-shadow var(--trans);
    position: relative; overflow: hidden;
}

.kpi::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--accentGrad);
}

.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.kpi .icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--accentGrad);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--accentGlow);
    flex: 0 0 auto;
}

.kpi .label  { color: var(--muted); font-size: .84rem; }
.kpi .value  { color: var(--text); font-weight: 900; font-size: 1.35rem; line-height: 1; }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn-brand,
.apix-btnBrand,
.smsx-btnSend,
.apiDocs-btnPrimary {
    background: var(--accentGrad);
    border: 0;
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius);
    padding: .62rem .95rem;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: var(--accentGlow);
    transition: filter var(--trans), transform var(--trans), box-shadow var(--trans);
    cursor: pointer;
    font-family: inherit;
    font-size: .88rem;
}
.btn-brand:hover,
.apix-btnBrand:hover,
.smsx-btnSend:hover,
.apiDocs-btnPrimary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px var(--t35);
    color: #fff;
}
.btn-brand:active { transform: translateY(0); }

.btn-ghost,
.smsx-btnGhost,
.apix-btnGhost,
.apiDocs-btnGhost {
    background: #fff;
    border: 1.5px solid var(--stroke2);
    color: var(--muted);
    font-weight: 600;
    border-radius: var(--radius);
    padding: .55rem .9rem;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: var(--shadowSm);
    transition: background var(--trans), border-color var(--trans), transform var(--trans);
    cursor: pointer;
    font-family: inherit;
    font-size: .88rem;
}
.btn-ghost:hover,
.smsx-btnGhost:hover,
.apix-btnGhost:hover {
    background: rgba(248,250,252,.98);
    border-color: var(--t35);
    color: var(--accent1);
    transform: translateY(-1px);
}
.btn-ghost:active { transform: translateY(0); }

.btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: #fff;
    border: 1.5px solid var(--stroke2);
    color: var(--muted);
    cursor: pointer;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
    box-shadow: var(--shadowSm);
}
.btn-icon:hover {
    background: var(--accentSoft);
    border-color: var(--t30);
    color: var(--accent1);
}

/* Bootstrap btn overrides */
.btn-primary {
    background: var(--accentGrad) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: var(--accentGlow) !important;
}
.btn-primary:hover { filter: brightness(1.08) !important; }

.btn-outline-primary {
    border-color: var(--accent1) !important;
    color: var(--accent1) !important;
}
.btn-outline-primary:hover {
    background: var(--accent1) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════
   FORM CONTROLS
══════════════════════════════════════ */
.form-control,
.form-select {
    background: #fff !important;
    border: 1.5px solid rgba(15,23,42,.16) !important;
    color: var(--text) !important;
    border-radius: 10px !important;
    font-family: inherit;
    font-size: .88rem;
    padding: .58rem .85rem;
    box-shadow: inset 0 1px 3px rgba(15,23,42,.05) !important;
    transition: border-color var(--trans), box-shadow var(--trans);
}
.form-control::placeholder { color: rgba(71,85,105,.60); }
.form-control:focus,
.form-select:focus {
    background: #fff !important;
    color: var(--text) !important;
    border-color: var(--accent1) !important;
    box-shadow: 0 0 0 3px var(--t15), inset 0 1px 2px rgba(15,23,42,.04) !important;
    outline: none;
}
.form-label {
    font-size: .83rem;
    font-weight: 600;
    color: rgba(15,23,42,.85);
    margin-bottom: 6px;
}

/* ══════════════════════════════════════
   TABLE
══════════════════════════════════════ */
.table-darkmode {
    color: var(--text);
    margin: 0;
    background: transparent;
    width: 100%;
    font-size: .875rem;
}

.table-darkmode thead th {
    background: var(--t05) !important;
    color: var(--text);
    font-weight: 700;
    font-size: .77rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 11px 16px;
    border-bottom: 2px solid var(--t15) !important;
    white-space: nowrap;
}

.table-darkmode tbody tr {
    background: #fff !important;
    border-bottom: 1px solid var(--stroke);
    transition: background var(--trans);
}
.table-darkmode tbody tr:nth-child(even) {
    background: rgba(248,252,251,.70) !important;
}
.table-darkmode tbody tr:hover,
.table-darkmode tbody tr:hover td {
    background: var(--t04) !important;
}

.table-darkmode tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--stroke) !important;
    vertical-align: middle;
    color: var(--text);
    background: transparent !important;
}
.table-darkmode tbody tr:last-child td { border-bottom: 0 !important; }
.table-darkmode td, .table-darkmode th {
    border-color: var(--stroke) !important;
}

.table-link { color: var(--accent1); text-decoration: none; font-weight: 500; }
.table-link:hover { color: var(--accent2); text-decoration: underline; }

/* ══════════════════════════════════════
   BADGES
══════════════════════════════════════ */
.badge-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .73rem; font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-scheduled { background: rgba(8,145,178,.09);  border-color: rgba(8,145,178,.22);  color: #0c4a6e; }
.status-sending   { background: var(--t08);            border-color: var(--t18);            color: #134e4a; }
.status-sent      { background: rgba(5,150,105,.09);   border-color: rgba(5,150,105,.22);   color: #065f46; }
.status-cancelled { background: rgba(220,38,38,.09);   border-color: rgba(220,38,38,.22);   color: #7f1d1d; }

/* ══════════════════════════════════════
   STATUS DOT
══════════════════════════════════════ */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
}
.status-dot.is-online  { background: var(--accent1); animation: pulse-accent 2s infinite; }
.status-dot.is-offline { background: #dc2626; }

@keyframes pulse-accent {
    0%,100% { box-shadow: 0 0 0 3px var(--t18); }
    50%      { box-shadow: 0 0 0 5px var(--t08); }
}

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.modal-content {
    background: #fff !important;
    border: 1px solid var(--stroke2) !important;
    border-radius: var(--radiusLg) !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.14) !important;
    color: var(--text);
}
.modal-header {
    border-bottom: 1px solid var(--stroke) !important;
    padding: 16px 20px !important;
    background: rgba(248,252,251,.80) !important;
}
.modal-header::before {
    content: '';
    display: block;
    width: 3px; height: 16px;
    background: var(--accentGrad);
    border-radius: 999px;
    margin-left: 10px;
    order: -1;
    flex-shrink: 0;
}
.modal-header { display: flex !important; align-items: center !important; }
.modal-title { font-weight: 700 !important; font-size: .97rem !important; }
.modal-footer {
    border-top: 1px solid var(--stroke) !important;
    padding: 14px 20px !important;
    background: rgba(248,250,252,.55) !important;
}
.modal-body { padding: 20px !important; }
.modal-backdrop { background: rgba(7,30,41,.45) !important; }

/* ══════════════════════════════════════
   DROPDOWN
══════════════════════════════════════ */
.dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--stroke2) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 16px 44px rgba(15,23,42,.12) !important;
    padding: 6px !important;
}
.dropdown-item {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: .85rem !important;
    color: var(--muted) !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    transition: background var(--trans) !important;
}
.dropdown-item:hover { background: var(--accentSoft) !important; color: var(--accent1) !important; }
.dropdown-item.text-danger { color: #991b1b !important; }
.dropdown-item.text-danger:hover { background: rgba(239,68,68,.07) !important; }
.dropdown-divider { border-color: var(--stroke) !important; margin: 4px 8px !important; }

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.page-link {
    background: #fff;
    border: 1px solid var(--stroke2);
    color: var(--muted);
    border-radius: 9px !important;
    padding: 6px 12px;
    font-size: .85rem; font-weight: 500;
    box-shadow: var(--shadowSm);
    transition: all var(--trans);
}
.page-link:hover {
    background: var(--accentSoft);
    border-color: var(--t30);
    color: var(--accent1);
}
.page-item.active .page-link {
    background: var(--accentGrad) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: var(--accentGlow);
}
.page-item.disabled .page-link { opacity: .40; }

/* ══════════════════════════════════════
   SEARCH
══════════════════════════════════════ */
.search-wrap {
    position: relative;
    min-width: 260px;
    max-width: 360px;
}
.search-wrap .bi {
    position: absolute;
    right: 11px; left: auto;
    top: 50%; transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: .88rem;
}
.search-input {
    background: #fff;
    border: 1.5px solid rgba(15,23,42,.14);
    color: var(--text);
    border-radius: 10px;
    padding: .6rem 2.2rem .6rem .75rem;
    box-shadow: var(--shadowSm);
    width: 100%;
    font-family: inherit;
    font-size: .88rem;
    transition: border-color var(--trans), box-shadow var(--trans);
}
.search-input:focus {
    outline: none;
    border-color: var(--accent1);
    box-shadow: 0 0 0 3px var(--t14);
}

.filters-wrap { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: nowrap; }

/* ══════════════════════════════════════
   PICKER BOX
══════════════════════════════════════ */
.picker-box {
    max-height: 360px; overflow: auto;
    border: 1.5px solid var(--stroke2);
    border-radius: 10px;
    padding: .5rem .75rem;
    background: #fff;
    box-shadow: var(--shadowSm);
}
.picker-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .25rem;
    border-bottom: 1px dashed rgba(15,23,42,.10);
}
.picker-item:last-child { border-bottom: 0; }

/* ══════════════════════════════════════
   MINI LIST
══════════════════════════════════════ */
.mini-list { display: flex; flex-direction: column; gap: 10px; }
.mini-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-left { display: flex; align-items: center; gap: 10px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.count-pill {
    background: var(--bgCard);
    border: 1px solid var(--stroke2);
    color: var(--text);
    border-radius: 999px;
    padding: .2rem .55rem;
    font-weight: 700; font-size: .8rem;
}

/* ══════════════════════════════════════
   CHART BOX
══════════════════════════════════════ */
.chart-box { position: relative; height: 320px; }
@media (min-width:1400px) { .chart-box { height: 360px; } }

/* ══════════════════════════════════════
   CHECKBOXES / RADIOS / TOGGLES
══════════════════════════════════════ */
.form-check-input[type="checkbox"] {
    width: 1.1em !important;
    height: 1.1em !important;
    background-color: #fff !important;
    border: 2px solid rgba(15,23,42,.30) !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: all var(--trans) !important;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
}
.form-check-input[type="checkbox"]:checked {
    background-color: var(--accent1) !important;
    border-color: var(--accent1) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m6 10 3 3 5-5'/%3e%3c/svg%3e") !important;
    background-size: 80% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: 0 2px 8px var(--t30) !important;
}
.form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px var(--t14) !important;
    border-color: var(--accent1) !important;
}

.form-check-input[type="radio"] {
    width: 1.1em !important;
    height: 1.1em !important;
    background-color: #fff !important;
    border: 2px solid rgba(15,23,42,.28) !important;
    cursor: pointer;
    transition: all var(--trans) !important;
}
.form-check-input[type="radio"]:checked {
    background-color: var(--accent1) !important;
    border-color: var(--accent1) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
    box-shadow: 0 2px 8px var(--t28) !important;
}

.form-check-input[type="checkbox"][role="switch"] {
    width: 2.6em !important;
    height: 1.4em !important;
    border-radius: 999px !important;
    background-color: rgba(148,163,184,.40) !important;
    border: 1.5px solid rgba(15,23,42,.18) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.95)'/%3e%3c/svg%3e") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-size: calc(1.4em - 4px) !important;
    transition: all .18s ease !important;
    cursor: pointer;
}
.form-check-input[type="checkbox"][role="switch"]:checked {
    background-color: var(--accent1) !important;
    border-color: var(--accent1) !important;
    background-position: right center !important;
    box-shadow: 0 2px 8px var(--t30) !important;
}

/* ══════════════════════════════════════
   TABLE RESPONSIVE
══════════════════════════════════════ */
.table-responsive {
    border-radius: 0 0 var(--radiusLg) var(--radiusLg);
    border: 0;
}

/* ══════════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════════ */
.sec-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--stroke2) 20%, var(--stroke2) 80%, transparent);
    margin: 4px 0;
    border: 0;
}

/* ══════════════════════════════════════
   INPUT GROUP
══════════════════════════════════════ */
.input-group-text {
    background: rgba(248,252,251,.90) !important;
    border: 1.5px solid rgba(15,23,42,.16) !important;
    color: var(--muted) !important;
    font-family: inherit;
}

/* ══════════════════════════════════════
   APIX (compatibility)
══════════════════════════════════════ */
.apix-glassCard {
    background: #fff;
    border: 1px solid var(--stroke2);
    border-radius: var(--radiusLg);
    box-shadow: var(--shadowCard);
    overflow: hidden;
    color: var(--text);
}
.apix-glassCard .card-header {
    border-bottom: 1px solid var(--stroke);
    background: rgba(248,252,251,.85);
}
.apix-titleWhite,
.apix-labelWhite { color: var(--text); font-weight: 700; }
.apix-endpoint {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: var(--bgInner);
    border: 1px solid var(--stroke2);
    border-radius: 10px;
    padding: .62rem .75rem;
    font-size: .9rem; color: var(--text) !important;
    overflow: auto;
    direction: ltr; text-align: left;
}
pre.apix-code {
    background: var(--bgInner);
    border: 1px solid var(--stroke2);
    border-radius: 12px;
    padding: .85rem;
    max-height: 280px; overflow: auto;
    margin: 0;
    direction: ltr; text-align: left;
}
pre.apix-code code { color: var(--text) !important; }

/* ══════════════════════════════════════
   SMSX (compatibility)
══════════════════════════════════════ */
.smsx-pickItem {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px dashed rgba(15,23,42,.10);
    cursor: pointer;
    transition: background var(--trans);
}
.smsx-pickItem:hover { background: var(--accentSoft); }
.smsx-pickItem.active {
    background: var(--t10);
    border-right: 3px solid var(--accent1);
    border-left: 0;
}
.smsx-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid var(--stroke2);
    font-weight: 700; color: var(--accent1);
    flex: 0 0 auto;
    box-shadow: var(--shadowSm);
}
.smsx-itemTitle { font-weight: 700; color: var(--text); }
.smsx-itemSub   { font-size: .85rem; color: var(--muted); }
.smsx-muted     { color: var(--muted) !important; }

/* ══════════════════════════════════════
   UTILITY
══════════════════════════════════════ */
.hidden { display: none !important; }
.text-secondary { color: var(--muted) !important; }
.label-white { color: var(--text); font-weight: 700; }
.plan-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accentGrad);
    color: #fff; font-weight: 700;
    border-radius: 999px; padding: .35rem .8rem;
    box-shadow: var(--accentGlow);
}
.actions-col { width: 150px; }
.status-col  { width: 140px; }
.when-col    { width: 200px; }
.vs-empty    { color: rgba(71,85,105,.55) !important; }

/* ══════════════════════════════════════
   BOOTSTRAP OVERRIDES
══════════════════════════════════════ */
.card {
    border: 1px solid var(--stroke2) !important;
    box-shadow: var(--shadowCard) !important;
    border-radius: var(--radiusLg) !important;
}
.card-header {
    background: rgba(248,252,251,.80) !important;
    border-bottom: 1px solid var(--stroke) !important;
}

/* Table regular */
.table { color: var(--text); }
.table thead th {
    background: var(--t05) !important;
    color: var(--text);
    font-weight: 700;
    font-size: .80rem;
    border-bottom: 2px solid var(--t12) !important;
}
.table-hover tbody tr:hover { background: var(--t04) !important; }

/* ── Government Badges — readable contrast always ── */
.gov-badge-active {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: .72rem; font-weight: 700;
    background: var(--t10);
    color: #064e3b;
    border: 1px solid var(--t28);
}
.gov-badge-inactive {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: .72rem; font-weight: 700;
    background: rgba(71,85,105,.08);
    color: #475569;
    border: 1px solid rgba(71,85,105,.22);
}
.gov-badge-published {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 50px;
    font-size: .72rem; font-weight: 700;
    background: rgba(5,150,105,.10); color: #065f46;
    border: 1px solid rgba(5,150,105,.28);
}
.gov-badge-draft {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 50px;
    font-size: .72rem; font-weight: 700;
    background: rgba(71,85,105,.08); color: #64748b;
    border: 1px solid rgba(71,85,105,.18);
}

/* ── Page banner header ── */
.gov-page-banner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 24px;
    min-height: 160px;
}
.gov-page-banner-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.55) saturate(1.2);
}
.gov-page-banner-overlay {
    position: absolute; inset: 0;
    background: var(--bannerOverlay);
}
.gov-page-banner-content {
    position: relative; z-index: 2;
    padding: 28px 32px;
    color: #fff;
}
.gov-page-banner-title {
    font-size: 1.45rem; font-weight: 800;
    letter-spacing: .3px; margin: 0 0 6px;
}
.gov-page-banner-sub {
    font-size: .85rem; opacity: .80; margin: 0 0 20px;
}
.gov-page-banner-kpis {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.gov-page-banner-kpi {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 10px 18px;
    display: flex; flex-direction: column;
    align-items: center;
    backdrop-filter: blur(8px);
    min-width: 80px;
}
.gov-page-banner-kpi-num {
    font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.gov-page-banner-kpi-lbl {
    font-size: .70rem; opacity: .80; margin-top: 2px;
}

/* ── Premium stat boxes ── */
.gov-stat-box {
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
}
.gov-stat-box-teal   { background: var(--t07); border: 1px solid var(--t15); }
.gov-stat-box-cyan   { background: rgba(8,145,178,.07);  border: 1px solid rgba(8,145,178,.15); }
.gov-stat-box-green  { background: rgba(5,150,105,.07);  border: 1px solid rgba(5,150,105,.15); }
.gov-stat-box-num { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.gov-stat-box-lbl { font-size: .66rem; color: var(--muted); margin-top: 1px; }

/* ── Card accent bar ── */
.gov-card-bar-teal   { background: var(--accentGrad); }
.gov-card-bar-gray   { background: #cbd5e1; }

/* ── Assign button ── */
.gov-assign-btn {
    padding: 3px 9px; font-size: .72rem; border-radius: 8px;
    background: var(--accentGrad);
    color: #fff; border: 0; font-weight: 700; cursor: pointer;
    box-shadow: 0 3px 8px var(--t30);
    font-family: inherit;
}
.gov-assign-btn:hover { filter: brightness(1.07); }

/* ══════════════════════════════════════
   THEME SWITCHER — منتقي السمة
══════════════════════════════════════ */
.vs-theme-wrap {
    position: relative;
    margin-bottom: 8px;
}

.vs-theme-btn {
    width: 100%;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid var(--sb-logout-border);
    background: var(--sb-logout-bg);
    color: var(--sb-logout-txt);
    font-size: .80rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    transition: background var(--trans), border-color var(--trans), color var(--trans);
    font-family: inherit;
    text-align: center;
}
.vs-theme-btn:hover {
    background: var(--accentSoft);
    border-color: var(--t28);
    color: var(--accent1);
}

.vs-theme-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0; left: 0;
    background: #fff;
    border: 1px solid var(--stroke2);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15,23,42,.20);
    padding: 14px;
    z-index: 9999;
    display: none;
    animation: panelIn .15s ease;
}
.vs-theme-panel.show { display: block; }
@keyframes panelIn {
    from { opacity:0; transform: translateY(6px) scale(.98); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

.vs-theme-panel-title {
    font-size: .70rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .9px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--stroke);
}

.vs-theme-swatches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.vs-theme-swatch {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px;
    border-radius: 9px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--trans);
    background: rgba(15,23,42,.03);
}
.vs-theme-swatch:hover {
    background: rgba(15,23,42,.06);
    border-color: rgba(15,23,42,.10);
}
.vs-theme-swatch.vs-theme-active {
    border-color: var(--accent1);
    background: var(--accentSoft);
}
.vs-theme-swatch.vs-theme-active .vs-theme-swatch-name {
    color: var(--accent1);
    font-weight: 700;
}

.vs-theme-swatch-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 2px 5px rgba(0,0,0,.22);
    position: relative;
}
.vs-theme-swatch-dot::after {
    content: '';
    position: absolute; inset: 2px;
    border-radius: 50%;
    background: rgba(255,255,255,.30);
}

.vs-theme-swatch-name {
    font-size: .74rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.vs-theme-swatch-sub {
    font-size: .63rem;
    color: var(--muted);
    line-height: 1;
    margin-top: 1px;
}

/* ══════════════════════════════════════
   SIDEBAR SCROLL
══════════════════════════════════════ */
#sysScroll::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 992px) {
    .vs-sidebar { display: none; }
    .vs-main    { margin-right: 0; }
    .vs-content { padding: 16px; }
}
@media (max-width: 576px) {
    .vs-content { padding: 12px; }
}