/**
 * Cross-Browser, Cross-Device & Orientation Compatibility
 * Ensures consistent behavior across all browsers, devices, and orientations.
 */

/* ============================================
   DYNAMIC VIEWPORT HEIGHT FIX
   Mobile browsers (Safari, Chrome) have dynamic address bars
   that make 100vh taller than the visible area.
   ============================================ */

/* Use dvh where supported, fallback to 100vh */
:root {
    --vh-full: 100vh;
    --vh-full: 100dvh;
}

/* ============================================
   SAFE AREA INSETS (iPhone X+, notched devices)
   ============================================ */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
}

/* Apply safe area padding to the body */
body {
    padding-top: var(--safe-area-top);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* Sidebar respects safe area on left */
#sidebar {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    height: var(--vh-full);
}

/* Content area respects safe areas */
#content {
    min-height: var(--vh-full);
}

/* Footer respects bottom safe area for home indicator */
footer.text-center {
    padding-bottom: calc(0.75rem + var(--safe-area-bottom)) !important;
}

/* PWA offline banner respects top safe area */
#pwa-offline-banner {
    padding-top: calc(0.5rem + var(--safe-area-top));
}

/* ============================================
   WEBKIT/SAFARI SPECIFIC FIXES
   ============================================ */

/* Smooth momentum scrolling on iOS */
.table-responsive,
.ai-chatbot-messages,
.dropdown-menu,
.list-group,
.modal-body {
    -webkit-overflow-scrolling: touch;
}

/* Remove tap highlight on touchscreens */
a,
button,
input,
select,
textarea,
.btn,
.nav-link,
.dropdown-item,
.quick-action-btn,
.sidebar-nav-item {
    -webkit-tap-highlight-color: transparent;
}

/* Fix for Safari flexbox gap support */
@supports not (gap: 1rem) {
    .quick-actions > * {
        margin-right: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    .quick-actions > *:last-child {
        margin-right: 0;
    }
    .d-flex.gap-2 > * {
        margin-right: 0.5rem;
    }
    .d-flex.gap-2 > *:last-child {
        margin-right: 0;
    }
    .d-flex.gap-3 > * {
        margin-right: 1rem;
    }
    .d-flex.gap-3 > *:last-child {
        margin-right: 0;
    }
}

/* Prevent iOS text size adjust after orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix Safari input styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Restore select dropdown arrow after appearance reset */
select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* ============================================
   FIREFOX SPECIFIC FIXES
   ============================================ */

/* Firefox scrollbar styling (chatbot, tables, dropdowns) */
.ai-chatbot-messages,
.table-responsive,
.dropdown-menu,
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* ============================================
   OVERSCROLL BEHAVIOR
   Prevents pull-to-refresh and overscroll bounce on mobile
   ============================================ */
html {
    overscroll-behavior: none;
}

body {
    overscroll-behavior-y: contain;
}

/* Allow normal scrolling within scrollable containers */
.ai-chatbot-messages,
.table-responsive,
.modal-body {
    overscroll-behavior: contain;
}

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

/* Prevent accidental double-tap zoom on interactive elements */
.btn,
.nav-link,
.dropdown-item,
.quick-action-btn,
.sidebar-nav-item,
a,
button {
    touch-action: manipulation;
}

/* Ensure proper touch target sizing (WCAG 2.5.5) */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 38px;
        min-width: 38px;
    }

    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    /* Larger touch targets for sidebar links */
    #sidebar ul li a {
        min-height: 48px;
    }
}

/* ============================================
   PREFERS-REDUCED-MOTION
   Respect user's motion preferences
   ============================================ */
@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;
    }

    .stat-card:hover,
    .card:hover,
    .quick-action-btn:hover,
    .btn-medical-primary:hover {
        transform: none !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION - MOBILE
   Phones in landscape need adjusted layouts
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    /* Reduce navbar padding in landscape */
    .navbar {
        padding: 6px 12px;
        margin-bottom: 10px;
    }

    /* Sidebar takes less height, scrollable */
    #sidebar {
        overflow-y: auto;
    }

    /* Reduce welcome header in landscape */
    .welcome-header {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .welcome-header h1 {
        font-size: 1.15rem;
    }

    /* Stats grid: 2 columns in landscape mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stat-card {
        padding: var(--spacing-sm);
    }

    .stat-card .stat-value {
        font-size: 1.25rem;
    }

    /* Quick actions: scroll horizontally */
    .quick-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-xs);
    }

    .quick-action-btn {
        flex-shrink: 0;
        width: auto;
    }

    /* Reduce spacing on dashboard cards */
    .dashboard-card {
        margin-bottom: var(--spacing-sm);
    }

    .dashboard-card .card-body {
        padding: var(--spacing-sm);
    }

    /* Footer compact */
    footer.text-center {
        padding: 0.5rem 0 !important;
    }

    /* Reduce form spacing */
    .form-group {
        margin-bottom: var(--spacing-sm);
    }
}

