@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap");

/* ============================================================
   Dammam Health Network — Dashboard Styles
   شبكة صحة الدمام · المملكة العربية السعودية
   Designed & Developed by Ali Abukallah
   ============================================================ */

:root {
    --bg:              #F4F6F8;
    --bg-2:            #ffffff;
    --bg-3:            #EBF4FB;
    --sidebar-bg:      #001d3d;
    --sidebar-hover:   rgba(255,255,255,0.06);
    --sidebar-active:  #003B71;
    --sidebar-text:    rgba(255,255,255,0.55);
    --sidebar-text-hi: #ffffff;
    --topbar-bg:       #ffffff;
    --topbar-border:   #dce6f0;
    --text-primary:    #0d1b2e;
    --text-secondary:  #4a5568;
    --text-muted:      #8896a0;
    --border:          #dce6f0;
    --gold:            #00A6A6;
    --green:           #003B71;
    --green-light:     #00A6A6;
    --green-pale:      #DCEAF5;
    --red:             #dc2626;
    --active-color:    #10b981;
    --inactive-color:  #ef4444;
    --card-shadow:     0 1px 6px rgba(0,59,113,0.06),
                       0 4px 20px rgba(0,59,113,0.05);
    --radius:          12px;
    --radius-sm:       8px;
    --sidebar-width:   240px;
    --topbar-height:   60px;
    --ease:            cubic-bezier(0.4,0,0.2,1);
    --transition:      all 0.22s var(--ease);
}

/* ── Dark Theme — Slate Professional ── */
.theme-dark {
    --bg:            #0b1220;
    --bg-2:          #1a2436;
    --bg-3:          #232f45;
    --sidebar-bg:      #001d3d;
    --sidebar-hover: rgba(255,255,255,0.06);
    --topbar-bg:     #1a2436;
    --topbar-border: rgba(255,255,255,0.14);
    --text-primary:  #ffffff;
    --text-secondary:#9ca3af;
    --text-muted:    #6b7280;
    --border:        rgba(255,255,255,0.11);
    --card-shadow:   0 2px 10px rgba(0,0,0,0.55), 0 8px 28px rgba(0,0,0,0.35);
    --gold:          #38bdf8;
    --green:         #2563eb;
    --green-light:   #3b82f6;
    --green-pale:    rgba(37,99,235,0.18);
    --active-color:  #34d399;
    --inactive-color:#f87171;
}

/* ── Design: Compact ── */
.design-compact .stat-card    { padding: 14px 12px; }
.design-compact .stat-value   { font-size: 26px; }
.design-compact .content      { padding: 16px; }
.design-compact .widgets-grid { gap: 10px; }
.design-compact .activity-item,
.design-compact .team-item    { padding: 8px 14px; }

/* ── Design: Focused (بدون Sidebar) ── */
.design-focused .sidebar      { display: none; }
.design-focused .main-wrapper { margin-right: 0 !important; }
.design-focused .widgets-grid {
    grid-template-columns: repeat(2,1fr);
    max-width: 800px;
    margin: 0 auto;
}
.design-focused .row-grid {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    font-size:  15px;
    overflow-x: hidden;
    max-width:  100%;
}

body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    background:  var(--bg);
    color:       var(--text-primary);
    min-height:  100vh;
    display:     flex;
    overflow-x:  hidden;
    max-width:   100%;
    transition:  background 0.3s, color 0.3s;
}

a      { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width:          var(--sidebar-width);
    min-width:      var(--sidebar-width);
    background:     var(--sidebar-bg);
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
    position:       fixed;
    top:            0;
    right:          0;
    bottom:         0;
    z-index:        200;
    transition:     transform 0.3s var(--ease);
    overflow-y:     auto;
    overflow-x:     hidden;
}

.sidebar-logo {
    padding:       20px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display:       flex;
    align-items:   center;
    gap:           12px;
    flex-shrink:   0;
}

.sidebar-logo-icon {
    width:            38px;
    height:           38px;
    background:       #003B71;
    border-radius:    10px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        17px;
    font-weight:      900;
    color:            white;
    flex-shrink:      0;
    box-shadow:       0 0 0 1.5px rgba(0,166,166,0.45);
}

.sidebar-logo-en {
    font-size:      14px;
    font-weight:    800;
    color:          #fff;
    letter-spacing: 3px;
    line-height:    1;
    display:        block;
}

