/* ================================================================
   Srimad Andavan Arts & Science College — Student Academic Portal
   Design System: Modern Glassmorphism & Deep Midnight Gradient
   Palette: Midnight Indigo (#080c1d) · Deep Navy (#0f172a) · Gold (#eab308) · Emerald (#10b981)
   ================================================================ */

/* ─── 1. Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ─── 2. Design Tokens ─────────────────────────────────────────── */
:root {
    /* Brand palette */
    --navy:       #0f172a;
    --navy-dark:  #080c1d;
    --navy-main:  #0f172a;
    --navy-mid:   #1e293b;
    --navy-light: #334155;
    --navy-card:  #141d36;
    --navy-accent:#1e293b;
    --indigo-glow:#4f46e5;
    --crimson:    #9f1239;
    --gold:       #d97706;
    --gold-light: #fef08a;

    /* Surface */
    --card-bg:    #ffffff;
    --notice-bg:  #f8fafc;
    --form-bg:    #ffffff;

    /* Text */
    --t-head:     #0f172a;
    --t-body:     #334155;
    --t-muted:    #64748b;
    --t-light:    #94a3b8;

    /* Borders */
    --b-subtle:   #e2e8f0;
    --b-focus:    #6366f1;

    /* Status */
    --ok:         #10b981;
    --warn:       #f59e0b;
    --err:        #f43f5e;
    --info-blue:  #3b82f6;

    /* Radii */
    --r-card:     24px;
    --r-input:    12px;
    --r-btn:      12px;

    /* Transitions */
    --ease: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── 3. Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
    font-size: 16px;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: var(--navy-dark);
}

/* ─── 4. Page Background & Ambient Glow ───────────────────────── */
.page-bg {
    min-height: 100vh;
    height: auto;
    background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0f172a 45%, #080c1d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    position: relative;
    box-sizing: border-box;
}

/* Canvas background for interactive particles */
#canvas-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Glowing Ambient Orbs */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

.glow-orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation: orbPulse 14s ease-in-out infinite alternate;
}

.glow-orb-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.22) 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation: orbPulse 18s ease-in-out infinite alternate-reverse;
}

@keyframes orbPulse {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.45; }
    50%  { transform: translate(30px, 20px) scale(1.1); opacity: 0.65; }
    100% { transform: translate(-20px, 40px) scale(0.95); opacity: 0.45; }
}

/* Top thin animated accent bar — active only during server connection */
.top-accent-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3.5px;
    background: linear-gradient(90deg,
        #4f46e5 0%,
        var(--gold) 25%,
        #38bdf8 50%,
        var(--gold) 75%,
        #4f46e5 100%);
    background-size: 200% 100%;
    animation: shimmerBar 3.5s linear infinite;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.top-accent-bar.active {
    opacity: 1;
    visibility: visible;
}

@keyframes shimmerBar {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── 5. Portal Wrapper ────────────────────────────────────────── */
.portal-wrapper {
    width: 100%;
    max-width: 560px;
    position: relative;
    z-index: 10;
}

/* ─── 6. Main Login Card ────────────────────────────────────────── */
.login-card {
    background: #ffffff;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 25px 65px -10px rgba(0, 0, 0, 0.6),
        0 10px 30px -5px rgba(15, 23, 42, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
    box-shadow:
        0 0 0 1px rgba(234, 179, 8, 0.3),
        0 30px 80px -10px rgba(0, 0, 0, 0.7),
        0 15px 35px -5px rgba(79, 70, 229, 0.25);
}

/* ─── 7. Card Header — Institution Branding ───────────────────────── */
.card-header {
    background: linear-gradient(135deg, #090d1f 0%, #0f172a 45%, #1e1b4b 100%);
    padding: 24px 34px 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.card-header::after {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.16) 0%, transparent 70%);
    pointer-events: none;
}

.institution-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    position: relative;
    z-index: 2;
}

/* Circular Logo Badge */
.logo-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    border: 2.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 0 0 5px rgba(234, 179, 8, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.4);
    padding: 0;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.logo-circle:hover {
    transform: scale(1.08) rotate(3deg);
    box-shadow:
        0 0 0 7px rgba(234, 179, 8, 0.3),
        0 10px 24px rgba(0, 0, 0, 0.5);
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    z-index: 2;
}

.brand-trust {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.95;
}

.brand-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.38rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.brand-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;
}

.tag-badge {
    background: rgba(234, 179, 8, 0.15);
    color: var(--gold-light);
    border: 1px solid rgba(234, 179, 8, 0.4);
    padding: 1px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Header Divider */
.header-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 0;
    position: relative;
    z-index: 2;
}

.divider-label {
    position: relative;
    top: -18px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(99, 102, 241, 0.15));
    padding: 5px 22px;
    border-radius: 20px;
    border: 1px solid rgba(234, 179, 8, 0.45);
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #ffffff;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ─── 8. Card Body — Centered Layout ───────────────────────────── */
.card-body {
    display: block;
    min-height: 400px;
}

/* ─── 9. Notice Pane (left) ────────────────────────────────────── */
.notice-pane {
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.notice-pane::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
    pointer-events: none;
}

.pane-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
    z-index: 2;
}

.heading-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--t-head);
}

.live-dot-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f43f5e;
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
    animation: pulseRing 1.8s infinite;
    flex-shrink: 0;
}

@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    position: relative;
    z-index: 2;
}

.notice-entry {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: var(--ease);
    position: relative;
    overflow: hidden;
    cursor: default;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.notice-entry::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
}