/* ============================================
   LANDSCAPE ORIENTATION - TABLET
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Stats grid: 4 columns when space allows */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Give content area full width benefit */
    .container-fluid.px-4 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ============================================
   PORTRAIT ORIENTATION - TABLET
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Stats grid: 2 columns in portrait */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   CHATBOT - CROSS-BROWSER & ORIENTATION FIXES
   ============================================ */

/* Landscape mobile: make chatbot more compact */
@media (max-width: 767px) and (orientation: landscape) {
    .ai-chatbot-window {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50vw;
        height: var(--vh-full);
        max-height: var(--vh-full);
        border-radius: 12px 0 0 12px;
    }

    .ai-chatbot-widget {
        bottom: 8px;
        right: 8px;
    }

    .ai-chatbot-toggle {
        width: 44px;
        height: 44px;
    }

    .ai-chatbot-header {
        padding: 8px 12px;
    }

    .ai-chatbot-messages {
        padding: 8px;
    }

    .ai-chatbot-input-container {
        padding: 8px;
        padding-bottom: calc(8px + var(--safe-area-bottom));
    }
}

/* Ensure chatbot input doesn't trigger iOS zoom */
.ai-chatbot-input,
.ai-chatbot-settings-select,
.ai-chatbot-settings-input {
    font-size: max(16px, 1em);
}

/* Chatbot safe area support on full-screen mode */
.ai-chatbot-window-fullscreen {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* ============================================
   PWA BANNER FIXES
   ============================================ */

/* Install prompt: safe area and landscape */
@media (max-width: 767px) and (orientation: landscape) {
    #pwa-install-prompt {
        flex-direction: row;
        bottom: var(--safe-area-bottom, 0.5rem);
        max-width: 90%;
    }

    #pwa-update-banner {
        bottom: calc(0.5rem + var(--safe-area-bottom));
        right: calc(0.5rem + var(--safe-area-right));
    }
}

/* ============================================
   TABLE RESPONSIVE FIXES
   ============================================ */

/* Ensure tables scroll horizontally on all devices */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Scroll hint shadow for horizontal overflow */
    background:
        linear-gradient(to right, white 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.1), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.1), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Landscape mobile: make DataTables controls stack properly */
@media (max-width: 767px) and (orientation: landscape) {
    .dataTables_wrapper .row:first-child {
        flex-direction: column;
        gap: 0.5rem;
    }

    .dataTables_length,
    .dataTables_filter {
        text-align: left !important;
    }

    .dataTables_filter input {
        width: 100% !important;
    }
}

/* ============================================
   FORM CONTROLS - CROSS-BROWSER
   ============================================ */

/* Consistent focus rings across browsers */
:focus-visible {
    outline: 2px solid var(--medical-primary, #1a5276);
    outline-offset: 2px;
}

/* Remove Firefox inner focus ring on buttons */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Date/time input consistency */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    min-height: 38px;
    line-height: 1.5;
}

/* ============================================
   PRINT STYLES - CROSS-BROWSER
   ============================================ */
@media print {
    /* Ensure backgrounds print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}

/* ============================================
   HIGH-DPI / RETINA DISPLAY ADJUSTMENTS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Thinner borders on retina to avoid thick appearance */
    .card,
    .dashboard-card,
    .stat-card {
        border-width: 0.5px;
    }

    .medical-table thead th {
        border-bottom-width: 1px;
    }
}

/* ============================================
   DARK MODE SUPPORT (prefers-color-scheme)
   Future-proofing: applied only when system prefers dark
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Scroll shadow indicators adapt to dark backgrounds */
    .table-responsive {
        background:
            linear-gradient(to right, var(--medical-dark, #2c3e50) 30%, rgba(44,62,80,0)),
            linear-gradient(to right, rgba(44,62,80,0), var(--medical-dark, #2c3e50) 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(255,255,255,.1), rgba(255,255,255,0)),
            radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,.1), rgba(255,255,255,0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* ============================================
   IE11/EDGE LEGACY FALLBACKS (GRID)
   ============================================ */
@supports not (display: grid) {
    .stats-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .stats-grid > * {
        flex: 1 1 240px;
        margin: 0.5rem;
    }
}

/* ============================================
   MOBILE LANDSCAPE - SIDEBAR BEHAVIOR
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    /* On very short viewports (phone landscape), make sidebar scrollable */
    #sidebar {
        overflow-y: auto;
        overflow-x: hidden;
    }

    #sidebar ul.components {
        padding: 10px 0;
    }

    #sidebar ul li a {
        padding: 10px 20px;
    }

    #sidebar .sidebar-header {
        padding: 10px;
    }

    /* Compact navbar */
    .navbar {
        padding: 5px 10px;
        margin-bottom: 8px;
    }

    /* Reduce vertical spacing globally */
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .mt-4 {
        margin-top: 0.75rem !important;
    }

    .py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}