/* =====================================================================
   منصة متابعة المستفيدين والشكاوى — هيئة الإذاعة والتلفزيون السعودية
   نظام التصميم · كحلي + ذهبي + زيتوني (ألوان الشعار)
   ===================================================================== */

/* ---------------------------------------------------------------
   1) الرموز التصميمية
   --------------------------------------------------------------- */
:root{
    /* الهوية */
    --navy-900:#0E1230;  --navy-800:#151A42;  --navy:#1B1F4B;
    --navy-700:#252B62;  --navy-600:#333A7A;  --navy-300:#7C86BD;
    --gold-700:#9C7B14;  --gold-600:#B8931F;  --gold:#C9A227;
    --gold-400:#E0BF55;  --gold-200:#F0DFA8;  --gold-50:#FCF8EC;
    --olive-700:#4E6A2C; --olive:#6E9142;     --olive-300:#A9C182;  --olive-50:#F1F6E9;

    /* دلالية */
    --danger:#C6383E;    --danger-50:#FCEEEE;
    --warn:#D98324;      --warn-50:#FDF3E9;
    --info:#2C6BD1;      --info-50:#EDF3FD;

    /* محايدة */
    --ink:#171A22;       --ink-2:#3D4351;     --muted:#6E7688;    --faint:#98A0B2;
    --line:#E6E9F2;      --line-2:#EFF1F7;
    --surface:#FFFFFF;   --surface-2:#FAFBFE;
    --bg:#F2F4F9;

    /* توافقية مع الأسماء السابقة */
    --navy-2:var(--navy-700); --navy-dark:var(--navy-900);
    --gold-light:var(--gold-400); --gold-soft:var(--gold-50);
    --olive-soft:var(--olive-50); --card:var(--surface);
    --text:var(--ink); --border:var(--line);

    /* الظلال — مائلة للكحلي بدل الرمادي */
    --sh-1:0 1px 2px rgba(21,26,66,.05), 0 1px 3px rgba(21,26,66,.04);
    --sh-2:0 2px 4px rgba(21,26,66,.05), 0 4px 14px rgba(21,26,66,.06);
    --sh-3:0 8px 18px rgba(21,26,66,.09), 0 18px 42px rgba(21,26,66,.09);
    --sh-4:0 24px 64px rgba(14,18,48,.28);
    --shadow:var(--sh-1); --shadow-lg:var(--sh-3);

    /* الأبعاد */
    --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
    --radius:var(--r);
    --sidebar-w:270px;
    --topbar-h:64px;
    --ring:0 0 0 3px rgba(201,162,39,.22);
}

/* ---------------------------------------------------------------
   2) الأساس
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ min-height:100%; -webkit-text-size-adjust:100% }
body{
    margin:0; min-height:100vh;
    font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:15px; line-height:1.65; color:var(--ink);
    background:var(--bg);
    background-image:radial-gradient(1200px 620px at 100% -10%, #ECEFF9 0%, transparent 62%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:var(--navy) }
a:hover{ color:var(--navy-700) }
h1,h2,h3,h4,h5,h6{ font-weight:800; color:var(--navy); letter-spacing:-.01em }
hr{ border-color:var(--line); opacity:1 }
.text-muted{ color:var(--muted)!important }
.num,.kpi-value,.stat-mini .v,.table td,.table th{ font-variant-numeric:tabular-nums }

::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:#CDD3E4; border-radius:8px; border:3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:#B4BCD4 }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-sm) }

/* ---------------------------------------------------------------
   3) الشريط الجانبي
   --------------------------------------------------------------- */
.sidebar{
    position:fixed; top:0; bottom:0; right:0; width:var(--sidebar-w);
    z-index:1040; display:flex; flex-direction:column; color:#fff;
    background:
        radial-gradient(560px 300px at 100% 0%, rgba(201,162,39,.16), transparent 62%),
        radial-gradient(420px 320px at 0% 100%, rgba(110,145,66,.14), transparent 60%),
        linear-gradient(178deg, var(--navy-800) 0%, var(--navy-900) 100%);
    box-shadow:-1px 0 0 rgba(255,255,255,.06) inset, -18px 0 46px rgba(14,18,48,.10);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
}