.notice-entry.urgent::before { background: linear-gradient(180deg, #f43f5e, #be123c); }
.notice-entry.exam::before   { background: linear-gradient(180deg, #f59e0b, #d97706); }
.notice-entry.info::before   { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }

.notice-entry.urgent { border-left-color: #fecdd3; }
.notice-entry.exam   { border-left-color: #fef08a; }
.notice-entry.info   { border-left-color: #bfdbfe; }

.notice-entry:hover {
    transform: translateY(-2px) translateX(4px);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.notice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ntag {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ntag .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.ntag-urgent { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.ntag-exam   { background: #fefce8; color: #d97706; border: 1px solid #fef08a; }
.ntag-info   { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

.notice-date {
    font-size: 0.7rem;
    color: var(--t-light);
    font-weight: 500;
}

.notice-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--t-head);
    line-height: 1.35;
}

.notice-desc {
    font-size: 0.78rem;
    color: var(--t-muted);
    line-height: 1.5;
}

.notice-desc code {
    background: #f1f5f9;
    color: #475569;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.pane-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--t-muted);
    font-weight: 500;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    position: relative;
    z-index: 2;
}

.pane-footer svg { color: var(--ok); }

/* ─── 10. Form Pane (right) ────────────────────────────────────── */
.form-pane {
    background: #ffffff;
    padding: 24px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    position: relative;
}

.form-heading h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--t-head);
    letter-spacing: -0.5px;
    margin-bottom: 3px;
    line-height: 1.15;
}

.form-heading p {
    font-size: 0.8rem;
    color: var(--t-muted);
    font-weight: 400;
}

form { display: flex; flex-direction: column; gap: 14px; }

/* Field Block */
.field-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--t-head);
    letter-spacing: 0.1px;
}

.field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dob-hint {
    font-size: 0.68rem;
    font-weight: 700;
    background: #fefce8;
    color: #b45309;
    padding: 2px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    border: 1px solid #fef08a;
}

/* Input Wrapper */
.field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.field-wrap input {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 46px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: var(--r-input);
    color: var(--t-head);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    outline: none;
    transition: var(--ease);
}

.field-wrap input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.field-wrap input:focus {
    background: #ffffff;
    border-color: var(--indigo-glow);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* Valid State */
.field-wrap input.is-valid {
    border-color: var(--ok);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

/* Error State */
.field-block.has-error .field-wrap input {
    border-color: var(--err);
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.12);
}

.field-ico {
    position: absolute;
    left: 15px;
    color: #94a3b8;
    pointer-events: none;
    transition: var(--ease);
}

.field-wrap input:focus ~ .field-ico,
.field-wrap:focus-within .field-ico {
    color: var(--indigo-glow);
}

.tick-ico {
    position: absolute;
    right: 46px;
    opacity: 0;
    transform: scale(0.7);
    transition: var(--ease);
    pointer-events: none;
}

.tick-ico.visible {
    opacity: 1;
    transform: scale(1);
}

.eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 8px;
    transition: var(--ease);
    z-index: 5;
}

.eye-btn svg {
    pointer-events: none;
}

.eye-btn:hover { color: var(--t-head); background: #f1f5f9; }

/* Field Errors */
.field-error {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--err);
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.field-error.active,
.field-block.has-error .field-error {
    display: flex !important;
}

/* Helpers Row */
.helpers-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -2px;
}

.remember-label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}

.remember-check {
    display: none;
}

.remember-custom {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}

.remember-check:checked + .remember-custom {
    background: var(--navy-main);
    border-color: var(--navy-main);
}

.remember-check:checked + .remember-custom::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.remember-text {
    font-size: 0.82rem;
    color: var(--t-body);
    font-weight: 500;
}

.help-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--indigo-glow);
    text-decoration: none;
    transition: var(--ease);
    display: flex;
    align-items: center;
    gap: 4px;
}

.help-link:hover { color: var(--crimson); text-decoration: underline; }

/* Submit Button */
.submit-btn {
    height: 48px;
    width: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    border: none;
    border-radius: var(--r-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px -3px rgba(15, 23, 42, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: var(--ease);
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 70%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transition: left 0.6s ease;
}

.submit-btn:hover::before { left: 160%; }

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -4px rgba(79, 70, 229, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

.btn-label { position: relative; z-index: 2; }

.btn-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Security Badges Row */
.security-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--t-muted);
    font-weight: 600;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.security-row svg { color: var(--ok); flex-shrink: 0; }
.security-row .sep { color: #cbd5e1; }

/* ─── 11. Card Footer ──────────────────────────────────────────── */
.card-footer {
    background: #f8fafc;
    border-top: 1.5px solid #e2e8f0;
    padding: 16px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.74rem;
    color: var(--t-muted);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a {
    color: var(--indigo-glow);
    text-decoration: none;
    font-weight: 700;
    transition: var(--ease);
    padding: 2px 8px;
    border-radius: 6px;
}

.footer-links a:hover {
    color: var(--crimson);
    background: #f1f5f9;
}

.footer-links .sep { color: #cbd5e1; }

/* ─── 12. Toast Notification ──────────────────────────────────── */
.toast {
    position: fixed;
    top: 28px;
    right: 28px;
    background: #ffffff;
    border: 1px solid var(--b-subtle);
    border-radius: var(--r-input);
    padding: 16px 24px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.15);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-16px);
    pointer-events: none;
    transition: var(--ease);
}

.toast.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.toast-content { display: flex; align-items: center; gap: 12px; }

.toast-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.toast.error .toast-icon { background: var(--err); box-shadow: 0 0 8px var(--err); }
.toast.success .toast-icon { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.toast-message {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--t-head);
}

/* ─── 13. Help Modal Dialog ────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal.active { opacity: 1; pointer-events: auto; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 29, 0.7);
    backdrop-filter: blur(10px);
}

.modal-box {
    background: #ffffff;
    border-radius: var(--r-card);
    width: 100%;
    max-width: 500px;
    padding: 32px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.94);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.modal.active .modal-box { transform: scale(1); }

/* ── Custom Confirm Dialog Box ── */
.confirm-dialog-box {
    max-width: 440px;
    padding: 28px 24px;
    text-align: center;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confirm-dialog-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.confirm-dialog-icon.warning {
    background: #fef3c7;
    color: #d97706;
    box-shadow: 0 0 0 8px #fef9c3;
}

.confirm-dialog-box h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.confirm-dialog-box p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #475569;
    margin-bottom: 22px;
}

.confirm-dialog-box p strong {
    color: #d97706;
}

.confirm-dialog-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.btn-dialog-secondary {
    flex: 1;
    padding: 11px 18px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-dialog-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-dialog-primary {
    flex: 1.2;
    padding: 11px 18px;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    border: none;
    color: #ffffff;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    transition: all 0.2s ease;
}

.btn-dialog-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

/* =========================================================
   CUSTOM SWEETALERT-STYLE POPUP
   ========================================================= */
.swal-custom-box {
    max-width: 440px;
    padding: 32px 28px;
    text-align: center;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.animate-swal-pop {
    animation: swalPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes swalPop {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.swal-icon-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.swal-icon-circle.success {
    background: #ecfdf5;
    box-shadow: 0 0 0 10px #f0fdf4;
}

/* Animated Checkmark SVG */
.swal-circle {
    stroke: #10b981;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: strokeCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.swal-check {
    stroke: #10b981;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: strokeCheck 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes strokeCircle {
    100% { stroke-dashoffset: 0; }
}

@keyframes strokeCheck {
    100% { stroke-dashoffset: 0; }
}

.swal-custom-box h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px 0;
}

.swal-custom-box p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 16px 0;
}

.swal-details-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 4px;
}

.swal-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.swal-tag i {
    font-size: 0.85rem;
    color: #10b981;
}

.swal-btn-proceed {
    width: 100%;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    color: #ffffff;
}

.swal-btn-proceed:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--b-subtle);
    margin-bottom: 20px;
}

.modal-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--navy-main);
}

.modal-head-title svg { color: var(--indigo-glow); }

.modal-head h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--t-head);
}

.modal-close {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--t-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}

.modal-close:hover { background: #e2e8f0; color: var(--t-head); }

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.help-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: var(--ease);
}

.help-card:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.help-card-icon {
    font-size: 1.5rem;
    line-height: 1;
    background: #ffffff;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.help-card-content h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--t-head);
    margin-bottom: 4px;
}

.help-card-content p {
    font-size: 0.8rem;
    color: var(--t-muted);
    line-height: 1.45;
}

.help-card-content code {
    background: #e2e8f0;
    color: var(--navy-main);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* ─── 14. Responsive Layout ────────────────────────────────────── */
@media (max-width: 900px) {
    .card-body {
        grid-template-columns: 1fr;
    }
    .notice-pane {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 26px 24px;
    }
    .form-pane {
        padding: 30px 24px;
    }
    .card-header {
        padding: 26px 24px 0;
    }
    .brand-name {
        font-size: 1.3rem;
    }
    .logo-circle {
        width: 68px;
        height: 68px;
    }
    .card-footer {
        padding: 14px 24px;
        flex-direction: column;
        text-align: center;
    }
}
}

/* ─── 15. Dashboard Styles (light academic) ────────────────────── */
.dashboard-container {
    width: 100%;
    max-width: 880px;
}

.dashboard-card {
    background: #ffffff;
    border-radius: var(--r-card);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    overflow: hidden;
}

.dashboard-header {
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.student-profile { display: flex; align-items: center; gap: 14px; }

.avatar-badge {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem; font-weight: 800;
    color: var(--navy);
    border: 2px solid rgba(255,255,255,0.15);
}

.profile-text h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}

.admission-label { font-size: 0.78rem; color: #94a3b8; }

.logout-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--r-input);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.83rem; font-weight: 600;
    transition: var(--ease);
}

