/* admin/assets/css/admin.css - EduDash Redesign */
:root {
    --bg-main: #f4f7fe;
    --white: #ffffff;
    --text-dark: #2b3674;
    --text-muted: #a3aed1;
    --primary: #4318ff;
    --green-active: #059669; /* matching the active sidebar item */
    --orange-logo: #ff5b5b;
    --border-color: #e2e8f0;
    
    --card-shadow: 0px 18px 40px rgba(112, 144, 176, 0.12);
    --border-radius: 20px;
    
    --sidebar-width: 270px;
    --header-height: 72px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-dark);
}

/* Custom scrollbar (global) */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    -webkit-transition: background .3s;
    transition: background .3s
}

::-webkit-scrollbar-thumb {
    background: #e1e6f1
}

:hover::-webkit-scrollbar-thumb {
    background: #adb5bd
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Layout */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

/* Sidebar */
.admin-sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    position: fixed;
    height: 100vh;
    z-index: 200;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(43, 54, 116, 0.04);
    transition: transform 0.3s ease;
}

.sidebar-brand {
    padding: 24px 22px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--orange-logo), #ff8a65);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(255, 91, 91, 0.35);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-logo-icon.has-logo {
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border-color);
}

.sidebar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.sidebar-brand-text h2 {
    color: var(--text-dark);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.sidebar-brand-text span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.sidebar-user {
    margin: 18px 16px 12px;
    padding: 14px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sidebar-user-avatar {
    position: relative;
    flex-shrink: 0;
}

.sidebar-user-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--white);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}

