/**
 * PPCL Hotel Web — Mobile-First Responsive Module
 * ─────────────────────────────────────────────────
 * Modular CSS for mobile app-like experience.
 * Loaded inline in shell.php for zero extra requests.
 *
 * Sections:
 *   1. Touch targets & tap sizing
 *   2. Bottom nav app-style
 *   3. Responsive tables
 *   4. Responsive forms
 *   5. Modal mobile adaptation
 *   6. Performance (GPU layers, will-change)
 *   7. Safe areas (notch / home indicator)
 *   8. Pull-to-refresh visual
 *   9. Skeleton loading
 *  10. Responsive typography
 */

/* ═══════════════════════════════════════════════════════════════════
   1. TOUCH TARGETS — min 48px per WCAG 2.5.8 / Material guidelines
   ═══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
    /* All interactive elements get minimum touch target */
    button, .btn, [role="button"],
    a.sidebar-link,
    .menu li > a,
    input[type="checkbox"], input[type="radio"],
    select.form-input {
        min-height: 48px;
        min-width: 48px;
    }

    /* Increase spacing between tappable items */
    .menu li + li { margin-top: 2px; }

    /* Larger form inputs on touch */
    .form-input, .input, .select, .textarea {
        min-height: 48px;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Bigger checkboxes/radios */
    input[type="checkbox"], input[type="radio"] {
        width: 22px;
        height: 22px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   2. BOTTOM NAV — App-style with safe area (custom .btm-nav-custom)
   ═══════════════════════════════════════════════════════════════════ */
.btm-nav-custom .btm-btn:active svg {
    transform: scale(0.9);
}
.btm-nav-custom .btm-btn.btm-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: #1d4ed8;
    border-radius: 0 0 3px 3px;
}
.btm-nav-custom .btm-btn {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════
   3. RESPONSIVE TABLES — horizontal scroll + card view on mobile
   ═══════════════════════════════════════════════════════════════════ */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Card-style table rows on mobile/tablet (<= 1024px) */
@media (max-width: 1024px) {
    .data-table.table-cards thead,
    .table-responsive-cards thead { 
        display: none; 
    }

    .data-table.table-cards tbody tr,
    .table-responsive-cards tbody tr {
        display: block;
        padding: 12px;
        margin-bottom: 8px;
        background: oklch(var(--b1));
        border-radius: 12px;
        border: 1px solid oklch(var(--b3));
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .data-table.table-cards tbody td,
    .table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid oklch(var(--b2));
        font-size: 0.8125rem;
    }

    .data-table.table-cards tbody td:last-child,
    .table-responsive-cards tbody td:last-child {
        border-bottom: none;
    }

    .data-table.table-cards tbody td::before,
    .table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: oklch(var(--bc)/0.6);
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Form inputs inside responsive table cards */
    .table-responsive-cards tbody td select,
    .table-responsive-cards tbody td input,
    .table-responsive-cards tbody td .form-input {
        width: 60% !important;
        min-width: 130px;
        max-width: 65%;
        flex-shrink: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   4. RESPONSIVE FORMS — stack on mobile, grid on tablet & desktop
   ═══════════════════════════════════════════════════════════════════ */
.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

/* Tablet / Small Desktop (>= 481px) */
@media (min-width: 481px) {
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid .col-span-full { grid-column: 1 / -1; }
}

/* Large Desktop (>= 1025px) */
@media (min-width: 1025px) {
    .form-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .form-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Unified Card Component */
.ppcl-card {
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--b3)/0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 769px) {
    .ppcl-card {
        padding: 20px;
        border-radius: 16px;
    }
}

/* Floating labels for compact mobile forms */
.form-floating {
    position: relative;
}

.form-floating .form-input {
    padding-top: 24px;
    padding-bottom: 6px;
}

.form-floating .form-label {
    position: absolute;
    top: 8px;
    left: 14px;
    font-size: 0.75rem;
    color: #9ca3af;
    pointer-events: none;
    transition: all 0.15s;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   5. MODAL — Full-screen on mobile, centered on desktop
   ═══════════════════════════════════════════════════════════════════ */
/* Modal layout is handled via inline styles in each modal for reliability.
   Only animation and DaisyUI overrides remain here. */
@media (max-width: 639px) {
    /* DaisyUI modal adaptation */
    .modal .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        height: auto;
        max-height: 92vh;
        margin-top: auto;
        animation: slideUp 0.25s ease-out;
    }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   6. PERFORMANCE — GPU compositing hints
   ═══════════════════════════════════════════════════════════════════ */
/* will-change removed — permanent GPU layers waste memory on low-end devices.
   DaisyUI drawer already uses transform transitions that auto-promote to GPU. */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   7. SAFE AREAS — iPhone notch, Android gesture bar
   ═══════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
    .navbar {
        padding-top: env(safe-area-inset-top);
    }

    .drawer-side aside {
        padding-top: env(safe-area-inset-top);
    }
}

/* Bottom nav padding — only on mobile where .btm-nav-custom is visible.
   !important required: Tailwind's .p-3/.sm:p-4/.md:p-6 (specificity 0-1-0)
   override this element selector (0-0-1) when loaded async from CDN. */
@media (max-width: 1279px) {
    main {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   9. SKELETON LOADING — content placeholder
   ═══════════════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-card {
    height: 120px;
    border-radius: 12px;
}

/* @keyframes shimmer defined in critical.css */

/* ═══════════════════════════════════════════════════════════════════
   10. RESPONSIVE TYPOGRAPHY — fluid scaling
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .card-title { font-size: 1rem; }
    h1, .text-2xl { font-size: 1.25rem; }
    h2, .text-xl { font-size: 1.1rem; }
    h3, .text-lg { font-size: 1rem; }

    /* Compact padding on mobile */
    .card-body { padding: 16px; }

    /* Stack action buttons */
    .flex.gap-2 > .btn,
    .flex.gap-3 > .btn {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   11. MOBILE SIDEBAR OVERLAY IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
    .drawer-side {
        /* Smooth slide-in */
        transition: visibility 0s linear 0.2s;
    }

    .drawer-toggle:checked ~ .drawer-side {
        transition-delay: 0s;
    }

    .drawer-side aside {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Larger close area */
    .drawer-overlay {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   11b. UTILITIES — scrollbar hiding & UI animations
   ═══════════════════════════════════════════════════════════════════ */

/* Hide scrollbar while keeping scroll functionality */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Slide-in from bottom (test form popup, inline banners) */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-in { animation: slideIn 0.2s ease-out both; }

/* Slide-up from bottom (mobile bottom-sheet modal) */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) both; }

/* Shake (form validation errors) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.4s ease-out; }

/* ═══════════════════════════════════════════════════════════════════
   12. STANDALONE MODE (installed PWA) tweaks
   ═══════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
    /* Hide browser-specific UI hints */
    .pwa-install-prompt { display: none !important; }

    /* Extra top padding for status bar */
    .navbar {
        padding-top: max(env(safe-area-inset-top), 12px);
    }

    /* Prevent browser-native pull-to-refresh in PWA mode */
    html, body { overscroll-behavior-y: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   13. PPCL DATEPICKER / TIMEPICKER — wrapper con botón toggle
       Aplica a x-datepicker y x-timepicker (Alpine directives en app.js)
   ═══════════════════════════════════════════════════════════════════ */

/* Contenedor relativo que abraza el input visible + el botón */
.ppcl-picker-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* El input visible (altInput en date, el propio input en time)
   hereda width del padre y deja espacio al botón a la derecha */
.ppcl-picker-wrap > input {
    flex: 1 1 0%;
    min-width: 0;
    /* Padding extra derecho para que el texto no quede bajo el botón */
    padding-right: 2.25rem !important;
}

/* Botón toggle — posicionado absolutamente dentro del wrapper */
.ppcl-picker-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;          /* 36px — suficiente para el icono */
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: oklch(var(--bc, .373 .034 259.733) / .45);
    transition: color 0.15s ease, opacity 0.15s ease;
    /* Touch target mínimo WCAG 2.5.8 */
    min-height: 44px;
    border-radius: 0 var(--rounded-btn, .5rem) var(--rounded-btn, .5rem) 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    /* z-index sobre el input pero bajo el calendario desplegado */
    z-index: 1;
}

.ppcl-picker-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    pointer-events: none;
    flex-shrink: 0;
}

/* Hover — escritorio */
@media (hover: hover) {
    .ppcl-picker-btn:hover {
        color: oklch(var(--p, .491 .27 292.581) / 1);
    }
}

/* Active — feedback táctil */
.ppcl-picker-btn:active {
    opacity: 0.6;
}

/* Focus-visible accesible (navegación por teclado) */
.ppcl-picker-btn:focus-visible {
    outline: 2px solid oklch(var(--p, .491 .27 292.581) / 0.7);
    outline-offset: -2px;
    border-radius: 0 var(--rounded-btn, .5rem) var(--rounded-btn, .5rem) 0;
}

/* Cuando el input está deshabilitado, ocultar el botón */
.ppcl-picker-wrap > input:disabled ~ .ppcl-picker-btn,
.ppcl-picker-wrap > input[disabled] ~ .ppcl-picker-btn {
    display: none;
}

/* Tamaños adaptados: form-input vs form-input-sm */
.ppcl-picker-wrap > input.form-input-sm {
    padding-right: 2rem !important;
}
.ppcl-picker-wrap > input.form-input-sm ~ .ppcl-picker-btn {
    width: 2rem;
}
.ppcl-picker-wrap > input.form-input-sm ~ .ppcl-picker-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* Touch — agrandar el botón en dispositivos coarse */
@media (pointer: coarse) {
    .ppcl-picker-btn {
        width: 2.75rem;
        min-height: 48px;
    }
    .ppcl-picker-wrap > input {
        padding-right: 2.75rem !important;
    }
    .ppcl-picker-wrap > input.form-input-sm {
        padding-right: 2.5rem !important;
    }
    .ppcl-picker-wrap > input.form-input-sm ~ .ppcl-picker-btn {
        width: 2.5rem;
    }
}