.logout-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 30px 32px;
}

.db-widget {
    background: #f9fafb;
    border: 1.5px solid var(--b-subtle);
    border-radius: 14px;
    padding: 22px;
    transition: var(--ease);
    min-height: 190px;
    display: flex; flex-direction: column; justify-content: space-between;
}

.db-widget:hover {
    background: #ffffff;
    border-color: var(--navy-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13,27,62,0.06);
}

.widget-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }

.widget-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}

.attendance-icon { background: rgba(21,128,61,0.08); color: var(--ok); }
.fee-icon { background: rgba(30,58,114,0.08); color: var(--navy-light); }
.exam-icon { background: rgba(139,0,0,0.07); color: var(--crimson); }

.widget-header h3 { font-family: 'Outfit', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--t-head); }
.widget-contents  { display: flex; flex-direction: column; }

.fee-amount { display: flex; align-items: baseline; gap: 2px; margin-bottom: 10px; }
.fee-amount .currency { font-size: 1.1rem; font-weight: 600; color: var(--t-body); }
.fee-amount .value { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--navy); }

.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 800;
    padding: 4px 12px; border-radius: 20px; margin-bottom: 8px;
}

.status-paid { background: rgba(21,128,61,0.1); color: var(--ok); }
.status-paid .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.status-date { font-size: 0.72rem; color: var(--t-light); font-weight: 500; }

.circular-chart { display: block; margin: 0 auto; max-width: 78px; max-height: 78px; }
.circle-bg { fill: none; stroke: #e2e8f0; stroke-width: 3.2; }
.circle { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.circular-chart.green .circle { stroke: var(--ok); }
.percentage { fill: var(--t-head); font-family: 'Outfit', sans-serif; font-size: 0.55em; font-weight: 800; text-anchor: middle; }
.status-summary { font-size: 0.74rem; color: var(--t-body); margin-top: 8px; align-self: center; font-weight: 600; }

/* ─── 15. Shake ────────────────────────────────────────────────── */
.shake-element {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%,60%  { transform: translateX(-6px); }
    40%,80%  { transform: translateX(6px); }
}

/* ─── 16. Utilities ────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── 17. Responsive ───────────────────────────────────────────── */
@media (max-width: 820px) {
    .card-body {
        grid-template-columns: 1fr;
    }

    .notice-pane {
        border-right: none;
        border-bottom: 1px solid var(--b-subtle);
        padding: 24px 24px;
    }

    .form-pane {
        padding: 30px 24px;
    }

    .institution-brand {
        flex-direction: row;
    }

    .brand-name { font-size: 1.1rem; }

    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .card-header { padding: 18px 16px 0; }
    .institution-brand { gap: 10px; }
    .logo-circle { width: 50px; height: 50px; }
    .brand-name { font-size: 0.95rem; }
    .notice-pane { display: none; }
    .form-pane { padding: 20px 16px; }
    .card-footer { flex-direction: column; align-items: flex-start; gap: 5px; }
    .page-bg { padding: 16px 10px; }
    .portal-wrapper { max-width: 100%; margin: auto 0; }
    .login-card { border-radius: 18px; }
    .field-wrap input { padding: 10px 12px 10px 38px; font-size: 0.88rem; }
}

/* ================================================================
   Student Corner Dashboard Layout & View Styling
   ================================================================ */

.dashboard-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #f8fafc;
}

/* Sidebar navigation */
.sidebar-nav {
    width: 270px;
    background: linear-gradient(180deg, #090d1f 0%, #0f172a 60%, #1e1b4b 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.35);
    position: relative;
}

.sidebar-brand {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
}

.brand-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border: 1.5px solid #f59e0b;
    border-radius: 50%;
    background: #ffffff;
    padding: 2px;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
    transition: transform 0.3s ease;
}

.brand-logo img:hover {
    transform: scale(1.08) rotate(4deg);
}

.brand-info h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.2px;
}

.brand-info span {
    font-size: 0.62rem;
    font-weight: 800;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.sidebar-close-btn {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}

.sidebar-close-btn:hover {
    background: rgba(244, 63, 94, 0.2);
    color: #f43f5e;
}

.sidebar-profile {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 8px 10px 2px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #d97706 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.nav-profile-details {
    overflow: hidden;
}

.nav-profile-details h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nav-profile-details span {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
}

.sidebar-menu-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
}

/* Custom Scrollbar for Menu */
.sidebar-menu-wrapper::-webkit-scrollbar {
    width: 3px;
}
.sidebar-menu-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.sidebar-accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-accordion-group {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.menu-accordion-group.permanent-group {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(245, 158, 11, 0.2);
}

.menu-accordion-group:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #94a3b8;
    transition: color 0.2s ease, background 0.2s ease;
}

.accordion-header.permanent-header {
    cursor: default;
    color: var(--gold-light);
    background: rgba(245, 158, 11, 0.06);
    user-select: none;
}

.accordion-header:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.accordion-header.permanent-header:hover {
    color: var(--gold-light);
    background: rgba(245, 158, 11, 0.06);
}

.accordion-header.open {
    color: var(--gold-light);
    background: rgba(245, 158, 11, 0.08);
}

.accordion-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.permanent-badge {
    display: flex;
    align-items: center;
    color: var(--gold-light);
}

.accordion-chevron {
    color: #64748b;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    flex-shrink: 0;
}

.accordion-header:hover .accordion-chevron {
    color: #cbd5e1;
}

.accordion-header.open .accordion-chevron {
    transform: rotate(180deg);
    color: var(--gold-light);
}

.accordion-submenu {
    list-style: none;
    padding: 4px 8px 8px 8px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.accordion-submenu li {
    width: 100%;
}

.sidebar-menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.sidebar-link svg {
    color: #64748b;
    transition: transform 0.25s ease, color 0.22s ease;
    flex-shrink: 0;
}

.sidebar-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

.sidebar-link:hover svg {
    color: #818cf8;
    transform: scale(1.1);
}

/* Active State Clean Modern Pill */
.sidebar-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(79, 70, 229, 0.2) 100%);
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    font-weight: 700;
}

.sidebar-link.active svg {
    color: #818cf8;
}

/* Main Content Wrapper */
.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-nav-bar {
    height: 65px;
    background: #ffffff;
    border-bottom: 1.5px solid var(--b-subtle);
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    position: relative;
}

.top-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: var(--navy);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.page-title-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
}

.top-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.notification-wrap {
    position: relative;
}

