/* styles/mobile.css
   Mobile-only patches (phone breakpoints)
   Extracted from style.css
*/

/* 📱 MOBILE SAFETY NET: Prevent horizontal overflow */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative;
    }

    * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* 
   📱 COMPLETE MOBILE OVERHAUL
   Targeting 768px and below (Phones & Small Tablets)
*/
@media (max-width: 768px) {

    /* --- GLOBAL MODAL RESET (Full Screen Mode) --- */

    /* 1. Reset Overlay to be invisible container */
    .modal-overlay {
        padding: 0 !important;
        background: #fff !important;
        align-items: flex-start !important;
        z-index: 9000 !important;
    }

    /* 2. Unified Container Styles for both Static (.modal-content) and Dynamic (dialog.modal) */
    .modal-content,
    dialog.modal {
        position: fixed !important;
        inset: 0 !important;
        /* Top, Right, Bottom, Left = 0 */
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: #fdfbf9 !important;
        /* Warm clean background */
        display: flex !important;
        flex-direction: column !important;
        box-shadow: none !important;
        z-index: 9100 !important;

        /* 🚀 CRITICAL FIX: Remove transform to allow fixed children (Date Picker) to position relative to Viewport */
        transform: none !important;
        animation: none !important;
        /* Prevent animations that use transform */
    }

    /* --- HEADER (Fixed Top) --- */
    .modal-header,
    .modal-content .modal-header {
        flex: none;
        /* Don't shrink */
        height: auto !important;
        min-height: 50px !important;
        /* Reduced from 60px */
        padding: 10px 16px !important;
        /* Reduced padding */
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        background: #fff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 10;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
        /* Softer shadow */
    }

    .modal-header h3 {
        font-size: 1rem !important;
        /* Reduced from 1.15rem */
        font-weight: 600 !important;
        color: #4a403a !important;
        margin: 0 !important;
    }

    /* --- REDESIGN: LEAVE TYPE SECTION (Mobile Only / No HTML Change) --- */

    /* 1. Unlock layout constraints using display: contents to flatten hierarchy */
    .row:has(#lf-type) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;

        /* Container style */
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        padding: 12px 16px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .row:has(#lf-type)>div.d-flex {
        display: contents !important;
        /* Flatten the wrapper div */
    }

    /* 2. Reorder Elements */

    /* Label [Order 1] */
    .row:has(#lf-type)>label {
        width: auto !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        font-weight: 600 !important;
        color: #5d4037 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 1rem !important;
    }

    /* Inject Icon into Label */
    .row:has(#lf-type)>label::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: #8d6e63;
        /* Theme Brown */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cline x1='10' y1='9' x2='8' y2='9'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cline x1='10' y1='9' x2='8' y2='9'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
    }

    /* Balance Badge [Order 2] */
    #lf-balance {
        order: 2 !important;
        margin-left: auto !important;
        /* Push to right */
        background-color: #fff8e1 !important;
        /* Cream */
        color: #8d6e63 !important;
        border: 1px solid #ffe0b2 !important;
        border-radius: 99px !important;
        padding: 2px 10px !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        height: auto !important;
        line-height: 1.5 !important;
        display: inline-block !important;
        /* Force show if hidden by default? No, JS controls display */
    }

    /* Select Wrapper [Order 3] */
    .row:has(#lf-type) .select-wrapper {
        order: 3 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 8px !important;
    }

    /* Select Input Styling */
    #lf-type {
        width: 100% !important;
        height: 50px !important;
        border: 1px solid #8d6e63 !important;
        /* Theme Border */
        border-radius: 10px !important;
        padding: 0 14px !important;
        font-size: 1rem !important;
        color: #3e2723 !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

    #lf-type:focus {
        border-color: #6d4c41 !important;
        box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.15) !important;
    }

    /* 📱 MOBILE PILL EVENT (Small Text Bar) */
    .mobile-pill-event .mobile-event-inner {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        /* ✅ Allow spanning multiple days */
        padding: 1px 4px !important;
        border-radius: 4px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        text-align: left !important;
        margin: 1px 0 !important;
        box-shadow: none !important;
    }

    /* Close Button - Larger Touch Target */
    .modal-close,
    .btn-close {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: #f5f5f5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        color: #666 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- 3. BODY (Scrollable Area) --- */
    .modal-body,
    .modal-content .modal-body,
    dialog.modal .modal-body {
        flex: 1;
        width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;

        /* 🔥 Aggressive Padding Fix: Clear content above fixed footer */
        padding: 20px 20px 160px 20px !important;

        background: transparent !important;
        position: relative;
        /* Context */
        display: block !important;
        /* Ensure standard block flow for padding to work */
        box-sizing: border-box !important;
    }

    /* Remove spacer approach as it was unreliable */

    /* --- FOOTER (Fixed Bottom) --- */
    .modal-footer,
    .modal-content .modal-footer,
    #leaveForm .actions,
    dialog.modal .actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;

        background: #fff !important;
        border-top: 1px solid #eee !important;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05) !important;

        padding: 12px 20px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;

        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 12px !important;
        z-index: 20;
        margin: 0 !important;

        /* Ensure it covers clickable elements behind it */
        pointer-events: auto !important;
    }

    /* Make footer buttons big and easy to tap */
    .modal-footer button,
    #leaveForm .actions button {
        flex: 1 !important;
        height: 48px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide redundant 'cancel' text buttons if space is tight, keep icons if needed */
    /* Only keeping primary action and maybe a clear secondary */

    /* --- FORM ELEMENTS (Touch Optimized) --- */
    .form-group {
        margin-bottom: 20px !important;
    }

    label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #5d4037 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    .form-control,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important;
        /* Prevents iOS zoom */
        line-height: normal !important;
        border-radius: 12px !important;
        border: 1px solid #e0dcd9 !important;
        background: #fff !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    }

    input[type="text"],
    input[type="number"],
    input[type="date"],
    select {
        height: 50px !important;
        padding: 0 16px !important;
    }

    textarea {
        padding: 14px 16px !important;
        min-height: 100px !important;
    }

    /* --- REDESIGN: SIGNATURE SECTION (Mobile Only) --- */

    /* 1. Card Container Logic */
    .row:has(#lf-signature) {
        display: flex !important;
        flex-direction: column !important;
        /* Force stack */
        position: relative !important;
        /* For absolute button */
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        padding: 12px 16px !important;
        margin-bottom: 24px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        gap: 0 !important;
        /* Manage gap manually */
    }

    /* 2. Header: Label (Left) */
    .row:has(#lf-signature)>label {
        width: 100% !important;
        order: 1 !important;
        margin: 0 0 12px 0 !important;
        font-weight: 600 !important;
        color: #5d4037 !important;
        font-size: 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Icon (Pen) */
    .row:has(#lf-signature)>label::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: #5d4037;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'%3E%3C/path%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'%3E%3C/path%3E%3Cpath d='M2 2l7.586 7.586'%3E%3C/path%3E%3Ccircle cx='11' cy='11' r='2'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'%3E%3C/path%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'%3E%3C/path%3E%3Cpath d='M2 2l7.586 7.586'%3E%3C/path%3E%3Ccircle cx='11' cy='11' r='2'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
        /* Use a pen icon path */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
    }

    .row:has(#lf-signature)>label::after {
        content: " (Signature)";
        font-size: 0.85em;
        opacity: 0.7;
        font-weight: 400;
    }

    /* 3. Body: Canvas Wrapper */
    .row:has(#lf-signature)>div.flex-1 {
        width: 100% !important;
        flex: 0 0 100% !important;
        /* Force full width */
        order: 2 !important;
    }

    /* Canvas Area */
    #lf-sign-wrap {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        height: 180px !important;
    }

    #lf-signature {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 100% !important;
        border: 2px dashed #ffb74d !important;
        /* Theme Orange */
        border-radius: 12px !important;
        background-color: transparent !important;
    }

    /* Placeholder Text (Centered Behind) */
    #lf-sign-wrap::before {
        content: "เซ็นชื่อที่นี่ (Sign here)";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #bdbdbd;
        font-size: 0.95rem;
        z-index: 1;
        pointer-events: none;
    }

    /* 4. clear Button (Absolute Top Right) */
    #lf-sign-clear {
        position: absolute !important;
        top: 12px !important;
        right: 16px !important;
        z-index: 10 !important;
        background: #ffebee !important;
        /* Red 50 */
        color: #c62828 !important;
        border: 1px solid #ffcdd2 !important;
        border-radius: 20px !important;
        padding: 4px 12px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        height: auto !important;
        box-shadow: none !important;
    }

    #lf-sign-clear::before {
        content: "✕";
        font-size: 10px;
        margin-right: 2px;
    }

    /* Hide legacy styling container for button */
    .row:has(#lf-signature) .d-flex.gap-8 {
        display: block !important;
        margin-top: 0 !important;
    }

    /* Hide legacy footer text container logic if needed, but ensure text is centered */
    .row:has(#lf-signature) .muted {
        display: block !important;
        text-align: center !important;
        margin-top: 8px !important;
        font-size: 0.75rem !important;
        color: #8d6e63 !important;
    }

    /* --- SPECIAL LAYOUTS --- */

    /* 🚀 RESET CHILD FORMS: Fix "Cut-off" by removing desktop constraints */
    #leaveForm,
    #issueForm {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
        padding-bottom: 0 !important;
        display: block !important;
    }

    /* Hide Dev Test Button on Mobile (Production-like feel) */
    #lf-btn-test-fill {
        display: none !important;
    }

    /* Refine Close Button Size (Reduced 20% -> 26px) */
    .modal-close,
    .btn-close {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: #efebe9 !important;
        /* Theme Light Brown */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        color: #5d4037 !important;
        /* Theme Dark Brown */
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #d7ccc8 !important;
    }

    /* Submit Button Area (Reduced ~40%) */
    .modal-footer {
        padding: 10px 16px !important;
        background: #fff !important;
        border-top: 1px solid #f0f0f0 !important;
    }

    .modal-footer button.primary,
    #lf-submit {
        height: 40px !important;
        /* Reduced height */
        font-size: 0.9rem !important;
        padding: 0 !important;
        width: 60% !important;
        /* Reduced width (40% smaller area visually) */
        margin: 0 auto !important;
        /* Center */
        display: block !important;
        border-radius: 20px !important;
        /* Pill shape */
    }

    /* Half-Day Toggle Row */
    #leaveForm .row:has(#lf-half),
    .modal .row:has(#lf-half) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #fff;
        padding: 16px;
        border-radius: 12px;
        border: 1px solid #e0dcd9;
    }

    /* Radio Buttons Group */
    .radio-row {
        gap: 16px !important;
    }

    .radio-row label {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* --- 📅 DATE PICKER (BOTTOM SHEET STYLE) --- */
    /* This fixes the "squashed" look by giving it full width at bottom */

    /* The container */
    .range-picker,
    #edit-leave-range-picker,
    #lf-range-picker {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        /* Reset any translate centering */

        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 85vh !important;

        background: #fff !important;
        border-radius: 24px 24px 0 0 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
        border: none !important;

        padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) 20px !important;
        z-index: 10000 !important;

        display: none;
        /* Controlled by JS */
        animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .range-picker[aria-hidden="false"],
    .range-picker[style*="block"] {
        display: block !important;
    }

    /* Backdrop for Bottom Sheet */
    /* Using box-shadow trick to create backdrop outside the sheet */
    .range-picker {
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45) !important;
    }

    /* Calendar Internal Styling for Mobile */
    .rp-header {
        margin-bottom: 20px !important;
    }

    .rp-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #3e2723 !important;
    }

    /* Responsive Grid - Fix squashed days */
    .rp-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        /* Distribute slots evenly */
        justify-items: center !important;
        /* Center the circle in the slot */
        gap: 8px 0 !important;
        /* Vertical gap 8px */
        width: 100% !important;
    }

    .rp-day {
        width: 40px !important;
        /* Fixed Size */
        height: 40px !important;
        /* Fixed Size */
        font-size: 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex: none !important;
        /* Prevent shrinking */
    }

    /* Range connectors */
    .rp-day.range-start {
        border-radius: 50% 0 0 50% !important;
    }

    .rp-day.range-end {
        border-radius: 0 50% 50% 0 !important;
    }

    /* For in-range days, we want them to look connected.
       Since we justify-center, there might be gaps.
       To make them look like a bar, we can't use gaps + center.
       We must use width: 100% for inrange items?
       
       Actually, standard design: Circles for start/end. Range is just highlighted slots.
       If we want a continuous bar, we need the slot to be full width.
       
       Let's try a compromise: keep them as circles/squares with gaps. It looks cleaner than a broken bar.
       If user wants a connected bar, we need negative margins or width 100%.
       
       Let's stick to nicely spaced circles for now as it's safe and "proportions" was the user's issue.
    */
    .rp-day.inrange {
        border-radius: 0 !important;
        background: rgba(93, 64, 55, 0.15) !important;
        width: 100% !important;
        /* Fill the slot */
        height: 40px !important;
    }

    /* Override for Start/End to ensure they stay circular on top of the range strip if needed,
       but here the class replaces styling. */
    /* Footer Buttons in Picker */
    .rp-footer {
        margin-top: 24px !important;
        padding-top: 16px !important;
        border-top: 1px solid #f5f5f5 !important;
    }

    .rp-footer button {
        height: 44px !important;
        font-size: 15px !important;
        padding: 0 20px !important;
    }

    /* Animation */
    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0%);
            opacity: 1;
        }
    }
}