/**
 * Coding By KruGuy Kasipat Sumanaspong
 */

/**
 * ธีม เขียวศรียาภัย — ทั้งระบบ (สอดคล้อง hero / login)
 * ฟอนต์ Google Fonts — Anuphan (โหลดจาก index.php + สำรอง self-host)
 */

/* ── ฟอร์มนักเรียน ── */
.student-form-card {
    background: #fff;
    border: 1px solid rgb(197 212 200 / 55%);
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgb(45 51 64 / 6%);
    overflow: hidden;
}

.student-form-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--gradient-primary);
    color: #fff;
}

.student-form-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 16%);
}

.student-form-head__icon svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.student-form-head__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

.student-form-head__lead {
    margin: 0.06rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: rgb(255 255 255 / 86%);
    font-weight: 400;
}

.student-location-form {
    --student-type: 0.8125rem;
    --student-field-h: 1.625rem;
    --student-surface: #faf8f6;
    --student-line: rgb(255 216 184 / 45%);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem 0.6rem;
}

.student-identity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 0.5rem;
    margin: 0;
    padding: 0 0 0.35rem;
    list-style: none;
    border-bottom: 1px solid var(--student-line);
}

.student-identity__item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 0.2rem;
    min-width: 0;
}

.student-identity__item--wide {
    grid-column: 1 / -1;
}

.student-identity__icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-brand-600);
    flex-shrink: 0;
}

.student-identity__label,
.student-identity__value {
    font-size: var(--student-type);
    line-height: 1.3;
}

.student-identity__label {
    color: #78716c;
    font-weight: 500;
}

.student-identity__value {
    color: var(--color-brand-800);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-form-notice {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem;
    border-radius: 0.5rem;
    background: #f0fdf4;
    color: #166534;
    font-size: var(--student-type);
    line-height: 1.3;
}

.student-form-notice__icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.student-form-notice__copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: baseline;
}

.student-form-notice__copy strong {
    font-weight: 700;
}

.student-form-notice__copy span {
    font-weight: 400;
    color: #15803d;
}

.student-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.student-form-section__title {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin: 0;
    font-size: var(--student-type);
    font-weight: 700;
    color: var(--color-brand-900);
}

.student-form-section__title svg {
    width: 0.8125rem;
    height: 0.8125rem;
    color: var(--color-brand-600);
}

.student-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.student-field--labeled {
    gap: 0.12rem;
}

.student-field__label {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    font-size: var(--student-type);
    font-weight: 600;
    line-height: 1.3;
    color: #57534e;
}

.student-field__icon {
    width: 0.8125rem;
    height: 0.8125rem;
    flex-shrink: 0;
    color: var(--color-brand-600);
}

.student-field__req {
    color: var(--color-accent-600);
}

.student-field__shell {
    display: block;
}

.student-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.75rem, 34%);
    gap: 0.28rem;
}

.student-field__control {
    width: 100%;
    min-height: var(--student-field-h);
    padding: 0.22rem 0.5rem;
    font-family: inherit;
    font-size: var(--student-type);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text);
    background: var(--student-surface);
    border: 1px solid transparent;
    border-radius: 0.5625rem;
    box-shadow: inset 0 0 0 1px rgb(231 229 228 / 90%);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.student-field__control--phone {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.student-field__control--area {
    min-height: 2.5rem;
    padding: 0.32rem 0.5rem;
    resize: vertical;
    line-height: 1.35;
}

.student-field__control::placeholder {
    color: #a8a29e;
    font-size: inherit;
    font-weight: 400;
}

.student-field__control:hover:not(:focus):not(:read-only) {
    background: #fff;
}

.student-field__control:focus {
    outline: none;
    background: #fff;
    box-shadow:
        inset 0 0 0 1px var(--color-brand-400),
        0 0 0 3px rgb(255 154 46 / 11%);
}

.student-field__control:read-only:not(:focus) {
    background: rgb(255 247 237 / 55%);
    box-shadow: inset 0 0 0 1px rgb(255 216 184 / 35%);
    color: var(--color-brand-800);
    -webkit-text-fill-color: var(--color-brand-800);
    font-weight: 600;
}

.student-field-group {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.student-field-group--compact {
    padding-top: 0.05rem;
}

.student-field-group__legend {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0;
    font-size: var(--student-type);
    font-weight: 600;
    color: #57534e;
}

.student-field-group__legend svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-brand-600);
}

.student-guardian-block {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding-top: 0.15rem;
    border-top: 1px dashed var(--student-line);
}

.student-guardian-block__title {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin: 0;
    font-size: var(--student-type);
    font-weight: 600;
    color: #57534e;
}

.student-guardian-block__title svg {
    width: 0.8125rem;
    height: 0.8125rem;
    color: var(--color-brand-600);
}

.student-guardian-block__fields.is-locked {
    opacity: 0.78;
}

.student-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.student-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    cursor: pointer;
    font-size: var(--student-type);
    line-height: 1.35;
    color: #57534e;
    font-weight: 500;
}

.student-radio input {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin: 0.1rem 0 0;
    accent-color: var(--color-brand-600);
    cursor: pointer;
}

.student-radio span {
    min-width: 0;
}

.student-radio:has(input:checked) {
    color: var(--color-brand-800);
    font-weight: 600;
}

.student-radio input:focus-visible {
    outline: 2px solid var(--color-brand-400);
    outline-offset: 2px;
}

@media (min-width: 480px) {
    .student-radio-group {
        flex-flow: row wrap;
        gap: 0.35rem 0.75rem;
    }
}

.student-gps-block {
    padding: 0.35rem 0 0;
    border-top: 1px solid var(--student-line);
}

.student-gps-block__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
}

.student-gps-block__title {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    margin: 0;
    font-size: var(--student-type);
    font-weight: 600;
    color: #57534e;
}

.student-gps-block__title svg {
    width: 0.8125rem;
    height: 0.8125rem;
    color: var(--color-brand-600);
}

.student-gps-block__hint {
    margin: 0.06rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--color-hint);
}

.student-gps-block__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    flex-shrink: 0;
    padding: 0.28rem 0.5rem;
    font-size: var(--student-type);
    font-weight: 700;
    color: #fff;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(255 92 58 / 22%);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.student-gps-block__btn svg {
    width: 0.75rem;
    height: 0.75rem;
}

.student-gps-block__btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgb(255 92 58 / 26%);
}

.student-gps-block__btn:active:not(:disabled) {
    transform: translateY(0);
}

.student-gps-block__hint[data-state='ok'] {
    color: #15803d;
    font-weight: 600;
}

.student-gps-block__hint[data-state='warn'] {
    color: #b45309;
    font-weight: 600;
}

.student-gps-block__hint[data-state='error'] {
    color: var(--color-accent-700);
    font-weight: 600;
}

.student-gps-block__coord-value[data-state='ok'] {
    color: #15803d;
}

.student-gps-block__coord-value[data-state='error'] {
    color: var(--color-accent-700);
}

.student-gps-block__btn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.student-gps-block__error {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.28rem;
    font-size: var(--student-type);
    line-height: 1.3;
    color: var(--color-accent-700);
}

.student-gps-block__error svg {
    width: 0.8125rem;
    height: 0.8125rem;
    flex-shrink: 0;
    margin-top: 0.08rem;
}

.student-gps-block__coords {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.22rem;
    margin-top: 0.3rem;
    padding: 0.3rem 0.35rem;
    border-radius: 0.5rem;
    background: var(--student-surface);
    box-shadow: inset 0 0 0 1px rgb(231 229 228 / 85%);
    font-size: var(--student-type);
}

.student-gps-block__coord {
    display: flex;
    flex-direction: column;
    gap: 0.04rem;
    min-width: 0;
}

.student-gps-block__coord--full {
    grid-column: 1 / -1;
}

.student-gps-block__coord-label {
    font-size: 0.6875rem;
    color: var(--color-hint);
    font-weight: 500;
}

.student-gps-block__coord-value {
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.student-form-submit {
    padding-top: 0.12rem;
}

.student-form-submit__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    width: 100%;
    padding: 0.48rem 0.7rem;
    font-family: inherit;
    font-size: var(--student-type);
    font-weight: 700;
    color: #fff;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(255 92 58 / 24%);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.student-form-submit__btn svg {
    width: 0.8125rem;
    height: 0.8125rem;
}

.student-form-submit__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgb(255 92 58 / 28%);
}

.student-form-submit__btn:active {
    transform: translateY(0);
}

.student-location-form .js-phone-th.input-invalid,
.student-location-form .js-phone-th:invalid:not(:placeholder-shown) {
    box-shadow:
        inset 0 0 0 1px var(--color-accent-500),
        0 0 0 2px var(--color-accent-200);
}

@media (min-width: 640px) {
    .student-location-form {
        padding: 0.55rem 0.7rem 0.7rem;
        gap: 0.4rem;
    }

    .student-form-head {
        padding: 0.65rem 0.8rem;
    }

    .student-field-row {
        grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 32%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .student-field__control,
    .student-gps-block__btn,
    .student-form-submit__btn {
        transition: none;
    }

    .student-gps-block__btn:hover:not(:disabled),
    .student-form-submit__btn:hover {
        transform: none;
    }
}

:root {
    --font-app: 'Anuphan', sans-serif;
    --color-white: #ffffff;
    --color-bg: #f4f6f4;
    --color-brand-50: #e8ede9;
    --color-brand-100: #dce6df;
    --color-brand-200: #c5d4c8;
    --color-brand-300: #a8c0ad;
    --color-brand-400: #6a9070;
    --color-brand-500: #4a6b4f;
    --color-brand-600: #3d5638;
    --color-brand-700: #336443;
    --color-brand-800: #2a3827;
    --color-brand-900: #1f2a1d;
    --color-accent-50: #eef4ef;
    --color-accent-100: #dce8de;
    --color-accent-200: #c5d8c9;
    --color-accent-500: #4b5b47;
    --color-accent-600: #3d5638;
    --color-accent-700: #336443;
    --color-accent-800: #2a3827;
    --color-text: #1f2a1d;
    --color-text-muted: #4b5b47;
    --color-hint: #6b7a67;
    --input-surface: #e8ede9;
    --input-border: #cdd8cf;
    --gradient-primary: linear-gradient(135deg, #3d5638 0%, #1f2a1d 100%);
    --gradient-primary-hover: linear-gradient(135deg, #336443 0%, #2a3827 100%);
    --admin-canvas: #f4f6f4;
    --admin-canvas-end: #e8ede9;
    --admin-surface: #ffffff;
    --admin-sidebar: #3d5638;
    --admin-sidebar-deep: #1f2a1d;
    --admin-ink-soft: #6b7a67;
    --admin-shadow: 0 1px 3px rgba(31, 42, 29, 0.07);
    --admin-shadow-hover: 0 4px 14px rgba(31, 42, 29, 0.1);
    --header-gradient: var(--gradient-primary);
}

html {
    font-family: var(--font-app) !important;
}

html,
body,
body *,
button,
input,
select,
textarea,
option,
optgroup,
.maplibregl-map,
.maplibregl-map *,
.maplibregl-popup,
.maplibregl-popup-content,
.maplibregl-popup-close-button,
.visitstd-map-popup,
.map-unavailable,
.admin-app,
.admin-app * {
    font-family: var(--font-app) !important;
}

.font-mono,
.font-mono *,
[class*='font-mono'] {
    font-family: var(--font-app) !important;
}

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

/* มือถือ/แท็บเล็ต — ห้ามซูมอัตโนมัติเมื่อโฟกัสฟิลด์ (iOS ต้องการ font-size ≥ 16px) */
html.app-no-zoom {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 1023.98px), (pointer: coarse) {
    html.app-no-zoom,
    html.app-no-zoom body {
        touch-action: manipulation;
    }

    html.app-no-zoom input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):not([type='file']):not([type='color']),
    html.app-no-zoom select,
    html.app-no-zoom textarea {
        font-size: 16px !important;
        line-height: 1.35;
    }

    /* แผนที่ยังซูม/เลื่อนได้ตามปกติ */
    html.app-no-zoom .maplibregl-map,
    html.app-no-zoom .maplibregl-canvas-container,
    html.app-no-zoom .maplibregl-canvas {
        touch-action: pan-x pan-y pinch-zoom;
    }
}

/* —— บังคับสี Tailwind (รวมคลาสใน JS / แคชเก่า) —— */
.bg-brand-50 { background-color: var(--color-brand-50) !important; }
.bg-brand-100 { background-color: var(--color-brand-100) !important; }
.bg-brand-200 { background-color: var(--color-brand-200) !important; }
.bg-brand-500 { background-color: var(--color-brand-500) !important; }
.bg-brand-600 { background-color: var(--color-brand-600) !important; }
.bg-brand-700 { background-color: var(--color-brand-700) !important; }
.bg-accent-50 { background-color: var(--color-accent-50) !important; }
.bg-accent-500 { background-color: var(--color-accent-500) !important; }
.bg-accent-600 { background-color: var(--color-accent-600) !important; }
.bg-accent-700 { background-color: var(--color-accent-700) !important; }
.hover\:bg-brand-700:hover { background-color: var(--color-brand-700) !important; }
.hover\:bg-accent-700:hover { background-color: var(--color-accent-700) !important; }
.hover\:bg-accent-800:hover { background-color: var(--color-accent-800) !important; }
.text-brand-500 { color: var(--color-brand-500) !important; }
.text-brand-600 { color: var(--color-brand-600) !important; }
.text-brand-700 { color: var(--color-brand-700) !important; }
.text-brand-800 { color: var(--color-brand-800) !important; }
.text-brand-900 { color: var(--color-brand-900) !important; }
.text-accent-600 { color: var(--color-accent-600) !important; }
.text-accent-700 { color: var(--color-accent-700) !important; }
.text-accent-800 { color: var(--color-accent-800) !important; }
.text-accent-900 { color: #7f1d1d !important; }
.border-t-brand-500 { border-top-color: var(--color-brand-500) !important; }
.border-t-brand-600 { border-top-color: var(--color-brand-600) !important; }
.border-t-accent-600 { border-top-color: var(--color-accent-600) !important; }
.border-brand-100 { border-color: var(--color-brand-100) !important; }
.border-brand-200 { border-color: var(--color-brand-200) !important; }
.border-brand-300 { border-color: var(--color-brand-300) !important; }
.border-accent-200 { border-color: var(--color-accent-200) !important; }
.from-brand-600 { --tw-gradient-from: var(--color-brand-600) !important; }
.from-brand-700 { --tw-gradient-from: var(--color-brand-700) !important; }
.to-accent-600 { --tw-gradient-to: var(--color-accent-600) !important; }

/* แทนที่ธีมน้ำเงินเก่า */
.bg-blue-50, .bg-blue-100 { background-color: var(--color-brand-50) !important; }
.bg-blue-600, .bg-blue-700, .bg-blue-800,
.hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover {
    background-color: var(--color-brand-600) !important;
}
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--color-brand-700) !important; }
.border-blue-100, .border-blue-200 { border-color: var(--color-brand-200) !important; }
.from-blue-700, .to-indigo-600 {
    --tw-gradient-from: var(--color-brand-700) !important;
    --tw-gradient-to: var(--color-accent-600) !important;
}
.bg-indigo-600, .bg-indigo-700 { background-color: var(--color-accent-700) !important; }
.text-indigo-600, .text-indigo-700 { color: var(--color-accent-700) !important; }
.bg-sky-50, .bg-sky-100 { background-color: var(--color-brand-50) !important; }

.bg-header-gradient {
    background: var(--header-gradient) !important;
}

.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.hover\:bg-gradient-primary-hover:hover {
    background: var(--gradient-primary-hover) !important;
}

.btn-gradient-primary {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    transition: background 0.15s, transform 0.1s;
}

.btn-gradient-primary:hover {
    background: var(--gradient-primary-hover);
}

.btn-gradient-primary:active {
    transform: scale(0.99);
}

.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine 3.5s infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-brand-100); }
::-webkit-scrollbar-thumb { background: var(--color-brand-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-brand-500); }

.animate-fade-in {
    animation: fadeIn 0.35s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* —— Smooth motion: modal, page, sidebar —— */
.login-modal.hidden,
.teacher-visit-modal.hidden,
.admin-modal.hidden,
.teacher-photo-lightbox.hidden,
.sweet-alert-modal.hidden {
    display: none !important;
}

.login-modal:not(.hidden),
.teacher-visit-modal:not(.hidden),
.admin-modal:not(.hidden),
.teacher-photo-lightbox:not(.hidden),
.sweet-alert-modal:not(.hidden) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}

.login-modal.visitstd-motion--active,
.teacher-visit-modal.visitstd-motion--active,
.admin-modal.visitstd-motion--active,
.teacher-photo-lightbox.visitstd-motion--active,
.sweet-alert-modal.visitstd-motion--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.login-modal:not(.hidden) .login-modal__backdrop,
.teacher-visit-modal:not(.hidden) .teacher-visit-modal__backdrop,
.admin-modal:not(.hidden) .admin-modal__backdrop,
.teacher-photo-lightbox:not(.hidden) .teacher-photo-lightbox__backdrop,
.sweet-alert-modal:not(.hidden) .sweet-alert-modal__backdrop {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-modal.visitstd-motion--active .login-modal__backdrop,
.teacher-visit-modal.visitstd-motion--active .teacher-visit-modal__backdrop,
.admin-modal.visitstd-motion--active .admin-modal__backdrop,
.teacher-photo-lightbox.visitstd-motion--active .teacher-photo-lightbox__backdrop,
.sweet-alert-modal.visitstd-motion--active .sweet-alert-modal__backdrop {
    opacity: 1;
}

.login-modal:not(.hidden) .login-modal__panel,
.teacher-visit-modal:not(.hidden) .teacher-visit-modal__panel,
.admin-modal:not(.hidden) .admin-modal__panel,
.sweet-alert-modal:not(.hidden) .sweet-alert-modal__panel {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
    transition:
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.login-modal.visitstd-motion--active .login-modal__panel,
.teacher-visit-modal.visitstd-motion--active .teacher-visit-modal__panel,
.admin-modal.visitstd-motion--active .admin-modal__panel,
.sweet-alert-modal.visitstd-motion--active .sweet-alert-modal__panel {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.teacher-photo-lightbox:not(.hidden) .teacher-photo-lightbox__img {
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.teacher-photo-lightbox.visitstd-motion--active .teacher-photo-lightbox__img {
    opacity: 1;
    transform: scale(1);
}

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

[data-admin-panel].visitstd-page--enter {
    animation: visitstdPageEnter 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-sidebar__backdrop.hidden {
    display: none !important;
}

.admin-sidebar__backdrop:not(.hidden) {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.26s;
}

.admin-sidebar__backdrop.visitstd-motion--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .login-modal:not(.hidden),
    .teacher-visit-modal:not(.hidden),
    .admin-modal:not(.hidden),
    .teacher-photo-lightbox:not(.hidden),
    .sweet-alert-modal:not(.hidden),
    .login-modal:not(.hidden) .login-modal__backdrop,
    .teacher-visit-modal:not(.hidden) .teacher-visit-modal__backdrop,
    .admin-modal:not(.hidden) .admin-modal__backdrop,
    .teacher-photo-lightbox:not(.hidden) .teacher-photo-lightbox__backdrop,
    .sweet-alert-modal:not(.hidden) .sweet-alert-modal__backdrop,
    .login-modal:not(.hidden) .login-modal__panel,
    .teacher-visit-modal:not(.hidden) .teacher-visit-modal__panel,
    .admin-modal:not(.hidden) .admin-modal__panel,
    .sweet-alert-modal:not(.hidden) .sweet-alert-modal__panel,
    .teacher-photo-lightbox:not(.hidden) .teacher-photo-lightbox__img,
    .admin-sidebar__backdrop:not(.hidden) {
        transition: none !important;
        transform: none !important;
    }

    .sweet-alert-modal__icon-ring {
        animation: none !important;
    }

    .sweet-alert-modal.visitstd-motion--active .sweet-alert-modal__panel::after,
    .sweet-alert-modal.visitstd-motion--active .sweet-alert-modal__icon {
        animation: none !important;
    }

    .sweet-alert-modal__btn::after,
    .sweet-alert-modal__icon::after {
        display: none !important;
    }

    .sweet-alert-modal__panel:hover .sweet-alert-modal__icon-wrap,
    .sweet-alert-modal__btn--cancel:hover,
    .sweet-alert-modal__btn--confirm:hover {
        transform: none !important;
    }

    [data-admin-panel].visitstd-page--enter {
        animation: none !important;
    }
}

/* transform บนพ่อแม่ทำให้ MapLibre แตกไทล์เป็นแผ่นสี่เหลี่ยม */
#app-content:has(#teacher-view),
#app-content:has(#student-view),
#app-content:has(.admin-map) {
    animation: none;
    opacity: 1;
    transform: none;
}

.maplibregl-canvas {
    outline: none;
}

.teacher-map-panel .maplibregl-map,
.student-class-map-panel .maplibregl-map,
.admin-map.maplibregl-map {
    background: #e8ece8;
}

.visitstd-map-marker,
.visitstd-school-marker {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
}

.visitstd-school-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    --visitstd-school-scale: calc(var(--visitstd-marker-scale, 1) * 1.28);
    filter: drop-shadow(0 3px 5px rgb(0 0 0 / 32%));
}

.visitstd-school-marker__pin {
    position: relative;
    width: 2.25rem;
    height: 3rem;
    transform: scale(var(--visitstd-school-scale));
    transform-origin: bottom center;
}

.visitstd-school-marker__shape {
    display: block;
    width: 100%;
    height: 100%;
}

.visitstd-school-marker__shape path,
.visitstd-legend-school-pin__shape path {
    fill: #facc15;
    stroke: #ca8a04;
}

.visitstd-school-marker__logo {
    position: absolute;
    left: 50%;
    top: 7%;
    transform: translateX(-50%);
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
    pointer-events: none;
}

.visitstd-school-marker__fallback {
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #e8ede9;
    border: 2px solid #fff;
    color: var(--color-brand-700);
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.visitstd-legend-school-pin {
    position: relative;
    width: 0.75rem;
    height: 1rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 20%));
}

.visitstd-legend-school-pin__shape {
    display: block;
    width: 100%;
    height: 100%;
}

.visitstd-legend-school-pin__logo {
    position: absolute;
    left: 50%;
    top: 7%;
    transform: translateX(-50%);
    width: 54%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #fff;
    pointer-events: none;
}

.visitstd-map-legend {
    max-width: min(16rem, calc(100vw - 2rem));
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    border: 1px solid var(--color-brand-100);
    box-shadow: 0 4px 14px rgb(67 20 7 / 12%);
    font-size: 0.6875rem;
    font-weight: 700;
    color: #1f2937;
}

.visitstd-map-legend__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    border-radius: 0.75rem;
}

.visitstd-map-legend__toggle:hover {
    background: var(--color-brand-50);
}

.visitstd-map-legend__toggle:focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 1px;
}

.visitstd-map-legend__title {
    white-space: nowrap;
}

.visitstd-map-legend__chevron {
    flex-shrink: 0;
    color: var(--color-brand-700);
    transition: transform 0.2s ease;
}

.visitstd-map-legend__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 0.5rem 0.5rem;
    border-top: 1px solid var(--color-brand-100);
}

.visitstd-map-legend__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.visitstd-legend-user-dot {
    display: inline-block;
    position: relative;
    top: auto;
    left: auto;
    width: 12px;
    height: 12px;
    margin: 0;
    flex-shrink: 0;
}

.visitstd-map-legend .visitstd-legend-user-dot.visitstd-gmaps-dot {
    border-width: 2px;
}

/* หมุดนักเรียนอยู่ชั้นล่าง — จุดตำแหน่งปัจจุบัน (แบบ Google Maps) อยู่ชั้นบน */
.maplibregl-marker:has(.student-marker) {
    z-index: 5 !important;
}

.visitstd-user-location-marker {
    z-index: 9999 !important;
    pointer-events: none;
}