.icon-toolbar-btn {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-body);
    cursor: pointer;
    transition: var(--ease);
    position: relative;
}

.icon-toolbar-btn:hover {
    background: #e2e8f0;
    color: var(--navy);
}

.pulse-marker {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--err);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ffffff;
}

.notification-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    width: 300px;
    background: #ffffff;
    border: 1px solid var(--b-subtle);
    border-radius: var(--r-input);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow: hidden;
}

.notif-head {
    background: var(--notice-bg);
    padding: 12px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 1px solid var(--b-subtle);
}

.notif-list {
    list-style: none;
    max-height: 250px;
    overflow-y: auto;
}

.notif-list li {
    padding: 12px 16px;
    border-bottom: 1px solid var(--b-subtle);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.76rem;
    color: var(--t-body);
    transition: var(--ease);
}

.notif-list li:hover {
    background: #f8fafc;
}

.notif-list li.urgent {
    border-left: 3px solid var(--err);
}

.notif-list li strong {
    color: var(--t-head);
    font-weight: 700;
}

.notif-list li span {
    font-size: 0.65rem;
    color: var(--t-light);
}

.live-clock-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.live-clock-badge svg {
    color: #6366f1;
    flex-shrink: 0;
}

.live-clock-badge .clock-date {
    color: #64748b;
    font-weight: 500;
}

.live-clock-badge .clock-sep {
    color: #cbd5e1;
    font-weight: 400;
}

.live-clock-badge .clock-time {
    color: #0f172a;
    font-weight: 700;
}

.session-timeout-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.73rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 20px;
    letter-spacing: 0.2px;
    transition: var(--ease);
}

.session-timeout-indicator .session-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    animation: livePulse 2s infinite ease-in-out;
}

.session-timeout-indicator.timer-warning {
    background: #fffbeb;
    border-color: #fef08a;
    color: #b45309;
}

.session-timeout-indicator.timer-warning .session-pulse {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.session-timeout-indicator.timer-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
    animation: timerAlertPulse 1s infinite alternate;
}

.session-timeout-indicator.timer-danger .session-pulse {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
}

@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes timerAlertPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.02); }
}

.quick-secure-logout {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    color: #e11d48;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.quick-secure-logout:hover {
    background: #e11d48;
    border-color: #e11d48;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
    transform: translateY(-1px);
}

.main-content-scroll {
    flex: 1;
    overflow-y: auto;
}

.main-content-padding {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* ──────────────────────────────────────────
   Dashboard Home Pane Components
   ────────────────────────────────────────── */
.welcome-jumbotron {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 14px;
    padding: 18px 24px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 18px rgba(15,23,42,0.10);
    position: relative;
    overflow: hidden;
}

.jumbo-top-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.academic-sem-badge {
    font-size: 0.68rem;
    font-weight: 800;
    background: #d97706;
    color: #ffffff;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 0.6px;
    display: inline-block;
    margin-bottom: 0;
    text-transform: uppercase;
}

.jumbo-dept-tag {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.4px;
}

.jumbo-details h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    letter-spacing: -0.3px;
}

.jumbo-details p {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #cbd5e1;
    font-weight: 400;
    max-width: 540px;
    margin: 0;
}

.jumbo-graphics {
    display: flex;
    justify-content: center;
    align-items: center;
}

.jumbo-illustrator {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.08);
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    letter-spacing: 1px;
}