/* الشعار على لوحة بيضاء لتظهر ألوان الهوية الحقيقية */
.sidebar-brand{ padding:20px 18px 18px; text-align:center }
.sidebar-brand .plate{
    display:block; background:#fff; border-radius:var(--r-lg); padding:14px 16px;
    box-shadow:0 6px 18px rgba(0,0,0,.20); transition:transform .18s;
}
.sidebar-brand .plate:hover{ transform:translateY(-1px) }
.sidebar-brand img{ height:58px; width:auto; display:block; margin:0 auto }
.sidebar-brand .app-name{
    font-size:12px; font-weight:600; line-height:1.6; margin-top:12px;
    color:rgba(255,255,255,.72); letter-spacing:.005em;
}
.sidebar-brand .app-name b{ color:var(--gold-400); font-weight:700; display:block }

.sidebar-nav{ flex:1; overflow-y:auto; padding:6px 12px 14px; scrollbar-width:thin }
.sidebar-nav::-webkit-scrollbar{ width:4px }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border:0; border-radius:4px }
.sidebar-nav .nav-section{
    font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    color:rgba(255,255,255,.36); padding:16px 12px 7px; display:flex; align-items:center; gap:9px;
}
.sidebar-nav .nav-section::after{
    content:''; flex:1; height:1px; background:linear-gradient(to left, rgba(255,255,255,.14), transparent);
}
.sidebar-nav a{
    position:relative; display:flex; align-items:center; gap:11px;
    padding:9px 12px; margin-bottom:2px; border-radius:10px;
    font-size:14px; font-weight:600; color:rgba(255,255,255,.76);
    transition:background .16s, color .16s, transform .16s;
}
.sidebar-nav a .ico{
    width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center;
    font-size:15px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.82);
    transition:background .16s, color .16s;
}
.sidebar-nav a:hover{ background:rgba(255,255,255,.07); color:#fff }
.sidebar-nav a:hover .ico{ background:rgba(255,255,255,.13); color:#fff }
.sidebar-nav a.active{
    background:linear-gradient(90deg, rgba(201,162,39,.26), rgba(201,162,39,.05) 78%);
    color:#fff;
}
.sidebar-nav a.active::before{
    content:''; position:absolute; top:7px; bottom:7px; right:-12px;
    width:3px; border-radius:3px 0 0 3px; background:var(--gold);
    box-shadow:0 0 12px rgba(201,162,39,.7);
}
.sidebar-nav a.active .ico{ background:var(--gold); color:var(--navy-900) }
.sidebar-foot{
    padding:12px 18px 14px; border-top:1px solid rgba(255,255,255,.08);
    font-size:11px; color:rgba(255,255,255,.42); text-align:center; line-height:1.9;
}
.sidebar-foot .ver{
    display:inline-block; background:rgba(255,255,255,.08); border-radius:20px;
    padding:1px 10px; font-size:10.5px; color:rgba(255,255,255,.6); margin-top:4px;
}

/* ---------------------------------------------------------------
   4) المحتوى والشريط العلوي
   --------------------------------------------------------------- */
.main{ margin-right:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column }
.topbar{
    position:sticky; top:0; z-index:1020; min-height:var(--topbar-h);
    display:flex; align-items:center; gap:14px; padding:11px 24px;
    background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
}
.topbar .tb-title{ min-width:0; flex:1 }
.topbar h1{
    margin:0; font-size:19px; font-weight:800; line-height:1.35; color:var(--navy);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .sub{
    font-size:12.5px; color:var(--muted); line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.btn-burger{
    display:none; width:40px; height:40px; border:1px solid var(--line); background:#fff;
    border-radius:11px; color:var(--navy); font-size:19px; place-items:center;
}

.user-chip{
    display:flex; align-items:center; gap:9px; cursor:pointer;
    background:var(--surface); border:1px solid var(--line);
    padding:5px 13px 5px 6px; border-radius:40px; transition:border-color .16s, box-shadow .16s;
}
.user-chip:hover{ border-color:var(--gold-200); box-shadow:var(--sh-1) }
.user-chip .avatar{
    width:33px; height:33px; border-radius:50%; display:grid; place-items:center;
    font-weight:800; font-size:13.5px; color:var(--gold-400);
    background:linear-gradient(145deg, var(--navy-700), var(--navy-900));
}
.user-chip .nm{ font-size:13.5px; font-weight:700; line-height:1.25; color:var(--ink) }
.user-chip .rl{ font-size:11px; color:var(--muted); line-height:1.25 }


.content{ flex:1; padding:22px 24px 28px; max-width:1720px; width:100% }

/* ---------------------------------------------------------------
   5) البطاقات
   --------------------------------------------------------------- */
.card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-1); overflow:hidden;
}
.card-header{
    display:flex; align-items:center; gap:9px; padding:13px 18px;
    background:var(--surface); border-bottom:1px solid var(--line-2);
    font-weight:800; font-size:14.5px; color:var(--navy);
    border-radius:0!important;
}
.card-header > i:first-child,
.card-header > span:first-child > i:first-child{
    color:var(--gold-600); font-size:16px;
}
.card-body{ padding:18px }

/* بطاقات المؤشرات */
.kpi{
    position:relative; height:100%; padding:16px 17px 15px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-1); overflow:hidden;
    transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, border-color .2s;
}
.kpi::before{
    content:''; position:absolute; inset-inline:0; bottom:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--gold-400));
    opacity:.9;
}
.kpi.navy::before{   background:linear-gradient(90deg, var(--navy), var(--navy-600)) }
.kpi.olive::before{  background:linear-gradient(90deg, var(--olive), var(--olive-300)) }
.kpi.danger::before{ background:linear-gradient(90deg, var(--danger), #E2757A) }
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#DCE1EF }
.kpi .kpi-label{
    display:flex; align-items:center; gap:8px; margin-bottom:9px;
    font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.4;
}
.kpi .kpi-label i{
    width:28px; height:28px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center;
    font-size:14px; background:var(--gold-50); color:var(--gold-600); border:1px solid var(--gold-200);
}
.kpi.navy .kpi-label i{   background:#EEF0F8; color:var(--navy); border-color:#DDE1F0 }
.kpi.olive .kpi-label i{  background:var(--olive-50); color:var(--olive-700); border-color:#D9E6C4 }
.kpi.danger .kpi-label i{ background:var(--danger-50); color:var(--danger); border-color:#F5D5D6 }
.kpi .kpi-value{
    font-size:30px; font-weight:800; line-height:1.08; color:var(--navy); letter-spacing:-.02em;
}
.kpi .kpi-value small{ font-size:14px; font-weight:700; color:var(--faint); letter-spacing:0 }
.kpi .kpi-foot{ margin-top:7px; font-size:11.5px; color:var(--muted); line-height:1.6 }
.kpi .kpi-foot .up{ color:var(--olive-700); font-weight:700 }
.kpi .kpi-foot .down{ color:var(--danger); font-weight:700 }
.kpi .progress{ margin-top:9px }

/* ---------------------------------------------------------------
   6) الجداول
   --------------------------------------------------------------- */
.table-wrap{ overflow:auto; max-height:none }
.table{ margin:0; font-size:13.8px; border-color:var(--line-2) }
.table > thead > tr > th{
    position:sticky; top:0; z-index:2;
    background:var(--surface-2); color:var(--navy); font-weight:800; font-size:12.5px;
    padding:11px 13px; white-space:nowrap; border-bottom:1px solid var(--line);
    box-shadow:inset 0 -1px 0 var(--line);
}
.table > thead > tr > th a{ color:inherit }
.table > tbody > tr > td{
    padding:11px 13px; vertical-align:middle;
    border-color:var(--line-2); color:var(--ink-2);
}
.table > tbody > tr{ transition:background .12s }
.table > tbody > tr:hover{ background:var(--surface-2) }
.table > tbody > tr:last-child > td{ border-bottom:0 }
.table-sm > tbody > tr > td,.table-sm > thead > tr > th{ padding:8px 11px }

.cell-clamp{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; max-width:200px; line-height:1.5;
}
.ticket-no{
    display:inline-block; direction:ltr; white-space:nowrap;
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:12px; font-weight:700;
    color:var(--navy); background:var(--gold-50); border:1px solid var(--gold-200);
    padding:3px 9px; border-radius:7px; transition:background .14s, border-color .14s;
}
a:hover .cell-clamp{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; max-width:200px; line-height:1.5;
}
.ticket-no{ background:var(--gold-200); border-color:var(--gold-400) }

/* ---------------------------------------------------------------
   7) الشارات والرقائق
   --------------------------------------------------------------- */
.badge-status{
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    font-size:11.5px; font-weight:800; padding:3px 11px; border-radius:30px;
    color:var(--c); background:color-mix(in srgb, var(--c) 10%, #fff);
    border:1px solid color-mix(in srgb, var(--c) 26%, #fff);
}
.chip{
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    font-size:12px; font-weight:600; padding:3px 10px; border-radius:30px;
    background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
}
.stars{ color:var(--gold); font-size:12.5px; letter-spacing:1.5px; white-space:nowrap }
.rank-num{
    width:25px; height:25px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
    font-size:12px; font-weight:800; color:var(--gold-400);
    background:linear-gradient(145deg, var(--navy-700), var(--navy-900));
}
.page-title-ico{
    width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
    font-size:17px; background:var(--gold-50); color:var(--gold-600); border:1px solid var(--gold-200);
}

/* ---------------------------------------------------------------
   8) الأزرار
   --------------------------------------------------------------- */
.btn{
    font-weight:700; font-size:13.8px; border-radius:10px; padding:8px 16px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    transition:background .16s, border-color .16s, color .16s, transform .12s, box-shadow .16s;
}
.btn:active{ transform:translateY(1px) }
.btn-sm{ font-size:12.8px; padding:5px 12px; border-radius:9px; gap:6px }
.btn-lg{ font-size:15px; padding:11px 22px; border-radius:12px }

.btn-sba{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 1px 2px rgba(21,26,66,.18) }
.btn-sba:hover{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; box-shadow:0 3px 10px rgba(21,26,66,.24) }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:#fff; box-shadow:0 1px 2px rgba(184,147,31,.24) }
.btn-gold:hover{ background:var(--gold-600); border-color:var(--gold-600); color:#fff; box-shadow:0 3px 10px rgba(184,147,31,.3) }
.btn-olive{ background:var(--olive); border-color:var(--olive); color:#fff }
.btn-olive:hover{ background:var(--olive-700); border-color:var(--olive-700); color:#fff }
.btn-outline-sba{ background:#fff; border:1px solid #D6DBEB; color:var(--navy) }
.btn-outline-sba:hover{ background:var(--navy); border-color:var(--navy); color:#fff }
.btn-outline-secondary{ background:#fff; border-color:var(--line); color:var(--ink-2) }
.btn-outline-secondary:hover{ background:var(--surface-2); border-color:#D6DBEB; color:var(--navy) }
.btn-check:checked + .btn,.btn.active{ background:var(--navy); border-color:var(--navy); color:#fff }

/* ---------------------------------------------------------------
   9) النماذج وأشرطة الفلترة
   --------------------------------------------------------------- */
.form-label{ font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px }
.form-control,.form-select{
    font-size:13.8px; padding:8px 12px; border-radius:10px;
    border-color:#DDE1EE; color:var(--ink); background-color:#fff;
    transition:border-color .16s, box-shadow .16s;
}
.form-control::placeholder{ color:var(--faint) }
.form-control:focus,.form-select:focus{ border-color:var(--gold-400); box-shadow:var(--ring) }
.form-control-sm,.form-select-sm{ font-size:13px; padding:6px 10px; border-radius:9px }
.input-group-text{ background:#fff; border-color:#DDE1EE; color:var(--muted) }
.form-text{ font-size:11.5px; color:var(--muted) }
.form-check-input:checked{ background-color:var(--navy); border-color:var(--navy) }
.form-check-input:focus{ box-shadow:var(--ring); border-color:var(--gold-400) }
.form-check-label{ font-size:13.5px }

.filter-bar,.period-bar{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:15px 17px; box-shadow:var(--sh-1);
}
.toolbar{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:16px;
}
.toolbar .spacer{ margin-inline-start:auto }
.seg{
    display:inline-flex; padding:3px; gap:3px; background:var(--surface);
    border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-1); flex-wrap:wrap;
}
.seg a{
    padding:5px 13px; border-radius:9px; font-size:13px; font-weight:700; color:var(--ink-2);
    transition:background .15s, color .15s;
}
.seg a:hover{ background:var(--surface-2); color:var(--navy) }
.seg a.on{ background:var(--navy); color:#fff }

/* ---------------------------------------------------------------
   10) الرسوم البيانية
   --------------------------------------------------------------- */
.chart-box{ position:relative; height:300px }
.chart-box.sm{ height:240px }
.chart-box.lg{ height:340px }
.progress{ height:7px; border-radius:20px; background:var(--line) }
.progress-bar{ background:var(--gold); border-radius:20px }

/* ---------------------------------------------------------------
   11) عناصر متنوعة
   --------------------------------------------------------------- */
.timeline{ position:relative; padding-inline-start:26px }
.timeline::before{
    content:''; position:absolute; inset-block:8px; inset-inline-start:8px; width:2px;
    background:linear-gradient(to bottom, var(--gold-200), var(--line));
}
.timeline-item{ position:relative; padding-bottom:17px }
.timeline-item::before{
    content:''; position:absolute; inset-inline-start:-22px; top:6px; width:11px; height:11px;
    border-radius:50%; background:#fff; border:3px solid var(--gold);
    box-shadow:0 0 0 3px var(--gold-50);
}
.stat-mini{
    text-align:center; padding:13px 8px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--line-2);
}
.stat-mini .v{ font-size:20px; font-weight:800; color:var(--navy); line-height:1.2 }
.stat-mini .l{ font-size:11.5px; color:var(--muted); margin-top:2px }
.nav-tabs{ border-bottom:1px solid var(--line); gap:4px }
.nav-tabs .nav-link{
    border:0; border-bottom:2.5px solid transparent; border-radius:0;
    color:var(--muted); font-weight:700; font-size:13.8px; padding:9px 15px;
}
.nav-tabs .nav-link:hover{ color:var(--navy); border-bottom-color:var(--line) }
.nav-tabs .nav-link.active{ color:var(--navy); border-bottom-color:var(--gold); background:transparent }
.empty-state{ text-align:center; padding:48px 20px; color:var(--muted) }
.empty-state i{ display:block; font-size:42px; opacity:.28; margin-bottom:12px; color:var(--navy) }
.alert{ border-radius:var(--r); font-size:13.8px; border-width:1px; padding:12px 15px }
.alert-light{ background:var(--surface); border-color:var(--line)!important }
.dropdown-menu{
    border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3);
    font-size:13.8px; padding:6px;
}
.dropdown-item{ border-radius:8px; padding:8px 12px; font-weight:600 }
.dropdown-item:hover{ background:var(--surface-2); color:var(--navy) }
.dropdown-header{ font-size:11.5px; color:var(--faint) }
.modal-content{ border:0; border-radius:var(--r-lg); box-shadow:var(--sh-4) }
.modal-header{ border-bottom:1px solid var(--line-2); padding:15px 20px }
.modal-title{ font-size:16px; font-weight:800 }
.modal-body{ padding:20px }
.modal-footer{ border-top:1px solid var(--line-2); padding:13px 20px }
.pagination{ gap:4px }
.page-link{
    border:1px solid var(--line); border-radius:9px!important; color:var(--ink-2);
    font-weight:700; font-size:13px; padding:5px 12px;
}
.page-link:hover{ background:var(--surface-2); color:var(--navy); border-color:#D6DBEB }
.page-item.active .page-link{ background:var(--navy); border-color:var(--navy); color:#fff }
.accordion-item{ border:1px solid var(--line)!important; border-radius:var(--r-lg)!important; overflow:hidden }
.accordion-button{ font-weight:700; background:#fff; padding:14px 18px }
.accordion-button:not(.collapsed){ background:var(--surface-2); color:var(--navy); box-shadow:none }
.accordion-button:focus{ box-shadow:var(--ring); border-color:transparent }
.list-group-item{ border-color:var(--line-2); font-size:13.8px; padding:10px 14px }

/* ---------------------------------------------------------------
   12) التنبيهات
   --------------------------------------------------------------- */
.btn-bell{
    position:relative; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
    background:var(--surface); border:1px solid var(--line); color:var(--navy); font-size:17px;
    transition:border-color .16s, box-shadow .16s, background .16s;
}
.btn-bell:hover{ background:var(--gold-50); border-color:var(--gold-200) }
.bell-dot{
    position:absolute; top:-4px; inset-inline-start:-4px; min-width:19px; height:19px; padding:0 5px;
    display:grid; place-items:center; border-radius:20px; border:2px solid #fff;
    background:var(--danger); color:#fff; font-size:10.5px; font-weight:800; line-height:1;
}
.notif-menu{ width:372px; max-width:92vw; padding:0; overflow:hidden }
.notif-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:12px 15px; border-bottom:1px solid var(--line-2);
    font-weight:800; font-size:14px; color:var(--navy);
}
.notif-head i{ color:var(--gold-600) }
.notif-item{
    display:flex; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line-2);
    color:var(--ink-2); transition:background .13s;
}
.notif-item:last-of-type{ border-bottom:0 }
.notif-item:hover{ background:var(--surface-2); color:var(--ink-2) }
.notif-item.unread{ background:var(--gold-50) }
.notif-item.unread:hover{ background:#F8F1DE }
.notif-item.unread .ni-title::after{
    content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--gold); margin-inline-start:6px; vertical-align:middle;
}
.ni-ico{ width:36px; height:36px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; font-size:15px }
.ni-body{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.ni-title{ font-size:13.2px; font-weight:700; color:var(--navy); line-height:1.5 }
.ni-desc{
    font-size:11.8px; color:var(--muted); line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ni-time{ font-size:10.8px; color:var(--faint) }
.notif-foot{
    display:block; text-align:center; padding:11px; font-size:13px; font-weight:700;
    color:var(--navy); background:var(--surface-2); border-top:1px solid var(--line-2);
}
.notif-foot:hover{ background:var(--gold-50) }
.notif-empty{ text-align:center; padding:30px 15px; color:var(--muted); font-size:13px }
.notif-empty i{ display:block; font-size:28px; margin-bottom:8px; opacity:.3 }
.nav-count{
    margin-inline-start:auto; min-width:21px; padding:1px 7px; border-radius:20px; text-align:center;
    background:var(--danger); color:#fff; font-size:10.5px; font-weight:800;
}

/* ---------------------------------------------------------------
   13) مستويات الخدمة
   --------------------------------------------------------------- */
.sla-bar{ height:5px; border-radius:20px; background:var(--line); overflow:hidden; margin-top:6px }
.sla-bar span{ display:block; height:100%; border-radius:20px; transition:width .4s }
.sla-row-2{ background:#FFFAF3!important }
.sla-row-3{ background:#FDF4F4!important }
.sla-row-2:hover{ background:#FEF5E9!important }
.sla-row-3:hover{ background:#FBECEC!important }
.esc-tag{
    display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
    font-size:10.8px; font-weight:800; padding:2px 9px; border-radius:20px;
    background:var(--danger-50); color:var(--danger); border:1px solid #F2CFD1;
}

/* ---------------------------------------------------------------
   14) المقارنة بالفترة السابقة
   --------------------------------------------------------------- */
.delta{
    display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
    font-size:11.5px; font-weight:800; padding:2px 9px; border-radius:20px;
}
.delta.up{   color:var(--olive-700); background:var(--olive-50); border:1px solid #DCE8C9 }
.delta.down{ color:var(--danger);    background:var(--danger-50); border:1px solid #F5D5D6 }
.delta.flat{ color:var(--muted);     background:var(--surface-2); border:1px solid var(--line) }
.delta-prev{ font-size:10.8px; color:var(--faint); margin-inline-start:6px }
.cmp-tag{
    display:inline-flex; align-items:center; gap:6px; font-size:11.8px; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--line); padding:4px 12px; border-radius:20px;
}

/* ---------------------------------------------------------------
   15) تحليل الملاحظات
   --------------------------------------------------------------- */
.wordcloud{
    display:flex; flex-wrap:wrap; gap:9px 13px; align-items:center; justify-content:center;
    padding:22px 14px; line-height:1.75;
}
.wordcloud a{ font-weight:800; display:inline-block; transition:transform .15s, opacity .15s }
.wordcloud a:hover{ transform:scale(1.14); opacity:1!important }
.term-row{ display:flex; align-items:center; gap:10px }
.term-bar{ flex:1; height:7px; border-radius:20px; background:var(--line-2); overflow:hidden }
.term-bar span{ display:block; height:100%; border-radius:20px }
.sentiment-pill{
    display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:800;
}

/* ---------------------------------------------------------------
   16) تسجيل الدخول
   --------------------------------------------------------------- */
.login-page{
    position:relative; min-height:100vh; display:grid; place-items:center; padding:24px; overflow:hidden;
    background:
        radial-gradient(760px 460px at 88% 8%, rgba(201,162,39,.20), transparent 58%),
        radial-gradient(660px 520px at 8% 96%, rgba(110,145,66,.20), transparent 56%),
        linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 52%, #2A3170 100%);
}
.login-page::before{
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:56px 56px; mask-image:radial-gradient(circle at 50% 40%, #000, transparent 78%);
}
.login-card{
    position:relative; z-index:2; width:100%; max-width:440px;
    background:rgba(255,255,255,.98); border-radius:var(--r-xl); padding:34px 32px;
    box-shadow:var(--sh-4);
}
.login-card .logo{ height:76px; margin-bottom:14px }
.login-card h2{ font-size:20px; font-weight:800; margin:0 }
.login-card .sub{ font-size:13px; color:var(--muted); margin-bottom:24px }
.demo-box{
    margin-top:20px; padding:13px 15px; border-radius:var(--r);
    background:var(--gold-50); border:1px dashed var(--gold-200); font-size:12.5px; color:var(--gold-700);
}
.demo-box code{ background:#fff; border:1px solid var(--gold-200); color:var(--navy) }

/* ---------------------------------------------------------------
   17) الصفحات العامة (الاستبيان والبوابة)
   --------------------------------------------------------------- */
.survey-page{
    min-height:100vh; padding:28px 15px;
    background:
        radial-gradient(900px 480px at 50% -8%, #E7ECF8 0%, transparent 60%),
        linear-gradient(170deg, #F4F6FB, #E9EDF7);
}
.survey-card{
    max-width:740px; margin:0 auto; background:var(--surface);
    border-radius:var(--r-xl); box-shadow:var(--sh-3); overflow:hidden;
}
.survey-head{
    position:relative; padding:30px 26px 26px; text-align:center; color:#fff;
    background:
        radial-gradient(420px 220px at 82% 0%, rgba(201,162,39,.24), transparent 60%),
        linear-gradient(150deg, var(--navy-800), var(--navy-900));
}
.survey-head .plate{
    display:inline-block; background:#fff; border-radius:14px; padding:11px 18px; margin-bottom:14px;
    box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.survey-head img{ height:52px; display:block }
.survey-body{ padding:26px }
.q-block{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:16px 18px; margin-bottom:13px; transition:border-color .16s, box-shadow .16s;
}
.q-block:focus-within{ border-color:var(--gold-200); box-shadow:var(--sh-1) }
.q-block .q-title{ font-size:14.5px; font-weight:800; color:var(--navy); margin-bottom:12px }
.star-input{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:6px }
.star-input input{ position:absolute; opacity:0; width:0; height:0 }
.star-input label{
    font-size:31px; line-height:1; color:#DBE0EC; cursor:pointer;
    transition:transform .13s, color .13s;
}
.star-input label:hover,.star-input label:hover ~ label,
.star-input input:checked ~ label{ color:var(--gold) }
.star-input label:hover{ transform:scale(1.16) }
.star-input input:focus-visible + label{ box-shadow:var(--ring); border-radius:6px }

/* ---------------------------------------------------------------
   18) الجوال
   --------------------------------------------------------------- */
.sidebar-backdrop{
    display:none; position:fixed; inset:0; z-index:1035;
    background:rgba(14,18,48,.52); backdrop-filter:blur(2px);
}
@media (max-width:1199.98px){
    .content{ padding:18px }
    .kpi .kpi-value{ font-size:26px }
}
@media (max-width:991.98px){
    .sidebar{ transform:translateX(100%) }
    body.sb-open .sidebar{ transform:translateX(0) }
    body.sb-open .sidebar-backdrop{ display:block }
    body.sb-open{ overflow:hidden }
    .main{ margin-right:0 }
    .btn-burger{ display:grid }
    .topbar{ padding:10px 14px; gap:10px }
    .topbar h1{ font-size:16px }
    .topbar .sub{ display:none }
    .content{ padding:14px }
        .kpi{ padding:14px }
    .kpi .kpi-value{ font-size:24px }
    .kpi .kpi-label{ font-size:12px }
    .kpi .kpi-label i{ width:25px; height:25px; font-size:13px }
    .user-chip{ padding:4px; border:0; background:transparent }
    .user-chip .nm,.user-chip .rl,.user-chip > .bi-chevron-down{ display:none }
    .notif-menu{ width:min(360px,94vw) }
    .filter-bar,.period-bar{ padding:13px }
    .chart-box{ height:260px }
    .chart-box.lg{ height:290px }
    .survey-body{ padding:20px 16px }
}
@media (max-width:575.98px){
    .content{ padding:11px }
    .card-header{ padding:12px 14px; font-size:13.8px }
    .card-body{ padding:14px }
    .kpi .kpi-value{ font-size:22px }
    .seg{ width:100% }
    .seg a{ flex:1; text-align:center }
    .btn{ font-size:13px; padding:7px 13px }
    .login-card{ padding:26px 20px }
    .chart-box{ height:230px }
}

/* ---------------------------------------------------------------
   19) الطباعة
   --------------------------------------------------------------- */
.print-only{ display:none }
@media print{
    .sidebar,.topbar,.sidebar-backdrop,.no-print,.btn-burger{ display:none!important }
    .main{ margin:0 }
    .content{ padding:0; max-width:none }
    body{ background:#fff!important; background-image:none!important; font-size:11.5px }
    .card,.kpi{ box-shadow:none; border:1px solid #CFD5E4; break-inside:avoid; page-break-inside:avoid }
    .kpi::before{ display:none }
    .table > thead > tr > th{ position:static; box-shadow:none }
    .print-only{ display:block!important }
    a{ color:inherit!important; text-decoration:none!important }
    @page{ size:A4; margin:12mm }
}

/* ---------------------------------------------------------------
   20) الحركة المخفّضة
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms!important; transition-duration:.001ms!important;
    }
}