.visitstd-gmaps-loc {
    position: relative;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* จุดน้ำเงินแบบ Google Maps */
.visitstd-gmaps-dot {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #1a73e8;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}

.visitstd-map-tool--my-location.visitstd-map-tool--alert {
    color: #1a73e8;
}

.visitstd-map-tool--my-location.visitstd-map-tool--alert .visitstd-map-tool__icon svg {
    stroke: #1a73e8;
}

.visitstd-map-tool--my-location.visitstd-map-tool--hint {
    animation: visitstd-my-location-hint 1.2s ease-in-out 3;
}

@keyframes visitstd-my-location-hint {
    0%,
    100% {
        box-shadow: inset 0 0 0 0 transparent;
    }
    50% {
        box-shadow: inset 0 0 0 2px rgb(26 115 232 / 55%);
    }
}

/* ปุ่มตำแหน่งปัจจุบัน (มุมซ้ายล่าง) */
.maplibregl-ctrl-geolocate {
    background-color: #fff !important;
    box-shadow: 0 1px 4px rgb(0 0 0 / 22%) !important;
}

.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active {
    color: #1a73e8 !important;
}

.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error {
    color: #dc2626 !important;
}

.visitstd-map-legend[data-collapsed='true'] .visitstd-map-legend__body {
    display: none;
}

.visitstd-map-legend[data-collapsed='true'] .visitstd-map-legend__chevron {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .visitstd-map-legend__chevron {
        transition: none;
    }
}

.visitstd-map-scale-ctrl {
    width: 2.25rem;
    margin-top: 0.35rem !important;
    padding: 0.25rem 0.2rem !important;
    box-shadow: 0 1px 4px rgb(67 20 7 / 10%);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.2rem;
}

.visitstd-map-scale-ctrl__title {
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-brand-800);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    user-select: none;
}

.visitstd-map-scale-ctrl__range {
    width: 0.875rem;
    height: 4.5rem;
    margin: 0;
    writing-mode: vertical-lr;
    direction: rtl;
    cursor: ns-resize;
    accent-color: var(--color-brand-600);
}

.visitstd-map-tools-ctrl {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 2.25rem;
    margin-top: 0.35rem !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 1px 4px rgb(67 20 7 / 10%);
}

/* MapLibre บังคับ .maplibregl-ctrl-group button เป็น 29×29px — ต้อง override ให้เต็ม card */
.maplibregl-ctrl-group.visitstd-map-tools-ctrl > button.visitstd-map-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 2.25rem;
    box-sizing: border-box;
}

.visitstd-map-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    width: 100%;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.35rem 0;
    border: 0;
    background: #fff;
    color: var(--color-brand-800);
    cursor: pointer;
    text-align: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.visitstd-map-tool:not(:first-child) {
    border-top: 1px solid rgb(0 0 0 / 8%);
}

.visitstd-map-tool:hover {
    background: var(--color-brand-50);
}

.visitstd-map-tool:active {
    background: var(--color-brand-100);
}

.visitstd-map-tool:focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: -2px;
    z-index: 1;
}

.visitstd-map-tool--inactive {
    color: #78716c;
    background: #fafaf9;
}

.visitstd-map-tool--inactive .visitstd-map-tool__icon svg {
    opacity: 0.4;
}

.visitstd-map-tool--alert {
    background: var(--color-brand-50);
}

.visitstd-map-tool--flash {
    background: #ecfdf5;
    color: #15803d;
}

.visitstd-map-tool__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}

.visitstd-map-tool__icon svg {
    display: block;
    width: 1rem;
    height: 1rem;
}

.visitstd-map-tool__caption {
    display: block;
    width: 100%;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.visitstd-map-tool__badge {
    position: absolute;
    top: 0.12rem;
    right: 0.12rem;
    min-width: 0.75rem;
    height: 0.75rem;
    padding: 0 0.15rem;
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 0.75rem;
    text-align: center;
    color: #fff;
    background: var(--color-brand-600);
    border-radius: 999px;
    box-shadow: 0 0 0 1px #fff;
    pointer-events: none;
}

.visitstd-map-tool__badge[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .visitstd-map-tool {
        transition: none;
    }
}

.maplibregl-popup-content {
    border-radius: 1.375rem;
    border: 1px solid var(--color-brand-200);
    box-shadow:
        0 12px 32px rgba(124, 45, 18, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    padding: 0.9rem 1rem 0.85rem;
    overflow: hidden;
}

.visitstd-map-popup-wrap .maplibregl-popup-content {
    border-radius: 1.5rem;
}

.maplibregl-popup-close-button {
    color: var(--color-brand-700) !important;
    font-size: 1.15rem;
    line-height: 1;
    top: 0.55rem;
    right: 0.55rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.maplibregl-popup-close-button:hover {
    color: var(--color-accent-700) !important;
    background: rgba(51, 100, 67, 0.1);
}

#map-container.maplibregl-map,
#student-class-map-container.maplibregl-map,
.admin-map.maplibregl-map {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.btn-brand {
    background-color: var(--color-brand-600);
    color: var(--color-white);
}

.btn-brand:hover {
    background-color: var(--color-brand-700);
}

.text-brand {
    color: var(--color-brand-700);
}

/* การ์ด / ตาราง */
.theme-card {
    background: var(--color-white);
    border: 1px solid var(--color-brand-100);
    border-radius: 1rem;
}

.theme-table thead {
    background: var(--color-brand-50);
    border-bottom: 2px solid var(--color-brand-200);
}

.theme-table tbody tr {
    border-bottom: 1px solid var(--color-brand-100);
}

.theme-table tbody tr:hover {
    background-color: var(--color-brand-50) !important;
}

.theme-table tbody tr:nth-child(even) {
    background-color: #eef2ef;
}

.theme-table tbody tr:nth-child(even):hover {
    background-color: var(--color-brand-50) !important;
}

input:focus,
select:focus,
textarea:focus {
    outline-color: var(--color-brand-500);
    --tw-ring-color: var(--color-brand-500);
}

/* —— Fullscreen shell —— */
html {
    height: 100%;
}

.app-shell {
    overflow-x: hidden;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-guest .app-main--guest {
    flex: 1 1 auto;
}

.page-guest #app-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.site-footer {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__inner {
    overflow: hidden;
}

.site-footer__text {
    margin: 0;
    line-height: 1.45;
    white-space: nowrap;
    font-size: clamp(0.5625rem, 2.75vw, 0.875rem);
}

@media (min-width: 640px) {
    .site-footer__text {
        font-size: clamp(0.6875rem, 1.6vw, 0.875rem);
    }
}

.page-guest .site-footer {
    background: rgba(0, 0, 0, 0.15);
}

.page-guest .site-footer__text {
    color: rgba(255, 237, 213, 0.85);
}

.page-app .site-footer {
    background: #fff;
    border-top-color: var(--color-brand-100);
}

.page-app .site-footer__text {
    color: #78716c;
}

.page-app .app-main--app {
    max-width: none;
    width: 100%;
}

.page-app .app-main--student {
    padding: 0.625rem 0.625rem 0.75rem;
}

@media (min-width: 640px) {
    .page-app .app-main--student {
        padding: 0.75rem 0.875rem 0.875rem;
    }
}

.page-app #app-content:has(#student-view) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-viewport {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-app #app-content:has(#teacher-view) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-app .app-main--teacher {
    padding: 0.5rem 0.625rem 0.375rem;
}

@media (min-width: 640px) {
    .page-app .app-main--teacher {
        padding: 0.625rem 0.875rem 0.5rem;
    }
}

#teacher-view {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.teacher-view__panels {
    flex: 1 1 auto;
    min-height: 0;
}

#teacher-view .teacher-map-panel {
    flex: 1 1 auto;
    min-height: 12rem;
}

#teacher-view .teacher-map-panel__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 10rem;
}

#teacher-view .teacher-map-panel__map,
#teacher-view #map-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #e8ece8;
}

.teacher-my-location-btn {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    border-radius: 9999px;
    border: 2px solid #fff;
    background: #1a73e8;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 4px 14px rgb(26 115 232 / 45%);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.teacher-my-location-btn:hover {
    background: #1558b8;
}

.teacher-my-location-btn:active {
    transform: scale(0.97);
}

.teacher-my-location-btn:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

.teacher-my-location-btn--active {
    background: #0f4fae;
}

.teacher-my-location-btn--error {
    background: var(--color-accent-600);
    box-shadow: 0 4px 14px rgba(31, 42, 29, 0.35%);
}

.teacher-map-loc-status {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    z-index: 1090;
    transform: translateX(-50%);
    max-width: min(92%, 22rem);
    margin: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 92%);
    border: 1px solid var(--color-brand-100);
    color: #374151;
    font-size: 0.6875rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
    pointer-events: none;
}

.teacher-map-loc-status--ok {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: rgb(239 246 255 / 95%);
}

.teacher-map-loc-status--error {
    color: var(--color-accent-700);
    border-color: #fecaca;
    background: rgb(254 242 242 / 95%);
}

