/* ============================================
   GRUPPO ORSO - Capacitor App Overrides (Admin)
   Fix per app nativa iOS/Android
   ============================================ */

/* ============================================
   SAFE AREAS - iPhone notch/Dynamic Island
   ============================================ */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Body safe areas */
body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    overscroll-behavior-y: contain;
    /* Rimosso -webkit-overflow-scrolling: touch - deprecato su Android WebView, causa freeze scroll */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Allow text selection on inputs */
input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/* ============================================
   MOBILE HEADER - Safe area top
   ============================================ */
@media (max-width: 768px) {
    .mobile-header {
        padding-top: calc(var(--space-md) + var(--safe-top));
    }

    /* Sidebar full height with safe areas */
    .sidebar {
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }

    /* Modal bottom sheet */
    .modal-container {
        padding-bottom: var(--safe-bottom);
    }

    /* Status menu bottom sheet */
    .status-menu {
        padding-bottom: var(--safe-bottom);
    }
}

/* Desktop: sidebar safe area */
@media (min-width: 769px) {
    .sidebar {
        padding-top: var(--safe-top);
    }
}

/* ============================================
   TOUCH IMPROVEMENTS
   ============================================ */

/* Remove tap highlight */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Minimum 44px touch targets */
.action-btn,
.mobile-menu-btn,
.nav-item,
.tab-btn,
.btn {
    min-height: 44px;
}

.action-btn {
    min-width: 44px;
}

/* ============================================
   NATIVE-FEEL TOUCH FEEDBACK
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
    }

    .btn:active:not(:disabled) {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .reservation-card:hover {
        box-shadow: var(--shadow-sm);
    }

    .reservation-card:active {
        background: var(--color-surface-hover);
    }

    .nav-item:hover {
        background: none;
    }

    .nav-item:active {
        background: var(--color-border-light);
    }

    .tab-btn:hover {
        background: none;
    }

    .tab-btn:active {
        opacity: 0.7;
    }

    /* Status option bigger for touch */
    .status-option {
        min-height: 48px;
        padding: 16px 20px;
    }
}

/* ============================================
   INPUT FIX - Prevent iOS zoom on focus
   ============================================ */
input, select, textarea {
    font-size: 16px !important;
}

.form-input,
.filter-select,
.search-input,
.dropdown-select {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================
   SCROLL CONTAINERS
   ============================================ */
.view-tabs,
.sala-selector,
.settings-nav,
.menu-categories-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.view-tabs::-webkit-scrollbar,
.sala-selector::-webkit-scrollbar,
.settings-nav::-webkit-scrollbar {
    display: none;
}

/* ============================================
   VIEWPORT HEIGHT FIX
   ============================================ */
.sidebar {
    height: 100dvh;
}

.login-container {
    min-height: 100dvh;
}

/* ============================================
   LANDSCAPE MODE
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-header {
        padding: var(--space-sm) var(--space-lg);
        padding-top: calc(var(--space-sm) + var(--safe-top));
    }

    .reservation-card {
        padding: var(--space-sm) var(--space-md);
    }

    .modal-container {
        max-height: 95vh;
    }
}

/* ============================================
   SMALL SCREENS (iPhone SE)
   ============================================ */
@media (max-width: 374px) {
    .stat-pill {
        padding: 6px 8px;
        font-size: 12px;
    }

    .tab-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .reservation-name {
        font-size: 13px;
    }

    .reservation-time {
        font-size: 0.9rem;
    }
}

/* ============================================
   LOGIN - Safe area padding
   ============================================ */
.login-section {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

/* ============================================
   STANDALONE / APP MODE
   ============================================ */
@media screen and (display-mode: standalone) {
    .modal-container {
        padding-bottom: calc(16px + var(--safe-bottom));
    }
}