/* ==============================================================
   KRP SCHOOL SYSTEM — Shared Design System v1
   Visual/accessibility layer only: no API, form, or workflow logic.
   ============================================================== */

:root {
    --krp-primary: #1d4ed8;
    --krp-primary-hover: #1e40af;
    --krp-primary-soft: #eff6ff;
    --krp-accent: #f59e0b;
    --krp-accent-hover: #d97706;
    --krp-success: #15803d;
    --krp-warning: #b45309;
    --krp-danger: #b91c1c;
    --krp-info: #0369a1;
    --krp-bg: #f5f7fb;
    --krp-surface: #ffffff;
    --krp-surface-2: #f8fafc;
    --krp-text: #172033;
    --krp-muted: #64748b;
    --krp-border: #dbe3ef;
    --krp-focus: #fbbf24;
    --krp-sidebar-start: #12369a;
    --krp-sidebar-end: #1d4ed8;
    --krp-radius-sm: 10px;
    --krp-radius: 14px;
    --krp-radius-lg: 20px;
    --krp-shadow-sm: 0 2px 10px rgba(15, 35, 75, .06);
    --krp-shadow: 0 10px 28px rgba(15, 35, 75, .09);
    --krp-shadow-lg: 0 22px 52px rgba(15, 35, 75, .16);
    --krp-transition: 180ms ease;
    color-scheme: light;
}

html.krp-dark {
    --krp-primary: #60a5fa;
    --krp-primary-hover: #93c5fd;
    --krp-primary-soft: #172554;
    --krp-accent: #fbbf24;
    --krp-accent-hover: #fcd34d;
    --krp-success: #4ade80;
    --krp-warning: #fbbf24;
    --krp-danger: #f87171;
    --krp-info: #38bdf8;
    --krp-bg: #0b1220;
    --krp-surface: #111c2e;
    --krp-surface-2: #172337;
    --krp-text: #e5edf9;
    --krp-muted: #9fb0c6;
    --krp-border: #30415b;
    --krp-sidebar-start: #081a4e;
    --krp-sidebar-end: #102d78;
    --krp-shadow-sm: 0 2px 10px rgba(0, 0, 0, .18);
    --krp-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    --krp-shadow-lg: 0 24px 56px rgba(0, 0, 0, .4);
    /* Map legacy page variables to the same dark palette. */
    --bg-main: var(--krp-bg);
    --bg-dashboard: var(--krp-bg);
    --bg-surface: var(--krp-surface);
    --bg-card: var(--krp-surface);
    --bg-slate: var(--krp-surface-2);
    --ink: var(--krp-text);
    --muted: var(--krp-muted);
    --text-main: var(--krp-text);
    --text-muted: var(--krp-muted);
    --text-light: var(--krp-muted);
    --text-1: var(--krp-text);
    --text-2: var(--krp-muted);
    --text-3: #8294ad;
    --line: var(--krp-border);
    --border: var(--krp-border);
    --border-blue: var(--krp-border);
    --blue-soft: var(--krp-primary-soft);
    --blue-mid: #25457a;
    --accent-soft: #251f3a;
    --accent-pale: #3c315d;
    --purple-soft: #251f3a;
    --purple-pale: #3c315d;
    --v-bg: var(--krp-bg);
    --v-border: var(--krp-border);
    --v-text-soft: var(--krp-muted);
    --past: var(--krp-surface-2);
    color-scheme: dark;
}

