/* ========================================
   MOBILE APP LAYOUT - Complete Mobile Fix
   ManageMate Synapse
   ======================================== */

/* Variables */
:root {
    --mobile-header-h: 56px;
    --mobile-nav-h: 70px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========================================
   MOBILE BREAKPOINT (< 1024px)
   ======================================== */
@media (max-width: 1023px) {

    /* ----------------------------------------
       HIDE DESKTOP ELEMENTS
       ---------------------------------------- */
    .app-sidebar,
    #sidebar,
    aside.app-sidebar,
    .sidebar,
    .app-sidebar-overlay,
    #sidebar-overlay,
    .sidebar-backdrop,
    #sidebar-backdrop,
    .mobile-menu-toggle,
    #mobile-menu-toggle,
    .mobile-menu-button,
    button.mobile-menu-button,
    button[data-action="toggle-sidebar"],
    .lg\:hidden.fixed.top-4.left-4,
    .desktop-header,
    header.desktop-header,
    header.bg-white.shadow-sm,
    .app-main > header:first-child,
    .app-content > header:first-child {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ----------------------------------------
       BODY & ROOT LAYOUT
       ---------------------------------------- */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    body {
        padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 24px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* ----------------------------------------
       MAIN CONTAINERS
       ---------------------------------------- */
    .app-container {
        display: block !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .app-main,
    .app-content,
    main,
    .app-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
    }

    /* Main content padding */
    .app-main > .p-4,
    .app-main > .p-6,
    .app-main > div > .p-4,
    .app-main > div > .p-6,
    .app-content > .p-4,
    .app-content > .p-6,
    main > .p-4,
    main > .p-6 {
        padding: 12px !important;
    }

    /* Pages with ml-64 class */
    .ml-64,
    .md\:ml-64 {
        margin-left: 0 !important;
    }

    /* ----------------------------------------
       HEADER (Desktop - to hide)
       ---------------------------------------- */
    /* Hide the desktop header */
    header:not(.mobile-header):not(#mobile-header) {
        display: none !important;
    }

    /* ----------------------------------------
       PAGE TITLES & HEADERS
       ---------------------------------------- */
    .page-header,
    .flex.items-center.justify-between.mb-4,
    .flex.items-center.justify-between.mb-6 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }

    .page-header h1,
    h1.text-2xl,
    h1.text-xl {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    /* ----------------------------------------
       FILTERS & SEARCH SECTIONS
       ---------------------------------------- */
    .app-card,
    section.app-card,
    .bg-white.rounded-lg,
    .dark\:bg-\[\#151B23\].rounded-lg {
        border-radius: var(--radius-lg, 1rem) !important;
        margin: 0 0 12px 0 !important;
        padding: 12px !important;
    }

    /* Filter sections - reduce padding */
    section.mb-6.app-card.p-6,
    .app-card.p-6 {
        padding: 14px !important;
    }

    /* Filter form grids */
    form.grid,
    .grid.grid-cols-1.md\:grid-cols-2,
    .grid.grid-cols-1.lg\:grid-cols-4,
    #ticketsFilterForm {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Filter field containers */
    .filter-field {
        margin-bottom: 0 !important;
    }

    .filter-field label {
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }

    /* Filter toggle button */
    #toggleFilters,
    button[id*="toggle"],
    .collapsible-header {
        padding: 10px 16px !important;
        border-radius: 1.5rem !important; /* 24px - bien arrondi */
    }

    /* Inputs/Fields - Vraiment arrondis comme sur desktop */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="date"],
    input[type="number"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea,
    .form-select,
    .form-input {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px 16px !important;
        border-radius: 1.5rem !important; /* 24px - bien arrondi */
        width: 100% !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }

    /* Select specific - ensure arrow visibility */
    select,
    .form-select {
        padding-right: 40px !important;
        background-position: right 12px center !important;
    }

    /* Buttons in filters - bien arrondis */
    .filter-field button,
    form button[type="submit"],
    form button[type="button"] {
        min-height: 48px !important;
        padding: 12px 20px !important;
        border-radius: 1.5rem !important; /* 24px - bien arrondi */
        width: 100% !important;
    }

    /* Advanced filters collapse */
    #filtersContainer,
    .advanced-filters-collapse {
        padding-top: 12px !important;
    }

    /* Border within filter sections */
    .border-t.border-gray-100,
    .border-t.pt-6 {
        padding-top: 14px !important;
        margin-top: 14px !important;
    }

    /* ----------------------------------------
       AI CHAT FILTERS
       ---------------------------------------- */
    #ai-chat-container {
        margin-bottom: 12px !important;
    }

    .ai-chat-input-wrapper {
        padding: 10px !important;
        border-radius: 1.5rem !important;
    }

    .ai-chat-input {
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 1.5rem !important;
    }

    /* AI Chat messages */
    .ai-chat-messages {
        max-height: 200px !important;
        overflow-y: auto !important;
    }

    .ai-chat-message {
        padding: 10px 12px !important;
        border-radius: 1rem !important;
        font-size: 14px !important;
    }

    /* ----------------------------------------
       MY TICKETS PAGE SPECIFIC
       ---------------------------------------- */
    /* Filter toggle button */
    #toggleFilters {
        min-height: 44px !important;
        padding: 10px 16px !important;
        touch-action: manipulation !important;
    }

    /* Filter form layout */
    #ticketsFilterForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    #ticketsFilterForm .filter-field {
        width: 100% !important;
    }

    /* Filter buttons container */
    #ticketsFilterForm .md\:col-span-2.lg\:col-span-4,
    #ticketsFilterForm > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    #ticketsFilterForm button[type="reset"],
    #ticketsFilterForm button[type="submit"],
    #resetFilters {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 15px !important;
        border-radius: 1.5rem !important;
        order: unset !important;
    }

    #ticketsFilterForm button[type="submit"] {
        order: -1 !important; /* Filtrer button first */
    }

    /* Ticket list header */
    .bg-gradient-to-r.from-blue-50.to-white {
        padding: 14px 16px !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .bg-gradient-to-r.from-blue-50.to-white h3 {
        font-size: 16px !important;
    }

    .bg-gradient-to-r.from-blue-50.to-white #ticket-count {
        font-size: 13px !important;
    }

    /* Ticket list items */
    #ticketsList > div {
        padding: 14px !important;
        margin-bottom: 8px !important;
        border-radius: 1rem !important;
        background: var(--bg-primary, #ffffff) !important;
        border: 1px solid var(--border-primary, #e2e8f0) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    }

    .dark #ticketsList > div {
        background: #151B23 !important;
        border-color: rgba(240, 246, 252, 0.1) !important;
    }

    /* Ticket card layout - stack everything */
    #ticketsList > div > .flex.flex-col.md\:flex-row,
    #ticketsList > div > .flex {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Ticket ID and title */
    #ticketsList > div a.text-brand {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    #ticketsList > div a.text-brand > span:first-child {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 0.5rem !important;
    }

    /* Ticket title text */
    #ticketsList > div .hover-detail-text {
        font-size: 15px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }

    /* Ticket metadata row */
    #ticketsList > div .flex.flex-wrap.items-center.text-sm {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #ticketsList > div .flex.flex-wrap.items-center.text-sm > span {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border-radius: 0.75rem !important;
    }

    /* Badges section - full width */
    #ticketsList > div .flex.flex-col.items-end,
    #ticketsList > div > .flex > .flex-col:last-child {
        width: 100% !important;
        align-items: flex-start !important;
        padding-top: 12px !important;
        margin-top: 4px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .dark #ticketsList > div .flex.flex-col.items-end,
    .dark #ticketsList > div > .flex > .flex-col:last-child {
        border-top-color: rgba(240, 246, 252, 0.08) !important;
    }

    /* Badges row */
    #ticketsList > div .flex.flex-wrap.gap-2 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* Status, priority, type badges */
    #ticketsList .status-badge,
    #ticketsList .priority-badge,
    #ticketsList .type-badge {
        font-size: 11px !important;
        padding: 5px 10px !important;
        min-width: auto !important;
    }

    /* Updated date */
    #ticketsList > div .text-xs.text-gray-500 {
        font-size: 11px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }

    /* Empty state */
    #ticketsList .p-10.text-center {
        padding: 40px 20px !important;
    }

    #ticketsList .p-10.text-center a {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ----------------------------------------
       TICKETS LIST / TABLE
       ---------------------------------------- */
    /* Hide table on mobile, show cards */
    table,
    .table-container table,
    #ticketsTable,
    #interventionsTable {
        display: none !important;
    }

    /* Ticket cards container */
    .tickets-list,
    .interventions-list,
    #ticketsList,
    #interventionsList,
    .ticket-cards-container,
    .divide-y {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 4px 0 !important;
    }

    /* Remove dividers and style as cards */
    .divide-y > div,
    #ticketsList > div,
    #interventionsList > div {
        border: none !important;
        background: var(--bg-primary, #ffffff) !important;
        border-radius: var(--radius-lg, 1rem) !important;
        padding: 16px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid var(--border-primary, #e2e8f0) !important;
        margin-bottom: 0 !important;
    }

    .dark .divide-y > div,
    .dark #ticketsList > div,
    .dark #interventionsList > div {
        background: #151B23 !important;
        border-color: rgba(240, 246, 252, 0.1) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    }

    /* Ticket card inner layout - Stack vertically */
    #ticketsList > div > .flex,
    #ticketsList > div .flex-col.md\:flex-row,
    #ticketsList > div .flex.flex-col.md\:flex-row,
    #interventionsList > div > .flex,
    #interventionsList > div .flex-col.md\:flex-row {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    /* Ticket title section */
    #ticketsList > div a.text-brand,
    #interventionsList > div a.text-brand {
        font-size: 15px !important;
        line-height: 1.5 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Ticket/Intervention ID badge */
    #ticketsList > div a.text-brand span:first-child,
    #interventionsList > div a.text-brand span:first-child {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: var(--radius-sm, 0.5rem) !important;
        flex-shrink: 0 !important;
        font-weight: 600 !important;
    }

    /* Title text */
    #ticketsList > div .hover-detail-text,
    #interventionsList > div .hover-detail-text {
        word-break: break-word !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Meta info row */
    #ticketsList > div .flex.flex-wrap.items-center.text-sm,
    #interventionsList > div .flex.flex-wrap.items-center.text-sm {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    #ticketsList > div .flex.flex-wrap.items-center.text-sm > span,
    #interventionsList > div .flex.flex-wrap.items-center.text-sm > span {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }

    /* Right side badges section - make full width */
    #ticketsList > div .flex.flex-col.items-end,
    #interventionsList > div .flex.flex-col.items-end,
    #ticketsList > div > .flex > .flex-col:last-child,
    #interventionsList > div > .flex > .flex-col:last-child {
        align-items: flex-start !important;
        width: 100% !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding-top: 12px !important;
        margin-top: 4px !important;
    }

    .dark #ticketsList > div .flex.flex-col.items-end,
    .dark #interventionsList > div .flex.flex-col.items-end,
    .dark #ticketsList > div > .flex > .flex-col:last-child,
    .dark #interventionsList > div > .flex > .flex-col:last-child {
        border-top-color: rgba(240, 246, 252, 0.08) !important;
    }

    /* Badges row */
    #ticketsList > div .flex.flex-wrap.gap-2,
    #interventionsList > div .flex.flex-wrap.gap-2 {
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* Updated date */
    #ticketsList > div .text-xs.text-gray-500,
    #interventionsList > div .text-xs.text-gray-500 {
        font-size: 11px !important;
        margin-top: 8px !important;
        opacity: 0.7 !important;
    }

    /* Ticket card */
    .ticket-card,
    .intervention-card,
    .list-item-card {
        background: var(--bg-primary, #ffffff) !important;
        border-radius: var(--radius-lg, 1rem) !important;
        padding: 14px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid var(--border-primary, #e2e8f0) !important;
    }

    .dark .ticket-card,
    .dark .intervention-card,
    .dark .list-item-card {
        background: #151B23 !important;
        border-color: rgba(240, 246, 252, 0.1) !important;
    }

    /* ----------------------------------------
       BADGES
       ---------------------------------------- */
    .status-badge,
    .priority-badge,
    .type-badge,
    span[class*="badge"] {
        font-size: 11px !important;
        padding: 4px 10px !important;
        min-width: auto !important;
        margin: 2px !important;
    }

    /* Badges container */
    .flex.flex-wrap.gap-2,
    .badges-container {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    /* ----------------------------------------
       PAGINATION
       ---------------------------------------- */
    .pagination,
    nav[aria-label="pagination"],
    .flex.items-center.justify-center.gap-2 {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 0 !important;
    }

    .pagination button,
    .pagination a,
    .page-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 1.5rem !important; /* 24px - bien arrondi */
    }

    /* Pagination controls at bottom - Stack vertically */
    .flex.items-center.justify-between.mt-6 {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    /* Per page selection - full row */
    .flex.items-center.gap-4:has(#ticketsPerPageGroup),
    .flex.items-center.gap-4:has(#interventionsPerPageGroup) {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Tickets/Interventions per page buttons */
    #ticketsPerPageGroup,
    #interventionsPerPageGroup {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    #ticketsPerPageGroup button,
    #interventionsPerPageGroup button,
    .tickets-per-page-btn,
    .interventions-per-page-btn {
        flex: 0 1 auto !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 1rem !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Pagination info */
    #paginationInfo,
    #interventionsPaginationInfo {
        text-align: center !important;
        font-size: 13px !important;
        padding: 10px 0 !important;
        order: -1 !important; /* Move to top */
        background: var(--bg-tertiary, #f8fafc) !important;
        border-radius: 1rem !important;
        margin-bottom: 8px !important;
    }

    .dark #paginationInfo,
    .dark #interventionsPaginationInfo {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* Prev/Next buttons - full width row */
    .flex.items-center.gap-2:has(#prevPage),
    .flex.items-center.gap-2:has(#prevInterventionPage) {
        display: flex !important;
        width: 100% !important;
        gap: 10px !important;
    }

    #prevPage,
    #nextPage,
    #prevInterventionPage,
    #nextInterventionPage {
        flex: 1 !important;
        min-height: 52px !important;
        border-radius: 1.5rem !important; /* 24px - bien arrondi */
        font-weight: 600 !important;
        font-size: 15px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Disabled state for pagination buttons */
    #prevPage:disabled,
    #nextPage:disabled,
    #prevInterventionPage:disabled,
    #nextInterventionPage:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }

    /* ----------------------------------------
       STATS CARDS / WIDGETS
       ---------------------------------------- */
    .stats-grid,
    .grid.grid-cols-2.md\:grid-cols-4,
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card,
    .stats-card,
    .widget-card {
        padding: 12px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    .stat-card h3,
    .stat-value {
        font-size: 1.5rem !important;
    }

    .stat-card p,
    .stat-label {
        font-size: 0.75rem !important;
    }

    /* ----------------------------------------
       MODALS & DIALOGS
       ---------------------------------------- */
    .modal,
    .dialog,
    [role="dialog"],
    .swal2-popup {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin: 12px !important;
        border-radius: var(--radius-xl, 1.25rem) !important;
        max-height: 85vh !important;
    }

    .modal-content,
    .dialog-content {
        padding: 16px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    /* ----------------------------------------
       ACTION BUTTONS
       ---------------------------------------- */
    .action-buttons,
    .flex.gap-2,
    .flex.gap-3 {
        flex-wrap: wrap !important;
    }

    .btn,
    button.btn,
    a.btn,
    .action-btn,
    .app-btn,
    .app-btn-primary,
    .app-btn-secondary {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 1.5rem !important; /* 24px - bien arrondi */
    }

    /* Primary actions full width on mobile */
    .btn-primary,
    .app-btn-primary,
    button[type="submit"].btn,
    .action-btn-primary {
        width: 100% !important;
    }

    /* ----------------------------------------
       TABS
       ---------------------------------------- */
    .tabs,
    [role="tablist"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
    }

    .tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tab,
    [role="tab"] {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        border-radius: 1.5rem !important; /* 24px - bien arrondi */
    }

    /* ----------------------------------------
       TABLES (when shown)
       ---------------------------------------- */
    .table-responsive,
    .overflow-x-auto:not(.widget-content .overflow-x-auto) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -12px !important;
        padding: 0 12px !important;
    }

    table.min-w-full {
        min-width: 600px !important;
    }

    th, td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    /* ----------------------------------------
       FORMS (Create/Edit pages)
       ---------------------------------------- */
    .form-container,
    .create-form,
    .edit-form {
        padding: 12px !important;
    }

    .form-group,
    .field-group {
        margin-bottom: 14px !important;
    }

    label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    /* Rich text editors */
    .tox-tinymce,
    .editor-container {
        min-height: 200px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    /* File upload */
    .file-upload,
    .dropzone {
        padding: 20px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    /* ----------------------------------------
       TICKET/INTERVENTION DETAILS
       ---------------------------------------- */
    /* Main 3-column grid to single column */
    .grid.grid-cols-1.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Info rows */
    .info-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .info-label,
    .info-value {
        font-size: 14px !important;
    }

    /* Content cards */
    .content-card {
        padding: 14px !important;
        border-radius: var(--radius-lg, 1rem) !important;
        margin-bottom: 12px !important;
    }

    /* Ticket header area */
    .ticket-detail-header,
    .ticket-header,
    .intervention-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    /* Tech action buttons - make them stack and full width */
    .tech-action-btn,
    .quick-action-btn,
    .brand-button {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    /* Grid for tech action buttons */
    .grid.grid-cols-1.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Info grids */
    .ticket-info-grid,
    .detail-grid,
    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Timeline and comments */
    .ticket-timeline,
    .comments-section,
    .timeline-container {
        padding: 12px !important;
    }

    .comment-item,
    .timeline-item {
        padding: 12px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    /* Chat bubbles */
    .chat-bubble-left,
    .chat-bubble-right,
    .tech-chat-bubble-left,
    .tech-chat-bubble-right {
        max-width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* Section headers */
    .section-header {
        font-size: 1rem !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    /* File attachments */
    .attachment-item,
    .file-attachment {
        padding: 10px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    /* SLA/Support info cards */
    .level-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* ----------------------------------------
       KNOWLEDGE BASE
       ---------------------------------------- */
    .kb-article,
    .article-card {
        padding: 14px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    .kb-content,
    .article-content {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* ----------------------------------------
       NOTIFICATIONS LIST
       ---------------------------------------- */
    .notification-item {
        padding: 12px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    .notification-content {
        font-size: 14px !important;
    }

    /* ----------------------------------------
       USER PROFILE
       ---------------------------------------- */
    .profile-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
    }

    .profile-info {
        text-align: center !important;
    }

    /* ----------------------------------------
       CALENDAR (Interventions)
       ---------------------------------------- */
    .fc,
    .fullcalendar,
    #calendar,
    #interventions-calendar {
        font-size: 12px !important;
    }

    .fc-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    .fc-toolbar-title {
        font-size: 1rem !important;
        order: -1 !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .fc-button {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 40px !important;
        border-radius: 0.75rem !important;
    }

    .fc-button-group {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* Calendar day cells */
    .fc-daygrid-day-frame {
        min-height: 60px !important;
        padding: 2px !important;
    }

    .fc-daygrid-day-number {
        padding: 4px !important;
        font-size: 12px !important;
    }

    /* Calendar events */
    .fc-event {
        padding: 2px 4px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
    }

    .fc-event-title {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Hide time on mobile calendar */
    .fc-event-time {
        display: none !important;
    }

    /* Calendar scrollgrid */
    .fc-scrollgrid {
        border-radius: 0.75rem !important;
    }

    /* ----------------------------------------
       MY INTERVENTIONS PAGE SPECIFIC
       ---------------------------------------- */
    /* View toggle buttons */
    .view-toggle-btn {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        touch-action: manipulation !important;
    }

    /* Intervention list section header */
    #interventions-list + .bg-gradient-to-r,
    section:has(#interventions-list) .bg-gradient-to-r {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
    }

    /* View toggle container */
    .flex.items-center.bg-gray-100:has(.view-toggle-btn) {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Intervention count badge */
    #interventionsCount {
        font-size: 13px !important;
    }

    /* Intervention list items */
    #interventions-list > div:not(#loading-state):not(#error-state):not(#empty-state) {
        padding: 14px !important;
        margin-bottom: 8px !important;
        border-radius: 1rem !important;
        background: var(--bg-primary, #ffffff) !important;
        border: 1px solid var(--border-primary, #e2e8f0) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    }

    .dark #interventions-list > div:not(#loading-state):not(#error-state):not(#empty-state) {
        background: #151B23 !important;
        border-color: rgba(240, 246, 252, 0.1) !important;
    }

    /* Intervention card layout - stack */
    #interventions-list > div > .flex.flex-col.md\:flex-row,
    #interventions-list > div > .flex {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Intervention filter form */
    #interventionsFilterForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    #interventionsFilterForm .filter-field {
        width: 100% !important;
    }

    #interventionsFilterForm .md\:col-span-2.lg\:col-span-4,
    #interventionsFilterForm > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    #interventionsFilterForm button[type="reset"],
    #interventionsFilterForm button[type="submit"] {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 15px !important;
        border-radius: 1.5rem !important;
    }

    #interventionsFilterForm button[type="submit"] {
        order: -1 !important;
    }

    /* Calendar view container */
    #calendar-view {
        padding: 8px !important;
    }

    #interventions-calendar {
        min-height: 400px !important;
    }

    /* New intervention button */
    a[href="/create-intervention"] {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }

    /* Page header with button */
    .flex.flex-wrap.items-center.justify-between.mb-6:has(a[href="/create-intervention"]) {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    /* ----------------------------------------
       EMPTY STATES
       ---------------------------------------- */
    .empty-state,
    .no-data {
        padding: 40px 20px !important;
        text-align: center !important;
    }

    .empty-state-icon {
        width: 60px !important;
        height: 60px !important;
    }

    .empty-state-text {
        font-size: 14px !important;
    }

    /* ----------------------------------------
       LOADING STATES
       ---------------------------------------- */
    .loading-overlay,
    #page-transition-loader,
    .ticket-loading-overlay {
        z-index: 50 !important;
    }

    .loading-spinner {
        width: 40px !important;
        height: 40px !important;
    }

    /* ----------------------------------------
       UTILITIES
       ---------------------------------------- */
    /* Hide elements meant for desktop */
    .hidden-mobile,
    .desktop-only,
    .lg\:block:not(.mobile-show) {
        display: none !important;
    }

    /* Show elements meant for mobile */
    .mobile-only,
    .show-mobile {
        display: block !important;
    }

    /* Scrollable containers */
    .scroll-x {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Text truncation */
    .truncate-mobile {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 200px !important;
    }

    /* Full width elements */
    .w-full-mobile {
        width: 100% !important;
    }

    /* ----------------------------------------
       SPECIFIC PAGE FIXES
       ---------------------------------------- */

    /* Dashboard widgets */
    .dashboard-grid,
    .widgets-grid,
    #widgets-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .widget,
    .dashboard-widget {
        padding: 14px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    /* Dashboard period buttons */
    .flex.justify-between.items-center.mb-4,
    .flex.justify-between.items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Period buttons row - scrollable */
    .flex.space-x-2 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 4px 0 !important;
        scrollbar-width: none !important;
    }

    .flex.space-x-2::-webkit-scrollbar {
        display: none !important;
    }

    .period-btn,
    .flex.space-x-2 button {
        flex-shrink: 0 !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    /* AI Assistant section - AvaIntelligence */
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* AI card items */
    .bg-gradient-to-r {
        border-radius: var(--radius-lg, 1rem) !important;
    }

    .bg-gradient-to-r .p-6 {
        padding: 14px !important;
    }

    .bg-gradient-to-r .px-6.py-4 {
        padding: 14px !important;
    }

    /* AI action buttons */
    .bg-gradient-to-r button {
        min-height: 44px !important;
        font-size: 14px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    /* Global stats container */
    #global-stats-container,
    .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Chart containers */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .chart-container {
        height: 200px !important;
        min-height: 180px !important;
    }

    .chart-container.h-64 {
        height: 200px !important;
    }

    /* Intervention cards */
    .intervention-item,
    .intervention-card-content {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Collapsible sections */
    .collapsible-section {
        margin-bottom: 8px !important;
    }

    .collapsible-header {
        padding: 12px !important;
        border-radius: var(--radius-lg, 1rem) !important;
    }

    .collapsible-content {
        padding: 8px !important;
    }

    /* App cards - generic */
    .app-card,
    section.bg-white,
    section.dark\:bg-\[\#151B23\],
    .card,
    .panel {
        border-radius: var(--radius-lg, 1rem) !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    /* Section headers */
    .section-header,
    .card-header,
    .panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    /* Flex containers - stack on mobile */
    .flex.justify-between,
    .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Gap fixes */
    .gap-4 { gap: 10px !important; }
    .gap-6 { gap: 12px !important; }
    .gap-8 { gap: 14px !important; }

    /* Grid fixes */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4,
    .lg\:grid-cols-6 {
        grid-template-columns: 1fr !important;
    }

    /* Button groups */
    .btn-group,
    .button-group,
    .flex.gap-2:has(button),
    .flex.gap-3:has(button) {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-group > button,
    .button-group > button,
    .btn-group > a,
    .button-group > a {
        width: 100% !important;
    }

    /* Icon buttons inline */
    .flex.gap-2:has(.header-icon-btn) {
        flex-direction: row !important;
    }

    /* Dropdown selects */
    select {
        width: 100% !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 40px !important;
    }

    /* Chip/tag lists */
    .chips,
    .tags,
    .flex.flex-wrap {
        gap: 6px !important;
    }

    /* Text sizes */
    .text-2xl { font-size: 1.25rem !important; }
    .text-xl { font-size: 1.125rem !important; }
    .text-lg { font-size: 1rem !important; }

    /* Margin/Padding overrides */
    .p-6 { padding: 12px !important; }
    .p-8 { padding: 14px !important; }
    .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
    .py-6 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .m-6 { margin: 12px !important; }
    .mb-6 { margin-bottom: 12px !important; }
    .mt-6 { margin-top: 12px !important; }

    /* Shadows - lighter on mobile */
    .shadow-lg { box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }
    .shadow-xl { box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important; }

    /* Rounded corners - consistent with design tokens */
    .rounded-lg { border-radius: var(--radius-lg, 1rem) !important; }
    .rounded-xl { border-radius: var(--radius-xl, 1.25rem) !important; }
    .rounded-2xl { border-radius: var(--radius-2xl, 1.5rem) !important; }

    /* Overflow handling */
    .overflow-hidden {
        overflow: hidden !important;
    }

    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Long text truncation */
    .truncate,
    .line-clamp-1 {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Links - larger touch targets */
    a:not(.mobile-nav-item):not(.mobile-drawer-link) {
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Avatar sizes */
    .avatar,
    .user-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .avatar-sm {
        width: 28px !important;
        height: 28px !important;
    }

    .avatar-lg {
        width: 48px !important;
        height: 48px !important;
    }

    /* Icon sizes in buttons */
    button svg,
    a svg,
    .btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Search inputs */
    input[type="search"],
    .search-input {
        padding-left: 40px !important;
    }

    /* Date inputs */
    input[type="date"] {
        min-height: 44px !important;
    }

    /* Textarea */
    textarea {
        min-height: 100px !important;
    }

    /* Code blocks */
    pre, code {
        font-size: 12px !important;
        overflow-x: auto !important;
    }

    /* Tables when necessary */
    .table-scroll {
        overflow-x: auto !important;
        margin: 0 -12px !important;
        padding: 0 12px !important;
    }

    /* Alert boxes */
    .alert,
    [role="alert"] {
        padding: 12px !important;
        border-radius: var(--radius-lg, 1rem) !important;
        font-size: 14px !important;
    }

    /* Tooltips - disable on mobile */
    [data-tooltip],
    .tooltip {
        pointer-events: none !important;
    }

    /* Skeleton loaders */
    .skeleton,
    .anim-pulse {
        border-radius: var(--radius-md, 0.75rem) !important;
    }

    /* ----------------------------------------
       USER SETTINGS PAGE
       ---------------------------------------- */
    /* Profile completion card */
    .app-card.p-8.mb-8 {
        padding: 16px !important;
    }

    .app-card .flex.flex-col.lg\:flex-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Profile completion stats grid */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .grid.grid-cols-2.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Completion circle - center on mobile */
    .app-card .relative:has(svg.w-32) {
        display: flex !important;
        justify-content: center !important;
        margin-top: 16px !important;
    }

    svg.w-32.h-32 {
        width: 100px !important;
        height: 100px !important;
    }

    /* Tab Navigation - scrollable horizontally */
    nav.flex.space-x-8 {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 0 !important;
        padding: 0 12px !important;
    }

    nav.flex.space-x-8::-webkit-scrollbar {
        display: none !important;
    }

    nav.flex.space-x-8 .tab-button,
    .tab-button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin-right: 4px !important;
    }

    .tab-button i,
    .tab-button svg {
        display: none !important; /* Hide icons in tabs on mobile */
    }

    /* Tab content */
    .tab-content {
        padding: 16px !important;
    }

    #profile-tab .grid.grid-cols-1.xl\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Profile picture section */
    .profile-image-preview {
        width: 100px !important;
        height: 100px !important;
    }

    /* Profile form */
    #profileForm,
    .space-y-6 {
        gap: 14px !important;
    }

    .form-group {
        margin-bottom: 14px !important;
    }

    .form-group label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 16px !important;
        font-size: 16px !important;
        border-radius: 1.5rem !important;
        min-height: 48px !important;
    }

    /* Display preferences grid */
    .grid.grid-cols-1.lg\:grid-cols-2.gap-6 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* App cards inside settings */
    .app-card.p-6 {
        padding: 14px !important;
    }

    .app-card .flex.items-start {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .app-card .flex.items-start > i,
    .app-card .flex.items-start > svg {
        margin-right: 0 !important;
    }

    /* Security tab */
    #security-tab .space-y-6 > div {
        padding: 14px !important;
    }

    /* Modal on mobile */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        padding: 20px !important;
        border-radius: 1.5rem !important;
        max-height: 85vh !important;
    }

    /* ----------------------------------------
       DASHBOARD WIDGETS
       ---------------------------------------- */
    #widgets-section {
        padding: 0 !important;
    }

    #widgets-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Widget containers */
    .widget-container {
        border-radius: 1.5rem !important;
        overflow: hidden !important;
    }

    .widget-container.col-span-2 {
        grid-column: span 1 !important; /* Force single column on mobile */
    }

    /* Widget header */
    .widget-header {
        padding: 12px 14px !important;
    }

    .widget-header h3 {
        font-size: 14px !important;
    }

    /* Widget body */
    .widget-body {
        padding: 12px !important;
    }

    /* Widget content - ensure visible when not hidden */
    .widget-content:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Widget table container */
    .widget-content > .overflow-x-auto {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 300px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Widget table */
    .widget-container table {
        font-size: 12px !important;
        width: 100% !important;
        display: table !important;
    }

    .widget-container thead {
        display: table-header-group !important;
    }

    .widget-container tbody {
        display: table-row-group !important;
    }

    .widget-container tr {
        display: table-row !important;
    }

    .widget-container th,
    .widget-container td {
        display: table-cell !important;
        padding: 8px 10px !important;
    }

    .widget-tbody tr {
        cursor: pointer !important;
    }

    .widget-tbody td {
        white-space: nowrap !important;
    }

    /* Widget footer */
    .widget-footer {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Widget stats grid */
    .widget-container .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .widget-container .stats-grid > div {
        padding: 10px !important;
    }

    /* Widget empty state */
    .widget-empty {
        padding: 20px !important;
    }

    /* Custom fields display in dashboard */
    .custom-field-value,
    .field-value {
        font-size: 14px !important;
        word-break: break-word !important;
    }

    .custom-field-label,
    .field-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
}

/* ========================================
   SMALL MOBILE (< 480px)
   ======================================== */
@media (max-width: 479px) {
    /* Even smaller padding */
    .app-main > .p-4,
    .app-main > .p-6,
    .app-content > .p-4,
    .app-content > .p-6 {
        padding: 10px !important;
    }

    /* Single column stats */
    .stats-grid,
    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }

    /* Smaller text */
    h1 {
        font-size: 1.125rem !important;
    }

    h2 {
        font-size: 1rem !important;
    }

    /* Compact badges */
    .status-badge,
    .priority-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    /* Even smaller cards */
    .app-card,
    section.bg-white,
    .card {
        padding: 10px !important;
    }

    /* Smaller buttons */
    .btn,
    button {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Stack all flex items */
    .flex {
        flex-wrap: wrap !important;
    }

    /* Inline flex for small items */
    .inline-flex {
        display: inline-flex !important;
    }
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two column grids */
    .stats-grid,
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    form.grid,
    .filter-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Larger cards */
    .ticket-card,
    .intervention-card {
        padding: 16px !important;
    }

    /* Centered content */
    .app-main > .p-4,
    .app-main > .p-6 {
        padding: 16px !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .mobile-header,
    .mobile-bottom-nav,
    .mobile-fab,
    .mobile-drawer,
    .mobile-search-overlay,
    .mobile-fab-menu {
        display: none !important;
    }

    body {
        padding: 0 !important;
    }
}