/* ==========================================================================
   LINE Webview & Mobile Optimization Stylesheet for USP Admission
   วิทยาลัยเทคโนโลยีอุดมศึกษาพณิชยการ (USP)
   ========================================================================== */

:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --appbar-height-mobile: 58px;
    --brand-primary: #1e3a8a;
    --brand-accent: #0f766e;
    --bg-page: #f8fafc;
}

/* Global Font & Smooth Rendering */
html {
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    background-color: var(--bg-page);
    scroll-behavior: smooth;
}

body {
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: var(--bg-page);
    color: #1e293b;
    margin: 0;
    padding: 0;
    min-height: 100%;
    /* ป้องกัน rubber-band ดึงหน้าหลุดใน iOS Safari และ LINE Webview */
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* ป้องกัน iOS Auto-Zoom เมื่อกด Input (iOS จะซูมถ้า font-size < 16px) */
@media screen and (max-width: 768px) {
    input, 
    select, 
    textarea,
    .mud-input-slot,
    .mud-input > input,
    .mud-select-input,
    .mud-picker-input-text,
    .mud-autocomplete-input {
        font-size: 16px !important;
    }
}

/* Touch Targets: ขนาดปุ่มและช่องกรอกข้อมูลให้กดง่ายบนหน้าจอมือถือ */
@media screen and (max-width: 600px) {
    .mud-button-root {
        min-height: 44px;
        touch-action: manipulation;
    }

    .mud-input-outlined .mud-input-slot {
        min-height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .mud-select {
        min-height: 48px;
    }

    /* ตารางบนมือถือให้ขอบมนและอ่านง่าย */
    .mud-table-root {
        font-size: 0.9rem;
    }
    
    .mud-table-cell {
        padding: 10px 12px !important;
    }

    /* Modal Dialog บนมือถือ */
    .mud-dialog {
        max-width: calc(100vw - 24px) !important;
        margin: 12px !important;
        border-radius: 20px !important;
    }

    /* ปรับ Popover ปฏิทินและ Dropdown บนมือถือ */
    .mud-popover-open {
        max-width: calc(100vw - 20px) !important;
    }
}

/* Safe Area Insets Helpers */
.safe-area-bottom {
    padding-bottom: max(1rem, var(--safe-area-bottom)) !important;
}

.safe-area-bottom-sticky {
    padding-bottom: max(0.75rem, var(--safe-area-bottom));
}

.safe-area-top {
    padding-top: max(0.5rem, var(--safe-area-top)) !important;
}

/* Modern Card & Shadow Styles */
.mud-card {
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
}

/* Form Outlined Inputs */
.mud-input-outlined-border {
    border-color: rgba(148, 163, 184, 0.4) !important;
    border-radius: 14px !important;
    transition: all 0.2s ease-in-out;
}

.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: #2563eb !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Scrollbar สวยงาม นุ่มนวล */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.6);
}

/* Legacy Utility Classes (Preserved) */
.align-right input {
    text-align: right;
}

.colFitContent {
    width: 1%;
    white-space: nowrap;
}

.h-55 {
    height: 55px !important;
}