html {
    font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea,
.btn {
    font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

body {
    background-color: var(--krp-bg);
    color: var(--krp-text);
    transition: background-color var(--krp-transition), color var(--krp-transition);
}

/* Keyboard focus is intentionally strong and consistent. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--krp-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(251, 191, 36, .18) !important;
}

:where(button, .btn, .menu-btn, .filter-chip, .filter-status-btn, .vsw-btn) {
    min-height: 42px;
    transition: color var(--krp-transition), background-color var(--krp-transition),
        border-color var(--krp-transition), box-shadow var(--krp-transition),
        transform var(--krp-transition);
}

:where(.btn, button):disabled {
    cursor: not-allowed !important;
    opacity: .62 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary,
:where(.btn-submit, .btn-submit-premium, .btn-send, .btn-submit)[type="submit"] {
    background: linear-gradient(135deg, var(--krp-primary), #2563eb) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: var(--krp-radius) !important;
    font-weight: 700 !important;
    box-shadow: 0 7px 18px rgba(29, 78, 216, .2);
}

.btn-primary:hover,
:where(.btn-submit, .btn-submit-premium, .btn-send):hover {
    background: linear-gradient(135deg, var(--krp-primary-hover), var(--krp-primary)) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(29, 78, 216, .25);
}

.btn-warning {
    background: var(--krp-accent) !important;
    border-color: var(--krp-accent) !important;
    color: #172033 !important;
    border-radius: var(--krp-radius) !important;
}

.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--krp-border) !important;
    color: var(--krp-primary) !important;
    background: var(--krp-surface) !important;
    border-radius: var(--krp-radius) !important;
}

/* Shared form controls */
:where(.form-control, .form-select, .field-input, .login-input, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    min-height: 44px;
    border: 1px solid var(--krp-border) !important;
    border-radius: var(--krp-radius-sm) !important;
    background-color: var(--krp-surface) !important;
    color: var(--krp-text) !important;
    box-shadow: none;
}

:where(.form-control, .form-select, .field-input, .login-input, input, textarea, select):focus {
    border-color: var(--krp-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .13) !important;
}

/* Main school login wraps its password input in .field.
   The wrapper owns the focus ring, so the inner input must not draw another one. */
.login-shell .field input,
.login-shell .field input:focus,
.login-shell .field input:focus-visible {
    min-height: 0;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.login-shell .field:focus-within {
    border-color: var(--krp-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .13) !important;
}

:where(input, textarea)::placeholder {
    color: var(--krp-muted) !important;
    opacity: .86;
}

:where(.form-label, .field-label) {
    color: var(--krp-text);
    font-weight: 650;
}

/* Common surfaces */
:where(.modern-card, .card, .form-card, .card-wrapper, .login-card, .history-card,
       .stat-card, .mini-stat, .filter-section, .filter-section-premium,
       .usage-analytics-section, .table-card) {
    border-color: var(--krp-border) !important;
    border-radius: var(--krp-radius-lg) !important;
    background-color: var(--krp-surface) !important;
    color: var(--krp-text);
    box-shadow: var(--krp-shadow-sm);
}


.modal-content {
    border: 1px solid var(--krp-border) !important;
    border-radius: var(--krp-radius-lg) !important;
    background: var(--krp-surface) !important;
    color: var(--krp-text) !important;
    box-shadow: var(--krp-shadow-lg) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--krp-border) !important;
}

.page-header {
    gap: 14px;
    margin-bottom: 24px !important;
}

.page-header h1,
.page-header h2,
.section-title {
    color: var(--krp-text) !important;
    letter-spacing: -.02em;
    line-height: 1.28;
}

.page-header p,
.text-muted,
.sidebar-footer {
    color: var(--krp-muted) !important;
}

/* Navigation keeps the current DOM and links; only appearance/touch targets change. */
.sidebar {
    background: linear-gradient(180deg, var(--krp-sidebar-start), var(--krp-sidebar-end)) !important;
}

.sidebar .sidebar-footer {
    color: rgba(255, 255, 255, .72) !important;
}

.menu-link {
    min-height: 46px;
    border-radius: 12px !important;
    margin: 3px 10px;
    padding: 10px 14px !important;
}

.menu-link:focus-visible {
    outline-color: #fbbf24 !important;
}

.menu-link.active {
    background: linear-gradient(135deg, #fbbf24, #f97316) !important;
    color: #172033 !important;
    box-shadow: 0 8px 18px rgba(245, 158, 11, .2);
}

.mobile-topbar {
    background: linear-gradient(135deg, var(--krp-sidebar-start), var(--krp-sidebar-end)) !important;
    border-bottom: 3px solid var(--krp-accent);
    box-shadow: var(--krp-shadow-sm);
}

.mobile-topbar .brand,
.mobile-topbar .menu-btn {
    color: #fff !important;
}

/* Tables */
.table-responsive {
    border-radius: var(--krp-radius);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--krp-text);
    --bs-table-border-color: var(--krp-border);
    color: var(--krp-text) !important;
    margin-bottom: 0;
}

.table thead th {
    background: var(--krp-surface-2) !important;
    color: var(--krp-muted) !important;
    border-color: var(--krp-border) !important;
    font-weight: 750;
    white-space: nowrap;
}

.table tbody td {
    border-color: var(--krp-border) !important;
    vertical-align: middle;
}

.table tbody tr:hover > * {
    background-color: var(--krp-primary-soft) !important;
}

/* Status language: same visual meaning across modules. */
:where(.status-pill, .badge-status, .award-badge, .linked-badge, .badge) {
    font-weight: 700;
    letter-spacing: 0;
}

:where([class*="status-รอ"], [class*="status-pending"], [class*="badge-wait"], .circle-pending) {
    background-color: #fff7d6 !important;
    border-color: #f3cc5c !important;
    color: #8a4b00 !important;
}

:where([class*="st-รอ"], [class*="badge-pending"]) {
    background-color: #fff7d6 !important;
    border-color: #f3cc5c !important;
    color: #8a4b00 !important;
}

:where([class*="status-รับ"], [class*="status-ack"], [class*="badge-approve"]) {
    background-color: #e8f1ff !important;
    border-color: #9fc1ff !important;
    color: #164aa8 !important;
}

:where([class*="status-กำลัง"], [class*="status-processing"], [class*="badge-inuse"]) {
    background-color: #f1eaff !important;
    border-color: #c7adff !important;
    color: #6732ad !important;
}

:where([class*="status-เสร็จ"], [class*="status-อนุมัติ"], [class*="st-เสร็จ"],
       [class*="status-success"], [class*="badge-done"], .bg-success-subtle) {
    background-color: #e7f8ed !important;
    border-color: #9ed7ad !important;
    color: #176b34 !important;
}

:where([class*="status-ยกเลิก"], [class*="status-ปฏิเสธ"], [class*="status-ไม่อนุมัติ"],
       [class*="badge-cancel"]) {
    background-color: #ffebeb !important;
    border-color: #f5b0b0 !important;
    color: #a51d1d !important;
}

.alert {
    border-radius: var(--krp-radius) !important;
    border-width: 1px !important;
}

/* Shared theme control. Existing page-specific dark buttons are preserved. */
#krpThemeControl {
    position: fixed;
    right: 14px;
    bottom: 68px;
    z-index: 2147482999;
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border: 1px solid var(--krp-border);
    border-radius: 999px;
    background: var(--krp-surface);
    color: var(--krp-primary);
    box-shadow: var(--krp-shadow);
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
}

#krpThemeControl:hover {
    transform: translateY(-1px);
    border-color: var(--krp-primary);
}