@media (max-width: 640px) {
    .teacher-my-location-btn span {
        display: none;
    }

    .teacher-my-location-btn {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .teacher-map-loc-status {
        bottom: 3.65rem;
        font-size: 0.625rem;
    }
}

.maplibregl-user-location-dot {
    width: 16px !important;
    height: 16px !important;
    background-color: #1a73e8 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%) !important;
}

.maplibregl-user-location-accuracy-circle {
    background-color: rgb(26 115 232 / 14%) !important;
}

/* ปุ่มตำแหน่งฉัน — สร้างใน visitstd-map.js บนแผนที่โดยตรง */
.visitstd-loc-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.visitstd-loc-overlay__btn {
    position: absolute;
    left: 0.65rem;
    bottom: 0.65rem;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.8rem;
    border-radius: 9999px;
    border: 2px solid #fff;
    background: #1a73e8;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 4px 14px rgb(26 115 232 / 45%);
    cursor: pointer;
}

.visitstd-loc-overlay__btn svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.visitstd-loc-overlay__btn:hover {
    background: #1558b8;
}

.visitstd-loc-overlay__btn--active {
    background: #0f4fae;
}

.visitstd-loc-overlay__btn--error {
    background: var(--color-accent-600);
    box-shadow: 0 4px 14px rgba(31, 42, 29, 0.35%);
}

.visitstd-loc-overlay__status {
    position: absolute;
    left: 50%;
    bottom: 0.65rem;
    transform: translateX(-50%);
    max-width: min(90%, 20rem);
    margin: 0;
    padding: 0.3rem 0.55rem;
    border-radius: 0.45rem;
    background: rgb(255 255 255 / 94%);
    border: 1px solid #fed7aa;
    color: #374151;
    font-size: 0.625rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.visitstd-loc-overlay__status--ok {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: rgb(239 246 255 / 96%);
}

.visitstd-loc-overlay__status--error {
    color: var(--color-accent-700);
    border-color: #fecaca;
    background: rgb(254 242 242 / 96%);
}

@media (max-width: 640px) {
    .visitstd-loc-overlay__btn span {
        display: none;
    }

    .visitstd-loc-overlay__btn {
        width: 2.65rem;
        height: 2.65rem;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .visitstd-loc-overlay__status {
        bottom: 3.5rem;
    }
}

#teacher-view .teacher-list-panel--solo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ครู — มือถือ/แท็บเล็ต มุมมองรายชื่อ: ตรึงหัว+แถบครู+หัวตาราง เลื่อนเฉพาะการ์ดนักเรียน */
@media (max-width: 1023.98px) {
    html:has(#teacher-view.teacher-view--list),
    body.page-app:has(#teacher-view.teacher-view--list) {
        height: 100%;
        overflow: hidden;
    }

    .page-app.app-shell:has(#teacher-view.teacher-view--list) {
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .page-app.app-shell:has(#teacher-view.teacher-view--list) > header {
        flex-shrink: 0;
        position: relative;
        top: auto;
    }

    .page-app.app-shell:has(#teacher-view.teacher-view--list) .app-main--teacher {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .page-app #app-content:has(#teacher-view.teacher-view--list) {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    #teacher-view.teacher-view--list {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    #teacher-view.teacher-view--list .teacher-toolbar {
        flex-shrink: 0;
    }

    #teacher-view.teacher-view--list .teacher-view__panels {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    #teacher-view.teacher-view--list .teacher-list-panel--solo {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    #teacher-view.teacher-view--list .teacher-list-panel__head {
        flex-shrink: 0;
    }

    #teacher-view.teacher-view--list .teacher-list-panel__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ครู — จอใหญ่: แผนที่เต็มความสูงที่เหลือ, เลื่อนเฉพาะรายชื่อขวา */
@media (min-width: 1024px) {
    .page-app.app-shell:has(#teacher-view) {
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .page-app .app-main--teacher {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .page-app #app-content:has(#teacher-view) {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    #teacher-view {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .teacher-view__panels {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        align-items: stretch;
    }

    #teacher-view .teacher-map-panel {
        flex: 1 1 0;
        min-height: 0;
        max-height: 100%;
        height: auto;
    }

    #teacher-view .teacher-list-panel {
        flex: 0 0 24rem;
        width: 24rem;
        max-height: 100%;
        min-height: 0;
    }

    #teacher-view .teacher-list-panel--solo {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }

    #teacher-view .teacher-list-panel__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* นักเรียน — จอใหญ่: ทั้งหน้าไม่เลื่อน แผนที่กับฟอร์มสูงเท่ากันในหน้าจอ */
@media (min-width: 1024px) {
    html:has(#student-view),
    body.page-app:has(#student-view) {
        height: 100%;
        overflow: hidden;
    }

    .page-app.app-shell:has(#student-view) {
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .page-app.app-shell:has(#student-view) > header {
        flex-shrink: 0;
    }

    .page-app.app-shell:has(#student-view) .app-main--student {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0.5rem 0.75rem;
    }

    .page-app #app-content:has(#student-view) {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .page-app.app-shell:has(#student-view) .site-footer {
        flex-shrink: 0;
    }

    .page-app.app-shell:has(#student-view) .site-footer__inner {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    #student-view {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .student-split-layout__form {
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .student-form-card {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .student-form-head {
        flex-shrink: 0;
        padding: clamp(0.5rem, 1.1vh, 0.72rem) 0.7rem;
    }

    .student-form-head__lead {
        display: none;
    }

    .student-form-head__title {
        font-size: 0.875rem;
    }

    .student-location-form {
        --student-type: 0.8125rem;
        --student-field-h: 1.75rem;
        flex: 1 1 auto;
        min-height: 0;
        gap: clamp(0.55rem, 1.55vh, 1.05rem);
        padding: clamp(0.5rem, 1.15vh, 0.8rem) 0.7rem clamp(0.55rem, 1.15vh, 0.8rem);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--color-brand-300) transparent;
    }

    .student-location-form::-webkit-scrollbar {
        width: 6px;
    }

    .student-location-form::-webkit-scrollbar-thumb {
        background: var(--color-brand-300);
        border-radius: 999px;
    }

    .student-identity {
        padding-bottom: clamp(0.35rem, 0.9vh, 0.6rem);
    }

    .student-form-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(0.38rem, 1.1vh, 0.72rem) 0.55rem;
    }

    .student-form-section__title,
    .student-field--labeled,
    .student-guardian-block {
        grid-column: 1 / -1;
    }

    .student-field-group--compact {
        gap: clamp(0.28rem, 0.75vh, 0.45rem);
    }

    .student-guardian-block {
        gap: clamp(0.32rem, 0.9vh, 0.55rem);
        padding-top: clamp(0.2rem, 0.65vh, 0.4rem);
    }

    .student-radio-group {
        gap: clamp(0.28rem, 0.75vh, 0.45rem);
    }

    .student-field__control--area {
        min-height: clamp(2.1rem, 4.2vh, 2.85rem);
        padding: clamp(0.28rem, 0.7vh, 0.38rem) 0.5rem;
    }

    .student-gps-block {
        padding-top: clamp(0.3rem, 0.85vh, 0.55rem);
    }

    .student-gps-block__hint {
        font-size: 0.6875rem;
        line-height: 1.35;
    }

    .student-form-submit__btn {
        padding: clamp(0.45rem, 1.1vh, 0.58rem) 0.75rem;
    }

    .student-form-submit {
        position: static;
        margin-top: auto;
        padding-top: clamp(0.4rem, 1.1vh, 0.8rem);
        background: none;
    }

    .student-split-layout:not(:has(.student-split-layout__map)) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 40rem;
        margin-inline: auto;
        width: 100%;
    }
}

/* —— Guest shell (full-viewport hero) —— */
body.page-guest {
    background: #e8ede9 !important;
    color: #1f2a1d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Anuphan', sans-serif;
}

body.page-guest,
body.page-guest .login-hero,
body.page-guest .login-hero * {
    font-family: 'Anuphan', sans-serif !important;
}

body.login-hero-menu-open {
    overflow: hidden;
}

.page-guest > header.site-header,
.page-guest > footer.site-footer {
    display: none;
}

.page-guest.app-shell {
    min-height: 100dvh;
    min-height: 100svh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.page-guest .app-main--guest {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-guest #app-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* —— Login hero (looping video) —— */
.login-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: #e8ede9;
    color: #1f2a1d;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 640px) {
    .login-hero {
        height: 100%;
        min-height: 100dvh;
    }
}

@media (max-width: 639px) {
    html:has(body.page-guest),
    body.page-guest {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-guest.app-shell {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        max-height: none;
        overflow: visible;
    }

    .page-guest .app-main--guest,
    .page-guest #app-content {
        overflow: visible;
        min-height: 0;
    }

    .login-hero {
        flex: 0 0 auto;
        min-height: 100svh;
        min-height: 100dvh;
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .login-hero__boomerang {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100svh;
        height: 100dvh;
        z-index: 0;
    }

    .login-hero__nav,
    .login-hero__headline,
    .login-hero__roles {
        position: relative;
        z-index: 1;
    }

    .login-hero__nav {
        padding-top: max(0.85rem, env(safe-area-inset-top, 0px));
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    .login-hero__headline {
        flex: 0 1 auto;
        justify-content: flex-start;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .login-hero__logo-wrap {
        margin-bottom: 0.65rem;
    }

    .login-hero__lead {
        margin-top: 0.85rem;
    }

    .login-hero__roles {
        padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
        padding-left: max(0, env(safe-area-inset-left, 0px));
        padding-right: max(0, env(safe-area-inset-right, 0px));
    }

    .login-hero__roles p {
        margin-bottom: 1rem;
    }
}

.login-hero__headline {
    width: 100%;
    overflow-x: clip;
}

.login-hero__logo-wrap {
    width: clamp(3.75rem, 14vw, 5.5rem);
    height: clamp(3.75rem, 14vw, 5.5rem);
    margin: 0 auto clamp(0.85rem, 2.5vw, 1.35rem);
    border-radius: 9999px;
    background: rgb(255 255 255 / 94%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgb(0 0 0 / 14%);
    overflow: hidden;
    flex-shrink: 0;
    animation: login-hero-logo-float 4.5s ease-in-out infinite;
}

.login-hero__logo-img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.login-hero__logo-fallback {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #336443;
}

.login-hero__logo-fallback [data-lucide] {
    width: 52%;
    height: 52%;
}

@keyframes login-hero-logo-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.45rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-hero__logo-wrap {
        animation: none;
    }
}

.login-hero__title {
    margin: 0 auto;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;
    container-type: inline-size;
    width: 100%;
    max-width: min(100%, 72rem);
    text-align: center;
}

.login-hero__title-line {
    display: block;
    white-space: nowrap;
    max-width: 100%;
    margin-inline: auto;
}

.login-hero__title-line--primary {
    font-size: min(
        clamp(1.35rem, calc(100cqi / 20), 9.45rem),
        calc((100vw - 2.5rem) / 20)
    );
    font-weight: 700;
}

.login-hero__title-line--sub {
    margin-top: 0.28em;
    font-size: min(
        clamp(0.9rem, calc(100cqi / 26), 6.03rem),
        calc((100vw - 2.5rem) / 26)
    );
    font-weight: 700;
}

.login-hero__title-dark {
    color: #336443;
    font-weight: 700;
    -webkit-text-stroke: 1.28px rgb(255 255 255 / 92%);
    paint-order: stroke fill;
}

.login-hero__title-light {
    color: rgb(133 171 139 / 88%);
    font-weight: 700;
    -webkit-text-stroke: 1.28px rgb(255 255 255 / 92%);
    paint-order: stroke fill;
}

.login-hero__lead {
    margin-top: clamp(1.35rem, 3.5cqi, 2.25rem);
    color: #4b5b47;
    line-height: 1.45;
    width: 100%;
    max-width: min(100%, 72rem);
    margin-inline: auto;
    padding-inline: 0.5rem;
    container-type: inline-size;
    font-size: min(
        clamp(0.9rem, calc(100cqi / 22), 2.025rem),
        calc((100vw - 2.5rem) / 22)
    );
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    -webkit-text-stroke: 1.13px rgb(255 255 255 / 90%);
    paint-order: stroke fill;
}

@media (max-width: 639px) {
    .login-hero__headline {
        justify-content: flex-start;
        min-height: 0;
    }

    .login-hero__title-line--primary {
        font-size: min(
            clamp(1.35rem, calc(100cqi / 20), 9.45rem),
            calc(((100vw - 2.5rem) / 20) * 1.2)
        );
    }

    .login-hero__title-line--sub {
        font-size: min(
            clamp(0.9rem, calc(100cqi / 26), 6.03rem),
            calc(((100vw - 2.5rem) / 26) * 1.2)
        );
    }

    .login-hero__lead {
        font-size: min(
            clamp(0.9rem, calc(100cqi / 22), 2.025rem),
            calc(((100vw - 2.5rem) / 22) * 1.2)
        );
    }
}

.login-hero__roles :where(p, span, a):not(.js-open-login),
.login-hero__roles-badge {
    text-shadow: 0 1px 4px rgb(0 0 0 / 40%);
}

.login-hero__roles [data-lucide] {
    filter: drop-shadow(0 1px 6px rgb(0 0 0 / 42%));
}

.login-hero__boomerang {
    background: #000;
}

.login-hero__video-source {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.65s ease;
}

.login-hero__video-source.is-visible {
    opacity: 1;
}

.login-hero__video-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.65s ease;
}

.login-hero__video-fade.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .login-hero__video-source,
    .login-hero__video-fade {
        transition: none;
    }
}

.login-hero__brand {
    text-decoration: none;
    color: inherit;
}

.login-hero__brand:focus-visible,
.login-hero__nav-pill .js-open-login:focus-visible,
.login-hero__menu-btn:focus-visible,
.login-hero__drawer-link:focus-visible {
    outline: 2px solid #336443;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

.login-hero__nav-label {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.login-hero__nav-label--primary {
    font-weight: 600;
    color: #1f2a1d;
}

.login-hero__nav-label--muted {
    font-weight: 500;
    color: #4b5b47;
}

@media (max-width: 639px) {
    .login-hero__nav-label {
        font-size: 0.6875rem;
        padding: 0.35rem 0.35rem;
    }

    .login-hero__nav-pill .js-open-login {
        font-size: 0.75rem;
    }
}

.login-hero__menu-icon--open {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.login-hero__menu-icon--close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.login-hero--menu-open .login-hero__menu-icon--open {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.login-hero--menu-open .login-hero__menu-icon--close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.login-hero--menu-open .login-hero__menu-overlay {
    opacity: 1;
    pointer-events: auto;
}

.login-hero--menu-open .login-hero__menu-drawer {
    transform: translateX(0);
}

.login-hero--menu-open .login-hero__drawer-link {
    transform: translateX(0);
    opacity: 1;
}

.login-hero--menu-open .login-hero__drawer-link:nth-child(1) {
    transition-delay: 150ms;
}

.login-hero--menu-open .login-hero__drawer-link:nth-child(2) {
    transition-delay: 220ms;
}

.login-hero--menu-open .login-hero__drawer-link:nth-child(3) {
    transition-delay: 290ms;
}

.login-hero--menu-open .login-hero__drawer-link:nth-child(4) {
    transition-delay: 360ms;
}

.login-hero--menu-open .login-hero__drawer-cta {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
    .login-hero__menu-overlay,
    .login-hero__menu-drawer,
    .login-hero__drawer-link,
    .login-hero__drawer-cta,
    .login-hero__menu-icon--open,
    .login-hero__menu-icon--close {
        transition: none !important;
    }

    .login-hero__drawer-link,
    .login-hero__drawer-cta {
        transform: none;
        opacity: 1;
    }
}
/* Login modal — hero green theme */
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(31 42 29 / 52%);
    backdrop-filter: blur(6px);
}

.login-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgb(31 42 29 / 28%);
    border: 1px solid rgb(255 255 255 / 65%);
}

.login-modal__header {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    background: linear-gradient(135deg, #3d5638 0%, #1f2a1d 100%);
    text-align: center;
    color: #fff;
}

.login-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.35rem;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.92);
    background: transparent;
    border: none;
    cursor: pointer;
}

.login-modal__close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.login-modal__logo-wrap {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 0.85rem;
    border-radius: 9999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.login-modal__logo-img {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
}

.login-modal__logo-fallback {
    width: 2rem;
    height: 2rem;
    color: #336443;
}

.login-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.login-modal__subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.login-modal__body {
    padding: 1.5rem 1.5rem 1.75rem;
}

.login-modal__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5b47;
    margin-bottom: 0.35rem;
}

.login-modal__input {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    color: #1f2a1d;
    background: #e8ede9;
    border: 1px solid #cdd8cf;
    border-radius: 0.625rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-modal__input:focus {
    outline: none;
    border-color: #336443;
    box-shadow: 0 0 0 3px rgb(51 100 67 / 18%);
    background: #fff;
}

body.login-modal-open {
    overflow: hidden;
}

.login-modal__password-wrap {
    position: relative;
}

.login-modal__password-input {
    display: block;
    padding-right: 2.75rem;
}

.login-modal__password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--color-hint);
    cursor: pointer;
}

.login-modal__password-toggle:hover {
    background: rgb(51 100 67 / 10%);
    color: #336443;
}

.login-modal__remember {
    color: #6b7a67;
}

.login-modal__remember-input {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: #336443;
}

.login-modal__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #3d5638 0%, #1f2a1d 100%);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 4px 14px rgb(31 42 29 / 24%);
}

.login-modal__submit:hover {
    background: linear-gradient(135deg, #336443 0%, #2a3827 100%);
}

.login-modal__submit:active {
    transform: scale(0.99);
}

.from-brand-600 { --tw-gradient-from: var(--color-brand-600) !important; }
.to-accent-600 { --tw-gradient-to: var(--color-accent-600) !important; }

/* —— Sweet Alert: ยืนยันออกจากระบบ —— */
.sweet-alert-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
}

.sweet-alert-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(6px);
    transition: backdrop-filter 0.35s ease;
}

.sweet-alert-modal.visitstd-motion--active .sweet-alert-modal__backdrop {
    backdrop-filter: blur(8px);
}

.sweet-alert-modal__panel {
    position: relative;
    width: min(100%, 22.5rem);
    padding: 1.75rem 1.5rem 1.35rem;
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, #fff 0%, #eef2ef 100%);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(51, 100, 67, 0.1),
        0 0 40px rgba(51, 100, 67, 0.08);
    transition:
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sweet-alert-modal__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(51, 100, 67, 0.45) 0%,
        rgba(255, 255, 255, 0.15) 35%,
        rgba(31, 42, 29, 0.28) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.35s ease;
}

.sweet-alert-modal__panel::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -75%;
    width: 42%;
    height: 220%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.08) 65%,
        transparent 100%
    );
    transform: rotate(18deg);
    pointer-events: none;
    opacity: 0;
}

.sweet-alert-modal.visitstd-motion--active .sweet-alert-modal__panel::after {
    animation: sweetAlertPanelShine 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.sweet-alert-modal__panel:hover {
    box-shadow:
        0 28px 56px rgba(15, 23, 42, 0.2),
        0 0 0 1px rgba(51, 100, 67, 0.16),
        0 0 52px rgba(51, 100, 67, 0.14);
}

.sweet-alert-modal__panel:hover::before {
    opacity: 1;
}

.sweet-alert-modal__icon-wrap {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sweet-alert-modal__panel:hover .sweet-alert-modal__icon-wrap {
    transform: translateY(-2px) scale(1.03);
}

.sweet-alert-modal__icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(51, 100, 67, 0.22), rgba(31, 42, 29, 0.14));
    animation: sweetAlertPulse 2.4s ease-in-out infinite;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.sweet-alert-modal__panel:hover .sweet-alert-modal__icon-ring {
    transform: scale(1.06);
    opacity: 0.95;
}

.sweet-alert-modal__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(145deg, #eef2ef, #dce6df);
    border: 2px solid rgba(51, 100, 67, 0.24);
    color: var(--color-accent-700);
    box-shadow:
        0 8px 20px rgba(31, 42, 29, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.sweet-alert-modal__icon::after {
    content: '';
    position: absolute;
    inset: -40%;
    background: linear-gradient(
        120deg,
        transparent 38%,
        rgba(255, 255, 255, 0.65) 50%,
        transparent 62%
    );
    transform: translateX(-120%) rotate(0deg);
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.sweet-alert-modal__panel:hover .sweet-alert-modal__icon::after {
    transform: translateX(120%) rotate(0deg);
}

.sweet-alert-modal.visitstd-motion--active .sweet-alert-modal__icon {
    animation: sweetAlertIconPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.sweet-alert-modal__panel:hover .sweet-alert-modal__icon {
    transform: scale(1.04);
    border-color: rgba(51, 100, 67, 0.38);
    box-shadow:
        0 12px 28px rgba(31, 42, 29, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.sweet-alert-modal__icon-svg {
    width: 1.75rem;
    height: 1.75rem;
    position: relative;
    z-index: 1;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sweet-alert-modal__panel:hover .sweet-alert-modal__icon-svg {
    transform: translateX(1px);
}

.sweet-alert-modal__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
    transition: color 0.25s ease;
}

.sweet-alert-modal__panel:hover .sweet-alert-modal__title {
    color: #0f172a;
}

.sweet-alert-modal__message {
    margin: 0 0 1.35rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #64748b;
}

.sweet-alert-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.sweet-alert-modal__btn {
    position: relative;
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background 0.25s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.sweet-alert-modal__btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 72%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 35%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0.12) 65%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.sweet-alert-modal__btn:hover::after {
    left: 145%;
}

.sweet-alert-modal__btn:active {
    transform: scale(0.98) translateY(0);
}

.sweet-alert-modal__btn--cancel {
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    color: #475569;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sweet-alert-modal__btn--cancel:hover {
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    border-color: #cbd5e1;
    color: #334155;
    transform: translateY(-2px);
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sweet-alert-modal__btn--confirm {
    border: none;
    color: #fff;
    background: var(--gradient-primary);
    background-size: 180% 180%;
    background-position: 0% 50%;
    box-shadow:
        0 6px 18px rgba(31, 42, 29, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.sweet-alert-modal__btn--confirm:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px rgba(31, 42, 29, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.sweet-alert-modal__btn--confirm:focus-visible {
    outline: 2px solid rgba(51, 100, 67, 0.55);
    outline-offset: 2px;
}

#sweet-alert-confirm-modal.sweet-alert-modal--raised {
    z-index: 2200;
}

.sweet-alert-modal__icon-wrap--danger .sweet-alert-modal__icon-ring {
    border-color: rgba(220, 38, 38, 0.35);
}

.sweet-alert-modal__icon-wrap--danger .sweet-alert-modal__icon {
    background: linear-gradient(145deg, #fef2f2, #fee2e2);
    border-color: rgba(220, 38, 38, 0.28);
    color: #dc2626;
    box-shadow:
        0 8px 20px rgba(220, 38, 38, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.sweet-alert-modal__panel:hover .sweet-alert-modal__icon-wrap--danger .sweet-alert-modal__icon {
    border-color: rgba(220, 38, 38, 0.42);
    box-shadow:
        0 12px 28px rgba(220, 38, 38, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.sweet-alert-modal__btn--confirm.sweet-alert-modal__btn--danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%);
    box-shadow:
        0 6px 18px rgba(220, 38, 38, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.sweet-alert-modal__btn--confirm.sweet-alert-modal__btn--danger:hover {
    box-shadow:
        0 12px 30px rgba(220, 38, 38, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.sweet-alert-modal__btn--confirm.sweet-alert-modal__btn--danger:focus-visible {
    outline-color: rgba(220, 38, 38, 0.55);
}

body.logout-modal-open,
body.sweet-alert-open {
    overflow: hidden;
}

@keyframes sweetAlertPulse {
    0%, 100% { transform: scale(1); opacity: 0.88; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

@keyframes sweetAlertPanelShine {
    0% {
        left: -75%;
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    100% {
        left: 135%;
        opacity: 0;
    }
}

@keyframes sweetAlertIconPop {
    0% {
        transform: scale(0.82);
        opacity: 0.4;
    }
    70% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 380px) {
    .sweet-alert-modal__actions {
        grid-template-columns: 1fr;
    }
}

/* —— Admin layout —— */
.page-admin {
    background: var(--admin-canvas);
    color: var(--color-text);
    min-height: 100dvh;
    --admin-bottom-nav-height: 3.625rem;
}

.page-admin.text-gray-800 {
    color: var(--color-text) !important;
}

.page-admin.app-shell {
    display: flex;
    flex-direction: column;
    --site-header-height: 3.5rem;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

html:has(body.page-admin) {
    height: 100%;
    overflow: hidden;
}

body.page-admin {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

@media (min-width: 640px) {
    .page-admin.app-shell {
        --site-header-height: 4rem;
    }
}

.admin-app {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.site-header__brand-link {
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
    text-decoration: none;
    color: inherit;
}

.site-header__logo-wrap {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__logo-img {
    width: 100%;
    height: 100%;
}

.site-header__logo-fallback {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 640px) {
    .site-header__logo-wrap {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.site-header__brand-text {
    container-type: inline-size;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    line-height: 1.15;
    overflow: visible;
}

.site-header__title,
.site-header__desc {
    display: block;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
}

.site-header__title {
    font-size: max(0.5625rem, min(1.375rem, calc(100cqi / (var(--header-chars, 18) * 0.78))));
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.site-header__desc {
    font-size: max(0.5rem, min(0.9375rem, calc(100cqi / (var(--header-chars, 28) * 0.88))));
    color: rgb(220 252 231 / 90%);
    line-height: 1.2;
}

@media (min-width: 640px) {
    .site-header__title {
        font-size: max(0.625rem, min(1.5rem, calc(100cqi / (var(--header-chars, 18) * 0.78))));
    }

    .site-header__desc {
        font-size: max(0.5625rem, min(1.0625rem, calc(100cqi / (var(--header-chars, 28) * 0.88))));
    }
}

.site-header__logout {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 9999px;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.site-header__logout:hover {
    background: rgb(255 255 255 / 20%);
}

.site-header__logout [data-lucide] {
    display: block;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .site-header__logout {
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
}

.admin-app > .site-header {
    flex-shrink: 0;
}

.admin-app__workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.admin-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    color: #e8ede9;
}

@media (min-width: 1024px) {
    .admin-app {
        display: grid;
        grid-template-columns: 16.5rem minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
    }

    .admin-app > .site-header {
        grid-column: 1 / -1;
    }

    .admin-app > .admin-sidebar {
        grid-row: 2;
        grid-column: 1;
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: 100%;
        min-height: 0;
        z-index: 40;
        overflow: hidden;
        background:
            radial-gradient(120% 80% at 0% 0%, rgba(251, 146, 60, 0.14) 0%, transparent 55%),
            linear-gradient(180deg, var(--admin-sidebar) 0%, var(--admin-sidebar-deep) 100%);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 4px 0 20px rgba(67, 20, 7, 0.18);
    }

    .admin-app > .admin-app__workspace {
        grid-row: 2;
        grid-column: 2;
        min-height: 0;
        overflow: hidden;
    }

    .admin-sidebar__nav {
        flex: 1;
        padding: 1rem 0.75rem;
        overflow-y: auto;
    }

    .admin-sidebar__label-short {
        display: none;
    }

    .admin-sidebar__nav-label {
        margin: 0 0.5rem 0.5rem;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(255, 237, 213, 0.45);
    }

    .admin-sidebar__link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0.85rem;
        margin-bottom: 0.25rem;
        border-radius: 0.65rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: rgba(255, 247, 237, 0.85);
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

    .admin-sidebar__link:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .admin-sidebar__link--active {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-weight: 700;
    }

    .admin-sidebar__link--active:focus-visible {
        outline-color: #fed7aa;
    }

    .admin-sidebar__footer {
        padding: 1rem 1rem 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .admin-sidebar__user {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .admin-sidebar__avatar {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 9999px;
        background: var(--gradient-primary);
        color: #fff;
        font-weight: 700;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .admin-sidebar__user-name {
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .admin-sidebar__user-role {
        display: block;
        font-size: 0.6875rem;
        color: rgba(255, 237, 213, 0.6);
    }
}

.admin-sidebar__backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(28, 25, 23, 0.45);
    backdrop-filter: blur(2px);
}

.admin-sidebar__backdrop.hidden {
    display: none !important;
}

@media (min-width: 1024px) {
    .admin-sidebar__backdrop {
        display: none !important;
    }
}

/* มือถือ/แท็บเล็ต — bottom navigation */
@media (max-width: 1023px) {
    .admin-app > .admin-bottom-nav {
        position: fixed;
        inset: auto 0 0 0;
        width: 100%;
        height: auto;
        min-height: 0;
        z-index: 50;
        box-shadow: 0 -2px 12px rgba(31, 42, 29, 0.18);
        border-top: 1px solid rgb(255 255 255 / 12%);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(0deg, var(--admin-sidebar-deep) 0%, var(--admin-sidebar) 100%);
    }

    .admin-bottom-nav .admin-sidebar__footer {
        display: none;
    }

    .admin-bottom-nav .admin-sidebar__nav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        gap: 0;
        flex: 0 0 auto;
        padding: 0.25rem 0.125rem 0.125rem;
        overflow: visible;
    }

    .admin-bottom-nav .admin-sidebar__link {
        position: relative;
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0;
        padding: 0.25rem 0.125rem 0.35rem;
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 500;
        gap: 0.2rem;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        white-space: normal;
        line-height: 1.15;
        color: rgba(255, 247, 237, 0.72);
        background: transparent;
        text-decoration: none;
    }

    .admin-bottom-nav .admin-sidebar__link:hover {
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
    }

    .admin-bottom-nav .admin-sidebar__link--active {
        background: transparent;
        color: #fde68a;
        font-weight: 600;
        box-shadow: none;
    }

    .admin-bottom-nav .admin-sidebar__link--active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: #fed7aa;
    }

    .admin-bottom-nav .admin-sidebar__link [data-lucide] {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    .admin-bottom-nav .admin-sidebar__label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-bottom-nav .admin-sidebar__label-full {
        display: none;
    }

    .admin-bottom-nav .admin-sidebar__label-short {
        display: block;
    }

    .admin-shell {
        padding-bottom: calc(var(--admin-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    .admin-sidebar__backdrop {
        display: none !important;
    }
}

.admin-sidebar__link:focus-visible {
    outline: 2px solid #fed7aa;
    outline-offset: 2px;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.75rem;
    padding: 0.75rem 1rem;
    background: var(--admin-surface) !important;
    color: var(--color-text);
    border-bottom: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
}

/* กัน inline ธีม guest ไปทับ header แอดมิน */
.page-admin header.admin-topbar {
    background: var(--admin-surface) !important;
}

@media (min-width: 640px) {
    .admin-topbar {
        padding: 0.75rem 1.5rem;
    }
}

.admin-topbar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.admin-topbar__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-brand-100);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--color-brand-800);
    cursor: pointer;
}

.admin-topbar__menu-btn:hover {
    background: var(--color-brand-50);
}

@media (min-width: 1024px) {
    .admin-topbar__menu-btn {
        display: none;
    }
}

.admin-topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    min-width: 0;
}

.admin-topbar__crumb-muted {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.admin-topbar__crumb-current {
    font-weight: 700;
    color: var(--color-brand-900);
    white-space: nowrap;
}

.admin-topbar__crumb-sep {
    color: var(--color-brand-400);
    flex-shrink: 0;
}

.admin-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.admin-topbar__badge {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--color-brand-50);
    color: var(--color-brand-800);
    border: 1px solid var(--color-brand-200);
}

@media (min-width: 640px) {
    .admin-topbar__badge {
        display: inline-flex;
    }
}

.admin-topbar__user {
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    padding-right: 0.5rem;
    border-right: 1px solid var(--color-brand-100);
    margin-right: 0.25rem;
}

.admin-topbar__user-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-brand-900);
}

.admin-topbar__user-role {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.admin-topbar__logout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-accent-700);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.admin-topbar__logout:hover {
    background: var(--color-accent-800);
}

.admin-main {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scroll-behavior: smooth;
    background: linear-gradient(180deg, var(--admin-canvas) 0%, var(--admin-canvas-end) 100%);
}

.admin-main__inner {
    padding: 1rem;
    max-width: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .admin-main__inner {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}

@media (min-width: 1280px) {
    .admin-main__inner {
        padding: 1.25rem 1.5rem 1.5rem;
    }
}

.admin-footer {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    background: #fff;
    border-top: 1px solid var(--color-brand-100);
    text-align: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.admin-footer::-webkit-scrollbar {
    display: none;
}

.admin-footer__text {
    margin: 0;
    font-size: clamp(0.5rem, 2.4vw + 0.35rem, 0.75rem);
    color: var(--color-text-muted);
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: clip;
}

.admin-footer__ver {
    margin-left: 0.35rem;
    color: var(--admin-ink-soft);
    white-space: nowrap;
}

.admin-footer__line {
    display: inline;
    white-space: nowrap;
}

.admin-page__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-page__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-brand-900);
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .admin-page__title {
        font-size: 1.75rem;
    }
}

.admin-page__lead {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: #57534e;
    max-width: 36rem;
}

.admin-page__meta {
    margin: 0;
    align-self: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#admin-panel-dashboard {
    --dash-caption: 0.6875rem;
    --dash-meta: 0.75rem;
    --dash-label: 0.8125rem;
    --dash-body: 0.875rem;
    --dash-title: 0.9375rem;
    --dash-metric: 1rem;
    --dash-page: 1.125rem;
}

#admin-panel-dashboard .admin-dashboard-head {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

#admin-panel-dashboard .admin-page__intro-main {
    min-width: 0;
}

#admin-panel-dashboard .admin-metrics--dashboard {
    gap: 0.625rem;
    margin-bottom: 0;
}

#admin-panel-dashboard .admin-stat-card {
    padding: 0.65rem 0.75rem;
    gap: 0.625rem;
    border-radius: 0.625rem;
}

#admin-panel-dashboard .admin-stat-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.4375rem;
    border: 1px solid rgb(255 255 255 / 70%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 60%),
        0 1px 2px rgb(67 20 7 / 6%);
}

#admin-panel-dashboard .admin-stat-card__icon [data-lucide] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.25;
}

#admin-panel-dashboard .admin-stat-card__label {
    margin-bottom: 0.125rem;
    font-size: var(--dash-label);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brand-800);
}

#admin-panel-dashboard .admin-stat-card__value {
    font-size: var(--dash-metric);
    font-weight: 700;
    line-height: 1.2;
}

#admin-panel-dashboard .admin-stat-card__value small {
    font-size: var(--dash-meta);
    font-weight: 600;
}

#admin-panel-dashboard .admin-page__intro-badge {
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    font-size: var(--dash-label);
    font-weight: 600;
    gap: 0.35rem;
}

#admin-panel-dashboard .admin-map-head__title,
#admin-panel-dashboard .admin-map-head__stat,
#admin-panel-dashboard .admin-map-head__input,
#admin-panel-dashboard .admin-map-head__select {
    font-size: var(--admin-map-head-text);
    line-height: 1.25;
}

#admin-panel-dashboard .admin-recent-panel .admin-panel__title {
    font-size: var(--dash-body);
}

#admin-panel-dashboard .admin-recent-panel .admin-panel__subtitle {
    font-size: var(--dash-meta);
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    #admin-panel-dashboard .admin-metrics--dashboard {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
    }

    #admin-panel-dashboard .admin-stat-card {
        padding: 0.55rem 0.6rem;
        gap: 0.5rem;
    }

    #admin-panel-dashboard .admin-stat-card__label-full {
        display: none;
    }

    #admin-panel-dashboard .admin-stat-card__label-short {
        display: inline;
    }

    #admin-panel-dashboard .admin-stat-card__value {
        font-size: var(--dash-metric);
    }
}

@media (min-width: 1024px) {
    #admin-panel-dashboard {
        --dash-metric: 1.0625rem;
        --dash-page: 1.1875rem;
    }
}

@media (min-width: 1280px) {
    .admin-metrics {
        gap: 1.25rem;
    }
}

.admin-section {
    margin-bottom: 1.5rem;
}

.admin-section--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 1280px) {
    .admin-section--split {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
        gap: 1.5rem;
        align-items: stretch;
    }
}

/* แดชบอร์ด: workspace แผนที่ซ้าย · รายการเยี่ยมขวา */
@media (min-width: 1024px) {
    .page-admin .admin-shell:has(#admin-panel-dashboard:not(.hidden)) {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
    }

    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)),
    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) .admin-main__inner,
    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) #app-content,
    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) #admin-view {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #admin-panel-dashboard {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    #admin-panel-dashboard .admin-dashboard-head {
        flex-shrink: 0;
        gap: 0.5rem;
    }

    #admin-panel-dashboard .admin-page__intro {
        flex-shrink: 0;
        margin-bottom: 0;
        align-items: flex-end;
    }

    #admin-panel-dashboard .admin-page__lead {
        margin-top: 0.2rem;
        font-size: 0.8125rem;
    }

    #admin-panel-dashboard .admin-metrics--dashboard {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
        margin-bottom: 0;
        overflow: visible;
        position: relative;
        z-index: 20;
    }

    #admin-panel-dashboard .admin-metrics--dashboard:has(.admin-stat-card--has-tip.is-open) {
        z-index: 200;
    }

    #admin-panel-dashboard .admin-stat-card--online .admin-stat-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #admin-panel-dashboard .admin-stat-card--online .admin-stat-card__hint {
        display: block;
    }

    #admin-panel-dashboard .admin-stat-card--online .admin-stat-card__tip {
        left: auto;
        right: 0;
        min-width: min(18rem, 36vw);
    }

    #admin-panel-dashboard .admin-dashboard-workspace {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(20rem, 22vw, 28rem);
        gap: 0.75rem;
        align-items: stretch;
    }

    #admin-panel-dashboard .admin-panel--map,
    #admin-panel-dashboard .admin-recent-panel {
        min-height: 0;
        height: 100%;
        max-height: 100%;
    }

    #admin-panel-dashboard .admin-panel--map {
        display: flex;
        flex-direction: column;
    }

    #admin-panel-dashboard .admin-panel--map .admin-panel__head--map {
        flex-shrink: 0;
        border-bottom: 1px solid var(--admin-border);
    }

    #admin-panel-dashboard .admin-map-head {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        align-items: center;
        gap: 0.625rem;
    }

    #admin-panel-dashboard .admin-map-head__bar {
        grid-column: 1;
    }

    #admin-panel-dashboard .admin-map-head__toolbar {
        grid-column: 2;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem;
        min-width: 0;
    }

    #admin-panel-dashboard .admin-map-head__search {
        flex: 1 1 10rem;
        max-width: 14rem;
    }

    #admin-panel-dashboard .admin-map-head__filters {
        flex: 0 1 auto;
        flex-wrap: nowrap;
    }

    #admin-panel-dashboard .admin-map-head__filter {
        min-width: 0;
    }

    #admin-panel-dashboard .admin-map-head__title-full {
        display: inline;
    }

    #admin-panel-dashboard .admin-map-head__title-short {
        display: none;
    }

    #admin-panel-dashboard .admin-panel--map .admin-panel__body--map {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    #admin-panel-dashboard .admin-panel--map .admin-map,
    #admin-panel-dashboard .admin-panel--map #admin-dashboard-map,
    #admin-panel-dashboard .admin-panel--map #admin-dashboard-map.maplibregl-map {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    #admin-panel-dashboard .admin-recent-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #admin-panel-dashboard .admin-recent-list-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

.text-wrap-balance {
    text-wrap: balance;
}

.admin-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.admin-page__intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-800);
    background: var(--admin-surface);
    border: 1px solid var(--color-brand-200);
    box-shadow: var(--admin-shadow);
}

.admin-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--admin-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--admin-border);
    border-top: 2px solid var(--stat-accent, var(--color-brand-600));
    box-shadow: var(--admin-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-stat-card__label-short {
    display: none;
}

.admin-panel__title-short {
    display: none;
}

.admin-page__intro-badge-text--short {
    display: none;
}

.admin-stat-card:hover {
    box-shadow: var(--admin-shadow-hover);
    border-color: var(--color-brand-200);
}

.admin-stat-card--students { --stat-accent: var(--color-brand-600); }
.admin-stat-card--map { --stat-accent: var(--color-brand-500); }
.admin-stat-card--visit { --stat-accent: #b45309; }
.admin-stat-card--online { --stat-accent: var(--color-accent-600); }

.admin-stat-card__label {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .admin-stat-card {
        transition: none;
    }
}

.admin-stat-card__value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-brand-900);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
    .admin-stat-card__value {
        font-size: 1.625rem;
    }
}

