/* ═══════════════════════════════════════════════════════════
   CSP-Compliant Utility & Component Classes
   Replaces ALL inline style="" attributes for strict CSP
   ═══════════════════════════════════════════════════════════ */

/* ── Z-Index ──────────────────────────── */
.u-z1 { z-index: 1 }

/* ── Font Sizes ───────────────────────── */
.u-fs-55 { font-size: .55rem }
.u-fs-60 { font-size: .6rem }
.u-fs-65 { font-size: .65rem }
.u-fs-68 { font-size: .68rem }
.u-fs-70 { font-size: .7rem }
.u-fs-72 { font-size: .72rem }
.u-fs-75 { font-size: .75rem }
.u-fs-76 { font-size: .76rem }
.u-fs-78 { font-size: .78rem }
.u-fs-80 { font-size: .8rem }
.u-fs-82 { font-size: .82rem }
.u-fs-84 { font-size: .84rem }
.u-fs-85 { font-size: .85rem }
.u-fs-86 { font-size: .86rem }
.u-fs-88 { font-size: .88rem }
.u-fs-90 { font-size: .9rem }
.u-fs-92 { font-size: .92rem }
.u-fs-95 { font-size: .95rem }
.u-fs-100 { font-size: 1rem }
.u-fs-105 { font-size: 1.05rem }
.u-fs-110 { font-size: 1.1rem }
.u-fs-115 { font-size: 1.15rem }
.u-fs-120 { font-size: 1.2rem }
.u-fs-130 { font-size: 1.3rem }
.u-fs-150 { font-size: 1.5rem }
.u-fs-160 { font-size: 1.6rem }
.u-fs-180 { font-size: 1.8rem }
.u-fs-190 { font-size: 1.9rem }

/* ── Line Heights ─────────────────────── */
.u-lh-1 { line-height: 1 }
.u-lh-tight { line-height: 1.2 }

/* ── Opacity ──────────────────────────── */
.u-opacity-85 { opacity: .85 }
.u-opacity-40 { opacity: .4 }

/* ── Object Fit ───────────────────────── */
.u-obj-cover { object-fit: cover }
.u-obj-contain { object-fit: contain }

/* ── Sizing ───────────────────────────── */
.u-w-5 { width: 5px }
.u-w-50 { width: 50px }
.u-w-fit { width: fit-content }
.u-h-4 { height: 4px }
.u-h-130 { height: 130px }
.u-h-180 { height: 180px }
.u-h-220 { height: 220px }
.u-h-300 { height: 300px }
.u-mh-50 { max-height: 50px }
.u-mh-60 { max-height: 60px }
.u-mh-75vh { max-height: 75vh }
.u-mw-420 { max-width: 420px; width: 100% }
.u-mw-480 { max-width: 480px; width: 100% }
.u-mw-560 { max-width: 560px }
.u-mw-620 { max-width: 620px }
.u-min-w-36 { min-width: 36px }
.u-min-w-50 { min-width: 50px }

/* ── Scroll Containers ───────────────── */
.u-scroll-160 { max-height: 160px; overflow-y: auto }
.u-scroll-250 { max-height: 250px; overflow-y: auto }

/* ── Labels & Text ────────────────────── */
.u-label-sm { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px }
.u-label-xs { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px }
.u-label-xxs { font-size: .55rem; letter-spacing: .5px; text-transform: uppercase }
.u-label-wide { text-transform: uppercase; letter-spacing: 1px }
.u-ls-05 { letter-spacing: .5px }

/* ── Position ─────────────────────────── */
.u-sticky-90 { top: 90px }
.u-pos-tl-12 { top: 12px; left: 12px }
.u-pos-br-12 { bottom: 12px; right: 12px }

/* ── Padding / Margin Utilities ───────── */
.u-pb-2rem { padding-bottom: 2rem }
.u-mt-2 { margin-top: 2px }
.u-p-45 { padding: .4rem .45rem }
.u-pad-45em { padding: .45em 1em }

/* ── Cursor ───────────────────────────── */
.u-pointer { cursor: pointer }

