/* ═══════════════════════════════════════════════════════════════════════
   SGBIT — Unified Theme v2.0
   Steel Blue (#1B3A5C) + Orange (#E8610A)
   Website · Admin ERP · Student Portal
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL CSS VARIABLES ─────────────────────────────────────────── */
:root {
    /* Brand */
    --t-primary:      #1B3A5C;   /* Dark Steel Blue — navbars, sidebars, footer */
    --t-primary-dk:   #0f2640;   /* Darker — hover, pressed */
    --t-primary-md:   #2d6a9f;   /* Mid Steel Blue — links, sub-headings */
    --t-primary-lt:   #4a90d9;   /* Light Steel Blue — subtle accents */
    --t-accent:       #E8610A;   /* Orange — CTAs, active states, badges */
    --t-accent-hv:    #FF8C42;   /* Orange hover */
    --t-accent-tint:  #FFF3EC;   /* Orange tint — bg chips */
    --t-accent-dk:    #bf4a00;   /* Orange dark — pressed */
    /* Surfaces */
    --t-surface:      #ffffff;
    --t-bg:           #f0f4f8;
    --t-bg-2:         #e8edf4;
    --t-border:       #d0dae7;
    /* Text */
    --t-text:         #1a2b3c;
    --t-text-md:      #364d63;
    --t-muted:        #5f7a96;
    /* State */
    --t-success:      #16a34a;
    --t-success-tint: #dcfce7;
    --t-warning:      #d97706;
    --t-warning-tint: #fef3c7;
    --t-danger:       #dc2626;
    --t-danger-tint:  #fee2e2;
    --t-info:         #0284c7;
    --t-info-tint:    #e0f2fe;
    /* Geometry */
    --t-radius:    8px;
    --t-radius-md: 12px;
    --t-radius-lg: 16px;
    --t-radius-xl: 24px;
    /* Effects */
    --t-shadow:    0 4px 20px rgba(27,58,92,0.10);
    --t-shadow-md: 0 8px 32px rgba(27,58,92,0.14);
    --t-shadow-lg: 0 16px 48px rgba(27,58,92,0.18);
    --t-shadow-orange: 0 8px 24px rgba(232,97,10,0.28);
    --t-transition: all 0.26s cubic-bezier(0.4,0,0.2,1);
    /* Dark mode */
    --t-dark-bg:    #0f1e2e;
    --t-dark-surface: #162234;
    --t-dark-border:  #233349;
}

/* Dark-mode overrides */
[data-theme="dark"] {
    --t-surface:   #162234;
    --t-bg:        #0f1e2e;
    --t-bg-2:      #1a2d42;
    --t-border:    #233349;
    --t-text:      #e2eaf4;
    --t-text-md:   #a8bdd2;
    --t-muted:     #7090b0;
}

