/* ===== GLOBAL MOBILE FIXES - Production Ready ===== */

/* Ensure touch targets are adequate */
button, a, input[type="submit"], input[type="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* Fix for iOS Safari input zoom on focus */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-size: 16px !important;
}

/* Fix overflow on small screens */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Feature/icon list display fixes */
.feature-icon,
.fa, .fas, .far, .fal, .fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fix text size on mobile for headings */
@media (max-width: 480px) {
    h1 { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.2rem, 5vw, 2rem) !important; }
    h3 { font-size: clamp(1rem, 4vw, 1.5rem) !important; }
    
    /* Ensure grids don't overflow */
    [class*="grid"] {
        min-width: 0;
    }
    
    /* Cards don't overflow horizontally */
    .card, .doctor-card, .hospital-card, .appointment-card {
        min-width: 0;
        overflow: hidden;
    }
    
    /* Tables become scrollable */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== RESPONSIVE DESIGN ===== */

/* Breakpoints */
/* 
    sm: 640px   - Mobile
    md: 768px   - Tablet
    lg: 1024px  - Desktop
    xl: 1280px  - Large Desktop
    xxl: 1536px - Extra Large
*/

/* Mobile First Approach */
/* Default styles are for mobile (< 640px) */

/* Small devices (mobile, 640px and up) */
@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-6);
    }
    
    .sm\:hidden {
        display: none !important;
    }
    
    .sm\:block {
        display: block !important;
    }
    
    .sm\:flex {
        display: flex !important;
    }
    
    .sm\:grid {
        display: grid !important;
    }
    
    .sm\:text-sm {
        font-size: 0.875rem;
    }
    
    .sm\:text-base {
        font-size: 1rem;
    }
    
    .sm\:text-lg {
        font-size: 1.125rem;
    }
    
    .sm\:text-xl {
        font-size: 1.25rem;
    }
    
    .sm\:text-2xl {
        font-size: 1.5rem;
    }
    
    .sm\:p-2 {
        padding: var(--space-2);
    }
    
    .sm\:p-4 {
        padding: var(--space-4);
    }
    
    .sm\:p-6 {
        padding: var(--space-6);
    }
    
    .sm\:m-2 {
        margin: var(--space-2);
    }
    
    .sm\:m-4 {
        margin: var(--space-4);
    }
    
    .sm\:gap-2 {
        gap: var(--space-2);
    }
    
    .sm\:gap-4 {
        gap: var(--space-4);
    }
    
    .sm\:gap-6 {
        gap: var(--space-6);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
    
    .md\:block {
        display: block !important;
    }
    
    .md\:flex {
        display: flex !important;
    }
    
    .md\:grid {
        display: grid !important;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .md\:col-span-1 {
        grid-column: span 1;
    }
    
    .md\:col-span-2 {
        grid-column: span 2;
    }
    
    .md\:col-span-3 {
        grid-column: span 3;
    }
    
    .md\:col-span-4 {
        grid-column: span 4;
    }
    
    .md\:flex-row {
        flex-direction: row;
    }
    
    .md\:flex-col {
        flex-direction: column;
    }
    
    .md\:justify-start {
        justify-content: flex-start;
    }
    
    .md\:justify-center {
        justify-content: center;
    }
    
    .md\:justify-end {
        justify-content: flex-end;
    }
    
    .md\:justify-between {
        justify-content: space-between;
    }
    
    .md\:items-start {
        align-items: flex-start;
    }
    
    .md\:items-center {
        align-items: center;
    }
    
    .md\:items-end {
        align-items: flex-end;
    }
    
    .md\:text-center {
        text-align: center;
    }
    
    .md\:text-left {
        text-align: left;
    }
    
    .md\:text-right {
        text-align: right;
    }
    
    .md\:w-auto {
        width: auto;
    }
    
    .md\:w-1\/2 {
        width: 50%;
    }
    
    .md\:w-1\/3 {
        width: 33.333333%;
    }
    
    .md\:w-2\/3 {
        width: 66.666667%;
    }
    
    .md\:w-1\/4 {
        width: 25%;
    }
    
    .md\:w-3\/4 {
        width: 75%;
    }
    
    .md\:w-full {
        width: 100%;
    }
    
    .md\:p-8 {
        padding: var(--space-8);
    }
    
    .md\:px-6 {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
    
    .md\:py-8 {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }
    
    .md\:m-auto {
        margin: auto;
    }
    
    .md\:mt-0 {
        margin-top: 0;
    }
    
    .md\:mb-0 {
        margin-bottom: 0;
    }
    
    /* Navigation for tablets */
    .navbar-toggler {
        display: none;
    }
    
    .navbar-menu {
        display: flex !important;
        position: static;
        background: none;
        box-shadow: none;
        padding: 0;
    }
    
    .nav-dropdown .dropdown-menu {
        position: absolute;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--gray-200);
        background: var(--white);
    }
    
    /* Card layouts for tablets */
    .doctor-card,
    .hospital-card {
        margin-bottom: 0;
    }
    
    /* Form layouts for tablets */
    .form-layout-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .lg\:hidden {
        display: none !important;
    }
    
    .lg\:block {
        display: block !important;
    }
    
    .lg\:flex {
        display: flex !important;
    }
    
    .lg\:grid {
        display: grid !important;
    }
    
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .lg\:col-span-1 {
        grid-column: span 1;
    }
    
    .lg\:col-span-2 {
        grid-column: span 2;
    }
    
    .lg\:col-span-3 {
        grid-column: span 3;
    }
    
    .lg\:col-span-4 {
        grid-column: span 4;
    }
    
    .lg\:col-span-5 {
        grid-column: span 5;
    }
    
    .lg\:col-span-6 {
        grid-column: span 6;
    }
    
    .lg\:w-1\/4 {
        width: 25%;
    }
    
    .lg\:w-1\/3 {
        width: 33.333333%;
    }
    
    .lg\:w-1\/2 {
        width: 50%;
    }
    
    .lg\:w-2\/3 {
        width: 66.666667%;
    }
    
    .lg\:w-3\/4 {
        width: 75%;
    }
    
    .lg\:w-full {
        width: 100%;
    }
    
    .lg\:max-w-sm {
        max-width: 24rem;
    }
    
    .lg\:max-w-md {
        max-width: 28rem;
    }
    
    .lg\:max-w-lg {
        max-width: 32rem;
    }
    
    .lg\:max-w-xl {
        max-width: 36rem;
    }
    
    .lg\:max-w-2xl {
        max-width: 42rem;
    }
    
    .lg\:max-w-3xl {
        max-width: 48rem;
    }
    
    .lg\:max-w-4xl {
        max-width: 56rem;
    }
    
    .lg\:max-w-5xl {
        max-width: 64rem;
    }
    
    .lg\:max-w-6xl {
        max-width: 72rem;
    }
    
    .lg\:max-w-7xl {
        max-width: 80rem;
    }
    
    .lg\:max-w-full {
        max-width: 100%;
    }
    
    .lg\:p-10 {
        padding: var(--space-10);
    }
    
    .lg\:p-12 {
        padding: var(--space-12);
    }
    
    .lg\:px-8 {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
    
    .lg\:py-10 {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }
    
    .lg\:gap-8 {
        gap: var(--space-8);
    }
    
    .lg\:gap-10 {
        gap: var(--space-10);
    }
    
    /* Sidebar layouts for desktop */
    .sidebar-layout {
        grid-template-columns: 250px 1fr;
        gap: var(--space-8);
    }
    
    .sidebar-layout.reverse {
        grid-template-columns: 1fr 250px;
    }
    
    /* Dashboard layouts for desktop */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    /* Calendar layouts for desktop */
    .calendar-layout {
        grid-template-columns: 300px 1fr;
    }
    
    /* Profile layouts for desktop */
    .profile-layout {
        grid-template-columns: 300px 1fr;
    }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .xl\:hidden {
        display: none !important;
    }
    
    .xl\:block {
        display: block !important;
    }
    
    .xl\:flex {
        display: flex !important;
    }
    
    .xl\:grid {
        display: grid !important;
    }
    
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .xl\:grid-cols-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    
    .xl\:grid-cols-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .xl\:grid-cols-12 {
        grid-template-columns: repeat(12, 1fr);
    }
    
    .xl\:col-span-1 {
        grid-column: span 1;
    }
    
    .xl\:col-span-2 {
        grid-column: span 2;
    }
    
    .xl\:col-span-3 {
        grid-column: span 3;
    }
    
    .xl\:col-span-4 {
        grid-column: span 4;
    }
    
    .xl\:col-span-5 {
        grid-column: span 5;
    }
    
    .xl\:col-span-6 {
        grid-column: span 6;
    }
    
    .xl\:col-span-7 {
        grid-column: span 7;
    }
    
    .xl\:col-span-8 {
        grid-column: span 8;
    }
    
    .xl\:col-span-9 {
        grid-column: span 9;
    }
    
    .xl\:col-span-10 {
        grid-column: span 10;
    }
    
    .xl\:col-span-11 {
        grid-column: span 11;
    }
    
    .xl\:col-span-12 {
        grid-column: span 12;
    }
    
    .xl\:max-w-none {
        max-width: none;
    }
    
    .xl\:p-16 {
        padding: var(--space-16);
    }
}

/* Extra extra large devices (1536px and up) */
@media (min-width: 1536px) {
    .xxl\:container {
        max-width: 1536px;
        margin: 0 auto;
    }
    
    .xxl\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .xxl\:grid-cols-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .xxl\:grid-cols-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    
    .xxl\:grid-cols-12 {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print\:block {
        display: block !important;
    }
    
    .print\:hidden {
        display: none !important;
    }
    
    .print\:w-full {
        width: 100% !important;
    }
    
    .print\:p-0 {
        padding: 0 !important;
    }
    
    .print\:m-0 {
        margin: 0 !important;
    }
    
    .print\:text-black {
        color: #000 !important;
    }
    
    .print\:bg-white {
        background: #fff !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    a {
        color: inherit !important;
        text-decoration: none !important;
    }
    
    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
    
    .page-break {
        page-break-before: always;
    }
    
    .avoid-break {
        break-inside: avoid;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary: #0000ff;
        --primary-dark: #0000cc;
        --success: #008000;
        --warning: #ffa500;
        --danger: #ff0000;
    }
    
    .btn {
        border-width: 2px;
    }
    
    .form-control {
        border-width: 2px;
    }
}

/* Reduced Motion */
@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;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        --white: #1a1a1a;
        --gray-50: #2d2d2d;
        --gray-100: #404040;
        --gray-200: #525252;
        --gray-300: #666666;
        --gray-400: #7a7a7a;
        --gray-500: #8d8d8d;
        --gray-600: #a1a1a1;
        --gray-700: #b5b5b5;
        --gray-800: #c9c9c9;
        --gray-900: #dcdcdc;
        
        --primary-light: rgba(37, 99, 235, 0.2);
        --success-light: rgba(16, 185, 129, 0.2);
        --warning-light: rgba(245, 158, 11, 0.2);
        --danger-light: rgba(239, 68, 68, 0.2);
    }
    
    body {
        background-color: var(--white);
        color: var(--gray-900);
    }
    
    .card,
    .doctor-card,
    .hospital-card,
    .appointment-card {
        background: var(--gray-50);
        border-color: var(--gray-200);
    }
    
    .navbar {
        background: var(--gray-50);
        border-bottom-color: var(--gray-200);
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        padding: var(--space-3) var(--space-4);
    }
    
    .form-control {
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    .dropdown-item {
        padding: var(--space-3) var(--space-4);
    }
    
    /* Larger touch targets */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .hover-lift:hover,
    .hover-scale:hover,
    .hover-rotate:hover,
    .hover-glow:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Landscape Mode */
@media (orientation: landscape) and (max-height: 500px) {
    .navbar {
        height: 60px;
    }
    
    .hero-section {
        padding: var(--space-8) 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .modal-body {
        max-height: 50vh;
    }
}

/* Very Small Screens */
@media (max-width: 360px) {
    .container {
        padding: 0 var(--space-3);
    }
    
    .btn {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
    }
    
    .page-title {
        font-size: 1.75rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .doctor-card,
    .hospital-card {
        border-radius: var(--radius-md);
    }
}

/* Fix for iOS Safari 100vh issue */
@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
}

/* Custom Scrollbar for WebKit */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: var(--radius-full);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--gray-400);
        border-radius: var(--radius-full);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--gray-500);
    }
}

