/* admin/assets/css/admin.css - EduDash Redesign */
:root {
    --bg-main: #f4f7fe;
    --white: #ffffff;
    --text-dark: #2b3674;
    --text-muted: #a3aed1;
    --primary: #d9242a;
    --brand: #d9242a;
    --brand-dark: #b01c22;
    --green-active: #d9242a;
    --orange-logo: #d9242a;
    --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: 8px;
    height: 8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #d5dbe6;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}
:hover::-webkit-scrollbar-thumb {
    background-color: #b4bccb;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #d9242a;
    border-width: 1px;
}
::-webkit-scrollbar-thumb:active {
    background-color: #b81d22;
    border-width: 1px;
}
::-webkit-scrollbar-button {
    display: none;
}
@supports (-moz-appearance: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #c3cad8 transparent;
    }
}

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-brand.is-logo {
    justify-content: center;
    padding: 10px 18px 10px;
}

.sidebar-brand-logo {
    display: block;
    width: 100%;
    max-height: 51px;
    object-fit: contain;
}

.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, #fff5f5 0%, #fde8e9 100%);
    border: 1px solid #f5c2c4;
    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(217, 36, 42, 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;
}

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

.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(217, 36, 42, 0.08);
}

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

.sidebar-menu > li.active > a {
    background: linear-gradient(135deg, #d9242a 0%, #b01c22 100%);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(217, 36, 42, 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: #d9242a;
    background-color: transparent;
}

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

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

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

.teacher-profile-banner {
    background: linear-gradient(135deg, #8e161b 0%, #d9242a 55%, #e24b50 100%);
}

.teacher-view-header-card::before {
    background: linear-gradient(135deg, rgba(217, 36, 42, 0.1) 0%, rgba(217, 36, 42, 0.03) 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: #d9242a;
    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(217, 36, 42, 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, #8e161b 0%, #d9242a 55%, #e24b50 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(217, 36, 42, 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(217, 36, 42, 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: #d9242a; 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: #d9242a;
    border-color: #bbf7d0;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.12);
}

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

.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(217, 36, 42, 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: #d9242a; }
.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: #d9242a; }
.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: #d9242a;
    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: #d9242a; }

@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: #d9242a;
}

.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, #d9242a, #b01c22);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(217, 36, 42, 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(217, 36, 42, 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, #d9242a, #b01c22);
    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: #d9242a;
    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(217, 36, 42, 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: #fff;
}

.login-bg {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 0;
}

.login-orb {
    display: none;
}

.login-orb-1 { width: 400px; height: 400px; background: #d9242a; top: -100px; right: -60px; }
.login-orb-2 { width: 300px; height: 300px; background: #b01c22; bottom: -80px; left: -40px; }
.login-orb-3 { width: 180px; height: 180px; background: #e24b50; 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, #e24b50 0%, #d9242a 46%, #8e161b 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: start;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.login-logo-icon {
    width: 150px;
    height: auto;
    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, #fff5f5, #fde8e9);
    color: #d9242a;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 16px;
    border: 1px solid #f5c2c4;
}

.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: #f0a3a6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(217, 36, 42, 0.12);
}

.admin-login-input-icon {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff5f5 0%, #fde8e9 100%);
    color: #d9242a;
    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: #d9242a;
    background: #fff5f5;
}

.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: #f5c2c4;
    background: #fff5f5;
    color: #d9242a;
}

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

.login-copyright {
    text-align: center;
    margin: 20px 0 0;
    font-size: 0.78rem;
    color: #94a3b8;
}

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

.btn-login:hover {
    background: linear-gradient(135deg, #b01c22, #8e161b);
}

.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: #d9242a; }
.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: #d9242a;
    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: center;
        justify-content: center;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .login-shell {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

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

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

    .login-form-panel {
        padding: 28px 22px 24px;
        width: 100%;
        box-sizing: border-box;
    }

    .login-box {
        max-width: 100%;
    }

    .login-header {
        margin-bottom: 22px;
        text-align: left;
    }

    .login-header h2 {
        font-size: 1.4rem;
    }

    .login-header p {
        font-size: 0.88rem;
    }

    .login-meta-line,
    .login-portal-links {
        display: none !important;
    }

    .login-footer {
        margin-top: 18px;
        text-align: center;
    }

    .login-copyright {
        margin-top: 14px;
        font-size: 0.75rem;
    }

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

    .btn-login {
        width: 100%;
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .login-page {
        padding: 12px;
    }

    .login-form-panel {
        padding: 24px 18px 20px;
    }

    .login-header-badge {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .login-header h2 {
        font-size: 1.28rem;
    }

    .admin-login-input {
        min-height: 48px;
    }
}

.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: #d9242a;
}

.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: #b01c22;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(217, 36, 42, 0.3);
}

.btn-admin.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(217, 36, 42, 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 {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: #e8f1ff;
    color: #2563eb;
    font-size: 0.9rem;
}
.edit-btn:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.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: #d9242a;
    border: 1px solid #bbf7d0;
}

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

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: #d9242a;
    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: #d9242a; }
.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, #d9242a, #b01c22);
    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, #d9242a, #8e161b);
    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-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}
.sig-edit-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}
.sig-edit-preview img {
    max-height: 64px;
    max-width: 100%;
    object-fit: contain;
}


.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: #d9242a;
    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: #d9242a;
    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: #d9242a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 2px;
}

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

.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: #d9242a;
    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: #d9242a;
    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;
}

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

.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: #d9242a;
    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(217, 36, 42, 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, #8e161b 0%, #d9242a 55%, #e24b50 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, #d9242a, #b01c22);
    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: #d9242a;
    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, #d9242a, #b01c22);
    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: #d9242a;
    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-assign-filters {
    margin-bottom: 8px;
}

.erp-assign-filter-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.erp-assign-results-meta {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 10px;
    font-weight: 600;
}

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

@media (max-width: 560px) {
    .form-grid-4 {
        grid-template-columns: 1fr;
    }
}

.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, #8e161b, #d9242a);
    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;
}

.lib-issue-filter-form {
    margin-bottom: 16px;
}

.lib-issue-filters {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(110px, 1fr)) auto;
    gap: 12px 14px;
    align-items: end;
}

.lib-issue-filters .lib-issue-filter-btn .btn-header-action {
    white-space: nowrap;
    height: 44px;
}

@media (max-width: 1100px) {
    .lib-issue-filters {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .lib-issue-filters {
        grid-template-columns: 1fr;
    }
    .lib-issue-filters .lib-issue-filter-btn .btn-header-action {
        width: 100%;
        height: auto;
    }
}

@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: #d9242a;
    color: #d9242a;
}

.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: #d9242a; }
.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: #d9242a;
}

.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: #d9242a;
}

.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: #d9242a;
}

.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: #d9242a; }
.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: #d9242a; }
.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: #d9242a; }

.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, #8e161b 0%, #d9242a 55%, #e24b50 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, #8e161b, #d9242a);
    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: #d9242a;
    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: #d9242a; }
.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, #8e161b, #d9242a);
}

.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: #d9242a;
}

.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: #d9242a;
}

.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: #d9242a;
    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;
}

.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 {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: #e8f1ff;
    color: #2563eb;
    font-size: 0.9rem;
}

.fs-head-btn.is-edit:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.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, #d9242a, #b01c22);
    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: #d9242a;
}

.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;
}

.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: #d9242a;
    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(217, 36, 42, 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: #d9242a;
    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, #8e161b 0%, #d9242a 55%, #e24b50 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(217, 36, 42, 0.28);
}

.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: #d9242a;
    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: #d9242a;
    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, #8e161b, #d9242a);
    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: #d9242a;
}

.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, #d9242a, #8e161b);
    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: #d9242a;
    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: #d9242a;
    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 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.cert-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.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: #f5f3ff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cert-search-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 16px;
    padding: 16px 22px 20px;
    align-items: end;
}

.cert-search-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: start;
}

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

@media (max-width: 560px) {
    .cert-search-form {
        grid-template-columns: 1fr;
    }
}

.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, #8e161b 0%, #d9242a 55%, #e24b50 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 28px rgba(217, 36, 42, 0.28);
}

.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: #d9242a;
    border-color: #fff;
}

.db-action-btn.is-primary:hover {
    background: #fff5f5;
}

.db-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.db-stat {
    position: relative;
    display: block;
    padding: 16px 16px 14px;
    background: #fff;
    border: 1px solid #f3e4e4;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(143, 22, 27, 0.05);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

.db-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #d9242a;
}

.db-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(143, 22, 27, 0.1);
}

