/* 万锦学校系统 H5 / 小程序 WebView 通用适配层 */
:root {
    --h5-safe-top: env(safe-area-inset-top, 0px);
    --h5-safe-right: env(safe-area-inset-right, 0px);
    --h5-safe-bottom: env(safe-area-inset-bottom, 0px);
    --h5-safe-left: env(safe-area-inset-left, 0px);
    --h5-viewport-height: 100vh;
    --h5-touch-size: 44px;
}

html {
    width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

html.h5-mode,
html.h5-mode body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html.h5-mode body {
    min-height: var(--h5-viewport-height);
    padding-right: var(--h5-safe-right);
    padding-bottom: var(--h5-safe-bottom);
    padding-left: var(--h5-safe-left);
    overscroll-behavior-y: contain;
}

html.h5-mode body > nav:first-of-type,
html.h5-mode body > header:first-of-type {
    padding-top: var(--h5-safe-top);
}

html.h5-mode *,
html.h5-mode *::before,
html.h5-mode *::after {
    box-sizing: border-box;
}

html.h5-mode img,
html.h5-mode video,
html.h5-mode svg,
html.h5-mode canvas {
    max-width: 100%;
}

html.h5-mode button,
html.h5-mode a,
html.h5-mode [role="button"],
html.h5-mode input,
html.h5-mode select,
html.h5-mode textarea {
    touch-action: manipulation;
}

html.h5-mode .h5-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

html.h5-mode .h5-table-scroll::-webkit-scrollbar {
    height: 5px;
}

html.h5-mode .h5-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.42);
}

html.h5-mode .h5-scroll-hint {
    position: sticky;
    left: 0;
    display: none;
    width: max-content;
    margin: 0 0 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.68);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
}

html.h5-mode .h5-keyboard-safe {
    scroll-margin-bottom: 38vh;
}

@supports (height: 100dvh) {
    :root {
        --h5-viewport-height: 100dvh;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    html.h5-mode body {
        min-height: var(--h5-viewport-height) !important;
        font-size: 14px;
    }

    html.h5-mode .min-h-screen {
        min-height: var(--h5-viewport-height) !important;
    }

    html.h5-mode .h-screen {
        height: var(--h5-viewport-height) !important;
    }

    html.h5-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    html.h5-mode select,
    html.h5-mode textarea {
        max-width: 100%;
        min-height: var(--h5-touch-size);
        font-size: 16px !important;
        border-radius: 10px;
    }

    html.h5-mode input[type="checkbox"],
    html.h5-mode input[type="radio"] {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    html.h5-mode button,
    html.h5-mode a[class*="btn"],
    html.h5-mode [role="button"] {
        min-height: var(--h5-touch-size);
    }

    html.h5-mode button:active,
    html.h5-mode a:active,
    html.h5-mode [role="button"]:active {
        opacity: 0.82;
        transform: scale(0.985);
    }

    html.h5-mode body > nav > div,
    html.h5-mode body > header > div,
    html.h5-mode main,
    html.h5-mode .container,
    html.h5-mode [class*="max-w-7xl"],
    html.h5-mode [class*="max-w-6xl"] {
        max-width: 100% !important;
    }

    html.h5-mode body > nav > div,
    html.h5-mode body > header > div {
        min-height: 56px;
        padding-right: max(12px, var(--h5-safe-right)) !important;
        padding-left: max(12px, var(--h5-safe-left)) !important;
        gap: 8px;
    }

    html.h5-mode body > nav .space-x-4 > :not([hidden]) ~ :not([hidden]),
    html.h5-mode body > header .space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0.5rem !important;
    }

    html.h5-mode .h5-table-scroll table {
        width: max-content;
        min-width: 100%;
        border-collapse: collapse;
    }

    html.h5-mode .h5-table-scroll th,
    html.h5-mode .h5-table-scroll td {
        white-space: nowrap;
    }

    html.h5-mode .h5-table-scroll.is-overflowing .h5-scroll-hint {
        display: block;
    }

    html.h5-mode .modal-dialog,
    html.h5-mode .modal-content,
    html.h5-mode .dialog-content,
    html.h5-mode [role="dialog"] {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(var(--h5-viewport-height) - var(--h5-safe-top) - var(--h5-safe-bottom) - 24px) !important;
        margin: max(12px, var(--h5-safe-top)) auto max(12px, var(--h5-safe-bottom)) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    html.h5-mode body > .fixed.inset-0,
    html.h5-mode body > [class*="fixed"][class*="inset-0"] {
        padding-top: max(12px, var(--h5-safe-top));
        padding-right: max(12px, var(--h5-safe-right));
        padding-bottom: max(12px, var(--h5-safe-bottom));
        padding-left: max(12px, var(--h5-safe-left));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    html.h5-mode .notification,
    html.h5-mode .toast,
    html.h5-mode [class*="toast"] {
        right: max(12px, var(--h5-safe-right)) !important;
        left: max(12px, var(--h5-safe-left)) !important;
        width: auto !important;
        max-width: none !important;
    }

    html.h5-mode canvas {
        height: auto !important;
    }

    html.h5-mode .overflow-x-auto,
    html.h5-mode .table-wrap,
    html.h5-mode .table-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    html.h5-mode .toolbar,
    html.h5-mode .filter-row,
    html.h5-mode .filters,
    html.h5-mode .nav-actions {
        flex-wrap: wrap;
    }

    html.h5-mode .grid-cols-3,
    html.h5-mode .grid-cols-4,
    html.h5-mode .grid-cols-5,
    html.h5-mode .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html.h5-mode .text-5xl,
    html.h5-mode .text-6xl {
        font-size: 2.25rem !important;
        line-height: 1.12 !important;
    }

    html.h5-mode .text-4xl {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }

    html.h5-mode .hover\:scale-105:hover,
    html.h5-mode .hover\:scale-110:hover {
        transform: none !important;
    }
}

@media (max-width: 480px) {
    html.h5-mode .grid-cols-3,
    html.h5-mode .grid-cols-4,
    html.h5-mode .grid-cols-5,
    html.h5-mode .grid-cols-6 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.h5-mode .sm\:px-6,
    html.h5-mode .md\:px-8,
    html.h5-mode .lg\:px-8 {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    html.h5-mode .p-8 {
        padding: 1rem !important;
    }

    html.h5-mode .p-6 {
        padding: 0.875rem !important;
    }
}

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