/* Complete shared dark mode coverage. */
html.krp-dark body,
body.dark-mode {
    background-color: var(--krp-bg) !important;
    color: var(--krp-text) !important;
}

html.krp-dark :where(.main-content, .main-container, .page-wrapper),
body.dark-mode :where(.main-content, .main-container, .page-wrapper) {
    color: var(--krp-text);
}

html.krp-dark :where(.modern-card, .card, .form-card, .card-wrapper, .login-card,
    .history-card, .stat-card, .mini-stat, .filter-section, .filter-section-premium,
    .usage-analytics-section, .table-card),
body.dark-mode :where(.modern-card, .card, .form-card, .card-wrapper, .login-card,
    .history-card, .stat-card, .mini-stat, .filter-section, .filter-section-premium,
    .usage-analytics-section, .table-card) {
    background: var(--krp-surface) !important;
    border-color: var(--krp-border) !important;
    color: var(--krp-text) !important;
}

html.krp-dark :where(.dropdown-menu, .list-group-item, .accordion-item, .offcanvas),
body.dark-mode :where(.dropdown-menu, .list-group-item, .accordion-item, .offcanvas) {
    background: var(--krp-surface) !important;
    border-color: var(--krp-border) !important;
    color: var(--krp-text) !important;
}

/* Custom surfaces used by individual modules. These selectors change paint only. */
html.krp-dark :where(.modal-content-premium, .modal-info-card, .report-card-premium,
    .stat-card-premium, .stat-card-p, .tbl-card, .kanban-card, .topic-card, .need-card,
    .activity-history-item, .meeting-history-item, .repair-history-item, .counsel-item,
    .dyn-row, .student-chip, .vehicle-card, .form-booking-card, .history-panel,
    .detail-card, .info-item, .info-block, .workflow-tracker-box, .smart-pass,
    .pass-body, .info-table, .signature-wrapper, .usage-kpi, .table-responsive-premium,
    .login-box, .privacy),
