/**
 * LRN Mobile Enhancements
 * Comprehensive mobile-friendly styles for the admin portal
 * Loaded after all other CSS to override desktop defaults
 */

/* ==========================================================================
   GLOBAL MOBILE FOUNDATIONS
   ========================================================================== */

/* Ensure smooth scrolling and prevent horizontal overflow */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   TABLET BREAKPOINT (max-width: 992px)
   ========================================================================== */

@media (max-width: 992px) {
    /* Slightly tighter card padding */
    .card-body,
    .lrn-card .card-body {
        padding: var(--lrn-spacing-lg);
    }

    /* Stack page header actions */
    .page-header-modern .page-title-row {
        flex-direction: column;
        gap: var(--lrn-spacing-md);
    }

    .page-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   MOBILE BREAKPOINT (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- TOUCH TARGETS ---
       Apple recommends 44px minimum touch targets.
       Ensure all interactive elements meet this. */

    .btn,
    button,
    .lrn-btn,
    .nav-link,
    .lrn-nav-link,
    .dropdown-item,
    select,
    .form-select {
        min-height: 44px;
    }

    /* Inline small buttons (action buttons in tables) */
    .btn-sm,
    .lrn-btn-sm {
        min-height: 40px;
        min-width: 40px;
        padding: 0.5rem 0.75rem;
    }

    /* --- TYPOGRAPHY ---
       Scale down headings, increase body readability */

    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    h4, .h4 { font-size: 1.05rem; }

    body {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    /* --- ADMIN HEADER ---
       Make the old-style .admin-header work on mobile */

    .admin-header .row {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .admin-header .col-md-4 {
        flex: none;
        max-width: 100%;
        text-align: center !important;
    }

    .admin-header .col-md-4:last-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        align-items: center;
    }

    .admin-header h3 {
        font-size: 1.1rem;
        margin: 0.25rem 0;
    }

    .admin-header .nav-admin select {
        max-width: 200px;
        font-size: 14px;
    }

    .admin-header .nav-admin {
        margin-right: 0 !important;
    }

    /* --- MODERN ADMIN HEADER (lrn-admin-header) ---
       Already has good mobile styles; enhance further */

    .lrn-admin-header .lrn-logo-image img {
        max-width: 60%;
    }

    /* Hamburger menu toggle - bigger touch target */
    .lrn-hamburger-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }

    /* --- SIDEBAR / NAVIGATION ---
       Sidebar already slides in; improve touch-friendliness */

    .lrn-side-nav .lrn-nav-link {
        padding: 0.75rem 1.25rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.95rem;
    }

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

    /* Sidebar toggle button - bigger on mobile */
    .lrn-side-nav-toggle {
        width: 44px;
        height: 44px;
    }

    /* --- MAIN CONTENT AREA --- */

    .lrn-main-content,
    .lrn-content-wrapper,
    #main-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* --- PAGE HEADERS --- */

    .lrn-page-header {
        padding: 0.75rem 0;
    }

    .lrn-page-header h1 {
        font-size: 1.4rem;
    }

    /* --- FORMS ---
       Prevent iOS zoom (16px min), bigger touch targets */

    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="time"],
    input[type="datetime-local"],
    textarea,
    select,
    .form-control,
    .form-select,
    .lrn-input,
    .lrn-select {
        font-size: 16px !important; /* Prevents iOS auto-zoom */
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    .form-label,
    .lrn-form-label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    /* Stack form rows on mobile */
    .form-row,
    .lrn-form-row,
    .lrn-form-grid {
        flex-direction: column;
        grid-template-columns: 1fr !important;
    }

    .form-group,
    .lrn-form-group {
        margin-bottom: 1rem;
    }

    /* --- TABLES ---
       Responsive table approach: horizontal scroll + priority columns */

    .table-wrapper,
    .table-responsive,
    .stations-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }

    /* Hint that table scrolls horizontally */
    .table-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, var(--lrn-bg-primary, rgba(0,0,0,0.05)));
        pointer-events: none;
        z-index: 1;
        opacity: 0.5;
    }

    .table-wrapper {
        position: relative;
    }

    table,
    .lrn-table,
    .stations-table {
        font-size: 0.85rem;
    }

    table th,
    table td,
    .lrn-table th,
    .lrn-table td {
        padding: 0.6rem 0.5rem;
        white-space: nowrap;
    }

    /* Action buttons in table rows - horizontal icon-only */
    table .action-buttons,
    table .btn-group {
        display: flex;
        gap: 4px;
        flex-wrap: nowrap;
    }

    /* Table action buttons: icon-only on mobile */
    table .action-buttons .btn .btn-label,
    table .btn-group .btn span:not(.sr-only) {
        display: none;
    }

    /* --- CARDS --- */

    .card,
    .lrn-card {
        margin-bottom: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }

    /* Card grids go single column */
    .dashboard-grid,
    .card-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    /* --- MODALS ---
       Full-width on mobile, slide up from bottom */

    .modal-content,
    .lrn-modal-content {
        width: 95% !important;
        max-width: none;
        margin: 0.5rem auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .lrn-modal,
    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content,
    .lrn-modal-content {
        border-radius: 1rem 1rem 0 0;
        margin: 0;
        width: 100% !important;
        max-height: 92vh;
        animation: slideUpModal 0.3s ease-out;
    }

    @keyframes slideUpModal {
        from {
            transform: translateY(100%);
            opacity: 0.8;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Modal large - same treatment on mobile */
    .modal-large .modal-content,
    .modal-content.modal-large,
    .lrn-modal-lg .lrn-modal-content {
        width: 100% !important;
        max-width: none;
    }

    /* Modal header/footer spacing */
    .modal-header,
    .lrn-modal-header {
        padding: 1rem;
        position: sticky;
        top: 0;
        z-index: 1;
        background: inherit;
    }

    .modal-body,
    .lrn-modal-body {
        padding: 1rem;
    }

    .modal-footer,
    .lrn-modal-footer {
        padding: 1rem;
        position: sticky;
        bottom: 0;
        background: inherit;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer .btn,
    .lrn-modal-footer .btn {
        flex: 1;
        min-width: 0;
    }

    /* --- BADGES & PILLS ---
       Slightly bigger for mobile readability */

    .badge,
    .badge-modern,
    .badge-pill {
        padding: 0.35em 0.6em;
        font-size: 0.75rem;
    }

    /* --- ALERTS --- */

    .alert,
    .alert-modern {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    /* --- DETAILS GRIDS --- */

    .details-grid,
    .info-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- FILTER / SEARCH BARS ---
       Stack on mobile */

    .filter-bar,
    .controls-bar,
    .stations-controls,
    .notification-controls {
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter-bar > *,
    .controls-bar > * {
        width: 100%;
    }

    .search-section {
        max-width: none;
        width: 100%;
    }

    .search-section input {
        width: 100%;
    }

    .filter-section {
        width: 100%;
        flex-wrap: wrap;
    }

    .filter-select {
        flex: 1;
        min-width: 0;
    }

    /* --- TABS --- */

    .nav-tabs,
    .lrn-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar,
    .lrn-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link,
    .lrn-tabs .lrn-tab {
        flex-shrink: 0;
        padding: 0.75rem 1rem;
    }

    /* --- FOOTER --- */

    .lrn-footer .container {
        padding: 0.75rem;
    }

    .lrn-footer div[style*="display: flex"] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    /* --- SPACING TIGHTENING --- */

    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* --- DROPDOWNS --- */

    .dropdown-menu {
        min-width: 200px;
    }

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

    /* --- HIDE NON-ESSENTIAL ON MOBILE --- */

    /* Background animations waste battery on mobile */
    .login-background .wave {
        animation-play-state: paused;
    }

    /* ==========================================================================
       ADMIN PAGE-SPECIFIC MOBILE FIXES
       Catches inline styles and page-specific layouts across all admin pages
       ========================================================================== */

    /* --- UNIVERSAL MODAL FIX ---
       Many pages use inline max-width on modals (500px, 600px, 700px, 1200px).
       Force ALL modals to be responsive on mobile regardless of inline styles. */

    .modal-content,
    .lrn-modal-content,
    .modal .modal-content,
    [class*="modal"] > .modal-content,
    div[style*="max-width"] .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 0.5rem auto;
    }

    /* Modal-sm, modal-medium, modal-large, modal-xlarge - all same on mobile */
    .modal-sm .modal-content,
    .modal-medium .modal-content,
    .modal-large .modal-content,
    .modal-xlarge .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
    }

    /* Catch inline style max-width on modal-content divs */
    .modal-content[style*="max-width"],
    .modal-content[style*="width:"] {
        max-width: 95vw !important;
        width: 95vw !important;
    }

    /* --- ADMIN LANDING PAGE --- */

    /* Priority counter cards */
    .priority-counters,
    .priority-counter,
    [class*="priority"] {
        min-width: 0 !important;
    }

    /* Grid-4, grid-3 stat layouts */
    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Nightly build task rows */
    .nightly-task-row {
        flex-wrap: wrap;
    }

    .nightly-task-right {
        flex-basis: 100%;
        padding-left: 2.5rem;
        margin-top: 0.25rem;
    }

    .nightly-task-time {
        font-size: 0.75rem !important;
    }

    /* --- ACCOUNTING PAGE --- */

    .detail-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* --- ANALYTICS PAGE --- */

    .analytics-charts,
    [class*="analytics"] [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* --- LIBRARY PAGE --- */

    .library-controls,
    [class*="library"] [style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .library-controls .search-section {
        max-width: none !important;
        width: 100% !important;
    }

    .track-details,
    [class*="track-details"] {
        grid-template-columns: 1fr !important;
    }

    .pagination-controls {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* --- NOTIFICATION PAGE --- */

    .formats-checkboxes,
    [class*="formats-checkbox"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- SHOW FILLS PAGE --- */

    .fills-stats,
    [class*="fills-stats"] {
        flex-wrap: wrap !important;
    }

    .fills-stats .stat-card,
    .fills-stats > div {
        flex: 1 1 calc(50% - 0.5rem) !important;
        min-width: 0 !important;
    }

    /* --- SHOW PREP PAGE --- */

    .prep-controls {
        grid-template-columns: 1fr !important;
    }

    .prep-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    }

    .slot-info {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* --- CLIENTS PAGE --- */

    /* Fixed-width search/filter inputs */
    [style*="width: 300px"],
    [style*="width: 250px"],
    [style*="width:300px"],
    [style*="width:250px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    [style*="width: 150px"],
    [style*="width:150px"] {
        width: 100% !important;
    }

    /* Folder mapping grids */
    [style*="grid-template-columns:auto 1fr auto auto"],
    [style*="grid-template-columns: auto 1fr auto auto"] {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* --- SUPPORT PAGE --- */

    /* Table column fixed widths - let them be auto */
    .support-table th[style*="width:"],
    .support-table td[style*="width:"] {
        width: auto !important;
    }

    /* --- VOICE TALENT PAGE --- */

    /* form-row children stack on mobile */
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .form-row > .form-group,
    .form-row > div {
        width: 100% !important;
        flex: none !important;
    }

    /* --- TALENT GROUPS PAGE --- */

    .groups-grid {
        grid-template-columns: 1fr !important;
    }

    .group-card-stats {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    /* --- RESEND / SHOW CARDS --- */

    .show-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .controls-bar {
        flex-direction: column !important;
    }

    .controls-bar > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* --- OAUTH CLIENTS PAGE --- */
    /* Already handled by universal modal fix above */

    /* --- LOG ACTIONS / GENERIC GRIDS --- */

    /* Any 2-column grid in inline styles */
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* --- GENERIC: any inline flex container that should wrap on mobile --- */

    /* stat-row, stats-row, stat-cards patterns */
    [class*="stat-row"],
    [class*="stats-row"],
    [class*="stat-cards"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Any inline flex with gap > 1rem that might overflow */
    [style*="display: flex"][style*="gap: 2rem"],
    [style*="display: flex"][style*="gap: 1.5rem"],
    [style*="display:flex"][style*="gap:2rem"],
    [style*="display:flex"][style*="gap:1.5rem"] {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    /* Remove min-width constraints that prevent wrapping */
    [style*="min-width: 160px"],
    [style*="min-width:160px"],
    [style*="min-width: 200px"],
    [style*="min-width:200px"],
    [style*="min-width: 250px"],
    [style*="min-width:250px"],
    [style*="min-width: 350px"],
    [style*="min-width:350px"] {
        min-width: 0 !important;
    }

    /* Card icon header layout (used across many admin cards) */
    .card-icon-header {
        flex-wrap: wrap;
    }

    /* Card header actions */
    .card-header-modern {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Small phone overrides for grid-4 */
@media (max-width: 480px) {
    .grid-4,
    .grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   SMALL PHONE BREAKPOINT (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {

    /* Even tighter spacing */
    .lrn-main-content,
    .lrn-content-wrapper,
    #main-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Page title */
    h1, .h1 { font-size: 1.3rem; }
    h2, .h2 { font-size: 1.15rem; }

    /* Cards even tighter */
    .card-body,
    .lrn-card .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.6rem 0.75rem;
    }

    /* Buttons stack full-width in tight spaces */
    .page-actions {
        flex-direction: column;
    }

    .page-actions .btn,
    .page-actions .lrn-btn {
        width: 100%;
    }

    /* View-as dropdown full width */
    .admin-header .nav-admin select {
        max-width: 100%;
        width: 100%;
    }

    /* Table cells even tighter */
    table th,
    table td {
        padding: 0.4rem 0.35rem;
        font-size: 0.8rem;
    }

    /* Modal takes full screen on very small phones */
    .modal-content,
    .lrn-modal-content {
        max-height: 95vh;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    /* Multi-column stat layouts go single */
    .priority-counters,
    .stat-row,
    .status-grid {
        flex-direction: column;
    }

    .priority-item {
        min-width: 100%;
    }
}

/* ==========================================================================
   LANDSCAPE PHONE SPECIFIC
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce header height in landscape */
    .lrn-admin-header {
        height: 50px;
        min-height: 50px;
    }

    .lrn-side-nav {
        top: 50px;
        height: calc(100vh - 50px);
    }

    .lrn-main-with-sidenav {
        padding-top: calc(50px + var(--lrn-spacing-sm));
    }

    /* Modal height constrained */
    .modal-content,
    .lrn-modal-content {
        max-height: 85vh;
    }
}

/* ==========================================================================
   TOUCH DEVICE ENHANCEMENTS
   ========================================================================== */

/* Detect touch devices via hover capability */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects that confuse touch users */
    .card:hover,
    .lrn-card:hover {
        transform: none;
    }

    .btn-primary:hover,
    .btn:hover {
        transform: none;
    }

    /* Bigger touch targets for links in content */
    a {
        padding: 0.1rem 0;
    }

    /* Add active states instead of hover */
    .btn:active,
    .lrn-btn:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    .card:active,
    .lrn-card:active {
        transform: scale(0.99);
    }

    /* Tap highlight for iOS */
    a, button, .btn, select, input {
        -webkit-tap-highlight-color: rgba(74, 158, 255, 0.15);
    }

    /* Prevent long-press context menus on interactive elements */
    .btn, button {
        -webkit-touch-callout: none;
    }
}

/* ==========================================================================
   iOS SAFE AREA SUPPORT
   ========================================================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    /* Account for iPhone notch/home indicator */
    .lrn-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .modal-footer,
    .lrn-modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    /* Fixed bottom elements need safe area */
    .lrn-admin-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* ==========================================================================
   PRINT OVERRIDE - Undo mobile styles for print
   ========================================================================== */

@media print {
    /* Reset mobile-specific styles for printing */
    table th, table td {
        padding: 0.5rem;
        font-size: 0.85rem;
        white-space: normal;
    }

    .modal-content {
        width: 100% !important;
        max-height: none;
        border-radius: 0;
    }
}