.online-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid var(--white);
    border-radius: 50%;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-info h4 {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info p {
    font-size: 0.78rem;
    color: var(--green-active);
    font-weight: 500;
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sidebar-nav-label {
    padding: 8px 22px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sidebar-menu {
    padding: 0 12px 12px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.sidebar-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.sidebar-menu li {
    margin-bottom: 4px;
}

.sidebar-menu > li > a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 10px;
    transition: all 0.2s ease;
    gap: 4px;
}

.menu-icon-wrap {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.sidebar-menu > li > a i.menu-icon {
    font-size: 1rem;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.menu-text {
    flex: 1;
}

.sidebar-menu > li > a i.chevron {
    margin-left: auto;
    font-size: 0.65rem;
    color: #cbd5e1;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    flex-shrink: 0;
}

li.open > a > i.chevron.fa-chevron-down {
    transform: rotate(180deg);
}

.sidebar-menu > li > a:hover {
    color: var(--text-dark);
    background-color: #f1f5f9;
}

.sidebar-menu > li > a:hover .menu-icon-wrap {
    background: rgba(5, 150, 105, 0.08);
}

.sidebar-menu > li > a:hover i.menu-icon {
    color: var(--green-active);
}

.sidebar-menu > li.active > a {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.sidebar-menu > li.active > a .menu-icon-wrap {
    background: rgba(255, 255, 255, 0.15);
}

.sidebar-menu > li.active > a i.menu-icon,
.sidebar-menu > li.active > a i.chevron {
    color: var(--white);
}

.submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    position: relative;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-menu > li.open > .submenu {
    max-height: 420px;
    opacity: 1;
    padding: 6px 0 8px;
}

.submenu::before {
    content: '';
    position: absolute;
    left: 29px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background-color: rgba(33, 150, 136, 0.28);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

.sidebar-menu > li.open > .submenu::before {
    opacity: 1;
}

.submenu li {
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sidebar-menu > li.open > .submenu li {
    opacity: 1;
    transform: translateY(0);
}

.sidebar-menu > li.open > .submenu li:nth-child(1) { transition-delay: 0.06s; }
.sidebar-menu > li.open > .submenu li:nth-child(2) { transition-delay: 0.1s; }
.sidebar-menu > li.open > .submenu li:nth-child(3) { transition-delay: 0.14s; }
.sidebar-menu > li.open > .submenu li:nth-child(4) { transition-delay: 0.18s; }
.sidebar-menu > li.open > .submenu li:nth-child(5) { transition-delay: 0.22s; }
.sidebar-menu > li.open > .submenu li:nth-child(6) { transition-delay: 0.26s; }
.sidebar-menu > li.open > .submenu li:nth-child(7) { transition-delay: 0.3s; }
.sidebar-menu > li.open > .submenu li:nth-child(8) { transition-delay: 0.34s; }
.sidebar-menu > li.open > .submenu li:nth-child(9) { transition-delay: 0.38s; }
.sidebar-menu > li.open > .submenu li:nth-child(10) { transition-delay: 0.42s; }

.sidebar-menu > li:not(.open) > .submenu li {
    transition-delay: 0s;
    opacity: 0;
    transform: translateY(-4px);
}

.submenu li a {
    padding: 11px 12px 11px 46px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    position: relative;
    display: block;
    transition: color 0.2s ease;
    border-radius: 0;
    margin: 0;
    background: transparent;
    line-height: 1.4;
}

.submenu li a::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #cbd5e1;
    border: 3px solid var(--white);
    border-radius: 50%;
    z-index: 2;
    box-sizing: content-box;
    transition: background-color 0.2s ease;
}

.submenu li a:hover {
    color: #219688;
    background-color: transparent;
}

.submenu li a:hover::before {
    background-color: #94a3b8;
    transform: translateY(-50%);
}

.submenu li.active a {
    color: #219688;
    background-color: transparent;
    font-weight: 500;
}

.submenu li.active a::before {
    background-color: #219688;
}

.teacher-profile-banner {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
}

.teacher-view-header-card::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(29, 78, 216, 0.04) 100%);
}

.teacher-info-icon {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
}

.teacher-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.teacher-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--card-shadow);
}

.teacher-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.teacher-stat-item span {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.teacher-stat-item strong {
    display: block;
    font-size: 1.15rem;
    color: var(--text-dark);
    margin-top: 2px;
}

.highlight-phone {
    color: #2563eb !important;
    font-weight: 600;
}

.info-tile-icon.icon-subject       { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.info-tile-icon.icon-qualification { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.info-tile-icon.icon-experience    { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }

.teacher-address-block p {
    margin: 0 0 10px;
    color: #475569;
    line-height: 1.6;
}

.teacher-address-meta {
    color: #64748b;
    font-size: 0.9rem;
}

.teacher-address-meta i {
    color: #2563eb;
    margin-right: 6px;
}

.section-mt {
    margin-top: 20px;
}

.data-card > .section-card-header:has(.btn-header-action) {
    justify-content: space-between;
}

.teacher-timetable-visual {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.teacher-tt-head,
.teacher-tt-row {
    display: grid;
    grid-template-columns: 72px repeat(8, minmax(110px, 1fr));
    gap: 6px;
    min-width: 980px;
}

.teacher-tt-corner,
.teacher-tt-day,
.teacher-tt-period {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 6px;
}

.teacher-tt-day {
    display: flex;
    align-items: center;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 10px;
    justify-content: center;
}

.teacher-tt-period {
    text-align: center;
    background: #f8fafc;
    border-radius: 10px;
}

.teacher-tt-slot {
    border-radius: 12px;
    padding: 10px;
    min-height: 72px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.76rem;
    line-height: 1.35;
}

.teacher-tt-slot.has-class {
    background: linear-gradient(145deg, #eff6ff 0%, #f0fdf4 100%);
    border-color: #bfdbfe;
}

.teacher-tt-slot.has-class strong {
    color: #1e40af;
    font-size: 0.8rem;
}

.teacher-tt-slot.has-class span {
    color: #475569;
}

.teacher-tt-slot.has-class em {
    font-style: normal;
    color: #059669;
    font-weight: 600;
    font-size: 0.72rem;
}

.teacher-tt-slot.is-free {
    background: #f8fafc;
    align-items: center;
    justify-content: center;
}

.teacher-tt-slot .free-label {
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.72rem;
}

.erp-search-results.teacher-search-results {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-search-item.teacher-search-card {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.erp-search-item.teacher-search-card:hover {
    color: inherit;
    border-color: #93c5fd;
    border-left-color: #1d4ed8;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.erp-search-item.teacher-search-card.teacher-search-link:hover {
    color: inherit;
}

.teacher-search-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    flex: 1;
    min-width: 0;
}

.teacher-search-avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #bfdbfe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.teacher-search-info {
    flex: 1;
    min-width: 0;
}

.teacher-search-info strong {
    display: block;
    font-size: 0.98rem;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.25;
}

.teacher-search-info span {
    display: block;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.35;
}

.teacher-search-info .teacher-search-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.teacher-search-subject-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid #bfdbfe;
}

.teacher-search-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 16px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}

.erp-search-item.teacher-search-card:hover .teacher-search-go {
    background: #2563eb;
    color: #fff;
}

.teacher-search-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 1px solid #e2e8f0;
    min-width: min(100%, 320px);
}

.teacher-search-actions-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    width: 100%;
    margin-bottom: -4px;
}

.teacher-portal-card .teacher-search-actions .form-input,
.teacher-portal-card .teacher-search-actions .form-select {
    padding: 9px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
    min-width: 130px;
}

.teacher-portal-pass {
    max-width: 180px;
    min-width: 140px;
    flex: 1;
}

.teacher-search-actions .btn-header-action {
    white-space: nowrap;
    flex-shrink: 0;
}

.teacher-portal-card {
    flex-wrap: nowrap;
}

@media (max-width: 900px) {
    .erp-search-item.teacher-search-card,
    .teacher-portal-card {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .teacher-search-actions {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e2e8f0;
    }

    .teacher-portal-pass,
    .teacher-portal-card .teacher-search-actions .form-select {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .teacher-search-go {
        position: absolute;
        top: 16px;
        right: 12px;
        margin: 0;
    }

    .erp-search-item.teacher-search-card.teacher-search-link {
        position: relative;
        padding-right: 56px;
    }
}

/* Teacher Portal Accounts page */
.tpa-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: stretch;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #0891b2 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.22);
}

.tpa-hero-main h3 {
    font-size: 1.15rem;
    margin-bottom: 6px;
    font-weight: 700;
}

.tpa-hero-main p {
    font-size: 0.88rem;
    opacity: 0.92;
    margin-bottom: 16px;
    line-height: 1.45;
}

.tpa-login-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tpa-login-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    font-size: 0.82rem;
    backdrop-filter: blur(4px);
}

.tpa-login-chip strong {
    font-weight: 700;
    opacity: 0.85;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tpa-login-chip code {
    background: rgba(0, 0, 0, 0.18);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #fff;
}

.tpa-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-width: 200px;
}

.tpa-hero-actions .btn-header-action {
    justify-content: center;
    white-space: nowrap;
    width: 100%;
}

.tpa-hero-actions .btn-header-outline {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.tpa-hero-actions .btn-header-outline:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
    color: #fff;
}

.tpa-hero-actions .btn-header-primary {
    background: #fff;
    color: #1d4ed8;
    border-color: #fff;
}

.tpa-hero-actions .btn-header-primary:hover {
    background: #eff6ff;
    color: #1e40af;
}

.tpa-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.tpa-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: var(--card-shadow);
}

.tpa-step-num {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(145deg, #dbeafe, #eff6ff);
    color: #2563eb;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tpa-step strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
    margin-bottom: 3px;
}

.tpa-step span {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.tpa-section-hint {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 4px;
}

.tpa-pending-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tpa-more-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    font-size: 0.84rem;
    color: #64748b;
}

.tpa-more-hint i {
    color: #2563eb;
}

.tpa-enabled-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.tpa-enabled-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tpa-enabled-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.tpa-enabled-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, #dbeafe, #eff6ff);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid #bfdbfe;
}

.tpa-enabled-info {
    flex: 1;
    min-width: 0;
}

.tpa-enabled-info strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpa-enabled-info span {
    display: block;
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 2px;
}

.tpa-enabled-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.tpa-view-link {
    font-size: 0.72rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.tpa-view-link:hover {
    text-decoration: underline;
}

.cls-stat-icon.cls-stat-amber {
    background: #fffbeb;
    color: #d97706;
}

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

    .tpa-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }

    .tpa-steps {
        grid-template-columns: 1fr;
    }
}

/* Teacher Attendance (admin) */
.tta-date-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #ecfdf5 0%, #eff6ff 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
}

.tta-date-bar strong {
    font-size: 1rem;
    color: #0f172a;
}

.tta-date-bar span {
    font-size: 0.84rem;
    color: #64748b;
}

.tta-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tta-bulk-bar > span {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

.tta-bulk-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.tta-bulk-btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.tta-bulk-btn.is-present { color: #059669; border-color: #bbf7d0; }
.tta-bulk-btn.is-absent { color: #dc2626; border-color: #fecaca; }
.tta-bulk-btn.is-late { color: #d97706; border-color: #fde68a; }

.tta-teacher-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tta-teacher-avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(145deg, #dbeafe, #eff6ff);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid #bfdbfe;
}

.tta-teacher-cell strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
}

.tta-teacher-cell small {
    display: block;
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 1px;
}

.tta-time-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.tta-time-track {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.tta-time-node {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
    border-radius: 10px;
    transition: background 0.15s;
}

.tta-time-node-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    margin-bottom: 5px;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
}

.tta-time-node-label {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 2px;
}

.tta-time-node strong {
    display: block;
    font-size: 0.78rem;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
}

.tta-time-node.is-in {
    background: rgba(236, 253, 245, 0.6);
}

.tta-time-node.is-in .tta-time-node-icon {
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    color: #059669;
    border-color: #bbf7d0;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.12);
}

.tta-time-node.is-in strong {
    color: #059669;
}

.tta-time-node.is-out {
    background: rgba(239, 246, 255, 0.6);
}

.tta-time-node.is-out .tta-time-node-icon {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    color: #2563eb;
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.tta-time-node.is-out strong {
    color: #2563eb;
}

.tta-time-node.is-pending .tta-time-node-icon {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
}

.tta-time-node.is-pending strong {
    color: #d97706;
    font-size: 0.72rem;
}

.tta-time-node.is-none strong {
    color: #cbd5e1;
    font-weight: 600;
}

.tta-time-connector {
    position: relative;
    width: 28px;
    flex-shrink: 0;
    align-self: center;
    margin-top: 8px;
}

.tta-time-connector::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1, #e2e8f0);
    border-radius: 999px;
    transform: translateY(-50%);
}

.tta-time-connector::after {
    content: '→';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.72rem;
    color: #94a3b8;
    background: #fff;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    line-height: 16px;
    text-align: center;
}

.tta-time-connector.is-complete::before {
    background: linear-gradient(90deg, #bbf7d0, #93c5fd);
}

.tta-time-connector.is-complete::after {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.tta-time-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}

.tta-duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #475569;
    font-weight: 700;
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 999px;
}

.tta-duration i {
    color: #64748b;
    font-size: 0.68rem;
}

.tta-att-select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    min-width: 130px;
    cursor: pointer;
    background: #fff;
}

.tta-att-select[data-status="Present"] { background: #ecfdf5; border-color: #bbf7d0; color: #059669; }
.tta-att-select[data-status="Absent"] { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.tta-att-select[data-status="Late"] { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.tta-att-select[data-status="Half Day"] { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.tta-att-select[data-status="Leave"] { background: #f5f3ff; border-color: #ddd6fe; color: #7c3aed; }

.tta-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.tta-actions-cell {
    width: 52px;
    text-align: center;
    white-space: nowrap;
}

.tta-delete-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tta-no-entry {
    color: #cbd5e1;
    font-size: 0.9rem;
}

.tta-remarks-readonly {
    display: block;
    max-width: 180px;
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tta-delete-form {
    display: none;
}

.tta-self-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.68rem;
    font-weight: 700;
}

.tta-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.tta-summary-chip {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.tta-summary-chip span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}

.tta-summary-chip strong {
    font-size: 1.35rem;
    color: #0f172a;
}

.tta-summary-chip.is-present { border-color: #bbf7d0; background: #ecfdf5; }
.tta-summary-chip.is-present strong { color: #059669; }
.tta-summary-chip.is-absent { border-color: #fecaca; background: #fef2f2; }
.tta-summary-chip.is-absent strong { color: #dc2626; }
.tta-summary-chip.is-late { border-color: #fde68a; background: #fffbeb; }
.tta-summary-chip.is-late strong { color: #d97706; }
.tta-summary-chip.is-portal { border-color: #bfdbfe; background: #eff6ff; }
.tta-summary-chip.is-portal strong { color: #2563eb; }

@media (max-width: 1100px) {
    .tta-summary-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .tta-summary-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Admin Leave Requests */
.alr-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 50%, #f59e0b 100%);
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.2);
}

.alr-hero-label {
    margin: 0 0 6px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alr-hero-main h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
}

.alr-hero-main p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.92;
    max-width: 560px;
    line-height: 1.5;
}

.alr-hero-stats {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.alr-hero-stat {
    min-width: 120px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    text-align: center;
}

.alr-hero-stat span {
    display: block;
    font-size: 0.72rem;
    opacity: 0.88;
    margin-bottom: 4px;
}

.alr-hero-stat strong {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.alr-layout {
    display: grid;
    grid-template-columns: minmax(320px, 500px) 1fr;
    gap: 20px;
    align-items: start;
}

.alr-form-sub {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

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

.alr-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    font-size: 0.84rem;
    color: #92400e;
    line-height: 1.45;
}

.alr-note i {
    margin-top: 2px;
    color: #d97706;
}

.alr-note strong {
    display: block;
    color: #78350f;
    margin-bottom: 2px;
}

.alr-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.alr-list-head h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alr-list-head p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.alr-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.alr-filter-tab {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.15s;
}

.alr-filter-tab:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.alr-filter-tab.is-active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.alr-leave-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 20px;
    max-height: 720px;
    overflow-y: auto;
}

.alr-leave-card {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    transition: box-shadow 0.15s;
}

.alr-leave-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.alr-leave-card.is-approved { border-left: 4px solid #10b981; }
.alr-leave-card.is-pending { border-left: 4px solid #f59e0b; }
.alr-leave-card.is-rejected { border-left: 4px solid #ef4444; }
.alr-leave-card.is-cancelled { border-left: 4px solid #94a3b8; opacity: 0.92; }
.alr-leave-card.is-active {
    background: linear-gradient(135deg, #f0fdf4, #fff);
    border-color: #bbf7d0;
}

.alr-leave-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.alr-teacher-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alr-teacher-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    color: #2563eb;
    font-weight: 800;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alr-teacher-cell strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
}

.alr-teacher-cell small {
    font-size: 0.74rem;
    color: #64748b;
}

.alr-leave-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.alr-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.alr-source-badge.is-admin {
    background: #f5f3ff;
    color: #7c3aed;
}

.alr-source-badge.is-portal {
    background: #eff6ff;
    color: #2563eb;
}

.alr-leave-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 10px;
}

.alr-date-node span {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 2px;
}

.alr-date-node strong {
    font-size: 0.84rem;
    color: #0f172a;
}

.alr-date-arrow {
    color: #cbd5e1;
    font-size: 0.82rem;
}

.alr-days-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
}

.alr-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.68rem;
    font-weight: 700;
}

.alr-active-tag i {
    font-size: 0.45rem;
}

.alr-leave-reason {
    margin: 0 0 10px;
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.45;
}

.alr-leave-reason i {
    color: #cbd5e1;
    margin-right: 6px;
    font-size: 0.72rem;
}

.alr-leave-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.alr-submitted {
    font-size: 0.72rem;
    color: #94a3b8;
}

.alr-leave-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.alr-inline-form {
    display: inline-flex;
    gap: 6px;
    margin: 0;
}

.alr-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.alr-action-btn:hover {
    transform: translateY(-1px);
}

.alr-action-btn.is-approve {
    color: #059669;
    border-color: #bbf7d0;
    background: #ecfdf5;
}

.alr-action-btn.is-approve:hover {
    background: #d1fae5;
}

.alr-action-btn.is-reject {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.alr-action-btn.is-reject:hover {
    background: #fee2e2;
}

.alr-action-btn.is-edit {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.alr-action-btn.is-edit:hover {
    background: #dbeafe;
}

.alr-action-btn.is-cancel {
    color: #64748b;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.alr-action-btn.is-cancel:hover {
    background: #f1f5f9;
    color: #475569;
}

.alr-empty {
    text-align: center;
    padding: 48px 24px;
}

.alr-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.alr-empty h4 {
    margin: 0 0 8px;
    color: #0f172a;
}

.alr-empty p {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
}

@media (max-width: 1100px) {
    .alr-layout {
        grid-template-columns: 1fr;
    }

    .alr-leave-list {
        max-height: none;
    }
}

@media (max-width: 600px) {
    .alr-hero {
        flex-direction: column;
    }

    .alr-hero-stats {
        width: 100%;
    }

    .alr-hero-stat {
        flex: 1;
    }

    .alr-leave-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

.detail-item-icon.di-green { background: #ecfdf5; color: #059669; }

@media (max-width: 1100px) {
    .teacher-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .teacher-stat-strip {
        grid-template-columns: 1fr;
    }
}

.toolbar-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.timetable-grid-table {
    min-width: 960px;
}

.tt-grid-view {
    max-width: 100%;
    min-width: 0;
}

.tt-grid-view .table-container {
    max-width: 100%;
    overflow: hidden;
}

.tt-grid-view .table-wrapper {
    max-width: 100%;
}

.timetable-grid-table th,
.timetable-grid-table td {
    vertical-align: top;
    border: 1px solid #e2e8f0;
    padding: 8px;
}

.timetable-grid-table thead th {
    background: #f8fafc;
    font-size: 0.82rem;
    text-align: center;
}

.timetable-grid-table thead th small {
    font-weight: 500;
    color: #94a3b8;
}

.timetable-day-col {
    min-width: 100px;
    background: #f8fafc;
    position: sticky;
    left: 0;
    z-index: 1;
}

.timetable-cell {
    min-width: 130px;
    background: #fff;
}

.timetable-cell .timetable-mini {
    width: 100%;
    margin-bottom: 6px;
    padding: 6px 8px;
    font-size: 0.78rem;
}

.timetable-cell .timetable-mini:last-child {
    margin-bottom: 0;
}

.timetable-preview-table {
    width: 100%;
}

.timetable-preview-table th,
.timetable-preview-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
}

/* ── Timetable editor page ── */
.tt-picker-card .section-card-header {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
}

.tt-picker-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;
    gap: 16px;
    align-items: end;
}

.tt-picker-action label {
    visibility: hidden;
}

.tt-empty-picker {
    margin-top: 0;
}

.tt-page {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.tt-page-header {
    margin-bottom: 20px;
}

.tt-stat-subject {
    font-size: 0.95rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.tt-editor-form {
    padding-bottom: 8px;
}

.tt-toolbar-card {
    margin-bottom: 20px;
}

.tt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.tt-toolbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tt-toolbar-left h4 {
    margin: 0 0 3px;
    font-size: 1.05rem;
    color: var(--text-dark);
}

.tt-toolbar-left p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.tt-view-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.tt-view-btn {
    border: none;
    background: transparent;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.tt-view-btn:hover {
    color: #334155;
}

.tt-view-btn.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tt-quick-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.tt-quick-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.tt-quick-label i {
    color: #f59e0b;
    margin-right: 4px;
}

.tt-danger-outline:hover {
    border-color: #fecaca !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

.tt-week-preview {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tt-week-dot {
    flex: 1;
    min-width: 72px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.tt-week-dot span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.tt-week-dot em {
    display: block;
    font-style: normal;
    font-size: 1.1rem;
    font-weight: 700;
    color: #cbd5e1;
    margin-top: 2px;
}

.tt-week-dot.has-slots {
    background: linear-gradient(145deg, #eff6ff, #f0fdf4);
    border-color: #bfdbfe;
}

.tt-week-dot.has-slots span {
    color: #2563eb;
}

.tt-week-dot.has-slots em {
    color: #059669;
}

.tt-week-dot:hover {
    border-color: #2563eb;
    transform: translateY(-1px);
}

.tt-day-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 4px;
    max-width: 100%;
}

.tt-day-tab {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.tt-day-tab:hover {
    border-color: #93c5fd;
    color: #2563eb;
}

.tt-day-tab.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.tt-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 20px;
}

.tt-day-tab.active .tt-tab-badge {
    background: rgba(255, 255, 255, 0.3);
}

.tt-day-panel {
    display: none;
}

.tt-day-panel.active {
    display: block;
}

.tt-period-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tt-period-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tt-period-card.is-filled {
    border-color: #bfdbfe;
    background: linear-gradient(145deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

.tt-period-card.is-empty {
    background: #fafbfc;
}

.tt-period-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
}

.tt-period-badge {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
}

.tt-period-time {
    flex: 1;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.tt-period-time i {
    color: #94a3b8;
    margin-right: 4px;
}

.tt-slot-clear {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tt-slot-clear:hover {
    border-color: #fecaca;
    color: #ef4444;
    background: #fef2f2;
}

.tt-period-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tt-period-fields .form-field label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 4px;
}

.tt-period-fields .form-input {
    padding: 8px 10px;
    font-size: 0.88rem;
}

.tt-grid-view-hidden,
.tt-day-view-hidden {
    display: none !important;
}

.tt-grid-cell {
    cursor: pointer;
    min-width: 120px;
    transition: background 0.15s;
}

.tt-grid-cell:hover {
    background: #eff6ff !important;
}

.tt-grid-cell.has-data strong {
    display: block;
    color: #1e40af;
    font-size: 0.82rem;
}

.tt-grid-cell.has-data span {
    display: block;
    color: #475569;
    font-size: 0.76rem;
}

.tt-grid-cell.has-data em {
    font-style: normal;
    color: #059669;
    font-size: 0.72rem;
    font-weight: 600;
}

.tt-grid-free {
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
}

.tt-grid-hint {
    margin: 12px 0 0;
    font-size: 0.84rem;
    color: #64748b;
}

.tt-grid-hint i {
    color: #2563eb;
    margin-right: 6px;
}

.tt-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin-top: 24px;
    padding-top: 12px;
    background: linear-gradient(to top, var(--bg-main) 65%, transparent);
    pointer-events: none;
}

.tt-save-bar-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

.tt-save-bar-info {
    font-size: 0.88rem;
    color: #64748b;
}

.tt-save-bar-info i {
    color: #2563eb;
    margin-right: 8px;
}

.tt-save-bar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

    .tt-period-list {
        grid-template-columns: 1fr;
    }

    .tt-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .tt-period-fields {
        grid-template-columns: 1fr;
    }

    .tt-quick-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tt-quick-label {
        margin-bottom: 4px;
    }
}

.sidebar-footer {
    padding: 12px 12px 18px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.8);
}

.sidebar-logout {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: #ef4444;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    gap: 4px;
}

.sidebar-logout .menu-icon-wrap {
    background: #fef2f2;
}

.sidebar-logout .menu-icon {
    color: #ef4444;
}

.sidebar-logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 150;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Main Content */
.admin-main {
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--sidebar-width));
    min-width: 0;
}

/* Header */
.admin-header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 0 28px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 1px 8px rgba(43, 54, 116, 0.04);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.sidebar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--white);
    color: var(--text-dark);
    font-size: 1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-toggle:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
}

.breadcrumb-root {
    color: var(--text-muted);
    font-weight: 500;
}

.header-breadcrumb > i {
    font-size: 0.55rem;
    color: #cbd5e1;
}

.breadcrumb-current {
    color: var(--text-dark);
    font-weight: 600;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 560px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 14px;
    border: 1.5px solid var(--border-color);
    padding: 0 18px;
    width: 100%;
    height: 48px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(43, 54, 116, 0.07);
}

.search-bar:focus-within {
    background: var(--white);
    border-color: var(--green-active);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12), 0 4px 16px rgba(43, 54, 116, 0.1);
}

.search-bar i {
    color: #94a3b8;
    margin-right: 12px;
    font-size: 1rem;
    flex-shrink: 0;
}

.search-bar:focus-within i {
    color: var(--green-active);
}

.search-bar input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: inherit;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 500;
}

.search-bar input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.search-shortcut {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 0.72rem;
    font-family: inherit;
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 8px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.header-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.header-icon-btn:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--green-active);
}

.notification-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid #f8fafc;
}

.header-user {
    position: relative;
    margin-left: 6px;
    z-index: 200;
}

.header-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.header-user-trigger:hover,
.header-user.open .header-user-trigger {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(43, 54, 116, 0.06);
}

.header-user-trigger img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.header-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
}

.header-user-role {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.header-user-chevron {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    margin-left: 4px;
}

.header-user.open .header-user-chevron {
    transform: rotate(180deg);
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(43, 54, 116, 0.12);
    display: none;
    z-index: 300;
    overflow: hidden;
}

.header-user.open .header-user-dropdown {
    display: block;
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.dropdown-header img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
}

.dropdown-header strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.dropdown-header span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dropdown-menu {
    padding: 8px;
    list-style: none;
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #64748b;
    transition: all 0.2s ease;
}

.dropdown-menu li a i {
    width: 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.dropdown-menu li a:hover {
    background: #f1f5f9;
    color: var(--text-dark);
}

.dropdown-menu li a:hover i {
    color: var(--green-active);
}

.dropdown-footer {
    padding: 8px;
    border-top: 1px solid var(--border-color);
}

.dropdown-footer a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #ef4444;
    font-weight: 500;
    transition: background 0.2s ease;
}

.dropdown-footer a:hover {
    background: #fef2f2;
}

@media (max-width: 1024px) {
    .sidebar-toggle {
        display: flex;
    }

    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        padding-top: var(--header-height);
    }

    .admin-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: var(--header-height);
        z-index: 150;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    }

    .admin-content {
        padding: 14px;
        overflow-x: hidden;
    }

    .header-center {
        display: none;
    }

    .header-user-info,
    .header-user-chevron {
        display: none;
    }

    .header-user-trigger {
        padding: 4px;
        border-radius: 10px;
    }
}

@media (max-width: 640px) {
    .admin-header {
        padding: 0 12px;
        height: 60px;
    }

    .admin-main {
        padding-top: 60px;
    }

    .admin-content {
        padding: 12px;
    }

    .header-breadcrumb {
        display: none;
    }

    .header-icon-btn:last-of-type {
        display: none;
    }
}

/* Dashboard Content Grid */
.admin-content {
    padding: 15px;
    min-width: 0;
    overflow-x: clip;
}

.page-title-block {
    margin-bottom: 25px;
}

.page-title-block h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page-title-block p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 5px;
}

/* Tables */
.table-container {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 0;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.toolbar-btn {
    padding: 8px 15px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn:hover {
    background: #f8fafc;
}

.toolbar-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 15px;
    width: 250px;
}

.toolbar-search i {
    color: var(--text-muted);
    margin-right: 10px;
}

.toolbar-search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.9rem;
}

.toolbar-select {
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.9rem;
    outline: none;
    background: var(--white);
}

.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

th, td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

th {
    font-weight: 600;
    color: var(--text-dark);
    background-color: #f8fafc;
}

td {
    color: var(--text-muted);
}

td a.teal-link {
    color: var(--green-active);
    font-weight: 500;
}

td .student-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

td .student-name-cell img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

td .student-name-cell .name-info {
    display: flex;
    flex-direction: column;
}

td .student-name-cell .name-info strong {
    color: var(--text-dark);
    font-weight: 600;
}

td .student-name-cell .name-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-active {
    background-color: #d1fae5; /* Light green */
    color: #10b981; /* Green text */
}

.badge-inactive {
    background-color: #fee2e2; /* Light red */
    color: #ef4444; /* Red text */
}

.badge-cancelled {
    background-color: #f1f5f9;
    color: #64748b;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.table-footer .showing-entries {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.pagination {
    display: flex;
    gap: 5px;
}

.page-item {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    background: #f1f5f9;
}

.page-item.active {
    background: var(--green-active);
    color: var(--white);
}

.page-item:hover:not(.active) {
    background: #e2e8f0;
}

/* Checkbox styling */
.custom-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

/* Common Card Style */
.widget-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--card-shadow);
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.stat-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
}

.stat-info h4 {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-info h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 5px 0;
}

.stat-trend {
    font-size: 0.8rem;
    font-weight: 600;
}
.trend-up { color: #10b981; }
.trend-down { color: #ef4444; }
.trend-text { color: var(--text-muted); font-weight: normal; }

/* Dashboard Main Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Left col wider than right col */
    gap: 20px;
    margin-bottom: 20px;
}

/* Three column layouts for lower sections */
.dashboard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* List Items (Notice Board, Leave Requests, etc) */
.list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}
.list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.list-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.list-content {
    flex: 1;
}

.list-content h5 {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 3px;
}

.list-content p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.list-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    min-width: 70px;
}
.list-meta strong {
    color: var(--text-dark);
    display: block;
    font-size: 0.9rem;
}

/* Login Page */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: #0f172a;
}

.login-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #059669 100%);
    z-index: 0;
}

.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.4;
    pointer-events: none;
}

.login-orb-1 { width: 400px; height: 400px; background: #4318ff; top: -100px; right: -60px; }
.login-orb-2 { width: 300px; height: 300px; background: #059669; bottom: -80px; left: -40px; }
.login-orb-3 { width: 180px; height: 180px; background: #38bdf8; top: 45%; left: 30%; opacity: 0.25; }

.login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1000px;
}

.login-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.login-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 36px 28px;
    background: linear-gradient(160deg, #059669 0%, #047857 45%, #1e3a5f 100%);
    color: #fff;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.login-brand-content {
    position: relative;
    z-index: 2;
}

.login-brand-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.login-logo-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.login-logo-icon.has-logo {
    background: rgba(255, 255, 255, 0.92);
}

.login-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.login-logo-tag {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.8;
    font-weight: 600;
}

.login-brand-logo h1 {
    margin: 2px 0 0;
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.login-brand-tagline {
    font-size: 0.95rem;
    line-height: 1.65;
    opacity: 0.9;
    margin-bottom: 28px;
    max-width: 360px;
}

.login-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.login-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}

.login-feature-card:hover {
    background: rgba(255, 255, 255, 0.14);
}

.login-feature-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.login-feature-card strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.login-feature-card span {
    font-size: 0.72rem;
    opacity: 0.78;
    line-height: 1.35;
}

.login-brand-footer {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    opacity: 0.75;
}

.login-brand-footer i {
    margin-right: 6px;
}

.login-brand-shapes { display: none; }

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.login-box {
    width: 100%;
    max-width: 400px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.login-header {
    margin-bottom: 28px;
}

.login-header-badge {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 16px;
    border: 1px solid #bbf7d0;
}

.login-header h2 {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0;
}

.login-alert {
    line-height: 1.5;
}

.admin-login-field {
    margin-bottom: 18px;
}

.admin-login-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}

.admin-login-input {
    display: flex;
    align-items: stretch;
    min-height: 52px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.admin-login-input:focus-within {
    border-color: #6ee7b7;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
}

.admin-login-input-icon {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
    font-size: 1rem;
    border-right: 1px solid #e2e8f0;
}

.admin-login-input input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 14px 16px;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 500;
    color: #0f172a;
}

.admin-login-input input:focus {
    outline: none;
}

.admin-login-input input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.admin-login-input-password input {
    padding-right: 8px;
}

.admin-login-eye {
    flex-shrink: 0;
    width: 48px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.admin-login-eye:hover {
    color: #059669;
    background: #f8fafc;
}

.login-form .form-group { margin-bottom: 0; }

.input-icon-wrap { position: relative; }

.login-portal-links {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.login-portal-link {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s;
}

.login-portal-link:hover {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #059669;
}

.login-portal-link i {
    font-size: 0.9rem;
}

.login-copyright {
    text-align: center;
    margin: 20px 0 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.btn-login {
    width: 100%;
    padding: 15px 20px;
    border-radius: 14px;
    font-weight: 700;
    margin-top: 6px;
    background: linear-gradient(135deg, #059669, #047857);
}

.btn-login:hover {
    background: linear-gradient(135deg, #047857, #065f46);
}

.login-db-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.login-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 10px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.login-meta-line i {
    font-size: 0.5rem;
}

.login-meta-line--online i { color: #059669; }
.login-meta-line--offline i { color: #2563eb; }
.login-meta-line--error i { color: #dc2626; }

.login-meta-sep {
    opacity: 0.55;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.login-install-card {
    padding: 16px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.login-install-card.is-ready {
    border-style: solid;
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.login-install-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.login-install-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4338ca;
    font-size: 1rem;
    border: 1px solid #c7d2fe;
}

.login-install-card.is-ready .login-install-icon {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
    border-color: #bbf7d0;
}

.login-install-copy h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.login-install-copy p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #64748b;
}

.login-install-copy strong {
    color: #334155;
}

.login-install-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid #4338ca;
    background: #fff;
    color: #4338ca;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.login-install-btn:hover {
    background: #4338ca;
    color: #fff;
    border-color: #4338ca;
    box-shadow: 0 10px 24px rgba(67, 56, 202, 0.22);
    transform: translateY(-1px);
}

.login-install-btn:disabled {
    opacity: 0.72;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.login-install-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: 0.74rem;
    color: #64748b;
}

.login-install-note code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
}

.login-install-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
}

.login-install-status--ok {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #bbf7d0;
}

.login-db-hint strong {
    font-weight: 700;
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 900px) {
    .login-page {
        padding: 16px;
        align-items: flex-start;
        padding-top: 28px;
    }

    .login-container {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .login-brand-panel {
        padding: 28px 24px 20px;
    }

    .login-feature-grid {
        grid-template-columns: 1fr;
    }

    .login-brand-footer {
        display: none;
    }

    .login-form-panel {
        padding: 28px 24px 32px;
    }
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap .form-input,
.password-input-wrap .form-control {
    padding-right: 44px;
    width: 100%;
}

.password-input-wrap .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    font-size: 0.9rem;
    line-height: 1;
    transition: color 0.2s ease;
    z-index: 1;
}

.password-input-wrap .password-toggle:hover {
    color: #059669;
}

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.alert-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-danger i {
    font-size: 1rem;
    flex-shrink: 0;
}

.btn-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    background-color: var(--green-active);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-login {
    width: 100%;
}

.btn-admin:not(.btn-login):hover {
    background-color: #047857;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
}

.btn-admin.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
}

.btn-login i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.btn-login:hover i {
    transform: translateX(3px);
}

.login-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: var(--green-active);
}

@media (max-width: 900px) {
    .login-portal-links {
        flex-direction: column;
    }
}

/* Admin Footer */
.admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 30px;
    background-color: var(--white);
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* Pushes it to the bottom of admin-main */
    flex-wrap: wrap;
}

.admin-footer p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.admin-footer strong {
    color: var(--text-dark);
}

.footer-left {
    min-width: 0;
}

.footer-right {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-right a {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: var(--green-active);
}

@media (max-width: 768px) {
    .admin-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 16px 14px 20px;
    }

    .admin-footer p {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .footer-right {
        justify-content: center;
        gap: 14px;
    }

    .footer-right a {
        font-size: 0.78rem;
    }
}

@media (max-width: 480px) {
    .admin-footer {
        padding: 14px 12px 18px;
    }

    .footer-right {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .footer-right a {
        flex: 1;
        text-align: center;
        padding: 8px 6px;
        border-radius: 8px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        font-size: 0.72rem;
        font-weight: 600;
    }
}

/* Empty State */
.empty-state {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.empty-state-icon {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 10px;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 400px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.no-results-cell {
    text-align: center;
    border-bottom: none !important;
    padding: 0 !important;
}

/* Table Action Buttons */
.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: 0.3s;
    text-decoration: none;
}

.view-btn {
    background-color: #f8fafc;
    color: #64748b; /* Slate gray */
    border: 1px solid var(--border-color);
}
.view-btn:hover {
    background-color: #64748b;
    color: var(--white);
    border-color: #64748b;
}

.edit-btn {
    background-color: #eff6ff; /* Light blue */
    color: #3b82f6; /* Blue */
}
.edit-btn:hover {
    background-color: #3b82f6;
    color: var(--white);
}

.delete-btn {
    background-color: #fee2e2;
    color: #ef4444; /* Red */
}
.delete-btn:hover {
    background-color: #ef4444;
    color: var(--white);
}

.hide-btn {
    background-color: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.hide-btn:hover {
    background-color: #d97706;
    color: var(--white);
    border-color: #d97706;
}

.show-btn {
    background-color: #ecfdf5;
    color: #059669;
    border: 1px solid #bbf7d0;
}

.show-btn:hover {
    background-color: #059669;
    color: var(--white);
    border-color: #059669;
}

button.action-btn.hide-btn,
button.action-btn.show-btn {
    border: 1px solid transparent;
}

.nb-inline-form {
    display: inline-flex;
    margin: 0;
}

.nb-preview {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.4;
}

.nb-audience-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: #475569;
}

.nb-audience-badge i {
    color: #94a3b8;
    font-size: 0.78rem;
}

.nb-row-hidden {
    opacity: 0.72;
    background: #fafafa;
}

.nb-row-editing {
    background: #eff6ff;
}

.nb-row-editing td:first-child {
    box-shadow: inset 3px 0 0 #2563eb;
}

button.action-btn {
    border: none;
    cursor: pointer;
    padding: 0;
}

.table-action-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-inline-input {
    padding: 8px 12px;
    font-size: 0.875rem;
    min-width: 120px;
}

.hidden-form {
    display: none;
}

/* Category add form — single row */
.category-add-form {
    margin-top: 4px;
}

.category-add-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

.category-add-btn-wrap {
    min-width: 150px;
}

.category-add-btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

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

    .category-add-btn {
        width: 100%;
    }
}

/* Classes & sections management */
.table-inline-input-sm {
    max-width: 72px;
}

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid #bbf7d0;
}

/* Classes & Sections page */
.cls-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.cls-stat-strip.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .cls-stat-strip.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cls-stat-strip.cols-4 {
        grid-template-columns: 1fr;
    }
}

.cls-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--card-shadow);
}

.cls-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cls-stat-icon.cls-stat-green { background: #ecfdf5; color: #059669; }
.cls-stat-icon.cls-stat-blue  { background: #f5f3ff; color: #7c3aed; }

.cls-stat-card span {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cls-stat-card strong {
    font-size: 1.25rem;
    color: var(--text-dark);
}

.class-sections-row td {
    padding: 0 16px 18px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
}

.class-sections-panel {
    margin: 4px 0 0 24px;
    padding: 0;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.class-sections-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #ecfdf5 100%);
    border-bottom: 1px solid #e2e8f0;
}

.class-sections-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.class-sections-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.class-sections-title strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
    margin-bottom: 2px;
}

.class-sections-title span {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.section-add-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.section-add-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.section-add-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-add-input {
    width: 56px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    padding: 8px 10px;
}

.class-sections-empty {
    text-align: center;
    padding: 28px 20px;
    color: var(--text-muted);
}

.class-sections-empty i {
    font-size: 1.75rem;
    opacity: 0.35;
    margin-bottom: 10px;
    display: block;
}

.class-sections-empty p {
    margin: 0;
    font-size: 0.88rem;
}

.section-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 16px 18px 18px;
}

.section-chip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.section-chip:hover {
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.08);
}

.section-chip.is-active {
    border-color: #bbf7d0;
    background: linear-gradient(145deg, #fff 0%, #f0fdf4 100%);
}

.section-chip.is-inactive {
    border-color: #fecaca;
    background: linear-gradient(145deg, #fff 0%, #fef2f2 100%);
    opacity: 0.92;
}

.section-chip-badge {
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(160deg, #059669, #047857);
    flex-shrink: 0;
}

.section-chip.is-inactive .section-chip-badge {
    background: linear-gradient(160deg, #94a3b8, #64748b);
}

.section-chip-main {
    padding: 10px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-chip-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    line-height: 1;
}

.section-chip-input {
    width: 100%;
    padding: 7px 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.section-chip-select {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}

.section-chip-status-active {
    background: #ecfdf5;
    color: #059669;
    border-color: #bbf7d0;
}

.section-chip-status-inactive {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.section-chip-actions {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e2e8f0;
}

.section-chip-btn {
    flex: 1;
    width: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}

.section-chip-btn-save {
    color: #059669;
    border-bottom: 1px solid #e2e8f0;
}

.section-chip-btn-save:hover {
    background: #ecfdf5;
    color: #047857;
}

.section-chip-btn-delete {
    color: #ef4444;
}

.section-chip-btn-delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

@media (max-width: 768px) {
    .cls-stat-strip {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .cls-stat-card {
        padding: 14px;
        border-radius: 12px;
        gap: 10px;
    }

    .cls-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 1rem;
    }

    .cls-stat-card strong {
        font-size: 1.1rem;
    }

    .class-sections-row td {
        padding: 0 10px 14px !important;
    }

    .class-sections-panel {
        margin: 0;
        border-radius: 12px;
        width: 100%;
        min-width: 0;
    }

    .class-sections-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .class-sections-title {
        gap: 10px;
        min-width: 0;
    }

    .class-sections-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 0.88rem;
    }

    .class-sections-title strong {
        font-size: 0.9rem;
    }

    .class-sections-title span {
        font-size: 0.74rem;
        word-break: break-word;
    }

    .section-add-inline {
        align-items: stretch;
        width: 100%;
        padding-top: 4px;
        border-top: 1px dashed #e2e8f0;
    }

    .section-add-label {
        text-align: left;
    }

    .section-add-field {
        width: 100%;
    }

    .section-add-input {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .section-add-field .btn-header-action {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .class-sections-empty {
        padding: 22px 14px;
    }

    .class-sections-empty p {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .section-chips {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        width: 100%;
        min-width: 0;
    }

    .section-chip {
        display: flex;
        flex-direction: column;
        border-radius: 14px;
        min-width: 0;
        width: 100%;
        overflow: hidden;
    }

    .section-chip-badge {
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 10px 14px;
        font-size: 1.15rem;
        letter-spacing: 0.04em;
    }

    .section-chip-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        padding: 12px;
        align-items: end;
    }

    .section-chip-main .section-chip-label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .section-chip-main .section-chip-input { grid-column: 1; grid-row: 2; }
    .section-chip-main .section-chip-label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .section-chip-main .section-chip-select { grid-column: 2; grid-row: 2; }

    .section-chip-input,
    .section-chip-select {
        width: 100%;
        min-width: 0;
        font-size: 0.86rem;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .section-chip-actions {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    .section-chip-btn {
        width: auto;
        flex: 1;
        min-height: 44px;
        font-size: 0.9rem;
        gap: 6px;
    }

    .section-chip-btn-save {
        border-bottom: none;
        border-right: 1px solid #e2e8f0;
    }

    .section-chip-btn-save::after {
        content: 'Save';
        font-size: 0.78rem;
        font-weight: 700;
    }

    .section-chip-btn-delete::after {
        content: 'Delete';
        font-size: 0.78rem;
        font-weight: 700;
    }
}

@media (max-width: 480px) {
    .cls-stat-strip {
        grid-template-columns: 1fr;
    }

    .class-sections-row td {
        padding: 0 8px 12px !important;
    }

    .section-chip-main {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .section-chip-main .section-chip-label:nth-of-type(1),
    .section-chip-main .section-chip-input,
    .section-chip-main .section-chip-label:nth-of-type(2),
    .section-chip-main .section-chip-select {
        grid-column: 1;
        grid-row: auto;
    }

    .section-add-field {
        flex-wrap: wrap;
    }

    .section-add-field .btn-header-action {
        width: 100%;
        justify-content: center;
    }
}

/* Student promote page */
.promo-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: end;
    margin-bottom: 16px;
}

.promo-flow-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 6px;
}

.promo-flow-arrow {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 2px;
}

.promo-flow-readonly {
    background: #f8fafc;
    font-weight: 700;
    color: #059669;
}

.promo-preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    margin-bottom: 16px;
}

.promo-preview-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.promo-preview-text strong {
    display: block;
    color: #1e40af;
    margin-bottom: 2px;
}

.promo-preview-text span {
    font-size: 0.88rem;
    color: #475569;
}

.promo-next-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid #bbf7d0;
}

.promo-final-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
    .promo-flow {
        grid-template-columns: 1fr;
    }

    .promo-flow-arrow {
        margin: 0 auto;
        transform: rotate(90deg);
    }
}

/* Student search & documents */
.student-search-results,
.erp-search-results.student-search-results {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.erp-search-item.student-search-card {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #7c3aed;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.erp-search-item.student-search-card:hover {
    color: inherit;
    border-color: #c4b5fd;
    border-left-color: #6d28d9;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.1);
    transform: translateY(-1px);
}

.erp-search-item.student-search-card.student-search-link:hover {
    color: inherit;
}

.student-search-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    flex: 1;
    min-width: 0;
}

.student-search-avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(145deg, #ede9fe 0%, #f5f3ff 100%);
    border: 1px solid #ddd6fe;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.student-search-info {
    flex: 1;
    min-width: 0;
}

.student-search-info strong {
    display: block;
    font-size: 0.98rem;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.25;
}

.student-search-info span {
    display: block;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.35;
}

.student-search-info .student-search-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.student-search-class-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid #bbf7d0;
}

.student-search-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 16px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}

.erp-search-item.student-search-card:hover .student-search-go {
    background: #7c3aed;
    color: #fff;
}

/* Student search link cards (fee collect, documents, etc.) */
.erp-search-item.student-search-card.student-search-link {
    align-items: center;
}

.erp-search-item.student-search-card.student-search-fee {
    border-left-color: #ea580c;
}

.erp-search-item.student-search-card.student-search-fee:hover {
    border-color: #fdba74;
    border-left-color: #c2410c;
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.12);
}

.student-search-avatar.is-initials {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #6d28d9;
}

.student-search-fee .student-search-avatar.is-initials {
    background: linear-gradient(145deg, #ffedd5 0%, #fff7ed 100%);
    border-color: #fed7aa;
    color: #c2410c;
}

.student-search-id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.student-search-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 600;
}

.student-search-id-chip i {
    color: #94a3b8;
    font-size: 0.7rem;
}

.student-search-link-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-left: auto;
    flex-shrink: 0;
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 1px solid #fed7aa;
    min-height: 100%;
}

.student-search-fee .student-search-link-action {
    background: linear-gradient(180deg, #fff7ed 0%, #fef3c7 100%);
}

.student-search-link-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #c2410c;
    white-space: nowrap;
}

.student-search-link .student-search-go {
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #fed7aa;
    color: #ea580c;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.1);
}

.erp-search-item.student-search-card.student-search-link:hover .student-search-go {
    background: linear-gradient(145deg, #ea580c, #c2410c);
    border-color: #c2410c;
    color: #fff;
    transform: translateX(2px);
}

.student-search-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    font-size: 0.88rem;
    color: #5b21b6;
    font-weight: 600;
}

.student-search-results-head i {
    margin-right: 6px;
    opacity: 0.85;
}

.student-search-results-head small {
    font-size: 0.78rem;
    font-weight: 500;
    color: #7c3aed;
}

.student-search-results-head + .student-search-results {
    margin-top: 12px;
}

.student-search-empty {
    margin-top: 16px;
    padding: 36px 24px;
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
}

.student-search-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.student-search-empty h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #0f172a;
}

.student-search-empty p {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
}

.student-search-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 1px solid #e2e8f0;
    min-width: min(100%, 320px);
}

.student-search-actions-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    width: 100%;
    margin-bottom: -4px;
}

.student-portal-card .student-search-actions .form-input,
.student-portal-card .student-search-actions .form-select {
    padding: 9px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
    min-width: 130px;
}

.student-portal-pass {
    max-width: 180px;
    min-width: 140px;
    flex: 1;
}

.student-search-actions .btn-header-action {
    white-space: nowrap;
    flex-shrink: 0;
}

.student-portal-card {
    flex-wrap: nowrap;
}

@media (max-width: 900px) {
    .erp-search-item.student-search-card,
    .student-portal-card {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .student-search-actions {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e2e8f0;
    }

    .student-portal-pass,
    .student-portal-card .student-search-actions .form-select {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .student-search-go {
        position: absolute;
        top: 16px;
        right: 12px;
        margin: 0;
    }

    .student-search-link-action {
        width: 100%;
        border-left: none;
        border-top: 1px solid #fed7aa;
        justify-content: space-between;
        min-height: auto;
    }

    .erp-search-item.student-search-card.student-search-link {
        position: relative;
        flex-direction: column;
        align-items: stretch;
    }

    .erp-search-item.student-search-card.student-search-link:not(.student-search-fee) {
        padding-right: 56px;
    }
}

.student-doc-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 22px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #fff 100%);
    border: 1px solid #ddd6fe;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
}

.student-doc-banner-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.student-doc-banner-info {
    flex: 1;
    min-width: 200px;
}

.student-doc-banner-info h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    color: #0f172a;
}

.student-doc-banner-info p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.86rem;
    color: #64748b;
}

.student-doc-banner-info p span i {
    margin-right: 4px;
    color: #7c3aed;
}

.doc-upload-grid {
    margin-bottom: 0;
}

.doc-file-input-wrap {
    position: relative;
}

.doc-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.doc-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #64748b;
    transition: border-color 0.15s, background 0.15s;
}

.doc-file-label:hover {
    border-color: #7c3aed;
    background: #faf5ff;
    color: #6d28d9;
}

.doc-file-label i {
    color: #7c3aed;
}

.doc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 4px 0 8px;
}

.doc-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.doc-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08);
}

.doc-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.doc-icon-pdf { background: #fef2f2; color: #dc2626; }
.doc-icon-image { background: #eff6ff; color: #2563eb; }
.doc-icon-file { background: #f1f5f9; color: #64748b; }

.doc-card-body {
    min-width: 0;
}

.doc-card-type {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7c3aed;
    margin-bottom: 2px;
}

.doc-card-name {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.doc-card-date {
    font-size: 0.76rem;
    color: #94a3b8;
}

.doc-card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-card-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.doc-card-btn-view {
    background: #eff6ff;
    color: #2563eb;
}

.doc-card-btn-view:hover {
    background: #dbeafe;
}

.doc-card-btn-delete {
    background: #fef2f2;
    color: #ef4444;
}

.doc-card-btn-delete:hover {
    background: #fee2e2;
}

.tab-empty-pad-sm {
    padding: 36px 20px !important;
    margin: 12px 0 0 !important;
    border-radius: 14px !important;
}

.tab-empty-pad-sm .tab-empty-icon {
    width: 56px;
    height: 56px;
    font-size: 1.35rem;
    margin-bottom: 14px;
}

.tab-empty-pad-sm h3 {
    font-size: 1rem;
}

.table-empty-cell {
    text-align: center;
    color: #94a3b8;
    padding: 28px 16px !important;
    font-size: 0.9rem;
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    max-height: 320px;
    overflow-y: auto;
    z-index: 200;
}

.header-center .search-bar {
    position: relative;
}

.global-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
}

.global-search-item:hover {
    background: #f0fdf4;
}

.global-search-item i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-search-item strong {
    display: block;
    font-size: 0.9rem;
}

.global-search-item span {
    font-size: 0.78rem;
    color: #64748b;
}

.global-search-empty {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.88rem;
}

/* Transport & Hostel modules */
.erp-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.erp-vehicle-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.erp-vehicle-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
    border-color: #93c5fd;
}

.erp-vehicle-card.is-inactive {
    opacity: 0.88;
}

.erp-vehicle-card.is-inactive .erp-vehicle-card-top {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.erp-vehicle-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #0891b2 100%);
    color: #fff;
}

.erp-vehicle-plate-label {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 2px;
}

.erp-vehicle-plate strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-family: ui-monospace, 'Cascadia Code', monospace;
}

.erp-vehicle-status {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.erp-vehicle-card.is-inactive .erp-vehicle-status {
    background: rgba(0, 0, 0, 0.15);
}

.erp-vehicle-visual {
    position: relative;
    padding: 20px 16px 12px;
    text-align: center;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px dashed #e2e8f0;
}

.erp-vehicle-bus-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 100%);
    border: 2px solid #bfdbfe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.8);
}

.erp-vehicle-card.is-inactive .erp-vehicle-bus-icon {
    background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
    border-color: #cbd5e1;
    color: #64748b;
}

.erp-vehicle-model {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
}

.erp-vehicle-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.erp-vehicle-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    background: #fff;
    text-align: center;
}

.erp-vehicle-stat i {
    font-size: 0.85rem;
    color: #2563eb;
    margin-bottom: 2px;
}

.erp-vehicle-stat strong {
    font-size: 1.15rem;
    line-height: 1.1;
    color: #0f172a;
}

.erp-vehicle-stat span {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.erp-vehicle-capacity {
    padding: 12px 16px;
    background: #fafafa;
}

.erp-vehicle-capacity-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.78rem;
    color: #64748b;
}

.erp-vehicle-capacity-head strong {
    color: #0f172a;
    font-size: 0.82rem;
}

.erp-vehicle-driver {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
    border-top: 1px solid #ecfdf5;
}

.erp-vehicle-driver-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.erp-vehicle-driver-info {
    min-width: 0;
}

.erp-vehicle-driver-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 2px;
}

.erp-vehicle-driver-info strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
    margin-bottom: 2px;
}

.erp-vehicle-driver-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #059669;
    text-decoration: none;
    font-weight: 600;
}