.dashboard-banner-alert {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* 5 Dynamic Banner Color Palettes (Light Mode) */
.dashboard-banner-alert.color-amber {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}
.dashboard-banner-alert.color-amber .alert-banner-icon { color: #d97706; }
.dashboard-banner-alert.color-amber strong { color: #78350f; }

.dashboard-banner-alert.color-blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}
.dashboard-banner-alert.color-blue .alert-banner-icon { color: #2563eb; }
.dashboard-banner-alert.color-blue strong { color: #1e3a8a; }

.dashboard-banner-alert.color-emerald {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
    color: #065f46;
}
.dashboard-banner-alert.color-emerald .alert-banner-icon { color: #059669; }
.dashboard-banner-alert.color-emerald strong { color: #064e3b; }

.dashboard-banner-alert.color-rose {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-left: 4px solid #f43f5e;
    color: #9f1239;
}
.dashboard-banner-alert.color-rose .alert-banner-icon { color: #e11d48; }
.dashboard-banner-alert.color-rose strong { color: #881337; }

.dashboard-banner-alert.color-purple {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-left: 4px solid #a855f7;
    color: #6b21a8;
}
.dashboard-banner-alert.color-purple .alert-banner-icon { color: #9333ea; }
.dashboard-banner-alert.color-purple strong { color: #581c87; }

/* 5 Dynamic Banner Color Palettes (Dark Mode) */
:root.dark-theme .dashboard-banner-alert.color-amber {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    border-left: 4px solid #f59e0b !important;
    color: #fde68a !important;
}
:root.dark-theme .dashboard-banner-alert.color-amber strong { color: #fbbf24 !important; }
:root.dark-theme .dashboard-banner-alert.color-amber .alert-banner-icon { color: #f59e0b !important; }

:root.dark-theme .dashboard-banner-alert.color-blue {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    border-left: 4px solid #3b82f6 !important;
    color: #bfdbfe !important;
}
:root.dark-theme .dashboard-banner-alert.color-blue strong { color: #60a5fa !important; }
:root.dark-theme .dashboard-banner-alert.color-blue .alert-banner-icon { color: #3b82f6 !important; }

:root.dark-theme .dashboard-banner-alert.color-emerald {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    border-left: 4px solid #10b981 !important;
    color: #a7f3d0 !important;
}
:root.dark-theme .dashboard-banner-alert.color-emerald strong { color: #34d399 !important; }
:root.dark-theme .dashboard-banner-alert.color-emerald .alert-banner-icon { color: #10b981 !important; }

:root.dark-theme .dashboard-banner-alert.color-rose {
    background: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.25) !important;
    border-left: 4px solid #f43f5e !important;
    color: #fecdd3 !important;
}
:root.dark-theme .dashboard-banner-alert.color-rose strong { color: #fb7185 !important; }
:root.dark-theme .dashboard-banner-alert.color-rose .alert-banner-icon { color: #f43f5e !important; }

:root.dark-theme .dashboard-banner-alert.color-purple {
    background: rgba(168, 85, 247, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.25) !important;
    border-left: 4px solid #a855f7 !important;
    color: #e9d5ff !important;
}
:root.dark-theme .dashboard-banner-alert.color-purple strong { color: #c084fc !important; }
:root.dark-theme .dashboard-banner-alert.color-purple .alert-banner-icon { color: #a855f7 !important; }

.alert-banner-icon {
    flex-shrink: 0;
    color: #d97706;
    display: flex;
    align-items: center;
}

.dashboard-banner-alert strong {
    color: #78350f;
    font-weight: 700;
}

.counters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.counter-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.counter-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.cc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.cc-header .bg-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-green { background: #ecfdf5; color: #059669; }
.color-crimson { background: #fff1f2; color: #e11d48; }
.color-gold { background: #fffbeb; color: #d97706; }
.color-navy { background: #eff6ff; color: #2563eb; }

.cc-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    margin: 8px 0 4px;
    line-height: 1.2;
}

.cc-label {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.text-success { color: #059669; }
.text-warning { color: #d97706; }
.text-danger  { color: #dc2626; }
.text-info    { color: #2563eb; }
.text-primary { color: #475569; }

.row-panels-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.info-card-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.05);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.info-card-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.info-card-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.info-card-box:hover::before {
    opacity: 1;
}

.transport-showcase-card:hover::before {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
}

.mentor-showcase-card:hover::before {
    background: linear-gradient(90deg, #818cf8, #a855f7);
}

.icb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.icb-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icb-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.info-card-box:hover .icb-icon-badge {
    transform: scale(1.06);
}

.transport-badge {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(37, 99, 235, 0.12));
    color: #0284c7;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.mentor-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.12));
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.icb-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.25;
}

.icb-subtitle {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    display: block;
    margin-top: 2px;
}

/* Premium Status Tags */
.premium-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.premium-status-tag .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.status-active .status-dot { background: #10b981; }

.status-assigned {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.25);
}
.status-assigned .status-dot { background: #6366f1; }

.status-inactive, .status-pending {
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.status-inactive .status-dot, .status-pending .status-dot { background: #94a3b8; }

/* Info Tiles Grid */
.info-tiles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.info-tile-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.info-tile-item:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.iti-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.route-icon {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.point-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.pass-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.faculty-icon {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.dept-icon {
    background: rgba(168, 85, 247, 0.12);
    color: #7c3aed;
}

.cabin-icon {
    background: rgba(236, 72, 153, 0.12);
    color: #db2777;
}

.iti-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.iti-label {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.iti-value {
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.highlight-green {
    color: #059669;
    font-weight: 700;
}

.highlight-purple {
    color: #4338ca;
    font-weight: 800;
}

/* Empty State Card */
.info-empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}

.empty-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.empty-text h6 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 2px 0;
}

.empty-text p {
    font-size: 0.74rem;
    color: #64748b;
    margin: 0;
    line-height: 1.35;
}

/* Dark Mode Overrides for Showcase Cards */
:root.dark-theme .info-card-box {
    background: #131d36 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

:root.dark-theme .info-card-box:hover {
    border-color: rgba(99, 102, 241, 0.35) !important;
    background: #162240 !important;
}

:root.dark-theme .icb-title {
    color: #f8fafc !important;
}

:root.dark-theme .icb-subtitle {
    color: #94a3b8 !important;
}

:root.dark-theme .info-tile-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

:root.dark-theme .info-tile-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

:root.dark-theme .iti-label {
    color: #94a3b8 !important;
}

:root.dark-theme .iti-value {
    color: #f8fafc !important;
}

:root.dark-theme .highlight-purple {
    color: #a5b4fc !important;
}

:root.dark-theme .highlight-green {
    color: #6ee7b7 !important;
}

:root.dark-theme .info-empty-state {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

:root.dark-theme .empty-icon-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #64748b !important;
}

:root.dark-theme .empty-text h6 {
    color: #e2e8f0 !important;
}

:root.dark-theme .empty-text p {
    color: #94a3b8 !important;
}

.badge-status-pill {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
}

.badge-green { background: #e6f4ea; color: var(--ok); }
.badge-red { background: #fce8e6; color: var(--err); }
.badge-gold { background: #fffbeb; color: var(--gold); }

/* ──────────────────────────────────────────
   Profile View Components
   ────────────────────────────────────────── */
.profile-page-card {
    background: #ffffff;
    border: 1px solid var(--b-subtle);
    border-radius: var(--r-card);
    overflow: hidden;
}

.profile-header-banner {
    height: 120px;
    background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
    border-bottom: 3.5px solid var(--gold);
}

.profile-content-wrap {
    padding: 30px;
    position: relative;
    text-align: center;
    margin-top: -65px;
}

.profile-main-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border: 4px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0 auto 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.profile-basics h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}

.profile-basics p {
    font-size: 0.86rem;
    color: var(--t-muted);
    font-weight: 500;
    margin-bottom: 8px;
}

.profile-role-tag {
    font-size: 0.68rem;
    font-weight: 700;
    background: #f1f5f9;
    color: var(--navy-light);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid var(--b-subtle);
    margin-bottom: 25px;
}

.details-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 15px;
    text-align: left;
}

.profile-section-heading {
    text-align: left;
    margin-top: 15px;
    margin-bottom: 5px;
    border-top: 1px solid #f1f5f9;
    padding-top: 18px;
}

.profile-section-heading h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-section-heading h5 svg {
    color: #6366f1;
}

.profile-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 4px;
}

.detail-group h6 {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--t-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
}

.detail-group span {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--t-head);
}

/* ──────────────────────────────────────────
   Profile Personal Data One-Time Update Card
   ────────────────────────────────────────── */
.profile-layout-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-personal-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-card);
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.ppc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.ppc-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ppc-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppc-header h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
}

.ppc-subtitle {
    font-size: 0.78rem;
    color: #64748b;
}

.locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

.editable-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

.one-time-notice-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 22px;
}

.one-time-notice-banner.warning {
    background: #fffbeb;
    border: 1px solid #fef08a;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

.one-time-notice-banner.locked {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #10b981;
    color: #166534;
}

.one-time-notice-banner svg {
    flex-shrink: 0;
}

/* Locked Details Grid */
.locked-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.locked-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.locked-item.full-width {
    grid-column: span 3;
}

.locked-item .li-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.locked-item .li-val {
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 700;
}

/* Profile Form Styling */
.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-grid-address {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.input-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-field-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}

.input-field-group .required {
    color: #e11d48;
}

.input-field-group input,
.input-field-group select,
.input-field-group textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    color: #0f172a;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    transition: var(--ease);
}

.input-field-group input:focus,
.input-field-group select:focus,
.input-field-group textarea:focus {
    background: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Form Validation Styles */
.input-field-group.has-error input,
.input-field-group.has-error select,
.input-field-group.has-error textarea {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.input-field-group.has-error label {
    color: #b91c1c !important;
}

.input-field-group .field-error-msg {
    display: none;
    font-size: 0.74rem;
    font-weight: 600;
    color: #dc2626;
    margin-top: 2px;
    line-height: 1.3;
}

.input-field-group.has-error .field-error-msg {
    display: block;
    animation: fadeInError 0.2s ease-in-out;
}

@keyframes fadeInError {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.btn-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    transition: all 0.2s ease;
}

.btn-primary-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

/* ──────────────────────────────────────────
   Universal Panel Card Panels
   ────────────────────────────────────────── */
.panel-card {
    background: #ffffff;
    border: 1px solid var(--b-subtle);
    border-radius: var(--r-card);
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.panel-card-header {
    border-bottom: 1.5px solid var(--b-subtle);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.panel-card-header h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}

.panel-card-header p {
    font-size: 0.82rem;
    color: var(--t-muted);
}

.panel-card-footer {
    border-top: 1.5px solid var(--b-subtle);
    padding-top: 15px;
    margin-top: 20px;
}

.bg-neutral-flat {
    background: #f9fafb;
}

/* Modern Form Controls custom styling */
.form-group-custom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.form-label-custom {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--t-body);
}

.input-custom, .select-custom {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: #f9fafb;
    border: 1.5px solid var(--b-subtle);
    border-radius: var(--r-input);
    color: var(--t-head);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    outline: none;
    transition: var(--ease);
}

.input-custom:focus, .select-custom:focus {
    background: #ffffff;
    border-color: var(--navy-light);
    box-shadow: 0 0 0 3px rgba(30,58,114,0.08);
}

.input-custom-readonly {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: #f1f5f9;
    border: 1.5px solid var(--b-subtle);
    border-radius: var(--r-input);
    color: var(--t-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    outline: none;
    font-weight: 600;
}

.textarea-custom {
    padding: 12px 16px;
}

.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: var(--r-btn);
    border: none;
    cursor: pointer;
    transition: var(--ease);
    text-decoration: none;
}

.btn-navy {
    background: var(--navy);
    color: #ffffff;
}

.btn-navy:hover {
    background: var(--navy-light);
    transform: translateY(-1px);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--navy);
}

.btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(201,162,39,0.25);
}

.btn-block {
    width: 100%;
}

.btn-table-action {
    background: rgba(30,58,114,0.06);
    border: 1px solid rgba(30,58,114,0.12);
    color: var(--navy-light);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--ease);
}

.btn-table-action:hover {
    background: var(--navy);
    color: #ffffff;
}

.payment-instructions-bullet {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-instructions-bullet li {
    font-size: 0.76rem;
    color: var(--t-body);
    line-height: 1.45;
    position: relative;
    padding-left: 14px;
}

.payment-instructions-bullet li::before {
    content: "●";
    color: var(--gold);
    font-size: 0.65rem;
    position: absolute;
    left: 0;
    top: -1px;
}

/* ──────────────────────────────────────────
   Modern Table Custom design
   ────────────────────────────────────────── */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.table-custom {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    text-align: left;
}

.table-custom th {
    background: var(--notice-bg);
    color: var(--navy);
    padding: 12px 16px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    border-bottom: 2px solid var(--b-subtle);
}

.table-custom td {
    padding: 12px 16px;
    border-bottom: 1.5px solid var(--b-subtle);
    color: var(--t-body);
    font-weight: 500;
}

.table-custom tr:last-child td {
    border-bottom: none;
}

.table-custom tbody tr:hover {
    background: #f8fafc;
}

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* ──────────────────────────────────────────
   Attendance & Star feedback Elements
   ────────────────────────────────────────── */
.query-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #f8fafc;
    border: 1px solid var(--b-subtle);
    border-radius: var(--r-input);
    padding: 15px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.select-half {
    flex: 1;
    min-width: 180px;
    margin-bottom: 0;
}

.btn-contain {
    margin-bottom: 0;
}

.hourly-attendance-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.hour-card {
    background: #ffffff;
    border: 1.5px solid var(--b-subtle);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: var(--ease);
}

.hc-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--t-light);
}

.hc-pill {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: center;
}

.hc-faculty {
    font-size: 0.68rem;
    color: var(--t-muted);
    font-weight: 500;
    line-height: 1.3;
}

.hour-card.present-state {
    border-left: 4px solid var(--ok);
}

.hour-card.present-state .hc-pill {
    background: #e6f4ea;
    color: var(--ok);
}

.hour-card.absent-state {
    border-left: 4px solid var(--err);
    background: #fdfefe;
}

.hour-card.absent-state .hc-pill {
    background: #fce8e6;
    color: var(--err);
}

.circular-progress-large {
    width: 110px;
    height: 110px;
    margin: 0 auto;
}

.circular-chart-large {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.circular-chart-large .circle-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 2.8;
}

.circular-chart-large .circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke: var(--ok);
}

.percentage-large {
    fill: var(--t-head);
    font-family: 'Outfit', sans-serif;
    font-size: 0.52em;
    font-weight: 900;
    text-anchor: middle;
}

.cc-chart-pane-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f9fafb;
    border: 1px solid var(--b-subtle);
    border-radius: 12px;
    padding: 20px;
}

.cc-large-details h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}

.cc-large-details p {
    font-size: 0.74rem;
    color: var(--t-muted);
    line-height: 1.4;
}

.hours-stats-card {
    background: #ffffff;
    border: 1px solid var(--b-subtle);
    border-radius: 12px;
    padding: 20px;
}

.stats-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    border-bottom: 1.5px solid var(--b-subtle);
    padding-bottom: 8px;
}

.stats-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stats-list li span {
    color: var(--t-muted);
    font-weight: 500;
}

.stats-list li strong {
    color: var(--t-head);
    font-weight: 800;
}

/* Star Feedback rating system styling */
.star-rating-custom {
    display: inline-flex;
    flex-direction: row-reverse;
    font-size: 1.8rem;
    justify-content: flex-end;
}

.star-rating-custom input {
    display: none;
}

.star-rating-custom label {
    cursor: pointer;
    color: #e2e8f0;
    transition: var(--ease);
    padding: 0 2px;
}

.star-rating-custom input:checked ~ label,
.star-rating-custom label:hover,
.star-rating-custom label:hover ~ label {
    color: var(--gold);
}

/* ──────────────────────────────────────────
   Hall Ticket Formats
   ────────────────────────────────────────── */
.hall-ticket-layout {
    background: #ffffff;
    border: 2px solid #000000;
    padding: 25px;
    border-radius: 8px;
    color: #000000;
    font-family: 'Inter', sans-serif;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.ht-receipt-header {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 2px double #000000;
    padding-bottom: 15px;
}

.ht-header-logowrap img {
    width: 65px;
    height: 65px;
    object-fit: contain;
}

.ht-header-text {
    flex: 1;
}

.ht-header-text h3 {
    font-family: 'Outfit';
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.1px;
}

.ht-header-text h5 {
    font-size: 0.72rem;
    font-weight: 600;
    margin: 3px 0;
}

.ht-header-text h4 {
    font-family: 'Outfit';
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: underline;
}

.ht-student-meta {
    margin: 15px 0;
}

.meta-table {
    width: 100%;
    font-size: 0.77rem;
}

.meta-table td {
    padding: 4px 6px;
    border: none !important;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #000000 !important;
}

.sign-column {
    height: 38px;
}

.ht-signatures {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}

.signature-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
}

.sig-space {
    width: 150px;
    height: 35px;
    border-bottom: 1px dashed #555;
}

.sig-space.img-sig {
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sig-space.img-sig img {
    height: 100%;
    object-fit: contain;
}

.ht-action-box {
    margin-top: 20px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.results-summary-card {
    border: 1.5px solid var(--b-subtle);
    border-radius: var(--r-input);
    background: var(--notice-bg);
    overflow: hidden;
}

.rsc-item {
    text-align: center;
    padding: 15px;
    border-right: 1.5px solid var(--b-subtle);
}

.rsc-item:last-child {
    border-right: none;
}

.rsc-item span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--t-light);
    text-transform: uppercase;
}

.rsc-item h3 {
    font-family: 'Outfit';
    font-size: 1.3rem;
    font-weight: 800;
    margin-top: 4px;
    color: var(--navy);
}

/* ──────────────────────────────────────────
   Digital Library Resources card grids
   ────────────────────────────────────────── */
.resources-introduction {
    margin-bottom: 24px;
}

.resources-introduction h3 {
    font-family: 'Outfit';
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
}

.resources-introduction p {
    font-size: 0.8rem;
    color: var(--t-muted);
}

.resources-grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.flip-card-resource {
    background-color: transparent;
    width: 100%;
    height: 180px;
    perspective: 1000px;
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border-radius: 12px;
}

.flip-card-resource:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--b-subtle);
}

.flip-front {
    background-color: #ffffff;
    color: var(--navy);
    gap: 15px;
}

.flip-front img {
    height: 48px;
    max-width: 90%;
    object-fit: contain;
}

.flip-front h5 {
    font-family: 'Outfit';
    font-size: 0.88rem;
    font-weight: 800;
}

.icon-fallback {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: 'Outfit';
    font-size: 1rem;
}

.icon-fallback.color-navy { background: rgba(30,58,114,0.06); color: var(--navy); }
.icon-fallback.color-gold { background: rgba(201,162,39,0.08); color: var(--gold); }
.icon-fallback.color-crimson { background: rgba(139,0,0,0.06); color: var(--crimson); }
.icon-fallback.color-green { background: rgba(21,128,61,0.08); color: var(--ok); }

.flip-back {
    background-color: var(--navy);
    color: white;
    transform: rotateY(180deg);
    gap: 10px;
}

.flip-back h5 {
    font-family: 'Outfit';
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--gold-light);
}

.flip-back p {
    font-size: 0.72rem;
    color: #cbd5e1;
    line-height: 1.4;
}

.btn-resource-go {
    background: var(--gold);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 5px;
    transition: var(--ease);
}

.btn-resource-go:hover {
    background: #ffffff;
    color: var(--navy);
}

/* Receipt Print layout */
.receipt-print-width {
    max-width: 380px !important;
}

.official-receipt-box {
    border: 1px dashed #777;
    padding: 18px;
    font-family: monospace;
    font-size: 0.75rem;
    color: #000;
}

.receipt-divider-line {
    border-top: 1px dashed #000;
    margin: 8px 0;
}

.modal-foot {
    border-top: 1.5px solid var(--b-subtle);
    padding-top: 15px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* Animations mapping */
.animate-fade-in {
    animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ──────────────────────────────────────────
   RESPONSIVE DESIGN VIEWPORT ADJUSTMENTS
   ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .counters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .sidebar-nav {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
    }
    
    .sidebar-nav.active {
        transform: translateX(0);
    }

    .sidebar-close-btn {
        display: block;
    }

    .mobile-toggle-btn {
        display: block;
    }

    .welcome-jumbotron {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .jumbo-graphics {
        display: none;
    }

    .row-panels-two {
        grid-template-columns: 1fr;
    }

    .hourly-attendance-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .resources-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .main-content-padding {
        padding: 16px;
    }

    .welcome-jumbotron {
        padding: 20px;
    }

    .counters-grid {
        grid-template-columns: 1fr;
    }

    .query-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .select-half, .btn-contain {
        width: 100%;
    }

    .btn-contain .btn-custom {
        width: 100%;
    }

    .hourly-attendance-grid {
        grid-template-columns: 1fr;
    }

    .details-section-grid {
        grid-template-columns: 1fr;
    }

    .resources-grid-cards {
        grid-template-columns: 1fr;
    }

    .results-summary-card {
        grid-template-columns: 1fr !important;
    }
    
    .rsc-item {
        border-right: none;
        border-bottom: 1.5px solid var(--b-subtle);
    }
    
    .rsc-item:last-child {
        border-bottom: none;
    }
}

/* =========================================================
   MODERN ATTENDANCE PORTAL STYLING
   ========================================================= */
.attendance-modern-panel {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    padding: 24px;
}

.attendance-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.attendance-header-flex h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.attendance-header-flex p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.student-pill-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 0.82rem;
}

.student-pill-chip .spc-label {
    color: #64748b;
    font-weight: 500;
}

.student-pill-chip .spc-val {
    color: #1e293b;
    font-weight: 700;
}

/* Filter Box & Tabs */
.attendance-filter-box {
    margin-top: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
}

.attendance-mode-tabs {
    display: inline-flex;
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-tab:hover {
    color: #1e293b;
}

.mode-tab.active {
    background: #ffffff;
    color: #4f46e5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.attendance-controls-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.ctrl-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.date-input-wrap {
    flex: 1;
    min-width: 240px;
}

.date-range-wrap {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.date-range-wrap .range-field {
    flex: 1;
    min-width: 160px;
}

.range-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    height: 42px;
    padding: 0 4px;
    font-size: 0.85rem;
}

/* Custom Flatpickr Input */
.custom-flatpickr-input {
    position: relative;
    display: flex;
    align-items: center;
}

.custom-flatpickr-input .input-icon {
    position: absolute;
    left: 14px;
    color: #6366f1;
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 2;
}

.custom-flatpickr-input input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-flatpickr-input input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.action-btn-wrap {
    margin-left: auto;
}

.btn-query-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    color: #ffffff;
    border: none;
    border-radius: 9px;
    padding: 11px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-query-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

.btn-query-modern:active {
    transform: translateY(0);
}

/* Quick Select Presets */
.quick-presets-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.qp-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preset-pill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-pill:hover, .preset-pill.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}

/* Initial Empty State */
.attendance-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.attendance-empty-state .empty-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #6366f1;
    margin-bottom: 16px;
}

.attendance-empty-state h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 6px 0;
}

.attendance-empty-state p {
    font-size: 0.85rem;
    color: #64748b;
    max-width: 420px;
    margin: 0 auto;
}

/* Results Card */
.result-card-modern {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    margin-top: 24px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.result-card-modern.empty-result {
    text-align: center;
    padding: 45px 20px;
}

.result-card-modern.empty-result .empty-icon {
    font-size: 2.2rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.result-card-modern.empty-result h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.result-card-modern.empty-result p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.rc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.rc-date-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
}

.rc-subtitle {
    font-size: 0.8rem;
    color: #64748b;
}

/* Metric Counter Cards */
.attendance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.att-metric-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.att-metric-card .amc-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.att-metric-card .amc-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}

.att-metric-card.metric-present {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.att-metric-card.metric-present .amc-val {
    color: #166534;
}

.att-metric-card.metric-absent {
    background: #fef2f2;
    border-color: #fecaca;
}
.att-metric-card.metric-absent .amc-val {
    color: #991b1b;
}

.att-metric-card.metric-pct {
    background: #f5f3ff;
    border-color: #ddd6fe;
}
.att-metric-card.metric-pct .amc-val.text-green {
    color: #166534;
}
.att-metric-card.metric-pct .amc-val.text-amber {
    color: #d97706;
}

/* Hourly Breakdown Grid */
.hourly-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin: 20px 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hourly-flex-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.hour-status-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    text-align: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.hour-status-box .hsb-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hour-status-box .hsb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.hour-status-box.pill-present {
    background: #f0fdf4;
    border-color: #86efac;
}
.hour-status-box.pill-present .hsb-badge {
    background: #dcfce7;
    color: #15803d;
}

.hour-status-box.pill-absent {
    background: #fef2f2;
    border-color: #fca5a5;
}
.hour-status-box.pill-absent .hsb-badge {
    background: #fee2e2;
    color: #b91c1c;
}

.hour-status-box.pill-od {
    background: #eff6ff;
    border-color: #93c5fd;
}
.hour-status-box.pill-od .hsb-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.hour-status-box.pill-na {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.hour-status-box.pill-na .hsb-badge {
    background: #e2e8f0;
    color: #64748b;
}

/* Range Days Table / Rows */
.range-days-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.range-day-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    gap: 16px;
    transition: background 0.15s ease;
}

.range-day-row:hover {
    background: #f1f5f9;
}

.rdr-date-info {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.rdr-date-info strong {
    font-size: 0.88rem;
    color: #0f172a;
}

.rdr-date-info span {
    font-size: 0.72rem;
    color: #64748b;
}

.rdr-hour-pills {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.rdr-hour-pills .hour-status-box {
    padding: 6px 10px;
    flex-direction: row;
    gap: 4px;
}

.rdr-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 90px;
}

.rdr-pct-tag {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
}

.rdr-pct-tag.pct-high {
    background: #dcfce7;
    color: #15803d;
}

.rdr-pct-tag.pct-med {
    background: #fef3c7;
    color: #b45309;
}

.rdr-pct-tag.pct-low {
    background: #fee2e2;
    color: #b91c1c;
}

.rdr-summary small {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
}

/* Custom Flatpickr Theme Adjustments */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

.flatpickr-day.today {
    border-color: #4f46e5 !important;
}

@media (max-width: 768px) {
    .hourly-flex-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .range-day-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .rdr-hour-pills {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .rdr-summary {
        align-items: flex-start;
    }
}

/* ================================================================
   STUDENT PORTAL DARK & LIGHT THEME SYSTEM
   ================================================================ */
/* Theme Toggle Button Style matching Admin System */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 0 0.85rem;
    height: 34px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.theme-toggle-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
}

.theme-toggle-btn .theme-icon-dark svg {
    color: #6366f1;
}

.theme-toggle-btn .theme-icon-light svg {
    color: #f59e0b;
}

/* ─── DARK THEME OVERRIDES ─── */
:root.dark-theme, body.dark-theme {
    background: #090e1a !important;
    color: #f8fafc !important;
}

/* Layout and containers */
:root.dark-theme .dashboard-layout,
:root.dark-theme .main-content-scroll {
    background: #090e1a !important;
    background-image: radial-gradient(circle at top right, rgba(99, 102, 241, 0.08) 0%, transparent 60%) !important;
}

/* Top Nav Bar in Dark Mode */
:root.dark-theme .top-nav-bar {
    background: #0d1326 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root.dark-theme .page-title-badge span {
    color: #f8fafc !important;
}

:root.dark-theme .live-clock-badge {
    background: #141d36 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

:root.dark-theme .live-clock-badge .clock-date {
    color: #94a3b8 !important;
}

:root.dark-theme .live-clock-badge .clock-sep {
    color: #475569 !important;
}

:root.dark-theme .live-clock-badge .clock-time {
    color: #f8fafc !important;
}

:root.dark-theme .session-timeout-indicator {
    background: #141d36 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

:root.dark-theme .theme-toggle-btn {
    background: #141d36 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

:root.dark-theme .theme-toggle-btn:hover {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

:root.dark-theme .icon-toolbar-btn {
    background: #141d36 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

:root.dark-theme .icon-toolbar-btn:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

:root.dark-theme .quick-secure-logout {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
}

/* Cards, Panes & Summary Counters */
:root.dark-theme .counter-card,
:root.dark-theme .info-card-box,
:root.dark-theme .content-card,
:root.dark-theme .profile-card,
:root.dark-theme .modern-card,
:root.dark-theme .schedule-card,
:root.dark-theme .data-table-container,
:root.dark-theme .notification-dropdown {
    background: #131d36 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    color: #f8fafc !important;
}

:root.dark-theme .counter-card:hover,
:root.dark-theme .info-card-box:hover {
    border-color: rgba(99, 102, 241, 0.35) !important;
    background: #162240 !important;
}

:root.dark-theme .cc-header {
    color: #94a3b8 !important;
}

:root.dark-theme .cc-value {
    color: #f8fafc !important;
}

:root.dark-theme .icb-head {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

:root.dark-theme .icb-head h4 {
    color: #f8fafc !important;
}

:root.dark-theme .allocated-details-list li {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

:root.dark-theme .allocated-details-list li strong {
    color: #f8fafc !important;
}

:root.dark-theme .notice-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

:root.dark-theme .notice-item strong {
    color: #f8fafc !important;
}

:root.dark-theme .notice-item p {
    color: #94a3b8 !important;
}

/* Alert Banner in Dark Mode */
:root.dark-theme .dashboard-banner-alert {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    border-left: 4px solid #f59e0b !important;
    color: #fde68a !important;
}

:root.dark-theme .dashboard-banner-alert strong {
    color: #fbbf24 !important;
}

/* Form inputs & controls in Dark Mode */
:root.dark-theme .form-control,
:root.dark-theme input[type="text"],
:root.dark-theme input[type="email"],
:root.dark-theme input[type="tel"],
:root.dark-theme input[type="date"],
:root.dark-theme select,
:root.dark-theme textarea {
    background: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

:root.dark-theme .form-control:focus,
:root.dark-theme input:focus,
:root.dark-theme select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

:root.dark-theme .field-label {
    color: #e2e8f0 !important;
}

:root.dark-theme .field-wrap {
    background: #0b1120 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

:root.dark-theme .field-wrap input {
    background: transparent !important;
    color: #f8fafc !important;
}

/* Tables in Dark Mode */
:root.dark-theme table,
:root.dark-theme .standard-table,
:root.dark-theme .table-bordered {
    color: #f8fafc !important;
}

:root.dark-theme table th,
:root.dark-theme .standard-table th {
    background: #0b1120 !important;
    color: #94a3b8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

:root.dark-theme table td,
:root.dark-theme .standard-table td {
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
}

:root.dark-theme table tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Attendance Day Range card in Dark Mode */
:root.dark-theme .range-day-row {
    background: #0e162b !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

:root.dark-theme .rdr-date-box {
    background: #141d36 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

:root.dark-theme .rdr-day-num {
    color: #f8fafc !important;
}

:root.dark-theme .rdr-hour-pills .hour-pill {
    background: #141d36 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

:root.dark-theme .filter-preset-pill {
    background: #141d36 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

:root.dark-theme .filter-preset-pill:hover,
:root.dark-theme .filter-preset-pill.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

:root.dark-theme .flatpickr-calendar {
    background: #131d36 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
}

:root.dark-theme .flatpickr-months,
:root.dark-theme .flatpickr-month,
:root.dark-theme .flatpickr-current-month {
    color: #f8fafc !important;
}

:root.dark-theme .flatpickr-day {
    color: #cbd5e1 !important;
}

:root.dark-theme .flatpickr-day:hover {
    background: #1e293b !important;
}

/* Notification Dropdown in Dark Mode */
:root.dark-theme .notif-head {
    background: #0f172a !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

:root.dark-theme .notif-list li {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

:root.dark-theme .notif-list li:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

:root.dark-theme .notif-list li strong {
    color: #f8fafc !important;
}

:root.dark-theme .notif-list li p {
    color: #94a3b8 !important;
}