/* Firefox Scrollbar */
@supports (scrollbar-color: auto) {
    * {
        scrollbar-color: var(--gray-400) var(--gray-100);
        scrollbar-width: thin;
    }
}
/* ===== PRODUCTION CRITICAL FIXES ===== */

/* Prevent ALL horizontal overflow globally */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* Prevent text overflow on small screens */
h1, h2, h3, h4, h5, h6, p, span, a, li, td, th {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* iOS input zoom prevention - font-size must be >= 16px */
input, select, textarea {
    font-size: max(16px, 1rem) !important;
}
/* But keep label/button text normal */
label, button, .btn, [class*="btn"] {
    font-size: inherit !important;
}

/* Buttons never overflow their container */
button, .btn, [class*="btn"], a[class*="btn"] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tables scroll horizontally instead of overflowing */
.table-responsive, table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Images never overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Card padding reduces on very small screens */
@media (max-width: 380px) {
    .card, .cb, .booking-card, .feat-card, .doctor-card, .hosp-card {
        padding: 0.85rem !important;
    }
    .hero, .page-hero, .hero-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    h1 { font-size: clamp(1.3rem, 7vw, 2rem) !important; }
    h2 { font-size: clamp(1.1rem, 5.5vw, 1.6rem) !important; }
}

/* Safe area for phones with notch */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-toggle, .mob-toggle, .mobile-fab, .mobile-sidebar-toggle {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
}

/* Prevent layout shift - pages that set body bg will override this */
html { background: var(--page-bg, #fff); }