/* ── Line Clamp ───────────────────────── */
.u-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* ── Hidden (JS toggle target) ────────── */
.u-hidden { display: none }

/* ── Color Utilities ──────────────────── */
.u-text-primary { color: var(--primary) }
.u-text-accent { color: var(--accent) }
.u-text-var { color: var(--text) }
.u-bg-surface { background: var(--surface) }
.u-bg-surface-b { background: var(--surface); border-bottom: 1px solid rgba(0,0,0,.06) }
.u-bg-primary-w { background: var(--primary); color: #fff }
.u-shadow-md { box-shadow: var(--shadow-md) }

/* ══════════════════════════════════════════
   Layout Component Classes
   ══════════════════════════════════════════ */

/* ── Footer Brand Logo (_Layout) ──────── */
.footer-brand-logo {
    height: 36px;
    background: #fff;
    padding: 3px 6px;
    border-radius: 6px
}

/* ── Sidebar User Pill (_AdminLayout) ─── */
.sidebar-role-text {
    font-size: .68rem;
    color: rgba(255,255,255,.35)
}
.sidebar-signout {
    color: rgba(255,255,255,.45);
    font-size: .8rem
}

/* ══════════════════════════════════════════
   Dashboard Component Classes
   ══════════════════════════════════════════ */

.dash-icon {
    width: 42px;
    height: 42px;
    font-size: 1.15rem
}
.dash-icon-indigo { background: rgba(99,102,241,.1); color: #6366f1 }
.dash-icon-sky { background: rgba(14,165,233,.1); color: #0ea5e9 }
.dash-icon-amber { background: rgba(245,158,11,.1); color: #f59e0b }
.dash-icon-slate { background: rgba(100,116,139,.1); color: #64748b }

.qi-indigo { background: rgba(99,102,241,.1); color: #6366f1 }
.qi-emerald { background: rgba(16,185,129,.1); color: #10b981 }
.qi-amber { background: rgba(245,158,11,.1); color: #f59e0b }
.qi-rose { background: rgba(244,63,94,.1); color: #f43f5e }

/* ══════════════════════════════════════════
   Database Page Component Classes
   ══════════════════════════════════════════ */

.db-icon {
    width: 48px;
    height: 48px
}
.db-icon-green { background: rgba(34,197,94,.12) }
.db-icon-blue { background: rgba(59,130,246,.12) }
.db-icon-amber { background: rgba(245,158,11,.12) }
.db-icon-red { background: rgba(239,68,68,.12) }

/* ══════════════════════════════════════════
   Notice Category Color System
   ══════════════════════════════════════════ */

.cat-exam { --cat: #e53935; --cat-20: #e5393520; --cat-cc: #e53935cc }
.cat-admission { --cat: #1565c0; --cat-20: #1565c020; --cat-cc: #1565c0cc }
.cat-results { --cat: #f9a825; --cat-20: #f9a82520; --cat-cc: #f9a825cc }
.cat-events { --cat: #00897b; --cat-20: #00897b20; --cat-cc: #00897bcc }
.cat-general { --cat: #5e35b1; --cat-20: #5e35b120; --cat-cc: #5e35b1cc }
.cat-default { --cat: #455a64; --cat-20: #455a6420; --cat-cc: #455a64cc }

.cat-gradient { background: linear-gradient(135deg, var(--cat), var(--cat-cc)) }
.cat-bg { background: var(--cat) }
.cat-bg-light { background: var(--cat-20); color: var(--cat) }
.cat-text { color: var(--cat) }
.cat-bar { width: 5px; background: var(--cat) }
.cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat) }
.cat-stat-badge { background: var(--cat-20); color: var(--cat); min-width: 36px }
.cat-stat-total { background: var(--primary); min-width: 36px }

/* ── Notice Detail Component Classes ──── */
.notice-date {
    min-width: 50px;
    padding: .4rem .45rem
}
.badge-white-20 { background: rgba(255,255,255,.2) }
.badge-white-25 { background: rgba(255,255,255,.25) }
.badge-new-green { background: #e8f5e9; color: #2e7d32 }

/* ══════════════════════════════════════════
   Course Theme Gradient System
   ══════════════════════════════════════════ */

.theme-grad-blue { background: linear-gradient(135deg,#0d47a1,#1976d2) }
.theme-grad-purple { background: linear-gradient(135deg,#4a148c,#7c4dff) }
.theme-grad-orange { background: linear-gradient(135deg,#e65100,#fb8c00) }
.theme-grad-green { background: linear-gradient(135deg,#1b5e20,#66bb6a) }
.theme-grad-red { background: linear-gradient(135deg,#b71c1c,#e57373) }
.theme-grad-teal { background: linear-gradient(135deg,#0277bd,#4fc3f7) }
.theme-grad-indigo { background: linear-gradient(135deg,#1a237e,#5c6bc0) }
.theme-grad-default { background: linear-gradient(135deg,#455a64,#90a4ae) }

/* ── Course Detail Section Icons ──────── */
.detail-icon-box {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}
.detail-icon-36 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem
}

/* ── Course List Component Classes ────── */
.course-icon-42 {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    font-size: 1rem
}
.course-icon-48 {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem
}
.course-icon-72 {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    margin: 0 auto;
    box-shadow: 0 6px 20px rgba(13,71,161,.25)
}
.course-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center
}
.badge-step-num { background: var(--accent); color: #000; font-size: .7rem; font-weight: 800 }
.badge-surface { background: var(--surface); color: var(--text-muted); font-size: .78rem }

/* ── Course Detail Specific ───────────── */
.detail-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    border: 1px solid rgba(255,255,255,.2)
}
.badge-accent { background: var(--accent); color: #000; font-size: .75rem; font-weight: 700 }
.badge-outline-primary {
    background: var(--surface);
    color: var(--primary);
    border: 1px solid rgba(13,71,161,.15);
    font-size: .82rem
}
.bg-grad-amber-detail { background: linear-gradient(135deg,#f9a825,#fdd835); color: #000 }
.bg-grad-teal-detail { background: linear-gradient(135deg,#00695c,#26a69a) }
.bg-grad-purple-detail { background: linear-gradient(135deg,#4a148c,#7c4dff) }
.bg-grad-blue-grey { background: linear-gradient(135deg,#37474f,#78909c) }
.bg-grad-green-detail { background: linear-gradient(135deg,#2e7d32,#66bb6a) }
.bg-grad-orange-detail { background: linear-gradient(135deg,#e65100,#fb8c00) }
.bg-grad-green-dark { background: linear-gradient(135deg,#1b5e20,#43a047) }
.bg-grad-blue-detail { background: linear-gradient(135deg,#0d47a1,#42a5f5) }
.detail-highlight {
    background: rgba(13,71,161,.08);
    color: var(--primary);
    font-size: .82rem;
    font-weight: 600
}

/* ══════════════════════════════════════════
   Programme Gradient System (About Page)
   ══════════════════════════════════════════ */

.prog-grad-0 { background: linear-gradient(135deg,#1565c0,#0d47a1) }
.prog-grad-1 { background: linear-gradient(135deg,#00897b,#00695c) }
.prog-grad-2 { background: linear-gradient(135deg,#6a1b9a,#4a148c) }
.prog-grad-3 { background: linear-gradient(135deg,#ef6c00,#e65100) }
.prog-grad-4 { background: linear-gradient(135deg,#37474f,#263238) }
.prog-grad-5 { background: linear-gradient(135deg,#2e7d32,#1b5e20) }

.prog-icon {
    width: 48px;
    height: 48px
}

/* ══════════════════════════════════════════
   Verification Component Classes
   ══════════════════════════════════════════ */

.verify-icon-64 {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
    background: rgba(13,71,161,.08);
    color: var(--primary)
}
.verify-step-icon {
    width: 32px;
    height: 32px;
    font-size: .78rem;
    background: var(--primary)
}
.verify-section-tag {
    background: rgba(13,71,161,.08);
    color: var(--primary);
    font-size: .7rem;
    padding: .45em 1em
}
.verify-result-bar-ok {
    height: 4px;
    background: linear-gradient(90deg,#198754,#20c997)
}
.verify-result-icon-ok {
    width: 56px;
    height: 56px;
    background: rgba(25,135,84,.1)
}
.verify-result-bar-fail {
    height: 4px;
    background: linear-gradient(90deg,#dc3545,#fd7e14)
}
.verify-result-icon-fail {
    width: 56px;
    height: 56px;
    background: rgba(220,53,69,.1)
}
.verify-tip-bg { background: rgba(25,135,84,.05) }
.verify-tip-bg-alt { background: rgba(13,71,161,.03) }
.verify-tip-bg-fail { background: rgba(13,71,161,.04) }
.u-fs-85-mt2 { font-size: .85rem; margin-top: 2px }
.u-fs-95-mt2 { font-size: .95rem; margin-top: 2px }

/* ══════════════════════════════════════════
   Gallery Component Classes
   ══════════════════════════════════════════ */

.gallery-section-tag {
    background: rgba(13,71,161,.08);
    color: var(--primary);
    font-size: .7rem;
    padding: .45em 1em
}
.gallery-card-img {
    height: 220px;
    position: relative
}
.gallery-album-badge {
    top: 12px;
    left: 12px;
    font-size: .65rem;
    background: rgba(13,71,161,.85);
    letter-spacing: .5px
}
.gallery-count-badge {
    bottom: 12px;
    right: 12px;
    font-size: .68rem
}
.gallery-cta-bg {
    background: linear-gradient(135deg,var(--primary),var(--primary-dark))
}

/* ── Universities Component Classes ───── */
.uni-logo {
    width: 64px;
    height: 64px;
    object-fit: contain
}
.uni-badge {
    width: 64px;
    height: 64px;
    font-size: 0.85rem
}

/* ── Placement Page ───────────────────── */
.placement-thead {
    background: var(--primary);
    color: #fff
}

/* ── Notice Sidebar Ticker ────────────── */
.vticker-header-bg {
    background: linear-gradient(135deg,var(--primary-dark),var(--primary))
}
.vticker-live-badge {
    background: var(--accent);
    color: #000;
    font-size: .6rem
}

/* ── Empty State ──────────────────────── */
.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center
}

/* ── JS Toggle Helpers ────────────────── */
.anim-paused { animation-play-state: paused !important }
.notice-highlight { box-shadow: 0 0 0 3px rgba(13,71,161,.3) }

/* ── Course Detail Table Utilities ────── */
.detail-th-num { letter-spacing: .5px; width: 50px }
.detail-th { letter-spacing: .5px }

/* ══════════════════════════════════════════
   Additional Utilities (CSP inline removal)
   ══════════════════════════════════════════ */

/* ── Z-Index ──────────────────────────── */
.u-z2 { z-index: 2 }

/* ── Opacity ──────────────────────────── */
.u-opacity-95 { opacity: .95 }

/* ── Sizing ───────────────────────────── */
.u-minh-520 { min-height: 520px }
.u-logo-48 { max-height: 48px; max-width: 100% }
.u-h-200 { height: 200px }
.u-wh-80 { width: 80px; height: 80px }
.u-mw-580 { max-width: 580px }

/* ── Background Utilities ─────────────── */
.u-bg-danger-w { background: #dc3545; color: #fff; border: none }
.u-bg-accent-divider { background: #f9a825 }
.u-map-placeholder { height: 320px; background: #e8ecf1 }

/* ── Admissions Step Number ───────────── */
.admissions-step-num { width: 48px; height: 48px; font-size: 1.2rem }

/* ── Contact Social Badges ────────────── */
.contact-social-badge { background: rgba(0,0,0,.05) }
.social-facebook { color: #1877f2 }
.social-instagram { color: #e4405f }
.social-youtube { color: #ff0000 }
.social-linkedin { color: #0a66c2 }
.social-twitter { color: #000 }

/* ── Programme Gradient (Paramedical) ─── */
.prog-grad-6 { background: linear-gradient(135deg,#c62828,#b71c1c) }