/*
 * DPI Responsive Styles
 * Handles different device pixel ratios and ensures proper scaling
 * across low DPI, high DPI, and various screen sizes
 */

/* ===== Base DPI Settings ===== */
:root {
    /* Base font size for rem calculations */
    --base-font-size: 16px;
    
    /* Minimum touch target size for accessibility */
    --min-touch-target: 44px;
    
    /* Safe area insets for notched devices */
    --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);
}

/* ===== HTML Root Font Scaling ===== */
html {
    /* Use a fluid font size that scales with viewport */
    font-size: clamp(14px, calc(14px + 0.25vw), 18px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ===== Low DPI Devices (older phones, low-res screens) ===== */
@media screen and (-webkit-max-device-pixel-ratio: 1.5),
       screen and (max-resolution: 144dpi) {
    html {
        font-size: clamp(13px, calc(13px + 0.2vw), 16px);
    }
    
    .header, .app-header {
        min-height: 50px !important;
    }
    
    .bottom-nav {
        min-height: 60px !important;
        padding-bottom: var(--safe-area-bottom) !important;
    }
    
    /* Ensure buttons and inputs are large enough to tap */
    button, input, select, textarea, a {
        min-height: var(--min-touch-target);
    }
    
    /* Smaller icons and text for low DPI */
    .header-icon-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    .nav-btn i {
        font-size: 18px !important;
    }
    
    .nav-btn span {
        font-size: 9px !important;
    }
}

/* ===== Medium DPI Devices (most modern phones) ===== */
@media screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.5),
       screen and (min-resolution: 144dpi) and (max-resolution: 240dpi) {
    html {
        font-size: clamp(14px, calc(14px + 0.25vw), 17px);
    }
}

/* ===== High DPI Devices (retina, high-res phones) ===== */
@media screen and (-webkit-min-device-pixel-ratio: 2.5),
       screen and (min-resolution: 240dpi) {
    html {
        font-size: clamp(15px, calc(15px + 0.3vw), 18px);
    }
    
    /* Ensure crisp borders on high DPI */
    .header, .bottom-nav, .category-card, .cat-card-v2, .booking-card {
        border-width: 0.5px;
    }
}

/* ===== Very Small Screens (< 320px width) ===== */
@media screen and (max-width: 319px) {
    html {
        font-size: 12px !important;
    }
    
    body {
        min-width: 280px;
        overflow-x: auto;
    }
    
    .header-content, .app-header {
        padding: 0 8px !important;
    }
    
    .container {
        padding: 0 8px !important;
    }
    
    .category-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .dual-cards-row {
        flex-direction: column !important;
    }
    
    .cat-card-mini {
        width: 100% !important;
    }
    
    /* Reduce font sizes for very small screens */
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 14px !important; }
    h4 { font-size: 13px !important; }
    
    .promo-slider {
        height: 160px !important;
    }
    
    .promo-text h3 {
        font-size: 16px !important;
    }
    
    .promo-text p {
        font-size: 11px !important;
    }
}

/* ===== Small Screens (320px - 375px) ===== */
@media screen and (min-width: 320px) and (max-width: 374px) {
    html {
        font-size: 13px;
    }
    
    .header-content, .app-header {
        padding: 0 10px !important;
    }
    
    .container {
        padding: 0 10px !important;
    }
    
    .header-left h1 {
        font-size: 18px !important;
    }
    
    .promo-slider {
        height: 180px !important;
    }
    
    .slide {
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }
    
    .notification-dropdown {
        width: 280px !important;
        right: -10px !important;
    }
}

/* ===== Medium Screens (375px - 414px) - iPhone 6/7/8/X size ===== */
@media screen and (min-width: 375px) and (max-width: 413px) {
    html {
        font-size: 14px;
    }
    
    .notification-dropdown {
        width: 320px !important;
        right: -5px !important;
    }
}

/* ===== Large Phones (414px - 480px) - iPhone Plus/Max ===== */
@media screen and (min-width: 414px) and (max-width: 479px) {
    html {
        font-size: 15px;
    }
}

/* ===== Tablet Portrait (480px - 768px) ===== */
@media screen and (min-width: 480px) and (max-width: 767px) {
    html {
        font-size: 16px;
    }
    
    .container {
        max-width: 720px;
        margin: 0 auto;
    }
    
    .category-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .dual-cards-row {
        gap: 12px !important;
    }
}

/* ===== Tablet Landscape & Desktop (768px+) ===== */
@media screen and (min-width: 768px) {
    html {
        font-size: 16px;
    }
    
    .container {
        max-width: 1200px;
        padding: 0 24px !important;
    }
    
    .bottom-nav {
        max-width: 768px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 20px 20px 0 0;
    }
    
    .notification-dropdown {
        width: 380px !important;
    }
}

/* ===== Landscape Mode Adjustments ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .header, .app-header {
        height: auto !important;
        min-height: 48px !important;
        padding-top: var(--safe-area-top) !important;
    }
    
    .bottom-nav {
        height: 50px !important;
    }
    
    .promo-slider {
        height: 150px !important;
    }
    
    body {
        padding-bottom: 60px !important;
    }
}

/* ===== Safe Area Padding for Notched Devices ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    .header, .app-header {
        padding-top: calc(var(--safe-area-top) + 8px);
    }
    
    .bottom-nav {
        padding-bottom: var(--safe-area-bottom);
        height: calc(70px + var(--safe-area-bottom));
    }
    
    body {
        padding-bottom: calc(80px + var(--safe-area-bottom));
    }
    
    .container {
        padding-left: max(16px, var(--safe-area-left));
        padding-right: max(16px, var(--safe-area-right));
    }
}

/* ===== Prevent Content Overflow ===== */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ===== Ensure Minimum Touch Targets ===== */
button:not(.no-min-height),
a.btn,
input[type="button"],
input[type="submit"],
.nav-btn,
.header-icon-btn {
    min-height: 44px;
    min-width: 44px;
}

/* ===== Text Scaling Prevention for Critical UI ===== */
.header-info h1,
.nav-btn span,
.promo-badge,
.notification-badge {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* ===== Flexbox Gap Fallback for Older Browsers ===== */
@supports not (gap: 10px) {
    .header-actions > * + *,
    .header-right > * + * {
        margin-left: 8px;
    }
    
    .bottom-nav > * + * {
        margin-left: calc(100% / 5);
    }
}

/* ===== Print Styles (Bonus) ===== */
@media print {
    .header, .bottom-nav, .promo-slider {
        display: none !important;
    }
    
    body {
        padding: 0 !important;
        font-size: 12pt !important;
    }
}

/* ===== Reduced Motion for Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Forced Colors Mode (High Contrast) ===== */
@media (forced-colors: active) {
    .header, .bottom-nav {
        border: 2px solid CanvasText;
    }
    
    button, a {
        border: 1px solid ButtonText;
    }
}