.erp-vehicle-driver-phone:hover {
    color: #047857;
    text-decoration: underline;
}

.erp-vehicle-driver-empty {
    padding: 14px 16px;
    text-align: center;
    font-size: 0.84rem;
    color: #94a3b8;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.erp-vehicle-driver-empty i {
    margin-right: 6px;
    opacity: 0.7;
}

.erp-route-panel {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    background: #f8fafc;
}

.erp-route-panel:last-child {
    margin-bottom: 0;
}

.erp-route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #ecfdf5 100%);
    border-bottom: 1px solid #e2e8f0;
}

.erp-route-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.erp-route-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #2563eb, #059669);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.erp-route-title strong {
    display: block;
    font-size: 0.95rem;
}

.erp-route-title span {
    font-size: 0.8rem;
    color: #64748b;
}

.erp-stop-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

.erp-stop-field {
    flex: 1;
    min-width: 160px;
}

.erp-stop-field-sm {
    width: 120px;
    flex-shrink: 0;
}

.erp-stop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    background: #fff;
}

.erp-stop-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 0.85rem;
}

.erp-stop-num {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #059669;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.erp-stop-chip strong {
    display: block;
    font-size: 0.85rem;
}

.erp-stop-chip span {
    font-size: 0.75rem;
    color: #64748b;
}

