:root {
    --app-bg: #f3f8ff;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fbff;
    --app-blue-50: #eff6ff;
    --app-blue-100: #dbeafe;
    --app-blue-200: #bfdbfe;
    --app-blue-300: #93c5fd;
    --app-blue-500: #2f80ed;
    --app-blue-600: #2563eb;
    --app-blue-700: #1d4ed8;
    --app-blue-900: #0f2f66;
    --app-border: #d9e8fb;
    --app-border-strong: #b8d3f2;
    --app-text: #10233f;
    --app-muted: #5f7390;
    --app-muted-soft: #91a8c4;
    --app-primary: #2f80ed;
    --app-primary-dark: #1d5fd1;
    --app-success: #16a34a;
    --app-warning: #d97706;
    --app-danger: #dc2626;
    --app-info: #0284c7;
    --app-purple: #4f46e5;
    --app-radius: 8px;
    --app-shadow: 0 1px 2px rgba(15, 47, 102, .06), 0 10px 28px rgba(37, 99, 235, .08);
}

body,
.content-wrapper,
.main-header,
.main-sidebar,
.brand-link,
.nav-sidebar,
.card,
.table,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal-content {
    font-family: 'Sarabun', sans-serif !important;
}

body {
    background:
        radial-gradient(circle at top left, rgba(147, 197, 253, .24), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, var(--app-bg) 38%, #eef6ff 100%);
    color: var(--app-text);
    font-weight: 400;
    line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--app-text);
    font-weight: 700;
    letter-spacing: 0;
}

a {
    color: var(--app-primary);
}

.content-wrapper {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(243, 248, 255, .96)),
        var(--app-bg);
}

.app-shell {
    padding: 20px;
}

.app-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.app-page-title {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.25;
}

.app-page-subtitle {
    margin: 4px 0 0;
    color: var(--app-muted);
    font-size: .92rem;
}

.app-section-title {
    margin: 8px 0 -4px;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-card,
.card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.card-header {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-bottom: 1px solid var(--app-border);
    padding: 14px 16px;
}

.card-title {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 700;
}

.card-body {
    padding: 16px;
}

.btn {
    border-radius: 7px;
    font-weight: 600;
    line-height: 1.35;
}

.btn-primary {
    background: linear-gradient(180deg, var(--app-blue-500), var(--app-blue-600));
    border-color: var(--app-blue-600);
    box-shadow: 0 6px 14px rgba(37, 99, 235, .16);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--app-primary-dark);
    border-color: var(--app-primary-dark);
}

.form-control,
.form-select,
.custom-select {
    border-color: var(--app-border-strong);
    border-radius: 7px;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .14);
}

.table {
    color: var(--app-text);
}

.table thead th {
    background: linear-gradient(180deg, #f8fbff, #edf6ff);
    border-bottom: 1px solid var(--app-border-strong);
    color: #16416f;
    font-size: .84rem;
    font-weight: 700;
    vertical-align: middle;
}

.table td,
.table th {
    border-top-color: var(--app-border);
    vertical-align: middle;
}

.badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .36em .62em;
}

.badge-light {
    background: #eaf4ff !important;
    border: 1px solid #bfdbfe !important;
    color: #16416f !important;
}

.badge-light.text-muted,
.badge-light .text-muted {
    color: #315a86 !important;
}

.badge-light.border {
    border-color: #9ec8f7 !important;
}

.badge-light:hover,
a.badge-light:hover,
button.badge-light:hover {
    background: #dbeafe !important;
    color: #0f2f66 !important;
}

.student-badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    gap: 5px;
    line-height: 1;
    min-height: 24px;
    padding: 5px 10px;
    white-space: nowrap;
}

.student-badge i {
    font-size: .72rem;
}

.student-badge-male {
    background: #eaf4ff;
    border-color: #bfdbfe;
    color: #1d5fd1;
}

.student-badge-female {
    background: #fdf2f8;
    border-color: #fbcfe8;
    color: #be185d;
}

.student-badge-neutral {
    background: #f8fafc;
    border-color: #dbeafe;
    color: #5f7390;
}