.admin-stat-card__value small {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--admin-ink-soft);
}

.admin-stat-card__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--stat-accent, var(--color-brand-600)) 12%, white);
    color: var(--stat-accent, var(--color-brand-700));
}

.admin-stat-card__icon svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.admin-stat-card__icon--brand,
.admin-stat-card__icon--map,
.admin-stat-card__icon--visit,
.admin-stat-card__icon--online {
    background: color-mix(in srgb, var(--stat-accent, var(--color-brand-600)) 12%, white);
    color: var(--stat-accent, var(--color-brand-700));
}

.admin-stat-card__body {
    flex: 1;
    min-width: 0;
}

.admin-stat-card--has-tip {
    position: relative;
    cursor: pointer;
    outline: none;
}

button.admin-stat-card {
    width: 100%;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

.admin-stat-card__hint {
    margin: 0.15rem 0 0;
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--admin-ink-soft);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .admin-stat-card__hint {
        font-size: 0.625rem;
    }
}

.admin-stat-card--has-tip:focus-visible {
    box-shadow: var(--admin-shadow-hover), 0 0 0 2px var(--color-brand-500);
}

.admin-stat-card--has-tip.is-open {
    z-index: 80;
    border-color: var(--color-brand-300);
    box-shadow: var(--admin-shadow-hover);
}

.admin-stat-card__tip {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 90;
    min-width: min(100%, 16rem);
    padding: 0.55rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid var(--color-brand-200);
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.admin-stat-card--has-tip.is-open .admin-stat-card__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.admin-stat-card__tip-scroll-hint {
    font-weight: 600;
    color: var(--admin-ink-soft);
}

.admin-stat-card__tip-title {
    margin: 0 0 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-brand-700);
    text-transform: none;
}

.admin-stat-card__tip-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 12rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand-400) var(--color-brand-50);
}

.admin-stat-card__tip-list::-webkit-scrollbar {
    width: 6px;
}

.admin-stat-card__tip-list::-webkit-scrollbar-thumb {
    background: var(--color-brand-400);
    border-radius: 9999px;
}

.admin-stat-card__tip-list li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.05rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--color-brand-100);
    font-size: 0.6875rem;
    line-height: 1.3;
}

.admin-stat-card__tip-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.admin-stat-card__tip-name {
    font-weight: 700;
    color: var(--color-brand-900);
}

.admin-stat-card__tip-user {
    color: var(--color-text-muted);
    font-family: ui-monospace, monospace;
    font-size: 0.625rem;
}

.admin-stat-card__tip-role {
    color: var(--color-accent-700);
    font-size: 0.625rem;
}

.admin-stat-card__tip-empty {
    padding: 0.25rem 0;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

@media (prefers-reduced-motion: reduce) {
    .admin-stat-card__tip {
        transition: none;
    }
}

/* แอดมิน — มือถือ: กระชับ โดดเด่น ไม่กินพื้นที่แนวตั้ง */
@media (max-width: 767.98px) {
    .page-admin .admin-main__inner {
        padding: 0.45rem 0.55rem 0.5rem;
    }

    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) .admin-main__inner {
        padding: 0.35rem 0.45rem 0.4rem;
    }

    .page-admin .admin-topbar {
        min-height: 3rem;
        padding: 0.4rem 0.65rem;
        gap: 0.5rem;
    }

    .page-admin .admin-topbar__menu-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .page-admin .admin-topbar__breadcrumb {
        font-size: 0.75rem;
    }

    .page-admin .admin-topbar__crumb-muted {
        display: none;
    }

    .page-admin .admin-topbar__crumb-sep {
        display: none;
    }

    .page-admin .admin-topbar__logout {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }

    #admin-panel-dashboard .admin-dashboard-head {
        gap: 0.25rem;
        margin-bottom: 0.25rem;
        padding: 0.35rem 0.45rem 0.3rem;
        border-radius: 0.625rem;
        border: 1px solid var(--admin-border);
        background: linear-gradient(180deg, #fff 0%, #eef2ef 100%);
        box-shadow: 0 1px 2px rgb(67 20 7 / 5%);
    }

    #admin-panel-dashboard .admin-page__intro {
        align-items: center;
        gap: 0.35rem;
        margin-bottom: 0;
    }

    #admin-panel-dashboard .admin-page__intro-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    #admin-panel-dashboard .admin-page__title {
        font-size: 1rem;
        line-height: 1.2;
    }

    #admin-panel-dashboard .admin-page__lead {
        display: none;
    }

    #admin-panel-dashboard .admin-page__intro-badge {
        display: none;
    }

    #admin-panel-dashboard .admin-metrics--dashboard {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin-bottom: 0;
        overflow: visible;
        border: 1px solid rgb(254 215 170 / 55%);
        border-radius: 0.5rem;
        background: rgb(255 255 255 / 72%);
    }

    #admin-panel-dashboard .admin-stat-card {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.3rem 0.2rem;
        gap: 0.15rem;
        border-radius: 0;
        border: none;
        border-right: 1px solid rgb(254 215 170 / 45%);
        border-top: none;
        box-shadow: none;
        background: transparent;
        min-height: 2.65rem;
    }

    #admin-panel-dashboard .admin-stat-card:last-child {
        border-right: none;
    }

    #admin-panel-dashboard .admin-stat-card__icon {
        width: 1.375rem;
        height: 1.375rem;
        border-radius: 0.3125rem;
        border: none;
        box-shadow: none;
    }

    #admin-panel-dashboard .admin-stat-card__icon [data-lucide] {
        width: 0.75rem;
        height: 0.75rem;
    }

    #admin-panel-dashboard .admin-stat-card__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        min-width: 0;
        width: 100%;
    }

    #admin-panel-dashboard .admin-stat-card__label {
        margin: 0;
        font-size: var(--dash-caption);
        font-weight: 600;
        line-height: 1.2;
        color: var(--color-brand-800);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #admin-panel-dashboard .admin-stat-card__label-full {
        display: none;
    }

    #admin-panel-dashboard .admin-stat-card__label-short {
        display: inline;
    }

    #admin-panel-dashboard .admin-stat-card__value {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 800;
        line-height: 1.15;
        white-space: nowrap;
    }

    #admin-panel-dashboard .admin-stat-card__hint {
        display: none;
    }

    #admin-panel-dashboard .admin-stat-card--online .admin-stat-card__body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #admin-panel-dashboard .admin-stat-card--online .admin-stat-card__hint {
        display: none;
    }

    #admin-panel-dashboard .admin-stat-card--has-tip.is-open .admin-stat-card__tip {
        left: auto;
        right: 0;
        min-width: min(92vw, 15rem);
    }

    #admin-panel-dashboard .admin-stat-card__value small {
        font-size: 0.625rem;
        font-weight: 600;
    }

    #admin-panel-dashboard .admin-section {
        margin-bottom: 0;
    }

    #admin-panel-dashboard .admin-recent-panel .admin-panel__subtitle {
        display: none;
    }

    #admin-panel-dashboard .visitstd-loc-overlay__status:not(.visitstd-loc-overlay__status--error) {
        display: none;
    }

    .page-admin .admin-shell:has(#admin-panel-dashboard:not(.hidden)) {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
    }

    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) .admin-main__inner,
    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) #app-content,
    .page-admin .admin-main:has(#admin-panel-dashboard:not(.hidden)) #admin-view {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    #admin-panel-dashboard {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #admin-panel-dashboard .admin-dashboard-head {
        flex-shrink: 0;
    }

    #admin-panel-dashboard .admin-dashboard-workspace {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #admin-panel-dashboard .admin-section--split {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        gap: 0.35rem;
    }

    #admin-panel-dashboard .admin-panel--map {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #admin-panel-dashboard .admin-panel--map .admin-panel__head--map {
        padding: 0.15rem 0.3rem 0.18rem;
        flex-shrink: 0;
        border-bottom: 1px solid rgb(254 215 170 / 45%);
        background: linear-gradient(180deg, #fff 0%, #eef2ef 100%);
    }

    #admin-panel-dashboard .admin-map-head--dashboard {
        --admin-map-head-text: 0.6875rem;
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, auto);
        gap: 0.125rem;
        align-items: center;
    }

    #admin-panel-dashboard .admin-map-head__bar,
    #admin-panel-dashboard .admin-map-head__toolbar,
    #admin-panel-dashboard .admin-map-head__filters {
        display: contents;
    }

    #admin-panel-dashboard .admin-map-head__lead {
        display: none;
    }

    #admin-panel-dashboard .admin-map-head__search {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    #admin-panel-dashboard .admin-map-head__filter:nth-child(1) {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    #admin-panel-dashboard .admin-map-head__filter:nth-child(2) {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
    }

    #admin-panel-dashboard .admin-map-head__filter:nth-child(3) {
        grid-column: 4;
        grid-row: 1;
        min-width: 0;
    }

    #admin-panel-dashboard .admin-map-head__stat {
        grid-column: 5;
        grid-row: 1;
        justify-self: end;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.05rem 0.28rem;
        max-width: 3.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        gap: 0.125rem;
    }

    #admin-panel-dashboard .admin-map-head__stat::before {
        width: 0.25rem;
        height: 0.25rem;
        flex-shrink: 0;
    }

    #admin-panel-dashboard .admin-map-head__field-icon--search {
        width: 0.625rem;
        height: 0.625rem;
        left: 0.24rem;
    }

    #admin-panel-dashboard .admin-map-head__field-icon--search [data-lucide] {
        width: 0.625rem;
        height: 0.625rem;
    }

    #admin-panel-dashboard .admin-map-head__filter .admin-map-head__field-icon {
        display: none;
    }

    html.app-no-zoom #admin-panel-dashboard .admin-map-head__input,
    html.app-no-zoom #admin-panel-dashboard .admin-map-head__select,
    #admin-panel-dashboard .admin-map-head__input,
    #admin-panel-dashboard .admin-map-head__select {
        font-size: var(--admin-map-head-text) !important;
        font-weight: 600;
        line-height: 1.2;
        min-height: 1.375rem;
        padding-top: 0.08rem;
        padding-bottom: 0.08rem;
        border-radius: 0.3125rem;
        border-color: rgb(254 215 170 / 50%);
        background: #fff;
    }

    #admin-panel-dashboard .admin-map-head__input {
        padding-left: 1.1rem;
        padding-right: 0.28rem;
    }

    #admin-panel-dashboard .admin-map-head__select {
        padding-left: 0.28rem;
        padding-right: 0.95rem;
        background-position: right 0.2rem center;
        background-size: 0.5rem;
        text-overflow: ellipsis;
    }

    #admin-panel-dashboard .admin-panel--map .admin-panel__body--map {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    #admin-panel-dashboard .admin-panel--map .admin-map,
    #admin-panel-dashboard .admin-panel--map #admin-dashboard-map,
    #admin-panel-dashboard .admin-panel--map #admin-dashboard-map.maplibregl-map {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    #admin-panel-dashboard .admin-recent-panel {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #admin-panel-dashboard .admin-recent-panel .admin-panel__body--flush {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #admin-panel-dashboard .admin-recent-panel .admin-panel__head {
        padding: 0.28rem 0.5rem;
        flex-shrink: 0;
    }

    #admin-panel-dashboard .admin-recent-panel .admin-panel__title {
        font-size: 0.8125rem;
    }

    #admin-panel-dashboard .admin-section--split .admin-recent-list-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #admin-panel-dashboard .admin-recent-list__item {
        padding: 0.4rem 0.55rem;
    }

    #admin-panel-dashboard .admin-recent-list__name,
    #admin-panel-dashboard .admin-recent-list__meta {
        font-size: var(--dash-label);
    }

    #admin-panel-dashboard .admin-recent-list__time {
        font-size: var(--dash-meta);
    }

    .page-admin .admin-shell:has(#admin-panel-dashboard:not(.hidden)) .admin-footer {
        display: none;
    }

    .page-admin .admin-shell:has(#admin-panel-dashboard:not(.hidden)) .admin-footer__text {
        font-size: clamp(0.5rem, 2.2vw + 0.32rem, 0.6875rem);
        line-height: 1.2;
        white-space: nowrap;
    }

    .admin-panel-view:not(#admin-panel-dashboard) .admin-page__intro {
        margin-bottom: 0.65rem;
        gap: 0.5rem;
    }

    .admin-panel-view:not(#admin-panel-dashboard) .admin-page__title {
        font-size: clamp(1rem, 0.5rem + 3.5vw, 1.35rem);
    }

    .admin-panel-view:not(#admin-panel-dashboard) .admin-page__lead {
        font-size: clamp(0.6875rem, 0.4rem + 1.5vw, 0.8125rem);
        margin-top: 0.2rem;
        white-space: nowrap;
        overflow-x: auto;
        text-overflow: clip;
        max-width: 100%;
        scrollbar-width: none;
    }

    .admin-panel-view:not(#admin-panel-dashboard) .admin-page__lead::-webkit-scrollbar {
        display: none;
    }

    .admin-list-page .admin-panel__head {
        padding: 0.5rem 0.65rem;
        gap: 0.4rem;
    }

    .admin-list-page .admin-panel__title {
        font-size: 0.8125rem;
    }
}

@media (min-width: 400px) and (max-width: 767.98px) {
    #admin-panel-dashboard .admin-metrics--dashboard {
        gap: 0.4rem;
    }
}

@media (max-width: 399.98px) {
    .page-admin .admin-main__inner {
        padding: 0.45rem 0.55rem 0.65rem;
    }

    #admin-panel-dashboard .admin-page__intro {
        margin-bottom: 0.3rem;
    }

    #admin-panel-dashboard .admin-metrics--dashboard {
        gap: 0.25rem;
        margin-bottom: 0.3rem;
    }

    #admin-panel-dashboard .admin-stat-card {
        padding: 0.3rem 0.35rem;
    }
}

.admin-panel {
    background: var(--admin-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
    overflow: hidden;
}

.admin-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    background: var(--color-brand-50);
    border-bottom: 1px solid var(--admin-border);
}

.admin-panel__head--plain {
    background: var(--admin-surface);
}

.admin-panel__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-brand-900);
}

.admin-panel__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.admin-panel__body {
    padding: 1.25rem;
}

.admin-panel__badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: var(--color-brand-200);
    color: var(--color-brand-900);
}

.admin-panel__body--flush {
    padding: 0;
}

/* หน้ารายการ (นักเรียน / ครู / แอดมิน) — ความกว้างเท่ากันทุกหน้า */
.admin-list-page {
    width: 100%;
    max-width: 100%;
}

.admin-list-page > .admin-panel {
    width: 100%;
}

/* —— List pages: compact head + filters (students, teachers, admins) —— */
#admin-panel-students .admin-list-head,
#admin-panel-teachers .admin-list-head,
#admin-panel-admins .admin-list-head {
    margin-bottom: 0.75rem;
    gap: 0.625rem;
}

#admin-panel-students .admin-list-head__actions,
#admin-panel-teachers .admin-list-head__actions,
#admin-panel-admins .admin-list-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

#admin-panel-students .admin-list-action,
#admin-panel-teachers .admin-list-action,
#admin-panel-admins .admin-list-action {
    white-space: nowrap;
}

#admin-panel-students .admin-list-action__label--short,
#admin-panel-teachers .admin-list-action__label--short,
#admin-panel-admins .admin-list-action__label--short {
    display: none;
}

#admin-panel-students .admin-list-action--primary,
#admin-panel-teachers .admin-list-action--primary,
#admin-panel-admins .admin-list-action--primary {
    flex: 1 1 auto;
}

#admin-panel-students .admin-list-filter-head,
#admin-panel-teachers .admin-list-filter-head,
#admin-panel-admins .admin-list-filter-head {
    padding: 0.5rem 0.625rem;
    background: #fff;
    border-bottom: 1px solid var(--color-brand-100);
    gap: 0;
}

#admin-panel-students .admin-list-filter-head__main,
#admin-panel-teachers .admin-list-filter-head__main,
#admin-panel-admins .admin-list-filter-head__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

#admin-panel-students .admin-list-filter-grid,
#admin-panel-teachers .admin-list-filter-grid,
#admin-panel-admins .admin-list-filter-grid {
    display: grid;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

#admin-panel-students .admin-list-filter-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

#admin-panel-teachers .admin-list-filter-grid--teachers {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
}

#admin-panel-students .admin-filter-chip,
#admin-panel-teachers .admin-filter-chip,
#admin-panel-admins .admin-filter-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--color-brand-100);
    border-radius: 0.5rem;
    background: var(--color-brand-50);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#admin-panel-students .admin-filter-chip:focus-within,
#admin-panel-teachers .admin-filter-chip:focus-within,
#admin-panel-admins .admin-filter-chip:focus-within {
    border-color: var(--color-brand-300);
    background: #fff;
    box-shadow: 0 0 0 2px rgb(255 128 8 / 10%);
}

#admin-panel-students .admin-filter-chip--search,
#admin-panel-teachers .admin-filter-chip--search,
#admin-panel-admins .admin-filter-chip--search {
    grid-column: auto;
}

#admin-panel-students .admin-filter-chip__icon,
#admin-panel-teachers .admin-filter-chip__icon,
#admin-panel-admins .admin-filter-chip__icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--color-brand-600);
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
}

#admin-panel-students .admin-filter-chip__icon svg,
#admin-panel-teachers .admin-filter-chip__icon svg,
#admin-panel-admins .admin-filter-chip__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

#admin-panel-students .admin-filter-chip__input,
#admin-panel-students .admin-filter-chip__select,
#admin-panel-teachers .admin-filter-chip__input,
#admin-panel-teachers .admin-filter-chip__select,
#admin-panel-admins .admin-filter-chip__input,
#admin-panel-admins .admin-filter-chip__select {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-900);
    line-height: 1.25;
    white-space: nowrap;
}

#admin-panel-students .admin-filter-chip__input::placeholder,
#admin-panel-teachers .admin-filter-chip__input::placeholder,
#admin-panel-admins .admin-filter-chip__input::placeholder {
    color: #78716c;
    font-weight: 500;
}

#admin-panel-students .admin-filter-chip__input:focus,
#admin-panel-students .admin-filter-chip__select:focus,
#admin-panel-teachers .admin-filter-chip__input:focus,
#admin-panel-teachers .admin-filter-chip__select:focus,
#admin-panel-admins .admin-filter-chip__input:focus,
#admin-panel-admins .admin-filter-chip__select:focus {
    outline: none;
    box-shadow: none;
}

#admin-panel-students .admin-filter-chip__select,
#admin-panel-teachers .admin-filter-chip__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 0.75rem;
    padding-right: 0.9rem;
}

#admin-panel-students .admin-list-filter-count,
#admin-panel-teachers .admin-list-filter-count,
#admin-panel-admins .admin-list-filter-count {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.28rem 0.55rem;
    border-radius: 9999px;
    background: var(--color-brand-100);
    color: var(--color-brand-900);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
    #admin-panel-students .admin-list-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #admin-panel-teachers .admin-list-filter-grid--teachers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #admin-panel-students .admin-filter-chip--search,
    #admin-panel-teachers .admin-filter-chip--search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    #admin-panel-students .admin-list-head,
    #admin-panel-teachers .admin-list-head,
    #admin-panel-admins .admin-list-head {
        margin-bottom: 0.5rem;
        gap: 0.45rem;
    }

    #admin-panel-students .admin-list-head__lead,
    #admin-panel-teachers .admin-list-head__lead,
    #admin-panel-admins .admin-list-head__lead {
        display: none;
    }

    #admin-panel-students .admin-list-head__actions,
    #admin-panel-teachers .admin-list-head__actions,
    #admin-panel-admins .admin-list-head__actions {
        width: 100%;
    }

    #admin-panel-students .admin-list-action,
    #admin-panel-teachers .admin-list-action,
    #admin-panel-admins .admin-list-action {
        padding: 0.38rem 0.5rem;
        font-size: clamp(0.625rem, 2.2vw + 0.38rem, 0.75rem);
    }

    #admin-panel-students .admin-list-action__label,
    #admin-panel-teachers .admin-list-action__label,
    #admin-panel-admins .admin-list-action__label {
        display: none;
    }

    #admin-panel-students .admin-list-action__label--short,
    #admin-panel-teachers .admin-list-action__label--short,
    #admin-panel-admins .admin-list-action__label--short {
        display: inline;
    }

    #admin-panel-students .admin-list-action--primary span:not(.admin-list-action__label),
    #admin-panel-teachers .admin-list-action--primary .admin-list-action__label--short,
    #admin-panel-admins .admin-list-action--primary .admin-list-action__label--short {
        display: inline;
    }

    #admin-panel-students .admin-list-action--primary .admin-list-action__label:not(.admin-list-action__label--short),
    #admin-panel-teachers .admin-list-action--primary .admin-list-action__label:not(.admin-list-action__label--short),
    #admin-panel-admins .admin-list-action--primary .admin-list-action__label:not(.admin-list-action__label--short) {
        display: none;
    }

    #admin-panel-students .admin-list-action--primary,
    #admin-panel-teachers .admin-list-action--primary,
    #admin-panel-admins .admin-list-action--primary {
        flex: 1 1 0;
        justify-content: center;
    }

    #admin-panel-students .admin-list-filter-head,
    #admin-panel-teachers .admin-list-filter-head,
    #admin-panel-admins .admin-list-filter-head {
        padding: 0.4rem 0.5rem;
    }

    #admin-panel-students .admin-list-filter-head__main,
    #admin-panel-teachers .admin-list-filter-head__main,
    #admin-panel-admins .admin-list-filter-head__main {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    #admin-panel-students .admin-list-filter-count,
    #admin-panel-teachers .admin-list-filter-count,
    #admin-panel-admins .admin-list-filter-count {
        align-self: flex-end;
        font-size: clamp(0.625rem, 2vw + 0.35rem, 0.6875rem);
    }

    #admin-panel-students .admin-list-filter-grid,
    #admin-panel-teachers .admin-list-filter-grid--teachers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }

    #admin-panel-students .admin-filter-chip,
    #admin-panel-teachers .admin-filter-chip,
    #admin-panel-admins .admin-filter-chip {
        padding: 0.28rem 0.4rem;
        border-radius: 0.4375rem;
    }

    #admin-panel-students .admin-filter-chip__icon,
    #admin-panel-teachers .admin-filter-chip__icon,
    #admin-panel-admins .admin-filter-chip__icon {
        width: 0.75rem;
        height: 0.75rem;
    }

    #admin-panel-students .admin-filter-chip__input,
    #admin-panel-students .admin-filter-chip__select,
    #admin-panel-teachers .admin-filter-chip__input,
    #admin-panel-teachers .admin-filter-chip__select {
        font-size: clamp(0.625rem, 2.1vw + 0.38rem, 0.75rem);
    }

    #admin-panel-students .admin-filter-chip--search,
    #admin-panel-teachers .admin-filter-chip--search {
        grid-column: 1 / -1;
    }

    #admin-panel-students .admin-list-filter-grid .admin-filter-chip:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 399.98px) {
    #admin-panel-students .admin-list-filter-grid,
    #admin-panel-teachers .admin-list-filter-grid--teachers {
        grid-template-columns: 1fr 1fr;
    }
}

/* —— Admin accounts: card grid —— */
#admin-panel-admins .admin-list-filter-grid--admins {
    grid-template-columns: minmax(0, 1fr);
}

#admin-panel-admins .admin-account-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 0.625rem;
    padding: 0.625rem 0.75rem 0.75rem;
}

#admin-panel-admins .admin-account-cards__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--admin-ink-soft);
    font-size: 0.875rem;
}

#admin-panel-admins .admin-account-card {
    border: 1px solid var(--color-brand-100);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 90%) inset,
        0 1px 3px rgb(67 20 7 / 6%),
        0 3px 10px rgb(67 20 7 / 4%);
    transition:
        border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

#admin-panel-admins .admin-account-card--super {
    border-color: var(--color-brand-200);
    background: linear-gradient(180deg, var(--color-brand-50) 0%, #fff 42%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    #admin-panel-admins .admin-account-card:hover {
        border-color: var(--color-brand-300);
        box-shadow:
            0 1px 0 rgb(255 255 255 / 95%) inset,
            0 4px 14px rgb(67 20 7 / 10%),
            0 8px 22px rgb(67 20 7 / 6%);
        transform: translateY(-2px);
    }
}