body.dark-mode :where(.modal-content-premium, .modal-info-card, .report-card-premium,
    .stat-card-premium, .stat-card-p, .tbl-card, .kanban-card, .topic-card, .need-card,
    .activity-history-item, .meeting-history-item, .repair-history-item, .counsel-item,
    .dyn-row, .student-chip, .vehicle-card, .form-booking-card, .history-panel,
    .detail-card, .info-item, .info-block, .workflow-tracker-box, .smart-pass,
    .pass-body, .info-table, .signature-wrapper, .usage-kpi, .table-responsive-premium,
    .login-box, .privacy) {
    background-color: var(--krp-surface) !important;
    border-color: var(--krp-border) !important;
    color: var(--krp-text) !important;
}

html.krp-dark :where(.form-progress-container, .quick-tag, .timeline-zone-divider,
    .history-zone-divider, .date-divider-row, .detail-row > td, .kanban-col, .h-bar-trk,
    .bar-track, .custom-dropdown-selected, .custom-dropdown-options, .filter-topic-btn,
    .filter-status-btn, .filter-tab, .filter-chip, .reason-chip,
    .cost-input-group .input-group-text, .form-booking-card .input-group-text,
    .usage-table td:first-child, .list-table th, .table-premium thead th),
body.dark-mode :where(.form-progress-container, .quick-tag, .timeline-zone-divider,
    .history-zone-divider, .date-divider-row, .detail-row > td, .kanban-col, .h-bar-trk,
    .bar-track, .custom-dropdown-selected, .custom-dropdown-options, .filter-topic-btn,
    .filter-status-btn, .filter-tab, .filter-chip, .reason-chip,
    .cost-input-group .input-group-text, .form-booking-card .input-group-text,
    .usage-table td:first-child, .list-table th, .table-premium thead th) {
    background-color: var(--krp-surface-2) !important;
    border-color: var(--krp-border) !important;
    color: var(--krp-muted) !important;
}

html.krp-dark :where(.date-divider-text, .timeline-zone-divider, .history-zone-divider),
body.dark-mode :where(.date-divider-text, .timeline-zone-divider, .history-zone-divider) {
    color: var(--krp-muted) !important;
}

/* Cover structural inline colors from older pages without changing their markup. */
html.krp-dark :where([style*="background:#fff"], [style*="background: #fff"],
    [style*="background:white"], [style*="background: white"],
    [style*="background:#f8fafc"], [style*="background: #f8fafc"],
    [style*="background:#f8faff"], [style*="background: #f8faff"],
    [style*="background:#f1f5f9"], [style*="background: #f1f5f9"],
    [style*="background-color: #f8fafc"], [style*="background-color:#f8fafc"],
    [style*="background-color: #eff6ff"]),
body.dark-mode :where([style*="background:#fff"], [style*="background: #fff"],
    [style*="background:white"], [style*="background: white"],
    [style*="background:#f8fafc"], [style*="background: #f8fafc"],
    [style*="background:#f8faff"], [style*="background: #f8faff"],
    [style*="background:#f1f5f9"], [style*="background: #f1f5f9"],
    [style*="background-color: #f8fafc"], [style*="background-color:#f8fafc"],
    [style*="background-color: #eff6ff"]) {
    background: var(--krp-surface-2) !important;
    border-color: var(--krp-border) !important;
}

html.krp-dark .btn-close,
body.dark-mode .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
}

html.krp-dark :where(h1, h2, h3, h4, h5, h6, label, strong, .fw-bold),
body.dark-mode :where(h1, h2, h3, h4, h5, h6, label, strong, .fw-bold) {
    color: var(--krp-text);
}

html.krp-dark :where(.bg-white, .bg-light),
body.dark-mode :where(.bg-white, .bg-light) {
    background-color: var(--krp-surface-2) !important;
}

html.krp-dark :where(.text-dark, .text-secondary),
body.dark-mode :where(.text-dark, .text-secondary) {
    color: var(--krp-muted) !important;
}

@media (max-width: 767.98px) {
    :where(button, .btn, .menu-btn, .filter-chip, .filter-status-btn, .vsw-btn) {
        min-height: 44px;
    }

    .menu-link {
        min-height: 48px;
        margin-inline: 8px;
    }

    .page-header {
        margin-bottom: 18px !important;
    }

    #krpThemeControl {
        right: 14px;
        bottom: 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    html.krp-dark {
        --krp-bg: #ffffff;
        --krp-surface: #ffffff;
        --krp-surface-2: #ffffff;
        --krp-text: #000000;
        --krp-muted: #334155;
        --krp-border: #cbd5e1;
        color-scheme: light;
    }

    html.krp-dark body,
    body.dark-mode {
        background: #ffffff !important;
        color: #000000 !important;
    }

    #krpThemeControl { display: none !important; }
}