.student-badge-active {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.student-badge-inactive {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

.bg-primary,
.badge-primary,
.label-primary {
    background-color: var(--app-blue-600) !important;
}

.text-primary {
    color: var(--app-blue-600) !important;
}

.border-primary {
    border-color: var(--app-blue-600) !important;
}

.card-primary.card-outline,
.card-outline.card-primary {
    border-top: 3px solid var(--app-blue-600);
}

.card-info.card-outline,
.card-outline.card-info {
    border-top-color: var(--app-info);
}

.page-item.active .page-link {
    background: var(--app-blue-600);
    border-color: var(--app-blue-600);
}

.page-link {
    color: var(--app-blue-600);
}

.dropdown-menu {
    border: 1px solid var(--app-border);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(15, 47, 102, .14);
}

.user-header.bg-primary {
    background: linear-gradient(135deg, var(--app-blue-700), var(--app-blue-500)) !important;
}

.small-box.bg-primary {
    background: linear-gradient(135deg, var(--app-blue-700), var(--app-blue-500)) !important;
}

.small-box.bg-info {
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
}

.app-tabs {
    border-bottom-color: var(--app-border);
    gap: 3px;
}

.app-tabs .nav-link {
    border-radius: var(--app-radius) var(--app-radius) 0 0;
    color: var(--app-muted);
    font-weight: 600;
}

.app-tabs .nav-link.active {
    color: var(--app-primary);
    font-weight: 700;
}

.app-tab-content {
    border: 1px solid var(--app-border);
    border-top: 0;
    border-radius: 0 0 var(--app-radius) var(--app-radius);
    background: var(--app-surface);
}

.app-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.app-filter-bar {
    background: linear-gradient(180deg, #ffffff, #f4f9ff);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    margin-bottom: 14px;
    padding: 14px;
}

.app-filter-bar label {
    color: var(--app-muted);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.app-meta-line {
    color: var(--app-muted);
    font-size: .9rem;
    margin-bottom: 8px;
}

.app-table-wrap {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    overflow: auto;
}

.app-table-wrap .table {
    margin-bottom: 0;
}

.app-icon-btn {
    align-items: center;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.app-navbar {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 6px 18px rgba(15, 47, 102, .06);
    min-height: 58px;
}

.app-nav-icon {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.app-user-toggle {
    border-radius: 999px;
    color: var(--app-text) !important;
    gap: 6px;
    padding: 6px 10px !important;
}

.app-avatar-sm {
    height: 34px;
    object-fit: cover;
    width: 34px;
}

.main-sidebar {
    background:
        linear-gradient(180deg, #0f3b78 0%, #115aa7 52%, #0b3f7a 100%) !important;
    box-shadow: 10px 0 30px rgba(15, 47, 102, .12);
}

.brand-link {
    background: rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    font-weight: 700;
}

.nav-sidebar .nav-link {
    border-radius: 7px;
    margin: 2px 8px;
}

.nav-sidebar > .nav-item > .nav-link {
    color: rgba(255, 255, 255, .86) !important;
}

.nav-sidebar > .nav-item > .nav-link:hover,
.nav-sidebar > .nav-item.menu-open > .nav-link,
.nav-sidebar > .nav-item > .nav-link.active {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}

.nav-sidebar > .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 #bfdbfe, 0 8px 18px rgba(2, 132, 199, .16);
}

.nav-sidebar .nav-icon {
    color: #dbeafe !important;
}

.nav-sidebar .nav-treeview {
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    margin: 2px 8px 8px;
    padding: 4px 0;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: rgba(239, 246, 255, .78) !important;
    font-size: .86rem;
    padding-left: 18px;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

.nav-sidebar .nav-treeview .nav-link p {
    margin-left: 4px;
}

.app-action-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.app-action-card {
    align-items: center;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    color: var(--app-text) !important;
    display: flex;
    gap: 12px;
    min-height: 74px;
    padding: 14px;
    position: relative;
    text-decoration: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.app-action-card::before {
    background: var(--card-accent, var(--app-primary));
    border-radius: var(--app-radius) 0 0 var(--app-radius);
    bottom: -1px;
    content: '';
    left: -1px;
    position: absolute;
    top: -1px;
    width: 4px;
}

.app-action-card:hover {
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .07), 0 12px 28px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.app-action-icon {
    align-items: center;
    background: #eff6ff;
    border-radius: 8px;
    color: var(--card-accent, var(--app-primary));
    display: flex;
    flex: 0 0 42px;
    font-size: 1.05rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.app-action-label {
    color: var(--app-text);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
}

.login-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(147, 197, 253, .42), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(56, 189, 248, .24), transparent 30%),
        linear-gradient(135deg, #f8fbff 0%, #edf6ff 48%, #ffffff 100%);
}

.app-login-box {
    width: min(420px, calc(100vw - 28px));
}

.app-login-brand {
    margin-bottom: 14px;
    text-align: center;
}

.app-login-brand strong {
    color: var(--app-blue-900);
    display: block;
    font-size: 1.5rem;
    line-height: 1.2;
}

.app-login-brand span {
    color: var(--app-muted);
    display: block;
    font-size: .88rem;
    margin-top: 4px;
}

.app-login-card {
    border: 1px solid rgba(147, 197, 253, .55);
    box-shadow: 0 18px 50px rgba(15, 47, 102, .16);
    overflow: hidden;
}

.app-login-card .login-card-body {
    padding: 24px;
}

.app-login-title {
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 18px;
    text-align: center;
}

.app-login-help {
    background: #ecfeff;
    border: 1px solid #bae6fd;
    border-radius: var(--app-radius);
    color: #155e75;
    font-size: .84rem;
    line-height: 1.55;
    padding: 10px 12px;
}

.app-login-switch {
    border-top: 1px solid var(--app-border);
    margin-top: 18px;
    padding-top: 18px;
    text-align: center;
}

.app-login-switch small {
    color: var(--app-muted);
    display: block;
    margin-bottom: 8px;
}

.app-hidden {
    display: none !important;
}

.app-page .nav-tabs.app-tabs {
    border-bottom: 1px solid var(--app-border);
    gap: 4px;
}

.app-page .app-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--app-muted);
    font-size: .86rem;
    font-weight: 700;
    padding: 10px 14px;
}

.app-page .app-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--app-primary);
    color: var(--app-primary);
}

.app-tab-content {
    background: #fff;
    border: 1px solid var(--app-border);
    border-top: 0;
    border-radius: 0 0 var(--app-radius) var(--app-radius);
    padding: 18px;
}

.app-flow {
    align-items: center;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 10px 12px;
}

.app-count-badge {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 999px;
    color: #92400e;
    display: inline-flex;
    font-size: .84rem;
    font-weight: 800;
    padding: 5px 12px;
}

.app-accent-blue {
    --card-accent: var(--app-primary);
}

.app-accent-green {
    --card-accent: var(--app-success);
}

.app-accent-amber {
    --card-accent: var(--app-warning);
}

.app-accent-rose {
    --card-accent: var(--app-danger);
}

.app-accent-purple {
    --card-accent: var(--app-purple);
}

.app-accent-indigo {
    --card-accent: #4f46e5;
}

.app-accent-teal {
    --card-accent: #0f766e;
}

.app-accent-orange {
    --card-accent: #ea580c;
}

#studentsTable {
    min-width: 1200px;
}

.dataTables_wrapper {
    overflow-x: hidden !important;
}

/* Attendance statistics pages */
.stats-header {
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 58%, #dbeafe 100%) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
    color: var(--app-text) !important;
}

.stats-header h4,
.stats-header .meta {
    color: var(--app-text) !important;
    opacity: 1 !important;
}

.stats-header .meta {
    color: var(--app-muted) !important;
}

.stats-header input,
.stats-header select,
.date-nav input[type=date],
.week-sel {
    background: #fff !important;
    border: 1px solid var(--app-border-strong) !important;
    color: var(--app-text) !important;
}

.date-nav input[type=date]::-webkit-calendar-picker-indicator {
    filter: none !important;
}

.btn-nav,
.stats-header .btn-nav {
    background: var(--app-blue-600) !important;
    border: 1px solid var(--app-blue-600) !important;
    color: #fff !important;
}

.btn-nav:hover,
.stats-header .btn-nav:hover {
    background: var(--app-blue-700) !important;
}

.tbl-wrap,
.alert-card,
.class-group,
.hist-wrap,
.mini-stat {
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
}

.tbl-wrap {
    background: #fff !important;
}

.atd-stat-tbl thead th,
.weekly-tbl thead th,
.week-tbl thead th,
.hist-tbl th,
.summary-tbl th {
    background: #eaf4ff !important;
    border-color: var(--app-border-strong) !important;
    color: #16416f !important;
}

.atd-stat-tbl tbody td,
.weekly-tbl tbody td,
.week-tbl tbody td,
.hist-tbl td,
.summary-tbl td {
    background: #fff !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

.atd-stat-tbl tbody tr:nth-child(even) td,
.weekly-tbl tbody tr:nth-child(even) td,
.week-tbl tbody tr:nth-child(even) td,
.hist-tbl tr:nth-child(even) td {
    background: #f8fbff !important;
}

.atd-stat-tbl tbody tr:hover td,
.weekly-tbl tbody tr:hover td,
.week-tbl tbody tr:hover td,
.hist-tbl tr:hover td {
    background: #eff6ff !important;
}

.atd-stat-tbl .cls-cell,
.weekly-tbl .cls-cell,
.week-tbl .cls-cell,
.atd-stat-tbl td:first-child,
.weekly-tbl td:first-child,
.week-tbl .td-class,
.week-tbl td:first-child {
    background: #ffffff !important;
    color: #0f2f66 !important;
}

.atd-stat-tbl .total-cell,
.weekly-tbl .total-cell,
.week-tbl .total-cell,
.week-tbl tfoot td,
.summary-tbl .total-cell,
.summary-tbl tfoot td {
    background: #f1f7ff !important;
    color: #0f2f66 !important;
}

.summary-cards,
.alert-cards {
    gap: 14px !important;
}

.sum-card,
.alert-card {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
}

.sum-label,
.card-label,
.sum-sub,
.card-sub,
.empty-box,
.hist-dash,
.mini-stat-lbl {
    color: #5f7390 !important;
}

.sum-val,
.card-num,
.mini-stat-num,
.student-name,
.class-title {
    color: var(--app-text) !important;
}

.legend-wrap,
.tabs-bar {
    background: #fff !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    color: var(--app-text) !important;
}

.legend-item,
.tab-btn {
    color: var(--app-muted) !important;
}

.tab-btn.active {
    color: var(--app-blue-700) !important;
    border-bottom-color: var(--app-blue-600) !important;
}

.week-badge,
.wm-tab-badge,
.cnt-badge {
    background: var(--app-blue-600) !important;
    color: #fff !important;
}

.week-tbl .th-day-header,
.week-tbl thead th[style*="background"],
.hist-tbl th[style*="background"] {
    background: #dbeafe !important;
    color: #16416f !important;
}

.week-tbl .absent-cell {
    background: #fff !important;
    color: var(--app-text) !important;
}

.week-tbl .absent-cell:hover {
    background: #eff6ff !important;
}

.wm-tabs-bar {
    background: #f8fbff !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.nm-head,
.wm-head {
    background: linear-gradient(135deg, var(--app-blue-700), var(--app-blue-500)) !important;
    color: #fff !important;
}

.nm-body,
.wm-body {
    background: #fff !important;
    color: var(--app-text) !important;
}

.wm-tab {
    color: var(--app-muted) !important;
}

.wm-tab.active {
    color: var(--app-blue-700) !important;
    border-bottom-color: var(--app-blue-600) !important;
}

.wm-row,
.nm-row {
    color: var(--app-text) !important;
}

.wm-no,
.nm-no,
.wm-col-empty,
.nm-empty {
    color: var(--app-muted) !important;
}

.cls-header {
    background: #f8fbff !important;
    border-bottom-color: var(--app-border) !important;
}

.cls-header:hover,
.student-item:hover {
    background: #eff6ff !important;
}

.student-item,
.class-group {
    background: #fff !important;
    color: var(--app-text) !important;
}

.stu-badge {
    border: 1px solid transparent !important;
    font-weight: 800 !important;
}

.stu-badge.danger {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.stu-badge.warning {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.stu-badge.purple {
    background: #ede9fe !important;
    border-color: #ddd6fe !important;
    color: #5b21b6 !important;
}

.status-badge {
    color: #fff !important;
    font-weight: 800 !important;
}

.modal-head {
    background: linear-gradient(135deg, var(--app-blue-700), var(--app-blue-500)) !important;
    color: #fff !important;
}

@media (max-width: 576px) {
    .app-shell {
        padding: 14px;
    }

    .app-page-header {
        display: block;
    }

    .app-page-title {
        font-size: 1.22rem;
    }

    .app-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-action-card {
        align-items: flex-start;
        flex-direction: column;
        min-height: 112px;
    }
}