#admin-panel-admins .admin-account-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--color-brand-100);
    background: #fff;
}

#admin-panel-admins .admin-account-card--super .admin-account-card__head {
    background: transparent;
}

#admin-panel-admins .admin-account-card__username {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--color-brand-800);
    white-space: nowrap;
}

#admin-panel-admins .admin-account-card__username-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
}

#admin-panel-admins .admin-account-card__username-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

#admin-panel-admins .admin-account-card__username span:last-child {
    overflow-x: auto;
    scrollbar-width: none;
}

#admin-panel-admins .admin-account-card__username span:last-child::-webkit-scrollbar {
    display: none;
}

#admin-panel-admins .admin-account-card__tier {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    border: 1px solid var(--color-brand-100);
    background: var(--color-brand-50);
    font-size: clamp(0.5625rem, 2vw + 0.35rem, 0.6875rem);
    font-weight: 700;
    color: var(--color-brand-900);
    white-space: nowrap;
}

#admin-panel-admins .admin-account-card--super .admin-account-card__tier {
    border-color: var(--color-brand-200);
    background: #fff;
    color: var(--color-brand-800);
}

#admin-panel-admins .admin-account-card__tier-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#admin-panel-admins .admin-account-card__tier-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

#admin-panel-admins .admin-account-card__name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.5rem 0.7rem 0.35rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-900);
    line-height: 1.3;
}

#admin-panel-admins .admin-account-card__name-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--color-brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

#admin-panel-admins .admin-account-card__name-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

#admin-panel-admins .admin-account-card__name span:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

#admin-panel-admins .admin-account-card__name span:last-child::-webkit-scrollbar {
    display: none;
}

#admin-panel-admins .admin-account-card__stats {
    padding: 0 0.7rem 0.45rem;
}

#admin-panel-admins .admin-account-card-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0;
}

#admin-panel-admins .admin-account-card-stat + .admin-account-card-stat {
    border-top: 1px solid #f5f5f4;
}

#admin-panel-admins .admin-account-card-stat__label {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 0;
    font-size: clamp(0.625rem, 2vw + 0.35rem, 0.75rem);
    font-weight: 600;
    color: #57534e;
    white-space: nowrap;
}

#admin-panel-admins .admin-account-card-stat__icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-brand-600);
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#admin-panel-admins .admin-account-card-stat__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

#admin-panel-admins .admin-account-card-stat__value {
    min-width: 0;
    font-size: clamp(0.625rem, 2vw + 0.35rem, 0.75rem);
    font-weight: 600;
    color: var(--color-brand-900);
    text-align: right;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

#admin-panel-admins .admin-account-card-stat__value::-webkit-scrollbar {
    display: none;
}

#admin-panel-admins .admin-account-card-stat__value--time {
    font-variant-numeric: tabular-nums;
    color: #57534e;
}

#admin-panel-admins .admin-account-card__foot {
    padding: 0.45rem 0.7rem 0.55rem;
    border-top: 1px solid var(--color-brand-100);
    background: #fff;
}

#admin-panel-admins .admin-account-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

#admin-panel-admins .admin-account-card__locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #78716c;
    white-space: nowrap;
}

#admin-panel-admins .admin-account-card__locked-icon {
    width: 0.75rem;
    height: 0.75rem;
}

@media (max-width: 767px) {
    #admin-panel-admins .admin-account-cards {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.5rem 0.625rem 0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #admin-panel-admins .admin-account-card {
        transition: none;
    }
}

.admin-list-page__content {
    width: 100%;
    max-width: none;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table-wrap--layout {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table--layout {
    table-layout: fixed;
    width: 100%;
    min-width: 100%;
}

.admin-table--layout thead th,
.admin-table--layout tbody td,
.admin-table--layout tfoot th,
.admin-table--layout tfoot td {
    padding: 0.3rem 0.45rem;
    line-height: 1.25;
    font-size: 0.75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .admin-list-page .admin-toolbar {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .admin-list-page .admin-input--search {
        min-width: 0;
        flex: 1 1 100%;
    }
}

.admin-table--layout thead th {
    padding: 0.4rem 0.45rem;
    font-size: 0.6875rem;
}

.admin-table--layout .admin-badge {
    display: inline-flex;
    flex-shrink: 0;
    max-width: none;
    padding: 0.1rem 0.4rem;
    font-size: clamp(0.5rem, 0.35rem + 0.55vw, 0.625rem);
    line-height: 1.2;
    white-space: nowrap;
}

.admin-table--layout .admin-table__cell--center,
.admin-table--layout .admin-table__cell--badge {
    overflow: visible;
    text-overflow: clip;
}

.admin-table--layout .admin-table__actions .admin-link {
    font-size: 0.625rem;
}

.admin-table--layout .admin-table__th-center {
    text-align: center;
}

.admin-table--layout .admin-table__th-actions {
    text-align: right;
    width: 7.5rem;
}

.admin-table--layout .admin-table__cell--center {
    text-align: center;
}

.admin-table--layout .admin-table__cell--actions {
    text-align: right;
    overflow: visible;
    white-space: nowrap;
}

.admin-table__actions {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
}

.admin-table__cell--dash {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.admin-table--layout .admin-table__cell--actions .admin-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.admin-table--layout .admin-table__cell--actions .admin-icon-btn__svg {
    width: 0.9rem;
    height: 0.9rem;
}

.admin-table--students col.admin-col-id { width: 7%; }
.admin-table--students col.admin-col-user { width: 7%; }
.admin-table--students col.admin-col-name { width: 27%; }
.admin-table--students col.admin-col-class { width: 7%; }
.admin-table--students col.admin-col-coords { width: 5.5%; }
.admin-table--students col.admin-col-record { width: 5.5rem; }
.admin-table--students col.admin-col-photos { width: 14%; }
.admin-table--students col.admin-col-status { width: 5.75rem; }
.admin-table--students col.admin-col-actions { width: 7.5rem; }

.admin-table--layout tbody tr.admin-table__row--visited {
    background: #f0fdf4 !important;
}

.admin-table--layout tbody tr.admin-table__row--visited:hover {
    background: #dcfce7 !important;
}

.admin-table--layout tbody tr.admin-table__row--visited td {
    border-bottom-color: #bbf7d0;
}

.admin-table--layout tbody tr.admin-table__row--visited .admin-table__cell--name {
    color: #14532d;
}

.admin-table__cell--photos {
    text-align: center;
    overflow: visible;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.admin-visit-thumbs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex-wrap: nowrap;
    max-width: 100%;
}

.admin-visit-thumb {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.25rem;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    line-height: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.admin-visit-thumb:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.admin-visit-thumb:focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 1px;
}

.admin-visit-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* แอดมิน — รายการแบบการ์ดบนมือถือ (≤767px) */
.admin-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem 0.55rem;
}

.admin-mobile-empty {
    margin: 0.5rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.admin-mobile-card {
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.45rem 0.5rem 0.4rem;
    box-shadow: 0 1px 2px rgb(67 20 7 / 4%);
}

.admin-mobile-card--visited {
    background: #f0fdf4;
    border-color: #86efac;
}

.admin-mobile-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    min-width: 0;
}

.admin-mobile-card__title {
    font-weight: 700;
    font-size: clamp(0.6875rem, 3.4vw, 0.8125rem);
    color: var(--color-brand-900);
    white-space: nowrap;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: none;
}

.admin-mobile-card__title::-webkit-scrollbar {
    display: none;
}

.admin-mobile-card__class {
    flex: 0 0 auto;
    font-size: clamp(0.5625rem, 2.6vw, 0.6875rem);
    font-weight: 700;
    color: var(--color-brand-800);
    background: var(--color-brand-100);
    border-radius: 9999px;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

.admin-mobile-card__strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
}

.admin-mobile-card__strip::-webkit-scrollbar {
    display: none;
}

.admin-mobile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(0.5625rem, 2.5vw, 0.6875rem);
    font-weight: 600;
    line-height: 1.2;
    padding: 0.15rem 0.35rem;
    border-radius: 9999px;
    border: 1px solid var(--color-brand-100);
    background: var(--color-brand-50);
    color: var(--color-brand-900);
    text-decoration: none;
}

.admin-mobile-chip--ok {
    background: #ecfdf5;
    border-color: #86efac;
    color: #14532d;
}

.admin-mobile-chip--wait {
    background: #e8ede9;
    border-color: #fdba74;
    color: #9a3412;
}

.admin-mobile-chip--muted {
    background: #fafaf9;
    border-color: #e7e5e4;
    color: #78716c;
}

.admin-mobile-chip--id {
    background: #e8ede9;
    border-color: var(--color-brand-200);
    color: var(--color-brand-900);
}

.admin-mobile-chip--nav {
    background: #fff;
    border-color: #bbf7d0;
}

.admin-mobile-chip--nav:hover {
    background: #f0fdf4;
}

.admin-mobile-chip--photos {
    gap: 0.15rem;
    padding-right: 0.2rem;
}

.admin-mobile-chip__icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-mobile-chip__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.admin-mobile-chip__map-img {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    object-fit: contain;
}

.admin-mobile-chip__text {
    white-space: nowrap;
}

.admin-mobile-thumb {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.2rem;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    cursor: pointer;
}

.admin-mobile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-mobile-card__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--color-brand-50);
}

.admin-mobile-card--visited .admin-mobile-card__actions {
    border-top-color: #bbf7d0;
}

.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.4rem;
    background: #fff;
    color: var(--color-brand-800);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-icon-btn:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-300);
}

.admin-icon-btn--danger {
    color: var(--color-accent-700);
    border-color: #fecaca;
}

.admin-icon-btn--danger:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.admin-icon-btn__svg {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 768px) {
    .admin-mobile-list {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-icon-btn,
    .admin-coords-nav,
    .admin-visit-thumb {
        transition: none;
    }
}

.admin-table--teachers col.admin-col-user { width: 11%; }
.admin-table--teachers col.admin-col-name { width: 24%; }
.admin-table--teachers col.admin-col-class { width: 12%; }
.admin-table--teachers col.admin-col-detail { width: 24%; }
.admin-table--teachers col.admin-col-date { width: 14%; }
.admin-table--teachers col.admin-col-actions { width: 5.5rem; }

.admin-table--admins col.admin-col-user { width: 12%; }
.admin-table--admins col.admin-col-name { width: 24%; }
.admin-table--admins col.admin-col-tier { width: 14%; }
.admin-table--admins col.admin-col-detail { width: 24%; }
.admin-table--admins col.admin-col-date { width: 12%; }
.admin-table--admins col.admin-col-actions { width: 5.5rem; }

.admin-table--layout .admin-table__cell--name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: clip;
}

.admin-table--layout .admin-table__cell--name,
.admin-table--layout .admin-table__cell--mono,
.admin-table--layout .admin-table__cell--id {
    font-size: clamp(0.625rem, 0.4rem + 0.45vw, 0.8125rem);
}

.admin-table--layout .admin-table__cell--coords {
    text-align: center;
    overflow: visible;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.admin-coords-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: 0.35rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-coords-nav:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.admin-coords-nav:focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 2px;
}

.admin-coords-nav__icon {
    width: 1.65rem;
    height: 1.65rem;
    object-fit: contain;
    display: block;
}

@media (min-width: 640px) {
    .admin-table--layout tbody td {
        font-size: 0.8125rem;
    }

    .admin-table--layout thead th {
        font-size: 0.75rem;
    }
}

@media (max-width: 1023px) {
    .admin-table--students col.admin-col-user {
        width: 0;
    }

    .admin-table--students col.admin-col-id { width: 9%; }
    .admin-table--students col.admin-col-name { width: 24%; }
    .admin-table--students col.admin-col-class { width: 8%; }
    .admin-table--students col.admin-col-coords { width: 14%; }
    .admin-table--students col.admin-col-photos { width: 16%; }
    .admin-table--students col.admin-col-record { width: 5.25rem; }
    .admin-table--students col.admin-col-status { width: 5.5rem; }
    .admin-table--students col.admin-col-actions { width: 7.5rem; }

    .admin-table--layout .admin-badge {
        font-size: clamp(0.46875rem, 0.3rem + 0.5vw, 0.5625rem);
        padding: 0.08rem 0.3rem;
    }
}

@media (max-width: 899px) {
    .admin-table--layout thead th,
    .admin-table--layout tbody td {
        font-size: clamp(0.625rem, 0.45rem + 0.35vw, 0.75rem);
    }

    .admin-table--layout .admin-badge {
        font-size: clamp(0.4375rem, 0.28rem + 0.45vw, 0.53125rem);
    }
}

.admin-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
    border-top: 1px solid var(--color-brand-100);
    background: #fff;
}

.admin-table-pagination__info {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.admin-table-pagination__actions {
    display: inline-flex;
    gap: 0.4rem;
}

.admin-table thead {
    background: var(--color-brand-50);
}

.admin-table thead th {
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--color-brand-900);
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--color-brand-50);
    vertical-align: middle;
    color: var(--color-text);
}

.admin-table tbody tr:hover {
    background: var(--color-brand-50) !important;
}

body.admin-sidebar-open {
    overflow: hidden;
}

.admin-panel-view.hidden {
    display: none !important;
}

/* หน้านักเรียน — จอใหญ่: แผนที่ซ้าย ฟอร์มขวา พอดีหน้าจอ */
.student-split-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.student-split-layout__form {
    min-width: 0;
}

.student-split-layout__map {
    min-width: 0;
}

@media (max-width: 1023.98px) {
    .student-split-layout__map > .bg-white {
        display: flex;
        flex-direction: column;
    }

    .student-split-layout__map .student-class-map-panel {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        min-height: 280px;
        height: min(52dvh, 400px);
    }

    .student-split-layout__map #student-class-map-container,
    .student-split-layout__map #student-class-map-container.maplibregl-map {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100%;
        min-height: min(52dvh, 400px);
    }

    .student-class-map-panel .maplibregl-map {
        width: 100%;
        height: 100%;
        min-height: inherit;
    }
}

@media (min-width: 1024px) {
    .student-split-layout {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 0.875rem;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .student-split-layout__map {
        position: static;
        top: auto;
        align-self: stretch;
        height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .student-split-layout__map > .bg-white {
        flex: 1;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .student-split-layout__map .student-class-map-panel {
        flex: 1;
        min-height: 0;
        position: relative;
    }

    .student-split-layout__map #student-class-map-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
}

.admin-map {
    display: block;
    position: relative;
    height: 22rem;
    min-height: 280px;
    width: 100%;
    background: #e8ece8;
}

.visitstd-map-attrib {
    position: absolute;
    right: 0.35rem;
    bottom: 0.25rem;
    z-index: 4;
    max-width: min(72%, 14rem);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: rgb(0 0 0 / 42%);
    color: rgb(255 255 255 / 92%);
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
    pointer-events: auto;
}

.visitstd-map-attrib a {
    color: rgb(255 255 255 / 96%);
    text-decoration: underline;
    text-underline-offset: 1px;
}

.visitstd-map-attrib a:hover {
    color: #fff;
}

@media (max-width: 767.98px) {
    .visitstd-map-attrib {
        font-size: 0.5rem;
        max-width: min(78%, 11rem);
        opacity: 0.85;
    }
}

#admin-dashboard-map.maplibregl-map {
    height: 22rem;
    min-height: 280px;
}

/* แดชบอร์ด: แผนที่ขยายเต็มความสูงการ์ด (เท่าคอลัมน์รายชื่อขวา) */
.admin-section--split .admin-panel--map {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.admin-section--split .admin-panel--map .admin-panel__body--map {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-section--split .admin-panel--map .admin-map,
.admin-section--split .admin-panel--map #admin-dashboard-map,
.admin-section--split .admin-panel--map #admin-dashboard-map.maplibregl-map {
    flex: 1 1 auto;
    height: 100%;
    min-height: 280px;
}

@media (max-width: 767.98px) {
    #admin-panel-dashboard .admin-panel--map .admin-map,
    #admin-panel-dashboard .admin-panel--map #admin-dashboard-map,
    #admin-panel-dashboard .admin-panel--map #admin-dashboard-map.maplibregl-map {
        min-height: 0;
    }
}

.admin-section--split .admin-recent-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.admin-section--split .admin-recent-panel .admin-panel__body--flush {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.admin-section--split .admin-recent-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1279.98px) {
    .admin-section--split .admin-recent-list-wrap {
        flex: none;
        max-height: min(22rem, 55vh);
    }

    #admin-panel-dashboard .admin-section--split .admin-recent-list-wrap {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
}

@media (min-width: 1280px) {
    #admin-panel-dashboard .admin-dashboard-workspace {
        grid-template-columns: minmax(0, 1fr) clamp(22rem, 20vw, 30rem);
        gap: 1rem;
    }
}

#student-class-map-container {
    width: 100%;
    background: #e8ece8;
    min-height: 280px;
    height: 360px;
}

.map-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-brand-900);
    background: var(--color-brand-50);
}

.map-unavailable__hint {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 28rem;
    line-height: 1.5;
}

.map-unavailable code {
    font-size: 0.75rem;
    background: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-brand-200);
}

.visitstd-map-popup {
    font-family: var(--font-app);
    color: var(--color-text);
    max-width: 16rem;
    border-radius: 1rem;
}

.visitstd-map-popup .inline-block.rounded-full {
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
}

.visitstd-map-popup .text-muted {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.gm-style,
.gm-style-iw,
.gm-style-iw-d {
    font-family: var(--font-app) !important;
}

@media (min-width: 1280px) {
    .admin-map {
        height: 26rem;
    }

    .admin-section--split .admin-panel--map .admin-map,
    .admin-section--split .admin-panel--map #admin-dashboard-map.maplibregl-map {
        height: 100%;
    }
}

.admin-recent-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.admin-recent-panel .admin-panel__body--flush {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-recent-list-wrap {
    flex: 1;
    min-height: 0;
    max-height: 22rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-brand-400) var(--color-brand-50);
}

.admin-recent-list-wrap::-webkit-scrollbar {
    width: 8px;
}

.admin-recent-list-wrap::-webkit-scrollbar-track {
    background: var(--color-brand-50);
}

.admin-recent-list-wrap::-webkit-scrollbar-thumb {
    background: var(--color-brand-400);
    border-radius: 999px;
}

.admin-recent-list-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand-500);
}

.admin-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-recent-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--color-brand-50);
    transition: background-color 0.15s ease;
}

.admin-recent-list__item:hover {
    background: var(--color-brand-50);
}

@media (prefers-reduced-motion: reduce) {
    .admin-recent-list__item {
        transition: none;
    }
}

.admin-recent-list__media {
    position: relative;
    flex-shrink: 0;
}

.admin-recent-list__media--empty {
    width: 3.25rem;
}

.admin-recent-list__thumb {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--color-brand-50);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-recent-list__thumb:hover {
    border-color: var(--color-brand-400);
    box-shadow: 0 2px 8px rgb(124 45 18 / 12%);
}

.admin-recent-list__thumb:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

.admin-recent-list__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-recent-list__media-count {
    position: absolute;
    right: -0.2rem;
    bottom: -0.2rem;
    min-width: 1.125rem;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--color-brand-700);
    border: 1.5px solid var(--admin-surface);
}

.admin-recent-list__content {
    min-width: 0;
}

.admin-recent-list__more {
    margin-top: 0.35rem;
    gap: 0.3rem;
}

.admin-recent-list__mini-thumb {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.3rem;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-brand-50);
}

.admin-recent-list__mini-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-visited-panel__head {
    flex-shrink: 0;
    padding: 0.65rem 0.85rem;
    background: var(--color-brand-50);
    border-bottom: 1px solid var(--admin-border);
}

.admin-visited-panel__head-text {
    min-width: 0;
}

.admin-visited-panel .admin-panel__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-brand-900);
}

.admin-visited-panel .admin-panel__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.admin-recent-list__item:last-child {
    border-bottom: none;
}

.admin-recent-list__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.admin-recent-list__name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-brand-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-recent-list__time {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-brand-700);
    white-space: nowrap;
    text-align: right;
}

.admin-recent-list__meta {
    margin: 0.12rem 0 0;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-recent-list__visitor {
    margin: 0.28rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--color-brand-800);
}

.admin-recent-list__visitor-label {
    font-weight: 600;
    color: var(--color-brand-700);
}

.admin-recent-list__photos {
    margin-top: 0.45rem;
}

.admin-recent-list__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #a8a29e;
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

/* —— หัวแผนที่แดชบอร์ดแอดมิน —— */
.admin-panel__head--map {
    padding: 0.45rem 0.6rem 0.5rem;
    background: var(--admin-surface);
}

.admin-map-head {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    --admin-map-head-text: 0.8125rem;
}

.admin-map-head__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.admin-map-head__lead {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
}

.admin-map-head__glyph {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.4375rem;
    background: linear-gradient(165deg, #e8ede9 0%, #dce6df 100%);
    border: 1px solid rgb(254 215 170 / 70%);
    color: var(--color-brand-700);
    box-shadow: 0 1px 2px rgb(67 20 7 / 8%);
}

.admin-map-head__titles {
    min-width: 0;
}

.admin-map-head__title {
    margin: 0;
    font-size: var(--admin-map-head-text);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-brand-900);
    letter-spacing: -0.01em;
}

.admin-map-head__title-short {
    display: none;
}

.admin-map-head__stat {
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    font-size: var(--admin-map-head-text);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-brand-800);
    background: var(--color-brand-50);
    border: 1px solid rgb(254 215 170 / 55%);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-map-head__stat::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--color-brand-500);
    box-shadow: 0 0 0 2px rgb(249 115 22 / 22%);
}

.admin-map-head__stat[data-state='empty'] {
    color: #78716c;
    background: #f5f5f4;
    border-color: #e7e5e4;
}

.admin-map-head__stat[data-state='empty']::before {
    background: #a8a29e;
    box-shadow: none;
}

.admin-map-head__stat[data-state='filter'] {
    color: #1e40af;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.admin-map-head__stat[data-state='filter']::before {
    background: #3b82f6;
    box-shadow: 0 0 0 2px rgb(59 130 246 / 18%);
}

.admin-map-head__toolbar,
.admin-map-head__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.admin-map-head__search {
    position: relative;
    flex: 1 1 11rem;
    min-width: 0;
    display: block;
}

.admin-map-head__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-map-head__filter {
    position: relative;
    display: block;
    flex: 1 1 6.5rem;
    min-width: 5.5rem;
}

.admin-map-head__field-icon {
    position: absolute;
    left: 0.42rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    color: var(--color-brand-700);
    background: rgb(255 247 237 / 92%);
    pointer-events: none;
    line-height: 0;
    z-index: 1;
}

.admin-map-head__field-icon--search {
    color: var(--color-brand-600);
    background: rgb(255 237 213 / 88%);
}

.admin-map-head__field-icon--visit {
    color: #b45309;
    background: rgb(254 243 199 / 88%);
}

.admin-map-head__field-icon--level {
    color: #0369a1;
    background: rgb(224 242 254 / 88%);
}

.admin-map-head__field-icon--class {
    color: #7c3aed;
    background: rgb(237 233 254 / 88%);
}

.admin-map-head__input,
.admin-map-head__select {
    width: 100%;
    min-height: 2rem;
    padding: 0.3rem 0.5rem 0.3rem 1.95rem;
    border: 1px solid var(--input-border);
    border-radius: 0.4375rem;
    font-size: var(--admin-map-head-text);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    background: var(--input-surface);
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.admin-map-head__select {
    padding-right: 1.65rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    background-size: 0.7rem;
    cursor: pointer;
}

.admin-map-head__input:focus,
.admin-map-head__select:focus {
    outline: none;
    border-color: var(--color-brand-400);
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(51, 100, 67, 0.12);
}

.admin-toolbar--dashboard {
    flex: 0 0 auto;
    min-width: auto;
    justify-content: flex-end;
}

.admin-toolbar--dashboard .admin-input--search {
    min-width: 13rem;
    flex: 0 1 16rem;
}

.admin-input {
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--input-surface);
    color: var(--color-text);
}

.admin-input:focus {
    outline: none;
    border-color: var(--color-brand-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51, 100, 67, 0.12);
}

.admin-input--search {
    min-width: 12rem;
    flex: 1;
}

.admin-input--select {
    min-width: 8rem;
}

.admin-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.admin-hint {
    font-size: 0.75rem;
    color: #57534e;
    margin-top: 0.25rem;
}