.erp-route-empty {
    padding: 16px;
    margin: 0;
    color: #94a3b8;
    font-size: 0.88rem;
    background: #fff;
}

.erp-assign-select {
    max-width: 200px;
    min-width: 140px;
}

.erp-hostel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.erp-hostel-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(145deg, #fff 0%, #f5f3ff 100%);
    border: 1px solid #ddd6fe;
    border-radius: 14px;
}

.erp-hostel-body {
    flex: 1;
    min-width: 0;
}

.erp-hostel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.erp-hostel-delete {
    flex-shrink: 0;
}

.erp-hostel-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.erp-hostel-card strong {
    display: block;
    margin-bottom: 2px;
}

.erp-hostel-card > div > span {
    font-size: 0.84rem;
    color: #64748b;
}

.erp-hostel-card small {
    display: block;
    margin-top: 6px;
    font-size: 0.76rem;
    color: #94a3b8;
}

.erp-occupancy-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 4px;
}

.erp-occupancy-bar-sm {
    width: 80px;
    flex-shrink: 0;
}

.erp-occupancy-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 999px;
    transition: width 0.3s;
}

.erp-occupancy-fill.is-full {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.erp-occupancy-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {
    .erp-stop-add-row {
        flex-direction: column;
        align-items: stretch;
    }

    .erp-stop-field-sm {
        width: 100%;
    }

    .erp-assign-select {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .student-doc-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-portal-pass {
        max-width: 100%;
        width: 100%;
    }

    .doc-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ERP modules */
.erp-filter-row {
    grid-template-columns: repeat(3, 1fr) auto;
}

.erp-filter-row-4 {
    grid-template-columns: repeat(4, 1fr) auto;
    display: grid;
    gap: 16px;
    align-items: end;
}

@media (max-width: 992px) {
    .erp-filter-row,
    .erp-filter-row-4 {
        grid-template-columns: 1fr;
    }
}

.form-field-grow {
    flex: 1;
}

.erp-search-results {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.erp-search-item {
    display: block;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
    text-decoration: none;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.erp-search-item:not(.student-search-card):hover {
    border-color: #059669;
    color: #059669;
}

.erp-fee-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    padding: 8px 0;
}

.erp-fee-summary span {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.erp-fee-summary strong {
    font-size: 1.1rem;
    color: #334155;
}

/* Fee Collect — student search */
.fc-search-card .section-card-header {
    margin-bottom: 16px;
}

.fc-search-tabs {
    display: flex;
    gap: 8px;
    padding: 0 22px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
}

.fc-search-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fc-search-tab:hover {
    color: #334155;
    background: #f1f5f9;
}

.fc-search-tab.is-active {
    color: #ea580c;
    background: #fff7ed;
    border-color: #fed7aa;
}

.fc-search-form {
    align-items: end;
}

.fc-search-type-field {
    min-width: 170px;
    flex: 0 0 170px;
}

@media (max-width: 768px) {
    .fc-search-tabs {
        flex-direction: column;
        padding-left: 16px;
        padding-right: 16px;
    }

    .fc-search-type-field {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Fee Collect — selected student */
.fc-student-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 45%, #f59e0b 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(234, 88, 12, 0.22);
}

.fc-student-hero-main {
    display: flex;
    align-items: center;
    gap: 18px;
}

.fc-student-hero-label {
    margin: 0 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.fc-student-hero h3 {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 800;
}

.fc-student-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.fc-student-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fc-student-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.76rem;
    font-weight: 600;
}

.fc-student-chip.is-success {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.45);
}

.fc-student-chip.is-warning {
    background: rgba(254, 243, 199, 0.35);
    border-color: rgba(253, 224, 71, 0.55);
}

.fc-no-structure-note {
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #92400e;
    margin-bottom: 12px;
}

.fc-no-structure-note i {
    margin-right: 6px;
}

.fc-no-structure-note a {
    color: #b45309;
    font-weight: 700;
}

.fc-fee-breakdown {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.fc-fee-breakdown-title {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.fc-fee-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.86rem;
    color: #475569;
}

.fc-fee-breakdown-title i {
    margin-right: 5px;
    color: #64748b;
    font-size: 0.68rem;
}

.fc-fee-head-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-fee-head-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    font-size: 0.82rem;
    color: #475569;
}

.fc-fee-head-item strong {
    color: #0f172a;
    font-size: 0.84rem;
    white-space: nowrap;
}

.fc-monthly-breakdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.fc-monthly-breakdown-head .fc-fee-breakdown-title {
    margin: 0;
}

.fc-month-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fc-month-legend .is-paid { color: #059669; }
.fc-month-legend .is-partial { color: #d97706; }
.fc-month-legend .is-pending { color: #64748b; }

.fc-month-chip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

.fc-monthly-chip.is-paid small {
    color: #059669;
}

.fc-monthly-breakdown {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.fc-monthly-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.fc-monthly-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 10px 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
}

.fc-monthly-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.fc-monthly-chip span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    text-transform: none;
    letter-spacing: 0;
}

.fc-monthly-chip strong {
    font-size: 0.92rem;
    color: #0f172a;
    line-height: 1.2;
}

.fc-monthly-chip.is-current {
    box-shadow: inset 0 0 0 2px #3b82f6;
}

.fc-monthly-chip.is-current span {
    color: #1d4ed8;
}

.fc-month-status-grid {
    grid-template-columns: repeat(2, 1fr);
}

.fc-month-status-chip {
    position: relative;
    gap: 4px;
}

.fc-month-status-chip small {
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.35;
}

.fc-month-status-badge {
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc-monthly-chip.is-paid {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.fc-monthly-chip.is-paid .fc-month-status-badge {
    background: #d1fae5;
    color: #059669;
}

.fc-monthly-chip.is-partial {
    background: #fff7ed;
    border-color: #fed7aa;
}

.fc-monthly-chip.is-partial .fc-month-status-badge {
    background: #ffedd5;
    color: #ea580c;
}

.fc-monthly-chip.is-pending {
    background: #fef2f2;
    border-color: #fecaca;
}

.fc-monthly-chip.is-pending .fc-month-status-badge {
    background: #fee2e2;
    color: #dc2626;
}

.fc-collect-form .form-field-span-2 {
    grid-column: 1 / -1;
}

.fc-pay-type-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fc-pay-type-opt {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.fc-pay-type-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fc-pay-type-opt span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fc-pay-type-opt.is-active span,
.fc-pay-type-opt input:checked + span {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #ea580c;
}

.fc-pay-preview {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.fc-pay-breakup-title {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.fc-pay-breakup-title i {
    color: #ea580c;
    margin-right: 6px;
}

.fc-pay-breakup {
    margin-bottom: 12px;
}

.fc-pay-breakup-empty {
    margin: 0;
    font-size: 0.82rem;
    color: #94a3b8;
}

.fc-pay-breakup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.fc-pay-breakup-table thead th {
    padding: 8px 12px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.fc-pay-breakup-table thead th:last-child,
.fc-pay-breakup-table tbody td:last-child,
.fc-pay-breakup-table tfoot td:last-child {
    text-align: right;
}

.fc-pay-breakup-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.fc-pay-breakup-table tbody td:last-child {
    font-weight: 700;
    color: #0f172a;
}

.fc-pay-breakup-table tfoot td {
    padding: 10px 12px;
    background: #fff7ed;
    font-weight: 800;
    color: #ea580c;
    border-top: 1px solid #fed7aa;
}

.fc-pay-summary {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.fc-pay-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.84rem;
}

.fc-pay-preview-row span {
    color: #64748b;
    font-weight: 600;
}

.fc-pay-preview-row strong {
    color: #0f172a;
}

.fc-pay-preview-row.is-pending strong {
    color: #dc2626;
}

.fc-pay-preview-row.is-clear strong {
    color: #059669;
}

.fc-fee-stat.is-month .fc-fee-stat-icon { background: #fff7ed; color: #ea580c; }

.fc-optional-fee-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #64748b;
}

.fc-optional-fee-note i {
    margin-right: 5px;
    color: #94a3b8;
}

.fc-all-paid-note {
    margin: 0;
    padding: 12px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #047857;
    font-weight: 600;
}

.fc-all-paid-note i {
    margin-right: 6px;
}

.fc-fix-month-cell {
    min-width: 118px;
}

.fc-fix-month-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fc-fix-month-form .form-select {
    min-width: 72px;
    padding: 6px 8px;
    font-size: 0.78rem;
}

.fc-fix-month-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    cursor: pointer;
}

.fc-fix-month-btn:hover {
    background: #dbeafe;
}

.fc-student-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fc-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    text-decoration: none;
    transition: all 0.2s;
}

.fc-hero-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.fc-hero-btn.is-solid {
    background: #fff;
    color: #c2410c;
    border-color: #fff;
}

.fc-hero-btn.is-solid:hover {
    background: #fff7ed;
    color: #9a3412;
}

.fc-fee-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.fc-fee-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
}

.fc-fee-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fc-fee-stat.is-due .fc-fee-stat-icon { background: #eff6ff; color: #2563eb; }
.fc-fee-stat.is-paid .fc-fee-stat-icon { background: #ecfdf5; color: #059669; }
.fc-fee-stat.is-balance .fc-fee-stat-icon { background: #fef2f2; color: #dc2626; }
.fc-fee-stat.is-balance.is-clear .fc-fee-stat-icon { background: #ecfdf5; color: #059669; }
.fc-fee-stat.is-history .fc-fee-stat-icon { background: #fff7ed; color: #ea580c; }

.fc-fee-stat span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.fc-fee-stat strong {
    font-size: 1.15rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.fc-fee-stat.is-balance strong { color: #dc2626; }
.fc-fee-stat.is-balance.is-clear strong { color: #059669; }

.fc-collect-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 20px;
    align-items: start;
}

.fc-summary-panel {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    position: sticky;
    top: 16px;
}

.fc-summary-hero {
    padding: 18px 18px 14px;
    background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 48%, #3b82f6 100%);
    color: #fff;
}

.fc-summary-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fc-summary-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 4px;
}

.fc-summary-hero h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.fc-summary-ring {
    --pct: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(#86efac calc(var(--pct) * 1%), rgba(255, 255, 255, 0.18) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-summary-ring-inner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.fc-summary-ring-inner strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
}

.fc-summary-ring-inner span {
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
}

.fc-summary-hero .fc-progress-wrap {
    margin-bottom: 12px;
}

.fc-summary-hero .fc-progress-bar {
    height: 7px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 6px;
}

.fc-summary-hero .fc-progress-fill {
    background: linear-gradient(90deg, #6ee7b7, #34d399);
}

.fc-summary-hero .fc-progress-labels {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
}

.fc-summary-hero .fc-balance-alert,
.fc-summary-hero .fc-cleared-note,
.fc-summary-hero .fc-no-structure-note {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.78rem;
}

.fc-summary-hero .fc-no-structure-note a {
    color: #fde68a;
}

.fc-summary-hero .fc-session-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.74rem;
}

.fc-summary-body {
    padding: 16px 18px 18px;
    background: #fff;
}

.fc-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.fc-summary-head h4 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-paid-badge {
    padding: 4px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 700;
}

.fc-progress-wrap {
    margin-bottom: 16px;
}

.fc-progress-bar {
    height: 10px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.fc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.fc-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.fc-balance-alert {
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #991b1b;
    margin-bottom: 12px;
}

.fc-balance-alert i {
    margin-right: 6px;
}

.fc-cleared-note {
    padding: 12px 14px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #065f46;
    margin-bottom: 12px;
}

.fc-cleared-note i {
    margin-right: 6px;
}

.fc-session-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.fc-session-note i {
    margin-right: 6px;
    color: #94a3b8;
}

.fc-collect-form-card {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 28px rgba(234, 88, 12, 0.08);
}

.fc-form-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 55%, #fef3c7 100%);
    border-bottom: 1px solid #fed7aa;
}

.fc-form-head-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(145deg, #ea580c, #c2410c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.28);
}

.fc-form-head h4 {
    margin: 0 0 4px;
    font-size: 1.08rem;
    color: #9a3412;
    font-weight: 800;
}

.fc-form-head p {
    margin: 0;
    font-size: 0.82rem;
    color: #c2410c;
    opacity: 0.88;
}

.fc-collect-form {
    padding: 20px 22px 22px;
    background: #fff;
}

.fc-collect-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.fc-collect-form-grid .fc-field-amount {
    grid-column: 1 / -1;
}

.fc-form-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.fc-collect-form label i {
    margin-right: 5px;
    color: #ea580c;
    font-size: 0.82rem;
}

.fc-field-amount .fc-amount-input {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    padding: 12px 14px;
    border-color: #fed7aa;
    background: #fffbf5;
}

.fc-field-amount .fc-amount-input:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}

.fc-field-amount .fc-pay-preview {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #e2e8f0;
}

.fc-amount-input {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.fc-month-balance-note {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.fc-month-cell {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.fc-submit-btn {
    padding: 13px 26px !important;
    font-size: 0.95rem !important;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.22);
}

.fc-history-card {
    padding: 0!important;
    overflow: hidden;
}

.fc-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.fc-history-head h4 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-history-count {
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.76rem;
    font-weight: 700;
}

.fc-history-table {
    width: 100%;
    border-collapse: collapse;
}

.fc-history-table th {
    padding: 12px 18px;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.fc-history-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
}

.fc-history-table tbody tr:hover {
    background: #fafafa;
}

.fc-date-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
}

.fc-date-cell i {
    color: #94a3b8;
    font-size: 0.78rem;
}

.fc-receipt-code {
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #475569;
}

.fc-amount-cell {
    color: #059669;
    font-size: 0.95rem;
}

.fc-method-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.fc-method-badge.fc-method-cash { background: #ecfdf5; color: #059669; }
.fc-method-badge.fc-method-upi { background: #eff6ff; color: #2563eb; }
.fc-method-badge.fc-method-card { background: #f5f3ff; color: #7c3aed; }
.fc-method-badge.fc-method-bank-transfer { background: #fff7ed; color: #c2410c; }
.fc-method-badge.fc-method-cheque { background: #f8fafc; color: #64748b; }

.fc-receipt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0891b2;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    text-decoration: none;
    transition: all 0.15s;
}

.fc-receipt-link:hover {
    background: #0891b2;
    color: #fff;
    border-color: #0891b2;
}

.fc-no-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 24px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    color: #64748b;
    font-size: 0.9rem;
}

.fc-no-payments i {
    font-size: 1.4rem;
    color: #94a3b8;
}

@media (max-width: 1100px) {
    .fc-fee-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .fc-collect-layout {
        grid-template-columns: 1fr;
    }

    .fc-summary-panel {
        position: static;
    }

    .fc-collect-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .fc-student-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .fc-student-hero-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .fc-fee-stat-strip {
        grid-template-columns: 1fr;
    }

    .fc-history-table {
        font-size: 0.82rem;
    }

    .fc-history-table th,
    .fc-history-table td {
        padding: 10px 12px;
    }
}

/* Fee Structure (fees.php) */
.fs-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 45%, #f59e0b 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(234, 88, 12, 0.22);
}

.fs-hero-label {
    margin: 0 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.fs-hero-main h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
}

.fs-hero-main p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.92;
    max-width: 520px;
}

.fs-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 10px;
}

.fs-hero-stat {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    text-align: center;
}

.fs-hero-stat span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-bottom: 4px;
}

.fs-hero-stat strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.fs-hero-stat.is-highlight {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.42);
}

.fs-quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.fs-quick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: var(--card-shadow);
    transition: all 0.15s;
}

.fs-quick-link i {
    color: #ea580c;
}

.fs-quick-link:hover {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.fs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 500px);
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}

.fs-class-card,
.fs-heads-card,
.fs-structure-card {
    padding: 0!important;
    overflow: hidden;
}

.fs-card-head,
.fs-structure-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.fs-card-head h4,
.fs-structure-title h4 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.fs-card-head p,
.fs-structure-title p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.fs-card-head-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #ea580c;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fs-card-head-icon.is-blue {
    background: #eff6ff;
    color: #2563eb;
}

.fs-card-head-text {
    flex: 1;
    min-width: 0;
}

.fs-head-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.fs-heads-card .fs-card-head {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.fs-add-head-btn {
    margin-left: auto;
    white-space: nowrap;
}

.fs-class-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff7ed;
    color: #ea580c;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.fs-class-card .fs-card-head {
    flex-wrap: wrap;
}

.fs-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    padding: 18px 22px 22px;
}

.fs-class-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 13px;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
    min-height: 118px;
    overflow: hidden;
}

.fs-class-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.15s;
}

.fs-class-pill.is-configured::before {
    background: linear-gradient(90deg, #059669, #34d399);
}

.fs-class-pill.is-empty::before {
    background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
}

.fs-class-pill.is-active::before {
    background: linear-gradient(90deg, #ea580c, #fb923c);
}

.fs-class-pill:hover {
    border-color: #fdba74;
    background: #fffbf5;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.1);
}

.fs-class-pill.is-active {
    border-color: #ea580c;
    background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 100%);
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.16);
}

.fs-class-pill.is-empty {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.fs-class-pill-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.fs-class-pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.fs-class-pill.is-configured .fs-class-pill-icon {
    background: #ecfdf5;
    color: #059669;
}

.fs-class-pill.is-active .fs-class-pill-icon {
    background: #ffedd5;
    color: #ea580c;
}

.fs-class-pill-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.fs-class-pill-status i {
    font-size: 0.58rem;
}

.fs-class-pill-status.is-set {
    background: #ecfdf5;
    color: #059669;
}

.fs-class-pill-status.is-pending {
    background: #f1f5f9;
    color: #94a3b8;
}

.fs-class-pill-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.25;
    word-break: break-word;
}

.fs-class-pill.is-active .fs-class-pill-name {
    color: #9a3412;
}

.fs-class-pill-amount {
    font-size: 1.05rem;
    font-weight: 800;
    color: #059669;
    line-height: 1.2;
    margin-top: auto;
}

.fs-class-pill.is-active .fs-class-pill-amount {
    color: #047857;
}

.fs-class-pill-meta {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
}

.fs-class-pill-empty {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 700;
    margin-top: auto;
}

.fs-class-pill.is-empty .fs-class-pill-meta {
    color: #ea580c;
    font-weight: 700;
}

.fs-empty-note {
    padding: 0 22px 20px;
    font-size: 0.86rem;
    color: #64748b;
}

.fs-head-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.fs-head-list::-webkit-scrollbar {
    width: 6px;
}

.fs-head-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.fs-head-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.fs-head-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}

.fs-head-row.tone-purple { background: linear-gradient(180deg, #fff 0%, #faf5ff 100%); border-color: #ddd6fe; }
.fs-head-row.tone-teal { background: linear-gradient(180deg, #fff 0%, #ecfeff 100%); border-color: #a5f3fc; }
.fs-head-row.tone-blue { background: linear-gradient(180deg, #fff 0%, #eff6ff 100%); border-color: #bfdbfe; }
.fs-head-row.tone-orange { background: linear-gradient(180deg, #fff 0%, #fff7ed 100%); border-color: #fed7aa; }
.fs-head-row.tone-indigo { background: linear-gradient(180deg, #fff 0%, #eef2ff 100%); border-color: #c7d2fe; }
.fs-head-row.tone-slate { background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); border-color: #e2e8f0; }

.fs-head-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.fs-head-row.tone-purple .fs-head-row-icon { background: #ede9fe; color: #7c3aed; }
.fs-head-row.tone-teal .fs-head-row-icon { background: #cffafe; color: #0891b2; }
.fs-head-row.tone-blue .fs-head-row-icon { background: #dbeafe; color: #2563eb; }
.fs-head-row.tone-orange .fs-head-row-icon { background: #ffedd5; color: #ea580c; }
.fs-head-row.tone-indigo .fs-head-row-icon { background: #e0e7ff; color: #4f46e5; }
.fs-head-row.tone-slate .fs-head-row-icon { background: #e2e8f0; color: #64748b; }

.fs-head-row-body {
    min-width: 0;
}

.fs-head-row-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 6px;
    word-break: break-word;
}

.fs-head-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-head-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.fs-head-delete-form {
    display: inline-flex;
    margin: 0;
}

.fs-head-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fs-head-badge i {
    font-size: 0.58rem;
}

.fs-head-badge.is-optional { background: #f5f3ff; color: #7c3aed; }
.fs-head-badge.is-onetime { background: #fff7ed; color: #ea580c; }
.fs-head-badge.is-standard { background: #f1f5f9; color: #64748b; }

.fs-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}

.fs-head-btn.is-edit {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.fs-head-btn.is-edit:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.fs-head-btn.is-delete {
    color: #94a3b8;
}

.fs-head-btn.is-delete:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.fs-head-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-head-toggle-group.is-modal {
    margin-top: 4px;
}

.fs-head-toggle {
    cursor: pointer;
    user-select: none;
}

.fs-head-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.fs-head-toggle-ui {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
    transition: all 0.15s;
}

.fs-head-toggle-ui i {
    font-size: 0.68rem;
    opacity: 0.85;
}

.fs-head-toggle:hover .fs-head-toggle-ui {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.fs-head-toggle.is-optional:has(input:checked) .fs-head-toggle-ui {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #6d28d9;
}

.fs-head-toggle.is-onetime:has(input:checked) .fs-head-toggle-ui {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

.fs-head-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 42px 24px 48px;
    text-align: center;
}

.fs-head-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.fs-head-empty h5 {
    margin: 0;
    font-size: 1rem;
    color: #334155;
}

.fs-head-empty p {
    margin: 0;
    max-width: 320px;
    font-size: 0.86rem;
    color: #94a3b8;
    line-height: 1.5;
}

body.fs-modal-open {
    overflow: hidden;
}

.fs-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fs-modal.is-open {
    display: flex;
}

.fs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(3px);
}

.fs-modal-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    animation: fsModalIn 0.22s ease;
}

@keyframes fsModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fs-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.fs-modal-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.fs-modal-header-icon.is-edit {
    background: linear-gradient(135deg, #ea580c, #f97316);
}

.fs-modal-header h3 {
    margin: 0 0 4px;
    font-size: 1.08rem;
    color: #0f172a;
}

.fs-modal-header p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.fs-modal-close {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.fs-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.fs-modal-body {
    padding: 20px 22px 8px;
}

.fs-modal-body .form-field {
    margin-bottom: 18px;
}

.fs-modal-body .form-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.fs-modal-field-hint {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #eff6ff;
    font-size: 0.76rem;
    color: #475569;
    line-height: 1.45;
}

.fs-modal-field-hint i {
    color: #2563eb;
    margin-right: 4px;
}

.fs-modal-field-hint strong {
    color: #1e40af;
}

.fs-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 22px;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
}

.fs-structure-head {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.fs-structure-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fs-structure-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #ea580c, #c2410c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.fs-structure-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fs-total-pill {
    padding: 8px 16px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
    font-size: 0.88rem;
    font-weight: 800;
}

.fs-fee-rows {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fs-fee-row {
    display: grid;
    grid-template-columns: auto 1fr minmax(140px, 180px);
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fs-fee-row:focus-within {
    border-color: #fdba74;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.12);
}

.fs-fee-row-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.fs-fee-row.tone-purple .fs-fee-row-icon { background: #f5f3ff; color: #7c3aed; }
.fs-fee-row.tone-teal .fs-fee-row-icon { background: #ecfeff; color: #0891b2; }
.fs-fee-row.tone-blue .fs-fee-row-icon { background: #eff6ff; color: #2563eb; }
.fs-fee-row.tone-orange .fs-fee-row-icon { background: #fff7ed; color: #ea580c; }
.fs-fee-row.tone-indigo .fs-fee-row-icon { background: #eef2ff; color: #4f46e5; }
.fs-fee-row.tone-slate .fs-fee-row-icon { background: #f1f5f9; color: #64748b; }

.fs-fee-row-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.fs-fee-row-top strong {
    font-size: 0.95rem;
    color: #0f172a;
}

.fs-fee-row-info p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.fs-optional-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.fs-onetime-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fff7ed;
    color: #ea580c;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.fs-head-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.fs-onetime-note {
    color: #ea580c;
    font-size: 0.78rem;
}

.fs-fee-row-amount label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.fs-amount-input {
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
}

.fs-structure-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--border-color);
    background: #f8fafc;
}

.fs-foot-note {
    font-size: 0.82rem;
    color: #64748b;
    max-width: 520px;
}

.fs-foot-note i {
    margin-right: 6px;
    color: #94a3b8;
}

.fs-foot-total {
    text-align: right;
}

.fs-foot-total span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    font-weight: 600;
}

.fs-foot-total strong {
    font-size: 1.25rem;
    color: #059669;
}

.fs-pick-class {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 8px;
}

.fs-pick-class-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.fs-pick-class h4 {
    margin: 0;
    font-size: 1.05rem;
    color: #334155;
}

.fs-pick-class p {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
    max-width: 360px;
}

.fs-month-table-wrap {
    overflow-x: auto;
    padding: 4px 0 8px;
    margin: 0 18px 18px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.fs-month-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.fs-month-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.fs-month-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    background: #fff;
}

.fs-month-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f1f5f9;
    padding: 10px 8px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.fs-month-label {
    display: block;
}

.fs-month-now {
    display: block;
    font-style: normal;
    font-size: 0.58rem;
    color: #f97316;
    margin-top: 2px;
    font-weight: 800;
}

.fs-month-table thead th.is-current {
    background: #fff7ed;
    color: #ea580c;
}

.fs-month-head-col {
    min-width: 200px;
    max-width: 240px;
    text-align: left !important;
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
    padding: 10px 14px !important;
    box-shadow: 4px 0 12px rgba(15, 23, 42, 0.04);
}

.fs-month-table thead .fs-month-head-col {
    background: #f1f5f9;
    z-index: 6;
}

.fs-month-col {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    padding: 6px 4px !important;
    vertical-align: middle;
}

.fs-month-col.is-current {
    background: #fffbf5;
}

.fs-month-row-total-col {
    min-width: 88px;
    width: 88px;
    text-align: center !important;
    font-weight: 800;
    color: #059669;
    padding: 8px 10px !important;
    background: #f8fafc;
}

.fs-month-actions-col {
    width: 56px;
    min-width: 56px;
    text-align: center;
    padding: 6px 4px !important;
}

.fs-row-action-btns {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.fs-col-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 0.58rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fs-col-copy-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.fs-month-table thead th.is-current .fs-col-copy-btn {
    border-color: #fed7aa;
    background: #fff;
    color: #ea580c;
}

.fs-month-table thead th.is-current .fs-col-copy-btn:hover {
    background: #ffedd5;
    color: #c2410c;
}

.fs-copy-last-month-btn {
    white-space: nowrap;
}

.fs-month-subtotal-body .fs-month-subtotal-row td {
    padding: 10px 8px;
    border-bottom: 1px solid #e2e8f0;
    background: #eef2ff;
    font-size: 0.76rem;
    text-align: center;
    color: #475569;
    font-weight: 700;
}

.fs-month-subtotal-body .fs-month-head-col {
    background: #eef2ff;
    color: #334155;
}

.fs-month-subtotal-body .fs-month-col.is-current {
    background: #fff7ed;
}

.fs-month-body .fs-month-row td {
    padding: 8px 4px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.fs-month-body .fs-month-row:hover td {
    background: #fafafa;
}

.fs-month-body .fs-month-row:hover .fs-month-head-col {
    background: #fafafa;
}

.fs-month-body .fs-month-row .fs-month-head-col {
    background: #fff;
}

.fs-month-body .fs-month-row:hover .fs-month-col.is-current {
    background: #fff7ed;
}

.fs-month-head-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 4px;
}

.fs-month-head-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.fs-month-row.tone-purple .fs-month-head-icon { background: #f5f3ff; color: #7c3aed; }
.fs-month-row.tone-teal .fs-month-head-icon { background: #ecfeff; color: #0891b2; }
.fs-month-row.tone-blue .fs-month-head-icon { background: #eff6ff; color: #2563eb; }
.fs-month-row.tone-orange .fs-month-head-icon { background: #fff7ed; color: #ea580c; }
.fs-month-row.tone-indigo .fs-month-head-icon { background: #eef2ff; color: #4f46e5; }
.fs-month-row.tone-slate .fs-month-head-icon { background: #f1f5f9; color: #64748b; }

.fs-month-head-cell strong {
    display: block;
    font-size: 0.86rem;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.3;
    word-break: break-word;
}

.fs-month-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fs-month-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    padding: 0 8px;
    margin: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    line-height: 1.2;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.fs-month-input::-webkit-outer-spin-button,
.fs-month-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fs-month-input::placeholder {
    color: #cbd5e1;
    font-weight: 600;
}

.fs-month-input:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.fs-month-input:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.fs-month-col.is-current .fs-month-input {
    border-color: #fdba74;
    background: #fff;
}

.fs-month-col.is-current .fs-month-input:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}

.fs-month-row.is-one-time .fs-month-input:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15);
}

.fs-row-total {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    color: #059669;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 8px;
    background: #ecfdf5;
}

.fs-row-fill-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: background 0.15s, color 0.15s;
}

.fs-row-fill-btn:hover {
    background: #f1f5f9;
    color: #2563eb;
}

.fs-row-chain-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: background 0.15s, color 0.15s;
}

.fs-row-chain-btn:hover {
    background: #fff7ed;
    color: #ea580c;
}

.fs-fill-all-btn {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .fs-layout {
        grid-template-columns: 1fr;
    }

    .fs-quick-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .fs-hero-stats {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .fs-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .fs-hero-stats {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .fs-quick-links {
        grid-template-columns: 1fr;
    }

    .fs-class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 14px 16px 18px;
    }

    .fs-class-count {
        display: none;
    }

    .fs-class-pill {
        min-height: 108px;
        padding: 12px;
    }

    .fs-class-pill-name {
        font-size: 0.82rem;
    }

    .fs-class-pill-amount {
        font-size: 0.95rem;
    }

    .fs-fee-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fs-fee-row-icon {
        display: none;
    }

    .fs-structure-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .fs-structure-actions {
        width: 100%;
    }

    .fs-structure-actions .btn-header-action {
        flex: 1;
        justify-content: center;
    }

    .fs-head-count {
        display: none;
    }

    .fs-add-head-btn {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        order: 3;
    }

    .fs-head-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px 12px;
    }

    .fs-head-row-actions {
        flex-direction: column;
        gap: 4px;
    }

    .fs-modal-footer {
        flex-direction: column-reverse;
    }

    .fs-modal-footer .btn-header-action {
        width: 100%;
        justify-content: center;
    }
}

/* Fee Reports */
.fr-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #047857 0%, #059669 45%, #10b981 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(5, 150, 105, 0.22);
}

.fr-hero-label {
    margin: 0 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.fr-hero-main h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
}

.fr-hero-main p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.9;
}

.fr-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 10px;
}

.fr-hero-stat {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    text-align: center;
}

.fr-hero-stat span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-bottom: 4px;
}

.fr-hero-stat strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.fr-hero-stat.is-danger {
    background: rgba(254, 226, 226, 0.18);
    border-color: rgba(254, 202, 202, 0.35);
}

.fr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 380px);
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}

.fr-side-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fr-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.fr-card-head.compact {
    padding: 16px 20px;
}

.fr-card-head h4 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.fr-card-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.fr-card-head-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #059669;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fr-card-head-icon.is-teal {
    background: #ecfeff;
    color: #0891b2;
}

.fr-card-head-icon.is-purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.fr-collection-card {
    padding: 0!important;
    overflow: hidden;
}

.fr-month-list {
    padding: 16px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fr-month-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.15s;
}

.fr-month-row.has-data:hover,
.fr-month-row.is-current {
    background: #f8fafc;
}

.fr-month-row.is-current {
    outline: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.fr-month-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fr-month-label span {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.fr-month-label em {
    font-style: normal;
    font-size: 0.62rem;
    text-transform: uppercase;
    color: #059669;
    font-weight: 700;
}

.fr-month-bar-wrap {
    min-width: 0;
}

.fr-month-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.fr-month-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #34d399);
    border-radius: 999px;
    min-width: 0;
    transition: width 0.3s ease;
}

.fr-month-row:not(.has-data) .fr-month-bar-fill {
    width: 0 !important;
}

.fr-month-meta {
    text-align: right;
    min-width: 88px;
}

.fr-month-meta strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.fr-month-meta small {
    font-size: 0.72rem;
    color: #94a3b8;
}

.fr-empty-collection,
.fr-defaulters-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px 32px;
    gap: 8px;
}

.fr-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.fr-empty-icon.is-success {
    background: #ecfdf5;
    color: #059669;
}

.fr-empty-collection h4,
.fr-defaulters-empty h4 {
    margin: 0;
    font-size: 1rem;
    color: #334155;
}

.fr-empty-collection p,
.fr-defaulters-empty p {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: #64748b;
    max-width: 320px;
}

.fr-filter-card,
.fr-recent-card {
    padding: 0!important;
    overflow: hidden;
}

.fr-filter-form {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fr-filter-form label i {
    margin-right: 5px;
    color: #0891b2;
    font-size: 0.82rem;
}

.fr-filter-btn {
    width: 100%;
    justify-content: center;
}

.fr-recent-list {
    display: flex;
    flex-direction: column;
}

.fr-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.fr-recent-item:hover {
    background: #f8fafc;
}

.fr-recent-item:last-child {
    border-bottom: none;
}

.fr-recent-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(145deg, #059669, #047857);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.fr-recent-info {
    flex: 1;
    min-width: 0;
}

.fr-recent-info strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.fr-recent-info span {
    display: block;
    font-size: 0.76rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-recent-amount {
    font-size: 0.92rem;
    font-weight: 800;
    color: #059669;
    flex-shrink: 0;
}

.fr-recent-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    color: #94a3b8;
    font-size: 0.88rem;
}

.fr-recent-empty i {
    font-size: 1.5rem;
}

.fr-defaulters-card {
    padding: 0!important;
    overflow: hidden;
}

.alr-list-card{
    padding: 0!important;
}

.fr-defaulters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #fff7ed;
}

.fr-defaulters-head h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #9a3412;
}

.fr-defaulters-head h4 i {
    margin-right: 6px;
}

.fr-defaulters-head p {
    margin: 0;
    font-size: 0.84rem;
    color: #c2410c;
}

.fr-dues-pill {
    padding: 6px 14px;
    border-radius: 999px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 700;
}

.fr-defaulters-table {
    width: 100%;
    border-collapse: collapse;
}

.fr-defaulters-table th {
    padding: 12px 18px;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.fr-defaulters-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
    vertical-align: middle;
}

.fr-defaulters-table tbody tr:hover {
    background: #fafafa;
}

.fr-student-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fr-student-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 800;
    flex-shrink: 0;
}

.fr-student-cell strong {
    display: block;
    color: #0f172a;
}

.fr-student-cell small {
    display: block;
    font-size: 0.76rem;
    color: #94a3b8;
}

.fr-class-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.fr-paid-cell span {
    display: block;
    margin-bottom: 4px;
}

.fr-mini-bar {
    width: 72px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.fr-mini-bar div {
    height: 100%;
    background: #059669;
    border-radius: 999px;
}

.fr-balance-cell {
    color: #dc2626;
}

.fr-collect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ea580c;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    text-decoration: none;
    transition: all 0.15s;
}

.fr-collect-btn:hover {
    background: #ea580c;
    color: #fff;
    border-color: #ea580c;
}

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

    .fr-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
}

@media (max-width: 640px) {
    .fr-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .fr-hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .fr-month-row {
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
    }

    .fr-month-meta {
        grid-column: 2;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .fr-month-meta strong,
    .fr-month-meta small {
        display: inline;
    }
}

.text-danger {
    color: #dc2626 !important;
}

/* Certificates page */
.cert-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 45%, #14b8a6 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.22);
}

.cert-hero-label {
    margin: 0 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.cert-hero-main h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
}

.cert-hero-main p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.92;
    max-width: 520px;
}

.cert-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 10px;
}

.cert-hero-stat {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    text-align: center;
}

.cert-hero-stat span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-bottom: 4px;
}

.cert-hero-stat strong {
    font-size: 1.05rem;
}

.cert-type-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.cert-type-card {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: var(--card-shadow);
}

.cert-type-card i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.cert-type-card strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
    margin-bottom: 2px;
}

.cert-type-card span {
    font-size: 0.78rem;
    color: #64748b;
}

.cert-type-card.tone-teal i { color: #0d9488; }
.cert-type-card.tone-orange i { color: #ea580c; }
.cert-type-card.tone-purple i { color: #7c3aed; }

.cert-search-card,
.cert-recent-card {
    padding: 0!important;
    overflow: hidden;
}

.cert-card-head,
.cert-recent-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.cert-recent-head {
    justify-content: space-between;
    flex-wrap: wrap;
}

.cert-card-head h4,
.cert-recent-head h4 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.cert-card-head p,
.cert-recent-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.cert-card-head-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ecfeff;
    color: #0891b2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cert-search-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 22px 20px;
    flex-wrap: wrap;
}

.cert-search-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px 20px;
    color: #64748b;
    font-size: 0.88rem;
}

.cert-results-head {
    padding: 0 22px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}

.cert-issue-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cert-issue-row {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) minmax(260px, 1.4fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cert-issue-row:hover {
    border-color: #99f6e4;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.08);
}

.cert-issue-student {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cert-issue-avatar {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(145deg, #0d9488, #0f766e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
}

.cert-issue-student strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
}

.cert-issue-student small {
    display: block;
    font-size: 0.76rem;
    color: #94a3b8;
}

.cert-issue-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cert-recent-count {
    padding: 6px 14px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-size: 0.78rem;
    font-weight: 700;
}

.cert-recent-list {
    display: flex;
    flex-direction: column;
}

.cert-recent-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.cert-recent-item:hover {
    background: #fafafa;
}

.cert-recent-item:last-child {
    border-bottom: none;
}

.cert-recent-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cert-recent-icon.tone-teal { background: #ecfeff; color: #0891b2; }
.cert-recent-icon.tone-orange { background: #fff7ed; color: #ea580c; }
.cert-recent-icon.tone-purple { background: #f5f3ff; color: #7c3aed; }

.cert-recent-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.cert-recent-top strong {
    font-size: 0.95rem;
    color: #0f172a;
}

.cert-type-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cert-type-badge.tone-teal { background: #ecfeff; color: #0e7490; }
.cert-type-badge.tone-orange { background: #fff7ed; color: #c2410c; }
.cert-type-badge.tone-purple { background: #f5f3ff; color: #6d28d9; }

.cert-recent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.78rem;
    color: #64748b;
}

.cert-recent-meta i {
    margin-right: 4px;
    color: #94a3b8;
}

.cert-recent-purpose {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: #475569;
    font-style: italic;
}

.cert-recent-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cert-recent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
}

.cert-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0d9488;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    text-decoration: none;
    transition: all 0.15s;
}

.cert-print-btn:hover {
    background: #0d9488;
    color: #fff;
    border-color: #0d9488;
}

.cert-recent-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    gap: 8px;
}

.cert-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #ecfeff;
    color: #0891b2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.cert-recent-empty h4 {
    margin: 0;
    color: #334155;
}

.cert-recent-empty p {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
}

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

    .cert-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .cert-type-strip {
        grid-template-columns: 1fr;
    }

    .settings-branding-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cert-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .cert-recent-item {
        grid-template-columns: 1fr;
    }

    .cert-recent-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .cert-issue-fields {
        grid-template-columns: 1fr;
    }
}

/* Examinations page */
.exm-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 45%, #a78bfa 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.22);
}

.exm-hero-label {
    margin: 0 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.exm-hero-main h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
}

.exm-hero-main p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.92;
    max-width: 520px;
}

.exm-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 10px;
}

.exm-hero-stat {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    text-align: center;
}

.exm-hero-stat span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-bottom: 4px;
}

.exm-hero-stat strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.exm-type-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.exm-type-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: #fff;
    box-shadow: var(--card-shadow);
}

.exm-type-card i {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.exm-type-card strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
    margin-bottom: 2px;
}

.exm-type-card span {
    font-size: 0.76rem;
    color: #64748b;
}

.exm-type-card.tone-teal i { color: #0d9488; }
.exm-type-card.tone-blue i { color: #2563eb; }
.exm-type-card.tone-purple i { color: #7c3aed; }
.exm-type-card.tone-orange i { color: #ea580c; }

.exm-create-card {
    padding: 0!important;
    overflow: hidden;
}

.exm-card-head,
.exm-list-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.exm-card-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.exm-card-head h4 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.exm-card-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.exm-card-head-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f5f3ff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.exm-create-form {
    padding: 20px 22px 22px;
}

.exm-create-form label i {
    margin-right: 5px;
    color: #7c3aed;
    font-size: 0.82rem;
}

.exm-create-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.exm-list-head {
    justify-content: space-between;
    margin-bottom: 14px;
}

.exm-list-head h4 {
    margin: 0;
    font-size: 1rem;
    color: #334155;
}

.exm-list-head h4 i {
    margin-right: 6px;
    color: #7c3aed;
}

.exm-list-head span {
    padding: 4px 12px;
    border-radius: 999px;
    background: #f5f3ff;
    color: #6d28d9;
    font-size: 0.78rem;
    font-weight: 700;
}

.exm-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.exm-exam-card {
    padding: 0!important;
    overflow: hidden;
}

.exm-exam-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    flex-wrap: wrap;
}

.exm-exam-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.exm-exam-icon.tone-teal { background: #ecfeff; color: #0891b2; }
.exm-exam-icon.tone-blue { background: #eff6ff; color: #2563eb; }
.exm-exam-icon.tone-purple { background: #f5f3ff; color: #7c3aed; }
.exm-exam-icon.tone-orange { background: #fff7ed; color: #ea580c; }

.exm-exam-title {
    flex: 1;
    min-width: 200px;
}

.exm-exam-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.exm-exam-top strong {
    font-size: 1.05rem;
    color: #0f172a;
}

.exm-type-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.exm-type-badge.tone-teal { background: #ecfeff; color: #0e7490; }
.exm-type-badge.tone-blue { background: #eff6ff; color: #1d4ed8; }
.exm-type-badge.tone-purple { background: #f5f3ff; color: #6d28d9; }
.exm-type-badge.tone-orange { background: #fff7ed; color: #c2410c; }

.exm-class-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.76rem;
    font-weight: 600;
    color: #475569;
}

.exm-exam-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: #64748b;
}

.exm-exam-meta i {
    margin-right: 4px;
    color: #94a3b8;
}

.exm-inactive-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.exm-exam-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.exm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    transition: all 0.15s;
}

.exm-action-btn:hover {
    background: #ede9fe;
    color: #5b21b6;
}

.exm-action-btn.is-primary {
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #6d28d9);
    border-color: #7c3aed;
}

.exm-action-btn.is-primary:hover {
    background: linear-gradient(145deg, #6d28d9, #5b21b6);
    color: #fff;
}

.exm-subjects-section {
    padding: 16px 22px 20px;
    background: #fafafa;
}

.exm-subjects-label {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.exm-subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.exm-subject-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 0.82rem;
    color: #334155;
    font-weight: 600;
}

.exm-subject-chip em {
    font-style: normal;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

.exm-no-subjects {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 0.82rem;
    color: #92400e;
}

.exm-no-subjects i {
    margin-right: 5px;
}

.exm-add-subject-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.exm-add-subject-form .form-input:first-of-type {
    flex: 1;
    min-width: 180px;
}

.exm-marks-input {
    width: 100px;
    text-align: center;
    font-weight: 700;
}

.exm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 8px;
}

.exm-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #f5f3ff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.exm-empty h4 {
    margin: 0;
    color: #334155;
}

.exm-empty p {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
    max-width: 360px;
}

@media (max-width: 1100px) {
    .exm-type-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .exm-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .exm-exam-actions {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .exm-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .exm-type-strip {
        grid-template-columns: 1fr;
    }

    .exm-exam-head {
        flex-direction: column;
    }

    .exm-add-subject-form {
        flex-direction: column;
        align-items: stretch;
    }

    .exm-marks-input {
        width: 100%;
    }
}

/* Dashboard page */
.db-welcome {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #3b82f6 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.22);
}

.db-welcome-main {
    flex: 1;
    min-width: 240px;
}

.db-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.db-welcome-main h2 {
    margin: 0 0 8px;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.db-welcome-main p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.92;
    line-height: 1.5;
}

.db-welcome-main p i {
    margin-right: 4px;
    opacity: 0.85;
}

.db-welcome-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.db-welcome-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.db-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.db-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: all 0.15s;
}

.db-action-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.db-action-btn.is-primary {
    background: #fff;
    color: #1d4ed8;
    border-color: #fff;
}

.db-action-btn.is-primary:hover {
    background: #eff6ff;
}

.db-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.db-stat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    transition: transform 0.15s, box-shadow 0.15s;
}

.db-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.db-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.db-stat.is-students .db-stat-icon { background: #eff6ff; color: #2563eb; }
.db-stat.is-teachers .db-stat-icon { background: #ecfdf5; color: #059669; }
.db-stat.is-portal .db-stat-icon { background: #f5f3ff; color: #7c3aed; }
.db-stat.is-fee-today .db-stat-icon { background: #fff7ed; color: #ea580c; }
.db-stat.is-fee-month .db-stat-icon { background: #ecfeff; color: #0891b2; }
.db-stat.is-attendance .db-stat-icon { background: #fef2f2; color: #dc2626; }

.db-stat-body span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.db-stat-body strong {
    display: block;
    font-size: 1.15rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.db-stat-body em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.72rem;
    color: #059669;
    font-weight: 600;
}

.db-stat.is-attendance .db-stat-body em {
    color: #64748b;
}

.db-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 380px);
    gap: 20px;
    align-items: start;
}

.db-main,
.db-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 100%;
}

.db-panel,
.db-chart-card {
    padding: 0!important;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    border-radius: 16px;
}

.db-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
    flex-wrap: wrap;
}

.db-card-head.compact {
    padding: 16px 20px;
}

.db-card-head h4 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.db-card-head p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.db-card-head-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.db-card-head-icon.is-green { background: #ecfdf5; color: #059669; }
.db-card-head-icon.is-purple { background: #f5f3ff; color: #7c3aed; }
.db-card-head-icon.is-orange { background: #fff7ed; color: #ea580c; }
.db-card-head-icon.is-blue { background: #eff6ff; color: #2563eb; }
.db-card-head-icon.is-teal { background: #ecfeff; color: #0891b2; }
.db-card-head-icon.is-indigo { background: #eef2ff; color: #4f46e5; }

.db-card-link {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0891b2;
    text-decoration: none;
    white-space: nowrap;
}

.db-card-link:hover {
    color: #0e7490;
}

.db-card-link i {
    font-size: 0.72rem;
    margin-left: 4px;
}

.db-chart {
    padding: 8px 12px 16px;
}

.db-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.db-notice-list,
.db-leave-list,
.db-payment-list,
.db-teacher-list {
    display: flex;
    flex-direction: column;
}

.db-notice-item {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.db-notice-item:hover {
    background: #fafafa;
}

.db-notice-item:last-child {
    border-bottom: none;
}

.db-notice-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.db-notice-top strong {
    font-size: 0.9rem;
    color: #0f172a;
}

.db-notice-item p {
    margin: 0 0 6px;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

.db-notice-item small {
    font-size: 0.74rem;
    color: #94a3b8;
}

.db-priority-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.db-priority-badge.is-urgent {
    background: #fef2f2;
    color: #dc2626;
}

.db-priority-badge.is-important {
    background: #fff7ed;
    color: #c2410c;
}

.db-leave-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.db-leave-item:hover {
    background: #fafafa;
}

.db-leave-item:last-child {
    border-bottom: none;
}

.db-leave-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
}

.db-leave-body strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.db-leave-body span {
    display: block;
    font-size: 0.76rem;
    color: #94a3b8;
}

.db-leave-item em {
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
}

.db-table th {
    padding: 11px 18px;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.db-table td {
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.88rem;
}

.db-table tbody tr:hover {
    background: #fafafa;
}

/* Dashboard — website enquiries (homepage contact form) */
.db-website-enquiries {
    margin-top: 20px;
}

.db-enquiry-table td {
    vertical-align: top;
}

.db-enquiry-date strong {
    display: block;
    font-size: 0.86rem;
    color: #0f172a;
}

.db-enquiry-date small {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
}

.db-enquiry-phone {
    font-weight: 600;
    color: #0891b2;
    text-decoration: none;
}

.db-enquiry-phone:hover {
    text-decoration: underline;
}

.db-enquiry-msg {
    max-width: 280px;
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.45;
}

.db-enquiry-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.db-enquiry-status.is-new {
    background: #fff7ed;
    color: #c2410c;
}

.db-enquiry-status.is-contacted {
    background: #eff6ff;
    color: #2563eb;
}

.db-enquiry-status.is-converted {
    background: #ecfdf5;
    color: #059669;
}

.db-enquiry-status.is-closed {
    background: #f1f5f9;
    color: #64748b;
}

.db-adm-code {
    padding: 3px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.8rem;
}

.db-student-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.db-mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.db-class-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.db-view-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0891b2;
    text-decoration: none;
}

.db-view-link:hover {
    color: #0e7490;
}

.db-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px 20px 20px;
}

.db-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    text-decoration: none;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.15s;
    position: relative;
}

.db-quick-tile:hover {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

.db-quick-tile i {
    font-size: 1.15rem;
    color: #2563eb;
}

.db-quick-tile em {
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    color: #dc2626;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 999px;
}

.db-payment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.db-payment-item:last-child {
    border-bottom: none;
}

.db-payment-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-payment-body strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.db-payment-body span {
    display: block;
    font-size: 0.74rem;
    color: #94a3b8;
}

.db-payment-amt {
    margin-left: auto;
    font-size: 0.92rem;
    font-weight: 800;
    color: #059669;
    flex-shrink: 0;
}

.db-teacher-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.db-teacher-item:last-child {
    border-bottom: none;
}

.db-teacher-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
}

.db-teacher-item strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.db-teacher-item small {
    display: block;
    font-size: 0.74rem;
    color: #94a3b8;
}

.db-teacher-item em {
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    color: #94a3b8;
    font-size: 0.88rem;
    text-align: center;
}

.db-empty i {
    font-size: 1.5rem;
}

.db-empty a {
    color: #0891b2;
    font-weight: 600;
}

@media (max-width: 1280px) {
    .db-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .db-layout {
        grid-template-columns: 1fr;
    }

    .db-split {
        grid-template-columns: 1fr;
    }

    .db-welcome-actions {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .db-welcome {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
        border-radius: 14px;
    }

    .db-welcome-main {
        min-width: 0;
        width: 100%;
    }

    .db-welcome-main h2 {
        font-size: 1.2rem;
        word-break: break-word;
    }

    .db-welcome-main p {
        font-size: 0.8rem;
        line-height: 1.55;
    }

    .db-welcome-logo {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        align-self: flex-start;
    }

    .db-welcome-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        margin-left: 0;
    }

    .db-action-btn {
        justify-content: center;
        width: 100%;
        padding: 11px 14px;
    }

    .db-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .db-stat {
        padding: 12px;
        border-radius: 12px;
        gap: 10px;
    }

    .db-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        font-size: 0.9rem;
    }

    .db-stat-body strong {
        font-size: 1.05rem;
    }

    .db-layout,
    .db-main,
    .db-side {
        gap: 14px;
        min-width: 0;
        width: 100%;
    }

    .db-main > .form-section-card,
    .db-side > .form-section-card,
    .db-main .db-panel,
    .db-side .db-panel,
    .db-chart-card {
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    }

    .db-card-head,
    .db-card-head.compact {
        padding: 14px 14px;
        gap: 10px;
        align-items: flex-start;
    }

    .db-card-head > div:not(.db-card-head-icon) {
        flex: 1;
        min-width: 0;
    }

    .db-card-head h4 {
        font-size: 0.92rem;
        word-break: break-word;
    }

    .db-card-head p {
        font-size: 0.74rem;
        line-height: 1.4;
    }

    .db-card-head-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .db-card-link {
        width: 100%;
        margin-left: 0;
        margin-top: 2px;
    }

    .db-chart {
        padding: 4px 4px 10px;
        min-width: 0;
        overflow: hidden;
    }

    .db-chart .apexcharts-canvas {
        max-width: 100% !important;
    }

    .db-split {
        gap: 14px;
    }

    .db-notice-item,
    .db-leave-item,
    .db-payment-item,
    .db-teacher-item {
        padding-left: 14px;
        padding-right: 14px;
    }

    .db-leave-item {
        grid-template-columns: auto 1fr;
        gap: 10px;
    }

    .db-leave-item em {
        grid-column: 2;
        max-width: none;
        text-align: left;
        margin-top: 2px;
    }

    .db-payment-item,
    .db-teacher-item {
        gap: 10px;
    }

    .db-payment-amt {
        font-size: 0.88rem;
        white-space: nowrap;
    }

    .db-quick-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
    }

    .db-quick-tile {
        padding: 14px 8px;
        font-size: 0.72rem;
        border-radius: 10px;
    }

    .db-empty {
        padding: 24px 16px;
    }

    .db-empty p {
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .db-table {
        min-width: 520px;
    }

    .db-enquiry-table {
        min-width: 640px;
    }

    .db-enquiry-msg {
        max-width: 180px;
    }

    .db-website-enquiries {
        margin-top: 14px;
        border-radius: 14px;
    }

    .db-website-enquiries .table-wrapper,
    .db-panel .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .db-stat-grid {
        grid-template-columns: 1fr;
    }

    .db-welcome-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .db-quick-grid {
        grid-template-columns: 1fr 1fr;
    }

    .db-action-btn {
        font-size: 0.82rem;
    }
}

.erp-cert-issue-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.erp-stop-list {
    margin: 10px 0 0;
    padding-left: 20px;
    color: #64748b;
}

.erp-msg-cell {
    max-width: 200px;
}

.erp-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.erp-doc-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.table-scroll-x {
    overflow-x: auto;
}

/* Settings page — vertical tabs */
.settings-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

.settings-vtabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--card-shadow);
    position: sticky;
    top: 20px;
}

.settings-vtab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #64748b;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.settings-vtab:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #334155;
}

.settings-vtab.active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
}

.settings-vtab-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.settings-vtab.active .settings-vtab-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.settings-vtab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-vtab-text strong {
    font-size: 0.88rem;
    font-weight: 600;
}

.settings-vtab-text small {
    font-size: 0.75rem;
    opacity: 0.85;
}

.settings-panels {
    min-width: 0;
}

.settings-panel {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: var(--card-shadow);
}

.settings-panel-head {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.settings-panel-head h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.settings-panel-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
}

.settings-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #059669;
}

.settings-form-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.settings-form-narrow {
    max-width: 480px;
}

.settings-branding-block {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.settings-branding-block h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #0f172a;
}

.settings-branding-block h4 i {
    margin-right: 6px;
    color: #7c3aed;
}

.settings-branding-block > p {
    margin: 0 0 16px;
    font-size: 0.86rem;
    color: #64748b;
}

.settings-branding-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.settings-brand-card {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #f8fafc;
}

.settings-brand-card label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
}

.settings-brand-preview {
    height: 120px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
}

.settings-brand-preview.is-favicon {
    height: 88px;
}

.settings-brand-preview.is-dark-bg {
    background: linear-gradient(135deg, #0a1930, #1e3a5f);
    border-color: rgba(255, 255, 255, 0.15);
}

.settings-brand-preview.is-icon {
    height: 100px;
}

.settings-brand-preview.is-icon img {
    width: 64px;
    height: 64px;
    padding: 0;
    object-fit: contain;
}

.settings-brand-placeholder.is-light {
    color: rgba(255, 255, 255, 0.55);
}

.settings-brand-placeholder.is-light i {
    color: rgba(255, 255, 255, 0.35);
}

.settings-brand-preview.has-image {
    border-style: solid;
    border-color: #e2e8f0;
}

.settings-brand-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 10px;
}

.settings-brand-preview.is-favicon img {
    width: 48px;
    height: 48px;
    padding: 0;
}

.settings-brand-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.82rem;
}

.settings-brand-placeholder i {
    font-size: 1.4rem;
}

.settings-remove-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: #dc2626;
    cursor: pointer;
}

/* Authorized signatures */
.sig-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.sig-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.sig-item.is-default {
    border-color: #c19a3e;
    box-shadow: 0 0 0 3px rgba(193, 154, 62, 0.12);
}

.sig-item-preview {
    height: 92px;
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
}

.sig-item-preview img {
    max-height: 74px;
    max-width: 90%;
    object-fit: contain;
}

.sig-noimg {
    color: #94a3b8;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sig-item-info {
    padding: 12px 14px 8px;
}

.sig-item-info strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.95rem;
    color: #0f172a;
}

.sig-item-info span {
    display: block;
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 2px;
}

.sig-badge-default {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fcd9a5;
    padding: 2px 8px;
    border-radius: 999px;
}

.sig-badge-off {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
}

.sig-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    margin-top: auto;
    flex-wrap: wrap;
}

.sig-item-actions form {
    margin: 0;
}

.sig-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: all .15s;
}

.sig-btn:hover {
    border-color: #6d28d9;
    color: #6d28d9;
}

.sig-btn-danger:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

.sig-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 20px;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
}

.sig-empty i {
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: block;
    color: #cbd5e1;
}

.sig-empty p {
    margin: 0;
    font-size: 0.88rem;
}

.settings-test-box {
    margin-top: 24px;
    padding: 20px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}

.settings-test-box h4 {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: #334155;
}

.settings-info-box {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    color: #1e40af;
    font-size: 0.88rem;
}

.settings-info-box i {
    font-size: 1.2rem;
    margin-top: 2px;
}

.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

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

    .settings-vtabs {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .settings-vtab {
        flex-shrink: 0;
        min-width: 180px;
    }

    .settings-vtab-text small {
        display: none;
    }
}

/* Notifications page */
.notify-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.notify-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--card-shadow);
}

.notify-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.notify-stat-icon-total { background: #eff6ff; color: #2563eb; }
.notify-stat-icon-sent { background: #ecfdf5; color: #059669; }
.notify-stat-icon-sms { background: #f0f9ff; color: #0284c7; }
.notify-stat-icon-wa { background: #f0fdf4; color: #16a34a; }

.notify-stat-body span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.notify-stat-body strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    margin: 2px 0;
}

.notify-stat-body small {
    font-size: 0.76rem;
    color: #94a3b8;
}

.notify-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 55%, #ecfeff 100%);
    border: 1px solid #bae6fd;
    border-left: 4px solid #0ea5e9;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.notify-info-banner::before {
    content: '';
    position: absolute;
    top: -48px;
    right: -32px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.14) 0%, transparent 68%);
    pointer-events: none;
}

.notify-info-banner::after {
    content: 'Info';
    position: absolute;
    top: 14px;
    right: 18px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(186, 230, 253, 0.9);
    color: #0284c7;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.notify-info-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(145deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28);
    position: relative;
    z-index: 1;
}

.notify-info-text {
    flex: 1;
    min-width: 220px;
    font-size: 0.88rem;
    color: #0369a1;
    line-height: 1.65;
    position: relative;
    z-index: 1;
    padding-right: 52px;
}

.notify-info-text strong {
    color: #0c4a6e;
    font-weight: 800;
}

.notify-info-text p {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: #0369a1;
    line-height: 1.65;
}

.notify-info-text p:first-child {
    margin-top: 0;
}

.notify-info-text code {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #bae6fd;
    color: #0c4a6e;
    font-size: 0.82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.notify-info-text a {
    color: #0284c7;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 132, 199, 0.35);
    transition: color 0.15s, border-color 0.15s;
}

.notify-info-text a:hover {
    color: #0369a1;
    border-bottom-color: #0369a1;
}

.notify-info-banner .notify-gateway-chips {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 4px;
    margin-top: 2px;
    border-top: 1px dashed rgba(186, 230, 253, 0.9);
}

.notify-gateway-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.notify-gateway-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
}

.notify-gateway-chip.is-on {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.notify-gateway-chip.is-off {
    background: #f8fafc;
    color: #94a3b8;
}

.notify-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.notify-action-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.notify-action-card-wide {
    grid-column: 1 / -1;
}

.notify-action-form,
.notify-custom-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.notify-action-notes {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.notify-action-notes li {
    font-size: 0.84rem;
    color: #64748b;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notify-action-notes li i {
    color: #059669;
    font-size: 0.7rem;
}

.notify-action-btn {
    margin-top: auto;
    width: fit-content;
}

.notify-custom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.notify-custom-message {
    grid-column: 1 / -1;
}

.notify-custom-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.notify-key {
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notify-key:hover {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.notify-log-table .table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.notify-log-search input {
    min-width: 220px;
}

.notify-failed-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    margin-left: 10px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}

.notify-log-date {
    display: block;
    font-weight: 600;
    color: #334155;
    font-size: 0.86rem;
}

.notify-log-time {
    display: block;
    font-size: 0.76rem;
    color: #94a3b8;
}

.notify-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

.notify-badge-sms { background: #eff6ff; color: #2563eb; }
.notify-badge-wa { background: #f0fdf4; color: #16a34a; }
.notify-badge-email { background: #fff7ed; color: #ea580c; }
.notify-badge-queued { background: #f1f5f9; color: #64748b; }
.notify-badge-default { background: #f8fafc; color: #64748b; }

.notify-recipient {
    font-size: 0.82rem;
    background: #f8fafc;
    padding: 3px 8px;
    border-radius: 6px;
    color: #334155;
}

.notify-msg-cell {
    max-width: 280px;
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .notify-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .notify-stats-grid,
    .notify-actions-grid,
    .notify-custom-grid {
        grid-template-columns: 1fr;
    }

    .notify-action-card-wide {
        grid-column: auto;
    }

    .notify-info-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 18px;
    }

    .notify-info-banner::after {
        top: 12px;
        right: 12px;
    }

    .notify-info-text {
        padding-right: 0;
        padding-top: 2px;
    }

    .notify-info-banner .notify-gateway-chips {
        padding-top: 12px;
        margin-top: 4px;
    }
}

/* Student Details View Page */
.student-view-header {
    margin-bottom: 28px;
}

.student-view-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}

.student-view-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #059669, #4318ff);
}

.student-view-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.student-back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    color: var(--text-dark);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.student-back-btn:hover {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #059669;
    transform: translateX(-2px);
}

.student-header-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid #ecfdf5;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
    flex-shrink: 0;
}

.student-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-header-info {
    min-width: 0;
}

.student-header-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.student-view-header h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

.student-header-title-row .status-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
}

.student-view-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 10px;
    flex-wrap: wrap;
}

.student-view-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.student-view-breadcrumb a i {
    font-size: 0.75rem;
}

.student-view-breadcrumb a:hover {
    color: #059669;
}

.student-view-breadcrumb > i {
    font-size: 0.5rem;
    color: #cbd5e1;
}

.student-view-breadcrumb span {
    color: #059669;
    font-weight: 600;
}

.student-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.header-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.header-meta-chip i {
    font-size: 0.72rem;
    color: #059669;
}

.student-view-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-header-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-header-outline {
    background: var(--white);
    border: 1.5px solid var(--border-color);
    color: var(--text-dark);
}

.btn-header-outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-header-primary {
    background: linear-gradient(135deg, #059669, #10b981);
    border: none;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.btn-header-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.4);
}

.btn-outline-sm,
.btn-sm {
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    width: auto !important;
}

.btn-sm {
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.student-not-found {
    padding: 60px 30px;
    text-align: center;
}

.student-not-found h3 {
    margin-bottom: 20px;
    color: var(--text-dark);
}

.page-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-outline:hover {
    background: #f1f5f9;
}

.student-view-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    margin-bottom: 28px;
    align-items: start;
}

.profile-sidebar {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.profile-banner {
    height: 90px;
    background: linear-gradient(135deg, #059669 0%, #4318ff 100%);
}

.profile-body {
    padding: 0 24px 28px;
    margin-top: -55px;
}

.profile-sidebar .avatar-wrapper {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 4px solid var(--white);
    box-shadow: 0 8px 24px rgba(43, 54, 116, 0.12);
    position: relative;
}

.profile-sidebar .avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-status {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--white);
}

.avatar-status.active { background: #22c55e; }
.avatar-status.inactive { background: #ef4444; }

.profile-sidebar h3 {
    margin: 0 0 4px;
    color: var(--text-dark);
    font-size: 1.25rem;
    font-weight: 700;
}

.profile-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 16px;
}

.student-badge-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
}

.student-badge-info .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.profile-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.quick-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}

.quick-stat-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dark);
}

.quick-stat-value.status-text.active { color: #059669; }
.quick-stat-value.status-text.inactive { color: #ef4444; }

.badge-adno {
    background: #ecfdf5;
    color: #10b981;
}

.badge-roll {
    background: #f1f5f9;
    color: #64748b;
}

.action-buttons-group {
    display: flex;
    gap: 12px;
}

.action-buttons-group .btn-outline.suspend, 
.action-buttons-group .btn-admin {
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1;
    justify-content: center;
}

.action-buttons-group .btn-outline.suspend {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}
.action-buttons-group .btn-outline.suspend:hover {
    background: #fee2e2;
}

.action-buttons-group .btn-admin {
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
}
.action-buttons-group .btn-admin:hover {
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
}

.personal-info-card {
    background: var(--white);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.info-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.info-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.info-header h3 {
    margin: 0 0 4px;
    color: var(--text-dark);
    font-size: 1.25rem;
    font-weight: 700;
}

.info-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.info-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.info-tile {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.info-tile:hover {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.info-tile-wide {
    grid-column: 1 / -1;
}

.info-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.info-tile-icon.icon-class   { background: #ecfdf5; color: #059669; border: 1px solid #bbf7d0; }
.info-tile-icon.icon-section { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.info-tile-icon.icon-roll    { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.info-tile-icon.icon-gender  { background: #fdf2f8; color: #db2777; border: 1px solid #fbcfe8; }
.info-tile-icon.icon-dob     { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.info-tile-icon.icon-category{ background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.info-tile-icon.icon-year    { background: #ecfeff; color: #0891b2; border: 1px solid #a5f3fc; }
.info-tile-icon.icon-phone   { background: #ecfdf5; color: #059669; border: 1px solid #bbf7d0; }
.info-tile-icon.icon-email   { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }

.info-tile:hover .info-tile-icon {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.info-tile-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.info-tile-content .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.info-tile-content .value {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    word-break: break-word;
}

.info-tile-content .value.highlight {
    color: #059669;
}

.info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 5px;
    font-size: 0.95rem;
}

.info-row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.info-row-item .label {
    color: #64748b;
    font-weight: 500;
}

.info-row-item .value {
    color: #334155;
    font-weight: 600;
}

.info-row-item .value.teal-text {
    color: #10b981;
}

/* Tabs */
.custom-tabs-wrapper {
    margin-bottom: 24px;
    position: relative;
}

.custom-tabs-wrapper::before,
.custom-tabs-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

.custom-tabs {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.custom-tabs::-webkit-scrollbar {
    display: none;
}

.tab-link {
    position: relative;
    padding: 10px 18px 10px 12px;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.tab-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #94a3b8;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.tab-link-text {
    line-height: 1.2;
}

.tab-link:hover {
    color: var(--text-dark);
    background: #f8fafc;
    border-color: var(--border-color);
}

.tab-link:hover .tab-link-icon {
    background: #ecfdf5;
    color: #059669;
}

.tab-link.active {
    color: var(--white);
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.tab-link.active .tab-link-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.tab-content-container {
    position: relative;
}

.tab-pane {
    display: none;
    animation: tabFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-pane.active {
    display: block;
}

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

.tab-empty-state {
    background: var(--white);
    border-radius: 20px;
    padding: 70px 30px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    margin-bottom: 40px;
}

.tab-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #cbd5e1;
}

.tab-empty-state h3 {
    margin: 0 0 8px;
    color: var(--text-dark);
    font-size: 1.2rem;
}

.tab-empty-state p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Detailed Grid Areas */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

.details-grid-balanced .data-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.details-grid-balanced .detail-items-list {
    flex: 1;
}

.details-grid-balanced .detail-item {
    align-items: center;
}

.details-grid-balanced .detail-item-block {
    align-items: flex-start;
}

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

.data-card {
    background: var(--white);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.data-card:hover {
    box-shadow: 0 12px 32px rgba(43, 54, 116, 0.08);
    border-color: #e2e8f0;
}

.data-card-full {
    margin-bottom: 20px;
}

/* Section card header */
.section-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.section-card-header h4 {
    margin: 0 0 3px;
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 700;
}

.section-card-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.section-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.section-icon-parent  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.section-icon-school  { background: #ecfdf5; color: #059669; border: 1px solid #bbf7d0; }
.section-icon-address { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.section-icon-bank    { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.section-icon-medical { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.section-icon-docs    { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.section-icon-hostel  { background: #ecfeff; color: #0891b2; border: 1px solid #a5f3fc; }
.section-icon-desc    { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

.data-card h4 {
    margin: 0 0 5px;
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Parent cards */
.parent-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.parent-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    transition: all 0.2s ease;
}

.parent-card:hover {
    border-color: #bbf7d0;
    background: #f0fdf4;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08);
}

.parent-card-main {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border-color);
}

.parent-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.parent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parent-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.parent-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.role-father   { background: #eff6ff; color: #2563eb; }
.role-mother   { background: #fdf2f8; color: #db2777; }
.role-guardian { background: #f5f3ff; color: #7c3aed; }

.parent-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.parent-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.parent-contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--white);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.parent-contact-item span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.parent-contact-item strong {
    display: block;
    font-size: 0.875rem;
    color: var(--text-dark);
    font-weight: 600;
    word-break: break-word;
}

/* Detail items (school, bank, medical, hostel) */
.detail-items-list,
.detail-items-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: all 0.2s ease;
}

.detail-item:hover {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.detail-item-block {
    align-items: flex-start;
}

.detail-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.di-blue   { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.di-green  { background: #ecfdf5; color: #059669; border: 1px solid #bbf7d0; }
.di-orange { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.di-purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.di-indigo { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.di-cyan   { background: #ecfeff; color: #0891b2; border: 1px solid #a5f3fc; }
.di-teal   { background: #f0fdfa; color: #0d9488; border: 1px solid #99f6e4; }
.di-red    { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.detail-item-body {
    min-width: 0;
}

.detail-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.detail-value {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
    word-break: break-word;
}

/* Documents */
.document-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.document-box:hover {
    border-color: #bbf7d0;
    background: #f0fdf4;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
}

.doc-preview {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ef4444;
    flex-shrink: 0;
}

.doc-info {
    flex: 1;
    min-width: 0;
}

.doc-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.doc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.doc-meta i {
    font-size: 0.7rem;
}

.doc-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.doc-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.doc-btn-view:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.doc-btn-download:hover {
    background: #059669;
    border-color: #059669;
    color: var(--white);
}

/* Description */
.description-box {
    position: relative;
    padding: 24px 24px 24px 56px;
    background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 16px;
}

.description-quote-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.description-text {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.85;
    margin: 0;
    font-style: italic;
}


.card-data-col strong {
    display: block;
    color: #64748b;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.card-data-col span {
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .student-view-container {
        grid-template-columns: 1fr;
    }

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

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

@media (max-width: 640px) {
    .student-view-header-card {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
    }

    .student-view-header-main {
        flex-wrap: wrap;
    }

    .student-view-header-actions {
        width: 100%;
    }

    .btn-header-action {
        flex: 1;
        justify-content: center;
    }

    .student-header-title-row h1 {
        font-size: 1.2rem;
    }

    .tab-link {
        padding: 8px 14px 8px 10px;
        font-size: 0.8rem;
    }

    .tab-link-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .info-tiles-grid {
        grid-template-columns: 1fr;
    }

    .profile-quick-stats {
        grid-template-columns: 1fr;
    }

    .parent-list {
        grid-template-columns: 1fr;
    }

    .detail-items-grid {
        grid-template-columns: 1fr;
    }

    .document-box {
        flex-wrap: wrap;
    }

    .doc-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Add / Edit Student Form */
.add-student-icon {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid #bbf7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 1.4rem;
    border-radius: 14px;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.add-student-icon img {
    display: none;
}

.student-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.form-section-card {
    background: var(--white);
    border-radius: 20px;
    padding: 26px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

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

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

.form-field-full {
    grid-column: 1 / -1;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.form-field-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

.form-field-group h5 {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-field-group h5 i {
    color: #059669;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form-field label i {
    color: #059669;
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.form-field .required {
    color: #ef4444;
    font-weight: 700;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.925rem;
    color: var(--text-dark);
    background: #f8fafc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-input::placeholder {
    color: #94a3b8;
}

.form-input:focus {
    outline: none;
    border-color: #059669;
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.form-input-readonly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
}

.ad-no-display {
    font-size: 1rem;
    font-weight: 700;
    color: #059669;
    letter-spacing: 0.03em;
}

.auto-gen-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    background: var(--white);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.auto-gen-tag i {
    color: #059669;
    font-size: 0.68rem;
}

.roll-field-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 4px;
}

.roll-field-hint i {
    color: #059669;
    font-size: 0.65rem;
}

.roll-field-msg {
    display: block;
    font-size: 0.72rem;
    margin-top: 4px;
    font-weight: 600;
}

.roll-field-msg--error {
    color: #dc2626;
}

.roll-field-msg--ok {
    color: #059669;
}

.ad-no-display.roll-pending {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.875rem;
}

.roll-override-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease;
}

.roll-override-link:hover {
    color: #059669;
}

.roll-manual-wrap {
    margin-top: 4px;
}

/* Photo upload */
.photo-upload-area {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.photo-upload-area:hover {
    border-color: #059669;
    background: #f0fdf4;
}

.photo-upload-preview {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: var(--white);
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #cbd5e1;
    font-size: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
}

.photo-upload-preview i {
    font-size: 2rem;
}

.photo-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-content p {
    margin: 0 0 6px;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--text-dark);
}

.photo-upload-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--white);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.photo-upload-btn:hover {
    background: #059669;
    border-color: #059669;
    color: var(--white);
}

/* Form actions */
.form-actions-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 20px 26px;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    position: sticky;
    bottom: 20px;
    z-index: 10;
}

@media (max-width: 768px) {
    .form-grid,
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .photo-upload-area {
        flex-direction: column;
        text-align: center;
    }

    .form-actions-bar {
        flex-direction: column-reverse;
    }

    .form-actions-bar .btn-header-action {
        width: 100%;
        justify-content: center;
    }
}

/* ── Shared page utilities (student module) ── */
.content-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--white);
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
}

.content-top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #059669, #10b981, #34d399);
}

.content-top-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.content-top-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
    border: 1px solid #bbf7d0;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
}

.content-top-icon.icon-purple {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    color: #7c3aed;
    border-color: #ddd6fe;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.content-top-icon.icon-red {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
    border-color: #fecaca;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
}

.content-top-icon.icon-blue {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    border-color: #bfdbfe;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.content-top-icon.icon-orange {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #ea580c;
    border-color: #fed7aa;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.1);
}

.content-top-icon.icon-teal {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    color: #0d9488;
    border-color: #99f6e4;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.1);
}

.content-top-title {
    min-width: 0;
}

.content-top-title h2 {
    color: var(--text-dark);
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.content-top-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0;
}

.content-top-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.content-top-breadcrumb a:hover {
    color: #059669;
}

.content-top-breadcrumb i.fa-chevron-right {
    font-size: 0.55rem;
    color: #cbd5e1;
}

.content-top-breadcrumb span {
    color: #059669;
    font-weight: 600;
}

.content-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.content-top-actions .btn-header-action {
    padding: 10px 18px;
    font-size: 0.85rem;
    border-radius: 11px;
}

.btn-admin-sm {
    width: auto;
    padding: 10px 18px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-admin-outline-sm {
    background: #fff;
    color: var(--text-dark);
    border: 1.5px solid var(--border-color);
    padding: 10px 16px;
}

.btn-admin-outline-sm:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-admin-primary-sm {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-admin-primary-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

@media (max-width: 768px) {
    .content-top-bar {
        padding: 16px 18px;
    }

    .content-top-main {
        width: 100%;
    }

    .content-top-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .content-top-actions .btn-header-action,
    .content-top-actions .btn-admin-sm {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }
}

.section-mb {
    margin-bottom: 24px;
}

.form-compact {
    margin-bottom: 0;
    gap: 16px;
}

.form-grid-spaced {
    gap: 16px;
    margin-bottom: 20px;
}

.form-actions-end {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-danger-solid {
    background: #ef4444;
    color: #fff;
    border: none;
}

.alert-box-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.empty-state-lg {
    padding: 40px;
}

.empty-state-md {
    padding: 40px 20px;
}

.tab-empty-pad {
    padding: 30px;
}

.tab-empty-pad-sm {
    padding: 24px;
}

.form-section-flush {
    margin-bottom: 0;
}

.photo-upload-full {
    margin-bottom: 20px;
}

.photo-upload-content-full {
    width: 100%;
}

.toolbar-link-plain {
    text-decoration: none;
    color: var(--text-dark);
}

.icon-excel {
    color: #10b981;
}

.icon-sort-muted {
    color: #cbd5e1;
    margin-left: 5px;
    font-size: 0.8rem;
}

.icon-chevron-xs {
    font-size: 0.7rem;
    margin-left: 5px;
}

.toolbar-rows-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.th-w-check {
    width: 40px;
}

.table-actions-row {
    display: flex;
    gap: 8px;
}

.row-hidden {
    display: none !important;
}

.empty-search-icon {
    font-size: 3rem;
}

.page-nav-icon-xs {
    font-size: 0.7rem;
}

.page-nav-icon-sm {
    font-size: 0.8rem;
}

/* ── Student ID Card (standalone print page) ── */
.id-card-page {
    --card-w: 400px;
    --card-h: 252px;
    --card-head: 54px;
    --card-foot-front: 50px;
    --card-foot-back: 28px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: linear-gradient(160deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    min-height: 100vh;
    padding: 72px 20px 40px;
    box-sizing: border-box;
}

.id-card-page *,
.id-card-page *::before,
.id-card-page *::after {
    box-sizing: border-box;
}

.id-card-page-header {
    text-align: center;
    margin-bottom: 32px;
}

.id-card-page-header h2 {
    font-size: 1.3rem;
    color: #0f172a;
    margin-bottom: 6px;
}

.id-card-page-header p {
    font-size: 0.875rem;
    color: #64748b;
}

.id-cards-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    align-items: flex-start;
}

.id-card-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 400px;
}

.id-card-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    background: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.id-card-page .id-card {
    width: var(--card-w);
    height: var(--card-h);
    min-height: var(--card-h);
    max-height: var(--card-h);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(148, 163, 184, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.id-card-page .id-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #047857, #10b981, #34d399, #10b981, #047857);
    border-radius: 16px 16px 0 0;
}

.id-card-page .id-front .card-top,
.id-card-page .id-back .card-top {
    background: linear-gradient(135deg, #065f46 0%, #059669 45%, #10b981 100%);
    color: #fff;
    height: var(--card-head);
    min-height: var(--card-head);
    max-height: var(--card-head);
    flex-shrink: 0;
    overflow: hidden;
}

.id-card-page .id-front .card-top {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.id-card-page .id-back .card-top {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.id-card-page .mag-line {
    height: 12px;
    width: 100%;
    background: linear-gradient(180deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    flex-shrink: 0;
}

.id-card-page .id-back .card-top h2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 12px;
    margin: 0;
}

.id-card-page .school-logo {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    overflow: hidden;
}

.id-card-page .school-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.id-card-page .school-info {
    flex: 1;
    min-width: 0;
}

.id-card-page .school-info h1 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.id-card-page .school-info p {
    font-size: 0.65rem;
    opacity: 0.92;
    margin-top: 2px;
}

.id-card-page .card-type-badge {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.id-card-page .id-front .card-main,
.id-card-page .id-back .card-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.id-card-page .id-front .card-main {
    padding: 10px 16px 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.id-card-page .id-back .card-main {
    padding: 8px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.id-card-page .photo-block {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.id-card-page .id-photo {
    width: 68px;
    height: 82px;
    border-radius: 10px;
    object-fit: cover;
    border: 2.5px solid #059669;
    background: #f1f5f9;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

.id-card-page .photo-tag {
    font-size: 0.55rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.id-card-page .student-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

.id-card-page .student-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    word-break: break-word;
}

.id-card-page .student-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}

.id-card-page .meta-pill {
    font-size: 0.62rem;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.id-card-page .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
}

.id-card-page .info-item {
    min-width: 0;
}

.id-card-page .info-item .lbl {
    display: block;
    font-size: 0.58rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1px;
}

.id-card-page .info-item .val {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e293b;
    word-break: break-word;
    line-height: 1.3;
}

.id-card-page .id-front .card-bottom,
.id-card-page .id-back .card-bottom {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.id-card-page .id-front .card-bottom {
    height: var(--card-foot-front);
    min-height: var(--card-foot-front);
    max-height: var(--card-foot-front);
    padding: 4px 12px 5px;
    background: linear-gradient(90deg, #f0fdf4, #ecfdf5);
    border-top: 1px solid #bbf7d0;
    gap: 10px;
    align-items: flex-end;
}

.id-card-page .bottom-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 72px;
    padding-bottom: 1px;
}

.id-card-page .id-back .card-bottom {
    height: var(--card-foot-back);
    min-height: var(--card-foot-back);
    max-height: var(--card-foot-back);
    padding: 0 14px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    justify-content: center;
}

.id-card-page .valid-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #047857;
}

.id-card-page .valid-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.id-card-page .issue-date {
    font-size: 0.62rem;
    color: #64748b;
    font-weight: 600;
}

.id-card-page .back-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.id-card-page .back-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 8px;
    overflow: hidden;
}

.id-card-page .back-box.full {
    grid-column: 1 / -1;
}

.id-card-page .back-box h3 {
    font-size: 0.54rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #059669;
    font-weight: 700;
    margin: 0 0 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid #d1fae5;
}

.id-card-page .back-box p {
    font-size: 0.6rem;
    color: #334155;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.id-card-page .back-line {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.6rem;
    padding: 1px 0;
}

.id-card-page .back-line span {
    color: #64748b;
    flex-shrink: 0;
}

.id-card-page .back-line strong {
    color: #0f172a;
    text-align: right;
    word-break: break-word;
    font-weight: 600;
}

.id-card-page .back-terms {
    font-size: 0.52rem;
    color: #94a3b8;
    line-height: 1.3;
    padding: 4px 8px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px dashed #e2e8f0;
    flex-shrink: 0;
    margin: 0;
}

.id-card-page .sign-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    padding: 0 4px;
    height: 100%;
}

.id-card-page .sign-img {
    display: block;
    max-height: 22px;
    max-width: 92px;
    object-fit: contain;
    margin: 0 auto -1px;
}

.id-card-page .sign-line {
    width: 78px;
    border-top: 1.5px solid #64748b;
    margin: 0 auto 2px;
}

.id-card-page .sign-area span {
    display: block;
    font-size: 0.52rem;
    color: #64748b;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    padding-bottom: 1px;
}

.id-card-page .id-code-block {
    flex-shrink: 0;
    text-align: center;
    min-width: 56px;
    align-self: flex-end;
    padding-bottom: 1px;
}

.id-card-page .qr-box {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border: 2px solid #059669;
    border-radius: 6px;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 0.85rem;
}

.id-card-page .id-code {
    font-size: 0.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    letter-spacing: 0.03em;
    line-height: 1.2;
    word-break: break-all;
}

.id-card-page .back-footer-text {
    font-size: 0.58rem;
    color: #64748b;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.id-card-print-actions {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 10px;
    z-index: 100;
}

.id-card-print-btn {
    background: #059669;
    color: #fff;
    border: none;
    padding: 11px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.id-card-print-btn:hover {
    background: #047857;
}

.id-card-print-btn.outline {
    background: #fff;
    color: #059669;
    border: 1.5px solid #059669;
    box-shadow: none;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    .id-card-page {
        background: #fff;
        padding: 0;
        --card-w: 85.6mm;
        --card-h: 53.98mm;
        --card-head: 14mm;
        --card-foot-front: 11mm;
        --card-foot-back: 6mm;
    }

    .id-card-print-actions,
    .id-card-page-header,
    .id-card-label {
        display: none !important;
    }

    .id-cards-wrap {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 12mm;
        page-break-inside: avoid;
    }

    .id-card-col {
        width: 85.6mm;
    }

    .id-card-page .id-card {
        width: 85.6mm;
        height: 53.98mm;
        min-height: 53.98mm;
        max-height: 53.98mm;
        border-radius: 3mm;
        box-shadow: none;
        border: 0.3mm solid #94a3b8;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        page-break-inside: avoid;
    }
}

@media (max-width: 440px) {
    .id-card-col {
        width: 100%;
        max-width: 400px;
    }

    .id-card-page .id-card {
        width: 100%;
    }

    .id-card-page .info-grid,
    .id-card-page .back-grid {
        grid-template-columns: 1fr;
    }
}

/* Database settings — online / offline flow */
.db-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
}

.db-header-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.db-header-badge.is-online {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.db-header-badge.is-offline {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.db-flow-status {
    margin-bottom: 20px;
}

.db-flow-status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
}

.db-flow-status-card.is-online {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.db-flow-status-card.is-offline {
    background: #fff7ed;
    border-color: #fed7aa;
}

.db-flow-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 0.7rem;
}

.db-flow-status-card.is-online .db-flow-status-icon { color: #10b981; }
.db-flow-status-card.is-offline .db-flow-status-icon { color: #f97316; }

.db-flow-status-card small {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.db-flow-status-card strong {
    display: block;
    font-size: 1rem;
    color: #0f172a;
}

.db-flow-status-card em {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    font-style: normal;
    margin-top: 2px;
}

.db-flow-steps {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.db-flow-step {
    flex: 1;
    min-width: 160px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.db-flow-step.is-auto {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.db-flow-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.db-flow-step.is-auto .db-flow-num {
    background: #2563eb;
}

.db-flow-step strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.db-flow-step p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
}

.db-flow-arrow {
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-size: 0.9rem;
    padding: 0 4px;
}

.db-mode-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.db-mode-option {
    display: block;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}

.db-mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.db-mode-option strong {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 4px;
    color: #0f172a;
}

.db-mode-option span {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.db-mode-option.active,
.db-mode-option:hover {
    border-color: #7c3aed;
    background: #faf5ff;
}

.db-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.db-profile-card {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    background: #f8fafc;
}

.db-profile-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.db-profile-head h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.db-profile-head p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
}

.db-profile-head.is-online h4 { color: #047857; }
.db-profile-head.is-offline h4 { color: #c2410c; }

.db-profile-card .btn-header-action {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .db-mode-picker,
    .db-profile-grid {
        grid-template-columns: 1fr;
    }

    .db-flow-arrow {
        display: none;
    }
}