.db-stat-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.db-stat.is-students { --db-accent: #d9242a; }
.db-stat.is-teachers { --db-accent: #334155; }
.db-stat.is-portal { --db-accent: #c2410c; }
.db-stat.is-fee-month { --db-accent: #047857; }
.db-stat.is-attendance { --db-accent: #1d4ed8; }
.db-stat.is-students::before,
.db-stat.is-teachers::before,
.db-stat.is-portal::before,
.db-stat.is-fee-month::before,
.db-stat.is-attendance::before { background: var(--db-accent); }

.db-stat.is-students .db-stat-icon { background: #fff1f2; color: #d9242a; }
.db-stat.is-teachers .db-stat-icon { background: #f1f5f9; color: #334155; }
.db-stat.is-portal .db-stat-icon { background: #fff7ed; color: #c2410c; }
.db-stat.is-fee-today .db-stat-icon { background: #fff7ed; color: #ea580c; }
.db-stat.is-fee-month .db-stat-icon { background: #ecfdf5; color: #047857; }
.db-stat.is-attendance .db-stat-icon { background: #eff6ff; color: #1d4ed8; }

.db-stat-body { padding-right: 48px; }

.db-stat-body span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 8px;
}

.db-stat-body strong {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.03em;
}

.db-stat-body em {
    display: inline-flex;
    margin-top: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f8fafc;
    font-style: normal;
    font-size: 0.72rem;
    color: #047857;
    font-weight: 700;
}

.db-stat.is-attendance .db-stat-body em {
    color: #475569;
}

.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: #d9242a; }
.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: #d9242a;
    text-decoration: none;
    white-space: nowrap;
}

.db-card-link:hover {
    color: #b01c22;
}

.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: #d9242a;
}

.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: #d9242a;
    text-decoration: none;
}

.db-view-link:hover {
    color: #b01c22;
}

.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: #f5c2c4;
    background: #fff5f5;
    color: #b01c22;
}

.db-quick-tile i {
    font-size: 1.15rem;
    color: #d9242a;
}

.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: #d9242a;
    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: #d9242a;
    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;
}

.db-batch-grid,
.db-content-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
    align-items: start;
}

.db-batch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.db-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.db-batch {
    display: flex;
    flex-direction: column;
    min-height: 148px;
    padding: 16px 16px 14px;
    background:
        linear-gradient(180deg, rgba(217, 36, 42, 0.06), rgba(217, 36, 42, 0) 42%),
        #fff;
    border: 1px solid #f3e4e4;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 24px rgba(143, 22, 27, 0.05);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.db-batch:hover {
    transform: translateY(-2px);
    border-color: #f0a3a6;
    box-shadow: 0 12px 28px rgba(143, 22, 27, 0.1);
}

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

.db-batch-top span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #d9242a;
}

.db-batch-top i {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #d9242a;
    border: 1px solid #f5c2c4;
    font-size: 0.8rem;
}

.db-batch-grade {
    margin: 10px 0 2px;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.db-batch p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
}

.db-batch p b {
    color: #0f172a;
    font-size: 1rem;
}

.db-batch em {
    margin-top: auto;
    padding-top: 12px;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 700;
    color: #b01c22;
}

.db-quick-bar {
    margin-bottom: 20px;
}

.db-quick-bar .db-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

@media (max-width: 1280px) {
    .db-batch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .db-layout,
    .db-content-grid {
        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,
    .db-batch-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, #d9242a 0%, #b01c22 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 36, 42, 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;
}

.sa-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 980px) {
    .sa-logo-grid { grid-template-columns: 1fr; }
}
.sa-logo-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e8ecf4;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    transition: border-color .18s, box-shadow .18s;
}
.sa-logo-card:hover {
    border-color: #fecdd3;
    box-shadow: 0 12px 28px rgba(225, 29, 72, .08);
}
.sa-logo-card.is-drag {
    border-color: #e11d48;
    box-shadow: 0 0 0 4px rgba(225, 29, 72, .12);
}
.sa-logo-card.has-file .sa-logo-status,
.sa-logo-card.has-image .sa-logo-status {
    background: #d1fae5;
    color: #047857;
}
.sa-logo-card.is-remove .sa-logo-frame {
    opacity: .38;
    filter: grayscale(1);
}
.sa-logo-card.is-remove .sa-logo-status {
    background: #ffe4e6;
    color: #be123c;
}
.sa-logo-stage {
    position: relative;
    min-height: 148px;
    padding: 1.15rem 1.1rem 1rem;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
.sa-logo-card.tone-dark .sa-logo-stage {
    background:
        radial-gradient(ellipse 80% 70% at 100% 0%, rgba(251, 113, 133, .28), transparent 55%),
        linear-gradient(145deg, #0f172a, #1e293b);
}
.sa-logo-frame {
    width: 100%;
    min-height: 96px;
    display: grid;
    place-items: center;
}
.sa-logo-frame img {
    max-width: min(100%, 220px);
    max-height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, .12));
}
.sa-logo-card.tone-dark .sa-logo-frame img {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
}
.sa-logo-card.shape-icon .sa-logo-frame,
.sa-logo-card.shape-favicon .sa-logo-frame {
    width: 88px;
    height: 88px;
    min-height: 88px;
    border-radius: 22px;
    background:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%) 0 0 / 14px 14px,
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%) 0 7px / 14px 14px,
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%) 7px -7px / 14px 14px,
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%) -7px 0 / 14px 14px,
        #fff;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(15, 23, 42, .06);
}
.sa-logo-card.shape-favicon .sa-logo-frame {
    width: 64px;
    height: 64px;
    min-height: 64px;
    border-radius: 18px;
}
.sa-logo-card.shape-icon .sa-logo-frame img,
.sa-logo-card.shape-favicon .sa-logo-frame img {
    max-width: 72%;
    max-height: 72%;
    filter: none;
}
.sa-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
}
.sa-logo-empty svg { width: 28px; height: 28px; }
.sa-logo-status {
    position: absolute;
    top: .75rem;
    right: .75rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sa-logo-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    border-top: 1px solid #f1f5f9;
}
.sa-logo-copy strong {
    display: block;
    font-size: .98rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
}
.sa-logo-copy p {
    margin: .2rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: #64748b;
}
.sa-logo-hint {
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
}
.sa-logo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.sa-logo-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .52rem .95rem;
    border-radius: 11px;
    background: linear-gradient(135deg, #e11d48, #be123c);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(225, 29, 72, .22);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}
.sa-logo-pick:hover { filter: brightness(1.05); color: #fff; }
.sa-logo-pick svg { width: 15px; height: 15px; }
.sa-logo-file {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.sa-logo-filename {
    font-size: .78rem;
    font-weight: 600;
    color: #64748b;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sa-logo-card.has-file .sa-logo-filename { color: #be123c; }
.sa-logo-remove {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .1rem 0 0;
    padding: .4rem .65rem;
    border-radius: 10px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
    text-transform: none;
    letter-spacing: 0;
}
.sa-logo-remove input {
    width: 15px;
    height: 15px;
    accent-color: #e11d48;
    margin: 0;
}

/* 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-inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.notify-inline-fields-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-icon-bday { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }

.notify-bday-card {
    overflow: hidden;
}

.notify-bday-header {
    position: relative;
}

.notify-bday-count {
    margin-left: auto;
    align-self: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.notify-bday-filters {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) minmax(140px, 1fr) auto;
    gap: 12px 14px;
    align-items: end;
    margin-bottom: 16px;
}

.notify-bday-filters.is-no-class {
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr) auto;
}

.notify-bday-filters .notify-action-btn {
    margin: 0;
    height: 44px;
    white-space: nowrap;
}

.notify-bday-preview {
    border: 1px solid #fde68a;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
    overflow: hidden;
    min-height: 220px;
}

.notify-bday-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #fde68a;
    background: rgba(255, 255, 255, 0.65);
}

.notify-bday-preview-head strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #9a3412;
}

.notify-bday-preview-head span {
    font-size: 0.76rem;
    font-weight: 700;
    color: #d97706;
    background: #fff;
    border: 1px solid #fde68a;
    padding: 4px 10px;
    border-radius: 999px;
}

.notify-bday-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    padding: 12px;
    max-height: 320px;
    overflow: auto;
}

.notify-bday-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #fde68a;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.06);
}

.notify-bday-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.notify-bday-avatar.is-student {
    background: #ecfdf5;
    color: #059669;
}

.notify-bday-avatar.is-teacher {
    background: #eff6ff;
    color: #2563eb;
}

.notify-bday-copy {
    min-width: 0;
}

.notify-bday-copy strong {
    display: block;
    font-size: 0.86rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notify-bday-copy small,
.notify-bday-copy em {
    display: block;
    font-size: 0.74rem;
    color: #64748b;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notify-bday-copy em {
    color: #94a3b8;
    margin-top: 2px;
}

.notify-bday-role {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.notify-bday-role.is-student {
    background: #ecfdf5;
    color: #047857;
}

.notify-bday-role.is-teacher {
    background: #eff6ff;
    color: #1d4ed8;
}

.notify-bday-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    padding: 24px;
    text-align: center;
    color: #92400e;
}

.notify-bday-empty i {
    font-size: 1.6rem;
    color: #f59e0b;
}

.notify-bday-empty p {
    margin: 0;
    font-size: 0.88rem;
    color: #b45309;
}

.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,
    .notify-inline-fields,
    .notify-inline-fields-3,
    .notify-bday-filters,
    .notify-bday-grid {
        grid-template-columns: 1fr;
    }

    .notify-bday-filters .notify-action-btn {
        width: 100%;
        height: auto;
    }

    .notify-bday-count {
        margin-left: 0;
        margin-top: 8px;
    }

    .notify-bday-header {
        flex-wrap: wrap;
    }

    .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, #8e161b, #d9242a);
}

.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: #d9242a;
    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: #d9242a;
}

.student-view-breadcrumb > i {
    font-size: 0.5rem;
    color: #cbd5e1;
}

.student-view-breadcrumb span {
    color: #d9242a;
    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: #d9242a;
}

.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;
    width: fit-content;
}

.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, #d9242a, #b01c22);
    border: none;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(217, 36, 42, 0.35);
}

.btn-header-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(217, 36, 42, 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(217, 36, 42, 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, #8e161b 0%, #d9242a 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: #d9242a; }
.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: #d9242a;
    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: #d9242a; 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: #d9242a; 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: #d9242a;
}

.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: #fff5f5;
    color: #d9242a;
}

.tab-link.active {
    color: var(--white);
    background: linear-gradient(135deg, #d9242a 0%, #b01c22 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(217, 36, 42, 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: #f7f7f7; color: #d9242a; border: 1px solid #dadada; }
.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: #d9242a;
    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: #d9242a; 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: #d9242a;
    border-color: #d9242a;
    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: #d9242a;
    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, #fff5f5 0%, #fde8e9 100%);
    border: 1px solid #f5c2c7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d9242a;
    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-4 {
    grid-template-columns: repeat(4, 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: #d9242a;
}

.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: #d9242a;
    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: #d9242a;
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(217, 36, 42, 0.12);
}

.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: #d9242a;
    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: #d9242a;
    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: #d9242a;
    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: #d9242a;
}

.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: #d9242a;
}

.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: #d9242a;
    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: #d9242a;
    border-color: #d9242a;
    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,
    .form-grid-4 {
        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, #8e161b, #d9242a, #e24b50);
}

.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, #fff5f5, #fde8e9);
    color: #d9242a;
    border: 1px solid #f5c2c4;
    box-shadow: 0 4px 12px rgba(217, 36, 42, 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(217, 36, 42, 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: #d9242a;
}

.content-top-breadcrumb i.fa-chevron-right {
    font-size: 0.55rem;
    color: #cbd5e1;
}

.content-top-breadcrumb span {
    color: #d9242a;
    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, #d9242a, #b01c22);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(217, 36, 42, 0.3);
}

.btn-admin-primary-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(217, 36, 42, 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;
    font-size: 14px;
    line-height: 1.5;
}

.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;
}

.fx-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px 28px;
    margin-bottom: 18px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, #8e161b 0%, #d9242a 58%, #e24b50 100%);
    box-shadow: 0 14px 32px rgba(217, 36, 42, 0.22);
}
.fx-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    font-weight: 700;
}
.fx-hero h3 {
    margin: 10px 0 4px;
    font-size: 1.45rem;
    font-weight: 800;
}
.fx-hero p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
    max-width: 460px;
}
.fx-hero-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.fx-hero-stats div {
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
}
.fx-hero-stats span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}
.fx-hero-stats strong {
    display: block;
    margin-top: 2px;
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
}

.fx-batches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.fx-batch {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f3e4e4;
    box-shadow: 0 6px 18px rgba(143, 22, 27, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fx-batch:hover {
    transform: translateY(-2px);
    border-color: #f0a3a6;
    box-shadow: 0 12px 26px rgba(143, 22, 27, 0.1);
}
.fx-batch.is-active {
    border-color: #d9242a;
    background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
    box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.12), 0 12px 26px rgba(143, 22, 27, 0.1);
}
.fx-batch-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.fx-batch-board {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.fx-batch-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #b45309;
    background: #fffbeb;
}
.fx-batch-status.is-set {
    color: #047857;
    background: #ecfdf5;
}
.fx-batch-grade {
    margin-top: 6px;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
}
.fx-batch-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #b01c22;
}
.fx-batch.is-empty .fx-batch-amount {
    color: #94a3b8;
    font-size: 0.95rem;
}
.fx-batch-link {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #f3e4e4;
    font-size: 0.8rem;
    font-weight: 600;
    color: #d9242a;
}
.fx-batch-link i {
    font-size: 0.7rem;
    margin-left: 4px;
    transition: transform .15s ease;
}
.fx-batch:hover .fx-batch-link i {
    transform: translateX(3px);
}

.fx-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: #fff5f5;
    border: 1px dashed #f0a3a6;
    color: #8e161b;
    font-size: 0.9rem;
    font-weight: 600;
}
.fx-pick i {
    color: #d9242a;
}

.fx-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}
.fx-bottom > .form-section-card {
    margin: 0;
}
.fx-bottom .fs-card-head {
    background: linear-gradient(180deg, #fff 0%, #fffafa 100%);
    border-bottom-color: #f3e4e4;
}
.fx-bottom .fs-card-head-icon,
.fx-bottom .fs-card-head-icon.is-blue {
    background: #fff5f5;
    color: #d9242a;
    border: 1px solid #f5c2c4;
}
.fx-bottom .fs-head-count {
    background: #fff5f5;
    color: #b01c22;
}
.fx-policy.form-section-card {
    padding: 0;
    overflow: hidden;
    border-color: #f3e4e4;
}
.fx-policy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    padding: 20px 22px 22px;
}
.fx-policy-grid .form-field {
    gap: 6px;
    min-width: 0;
}
.fx-policy-grid .form-field label {
    font-size: 0.82rem;
    color: #334155;
}
.fx-policy-grid .form-input {
    width: 100%;
    height: 44px;
}
.fx-policy-grid .fx-policy-wide {
    grid-column: 1 / -1;
}
.fx-policy-grid small.muted {
    font-size: 0.74rem;
    color: #94a3b8;
    line-height: 1.3;
}
.fx-policy-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px dashed #f3e4e4;
}
@media (max-width: 1200px) {
    .fx-batches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .fx-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .fx-batches,
    .fx-policy-grid { grid-template-columns: 1fr; }
    .fx-hero { padding: 20px; }
}

.fc-summary-panel .fc-summary-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: #fcfcfd;
}
.fcs-block {
    background: #fff;
    border: 1px solid #f1e6e6;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(143, 22, 27, 0.03);
}
.fcs-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.fcs-head h5 {
    flex: 1;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}
.fcs-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #fff5f5;
    color: #d9242a;
    border: 1px solid #f5c2c4;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.fcs-head-total {
    font-size: 0.95rem;
    font-weight: 800;
    color: #b01c22;
}
.fcs-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fcs-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px dashed #eef2f7;
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.35;
}
.fcs-rows li:first-child {
    border-top: 0;
    padding-top: 0;
}
.fcs-rows li strong {
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
}
.fcs-rows li strong.is-minus { color: #047857; }
.fcs-rows li strong.is-plus { color: #b91c1c; }
.fcs-rows li strong.is-none { color: #94a3b8; }

.fcs-legend {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.fcs-legend span {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
}
.fcs-legend .is-paid { background: #ecfdf5; color: #047857; }
.fcs-legend .is-partial { background: #fffbeb; color: #b45309; }
.fcs-legend .is-pending { background: #fff1f2; color: #b91c1c; }

.fcs-installments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fcs-inst {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #eef2f7;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fcs-inst.is-current {
    border-color: #d9242a;
    box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.1);
}
.fcs-inst-month {
    width: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
    color: #334155;
}
.fcs-inst.is-paid .fcs-inst-month { background: #ecfdf5; color: #047857; }
.fcs-inst.is-partial .fcs-inst-month { background: #fffbeb; color: #b45309; }
.fcs-inst.is-pending .fcs-inst-month { background: #fff1f2; color: #b91c1c; }
.fcs-inst-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fcs-inst-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.fcs-inst-line strong {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
}
.fcs-badge {
    font-style: normal;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fcs-inst.is-paid .fcs-badge { background: #d1fae5; color: #047857; }
.fcs-inst.is-partial .fcs-badge { background: #fef3c7; color: #b45309; }
.fcs-inst.is-pending .fcs-badge { background: #fee2e2; color: #b91c1c; }
.fcs-inst-bar {
    height: 5px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.fcs-inst-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #10b981;
}
.fcs-inst.is-partial .fcs-inst-bar span { background: #f59e0b; }
.fcs-inst-main small {
    font-size: 0.72rem;
    color: #64748b;
}
.fcs-inst.is-paid .fcs-inst-main small { color: #047857; font-weight: 600; }

.fcs-reason {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 0.78rem;
    color: #475569;
}
.fcs-reason i { color: #94a3b8; margin-right: 4px; }
.fcs-edit {
    margin-top: 12px;
    border-top: 1px dashed #f3e4e4;
    padding-top: 10px;
}
.fcs-edit summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    color: #d9242a;
}
.fcs-edit summary::-webkit-details-marker { display: none; }
.fcs-caret {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform .15s ease;
}
.fcs-edit[open] .fcs-caret { transform: rotate(180deg); }
.fcs-edit-form {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}
.fcs-edit-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.fcs-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: #334155;
}
.fcs-check input { accent-color: #d9242a; }
.fcs-hint {
    font-size: 0.74rem;
    color: #94a3b8;
}
.fcs-remove { margin-top: 8px; }
.fcs-remove .btn-header-action {
    width: 100%;
    justify-content: center;
    color: #b91c1c;
    border-color: #fecaca;
}
.fcs-edit-form .btn-header-primary {
    justify-content: center;
}

.frx-filter {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #f3e4e4;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(143, 22, 27, 0.04);
}
.frx-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}
.frx-filter-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}
.frx-filter-field label i { color: #d9242a; margin-right: 4px; }
.frx-filter-field .form-input { height: 42px; }
.frx-filter-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}
.frx-filter-actions .btn-header-action { height: 42px; }

.frx-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.frx-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #f3e4e4;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(143, 22, 27, 0.04);
}
.frx-kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff5f5;
    color: #d9242a;
    font-size: 1.1rem;
}
.frx-kpi span:not(.frx-kpi-icon) {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.frx-kpi strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.frx-kpi small {
    font-size: 0.74rem;
    color: #94a3b8;
}
.frx-kpi.is-alert {
    background: linear-gradient(135deg, #8e161b 0%, #d9242a 70%);
    border-color: transparent;
    color: #fff;
}
.frx-kpi.is-alert .frx-kpi-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.frx-kpi.is-alert span:not(.frx-kpi-icon),
.frx-kpi.is-alert small { color: rgba(255, 255, 255, 0.85); }
.frx-kpi.is-alert strong { color: #fff; }

.frx-card.form-section-card {
    padding: 18px 20px;
    margin-bottom: 18px;
    border-color: #f3e4e4;
}
.frx-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.frx-card-head h4 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}
.frx-card-head p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
.frx-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff5f5;
    color: #d9242a;
    border: 1px solid #f5c2c4;
}
.frx-card-icon.is-alert { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }

.frx-batches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.frx-batch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #eef2f7;
    background: #fcfcfd;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.frx-batch:hover {
    border-color: #f0a3a6;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(143, 22, 27, 0.08);
}
.frx-batch.is-active {
    border-color: #d9242a;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.1);
}
.frx-batch-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.frx-batch-top strong { font-size: 0.92rem; color: #0f172a; }
.frx-batch-top span { font-size: 0.74rem; color: #64748b; white-space: nowrap; }
.frx-batch-bar {
    height: 6px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.frx-batch-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #059669);
}
.frx-batch-nums {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
}
.frx-batch-nums small {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.frx-batch-nums b { font-size: 0.88rem; color: #0f172a; }
.frx-batch-nums b.is-paid { color: #047857; }
.frx-batch-nums b.is-due { color: #b91c1c; }
.frx-batch-nums b.is-clear { color: #94a3b8; }

.frx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}
.frx-grid > .frx-card { margin-bottom: 18px; }

.frx-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    height: 220px;
    padding-top: 8px;
}
.frx-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}
.frx-col-val {
    font-size: 0.64rem;
    font-weight: 700;
    color: #b01c22;
    min-height: 14px;
    white-space: nowrap;
}
.frx-col-track {
    flex: 1;
    width: 100%;
    max-width: 34px;
    display: flex;
    align-items: flex-end;
    border-radius: 8px;
    background: #f8fafc;
}
.frx-col-fill {
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(180deg, #e24b50 0%, #d9242a 60%, #b01c22 100%);
    transition: height .3s ease;
}
.frx-col-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}
.frx-col.is-current .frx-col-label {
    color: #d9242a;
    font-weight: 800;
}
.frx-col.is-current .frx-col-track { box-shadow: inset 0 0 0 1.5px #f0a3a6; }

.frx-recent {
    display: flex;
    flex-direction: column;
}
.frx-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-top: 1px dashed #eef2f7;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
}
.frx-recent-item:first-child { border-top: 0; }
.frx-recent-item:hover { background: #fff8f8; }
.frx-recent-info { flex: 1; min-width: 0; }
.frx-recent-info strong {
    display: block;
    font-size: 0.86rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.frx-recent-info span { font-size: 0.74rem; color: #94a3b8; }
.frx-recent-item b { font-size: 0.9rem; color: #047857; white-space: nowrap; }
.frx-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, #d9242a, #8e161b);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
}

.frx-empty {
    text-align: center;
    padding: 28px 16px;
    color: #64748b;
}
.frx-empty i {
    font-size: 1.6rem;
    color: #f0a3a6;
    margin-bottom: 8px;
}
.frx-empty h5 { margin: 0 0 4px; font-size: 0.95rem; color: #0f172a; }
.frx-empty p { margin: 0; font-size: 0.82rem; }
.frx-empty.is-success i { color: #10b981; }

.frx-def-head { flex-wrap: wrap; }
.frx-def-head > div:nth-child(2) { flex: 1; min-width: 200px; }
.frx-def-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.frx-search {
    position: relative;
}
.frx-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
}
.frx-search input {
    height: 40px;
    width: 260px;
    max-width: 100%;
    padding: 0 12px 0 34px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font: inherit;
    font-size: 0.85rem;
}
.frx-search input:focus {
    outline: none;
    border-color: #f0a3a6;
    box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.12);
}
.frx-table { width: 100%; }
.frx-table th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    background: #fafafa;
}
.frx-table td { vertical-align: middle; }
.frx-th-actions { text-align: right; }
.frx-student {
    display: flex;
    align-items: center;
    gap: 10px;
}
.frx-student strong { display: block; font-size: 0.88rem; color: #0f172a; }
.frx-student small { font-size: 0.74rem; color: #94a3b8; }
.frx-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff5f5;
    color: #b01c22;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.frx-paid span { font-size: 0.84rem; }
.frx-paid em {
    font-style: normal;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: 4px;
}
.frx-mini {
    margin-top: 4px;
    height: 4px;
    width: 90px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.frx-mini div { height: 100%; background: #10b981; border-radius: inherit; }
.frx-balance { color: #b91c1c; font-size: 0.95rem; }
.frx-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
.frx-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    color: #475569;
    background: #fff;
    text-decoration: none;
    transition: all .15s ease;
}
.frx-icon-btn:hover { border-color: #d9242a; color: #d9242a; }
.frx-icon-btn.is-wa:hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.frx-collect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    background: #d9242a;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.frx-collect:hover { background: #b01c22; color: #fff; }
.frx-no-match {
    padding: 18px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
}

@media (max-width: 1200px) {
    .frx-kpis,
    .frx-batches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .frx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .frx-kpis,
    .frx-batches { grid-template-columns: 1fr; }
    .frx-filter-field { min-width: 100%; }
    .frx-filter-actions { margin-left: 0; }
    .frx-chart { gap: 4px; }
    .frx-col-val { display: none; }
    .frx-search input { width: 100%; }
}

.ttx-hidden { display: none !important; }
.ttx-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #fff5f5;
    border: 1px solid #f5c2c4;
    color: #b01c22;
    font-weight: 600;
    font-size: 0.88rem;
}
.ttx-pick-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ttx-pick-head h3 { margin: 0; font-size: 1.1rem; color: #0f172a; }
.ttx-pick-head p { margin: 4px 0 0; font-size: 0.85rem; color: #64748b; }
.ttx-pick-search {
    position: relative;
    width: min(340px, 100%);
}
.ttx-pick-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
}
.ttx-pick-search input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 38px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.9rem;
    outline: none;
}
.ttx-pick-search input:focus { border-color: #d9242a; box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.12); }
.ttx-teacher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.ttx-teacher {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f3e4e4;
    box-shadow: 0 4px 14px rgba(143, 22, 27, 0.04);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ttx-teacher:hover {
    transform: translateY(-2px);
    border-color: #f0a3a6;
    box-shadow: 0 12px 24px rgba(143, 22, 27, 0.1);
}
.ttx-teacher img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}
.ttx-teacher-info { flex: 1; min-width: 0; }
.ttx-teacher-info strong {
    display: block;
    color: #0f172a;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ttx-teacher-info span { display: block; font-size: 0.8rem; color: #475569; margin-top: 2px; }
.ttx-teacher-info span i { color: #d9242a; font-size: 0.72rem; margin-right: 3px; }
.ttx-teacher-info small { font-size: 0.72rem; color: #94a3b8; }
.ttx-teacher-count {
    text-align: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fafc;
    min-width: 72px;
}
.ttx-teacher-count strong { display: block; font-size: 1.15rem; color: #94a3b8; line-height: 1.1; }
.ttx-teacher-count span { font-size: 0.66rem; color: #94a3b8; font-weight: 600; }
.ttx-teacher-count.has { background: #fff5f5; }
.ttx-teacher-count.has strong { color: #d9242a; }
.ttx-empty-box {
    text-align: center;
    padding: 40px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px dashed #f0a3a6;
    color: #64748b;
}
.ttx-empty-box > i { font-size: 1.8rem; color: #d9242a; margin-bottom: 10px; }
.ttx-empty-box h4 { margin: 0 0 6px; color: #0f172a; }
.ttx-empty-box p { margin: 0 0 14px; font-size: 0.86rem; }

.ttx-page { min-width: 0; }
.ttx-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #8e161b 0%, #b01c22 45%, #d9242a 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(217, 36, 42, 0.22);
    position: relative;
    overflow: hidden;
}
.ttx-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.ttx-hero-main { display: flex; align-items: center; gap: 16px; min-width: 0; position: relative; z-index: 1; }
.ttx-back {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}
.ttx-back:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.ttx-hero-photo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background: #fff;
    flex-shrink: 0;
}
.ttx-hero-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}
.ttx-hero h1 { margin: 2px 0 8px; font-size: 1.45rem; color: #fff; line-height: 1.2; }
.ttx-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ttx-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.78rem;
    font-weight: 600;
}
.ttx-hero-actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.ttx-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    cursor: pointer;
}
.ttx-hero-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ttx-hero-btn.is-solid { background: #fff; color: #b01c22; border-color: #fff; }
.ttx-hero-btn.is-solid:hover { background: #fff5f5; color: #8e161b; }

.ttx-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.ttx-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #f3e4e4;
    box-shadow: 0 4px 14px rgba(143, 22, 27, 0.04);
}
.ttx-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff5f5;
    color: #d9242a;
    flex-shrink: 0;
}
.ttx-stat div span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.ttx-stat strong { font-size: 1.3rem; font-weight: 800; color: #0f172a; }
.ttx-stat strong small { font-size: 0.78rem; font-weight: 600; color: #94a3b8; }

.ttx-card {
    background: #fff;
    border: 1px solid #f3e4e4;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(143, 22, 27, 0.04);
}
.ttx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 12px;
}
.ttx-days { display: flex; gap: 8px; flex-wrap: wrap; }
.ttx-day {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 11px;
    border: 1px solid #eef2f7;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
}
.ttx-day em {
    font-style: normal;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    text-align: center;
}
.ttx-day:hover { border-color: #f5c2c4; color: #d9242a; }
.ttx-day.is-active {
    background: #d9242a;
    border-color: #d9242a;
    color: #fff;
    box-shadow: 0 6px 14px rgba(217, 36, 42, 0.25);
}
.ttx-day.is-active em { background: rgba(255, 255, 255, 0.25); color: #fff; }
.ttx-today {
    position: absolute;
    top: -8px;
    right: -6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #047857;
    color: #fff;
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 700;
}
.ttx-views {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}
.ttx-view {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
}
.ttx-view.is-active { background: #fff; color: #d9242a; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); }

.ttx-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ttx-quick > span {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-right: 4px;
}
.ttx-quick > span i { color: #d9242a; }
.ttx-quick button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ttx-quick button i { color: #d9242a; }
.ttx-quick button:hover { border-color: #f0a3a6; background: #fff5f5; }
.ttx-quick button.is-danger { color: #b91c1c; }
.ttx-quick button.is-danger:hover { border-color: #fecaca; background: #fef2f2; }

.ttx-panel { display: none; }
.ttx-panel.is-active { display: flex; flex-direction: column; gap: 8px; }
.ttx-lec-head,
.ttx-lec {
    display: grid;
    grid-template-columns: 74px minmax(220px, 1.2fr) minmax(170px, 1.1fr) minmax(150px, 1fr) 100px 40px;
    gap: 12px;
    align-items: center;
}
.ttx-lec-head {
    padding: 0 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.ttx-lec {
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eef2f7;
    border-left: 4px solid #e2e8f0;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ttx-lec.is-empty { background: #fcfcfd; }
.ttx-lec.is-empty .form-input { background: #fff; }
.ttx-lec.is-filled { border-left-color: #d9242a; box-shadow: 0 4px 12px rgba(143, 22, 27, 0.05); }
.ttx-lec.is-filled.is-cbse { border-left-color: #d97706; }
.ttx-lec.is-flash { box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.25); }
.ttx-lec-no {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 48px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
}
.ttx-lec-no strong { font-size: 1.05rem; line-height: 1; }
.ttx-lec-no small { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
.ttx-lec.is-filled .ttx-lec-no { background: #fff5f5; color: #d9242a; }
.ttx-lec.is-filled.is-cbse .ttx-lec-no { background: #fffbeb; color: #b45309; }
.ttx-lec-time { display: flex; align-items: center; gap: 6px; }
.ttx-lec-time span { font-size: 0.74rem; color: #94a3b8; }
.ttx-lec .form-input { height: 40px; width: 100%; min-width: 0; font-size: 0.86rem; }
.ttx-lec-time .form-input { padding: 0 8px; }
.ttx-mobile-label { display: none; }
.ttx-lec-clear {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #eef2f7;
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
}
.ttx-lec-clear:hover { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.ttx-hint { margin: 12px 2px 0; font-size: 0.8rem; color: #64748b; }
.ttx-hint i { color: #d9242a; margin-right: 4px; }

.ttx-week-card { padding: 4px; }
.ttx-week-scroll { overflow-x: auto; }
.ttx-week-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 6px;
}
.ttx-week-table thead th {
    font-size: 0.74rem;
    font-weight: 800;
    color: #475569;
    text-align: center;
    padding: 6px 4px;
}
.ttx-week-table th small { display: block; font-size: 0.66rem; font-weight: 600; color: #94a3b8; }
.ttx-week-table tbody th {
    width: 64px;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 0.82rem;
    color: #0f172a;
    text-align: center;
}
.ttx-week-table tr.is-today th { background: #d9242a; color: #fff; }
.ttx-week-table tr.is-today th small { color: rgba(255, 255, 255, 0.85); }
.ttx-week-table td { padding: 0; }
.ttx-cell {
    width: 100%;
    min-height: 72px;
    padding: 8px;
    border-radius: 10px;
    border: 1px dashed #e2e8f0;
    background: #fff;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.ttx-cell:hover { border-color: #f0a3a6; }
.ttx-cell.has-data { border: 1px solid #f5c2c4; border-left: 3px solid #d9242a; background: #fff5f5; }
.ttx-cell.has-data.is-cbse { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; }
.ttx-cell strong { font-size: 0.8rem; color: #0f172a; line-height: 1.2; }
.ttx-cell span { font-size: 0.7rem; color: #475569; }
.ttx-cell em { font-style: normal; font-size: 0.66rem; color: #94a3b8; }
.ttx-free { text-align: center; color: #cbd5e1 !important; font-weight: 600; }
.ttx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 14px 12px;
    font-size: 0.78rem;
    color: #64748b;
}
.ttx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ttx-legend i.is-state, .ttx-legend i.is-cbse { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.ttx-legend i.is-state { background: #d9242a; }
.ttx-legend i.is-cbse { background: #d97706; }
.ttx-legend-note { margin-left: auto; }
.ttx-legend-note i { color: #d9242a; }

.ttx-savebar {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #f3e4e4;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}
.ttx-savebar-info { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: #475569; }
.ttx-savebar-info > i { color: #d9242a; font-size: 1.1rem; }
.ttx-savebar-info strong { color: #0f172a; }
.ttx-savebar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1200px) {
    .ttx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ttx-lec-head { display: none; }
    .ttx-lec {
        grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 40px;
        grid-template-areas: "no time time clear" "no batch subject room";
    }
    .ttx-lec-no { grid-area: no; align-self: stretch; height: auto; }
    .ttx-lec-time { grid-area: time; }
    .ttx-lec-field:nth-of-type(3) { grid-area: batch; }
    .ttx-lec-field:nth-of-type(4) { grid-area: subject; }
    .ttx-lec-field:nth-of-type(5) { grid-area: room; }
    .ttx-lec-clear { grid-area: clear; }
    .ttx-mobile-label {
        display: block;
        font-size: 0.68rem;
    font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #94a3b8;
        margin-bottom: 3px;
    }
}
@media (max-width: 700px) {
    .ttx-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ttx-hero { padding: 18px; }
    .ttx-hero h1 { font-size: 1.2rem; }
    .ttx-lec {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "no clear" "time time" "batch batch" "subject room";
    }
    .ttx-lec-no { flex-direction: row; gap: 8px; width: auto; height: 34px; justify-self: start; padding: 0 12px; }
    .ttx-lec-no small { margin-top: 0; }
    .ttx-lec-clear { justify-self: end; }
    .ttx-legend-note { margin-left: 0; }
}

.acx-period {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #f3e4e4;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(143, 22, 27, 0.04);
}
.acx-presets {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    flex-wrap: wrap;
}
.acx-preset {
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
}
.acx-preset:hover { color: #d9242a; background: #fff; }
.acx-preset.is-active {
    background: #d9242a;
    color: #fff;
    box-shadow: 0 4px 10px rgba(217, 36, 42, 0.25);
}
.acx-range {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.acx-range label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.acx-range label span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.acx-range .form-input { height: 40px; min-width: 150px; }
.acx-range .btn-header-action { height: 40px; }

.acx-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.acx-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f3e4e4;
    box-shadow: 0 4px 14px rgba(143, 22, 27, 0.04);
}
.acx-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}
.acx-stat.is-in .acx-stat-icon { background: #ecfdf5; color: #047857; }
.acx-stat.is-out .acx-stat-icon { background: #fef2f2; color: #b91c1c; }
.acx-stat span:not(.acx-stat-icon) {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.acx-stat strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
}
.acx-stat.is-in strong { color: #047857; }
.acx-stat.is-out strong { color: #b91c1c; }
.acx-stat small { font-size: 0.74rem; color: #94a3b8; }
.acx-stat.is-net {
    background: linear-gradient(135deg, #8e161b 0%, #d9242a 70%);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(217, 36, 42, 0.22);
}
.acx-stat.is-net .acx-stat-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.acx-stat.is-net span:not(.acx-stat-icon),
.acx-stat.is-net small { color: rgba(255, 255, 255, 0.85); }
.acx-stat.is-net strong { color: #fff; }

.acx-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f1e6e6;
}
.acx-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: -1px;
    border-bottom: 2.5px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
}
.acx-tab:hover { color: #d9242a; }
.acx-tab.is-active {
    color: #d9242a;
    border-bottom-color: #d9242a;
}

.acx-card.form-section-card {
    padding: 18px 20px;
    margin-bottom: 18px;
    border-color: #f3e4e4;
}
.acx-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.acx-card-head > div { flex: 1; min-width: 0; }
.acx-card-head h4 { margin: 0; font-size: 1rem; color: #0f172a; }
.acx-card-head p { margin: 2px 0 0; font-size: 0.8rem; color: #64748b; }
.acx-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff5f5;
    color: #d9242a;
    border: 1px solid #f5c2c4;
}
.acx-card-icon.is-in { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.acx-card-icon.is-out { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.acx-head-total { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.acx-head-total.is-in { color: #047857; }
.acx-head-total.is-out { color: #b91c1c; }

.acx-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.acx-breakdowns { display: flex; flex-direction: column; }

.acx-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.acx-type-toggle label { cursor: pointer; }
.acx-type-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.acx-type-toggle span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    font-weight: 700;
    font-size: 0.92rem;
    color: #475569;
    transition: all .15s ease;
}
.acx-type-toggle small {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
}
.acx-type-toggle .is-out input:checked + span {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}
.acx-type-toggle .is-in input:checked + span {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}
.acx-type-toggle input:focus-visible + span { box-shadow: 0 0 0 3px rgba(217, 36, 42, 0.15); }
.acx-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.acx-fields .form-field { min-width: 0; gap: 6px; }
.acx-fields .form-input { width: 100%; height: 42px; }
.acx-wide { grid-column: 1 / -1; }
.acx-amount { font-size: 1.05rem; font-weight: 700; }
.acx-add-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #f3e4e4;
}

.acx-cats { display: flex; flex-direction: column; gap: 12px; }
.acx-cat-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 0.86rem;
    color: #334155;
}
.acx-cat-line strong { color: #0f172a; white-space: nowrap; }
.acx-cat-line em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    margin-left: 4px;
}
.acx-cat-bar {
    height: 7px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.acx-cat-bar i { display: block; height: 100%; border-radius: inherit; }
.acx-cat.is-in .acx-cat-bar i { background: linear-gradient(90deg, #34d399, #059669); }
.acx-cat.is-out .acx-cat-bar i { background: linear-gradient(90deg, #f87171, #dc2626); }

.acx-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px dashed #e2e8f0;
    color: #94a3b8;
    font-size: 0.86rem;
}
.acx-chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff5f5;
    border: 1px solid #f5c2c4;
    color: #b01c22;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.acx-table { width: 100%; }
.acx-table th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    background: #fafafa;
}
.acx-table td { vertical-align: middle; }
.acx-table .is-num { text-align: right; white-space: nowrap; }
.acx-table tfoot th { background: #fff5f5; color: #0f172a; font-size: 0.86rem; text-transform: none; letter-spacing: 0; }
.acx-date strong { display: block; font-size: 0.86rem; color: #0f172a; }
.acx-date small { font-size: 0.72rem; color: #94a3b8; }
.acx-cat-cell { display: flex; align-items: center; gap: 10px; }
.acx-cat-cell a { color: #0f172a; font-weight: 600; text-decoration: none; }
.acx-cat-cell a:hover { color: #d9242a; }
.acx-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.acx-dot.is-in { background: #ecfdf5; color: #047857; }
.acx-dot.is-out { background: #fef2f2; color: #b91c1c; }
.acx-sub { font-size: 0.82rem; color: #64748b; max-width: 320px; }
.acx-method {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 600;
}
.acx-in { color: #047857; font-weight: 700; }
.acx-out { color: #b91c1c; font-weight: 700; }
.acx-muted { color: #cbd5e1; }
.acx-voided td { opacity: .5; text-decoration: line-through; }
.acx-void { margin: 0; }
.acx-void-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
}
.acx-void-btn:hover { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
.acx-voided-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
}

@media (max-width: 1200px) {
    .acx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .acx-overview { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .acx-stats,
    .acx-fields { grid-template-columns: 1fr; }
    .acx-range { width: 100%; }
    .acx-range label { flex: 1; }
    .acx-range .form-input { min-width: 0; }
}
@media print {
    .acx-period, .acx-tabs, .acx-add-card, .content-top-actions, .acct-actions-col { display: none !important; }
}

.pa-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
}
.pa-filter-actions {
    display: flex;
    gap: 8px;
}
.pa-filter-actions .btn-header-action {
    height: 44px;
}
.sd-result-count {
    margin: 16px 0 10px;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
}
.erp-search-item.student-search-card.is-active {
    border-color: #d9242a;
    border-left-color: #d9242a;
    background: #fff5f5;
}
@media (max-width: 900px) {
    .pa-filter { grid-template-columns: 1fr 1fr; }
    .pa-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .pa-filter { grid-template-columns: 1fr; }
}

/* -- Student ID Card (standalone print page) -- */
.id-card-page {
    --card-w: 400px;
    --card-h: 252px;
    --idc-red: #d9242a;
    --idc-red-dark: #8e161b;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #f1f5f9;
    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: 28px;
}
.id-card-page-header h2 {
    font-size: 1.25rem;
    color: #0f172a;
    margin: 0 0 6px;
}
.id-card-page-header p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}
.id-cards-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px;
    align-items: flex-start;
    margin-bottom: 32px;
}
.id-card-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: var(--card-w);
}
.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);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Front */
.id-card-page .idc-head {
    height: 58px;
    padding: 8px 14px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    flex-shrink: 0;
}
.id-card-page .idc-logo {
    display: block;
    height: 42px;
    max-width: 230px;
    width: auto;
    object-fit: contain;
}
.id-card-page .idc-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--idc-red);
    line-height: 1.15;
}
.id-card-page .idc-session {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    flex-shrink: 0;
}
.id-card-page .idc-session strong {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #0f172a;
}
.id-card-page .idc-ribbon {
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--idc-red-dark), var(--idc-red) 50%, var(--idc-red-dark));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.id-card-page .idc-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 14px;
    padding: 12px 16px 6px;
    background:
        radial-gradient(circle at 100% 100%, rgba(217, 36, 42, 0.07) 0, rgba(217, 36, 42, 0) 55%),
        #fff;
}
.id-card-page .idc-photo {
    width: 78px;
    height: 94px;
    flex-shrink: 0;
    border-radius: 10px;
    padding: 3px;
    background: linear-gradient(160deg, var(--idc-red), var(--idc-red-dark));
}
.id-card-page .idc-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    background: #f1f5f9;
    border: 2px solid #fff;
}
.id-card-page .idc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.id-card-page .idc-student {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.id-card-page .idc-batch {
    align-self: flex-start;
    margin: 4px 0 8px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--idc-red);
    background: #fff1f2;
    border: 1px solid #f5c2c4;
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}
.id-card-page .idc-fields {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
}
.id-card-page .idc-fields div {
    min-width: 0;
    border-left: 2px solid #f5c2c4;
    padding-left: 6px;
}
.id-card-page .idc-fields dt {
    font-size: 0.5rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.id-card-page .idc-fields dd {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.id-card-page .idc-foot {
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 16px 6px;
    border-top: 1px solid #f3e4e4;
    background: #fffafa;
}
.id-card-page .idc-issued {
    font-size: 0.55rem;
    font-weight: 600;
    color: #64748b;
}
.id-card-page .idc-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
}
.id-card-page .idc-sign img {
    display: block;
    max-height: 20px;
    max-width: 92px;
    object-fit: contain;
    margin-bottom: -1px;
}
.id-card-page .idc-sign span {
    display: block;
    width: 100%;
    text-align: center;
    border-top: 1px solid #64748b;
    padding-top: 1px;
    font-size: 0.52rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.04em;
}

/* Back */
.id-card-page .idc-back-head {
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--idc-red-dark) 0%, var(--idc-red) 60%, #e24b50 100%);
}
.id-card-page .idc-back-logo {
    display: block;
    height: 38px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
}
.id-card-page .idc-back-name {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}
.id-card-page .idc-back-body {
    flex: 1;
    min-height: 0;
    padding: 10px 16px 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 12px;
    align-content: start;
}
.id-card-page .idc-back-row {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.id-card-page .idc-back-row.is-wide {
    grid-column: 1 / -1;
}
.id-card-page .idc-back-row span {
    font-size: 0.5rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.id-card-page .idc-back-row span i {
    color: var(--idc-red);
    width: 10px;
}
.id-card-page .idc-back-row strong {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.id-card-page .idc-note {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding: 5px 8px;
    font-size: 0.52rem;
    line-height: 1.35;
    color: #64748b;
    background: #fff5f5;
    border: 1px dashed #f0a3a6;
    border-radius: 6px;
}
.id-card-page .idc-back-foot {
    min-height: 30px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 3px 12px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.52rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}
.id-card-page .idc-back-foot i {
    color: #f0a3a6;
    margin-right: 3px;
}

.id-card-print-actions {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 10px;
    z-index: 100;
}
.id-card-print-btn {
    background: #d9242a;
    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(217, 36, 42, 0.3);
}
.id-card-print-btn:hover {
    background: #b01c22;
}
.id-card-print-btn.outline {
    background: #fff;
    color: #d9242a;
    border: 1.5px solid #d9242a;
    box-shadow: none;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }
    .id-card-page {
        background: #fff;
        padding: 0;
        zoom: 0.8;
    }
    .id-card-print-actions,
    .id-card-page-header,
    .id-card-label {
        display: none !important;
    }
    .id-cards-wrap {
        flex-wrap: nowrap;
        gap: 12mm;
        margin: 0;
        page-break-inside: avoid;
    }
    .id-card-page .id-card {
        box-shadow: none;
        border: 0.3mm solid #cbd5e1;
        page-break-inside: avoid;
    }
}

@media (max-width: 440px) {
    .id-card-col {
        width: 100%;
        max-width: 400px;
    }
    .id-card-page .id-card {
        width: 100%;
    }
}

/* 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;
    cursor: default;
}

.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;
    }
}

.header-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #d9242a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.header-user-avatar.sm { width: 42px; height: 42px; font-size: 0.85rem; }
.header-user-avatar.lg { width: 64px; height: 64px; font-size: 1.25rem; border-radius: 16px; }
.sidebar-user-avatar .header-user-avatar.sidebar-initials {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(217, 36, 42, 0.15);
    font-size: 0.9rem;
}
a.header-icon-btn { text-decoration: none; color: inherit; }
.notification-dot {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f8fafc;
    top: 4px;
    right: 4px;
    width: auto;
}
.header-alerts { position: relative; }
.header-alerts-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    z-index: 320;
    padding: 8px;
}
.header-alerts-menu a,
.header-alerts-menu p {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #334155;
    text-decoration: none;
}
.header-alerts-menu a:hover { background: #f8fafc; color: #d9242a; }
.header-alerts-menu p { color: #94a3b8; margin: 0; }
.admin-force-banner {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 10px;
    margin: 0 0 16px;
    font-weight: 600;
    font-size: 0.9rem;
}
.gallery-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.gallery-admin-card {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: box-shadow .2s, transform .2s;
}
.gallery-admin-card:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); transform: translateY(-2px); }
.gla-thumb { position: relative; }
.gla-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }
.gla-pos {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.gla-move { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.gla-move form { margin: 0; }
.gla-move button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.gla-move button:hover:not(:disabled) { background: #d9242a; color: #fff; }
.gla-move button:disabled { opacity: .4; cursor: not-allowed; }
.gla-body { padding: 12px; display: grid; gap: 8px; }
.gla-caption { display: flex; gap: 6px; margin: 0; }
.gla-caption .form-input { flex: 1; min-width: 0; }
.gla-body > form:last-child { margin: 0; }
.gla-remove { width: 100%; justify-content: center; }
.gla-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.gla-count { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-secondary, #475569); }
.gla-count i { color: #d9242a; }
.gla-view {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: #d9242a;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.gla-view:hover { background: #fdecec; }
.gla-help { display: block; margin-top: 6px; color: var(--text-secondary, #64748b); font-size: 0.8rem; }
.salary-pay-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ap-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.ap-banner {
    height: 92px;
    background: linear-gradient(135deg, #8e161b 0%, #d9242a 58%, #e24b50 100%);
}

.ap-identity-body {
    padding: 0 22px 22px;
    margin-top: -42px;
    text-align: center;
}

.ap-avatar {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    border-radius: 22px;
    background: #d9242a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 800;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(217, 36, 42, 0.28);
}

.ap-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #94a3b8;
    border: 3px solid #fff;
}

.ap-dot.is-on { background: #22c55e; }

.ap-identity-body h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: #0f172a;
}

.ap-role {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff5f5;
    color: #d9242a;
    font-size: 0.75rem;
    font-weight: 700;
}

.ap-meta {
    margin: 18px 0 16px;
    text-align: left;
    border-top: 1px solid #f1f5f9;
}

.ap-meta li {
    display: grid;
    grid-template-columns: 18px 72px 1fr;
    gap: 8px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.86rem;
}

.ap-meta i { color: #d9242a; font-size: 0.8rem; }
.ap-meta span { color: #94a3b8; }
.ap-meta strong { color: #0f172a; font-weight: 600; text-align: right; word-break: break-word; }

.ap-pass-btn { width: 100%; justify-content: center; }

.ap-editor { padding: 22px 24px 24px; }

.ap-editor-head h3 { margin: 0 0 4px; font-size: 1.15rem; color: #0f172a; }
.ap-editor-head p { margin: 0 0 18px; color: #64748b; font-size: 0.88rem; }

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

.ap-locked {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.ap-locked div {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.ap-locked span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.ap-locked strong { color: #0f172a; font-size: 0.92rem; }

.ap-note {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

.ap-note i { margin-right: 6px; color: #d9242a; }

.ap-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

@media (max-width: 900px) {
    .ap-layout { grid-template-columns: 1fr; }
    .ap-locked { grid-template-columns: 1fr; }
}
.notify-warn-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-left: 4px solid #f97316;
    border-radius: 16px;
    margin-bottom: 16px;
}
.notify-warn-banner .notify-info-icon { color: #ea580c; }
.notify-warn-banner p { margin: 4px 0 0; color: #9a3412; font-size: 0.88rem; }

/* Staff logins settings tab */
.staff-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.staff-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.staff-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.staff-stat em {
    display: block;
    font-style: normal;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 2px;
}
.staff-stat strong {
    font-size: 1.25rem;
    color: #0f172a;
    line-height: 1.1;
}
.staff-stat-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.staff-stat-ico.is-total { background: #ecfdf5; color: #d9242a; }
.staff-stat-ico.is-active { background: #eff6ff; color: #2563eb; }
.staff-stat-ico.is-warn { background: #fff7ed; color: #ea580c; }

.staff-role-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.staff-role-chip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
}
.staff-role-chip i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.staff-role-chip strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
    margin-bottom: 2px;
}
.staff-role-chip span {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
}
.staff-role-chip.tone-emerald { background: #ecfdf5; border-color: #a7f3d0; }
.staff-role-chip.tone-emerald i { background: #d9242a; color: #fff; }
.staff-role-chip.tone-amber { background: #fffbeb; border-color: #fde68a; }
.staff-role-chip.tone-amber i { background: #d97706; color: #fff; }
.staff-role-chip.tone-sky { background: #f0f9ff; border-color: #bae6fd; }
.staff-role-chip.tone-sky i { background: #0284c7; color: #fff; }
.staff-role-chip.tone-violet { background: #f5f3ff; border-color: #ddd6fe; }
.staff-role-chip.tone-violet i { background: #7c3aed; color: #fff; }
.staff-role-chip.tone-slate { background: #f8fafc; border-color: #e2e8f0; }
.staff-role-chip.tone-slate i { background: #475569; color: #fff; }

.staff-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.staff-list-head h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #0f172a;
}
.staff-list-head span {
    font-size: 0.8rem;
    color: #94a3b8;
}

.staff-empty {
    text-align: center;
    padding: 36px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    margin-bottom: 24px;
    color: #64748b;
}
.staff-empty i {
    font-size: 1.75rem;
    color: #94a3b8;
    margin-bottom: 10px;
}
.staff-empty p { margin: 0; font-size: 0.9rem; }

.staff-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}
.staff-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.staff-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.staff-card.is-editing {
    border-color: #6ee7b7;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.staff-card.is-inactive { opacity: 0.72; }
.staff-card-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.staff-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.staff-avatar.tone-emerald { background: #d9242a; }
.staff-avatar.tone-amber { background: #d97706; }
.staff-avatar.tone-sky { background: #0284c7; }
.staff-avatar.tone-violet { background: #7c3aed; }
.staff-avatar.tone-slate { background: #475569; }

.staff-card-info { min-width: 0; }
.staff-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.staff-card-title strong {
    font-size: 0.95rem;
    color: #0f172a;
}
.staff-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.staff-pill.is-you { background: #ecfdf5; color: #047857; }
.staff-pill.is-warn { background: #fff7ed; color: #c2410c; }

.staff-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    font-size: 0.8rem;
    color: #64748b;
}
.staff-card-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.staff-card-meta i { font-size: 0.7rem; opacity: 0.85; }

.staff-role-tag {
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.74rem;
}
.staff-role-tag.tone-emerald { background: #d1fae5; color: #047857; }
.staff-role-tag.tone-amber { background: #fef3c7; color: #b45309; }
.staff-role-tag.tone-sky { background: #e0f2fe; color: #0369a1; }
.staff-role-tag.tone-violet { background: #ede9fe; color: #6d28d9; }
.staff-role-tag.tone-slate { background: #e2e8f0; color: #334155; }

.staff-status { font-weight: 600; }
.staff-status.is-on { color: #d9242a; }
.staff-status.is-off { color: #94a3b8; }
.staff-status i { font-size: 0.45rem; }

.staff-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.staff-card-actions form { margin: 0; }
.staff-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
}
.staff-action-btn:hover {
    border-color: #d9242a;
    color: #d9242a;
    background: #ecfdf5;
}
.staff-action-btn.is-danger:hover {
    border-color: #f87171;
    color: #dc2626;
    background: #fef2f2;
}

.staff-form-card {
    margin-top: 8px;
    padding: 22px 22px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 48%);
}
.staff-form-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
.staff-form-head-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #d9242a;
    color: #fff;
    flex-shrink: 0;
}
.staff-form-head h4 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: #0f172a;
}
.staff-form-head p {
    margin: 0;
    font-size: 0.86rem;
    color: #64748b;
}
.staff-optional {
    font-weight: 500;
    color: #94a3b8;
    font-size: 0.85em;
}
.staff-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .staff-stat-strip { grid-template-columns: 1fr; }
    .staff-role-guide { grid-template-columns: 1fr; }
    .staff-card {
        flex-direction: column;
        align-items: stretch;
    }
    .staff-card-actions { justify-content: flex-end; }
}
@media (max-width: 640px) {
    .staff-action-btn span { display: none; }
    .staff-card-meta { gap: 8px; }
}

.si-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.si-card {
    background: #fff;
    border: 1px solid #f3e4e4;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(143, 22, 27, 0.05);
}
.si-card-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.si-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #d9242a, #b01c22);
    color: #fff;
    flex-shrink: 0;
}
.si-card-head h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: #0f172a;
}
.si-card-head p,
.si-card h4 {
    margin: 0;
}
.si-card-head p {
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.45;
}
.si-card h4 {
    margin: 18px 0 10px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.si-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.si-steps li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.4;
}
.si-steps li::before {
    counter-increment: si;
    content: counter(si);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff5f5;
    color: #d9242a;
    border: 1px solid #f5c2c4;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.si-steps { counter-reset: si; }
.si-batches,
.si-cols {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.si-batches li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, #fff8f8 100%);
    border: 1px solid #f3e4e4;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
}
.si-batches li i { color: #d9242a; width: 16px; text-align: center; }
.si-cols li {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 0.84rem;
    color: #475569;
}
.si-cols code {
    font-family: inherit;
    font-weight: 700;
    color: #b01c22;
    background: #fff5f5;
    border-radius: 8px;
    padding: 4px 8px;
}
.si-cols em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    color: #d9242a;
}
.si-errors {
    background: #fff5f5;
    border: 1px solid #f5c2c4;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    color: #8e161b;
}
.si-errors strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.si-errors ul {
    margin: 0;
    padding-left: 18px;
}
.si-errors li { margin: 4px 0; line-height: 1.45; font-size: 14px; }
.si-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    border: 1.5px dashed #f0a3a6;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #fff8f8 100%);
    text-align: center;
    cursor: pointer;
    padding: 28px 18px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.si-drop:hover,
.si-drop.is-over {
    border-color: #d9242a;
    background: #fff5f5;
}
.si-drop.is-picked {
    border-style: solid;
    border-color: #d9242a;
    background: #fff5f5;
}
.si-drop-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #d9242a;
    border: 1px solid #f5c2c4;
    font-size: 1.35rem;
    margin-bottom: 6px;
}
.si-drop strong {
    color: #0f172a;
    font-size: 1rem;
    word-break: break-all;
}
.si-drop span { color: #64748b; font-size: 0.88rem; }
.si-drop input { display: none; }
.si-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
@media (max-width: 980px) {
    .si-layout { grid-template-columns: 1fr; }
    .si-cols li { grid-template-columns: 88px 1fr; }
    .si-cols em { grid-column: 2; }
}

/* ===== Settings: multiple addresses (br-*) ===== */
.br-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.br-head label { margin-bottom: 2px; }
.br-help { margin: 0; font-size: 0.8rem; color: #64748b; }
.br-add {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    border: 1px dashed #f0a3a6; background: #fff5f5; color: #d9242a;
    font-size: 0.82rem; font-weight: 700; transition: background .15s, color .15s, border-color .15s;
}
.br-add:hover { background: #d9242a; border-color: #d9242a; color: #fff; }
.br-list { display: flex; flex-direction: column; gap: 10px; }
.br-row {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 38px; gap: 12px; align-items: start;
    padding: 12px; border-radius: 12px; border: 1px solid #f3e4e4; background: #fffafa;
}
.br-num {
    width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: #d9242a; color: #fff; font-weight: 800; font-size: 0.9rem;
}
.br-row:first-child .br-num::after { content: '\2605'; font-size: 0.55rem; margin-left: 2px; }
.br-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.br-fields .br-addr { grid-column: 1 / -1; min-height: 60px; }
.br-remove {
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    border: 1px solid #f3e4e4; background: #fff; color: #b91c1c; transition: background .15s, color .15s;
}
.br-remove:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
@media (max-width: 640px) {
    .br-head { flex-direction: column; }
    .br-row { grid-template-columns: 1fr 38px; }
    .br-num { display: none; }
    .br-fields { grid-template-columns: 1fr; }
}