.admin-hint--block {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.admin-hint--inline {
    margin-top: 0;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.admin-btn--primary {
    background: var(--gradient-primary);
    color: #fff;
}

.admin-btn--primary:hover {
    background: var(--gradient-primary-hover);
}

.admin-btn--danger {
    background: var(--color-accent-700);
    color: #fff;
}

.admin-btn--danger:hover {
    background: var(--color-accent-800);
}

.admin-btn--danger-outline {
    color: var(--color-accent-800);
    background: #fff;
    border: 1px solid var(--color-accent-200);
}

.admin-btn--danger-outline:hover {
    background: var(--color-accent-50);
    border-color: var(--color-accent-400);
}

.admin-btn--ghost {
    background: var(--admin-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-brand-200);
}

.admin-btn--ghost:hover {
    background: var(--color-brand-50);
    color: var(--color-brand-900);
    border-color: var(--color-brand-300);
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-badge--ok {
    background: var(--color-brand-50);
    color: var(--color-brand-800);
    border: 1px solid var(--color-brand-200);
}

.admin-badge--wait {
    background: #fef2f2;
    color: var(--color-accent-700);
    border: 1px solid #fecaca;
}

.admin-badge--muted {
    background: var(--color-brand-50);
    color: var(--admin-ink-soft);
    border: 1px solid var(--color-brand-100);
}

.admin-badge--photos {
    cursor: pointer;
    border: none;
    background: #e8ede9;
    color: #9a3412;
    font: inherit;
    max-width: 100%;
    white-space: nowrap;
}

.admin-badge--photos:hover {
    background: #dce6df;
}

.admin-student-detail__coords {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(124, 45, 18, 0.08);
}

.admin-badge--class {
    background: var(--color-brand-50);
    color: var(--color-brand-800);
}

.admin-badge--transferred {
    background: #e8ede9;
    color: #9a3412;
    border: 1px solid #fdba74;
}

.admin-badge--left {
    background: #f5f5f4;
    color: #57534e;
    border: 1px solid #d6d3d1;
}

.admin-link {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand-700);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}

.admin-link--danger {
    color: var(--color-accent-600);
}

.admin-panel__foot {
    background: var(--color-brand-50);
    border-top: 1px solid var(--admin-border);
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#admin-bulk-modal.admin-modal--bulk {
    z-index: 420;
}

#admin-confirm-modal.admin-modal--raised {
    z-index: 500;
}

.admin-modal.hidden {
    display: none;
}

.admin-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0.5);
    backdrop-filter: blur(3px);
}

.admin-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    max-height: 90dvh;
    overflow: auto;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-brand-100);
}

.admin-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-brand-100);
}

.admin-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-brand-900);
}

.admin-modal__close {
    padding: 0.35rem;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    color: #78716c;
}

.admin-modal__body {
    padding: 1.25rem;
}

.admin-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-brand-100);
}

.admin-modal__panel--wide {
    max-width: 40rem;
}

.admin-bulk-preview {
    padding: 0.75rem 1rem;
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 0.5rem;
}

.admin-bulk-preview__errors {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.75rem;
    color: var(--color-accent-700);
}

/* ชั้นมืดทั้งจอ — ต่ำกว่า modal นำเข้า (420) ที่แสดง progress */
.admin-bulk-overlay {
    position: fixed;
    inset: 0;
    z-index: 380;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.admin-bulk-overlay__hint {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e8ede9;
    background: rgba(67, 20, 7, 0.85);
    border-radius: 0.5rem;
}

.admin-bulk-overlay.hidden {
    display: none;
}

body.admin-bulk-running {
    overflow: hidden;
}

.admin-bulk-progress-panel {
    text-align: center;
    padding: 0.5rem 0 1rem;
}

.admin-bulk-progress-panel__title {
    margin: 0 0 0.35rem;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-brand-900);
}

.admin-bulk-progress-panel__detail {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #57534e;
}

.admin-bulk-progress-panel__percent {
    margin: 0.65rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-brand-700);
}

.admin-bulk-progress-panel__hint {
    margin: 1rem 0 0;
}

.admin-bulk-modal--importing .admin-modal__close,
.admin-bulk-modal--importing [data-bulk-close] {
    pointer-events: none;
    opacity: 0.35;
}

.admin-bulk-overlay__spinner {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1rem;
    border: 3px solid var(--color-brand-100);
    border-top-color: var(--color-brand-600);
    border-radius: 50%;
    animation: admin-bulk-spin 0.8s linear infinite;
}

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

.admin-bulk-overlay__status {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--color-brand-900);
    font-size: 0.9375rem;
}

.admin-bulk-overlay__detail {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: #78716c;
}

.admin-bulk-progress {
    height: 0.5rem;
    background: #e7e5e4;
    border-radius: 9999px;
    overflow: hidden;
}

.admin-bulk-progress__bar {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 9999px;
    transition: width 0.2s ease;
}

.admin-bulk-overlay__percent {
    margin: 0.5rem 0 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-brand-700);
}

.admin-map-pin-count {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand-800);
}

/* —— หัวแผนที่ (นักเรียน / ครู) —— */
.map-panel-head {
    padding: 0.5rem 0.65rem 0.55rem;
    border-bottom: 1px solid var(--color-brand-100);
    background: var(--color-white);
}

.map-panel-head--search-only {
    padding: 0.35rem 0.55rem;
}

.map-panel-head__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}

.map-panel-head__lead {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
}

.map-panel-head__glyph {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: var(--color-brand-100);
    color: var(--color-brand-700);
}

.map-panel-head__title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.35rem;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
}

.map-panel-head__room {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.38rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand-800);
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
}

.map-panel-head__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin: 0;
    flex-shrink: 0;
    max-width: min(11rem, 46%);
    padding: 0.18rem 0.42rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
}

.map-panel-head__stat-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-panel-head__stat-icon {
    flex-shrink: 0;
}

.map-panel-head__stat[data-state='loading'] {
    color: #57534e;
    background: #f5f5f4;
}

.map-panel-head__stat[data-state='empty'] {
    color: #78716c;
    background: #f5f5f4;
}

.map-panel-head__stat[data-state='ready'] {
    color: var(--color-brand-800);
    background: var(--color-brand-50);
}

.map-panel-head__stat[data-state='filter'] {
    color: #1e40af;
    background: #eff6ff;
}

.map-panel-head__stat[data-state='error'] {
    color: var(--color-accent-700);
    background: #fef2f2;
}

.map-panel-head__tools {
    margin-top: 0.38rem;
}

.teacher-map-head-tools {
    margin-bottom: 0.28rem;
}

.teacher-map-overlay-picker {
    position: relative;
}

.teacher-map-overlay-picker__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.teacher-map-overlay-picker__selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    flex: 1 1 auto;
}

.teacher-map-overlay-picker__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.teacher-map-pin-count {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-left: auto;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-brand-100);
    background: var(--color-brand-50);
    color: var(--color-brand-800);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.teacher-map-pin-count__text {
    font-variant-numeric: tabular-nums;
}

.teacher-map-overlay-picker__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid #fecaca;
    border-radius: 0.45rem;
    background: #fff;
    color: var(--color-accent-700);
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.teacher-map-overlay-picker__clear:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.teacher-map-overlay-picker__summary {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--color-brand-800);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.teacher-map-overlay-picker--open .teacher-map-overlay-picker__summary,
.teacher-map-overlay-picker[data-open='1'] .teacher-map-overlay-picker__summary {
    border-color: var(--color-brand-400);
    background: var(--color-brand-50);
}

.teacher-map-overlay-picker__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: min(18rem, 92vw);
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.55rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
}

.teacher-map-overlay-picker--open .teacher-map-overlay-picker__panel {
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0s;
}

.teacher-map-overlay-picker--visible .teacher-map-overlay-picker__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.teacher-map-overlay-picker--closing .teacher-map-overlay-picker__panel {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .teacher-map-overlay-picker__panel {
        transition: none !important;
        transform: none !important;
    }
}

.teacher-map-overlay-picker__hint {
    margin: 0 0 0.45rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #6b7280;
}

.teacher-map-overlay-picker__options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 10rem;
    overflow-y: auto;
}

.teacher-map-overlay-picker__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.2rem;
    font-size: 0.8125rem;
    color: #1f2937;
    cursor: pointer;
}

.teacher-map-overlay-picker__empty {
    margin: 0;
    font-size: 0.75rem;
    color: #9ca3af;
}

.visitstd-map-label-room {
    font-size: 0.92em;
    font-weight: 700;
    color: inherit;
    opacity: 0.92;
}

.teacher-visit-readonly-notice {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.75rem;
    line-height: 1.45;
}

.teacher-visit-modal--readonly .teacher-visit-photos,
.teacher-visit-modal--readonly .teacher-visit-modal__status-row,
.teacher-visit-modal--readonly #teacher-visit-pin-row,
.teacher-visit-modal--readonly #teacher-visit-coords-section {
    display: none !important;
}

@media (max-width: 359.98px) {
    .map-panel-head__bar {
        flex-wrap: wrap;
    }

    .map-panel-head__stat {
        max-width: 100%;
    }
}

.visitstd-map-search {
    position: relative;
    display: block;
}

.visitstd-map-search__icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-brand-600);
    pointer-events: none;
    line-height: 0;
}

.visitstd-map-search__input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text);
    background: #fff;
    box-shadow: 0 1px 3px rgb(67 20 7 / 6%);
}

.visitstd-map-search--compact .visitstd-map-search__icon {
    left: 0.5rem;
    color: #a8a29e;
}

.visitstd-map-search--compact .visitstd-map-search__input {
    padding: 0.28rem 0.55rem 0.28rem 1.85rem;
    border-color: #e7e5e4;
    border-radius: 0.4375rem;
    font-size: 0.75rem;
    line-height: 1.25;
    background: #fafaf9;
    box-shadow: none;
}

.visitstd-map-search__input:focus {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 0;
    border-color: var(--color-brand-400);
}

.visitstd-map-search--compact .visitstd-map-search__input:focus {
    background: #fff;
    outline: none;
    border-color: var(--color-brand-300);
    box-shadow: 0 0 0 2px rgb(234 88 12 / 14%);
}

.visitstd-map-search__hint {
    margin: 0.35rem 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand-700);
}

.visitstd-map-search__hint.hidden {
    display: none;
}

.visitstd-map-search--overlay {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    left: auto;
    z-index: 1000;
    width: min(17rem, calc(100% - 1.25rem));
    max-width: 100%;
}

.visitstd-map-search__hint--overlay {
    position: absolute;
    top: 3.15rem;
    right: 0.65rem;
    left: auto;
    z-index: 1000;
    max-width: min(17rem, calc(100% - 1.25rem));
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 1px 3px rgb(67 20 7 / 8%);
}

@media (max-width: 639.98px) {
    .visitstd-map-search--overlay {
        left: 0.65rem;
        right: 0.65rem;
        width: auto;
    }

    .visitstd-map-search__hint--overlay {
        left: 0.65rem;
        right: 0.65rem;
        max-width: none;
    }
}

.admin-table__coords,
.admin-table__muted {
    color: #57534e;
}

.admin-table__cell--date {
    white-space: nowrap;
}

.admin-datetime-th {
    font-variant-numeric: tabular-nums;
}

.admin-table-empty {
    padding: 2.5rem 1.5rem !important;
    text-align: center;
    background: var(--color-brand-50);
}

.admin-table-empty__text {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #44403c;
}

.admin-table-empty__btn {
    margin: 0 auto;
}

.admin-toast-host {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    width: min(24rem, calc(100vw - 2rem));
}

.admin-toast {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 12px 32px rgba(67, 20, 7, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.admin-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.admin-toast--success {
    background: var(--color-brand-900);
    color: #e8ede9;
}

.admin-toast--error {
    background: var(--color-accent-800);
    color: #fff;
}

.admin-toast--info {
    background: #fff;
    color: var(--color-brand-900);
    border: 1px solid var(--color-brand-200);
}

@media (prefers-reduced-motion: reduce) {
    .admin-toast {
        transition: opacity 0.1s ease;
        transform: none;
    }

    .admin-toast--visible {
        transform: none;
    }
}

.admin-confirm__message {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #44403c;
}

.admin-modal__panel--confirm {
    max-width: 22rem;
}

.admin-settings-msg--ok {
    color: var(--color-brand-800);
    font-weight: 600;
}

.admin-settings-msg--error {
    color: var(--color-accent-800);
    font-weight: 600;
}

.admin-btn--secondary {
    background: #fff;
    color: var(--color-brand-900);
    border: 1px solid var(--color-brand-200);
    box-shadow: 0 1px 2px rgb(67 20 7 / 6%);
}

.admin-btn--secondary:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-300);
}

.admin-btn--sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    gap: 0.35rem;
}

.admin-settings-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-settings-stack.space-y-6 {
    gap: 1.5rem;
}

.admin-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    margin-bottom: 1rem;
    border-radius: 0.875rem;
    background: #fff;
    border: 1px solid var(--color-brand-100);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-settings-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-600);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.admin-settings-tabs__btn:hover {
    color: var(--color-brand-800);
    background: var(--color-brand-50);
}

.admin-settings-tabs__btn--active {
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-600));
    box-shadow: 0 2px 8px rgba(31, 42, 29, 0.28);
}

.admin-settings-tabs__btn--active:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-600));
}

.admin-settings-panels {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-settings-panel.hidden {
    display: none;
}

@media (max-width: 639px) {
    .admin-settings-tabs {
        flex-direction: column;
    }

    .admin-settings-tabs__btn {
        justify-content: center;
        width: 100%;
    }
}

.admin-maintenance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.teacher-class-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-brand-900);
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    white-space: nowrap;
    flex-shrink: 0;
}

/* —— แถบเครื่องมือครู —— */
.teacher-toolbar {
    display: grid;
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    background: var(--color-white);
    border-radius: 0.625rem;
    border: 1px solid var(--color-brand-100);
    box-shadow: 0 1px 3px rgb(67 20 7 / 6%);
}

.teacher-toolbar__identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: visible;
}

.teacher-toolbar__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border-radius: 0.375rem;
    background: var(--color-brand-100);
}

.teacher-toolbar__meta {
    min-width: 0;
    flex: 1;
    overflow: visible;
    container-type: inline-size;
    width: 100%;
}

.teacher-toolbar__title {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0;
    font-size: max(0.5625rem, min(1rem, calc(100cqi / (var(--teacher-title-chars, 24) * 0.9))));
    font-weight: 700;
    line-height: 1.25;
    color: #1f2937;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
}

.teacher-toolbar__title-prefix {
    flex-shrink: 0;
    color: #374151;
}

.teacher-toolbar__title-name {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
}

.teacher-toolbar__class-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.1rem 0 0;
    font-size: clamp(0.5625rem, 0.2rem + 2vw, 0.6875rem);
    white-space: nowrap;
    overflow: visible;
}

.teacher-toolbar__class-label {
    color: #6b7280;
    flex-shrink: 0;
}

.teacher-toolbar__class-label--short {
    display: none;
}

.teacher-toolbar__alert {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent-700);
}

.teacher-toolbar__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.teacher-metrics {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
    border-radius: 0.5rem;
    border: 1px solid var(--color-brand-100);
    background: var(--color-brand-50);
    overflow: hidden;
}

.teacher-metric {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    white-space: nowrap;
}

.teacher-metric + .teacher-metric {
    border-left: 1px solid var(--color-brand-100);
}

.teacher-metric__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.35rem;
    background: rgb(255 255 255 / 0.85);
    color: var(--color-brand-800);
}

.teacher-metric__icon--pin {
    color: var(--color-brand-700);
}

.teacher-metric__icon--done {
    color: #15803d;
}

.teacher-metric__icon--wait {
    color: #b45309;
}

.teacher-metric__text {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    min-width: 0;
}

.teacher-metric__value {
    font-size: 0.8125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--color-brand-900);
}

.teacher-metric__label {
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-brand-800);
    opacity: 0.82;
}

.teacher-seg {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0.2rem;
    gap: 0.15rem;
    border-radius: 9999px;
    border: none;
    background: var(--color-brand-100);
    box-shadow: inset 0 1px 2px rgb(67 20 7 / 8%);
}

.teacher-view-switch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 0.2rem;
    margin-left: 0.35rem;
    padding-left: 0.55rem;
    border-left: 2px solid var(--color-brand-200);
}

.teacher-seg__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.42rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-brand-800);
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.12s ease,
        border-color 0.2s ease;
}

.teacher-seg__btn [data-lucide] {
    flex-shrink: 0;
}

.teacher-seg__btn:hover:not(.teacher-seg__btn--active) {
    color: var(--color-brand-900);
    background: rgb(255 255 255 / 0.72);
    border-color: rgb(255 255 255 / 0.9);
}

.teacher-seg__btn:active {
    transform: scale(0.97);
}

.teacher-seg__btn:focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 2px;
}

.teacher-seg__btn--active,
.teacher-mode-btn--active,
.view-mode-btn.bg-white {
    color: #fff !important;
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(31, 42, 29, 0.32);
}

.teacher-seg__btn--active:hover,
.teacher-mode-btn--active:hover {
    background: var(--gradient-primary-hover) !important;
}

.teacher-map-panel.teacher-panel--animate,
.teacher-list-panel.teacher-panel--animate {
    animation: teacherPanelIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .teacher-seg__btn {
        transition: none;
    }

    .teacher-map-panel.teacher-panel--animate,
    .teacher-list-panel.teacher-panel--animate {
        animation: none;
    }
}

@media (max-width: 1023.98px) {
    .teacher-toolbar {
        gap: 0.35rem;
        padding: 0.45rem 0.5rem;
    }

    .teacher-toolbar__rail {
        flex-direction: column;
        width: 100%;
    }

    .teacher-metrics {
        width: 100%;
    }

    .teacher-metric {
        padding: 0.28rem 0.32rem;
        gap: 0.22rem;
    }

    .teacher-metric__value {
        font-size: clamp(0.75rem, 0.4rem + 1.2vw, 0.875rem);
    }

    .teacher-metric__label {
        font-size: clamp(0.5625rem, 0.3rem + 0.9vw, 0.6875rem);
    }

    .teacher-seg {
        width: 100%;
    }

    .teacher-view-switch {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: 0.4rem;
        margin-top: 0.1rem;
        border-top: 2px solid var(--color-brand-200);
    }

    .teacher-seg__btn {
        flex: 1;
        padding: 0.45rem 0.5rem;
        font-size: clamp(0.6875rem, 0.4rem + 1vw, 0.8125rem);
    }

    .teacher-toolbar__class-label--long {
        display: none;
    }

    .teacher-toolbar__class-label--short {
        display: inline;
    }

    .teacher-map-head-tools {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .teacher-map-overlay-picker__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
    }

    .teacher-map-overlay-picker__summary {
        flex: 1 1 100%;
        justify-content: center;
    }

    .teacher-map-pin-count {
        margin-left: 0;
    }

    .map-panel-head--search-only .visitstd-map-search--compact {
        width: 100%;
    }

    #teacher-view .teacher-map-panel {
        min-height: min(56dvh, 28rem);
    }
}

@media (min-width: 1024px) {
    .teacher-toolbar__class-label--short {
        display: none;
    }

    .teacher-toolbar__class-label--long {
        display: inline;
    }
}

@media (min-width: 1024px) {
    .teacher-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'identity rail';
        align-items: center;
        gap: 0.5rem 0.75rem;
        padding: 0.5rem 0.65rem;
    }

    .teacher-toolbar__identity {
        grid-area: identity;
    }

    .teacher-toolbar__rail {
        grid-area: rail;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .teacher-toolbar__title {
        font-size: max(0.625rem, min(1.0625rem, calc(100cqi / (var(--teacher-title-chars, 24) * 0.9))));
    }

    .teacher-metrics {
        flex: 0 1 auto;
    }

    .teacher-metric {
        flex: 0 0 auto;
        padding: 0.32rem 0.5rem;
    }

    .teacher-metric__value {
        font-size: 0.875rem;
    }

    .teacher-metric__label {
        font-size: 0.6875rem;
    }
}

@media (min-width: 1200px) {
    .teacher-toolbar__title {
        font-size: max(0.6875rem, min(1.125rem, calc(100cqi / (var(--teacher-title-chars, 24) * 0.9))));
    }
}

.admin-branding-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .admin-branding-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.admin-branding-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
}

.admin-dropzone {
    position: relative;
    border: 2px dashed var(--color-brand-200);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #f8faf8 0%, #e8ede9 100%);
    min-height: 10.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.admin-dropzone--favicon {
    min-height: 9rem;
}

.admin-dropzone:hover,
.admin-dropzone:focus-visible,
.admin-dropzone--active {
    border-color: var(--color-brand-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgb(234 88 12 / 12%);
    outline: none;
}

.admin-dropzone__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    min-height: 8rem;
    color: var(--color-brand-800);
}

.admin-dropzone__icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-brand-500);
}

.admin-dropzone__title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.admin-dropzone__hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
}

.admin-dropzone__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.admin-dropzone__img {
    max-width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 4px 14px rgb(67 20 7 / 10%);
}

.admin-dropzone__img--logo {
    max-height: 5.5rem;
}

.admin-dropzone__img--favicon {
    width: 4rem;
    height: 4rem;
}

.admin-dropzone__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.admin-modal__close:focus-visible,
.admin-btn:focus-visible,
.admin-link:focus-visible,
.admin-sidebar__link:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

/* —— หมุดนักเรียนบนแผนที่ (หมุดหยด + ชื่อ) —— */
.student-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    text-align: center;
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 28%));
}

.visitstd-pin-svg {
    display: block;
    flex-shrink: 0;
}

.student-marker__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(2px * var(--visitstd-marker-scale, 1));
    width: max-content;
    padding: calc(2px * var(--visitstd-marker-scale, 1)) calc(6px * var(--visitstd-marker-scale, 1));
    font-size: clamp(
        6px,
        calc(7.5px * var(--visitstd-marker-scale, 1)),
        10px
    );
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-brand-900);
    background: linear-gradient(180deg, #fff 0%, var(--color-brand-50) 100%);
    border: 1px solid var(--color-brand-200);
    border-radius: 9999px;
    box-shadow:
        0 1px 2px rgb(67 20 7 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 88%);
    white-space: nowrap;
}

.student-marker__label--pending {
    color: #ed3a22;
    border-color: #fecaca;
    background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
    box-shadow:
        0 1px 2px rgb(237 58 34 / 14%),
        inset 0 1px 0 rgb(255 255 255 / 88%);
}

.student-marker__label--visited {
    color: #15803d;
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
    box-shadow:
        0 1px 2px rgb(21 128 61 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 88%);
}

.student-marker__label--overlay {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #fff 0%, #eff6ff 100%);
    box-shadow:
        0 1px 2px rgb(29 78 216 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 88%);
}

.student-marker__label--pending .visitstd-map-label-room,
.student-marker__label--visited .visitstd-map-label-room,
.student-marker__label--overlay .visitstd-map-label-room {
    color: inherit;
    opacity: 0.92;
}

.visitstd-map-dom-label {
    pointer-events: none;
}

.visitstd-map-dom-label--tap {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.visitstd-map-dom-label--tap::before {
    content: '';
    position: absolute;
    inset: -10px -8px;
}

.visitstd-map-dom-label--tap:active.student-marker__label--pending {
    background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%);
    border-color: #fca5a5;
}