.sidebar-logo-ar {
    font-size:   10px;
    color:       var(--gold);
    font-weight: 600;
    display:     block;
    margin-top:  2px;
}

.sidebar-user {
    margin:        12px;
    padding:       12px;
    background:    rgba(255,255,255,0.05);
    border:        1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    gap:           10px;
    flex-shrink:   0;
}

.sidebar-avatar {
    width:            34px;
    height:           34px;
    border-radius:    50%;
    background:       linear-gradient(135deg,#003B71,#00A6A6);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        13px;
    font-weight:      700;
    color:            #fff;
    flex-shrink:      0;
    border:           2px solid rgba(0,166,166,0.35);
}

.sidebar-user-name {
    font-size:     12px;
    font-weight:   600;
    color:         #fff;
    display:       block;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     130px;
}

.sidebar-user-role {
    font-size: 10px;
    color:     var(--gold);
    display:   block;
}

.sidebar-nav {
    flex:           1;
    padding:        8px 10px;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.nav-section-label {
    font-size:      9px;
    font-weight:    700;
    color:          rgba(255,255,255,0.28);
    letter-spacing: 2px;
    padding:        12px 8px 5px;
    text-transform: uppercase;
}

.nav-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px;
    border-radius: var(--radius-sm);
    color:         var(--sidebar-text);
    font-size:     13px;
    font-weight:   500;
    transition:    var(--transition);
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color:      var(--sidebar-text-hi);
}

.nav-item.active {
    background: var(--sidebar-active);
    color:      #fff;
}

.nav-item-icon {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.nav-item-icon svg { width: 18px; height: 18px; }

/* .nav-subitem now renders identically to a regular .nav-item (icon + label),
   matching the Committees sidebar entries exactly. */

.nav-logout:hover {
    background: rgba(220,38,38,0.15) !important;
    color:      #ef4444 !important;
}

.sidebar-footer {
    padding:        12px 16px;
    border-top:     1px solid rgba(255,255,255,0.06);
    font-size:      10px;
    color:          rgba(255,255,255,0.2);
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex-shrink:    0;
}
/* ============================================================
   MAIN WRAPPER
   ============================================================ */
.main-wrapper {
    margin-right:   var(--sidebar-width);
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    overflow:       visible;
    transition:     margin-right 0.3s var(--ease);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    height:        var(--topbar-height);
    background:    var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display:       flex;
    align-items:   center;
    padding:       0 20px;
    gap:           10px;
    position:      sticky;
    top:           0;
    z-index:       9999;
    box-sizing:    border-box;
    width:         100%;
    overflow:      visible;
    transition:    background 0.3s, border-color 0.3s;
}

.topbar-toggle {
    background:    none;
    border:        none;
    color:         var(--text-secondary);
    padding:       6px;
    border-radius: var(--radius-sm);
    transition:    var(--transition);
    display:       flex;
    align-items:   center;
}

.topbar-toggle:hover {
    background: var(--bg-3);
    color:      var(--text-primary);
}

.topbar-title {
    font-size:   15px;
    font-weight: 700;
    color:       var(--text-primary);
    flex:        1;
}

.topbar-actions {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.topbar-btn {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       7px 11px;
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
    background:    var(--bg-3);
    color:         var(--text-secondary);
    font-size:     12px;
    font-weight:   600;
    transition:    var(--transition);
    white-space:   nowrap;
}

.topbar-btn:hover {
    border-color: var(--green);
    color:        var(--green);
    background:   var(--green-pale);
}

.theme-dark .topbar-btn {
    border-color: rgba(255,255,255,0.16);
    color:        #ffffff;
}

.theme-dark .topbar-btn:hover {
    background:   var(--green);
    border-color: var(--green);
    color:        #ffffff;
}

.theme-dark .notif-bell-btn {
    border-color: rgba(255,255,255,0.16);
    color:        #ffffff;
}

.theme-dark .notif-bell-btn:hover {
    background:   var(--green);
    color:        #ffffff;
}

.theme-dark .topbar-logout-btn {
    border-color: rgba(248,113,113,0.4);
    background:   rgba(248,113,113,0.1);
    color:        #fca5a5;
}

.theme-dark .topbar-logout-btn:hover {
    background:   #ef4444;
    border-color: #ef4444;
    color:        #ffffff;
}

.topbar-sep {
    width:      1px;
    height:     22px;
    background: var(--border);
    flex-shrink: 0;
}

.topbar-user {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.topbar-avatar {
    width:            34px;
    height:           34px;
    border-radius:    50%;
    background:       linear-gradient(135deg,#003B71,#00A6A6);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        13px;
    font-weight:      700;
    color:            #fff;
    flex-shrink:      0;
}

.topbar-user-name {
    font-size:   13px;
    font-weight: 600;
    color:       var(--text-primary);
    display:     block;
    line-height: 1.3;
}

.topbar-user-role {
    font-size: 10px;
    color:     var(--text-muted);
    display:   block;
}

/* زر تسجيل الخروج في التوبار فقط */
.topbar-logout-btn {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       7px 13px;
    border-radius: var(--radius-sm);
    border:        1px solid rgba(220,38,38,0.22);
    background:    rgba(220,38,38,0.05);
    color:         #dc2626;
    font-size:     12px;
    font-weight:   600;
    text-decoration: none;
    transition:    var(--transition);
    white-space:   nowrap;
    flex-shrink:   0;
}

.topbar-logout-btn:hover {
    background:   rgba(220,38,38,0.12);
    border-color: #dc2626;
    box-shadow:   0 2px 8px rgba(220,38,38,0.15);
}

/* ============================================================
   CUSTOMIZE PANEL
   ============================================================ */
.customize-panel {
    background:    var(--topbar-bg);
    border-bottom: 0 solid var(--border);
    max-height:    0;
    overflow:      hidden;
    transition:    max-height 0.38s var(--ease),
                   box-shadow 0.3s, border-bottom-width 0.38s var(--ease);
}

.customize-panel.open {
    border-bottom-width: 1px;
    max-height: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.customize-panel-inner {
    padding: 20px 28px 24px;
}

.customize-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
    padding-bottom:  14px;
    border-bottom:   1px solid var(--border);
}

.customize-title {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   15px;
    font-weight: 700;
    color:       var(--text-primary);
}

.customize-close {
    background:    none;
    border:        none;
    color:         var(--text-muted);
    font-size:     18px;
    width:         30px;
    height:        30px;
    border-radius: 6px;
    cursor:        pointer;
    transition:    var(--transition);
    display:       flex;
    align-items:   center;
    justify-content: center;
    line-height:   1;
}

.customize-close:hover {
    background: var(--bg-3);
    color:      var(--text-primary);
}

/* الصفوف */
.customize-rows {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
    margin-bottom:         20px;
}

.customize-row { }

.customize-section-label {
    font-size:      10px;
    font-weight:    700;
    color:          var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom:  10px;
}

/* Mode Buttons */
.mode-toggle-wrap {
    display: flex;
    gap:     8px;
}

.mode-btn {
    display:       flex;
    align-items:   center;
    gap:           7px;
    padding:       9px 18px;
    border-radius: 24px;
    border:        1.5px solid var(--border);
    background:    var(--bg-3);
    color:         var(--text-secondary);
    font-size:     12px;
    font-weight:   600;
    transition:    var(--transition);
    cursor:        pointer;
}

.mode-btn.active {
    border-color: var(--green);
    color:        var(--green);
    background:   var(--green-pale);
}

.theme-dark .mode-btn.active {
    background: var(--green);
    color:      #ffffff;
}

.mode-btn:hover:not(.active) {
    border-color: var(--text-muted);
    color:        var(--text-primary);
}

.theme-dark .mode-btn {
    border-color: rgba(255,255,255,0.16);
    color:        #ffffff;
}

.theme-dark .mode-btn:hover:not(.active) {
    border-color: var(--green);
    color:        #ffffff;
}

/* Design Cards */
.design-cards {
    display: flex;
    gap:     10px;
}

.design-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    padding:        10px 12px;
    border-radius:  var(--radius-sm);
    border:         1.5px solid var(--border);
    background:     var(--bg-3);
    cursor:         pointer;
    transition:     var(--transition);
    flex:           1;
}

.design-card span {
    font-size:   11px;
    font-weight: 600;
    color:       var(--text-secondary);
}

.design-card.active {
    border-color: var(--green);
    background:   var(--green-pale);
}

.theme-dark .design-card.active {
    background: rgba(0,59,113,0.12);
}

.design-card.active span { color: var(--green); }

.design-card:hover:not(.active) {
    border-color: var(--text-muted);
}

/* Preview Thumbnails */
.design-card-preview {
    width:         60px;
    height:        40px;
    border-radius: 5px;
    background:    var(--bg-2);
    border:        1px solid var(--border);
    display:       flex;
    overflow:      hidden;
    gap:           3px;
    padding:       4px;
}

.p-sidebar {
    width:         11px;
    background:    var(--green);
    border-radius: 2px;
    opacity:       0.7;
    flex-shrink:   0;
}

.p-sidebar.thin { width: 7px; }

.p-content {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            3px;
    justify-content: center;
}

.p-content.full { width: 100%; padding: 0; }

.p-row {
    height:        5px;
    background:    var(--border);
    border-radius: 2px;
}

.p-row.short { width: 65%; }
.p-row.wide  { width: 100%; }

/* Drag Hint */
.customize-hint {
    display:       flex;
    align-items:   center;
    gap:           7px;
    font-size:     12px;
    color:         var(--text-muted);
    background:    var(--bg-3);
    padding:       10px 14px;
    border-radius: var(--radius-sm);
    border:        1px solid var(--border);
}

/* Save Button */
.customize-save {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       11px 24px;
    border-radius: var(--radius-sm);
    border:        none;
    background:    var(--green);
    color:         #fff;
    font-size:     13px;
    font-weight:   700;
    cursor:        pointer;
    transition:    var(--transition);
}

.customize-save:hover {
    background: var(--green-light);
    box-shadow: 0 4px 14px rgba(0,59,113,0.30);
    transform:  translateY(-1px);
}

/* ============================================================
   CONTENT
   ============================================================ */
.content {
    flex:    1;
    padding: 24px;
}

.page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    margin-bottom:   24px;
    flex-wrap:       wrap;
    gap:             12px;
}

.page-title {
    font-size:     20px;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 4px;
}

.page-subtitle {
    font-size: 13px;
    color:     var(--text-secondary);
}

.page-header-meta {
    font-size:     12px;
    color:         var(--text-muted);
    background:    var(--bg-2);
    border:        1px solid var(--border);
    padding:       7px 14px;
    border-radius: 20px;
    white-space:   nowrap;
}

/* Stats Grid */
.widgets-grid {
    display:               grid;
    grid-template-columns: repeat(4,1fr);
    gap:                   14px;
    margin-bottom:         20px;
}

.stat-card {
    background:    var(--bg-2);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       20px 18px 18px;
    position:      relative;
    overflow:      hidden;
    box-shadow:    0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
    transition:    transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    cursor:        grab;
}

.stat-card:active { cursor: grabbing; }

.stat-card:hover {
    border-color: var(--green);
    transform:    translateY(-4px);
    box-shadow:   0 4px 8px rgba(0,59,113,0.06), 0 18px 36px rgba(0,59,113,0.14);
}

.stat-card-stripe {
    position:      absolute;
    top: 0; right: 0; left: 0;
    height:        4px;
    border-radius: 16px 16px 0 0;
}

.stripe-1 { background: linear-gradient(90deg,#001d3d,#003B71); }
.stripe-2 { background: linear-gradient(90deg,#003B71,#00A6A6); }
.stripe-3 { background: linear-gradient(90deg,#00A6A6,#4dd8d8); }
.stripe-4 { background: linear-gradient(90deg,#dc2626,#f87171); }

.stat-label {
    font-size:          11px;
    font-weight:        700;
    color:              var(--text-secondary);
    margin-bottom:      10px;
    letter-spacing:     0.3px;
    padding-inline-end: 46px;
}

.stat-value {
    font-size:   34px;
    font-weight: 800;
    color:       var(--text-primary);
    line-height: 1;
}

.stat-green { color: var(--active-color);   }
.stat-gold  { color: var(--gold);           }
.stat-red   { color: var(--inactive-color); }

.stat-sub {
    font-size:  11px;
    color:      var(--text-muted);
    margin-top: 8px;
}

.stat-icon {
    position:        absolute;
    top:             16px;
    inset-inline-end:16px;
    width:           38px;
    height:          38px;
    border-radius:   11px;
    background:      var(--bg-3);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--transition);
}

.stat-icon svg {
    width:      19px;
    height:     19px;
    opacity:    0.55;
    color:      var(--text-secondary);
    transition: var(--transition);
}

.stat-card:hover .stat-icon {
    background: var(--green-pale);
}

.stat-card:hover .stat-icon svg {
    opacity: 1;
    color:   var(--green);
}

/* Row Grid */
.row-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
    margin-bottom:         20px;
}

/* Panel */
.panel {
    background:    var(--bg-2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    box-shadow:    var(--card-shadow);
}

.panel-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px 12px;
    border-bottom:   1px solid var(--border);
}

.panel-title {
    font-size:   14px;
    font-weight: 700;
    color:       var(--text-primary);
}

.panel-badge {
    font-size:     10px;
    font-weight:   700;
    padding:       3px 9px;
    border-radius: 12px;
}

.badge-green {
    background: var(--green-pale);
    color:      var(--green);
    border:     1px solid rgba(0,59,113,0.15);
}

.theme-dark .badge-green { background: rgba(0,59,113,0.15); }

.badge-navy {
    background: rgba(10,46,26,0.06);
    color:      var(--text-secondary);
    border:     1px solid var(--border);
}

.theme-dark .badge-navy { background: rgba(255,255,255,0.05); }

.panel-body { padding: 4px 0; }

/* Activity */
.activity-item {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       10px 16px;
    border-bottom: 1px solid var(--border);
    transition:    var(--transition);
}

.activity-item:last-child { border-bottom: none; }
.activity-item:hover      { background: var(--bg-3); }

.act-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    margin-top:    5px;
    flex-shrink:   0;
}

.dot-green {
    background: var(--active-color);
    box-shadow: 0 0 5px rgba(16,185,129,0.5);
}

.dot-gold { background: var(--gold); }
.dot-gray { background: var(--text-muted); }

.act-text {
    font-size:   12px;
    color:       var(--text-primary);
    line-height: 1.5;
}

.act-meta {
    font-size:  10px;
    color:      var(--text-muted);
    margin-top: 2px;
}

/* Team */
.team-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 16px;
    border-bottom: 1px solid var(--border);
    transition:    var(--transition);
}

.team-item:last-child { border-bottom: none; }
.team-item:hover      { background: var(--bg-3); }

.team-avatar {
    width:            34px;
    height:           34px;
    border-radius:    50%;
    background:       linear-gradient(135deg,#003B71,#00A6A6);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        13px;
    font-weight:      700;
    color:            #fff;
    flex-shrink:      0;
}

.team-info    { flex: 1; min-width: 0; }
.team-name    { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.team-role    { font-size: 11px; color: var(--text-muted); }

.team-status {
    display:     flex;
    align-items: center;
    gap:         5px;
    flex-shrink: 0;
}

.status-dot    { width: 7px; height: 7px; border-radius: 50%; }
.dot-active    { background: var(--active-color); box-shadow: 0 0 5px rgba(16,185,129,0.5); }
.dot-inactive  { background: var(--inactive-color); }
.status-label  { font-size: 11px; color: var(--text-muted); }

/* Viewer */
.viewer-welcome {
    text-align:    center;
    padding:       60px 20px;
    background:    var(--bg-2);
    border-radius: var(--radius);
    border:        1px solid var(--border);
}

.viewer-icon {
    width:            72px;
    height:           72px;
    border-radius:    50%;
    background:       var(--green-pale);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin:           0 auto 16px;
    color:            var(--green);
}

.viewer-welcome h2 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.viewer-welcome p  { font-size: 14px; color: var(--text-secondary); }

/* Empty */
.empty-state { text-align: center; padding: 32px; font-size: 13px; color: var(--text-muted); }

/* Drag */
.dragging  { opacity: 0.5; transform: scale(0.97); }
.drag-over { border: 2px dashed var(--green) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    flex-shrink:     0;
    padding:         10px 24px;
    background:      var(--topbar-bg);
    border-top:      1px solid var(--topbar-border);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             12px;
    font-size:       11px;
    color:           var(--text-muted);
    box-sizing:      border-box;
    width:           100%;
    min-width:       0;
    min-height:      88px;
    transition:      background 0.3s;
}

.footer-brand {
    display:     flex;
    align-items: center;
    gap:         10px;
    min-width:   0;
}
.footer-brand-icon {
    width:         46px;
    height:        46px;
    border-radius: 11px;
    object-fit:    contain;
    flex-shrink:   0;
    background:    var(--bg-2);
    border:        1px solid var(--border);
    padding:       3px;
}
.footer-brand-text-wrap {
    display:        flex;
    flex-direction: column;
    line-height:    1.4;
    min-width:      0;
}
.footer-brand-text {
    font-size:     16px;
    font-weight:   800;
    color:         var(--text-secondary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.footer-brand-year {
    font-size: 12px;
    color:     var(--text-muted);
}

.footer-stamp {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}
.footer-stamp-img {
    width:      170px;
    height:     auto;
    max-width:  100%;
    display:    block;
    object-fit: contain;
    transition: transform 0.25s ease;
}
.footer-stamp:hover .footer-stamp-img {
    transform: scale(1.05);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .widgets-grid { grid-template-columns: repeat(2,1fr); }
    .customize-rows { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .row-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LTR Support — English Language
   ============================================================ */

/* السايدبار ينتقل لليسار */
.lang-en .sidebar,
[lang="en"] .sidebar {
    right: auto;
    left:  0;
}

/* المحتوى الرئيسي ينتقل لليمين */
.lang-en .main-wrapper,
[lang="en"] .main-wrapper {
    margin-right: 0;
    margin-left:  var(--sidebar-width);
}

/* Focused design + LTR */
[lang="en"].design-focused .main-wrapper {
    margin-left: 0 !important;
}
/* ============================================================
   DHN — Professional Healthcare Enhancements
   ============================================================ */

/* Sidebar active item — تيل بارد */
.nav-item.active {
    background:  linear-gradient(90deg, rgba(0,59,113,0.9), rgba(0,166,166,0.15)) !important;
    border-right: 3px solid #00A6A6;
    color: #fff !important;
}
[dir="ltr"] .nav-item.active {
    border-right: none;
    border-left: 3px solid #00A6A6;
}

/* Sidebar — خط تيل علوي */
.sidebar::after {
    content:    '';
    position:   absolute;
    top:        0; right: 0; left: 0;
    height:     3px;
    background: linear-gradient(90deg, #003B71, #00A6A6);
}

/* Topbar — شريط كحلي سفلي */
.topbar {
    border-bottom: 2px solid #DCEAF5 !important;
    box-shadow: 0 2px 12px rgba(0,59,113,0.06) !important;
}

/* Panel header — خط كحلي خفيف */
.panel-header {
    background: linear-gradient(135deg, var(--bg-2), var(--bg-3)) !important;
}

/* Welcome title */
.welcome-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0d1b2e !important;
}

/* Badge تحسين */
.badge-green {
    background: rgba(0,166,166,0.12) !important;
    color: #007a7a !important;
    border: 1px solid rgba(0,166,166,0.25) !important;
}

/* Team avatar — gradient محسّن */
.team-avatar {
    background: linear-gradient(135deg, #003B71, #00A6A6) !important;
}

/* Committee card border */
.committee-card {
    border-top: 3px solid #003B71 !important;
}

/* Scrollbar تيل */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-3); }
::-webkit-scrollbar-thumb {
    background:    linear-gradient(#003B71, #00A6A6);
    border-radius: 10px;
}

/* ── شعار الصحة القابضة في السايدبار ── */
.sidebar-parent-logo {
    flex-shrink: 0;
    padding: 0 12px 8px;
}

.sidebar-parent-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(47,168,223,0.4),
        transparent
    );
    margin-bottom: 10px;
}

.sidebar-parent-content {
    padding: 10px 12px;
    background: rgba(47,168,223,0.06);
    border: 1px solid rgba(47,168,223,0.15);
    border-radius: 10px;
}

.sidebar-parent-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sidebar-parent-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-parent-brand svg {
    flex-shrink: 0;
}

.sidebar-parent-name-ar {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #2FA8DF;
    line-height: 1.2;
}

.sidebar-parent-name-en {
    display: block;
    font-size: 9px;
    font-weight: 500;
    color: rgba(47,168,223,0.6);
    margin-top: 1px;
}

/* ============================================================
   SIDEBAR — Parent Brand (الصحة القابضة)
   ============================================================ */

/* إعادة تصميم header اللوغو */
.sidebar-logo {
    padding:        18px 16px 14px;
    border-bottom:  1px solid rgba(255,255,255,0.07);
    display:        flex;
    align-items:    center;
    gap:            11px;
    flex-shrink:    0;
    background:     linear-gradient(180deg, rgba(0,166,166,0.08) 0%, transparent 100%);
}

.sidebar-logo-icon {
    width:           40px;
    height:          40px;
    background:      transparent !important;
    box-shadow:      none !important;
    border-radius:   0 !important;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    filter:          drop-shadow(0 2px 8px rgba(0,166,166,0.4));
}

.sidebar-logo-text { display: flex; flex-direction: column; gap: 1px; }

/* Parent Brand Block */
.sidebar-parent {
    flex-shrink: 0;
    padding:     10px 14px 6px;
}

.sidebar-parent-line {
    height:     1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(47,168,223,0.5) 50%,
        transparent 100%);
    margin-bottom: 10px;
}

.sidebar-parent-inner {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 12px;
    background:    rgba(47,168,223,0.07);
    border:        1px solid rgba(47,168,223,0.18);
    border-radius: 10px;
    transition:    all 0.2s ease;
}

.sidebar-parent-inner:hover {
    background: rgba(47,168,223,0.12);
    border-color: rgba(47,168,223,0.30);
}

.sidebar-parent-img {
    width:      30px;
    height:     30px;
    object-fit: contain;
    flex-shrink: 0;
    opacity:    0.85;
    filter:     drop-shadow(0 1px 4px rgba(47,168,223,0.3));
}

.sidebar-parent-sub {
    display:        block;
    font-size:      8px;
    font-weight:    600;
    color:          rgba(255,255,255,0.30);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom:  2px;
}

.sidebar-parent-name {
    display:     block;
    font-size:   11px;
    font-weight: 700;
    color:       #2FA8DF;
    line-height: 1.2;
}

.sidebar-parent-name-en {
    display:     block;
    font-size:   9px;
    font-weight: 400;
    color:       rgba(47,168,223,0.55);
    margin-top:  1px;
}
/* ============================================================
   DHN — Mobile Responsive (نظيف ومرتب)
   ============================================================ */

/* ── Overlay ── */
.sidebar-overlay {
    display:        block;
    position:       fixed;
    inset:          0;
    background:     rgba(0,10,25,0.6);
    backdrop-filter:blur(2px);
    z-index:        199;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.28s ease;
}
.sidebar-overlay.active {
    opacity:        1;
    pointer-events: all;
}
@media (min-width: 769px) {
    .sidebar-overlay { display: none !important; }
}

/* ── Tablet: 768px ── */
@media (max-width: 768px) {

    /* السايدبار — drawer من اليمين */
    .sidebar {
        transform:  translateX(110%) !important;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
        z-index:    200;
        box-shadow: none;
    }
    .sidebar.open {
        transform:  translateX(0) !important;
        box-shadow: -4px 0 32px rgba(0,0,0,0.35) !important;
    }
    [dir="ltr"] .sidebar {
        transform: translateX(-110%) !important;
    }
    [dir="ltr"] .sidebar.open {
        transform: translateX(0) !important;
    }

    /* المحتوى يأخذ كامل العرض */
    .main-wrapper {
        margin-right: 0 !important;
        margin-left:  0 !important;
    }

    /* Topbar */
    .topbar { padding: 0 12px; }
    .topbar-title { font-size: 14px !important; }
    .topbar-user-name,
    .topbar-user-role { display: none; }
    .topbar-logout-btn span { display: none; }

    /* زر الهامبرغر */
    .topbar-toggle {
        width:           40px;
        height:          40px;
        border-radius:   10px;
        background:      rgba(0,59,113,0.08);
        border:          1px solid rgba(0,59,113,0.15);
        color:           #003B71;
        display:         flex;
        align-items:     center;
        justify-content: center;
        flex-shrink:     0;
    }

    /* Content */
    .content { padding: 14px !important; }

    /* Stats */
    .widgets-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Panels */
    .row-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Page header */
    .page-header { flex-direction: column; gap: 8px; }
    .page-title  { font-size: 16px !important; }
    .page-header-meta { font-size: 11px; }

    /* Footer */
    .footer { padding: 8px 14px !important; gap: 8px !important; }
    .footer-stamp-img { width: 140px !important; }
}

/* ── Mobile: 480px ── */
@media (max-width: 480px) {
    .widgets-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .content { padding: 10px !important; }
    .stat-value { font-size: 26px !important; }
    .topbar-btn span { display: none !important; }

    /* Footer */
    .footer { justify-content: center !important; text-align: center !important; }
    .footer-brand-year { display: none !important; }
    .footer-brand-icon { width: 34px !important; height: 34px !important; }
    .footer-brand-text { font-size: 13px !important; }
    .footer-stamp-img { width: 120px !important; }
}
/* ============================================================
   Bell Notifications — Topbar
   ============================================================ */

.notif-bell-btn {
    width:           38px;
    height:          38px;
    border-radius:   10px;
    border:          1px solid var(--border);
    background:      var(--bg-3);
    color:           var(--text-secondary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    position:        relative;
    transition:      var(--transition);
    flex-shrink:     0;
}
.notif-bell-btn:hover { background:var(--green-pale); color:var(--green); }

.notif-badge {
    position:      absolute;
    top:           -5px;
    left:          -5px;
    min-width:     18px;
    height:        18px;
    background:    #ef4444;
    border-radius: 10px;
    font-size:     10px;
    font-weight:   800;
    color:         #fff;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       0 4px;
    border:        2px solid var(--topbar-bg);
    pointer-events: none;
}
.notif-badge.hidden { display: none; }

/* Dropdown */

.notif-dropdown.open { display: block; animation: notifIn 0.2s ease both; }
@keyframes notifIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.notif-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px 10px;
    border-bottom:   1px solid var(--border);
}
.notif-header-title { font-size:14px; font-weight:700; color:var(--text-primary); }
.notif-read-all {
    font-size:11px; color:var(--green); cursor:pointer; font-weight:600;
    background:none; border:none; padding:0; font-family:inherit;
}
.notif-read-all:hover { text-decoration:underline; }

.notif-list { max-height:360px; overflow-y:auto; }

.notif-item {
    display:     flex;
    gap:         10px;
    padding:     12px 16px;
    border-bottom: 1px solid var(--border);
    cursor:      pointer;
    transition:  background 0.15s;
    text-decoration: none;
    color:       inherit;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover  { background: var(--bg-3); }
.notif-item.unread { background: var(--green-pale); }

.notif-icon {
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
}
.notif-icon-assigned { background:rgba(0,59,113,0.10); }
.notif-icon-status   { background:rgba(0,166,166,0.10); }
.notif-icon-overdue  { background:rgba(239,68,68,0.10); }

.notif-content { flex:1; min-width:0; }
.notif-title   { font-size:12px; font-weight:700; color:var(--text-primary); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-body    { font-size:11px; color:var(--text-secondary); margin-top:2px; line-height:1.4; }
.notif-time    { font-size:10px; color:var(--text-muted); margin-top:3px; }
.notif-empty   { text-align:center; padding:28px 20px; color:var(--text-muted); font-size:13px; }

.notif-footer {
    padding:10px 16px; text-align:center;
    border-top:1px solid var(--border); background:var(--bg-3);
}
.notif-footer a { font-size:12px; color:var(--green); font-weight:600; text-decoration:none; }
.notif-footer a:hover { text-decoration:underline; }

/* ── Bell + Dropdown ── */
.notif-bell-wrap {
    position:    relative;
    display:     inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.notif-dropdown {
    position:      absolute;
    top:           calc(100% + 8px);
    left:          0;
    right:         auto;
    width:         340px;
    max-width:     calc(100vw - 40px);
    background:    var(--bg-2);
    border:        1px solid var(--border);
    border-radius: 14px;
    box-shadow:    0 8px 32px rgba(0,0,0,0.18);
    z-index:       99999 !important;
    display:       none;
    overflow:      hidden;
}

/* .topbar-actions sits at the flex main-end, which flips with direction:
   left edge of the topbar in RTL, right edge in LTR — so the dropdown
   must expand toward the opposite side in each case to stay on-screen. */
[dir="ltr"] .notif-dropdown {
    left:  auto;
    right: 0;
}

@media (max-width: 560px) {
    .notif-dropdown {
        position:  fixed;
        top:       calc(var(--topbar-height) + 8px);
        left:      12px;
        right:     12px;
        width:     auto;
        max-width: none;
    }
}