/* ── 2. WEB: TOPBAR ──────────────────────────────────────────────────── */
.sgbit-topbar {
    background: linear-gradient(90deg, #0f2640 0%, #1B3A5C 100%) !important;
    color: #FFE0CC !important;
}
.sgbit-topbar a,
.sgbit-topbar span { color: #FFE0CC !important; }
.sgbit-topbar i    { color: #E8610A !important; }
.sgbit-admission-btn {
    border-color: #E8610A !important;
    color: #E8610A !important;
    transition: var(--t-transition) !important;
}
.sgbit-admission-btn:hover {
    background: #E8610A !important;
    color: #fff !important;
}

/* ── 3. WEB: MAIN NAV ────────────────────────────────────────────────── */
.sgbit-nav-wrap,
.sgbit-navbar-inner,
.sticky-navbar { background: #1B3A5C !important; }
.sgbit-navbar-inner a { color: #d8e8f8 !important; }
.sgbit-navbar-inner a:hover { color: #E8610A !important; }
.sgbit-navbar-inner .active > a { color: #E8610A !important; }

/* ── 4. WEB: HERO BANNERS ────────────────────────────────────────────── */
.sgbit-page-hero,
.ph-hero-inner,
.cms-hero-block {
    background: linear-gradient(135deg, #0f2640 0%, #1B3A5C 45%, #2d6a9f 100%) !important;
}
.ph-orb-1 { background: radial-gradient(circle, rgba(232,97,10,.22), transparent 60%) !important; }
.ph-orb-2 { background: radial-gradient(circle, rgba(74,144,217,.18), transparent 60%) !important; }

/* ── 5. WEB: SECTION KICKERS & ACCENTS ──────────────────────────────── */
.sgb-kicker-badge, .section-kicker {
    background: var(--t-accent-tint) !important;
    color: var(--t-accent) !important;
    border-left-color: var(--t-accent) !important;
}
.section-title::after, .sgb-title::after {
    background: var(--t-accent) !important;
}

/* ── 6. WEB: BUTTONS ─────────────────────────────────────────────────── */
.btn-primary, .sgbit-btn-primary {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: #fff !important;
    border-radius: var(--t-radius) !important;
    transition: var(--t-transition) !important;
    box-shadow: 0 4px 14px rgba(232,97,10,0.28) !important;
}
.btn-primary:hover, .sgbit-btn-primary:hover {
    background: var(--t-accent-hv) !important;
    border-color: var(--t-accent-hv) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(232,97,10,0.38) !important;
}
.btn-outline-primary { border-color: var(--t-primary-md) !important; color: var(--t-primary) !important; border-radius: var(--t-radius) !important; }
.btn-outline-primary:hover { background: var(--t-primary) !important; color: #fff !important; }
.btn-outline-orange { border-color: var(--t-accent) !important; color: var(--t-accent) !important; border-radius: var(--t-radius) !important; }
.btn-outline-orange:hover { background: var(--t-accent) !important; color: #fff !important; }

/* ── 7. BACK TO TOP ──────────────────────────────────────────────────── */
.sgbit-back-to-top {
    background: var(--t-accent) !important;
    box-shadow: var(--t-shadow-orange) !important;
}
.sgbit-back-to-top:hover { background: var(--t-accent-dk) !important; }

/* ── 8. FOOTER ───────────────────────────────────────────────────────── */
.footer-main, .sgbit-footer { background: #0f2640 !important; }
.footer-bottom, .sgbit-footer-bottom { background: #091a2e !important; }
.footer-widget-title, .footer-heading { color: #E8610A !important; }
.footer-link a:hover { color: #FF8C42 !important; }

/* ── 9. WEB: STATS COUNTER SECTION ──────────────────────────────────── */
.sgb-stats-section {
    background: linear-gradient(135deg, #1B3A5C 0%, #2d6a9f 60%, #E8610A 100%) !important;
}
.sgb-stats-track { filter: drop-shadow(0 0 0 transparent); }

/* ── 10. GLASSMORPHISM UTILITIES ─────────────────────────────────────── */
.glass-card {
    background: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: var(--t-radius-lg) !important;
    box-shadow: 0 8px 32px rgba(27,58,92,0.2) !important;
}
.glass-dark {
    background: rgba(15,38,64,0.72) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ── 11. SKELETON LOADERS ────────────────────────────────────────────── */
@keyframes tSkeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton {
    border-radius: var(--t-radius) !important;
    background: linear-gradient(90deg, #e8edf4 25%, #d0dae7 50%, #e8edf4 75%) !important;
    background-size: 200% 100% !important;
    animation: tSkeleton 1.5s ease infinite !important;
    color: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
}
.skeleton * { visibility: hidden !important; }
.skeleton-text   { height:16px; border-radius:4px; }
.skeleton-title  { height:24px; border-radius:4px; width:60%; }
.skeleton-avatar { width:48px; height:48px; border-radius:50%; }
.skeleton-card   { height:120px; border-radius: var(--t-radius-lg); }
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1a2d42 25%, #233349 50%, #1a2d42 75%) !important;
    background-size: 200% 100% !important;
}

/* ── 12. PROGRESS RINGS (SVG) ────────────────────────────────────────── */
.progress-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.progress-ring svg { transform:rotate(-90deg); }
.progress-ring__track { fill:none; stroke: #d0dae7; }
.progress-ring__fill  {
    fill:none; stroke: var(--t-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1);
}
.progress-ring__fill.blue  { stroke: var(--t-primary-md); }
.progress-ring__fill.green { stroke: var(--t-success); }
.progress-ring__fill.warn  { stroke: var(--t-warning); }
.progress-ring__label {
    position:absolute; text-align:center; font-weight:800;
    font-size:clamp(0.8rem,1.8vw,1.2rem); color: var(--t-text);
}
.progress-ring__sublabel { font-size:.65rem; color: var(--t-muted); display:block; }

/* ── 13. ANIMATED COUNTER VALUES ────────────────────────────────────── */
[data-counter] { transition: none; }
.counter-animated { display:inline-block; font-variant-numeric: tabular-nums; }

/* ── 14. PAGE TRANSITION ─────────────────────────────────────────────── */
.page-transition-overlay {
    position:fixed; inset:0; z-index:99999;
    background: linear-gradient(135deg, #1B3A5C, #2d6a9f);
    pointer-events:none; opacity:0;
    transition: opacity 0.3s ease;
}
.page-transition-overlay.show { opacity:1; }

@keyframes tFadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.page-loaded main,
.page-loaded .container:first-child { animation: tFadeInUp 0.45s ease both; }

/* ── 15. DARK MODE TOGGLE ────────────────────────────────────────────── */
.theme-toggle-btn {
    width:44px; height:24px; border-radius:12px; border:none;
    background: #d0dae7; cursor:pointer; position:relative; transition: var(--t-transition);
    display:flex; align-items:center; padding:3px;
}
.theme-toggle-btn.dark { background: var(--t-primary-md); }
.theme-toggle-thumb {
    width:18px; height:18px; border-radius:50%; background:#fff;
    transition: var(--t-transition); box-shadow:0 1px 4px rgba(0,0,0,0.2);
    display:flex; align-items:center; justify-content:center; font-size:10px;
}
.theme-toggle-btn.dark .theme-toggle-thumb { transform:translateX(20px); }

/* ── 16. MICRO-INTERACTION TOGGLES ──────────────────────────────────── */
.t-switch {
    appearance:none; width:44px; height:24px; border-radius:12px;
    background:#d0dae7; cursor:pointer; transition:var(--t-transition);
    position:relative;
}
.t-switch::after {
    content:''; position:absolute; top:3px; left:3px;
    width:18px; height:18px; border-radius:50%; background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.2); transition:var(--t-transition);
}
.t-switch:checked { background: var(--t-accent); }
.t-switch:checked::after { left:23px; }

/* ── 17. ADMIN & STUDENT: SMART NOTIFICATION BADGES ─────────────────── */
.t-notif-dot {
    width:8px; height:8px; border-radius:50%;
    display:inline-block; flex-shrink:0;
}
.t-notif-dot.green  { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.5); }
.t-notif-dot.orange { background:#f97316; box-shadow:0 0 6px rgba(249,115,22,.5); }
.t-notif-dot.red    { background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.5); animation: tPulse 1.5s ease infinite; }
.t-notif-dot.blue   { background:#3b82f6; box-shadow:0 0 6px rgba(59,130,246,.5); }
@keyframes tPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.8} }

.t-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:20px; font-size:.73rem; font-weight:700;
    line-height:1.4; white-space:nowrap;
}
.t-badge.orange { background: var(--t-accent-tint); color: var(--t-accent); }
.t-badge.blue   { background: var(--t-info-tint);   color: var(--t-info);   }
.t-badge.green  { background: var(--t-success-tint); color: var(--t-success); }
.t-badge.red    { background: var(--t-danger-tint);  color: var(--t-danger); }
.t-badge.warn   { background: var(--t-warning-tint); color: var(--t-warning); }

/* ── 18. ADMIN: STAT CARDS ───────────────────────────────────────────── */
.t-stat-card {
    background: #fff; border-radius: var(--t-radius-lg);
    padding: 20px 22px; box-shadow: var(--t-shadow);
    border: 1px solid var(--t-border); position:relative; overflow:hidden;
    transition: var(--t-transition);
}
.t-stat-card:hover { transform:translateY(-4px); box-shadow: var(--t-shadow-md); }
.t-stat-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: var(--t-accent);
}
.t-stat-card.blue::before  { background: var(--t-primary-md); }
.t-stat-card.green::before { background: var(--t-success); }
.t-stat-card.warn::before  { background: var(--t-warning); }
.t-stat-card-icon {
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; margin-bottom:14px;
}
.t-stat-card-icon.orange { background: var(--t-accent-tint); color: var(--t-accent); }
.t-stat-card-icon.blue   { background: #e0f0ff; color: var(--t-primary-md); }
.t-stat-card-icon.green  { background: var(--t-success-tint); color: var(--t-success); }
.t-stat-card-icon.warn   { background: var(--t-warning-tint); color: var(--t-warning); }
.t-stat-card-val { font-size:2rem; font-weight:800; color: var(--t-text); line-height:1; margin-bottom:4px; }
.t-stat-card-lbl { font-size:.8rem; color: var(--t-muted); font-weight:500; }
.t-stat-card-trend { font-size:.76rem; font-weight:700; }
.t-stat-card-trend.up   { color: var(--t-success); }
.t-stat-card-trend.down { color: var(--t-danger); }

/* ── 19. DATA TABLES ─────────────────────────────────────────────────── */
.t-table-wrap { border-radius: var(--t-radius-lg); overflow:hidden; box-shadow: var(--t-shadow); }
.t-table { width:100%; border-collapse:collapse; }
.t-table thead tr { background: linear-gradient(90deg, #1B3A5C, #2d6a9f); }
.t-table thead th { color:#fff; padding:13px 16px; font-size:.8rem; font-weight:700; white-space:nowrap; }
.t-table tbody tr { transition: background .16s; border-bottom:1px solid #f1f5f9; }
.t-table tbody tr:hover { background: #FFF3EC !important; }
.t-table tbody tr:hover td:first-child { border-left:3px solid var(--t-accent); }
.t-table td { padding:11px 16px; font-size:.88rem; color: var(--t-text); vertical-align:middle; }
.t-table tbody tr:nth-child(even) td { background:#f8fbff; }

/* ── 20. ADMIN: ANIMATED NAV PILL ────────────────────────────────────── */
.pcoded-navbar .nav-pill-indicator {
    position:absolute; left:10px; right:10px; border-radius:8px;
    background: rgba(232,97,10,0.12); transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    pointer-events:none; z-index:0;
}

/* ── 21. CONFETTI BURST ──────────────────────────────────────────────── */
.confetti-particle {
    position:fixed; pointer-events:none; z-index:99998;
    width:8px; height:8px; border-radius:2px; opacity:0;
}
@keyframes tConfetti {
    0%   { transform:translateY(0) rotate(0deg)   scaleX(1);  opacity:1; }
    80%  { opacity:1; }
    100% { transform:translateY(120vh) rotate(720deg) scaleX(0.4); opacity:0; }
}

/* ── 22. ADMIN: ENHANCED SIDEBAR ─────────────────────────────────────── */
.pcoded-navbar {
    background: linear-gradient(180deg, #0f2640 0%, #1B3A5C 50%, #1e4470 100%) !important;
    box-shadow: 4px 0 32px rgba(15,38,64,.4) !important;
}
.pcoded-navbar .navbar-brand.header-logo {
    background: rgba(0,0,0,.22) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 14px 18px !important;
}
.pcoded-navbar .pcoded-mtext { color: #c4d9f0 !important; font-size:13.5px; font-weight:500; }
.pcoded-navbar .pcoded-micon i { color: #7aadd6 !important; transition: color .2s; }
.pcoded-navbar .nav-item > a {
    border-radius: 8px !important;
    margin: 2px 10px !important;
    transition: var(--t-transition) !important;
    position:relative;
}
.pcoded-navbar .nav-item > a:hover,
.pcoded-navbar .nav-item > a:hover .pcoded-mtext { color:#fff !important; }
.pcoded-navbar .nav-item > a:hover .pcoded-micon i { color:#E8610A !important; }
.pcoded-navbar .nav-item > a:hover { background: rgba(255,255,255,.08) !important; }
.pcoded-navbar .nav-item.active > a,
.pcoded-navbar .nav-item.pcoded-trigger > a {
    background: rgba(232,97,10,.16) !important;
    border-left: 3px solid #E8610A !important;
}
.pcoded-navbar .nav-item.active > a .pcoded-mtext,
.pcoded-navbar .nav-item.pcoded-trigger > a .pcoded-mtext { color:#fff !important; font-weight:600; }
.pcoded-navbar .nav-item.active > a .pcoded-micon i,
.pcoded-navbar .nav-item.pcoded-trigger > a .pcoded-micon i { color:#E8610A !important; }
/* Sub-menu */
.pcoded-navbar .pcoded-submenu { background: rgba(0,0,0,.15) !important; }
.pcoded-navbar .pcoded-submenu li > a {
    border-left: 2px solid rgba(255,255,255,.1) !important;
    margin-left: 28px !important; border-radius: 6px !important;
    transition: var(--t-transition) !important;
}
.pcoded-navbar .pcoded-submenu li.active > a,
.pcoded-navbar .pcoded-submenu li > a:hover {
    border-left-color: #E8610A !important;
    background: rgba(232,97,10,.1) !important;
    color: #fff !important; padding-left:18px !important;
}
/* Sidebar scrollbar */
.pcoded-navbar .scroll-div::-webkit-scrollbar { width:4px; }
.pcoded-navbar .scroll-div::-webkit-scrollbar-thumb { background: rgba(232,97,10,.35); border-radius:4px; }

/* ── 23. ADMIN: HEADER / TOPBAR ──────────────────────────────────────── */
.pcoded-header {
    background: #fff !important;
    box-shadow: 0 2px 24px rgba(27,58,92,.1) !important;
    border-bottom: 2px solid rgba(27,58,92,.08) !important;
}
.pcoded-header .topbar-title { color: #1B3A5C !important; font-weight:700 !important; font-size:15px !important; }
.pcoded-header .navbar-nav .nav-link { color: #3a5878 !important; }
.pcoded-header .navbar-nav .nav-link:hover { color: #E8610A !important; }
.pcoded-header .dropdown-menu .dropdown-item:hover { background: var(--t-accent-tint) !important; color: var(--t-accent) !important; }

/* ── 24. ADMIN: CARDS & CONTENT ──────────────────────────────────────── */
.card {
    border-radius: var(--t-radius-lg) !important;
    box-shadow: var(--t-shadow) !important;
    border: 1px solid var(--t-border) !important;
    transition: var(--t-transition) !important;
}
.card:hover { box-shadow: var(--t-shadow-md) !important; }
.card-header {
    background: linear-gradient(90deg,#1B3A5C,#2d6a9f) !important;
    color: #fff !important; border-bottom:none !important;
    border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0 !important;
    padding: 14px 20px !important; font-weight:700 !important;
}
.card-header h5 { color:#fff !important; margin:0; }

/* ── 25. ADMIN: BUTTONS ──────────────────────────────────────────────── */
.btn-primary { background: var(--t-accent) !important; border-color: var(--t-accent) !important; border-radius:var(--t-radius) !important; }
.btn-primary:hover { background: var(--t-accent-hv) !important; border-color: var(--t-accent-hv) !important; }
.btn-info    { background: var(--t-primary-md) !important; border-color: var(--t-primary-md) !important; border-radius:var(--t-radius) !important; }
.btn-info:hover { background: #1B3A5C !important; }
.btn-success { border-radius: var(--t-radius) !important; }
.btn-danger  { border-radius: var(--t-radius) !important; }
.btn-warning { border-radius: var(--t-radius) !important; }
.btn-secondary { border-radius: var(--t-radius) !important; }

/* ── 26. ADMIN: LOADER ───────────────────────────────────────────────── */
.loader-bg   { background: #0f2640 !important; }
.loader-fill { background: linear-gradient(90deg, #2d6a9f, #E8610A, #FF8C42) !important; }

/* ── 27. FORMS ───────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--t-primary-md) !important;
    box-shadow: 0 0 0 3px rgba(45,106,159,.18) !important;
}
.form-control { border-radius: var(--t-radius) !important; }
.select2-container--default .select2-selection--single { border-radius: var(--t-radius) !important; border-color: var(--t-border) !important; }
.select2-container--default .select2-results__option--highlighted { background-color: var(--t-primary-md) !important; }

/* ── 28. BREADCRUMBS ─────────────────────────────────────────────────── */
.page-header { background: linear-gradient(135deg, #1B3A5C, #2d6a9f) !important; }
.page-header .page-block .breadcrumb-item a { color: #FF8C42 !important; }
.page-header .page-block h5 { color:#fff !important; }
.breadcrumb-item.active { color: rgba(255,255,255,.8) !important; }

/* ── 29. BADGES (admin framework overrides) ──────────────────────────── */
.badge-primary { background: var(--t-accent) !important; }
.badge-info    { background: var(--t-primary-md) !important; }
.badge-warning { background: var(--t-warning) !important; }
.badge-success { background: var(--t-success) !important; }
.badge-danger  { background: var(--t-danger) !important; }

/* ── 30. DATA TABLE ENHANCEMENTS ─────────────────────────────────────── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--t-radius) !important;
    border-color: var(--t-border) !important;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--t-primary-md) !important; }
table.dataTable thead { background: linear-gradient(90deg,#1B3A5C,#2d6a9f) !important; }
table.dataTable thead th { color:#fff !important; }
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after { color:rgba(255,255,255,.6) !important; }
table.dataTable tbody tr:hover { background: #FFF3EC !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--t-accent) !important; color:#fff !important;
    border-color: var(--t-accent) !important; border-radius:6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--t-accent-tint) !important; color: var(--t-accent) !important;
    border-color: var(--t-accent-tint) !important; border-radius:6px !important;
}

/* ── 31. STUDENT PORTAL ──────────────────────────────────────────────── */
.student-stat-ring { display:inline-flex; flex-direction:column; align-items:center; gap:6px; }
.student-welcome-banner {
    background: linear-gradient(135deg, #1B3A5C 0%, #2d6a9f 50%, #E8610A 100%);
    border-radius: var(--t-radius-xl); padding:28px 32px; color:#fff;
    position:relative; overflow:hidden;
}
.student-welcome-banner::before {
    content:''; position:absolute; top:-30%; right:-5%;
    width:220px; height:220px; border-radius:50%;
    background:rgba(255,255,255,.08); pointer-events:none;
}
.student-id-card {
    background: linear-gradient(135deg,#1B3A5C,#E8610A);
    border-radius:16px; padding:24px; color:#fff;
    position:relative; overflow:hidden; min-height:180px;
}

/* ── 32. DARK MODE: ADMIN PANELS ─────────────────────────────────────── */
[data-theme="dark"] .card                 { background: var(--t-dark-surface) !important; border-color: var(--t-dark-border) !important; }
[data-theme="dark"] .pcoded-header        { background: var(--t-dark-surface) !important; border-bottom-color: var(--t-dark-border) !important; }
[data-theme="dark"] .form-control         { background: var(--t-dark-bg); color: #e2eaf4; border-color: var(--t-dark-border); }
[data-theme="dark"] .pcoded-content       { background: var(--t-dark-bg) !important; }
[data-theme="dark"] table.dataTable tbody tr { background: var(--t-dark-surface) !important; }
[data-theme="dark"] table.dataTable tbody tr:nth-child(even) { background: var(--t-dark-bg) !important; }
[data-theme="dark"] table.dataTable tbody tr:hover { background: rgba(232,97,10,.12) !important; }

/* ── 33. MISC ADMIN UI ───────────────────────────────────────────────── */
.pcoded-content { background: #f0f4f8 !important; }
.pcoded-inner-content { padding: 20px !important; }
.page-header { border-radius: var(--t-radius-md) !important; margin-bottom:20px !important; }
.f-w-700 { font-weight:700 !important; }
.text-c-orange { color: var(--t-accent) !important; }
.text-c-blue   { color: var(--t-primary-md) !important; }
/* Select2 highlight */
.select2-container--default .select2-selection--single:focus { border-color: var(--t-primary-md) !important; }

/* ── 34. TOASTR NOTIFICATIONS ────────────────────────────────────────── */
.toast-success { background-color: #16a34a !important; }
.toast-error   { background-color: #dc2626 !important; }
.toast-warning { background-color: #d97706 !important; }
.toast-info    { background-color: var(--t-primary-md) !important; }

/* ── 35. STICKY TOPBAR SHRINK (WEB) ──────────────────────────────────── */
.sgbit-nav-wrap.scrolled {
    padding: 2px 0 !important;
    box-shadow: 0 4px 20px rgba(27,58,92,.18) !important;
    transition: var(--t-transition);
}

/* ── 36. SCROLL REVEAL ANIMATION CLASSES ────────────────────────────── */
.reveal-fade-up   { opacity:0; transform:translateY(28px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal-fade-up.revealed { opacity:1; transform:translateY(0); }
.reveal-fade-up.delay-1 { transition-delay:.1s; }
.reveal-fade-up.delay-2 { transition-delay:.2s; }
.reveal-fade-up.delay-3 { transition-delay:.3s; }

/* ── 37. WEB: PAGE HERO OVERRIDES (new theme) ────────────────────────── */
.sgbit-page-hero { min-height:200px; display:flex; align-items:center; }
.ph-title  { color:#fff !important; }
.ph-sub    { color:rgba(255,255,255,.78) !important; }
.ph-crumb  { color:rgba(255,255,255,.55) !important; }
.ph-crumb a { color:#FF8C42 !important; }

/* ── 38. MOBILE ──────────────────────────────────────────────────────── */
@media(max-width:767px) {
    .t-stat-card-val { font-size:1.5rem; }
    .student-welcome-banner { padding:18px 20px; }
}