.visitstd-map-dom-label--tap:active.student-marker__label--visited {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.visitstd-map-dom-label--tap:active.student-marker__label--overlay {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.visitstd-map-dom-label--tap:active {
    background: linear-gradient(180deg, var(--color-brand-50) 0%, #dce6df 100%);
    border-color: var(--color-brand-300);
    box-shadow:
        0 1px 2px rgb(67 20 7 / 14%),
        inset 0 1px 0 rgb(255 255 255 / 72%);
}

.maplibregl-marker:has(.visitstd-map-dom-label) {
    z-index: 20 !important;
    pointer-events: none;
}

.maplibregl-marker:has(.visitstd-map-dom-label--tap) {
    pointer-events: auto;
}

@media (pointer: coarse) {
    .student-marker__label,
    .visitstd-map-dom-label--tap {
        font-size: clamp(
            6.5px,
            calc(7px * var(--visitstd-marker-scale, 1)),
            9.5px
        );
    }
}

.visitstd-map-cluster {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: calc(1.85rem * var(--visitstd-marker-scale, 1));
    height: calc(1.85rem * var(--visitstd-marker-scale, 1));
    padding: 0 calc(0.42rem * var(--visitstd-marker-scale, 1));
    border: calc(2px * var(--visitstd-marker-scale, 1)) solid #fff;
    border-radius: 999px;
    background: linear-gradient(165deg, #fff 0%, #dce6df 52%, #fdba74 100%);
    box-shadow:
        0 1px 2px rgb(67 20 7 / 16%),
        0 4px 12px rgb(0 0 0 / 28%),
        inset 0 1px 0 rgb(255 255 255 / 92%);
    color: #9a3412;
    cursor: pointer;
    font: inherit;
    font-size: calc(0.6875rem * var(--visitstd-marker-scale, 1));
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.visitstd-map-cluster:hover {
    transform: scale(1.06);
    box-shadow:
        0 2px 4px rgb(67 20 7 / 18%),
        0 6px 16px rgb(0 0 0 / 32%),
        inset 0 1px 0 rgb(255 255 255 / 96%);
}

.visitstd-map-cluster:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

.visitstd-map-cluster--md {
    min-width: calc(2.05rem * var(--visitstd-marker-scale, 1));
    height: calc(2.05rem * var(--visitstd-marker-scale, 1));
    font-size: calc(0.75rem * var(--visitstd-marker-scale, 1));
}

.visitstd-map-cluster--lg {
    min-width: calc(2.3rem * var(--visitstd-marker-scale, 1));
    height: calc(2.3rem * var(--visitstd-marker-scale, 1));
    font-size: calc(0.8125rem * var(--visitstd-marker-scale, 1));
}

.visitstd-map-cluster--xl {
    min-width: calc(2.55rem * var(--visitstd-marker-scale, 1));
    height: calc(2.55rem * var(--visitstd-marker-scale, 1));
    font-size: calc(0.875rem * var(--visitstd-marker-scale, 1));
}

.maplibregl-marker:has(.visitstd-map-cluster) {
    z-index: 12 !important;
}

/* —— Modal เยี่ยมบ้าน (ครู) —— */
body.teacher-visit-modal-open {
    overflow: hidden;
}

.teacher-visit-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.teacher-visit-modal.hidden {
    display: none;
}

.teacher-visit-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(67 20 7 / 45%);
}

.teacher-visit-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    max-height: min(92vh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 48px rgb(67 20 7 / 22%);
    border: 1px solid var(--color-brand-100);
}

.teacher-visit-modal__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-brand-100);
    background: linear-gradient(180deg, var(--color-brand-50), #fff);
}

.teacher-visit-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-brand-900);
}

.teacher-visit-modal__subtitle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.teacher-visit-modal__close {
    flex-shrink: 0;
    padding: 0.35rem;
    border-radius: 0.5rem;
    color: var(--color-brand-800);
}

.teacher-visit-modal__close:hover {
    background: var(--color-brand-100);
}

.teacher-visit-modal__body {
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
}

.teacher-visit-coords {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid var(--color-brand-200);
    background: var(--color-brand-50);
}

.teacher-visit-coords.hidden {
    display: none;
}

.teacher-visit-coords__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.teacher-visit-coords__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-900);
}

.teacher-visit-coords__badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--color-accent-700);
    border: 1px solid var(--color-brand-200);
}

.teacher-visit-coords__badge--ok {
    color: var(--color-brand-800);
    background: #ecfdf5;
    border-color: #86efac;
}

.teacher-visit-coords__hint {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    line-height: 1.45;
}

.teacher-visit-coords__field {
    display: block;
    margin-bottom: 0.5rem;
}

.teacher-visit-coords__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-brand-300);
    background: #fff;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--color-brand-900);
}

.teacher-visit-coords__input:focus {
    outline: 2px solid rgba(51, 100, 67, 0.35);
    outline-offset: 1px;
    border-color: var(--color-brand-500);
}

.teacher-visit-coords__input.input-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}

.teacher-visit-coords__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-brand-700);
    cursor: pointer;
}

.teacher-visit-coords__btn:hover {
    background: var(--color-brand-800);
}

.teacher-visit-coords__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.teacher-visit-coords__msg {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.teacher-visit-coords__msg--error {
    color: var(--color-accent-600);
}

.teacher-visit-coords__msg--ok {
    color: var(--color-brand-700);
}

.teacher-visit-coords__msg.hidden {
    display: none;
}

.teacher-visit-pin-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid var(--color-brand-200);
    background: var(--color-brand-50);
    cursor: pointer;
    user-select: none;
}

.teacher-visit-pin-row.hidden {
    display: none;
}

.teacher-visit-pin-row__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.teacher-visit-pin-row__box {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 2px solid var(--color-brand-400);
    background: #fff;
    flex-shrink: 0;
    position: relative;
}

.teacher-visit-pin-row__input:checked + .teacher-visit-pin-row__box {
    background: var(--color-brand-600);
    border-color: var(--color-brand-700);
}

.teacher-visit-pin-row__input:checked + .teacher-visit-pin-row__box::after {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 0.02rem;
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.teacher-visit-pin-row__text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-brand-900);
}

.teacher-visit-pin-row__icon--off {
    display: none;
}

.teacher-visit-pin-row__input:not(:checked) ~ .teacher-visit-pin-row__text .teacher-visit-pin-row__icon--on {
    display: none;
}

.teacher-visit-pin-row__input:not(:checked) ~ .teacher-visit-pin-row__text .teacher-visit-pin-row__icon--off {
    display: inline-flex;
}

.teacher-pin-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-brand-200);
    background: #fff;
    color: var(--color-brand-700);
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.teacher-pin-toggle:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-400);
}

.teacher-pin-toggle--off {
    color: var(--color-text-muted);
    border-color: var(--color-brand-100);
    background: var(--color-brand-50);
}

.teacher-roster-card__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.teacher-visit-modal__contact {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.teacher-visit-modal__status-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.teacher-visit-status-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
}

.teacher-visit-status-badge--wait {
    background: var(--color-accent-600);
}

.teacher-visit-status-badge--ok {
    background: #16a34a;
}

.teacher-visit-toggle-btn {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: center;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-brand-600);
    transition: background 0.15s;
}

.teacher-visit-toggle-btn:hover {
    background: var(--color-brand-700);
}

.teacher-visit-toggle-btn--undo {
    background: var(--color-text-muted);
}

.teacher-visit-toggle-btn--undo:hover {
    background: #44403c;
}

.teacher-visit-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.teacher-visit-photo-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--color-brand-100);
    background: var(--color-brand-50);
}

.teacher-visit-photo-card__view {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    cursor: zoom-in;
}

.teacher-visit-photo-card__view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-visit-photo-card__del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(220 38 38 / 90%);
    color: #fff;
    border: none;
    cursor: pointer;
}

.teacher-visit-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem;
    border: 2px dashed var(--color-brand-300);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-800);
    cursor: pointer;
    background: var(--color-brand-50);
}

.teacher-visit-upload-label:hover {
    border-color: var(--color-brand-500);
    background: #fff;
}

.teacher-visit-upload-label.hidden {
    display: none;
}

.teacher-visit-upload-label.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.teacher-visit-photo-progress {
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
}

.teacher-visit-photo-progress.hidden {
    display: none;
}

.teacher-visit-photo-progress__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.teacher-visit-photo-progress__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-900);
}

.teacher-visit-photo-progress__pct {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand-700);
    font-variant-numeric: tabular-nums;
}

.teacher-visit-photo-progress__track {
    height: 0.45rem;
    border-radius: 9999px;
    background: rgb(255 255 255 / 80%);
    overflow: hidden;
}

.teacher-visit-photo-progress__bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-brand-600), var(--color-brand-500));
    transition: width 0.12s ease-out;
}

.visitstd-nav-link,
.teacher-visit-maps-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1rem;
    padding: 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: #16a34a;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.visitstd-nav-link:hover,
.teacher-visit-maps-link:hover {
    background: #15803d;
    color: #fff;
}

.visitstd-map-popup .visitstd-nav-link {
    margin-top: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    border-radius: 9999px;
}

.visitstd-map-popup__photos {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--color-brand-100);
    border-radius: 0.75rem;
}

.visitstd-map-popup__photos-label {
    margin-bottom: 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-brand-800);
}

.visitstd-map-popup__photo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.visitstd-map-popup__photo {
    display: block;
    padding: 0;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    line-height: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.visitstd-map-popup__photo:hover {
    border-color: var(--color-brand-400);
    box-shadow: 0 2px 6px rgb(67 20 7 / 12%);
}

.visitstd-map-popup__photo img {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
}

.visitstd-phone-link {
    color: var(--color-brand-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}

.visitstd-phone-link:hover {
    color: var(--color-accent-700);
}

.visitstd-phone-link--inline {
    font-size: inherit;
    font-weight: inherit;
}

.teacher-visit-maps-link.hidden {
    display: none;
}

.teacher-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.teacher-photo-lightbox.hidden {
    display: none;
}

.teacher-photo-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 85%);
}

.teacher-photo-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    color: #fff;
    padding: 0.35rem;
}

.teacher-photo-lightbox__img {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 900px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
}

/* —— ตารางรายชื่อครู —— */
.teacher-roster-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.teacher-roster-card {
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-brand-100);
    background: var(--color-white);
    box-shadow: 0 1px 2px rgb(124 45 18 / 5%);
}

.teacher-roster-card--visited {
    border-color: #86efac;
    background: #f0fdf4;
    box-shadow: 0 1px 3px rgb(22 163 74 / 12%);
}

.teacher-roster-card--visited .teacher-roster-card__name {
    color: #14532d;
}

.teacher-roster-card--visited .teacher-roster-card__label {
    color: #16a34a;
}

.teacher-roster-card--visited .teacher-roster-card__btn {
    background: #16a34a;
}

.teacher-roster-card--visited .teacher-roster-card__btn:hover {
    background: #15803d;
}

.teacher-roster-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    min-width: 0;
}

.teacher-roster-card__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-900);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.teacher-roster-card__meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.teacher-roster-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    min-width: 0;
}

.teacher-roster-card__label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    color: var(--color-brand-600);
}

.teacher-roster-card__value {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #374151;
}

.teacher-roster-card__value--photos .teacher-roster-photos {
    max-width: none;
}

.teacher-roster-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.45rem 0.65rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-brand-600);
    cursor: pointer;
    white-space: nowrap;
}

.teacher-roster-card__btn:hover {
    background: var(--color-brand-700);
}

.teacher-roster-card--compact .teacher-roster-card__meta {
    gap: 0.25rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.teacher-roster-table-wrap--desktop {
    display: none;
}

.teacher-roster-table__name {
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .teacher-roster-cards:not(.teacher-roster-cards--map) {
        display: none;
    }

    .teacher-roster-table-wrap--desktop {
        display: block;
    }

    .teacher-roster-cards--map {
        display: flex;
    }
}

.teacher-roster-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.teacher-roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.teacher-roster-table th,
.teacher-roster-table td {
    padding: 0.5rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid var(--color-brand-100);
    vertical-align: middle;
}

.teacher-roster-table th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    background: var(--color-brand-50);
    position: sticky;
    top: 0;
    z-index: 1;
}

.teacher-roster-table tbody tr:hover {
    background: var(--color-brand-50);
}

.teacher-roster-table tbody tr.teacher-roster-table__row--visited {
    background: #f0fdf4;
}

.teacher-roster-table tbody tr.teacher-roster-table__row--visited:hover {
    background: #dcfce7;
}

.teacher-roster-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.teacher-roster-status--wait {
    background: var(--color-accent-600);
}

.teacher-roster-status--ok {
    background: #16a34a;
}

.teacher-roster-coords {
    font-family: var(--font-app) !important;
    font-size: 0.6875rem;
    color: var(--color-brand-800);
    font-variant-numeric: tabular-nums;
}

.teacher-roster-coords--none {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.teacher-roster-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 10rem;
}

.teacher-roster-photos__thumb {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-brand-200);
    border-radius: 0.25rem;
    overflow: hidden;
    cursor: zoom-in;
    background: #fff;
}

.teacher-roster-photos__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-roster-detail-btn {
    padding: 0.35rem 0.65rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-brand-600);
    white-space: nowrap;
}

.teacher-roster-detail-btn:hover {
    background: var(--color-brand-700);
}

/* —— Visit report —— */
#admin-panel-visit-report .visit-report-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

#admin-panel-visit-report .visit-report-hero__main {
    min-width: 0;
    flex: 1 1 14rem;
}

#admin-panel-visit-report .visit-report-intro__title {
    margin: 0;
    text-wrap: balance;
    font-size: 1.375rem;
    line-height: 1.25;
}

#admin-panel-visit-report .visit-report-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#admin-panel-visit-report .visit-report-actions__refresh-short {
    display: none;
}

#admin-panel-visit-report .visit-report-metric .admin-stat-card__label-short {
    display: none;
}

.visit-report-card-stat__label-short {
    display: none;
}

#admin-panel-visit-report .visit-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
    margin-bottom: 1rem;
}

#admin-panel-visit-report .visit-report-metric {
    --stat-accent: var(--color-brand-600);
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-brand-100);
    border-top: 1px solid var(--color-brand-100);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 90%) inset,
        0 1px 3px rgb(67 20 7 / 6%),
        0 3px 10px rgb(67 20 7 / 4%);
    transition:
        border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

#admin-panel-visit-report .visit-report-metric.admin-stat-card--students {
    --stat-accent: var(--color-brand-600);
}

#admin-panel-visit-report .visit-report-metric.admin-stat-card--visit {
    --stat-accent: #c2410c;
}

#admin-panel-visit-report .visit-report-metric--pending {
    --stat-accent: var(--color-accent-600);
}

#admin-panel-visit-report .visit-report-metric .admin-stat-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--stat-accent) 14%, white);
    color: var(--stat-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stat-accent) 12%, transparent);
}

#admin-panel-visit-report .visit-report-metric .admin-stat-card__icon svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

#admin-panel-visit-report .visit-report-metric .admin-stat-card__body {
    min-width: 0;
    flex: 1 1 auto;
}

#admin-panel-visit-report .visit-report-metric .admin-stat-card__label {
    margin: 0 0 0.12rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #57534e;
    white-space: nowrap;
    line-height: 1.35;
}

#admin-panel-visit-report .visit-report-metric .admin-stat-card__value {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-brand-700);
}

#admin-panel-visit-report .visit-report-metric .admin-stat-card__value small {
    font-size: 0.75rem;
    font-weight: 600;
    color: #78716c;
    margin-left: 0.1rem;
}

#admin-panel-visit-report .visit-report-metric .visit-report-stat--visited {
    color: #c2410c;
}

#admin-panel-visit-report .visit-report-metric .visit-report-stat--pending {
    color: var(--color-accent-700);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    #admin-panel-visit-report .visit-report-metric:hover {
        border-color: var(--color-brand-200);
        box-shadow:
            0 1px 0 rgb(255 255 255 / 95%) inset,
            0 3px 12px rgb(67 20 7 / 9%),
            0 6px 18px rgb(67 20 7 / 5%);
        transform: translateY(-1px);
    }
}

#admin-panel-visit-report .visit-report-metric:active {
    transform: translateY(0);
}

#admin-panel-visit-report .visit-report-metric__icon--pending {
    background: color-mix(in srgb, var(--color-accent-600) 14%, white);
    color: var(--color-accent-700);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-600) 12%, transparent);
}

#admin-panel-visit-report .visit-report-panel {
    margin-bottom: 1rem;
}

#admin-panel-visit-report .visit-report-panel__head {
    padding-bottom: 0.875rem;
}

.visit-report-panel__head-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.visit-report-panel__head-main .admin-panel__title {
    font-size: 1.125rem;
    line-height: 1.25;
}

.visit-report-panel__head-main .admin-panel__subtitle {
    margin-top: 0.15rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.visit-report-panel__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-100);
}

.visit-report-panel__icon svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

.visit-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.125rem;
    padding: 0.3rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow);
}

.visit-report-tabs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 4.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-brand-800);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.visit-report-tabs__icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visit-report-tabs__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.visit-report-tabs__btn:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-100);
}

.visit-report-tabs__btn--active {
    background: var(--color-brand-600);
    color: #fff;
    border-color: var(--color-brand-600);
    box-shadow: 0 1px 3px rgb(67 20 7 / 18%);
}

.visit-report-tabs__btn[data-visit-report-tab="all"] {
    white-space: nowrap;
    flex-shrink: 0;
}

.visit-report-tabs__btn--active,
.visit-report-tabs__btn--active span {
    color: #fff;
}

.visit-report-tabs__btn--active .visit-report-tabs__icon {
    opacity: 1;
}

.visit-report-guide {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.25rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    color: var(--color-brand-900);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.visit-report-guide p {
    margin: 0;
    text-wrap: pretty;
}

.visit-report-guide__icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-brand-600);
}

.visit-report-guide__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.visit-report-th-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    line-height: 1.25;
}

.visit-report-th-label__icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.visit-report-th-label__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.visit-report-table-wrap {
    border-radius: 0 0 0.75rem 0.75rem;
}

#admin-panel-visit-report .visit-report-table thead th {
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

#admin-panel-visit-report .visit-report-table tbody td,
#admin-panel-visit-report .visit-report-table tfoot th,
#admin-panel-visit-report .visit-report-table tfoot td {
    font-size: 0.9375rem;
    line-height: 1.45;
    padding: 0.3rem 0.45rem;
}

#admin-panel-visit-report .visit-report-table .admin-badge.admin-badge--class {
    display: inline-block;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    color: var(--color-brand-800);
    font-variant-numeric: tabular-nums;
}

#admin-panel-visit-report .visit-report-table tbody tr {
    transition: background 0.15s ease;
}

#admin-panel-visit-report .visit-report-table tbody tr:hover {
    background: rgb(255 247 237 / 55%);
}

.visit-report-table__row--active {
    background: var(--color-brand-50);
}

.visit-report-table__row--active td {
    font-weight: 600;
}

.visit-report-stat--visited {
    color: var(--color-brand-800);
}

.visit-report-stat--pending {
    color: var(--color-accent-700);
}

.visit-report-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--admin-ink-soft);
    font-size: 0.875rem;
}

.visit-report-loading__icon {
    animation: visit-report-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .visit-report-loading__icon {
        animation: none;
    }

    .visit-report-tabs__btn,
    #admin-panel-visit-report .visit-report-table tbody tr,
    .visit-report-progress__visited {
        transition: none;
    }
}

.visit-report--loading {
    opacity: 0.55;
    pointer-events: none;
}

.visit-report-table tfoot th,
.visit-report-table tfoot td {
    font-weight: 700;
    background: var(--color-brand-50);
    border-top: 2px solid var(--color-brand-200);
}

#admin-panel-visit-report .visit-report-table tfoot .visit-report-progress-wrap {
    min-height: 1.375rem;
}

#admin-panel-visit-report .visit-report-table th,
#admin-panel-visit-report .visit-report-table td {
    text-align: center;
    vertical-align: middle;
}

#admin-panel-visit-report .visit-report-table tfoot th {
    text-align: center;
}

.visit-report-progress-cell {
    min-width: 9rem;
    text-align: center;
}

.visit-report-progress-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: min(100%, 11rem);
}

.visit-report-count {
    display: inline-block;
    min-width: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.visit-report-teachers-cell {
    white-space: normal;
    line-height: 1.4;
    min-width: 7rem;
}

#admin-panel-visit-report .visit-report-table .visit-report-teachers-cell {
    text-align: left;
}

.visit-report-teachers {
    display: block;
    text-align: left;
    width: 100%;
}

.visit-report-teacher-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.visit-report-teacher-name__icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    color: var(--color-brand-600);
    opacity: 0.85;
}

.visit-report-teacher-name__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.visit-report-teacher-name + .visit-report-teacher-name {
    margin-top: 0.25rem;
}

.visit-report-teachers-empty {
    color: var(--admin-ink-soft);
}

.visit-report-count--visited {
    color: var(--color-brand-800);
}

.visit-report-count--pending {
    color: var(--color-accent-700);
}

.visit-report-progress {
    flex: 1 1 auto;
    min-width: 0;
    height: 0.5625rem;
    background: #f5f5f4;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid #e7e5e4;
}

.visit-report-progress__visited {
    height: 100%;
    background: var(--color-brand-600);
    border-radius: 9999px;
    min-width: 0;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.visit-report-progress__label {
    flex-shrink: 0;
    min-width: 2.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-brand-800);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.visit-report-empty {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--admin-ink-soft);
    font-size: 0.875rem;
}

.visit-report-print-only {
    display: none;
}

.visit-report-pct {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Mobile card layout (screen only; print keeps tables) */
.visit-report-cards {
    display: none;
}

.visit-report-card {
    border: 1px solid var(--color-brand-100);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(67 20 7 / 6%), 0 2px 6px rgb(67 20 7 / 4%);
    transition:
        border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.visit-report-card--class {
    border-color: var(--color-brand-100);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 80%) inset,
        0 1px 2px rgb(67 20 7 / 6%),
        0 3px 10px rgb(67 20 7 / 4%);
}

.visit-report-card--class .visit-report-card__head {
    padding: 0.45rem 0.625rem;
    background: linear-gradient(180deg, var(--color-brand-50) 0%, #fff 100%);
}

.visit-report-card--class .visit-report-card__teachers {
    padding: 0.4rem 0.625rem;
}

.visit-report-card--class .visit-report-card__body--compact {
    padding: 0.25rem 0.625rem 0.35rem;
}

.visit-report-card--class .visit-report-card-stat {
    padding: 0.28rem 0;
}

.visit-report-card--class .visit-report-card__foot {
    padding: 0.35rem 0.625rem 0.45rem;
}

.visit-report-card--active {
    border-color: var(--color-brand-400);
    box-shadow:
        0 0 0 1px var(--color-brand-200),
        0 2px 8px rgb(67 20 7 / 10%);
}

.visit-report-card--total {
    border-color: var(--color-brand-200);
    background: var(--color-brand-50);
    box-shadow: 0 1px 3px rgb(67 20 7 / 6%);
}

/* Level summary cards (mobile screen) */
.visit-report-level-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem 0.35rem;
    border-bottom: 1px solid rgb(254 215 170 / 28%);
    background: linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(255 251 247 / 55%) 100%);
}

.visit-report-card--total .visit-report-level-card__head {
    border-bottom-color: var(--color-brand-100);
    background: transparent;
}

.visit-report-level-card__identity {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.visit-report-level-card__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-100);
    flex-shrink: 0;
}

.visit-report-level-card__glyph--total {
    background: var(--color-brand-100);
    color: var(--color-brand-800);
}

.visit-report-level-card__glyph svg {
    display: block;
    width: 0.9375rem;
    height: 0.9375rem;
}

.visit-report-level-card__badge {
    font-size: 0.8125rem;
    font-weight: 800;
    padding: 0.18rem 0.55rem;
}

.visit-report-level-card__total-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-brand-900);
    line-height: 1.25;
}

.visit-report-level-card__pct-badge {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.18rem 0.48rem;
    border-radius: 9999px;
    background: var(--color-brand-600);
    color: #fff;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgb(67 20 7 / 18%);
}

.visit-report-level-card__pct-badge--total {
    background: var(--color-brand-800);
}

.visit-report-level-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.45rem 0.55rem 0.4rem;
}

.visit-report-level-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 3.25rem;
    padding: 0.35rem 0.2rem;
    border-radius: 0.5rem;
    background: #fafaf9;
    border: 1px solid #f5f5f4;
    text-align: center;
}

.visit-report-level-card__stat--visited {
    background: rgb(232 237 233 / 70%);
    border-color: var(--color-brand-100);
}

.visit-report-level-card__stat--pending {
    background: rgb(255 251 247 / 88%);
    border-color: rgb(254 215 170 / 50%);
}

.visit-report-level-card__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-600);
    opacity: 0.9;
}

.visit-report-level-card__stat--visited .visit-report-level-card__stat-icon {
    color: var(--color-brand-700);
}

.visit-report-level-card__stat--pending .visit-report-level-card__stat-icon {
    color: #9a3412;
    opacity: 0.85;
}

.visit-report-level-card__stat-icon svg {
    display: block;
    width: 0.8125rem;
    height: 0.8125rem;
}

.visit-report-level-card__stat-value {
    font-size: 0.875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--color-brand-900);
}

.visit-report-level-card__stat-value .visit-report-count--pending {
    color: var(--color-brand-700);
}

.visit-report-level-card__stat-label {
    font-size: 0.5625rem;
    font-weight: 600;
    color: #57534e;
    line-height: 1.2;
}

.visit-report-level-card__foot {
    padding: 0 0.65rem 0.55rem;
}

.visit-report-progress--level {
    width: 100%;
    height: 0.375rem;
}

.visit-report-card--level.visit-report-card--active {
    border-color: var(--color-brand-400);
    box-shadow:
        0 0 0 1px var(--color-brand-200),
        0 2px 8px rgb(67 20 7 / 10%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .visit-report-card--level:not(.visit-report-card--total):hover {
        border-color: var(--color-brand-300);
        box-shadow: 0 2px 10px rgb(67 20 7 / 8%);
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .visit-report-card--class:hover {
        border-color: var(--color-brand-300);
        box-shadow:
            0 1px 0 rgb(255 255 255 / 90%) inset,
            0 4px 14px rgb(67 20 7 / 11%),
            0 8px 24px rgb(67 20 7 / 7%);
        transform: translateY(-2px);
    }

    .visit-report-card:not(.visit-report-card--total):hover {
        border-color: var(--color-brand-200);
    }
}

.visit-report-card--class:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgb(67 20 7 / 8%);
}

.visit-report-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-brand-100);
    background: #fff;
}

.visit-report-card--total .visit-report-card__head {
    background: transparent;
    border-bottom-color: var(--color-brand-100);
}

.visit-report-card__badge {
    flex-shrink: 0;
    font-size: 0.875rem;
    padding: 0.2rem 0.55rem;
}

.visit-report-card--class .visit-report-card__badge {
    box-shadow: 0 1px 2px rgb(67 20 7 / 10%);
}

.visit-report-card__total-label {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-brand-900);
    white-space: nowrap;
}

.visit-report-card__head-progress {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.visit-report-card__pct {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--color-brand-800);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: rgb(255 255 255 / 85%);
    border: 1px solid var(--color-brand-100);
}

.visit-report-card--class .visit-report-card__pct {
    background: #fff;
}

.visit-report-card__pct--total {
    font-size: 0.875rem;
}

.visit-report-progress--compact {
    flex: 1 1 auto;
    max-width: 5.5rem;
    height: 0.4375rem;
}

.visit-report-card__body {
    padding: 0.4rem 0.75rem 0.55rem;
}

.visit-report-card__body--compact {
    padding-top: 0.3rem;
}

.visit-report-card-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.visit-report-card-stat + .visit-report-card-stat {
    border-top: 1px solid #f5f5f4;
}

@media (hover: hover) {
    .visit-report-card--class:hover .visit-report-card-stat__icon {
        color: var(--color-brand-700);
        opacity: 1;
    }
}

.visit-report-card-stat__label-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}

.visit-report-card-stat__icon {
    width: 0.8125rem;
    height: 0.8125rem;
    flex-shrink: 0;
    color: var(--color-brand-600);
    opacity: 0.9;
}

.visit-report-card-stat__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.visit-report-card-stat__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #57534e;
    white-space: nowrap;
    line-height: 1.3;
}

.visit-report-card-stat__value {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.visit-report-card__teachers {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-brand-100);
    background: rgb(255 251 247 / 65%);
}

.visit-report-card--class .visit-report-card__teachers {
    background: color-mix(in srgb, var(--color-brand-50) 55%, white);
}

.visit-report-card__teachers-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #57534e;
    white-space: nowrap;
}

.visit-report-card__teachers-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    color: var(--color-brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

.visit-report-card__teachers-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.visit-report-card__teachers-names {
    text-align: left;
}

.visit-report-card-teacher {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-900);
    line-height: 1.35;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.visit-report-card-teacher::-webkit-scrollbar {
    display: none;
}

.visit-report-card-teacher + .visit-report-card-teacher {
    margin-top: 0.15rem;
}

.visit-report-card__foot {
    padding: 0.45rem 0.75rem 0.6rem;
    border-top: 1px solid var(--color-brand-100);
    background: #fff;
}

.visit-report-card__foot .visit-report-progress-wrap {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .visit-report-card {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    #admin-panel-visit-report .visit-report-hero {
        flex-direction: column;
        gap: 0.45rem;
        margin-bottom: 0.5rem;
        padding: 0.45rem 0.5rem;
        border-radius: 0.625rem;
        border: 1px solid var(--admin-border);
        background: linear-gradient(180deg, #fff 0%, #eef2ef 100%);
        box-shadow: 0 1px 2px rgb(67 20 7 / 5%);
    }

    #admin-panel-visit-report .visit-report-hero__main {
        flex: 1 1 auto;
        width: 100%;
    }

    #admin-panel-visit-report .visit-report-intro__title {
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.3;
    }

    #admin-panel-visit-report .visit-report-actions {
        width: 100%;
        gap: 0.35rem;
    }

    #admin-panel-visit-report .visit-report-actions .admin-btn {
        flex: 1 1 0;
        min-height: 2rem;
        padding: 0.35rem 0.45rem;
        font-size: 0.75rem;
        font-weight: 700;
        gap: 0.3rem;
        border-radius: 0.4375rem;
        white-space: nowrap;
    }

    #admin-panel-visit-report .visit-report-actions .admin-btn [data-lucide] {
        width: 0.875rem;
        height: 0.875rem;
    }

    #admin-panel-visit-report .visit-report-actions__refresh-full {
        display: none;
    }

    #admin-panel-visit-report .visit-report-actions__refresh-short {
        display: inline;
    }

    #admin-panel-visit-report .visit-report-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-bottom: 0.5rem;
        border: 1px solid rgb(254 215 170 / 55%);
        border-radius: 0.5rem;
        background: rgb(255 255 255 / 88%);
        overflow: hidden;
    }

    #admin-panel-visit-report .visit-report-metric {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.08rem;
        padding: 0.35rem 0.15rem;
        border: none;
        border-right: 1px solid rgb(254 215 170 / 45%);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        min-height: 0;
    }

    #admin-panel-visit-report .visit-report-metric:last-child {
        border-right: none;
    }

    #admin-panel-visit-report .visit-report-metric .admin-stat-card__icon {
        display: none;
    }

    #admin-panel-visit-report .visit-report-metric .admin-stat-card__label-full {
        display: none;
    }

    #admin-panel-visit-report .visit-report-metric .admin-stat-card__label-short {
        display: block;
    }

    #admin-panel-visit-report .visit-report-metric .admin-stat-card__label {
        margin: 0;
        font-size: 0.625rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--color-brand-800);
        white-space: nowrap;
    }

    #admin-panel-visit-report .visit-report-metric .admin-stat-card__value {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 800;
        line-height: 1.15;
    }

    #admin-panel-visit-report .visit-report-metric .admin-stat-card__value small {
        font-size: 0.5625rem;
        font-weight: 600;
    }

    #admin-panel-visit-report .visit-report-panel {
        margin-bottom: 0.45rem;
        border-radius: 0.625rem;
    }

    #admin-panel-visit-report .visit-report-panel__head {
        padding: 0.4rem 0.55rem 0.35rem;
    }

    #admin-panel-visit-report .visit-report-panel__icon {
        display: none;
    }

    #admin-panel-visit-report .visit-report-panel__head-main .admin-panel__title {
        font-size: 0.8125rem;
        font-weight: 700;
    }

    #admin-panel-visit-report .admin-panel__subtitle {
        display: none;
    }

    #admin-panel-visit-report .visit-report-desktop-table {
        display: none !important;
    }

    #admin-panel-visit-report .visit-report-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.45rem 0.5rem 0.5rem;
    }

    #admin-panel-visit-report .visit-report-cards--level {
        gap: 0.45rem;
        padding: 0.45rem 0.5rem 0.5rem;
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    #admin-panel-visit-report .visit-report-card--level {
        border: 1px solid var(--admin-border);
        border-radius: 0.625rem;
        background: #fff;
        box-shadow: 0 1px 2px rgb(67 20 7 / 5%), 0 2px 6px rgb(67 20 7 / 3%);
        overflow: hidden;
    }

    #admin-panel-visit-report .visit-report-card--level.visit-report-card--active {
        background: #fff;
        box-shadow:
            0 0 0 1px var(--color-brand-300),
            0 2px 10px rgb(67 20 7 / 10%);
    }

    #admin-panel-visit-report .visit-report-card--level.visit-report-card--total {
        background: linear-gradient(180deg, var(--color-brand-50) 0%, #fff 55%);
        border-color: var(--color-brand-200);
        box-shadow: 0 1px 3px rgb(67 20 7 / 7%);
    }

    #admin-panel-visit-report .visit-report-level-card__head {
        padding: 0.42rem 0.55rem 0.32rem;
    }

    #admin-panel-visit-report .visit-report-level-card__glyph {
        width: 1.625rem;
        height: 1.625rem;
        border-radius: 0.4375rem;
    }

    #admin-panel-visit-report .visit-report-level-card__glyph svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    #admin-panel-visit-report .visit-report-level-card__stats {
        gap: 0.3rem;
        padding: 0.38rem 0.5rem 0.35rem;
    }

    #admin-panel-visit-report .visit-report-level-card__stat {
        min-height: 2.85rem;
        padding: 0.3rem 0.15rem;
        border-radius: 0.4375rem;
    }

    #admin-panel-visit-report .visit-report-level-card__stat-value {
        font-size: 0.8125rem;
    }

    #admin-panel-visit-report .visit-report-level-card__foot {
        padding: 0 0.55rem 0.48rem;
    }

    #admin-panel-visit-report .visit-report-cards--class {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding-bottom: 0.45rem;
    }

    #admin-panel-visit-report .visit-report-card {
        border-radius: 0.5rem;
        border-color: var(--admin-border);
        box-shadow: none;
    }

    #admin-panel-visit-report .visit-report-card--total {
        grid-column: 1 / -1;
        background: var(--color-brand-50);
    }

    #admin-panel-visit-report .visit-report-card__head {
        padding: 0.32rem 0.45rem;
        border-bottom: none;
        background: rgb(255 255 255 / 72%);
    }

    #admin-panel-visit-report .visit-report-card--total .visit-report-card__head {
        background: transparent;
    }

    #admin-panel-visit-report .visit-report-card__body {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: 0.25rem 0.2rem 0.32rem;
    }

    #admin-panel-visit-report .visit-report-card-stat {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.05rem;
        padding: 0.1rem 0;
        text-align: center;
        border-top: none;
    }

    #admin-panel-visit-report .visit-report-card-stat + .visit-report-card-stat {
        border-top: none;
        border-left: 1px solid rgb(254 215 170 / 40%);
    }

    #admin-panel-visit-report .visit-report-card-stat__icon {
        display: none;
    }

    #admin-panel-visit-report .visit-report-card-stat__label-full {
        display: none;
    }

    #admin-panel-visit-report .visit-report-card-stat__label-short {
        display: block;
    }

    #admin-panel-visit-report .visit-report-card-stat__label {
        font-size: 0.5625rem;
        font-weight: 600;
        line-height: 1.15;
        color: #57534e;
    }

    #admin-panel-visit-report .visit-report-card-stat__value {
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1.1;
    }

    #admin-panel-visit-report .visit-report-card__pct {
        font-size: 0.6875rem;
        padding: 0.08rem 0.32rem;
        border-radius: 9999px;
        background: #fff;
        border: 1px solid var(--color-brand-100);
    }

    #admin-panel-visit-report .visit-report-progress--compact {
        display: none;
    }

    #admin-panel-visit-report .visit-report-card--class .visit-report-card__head {
        padding: 0.35rem 0.45rem;
        background: var(--color-brand-50);
    }

    #admin-panel-visit-report .visit-report-card--class .visit-report-card__teachers {
        padding: 0.3rem 0.45rem;
        font-size: 0.6875rem;
    }

    #admin-panel-visit-report .visit-report-card--class .visit-report-card__foot {
        padding: 0.28rem 0.45rem 0.35rem;
    }

    .visit-report-tabs {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
        padding: 0.15rem 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .visit-report-tabs::-webkit-scrollbar {
        display: none;
    }

    .visit-report-tabs__btn {
        flex: 0 0 auto;
        min-width: 0;
        padding: 0.32rem 0.62rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 9999px;
        border: 1px solid var(--color-brand-200);
        background: #fff;
        color: var(--color-brand-800);
        box-shadow: none;
    }

    .visit-report-tabs__btn--active {
        background: var(--color-brand-700);
        border-color: var(--color-brand-700);
        color: #fff;
        box-shadow: none;
    }

    .visit-report-tabs__icon {
        display: none;
    }

    .visit-report-guide {
        display: none;
    }
}

/* พิมพ์รายงานการเยี่ยมบ้าน — A4 */
@media print {
    @page visit-report-summary {
        size: A4 portrait;
        margin: 10mm 11mm 12mm;
    }

    @page visit-report-level {
        size: A4 portrait;
        margin: 8mm 10mm 9mm;
    }

    html,
    body.page-admin.visit-report-printing {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.visit-report-printing .admin-sidebar,
    body.visit-report-printing .admin-sidebar__backdrop,
    body.visit-report-printing .site-header,
    body.visit-report-printing .admin-topbar,
    body.visit-report-printing .admin-footer,
    body.visit-report-printing .admin-toast-host,
    body.visit-report-printing #admin-bulk-overlay,
    body.visit-report-printing .visit-report-screen-only,
    body.visit-report-printing #visit-report-loading,
    body.visit-report-printing [data-admin-panel]:not(#admin-panel-visit-report) {
        display: none !important;
    }

    body.visit-report-printing .admin-app,
    body.visit-report-printing .admin-app__workspace,
    body.visit-report-printing .admin-shell,
    body.visit-report-printing .admin-main,
    body.visit-report-printing .admin-main__inner,
    body.visit-report-printing #app-content,
    body.visit-report-printing #admin-view,
    body.visit-report-printing #admin-panel-visit-report,
    body.visit-report-printing #visit-report-content,
    body.visit-report-printing #visit-report-print-sheets {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    body.visit-report-printing #admin-panel-visit-report,
    body.visit-report-printing #admin-panel-visit-report.hidden {
        display: block !important;
    }

    body.visit-report-printing .visit-report-print-sheet {
        display: none;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        page-break-inside: auto;
    }

    body.visit-report-printing.visit-report-print--all .visit-report-print-sheet {
        display: block;
    }

    body.visit-report-printing.visit-report-print--all .visit-report-print-sheet--summary {
        page: visit-report-summary;
        page-break-after: always;
    }

    body.visit-report-printing.visit-report-print--all .visit-report-print-sheet--level {
        page: visit-report-level;
        page-break-before: always;
        page-break-after: always;
        break-before: page;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    body.visit-report-printing.visit-report-print--all .visit-report-print-sheet--level:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    body.visit-report-printing.visit-report-print--single .visit-report-print-sheet[data-print-level] {
        display: none;
    }

    body.visit-report-printing.visit-report-print--single .visit-report-print-sheet--level {
        page: visit-report-level;
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    body.visit-report-printing.visit-report-print--single[data-visit-report-print-level="ม.1"] .visit-report-print-sheet[data-print-level="ม.1"],
    body.visit-report-printing.visit-report-print--single[data-visit-report-print-level="ม.2"] .visit-report-print-sheet[data-print-level="ม.2"],
    body.visit-report-printing.visit-report-print--single[data-visit-report-print-level="ม.3"] .visit-report-print-sheet[data-print-level="ม.3"],
    body.visit-report-printing.visit-report-print--single[data-visit-report-print-level="ม.4"] .visit-report-print-sheet[data-print-level="ม.4"],
    body.visit-report-printing.visit-report-print--single[data-visit-report-print-level="ม.5"] .visit-report-print-sheet[data-print-level="ม.5"],
    body.visit-report-printing.visit-report-print--single[data-visit-report-print-level="ม.6"] .visit-report-print-sheet[data-print-level="ม.6"] {
        display: block;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-print-header {
        margin-bottom: 1.5mm;
        padding-bottom: 1.2mm;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-print-metrics {
        gap: 1.5mm;
        margin-bottom: 1.5mm;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-print-metric {
        padding: 1.2mm 2mm;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-print-metric__label {
        margin-bottom: 0.25mm;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-table {
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-table thead {
        display: table-header-group;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-table th,
    body.visit-report-printing .visit-report-print-sheet--level .visit-report-table td {
        padding: 0.9mm 1mm;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-table thead th {
        padding: 1mm 0.8mm;
    }

    body.visit-report-printing .visit-report-print-sheet--level .visit-report-teacher-name--print + .visit-report-teacher-name--print {
        margin-top: 0.4mm;
    }

    body.visit-report-printing .visit-report-print-header {
        margin: 0 auto 4mm;
        padding: 0 0 3mm;
        border-bottom: 0.35mm solid #c2410c;
        page-break-after: avoid;
        break-after: avoid-page;
        text-align: center;
        width: 100%;
    }

    body.visit-report-printing .visit-report-print-header__school {
        margin: 0;
        font-size: 14pt;
        font-weight: 800;
        line-height: 1.25;
        color: #9a3412;
    }

    body.visit-report-printing .visit-report-print-header__title {
        margin: 1mm 0 0;
        font-size: 12pt;
        font-weight: 700;
        line-height: 1.3;
        color: #1c1917;
    }

    body.visit-report-printing .visit-report-print-header__subtitle {
        margin: 1mm 0 0;
        font-size: 10pt;
        font-weight: 600;
        color: #57534e;
    }

    body.visit-report-printing .visit-report-print-header__meta {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 3mm 8mm;
        margin: 2mm auto 0;
        font-size: 8.5pt;
        color: #57534e;
        white-space: nowrap;
        text-align: center;
    }

    body.visit-report-printing .visit-report-print-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5mm;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 4mm;
        page-break-after: avoid;
        break-after: avoid-page;
    }

    body.visit-report-printing .visit-report-print-metric {
        padding: 2.5mm 3mm;
        border: 0.25mm solid #fdba74;
        border-radius: 1.5mm;
        background: #e8ede9 !important;
        text-align: center;
    }

    body.visit-report-printing .visit-report-print-metric__label {
        display: block;
        margin-bottom: 0.5mm;
        line-height: 1.35;
        color: #9a3412;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    body.visit-report-printing .visit-report-print-metric__value {
        color: #1c1917;
    }

    body.visit-report-printing .visit-report-print-metric__value small {
        font-weight: inherit;
    }

    body.visit-report-printing .visit-report-print-metric--visited .visit-report-print-metric__value {
        color: #9a3412;
    }

    body.visit-report-printing .visit-report-print-metric--pending .visit-report-print-metric__value {
        color: #b91c1c;
    }

    body.visit-report-printing .visit-report-print-section-title {
        margin: 0 auto 2mm;
        color: #1c1917;
        page-break-after: avoid;
        break-after: avoid-page;
        text-align: center;
        width: 100%;
    }

    body.visit-report-printing .visit-report-table {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        table-layout: fixed;
        border-collapse: collapse;
        line-height: 1.35;
        page-break-inside: auto;
    }

    body.visit-report-printing .visit-report-table thead {
        display: table-header-group;
    }

    body.visit-report-printing .visit-report-table tfoot {
        display: table-footer-group;
    }

    body.visit-report-printing .visit-report-table th,
    body.visit-report-printing .visit-report-table td {
        padding: 1.4mm 1.6mm;
        border: 0.2mm solid #d6d3d1;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        vertical-align: middle;
        text-align: center;
        background: #fff !important;
        color: #1c1917 !important;
        word-break: keep-all;
    }

    body.visit-report-printing .visit-report-table tfoot th {
        text-align: center;
    }

    body.visit-report-printing .visit-report-table thead th {
        background: #dce6df !important;
        color: #9a3412 !important;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    body.visit-report-printing .visit-report-table tfoot th,
    body.visit-report-printing .visit-report-table tfoot td {
        background: #e8ede9 !important;
        border-top: 0.35mm solid #fdba74;
    }

    /* มาตรฐานตัวอักษรรายงานพิมพ์ — ทุกหน้า */
    body.visit-report-printing .visit-report-print-section-title,
    body.visit-report-printing .visit-report-print-metric__label,
    body.visit-report-printing .visit-report-print-metric__value,
    body.visit-report-printing .visit-report-print-metric__value small {
        font-size: 12pt;
        font-weight: 700;
        line-height: 1.35;
    }

    body.visit-report-printing .visit-report-table thead th {
        font-size: 11pt;
        font-weight: 700;
    }

    body.visit-report-printing .visit-report-table tbody td,
    body.visit-report-printing .visit-report-table tbody th,
    body.visit-report-printing .visit-report-table tfoot th,
    body.visit-report-printing .visit-report-table tfoot td {
        font-size: 10pt;
        font-weight: 400;
    }

    body.visit-report-printing .visit-report-table tbody .visit-report-teacher-name--print,
    body.visit-report-printing .visit-report-table tbody .visit-report-count,
    body.visit-report-printing .visit-report-table tbody .visit-report-pct,
    body.visit-report-printing .visit-report-table tfoot .visit-report-count,
    body.visit-report-printing .visit-report-table tfoot .visit-report-pct {
        font-size: 10pt;
        font-weight: 400;
    }

    body.visit-report-printing .visit-report-table--print-level tbody tr,
    body.visit-report-printing .visit-report-table--print-summary tbody tr {
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    body.visit-report-printing .visit-report-table--print-level th:nth-child(1),
    body.visit-report-printing .visit-report-table--print-level td:nth-child(1) {
        width: 8%;
    }

    body.visit-report-printing .visit-report-table--print-level th:nth-child(2),
    body.visit-report-printing .visit-report-table--print-level td:nth-child(2) {
        width: 34%;
        white-space: normal !important;
        text-align: left !important;
        vertical-align: middle;
    }

    body.visit-report-printing .visit-report-teachers-cell {
        white-space: normal !important;
        line-height: 1.35;
        text-align: left !important;
        overflow: visible;
        text-overflow: clip;
        vertical-align: middle;
    }

    body.visit-report-printing .visit-report-teachers--print {
        display: block;
    }

    body.visit-report-printing .visit-report-teacher-name--print {
        display: block;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
        color: #1c1917;
    }

    body.visit-report-printing .visit-report-teacher-name--print + .visit-report-teacher-name--print {
        margin-top: 0.6mm;
    }

    body.visit-report-printing .visit-report-teacher-name {
        display: block;
        white-space: nowrap;
    }

    body.visit-report-printing .visit-report-teacher-name + .visit-report-teacher-name {
        margin-top: 0.6mm;
    }

    body.visit-report-printing .visit-report-table--print-level th:nth-child(3),
    body.visit-report-printing .visit-report-table--print-level td:nth-child(3) {
        width: 12%;
    }

    body.visit-report-printing .visit-report-table--print-level th:nth-child(4),
    body.visit-report-printing .visit-report-table--print-level td:nth-child(4) {
        width: 14%;
    }

    body.visit-report-printing .visit-report-table--print-level th:nth-child(5),
    body.visit-report-printing .visit-report-table--print-level td:nth-child(5) {
        width: 18%;
    }

    body.visit-report-printing .visit-report-table--print-level th:nth-child(6),
    body.visit-report-printing .visit-report-table--print-level td:nth-child(6) {
        width: 14%;
    }

    body.visit-report-printing .visit-report-table--print-summary th:nth-child(1),
    body.visit-report-printing .visit-report-table--print-summary td:nth-child(1) {
        width: 12%;
    }

    body.visit-report-printing .visit-report-table--print-summary th:nth-child(2),
    body.visit-report-printing .visit-report-table--print-summary td:nth-child(2) {
        width: 22%;
    }

    body.visit-report-printing .visit-report-table--print-summary th:nth-child(3),
    body.visit-report-printing .visit-report-table--print-summary td:nth-child(3) {
        width: 22%;
    }

    body.visit-report-printing .visit-report-table--print-summary th:nth-child(4),
    body.visit-report-printing .visit-report-table--print-summary td:nth-child(4) {
        width: 28%;
    }

    body.visit-report-printing .visit-report-table--print-summary th:nth-child(5),
    body.visit-report-printing .visit-report-table--print-summary td:nth-child(5) {
        width: 16%;
    }

    body.visit-report-printing .visit-report-teacher-name__icon,
    body.visit-report-printing .visit-report-th-label__icon {
        display: none;
    }

    body.visit-report-printing .admin-table--layout thead th,
    body.visit-report-printing .admin-table--layout tbody td:not(.visit-report-teachers-cell) {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    body.visit-report-printing .visit-report-count--visited {
        color: #9a3412 !important;
    }

    body.visit-report-printing .visit-report-count--pending {
        color: #b91c1c !important;
    }

    body.visit-report-printing .visit-report-print-only {
        display: block !important;
    }
}