/* ========================================
   RESPONSIVE FRAMEWORK - EMERGENCY FIXES
   Created: October 7, 2025
   Purpose: Prevent layout disappearance and critical breakage on mobile/tablet
   ======================================== */

/* ========================================
   GLOBAL LAYOUT FIXES - CRITICAL
   ======================================== */

/* Prevent layout disappearance */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    width: 100vw !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* ULTRA AGGRESSIVE: Prevent any element from exceeding viewport */
* {
    max-width: 100vw !important;
}

/* Force all elements to stay within bounds */
*:not(html):not(body) {
    max-width: 100% !important;
}

/* Prevent transforms from causing overflow */
* {
    transform-origin: center center !important;
}

/* Prevent absolute/fixed positioning from causing overflow */
[style*="position: absolute"],
[style*="position: fixed"],
.absolute,
.fixed {
    max-width: calc(100vw - 2rem) !important;
    left: 0 !important;
    right: auto !important;
}

/* Container fixes */
.container,
.container-fluid,
[class*="container"] {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Main content area */
main {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: relative !important;
}

/* Navigation fixes */
nav {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* ADDED: Allow badge to overflow vertically */
}

nav .container {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-y: visible !important; /* ADDED: Allow badge to overflow vertically */
}

/* Footer fixes - prevent extra scrolling */
footer {
    margin-top: auto !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Prevent body from extending beyond viewport */
body > * {
    flex-shrink: 0 !important;
    max-width: 100vw !important;
}

/* Filter banner fixes */
#hierarchical-filter-banner,
.enhanced-filter-banner {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: auto !important; /* Was hidden: allow horizontal scroll if needed */
    overflow-y: visible !important;
}

/* Aggressive overflow prevention for all direct children */
body > *,
main > *,
nav > *,
footer > * {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Responsive images */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* CRITICAL: Prevent common overflow culprits */
div, section, article, aside, header, footer, nav, main {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Tables must not exceed viewport */
table {
    max-width: 100% !important;
}

/* Buttons and inputs */
button, input, select, textarea {
    max-width: 100% !important;
}

/* Flex and grid containers */
.flex, .grid, [class*="flex"], [class*="grid"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Specific problematic elements */
.enhanced-filter-container,
.enhanced-filter-controls,
.filter-group,
.tab-container,
.supply-chain-tabs {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* User dropdown and notification fixes */
.enhanced-dropdown-overlay,
#user-dropdown,
#notification-badge {
    max-width: none !important; /* Allow these to position correctly */
}

/* CRITICAL: Notification badge must be on top of everything */
#notification-badge {
    z-index: 2147483647 !important; /* MAXIMUM: Highest possible 32-bit integer z-index */
    position: absolute !important;
    right: -2px !important; /* ADJUSTED: Move slightly right for better visibility */
    top: -8px !important; /* INCREASED: Move further up to be fully visible */
    pointer-events: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    isolation: isolate !important; /* ADDED: Create new stacking context */
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid white !important; /* ADDED: Thinner border to reduce overlap */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; /* ADDED: Strong shadow for visibility */
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    background-color: #ef4444 !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
}

/* Ensure notification button container allows badge to overflow */
#notifications-popup-button {
    position: relative !important;
    overflow: visible !important;
    z-index: auto !important; /* CHANGED: Let badge control z-index */
    isolation: isolate !important; /* ADDED: Create new stacking context */
}

/* Ensure parent containers don't hide the badge */
nav {
    overflow: visible !important;
    position: relative !important;
    z-index: 10000 !important; /* HIGHER than filter banner to keep badge above */
}

header {
    overflow: visible !important;
    position: relative !important;
    z-index: 10000 !important; /* HIGHER than filter banner to keep icons above */
}

nav .container {
    overflow: visible !important;
    position: relative !important;
}

/* Force badge to be on top of all navigation elements */
nav *, header * {
    position: relative !important;
}

#notification-badge {
    position: absolute !important; /* Override the relative from above */
}

/* Ensure dropdowns don't cause overflow */
.dropdown-container {
    max-width: 90vw !important;
}

/* MOBILE DROPDOWN IMPROVEMENTS */
@media (max-width: 767px) {
    .dropdown-container {
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: 280px !important;
        border-radius: 12px !important;
        margin: 0 2.5vw !important;
    }

    .enhanced-dropdown-overlay {
        padding-top: 80px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        justify-content: center !important;
    }

    /* Mobile dropdown header */
    .dropdown-container .py-4 {
        padding: 1rem !important;
    }

    /* Mobile dropdown items */
    .dropdown-container ul li a {
        padding: 0.875rem 1rem !important;
        font-size: 0.9rem !important;
    }

    /* Mobile icon containers */
    .dropdown-container .w-8.h-8 {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* TABLET DROPDOWN IMPROVEMENTS */
@media (min-width: 768px) and (max-width: 1023px) {
    .dropdown-container {
        width: 85vw !important;
        max-width: 400px !important;
        min-width: 300px !important;
    }

    .enhanced-dropdown-overlay {
        padding-top: 70px !important;
        padding-right: 7.5vw !important;
    }
}

/* Prevent user menu from causing overflow */
#user-menu-button {
    position: relative !important;
}

/* ========================================
   GLOBAL FILTER SPACING FIXES
   ======================================== */

/* CRITICAL: Reduce filter spacing on ALL screen sizes */
#hierarchical-filter-banner .filter-container,
#hierarchical-filter-banner .enhanced-filter-container {
    gap: 4px !important; /* Ultra-compact spacing between filters */
}

#hierarchical-filter-banner .enhanced-filter-controls,
#hierarchical-filter-banner .filter-controls {
    gap: 4px !important; /* Ultra-compact spacing between filter controls */
}

#hierarchical-filter-banner .gap-4,
#hierarchical-filter-banner .gap-6 {
    gap: 4px !important; /* Ultra-compact spacing (overrides Tailwind) */
}

/* CRITICAL: Force ALL filter groups to be visible */
#hierarchical-filter-banner .filter-group,
#hierarchical-filter-banner .filter-dropdown-container,
#hierarchical-filter-banner [data-filter-type="franchise"],
#hierarchical-filter-banner [data-filter-type="company"],
#hierarchical-filter-banner [data-filter-type="service_center"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Prevent any hiding of filters */
#hierarchical-filter-banner .hidden,
#hierarchical-filter-banner .collapse,
#hierarchical-filter-banner .collapsed {
    display: block !important;
    visibility: visible !important;
}

/* CRITICAL: Force specific filter containers to be visible */
#franchise-filter-container,
#company-filter-container,
#service-center-filter-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override JavaScript-added hidden class */
#franchise-filter-container.hidden,
#company-filter-container.hidden,
#service-center-filter-container.hidden {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   BREAKPOINT DEFINITIONS
   ======================================== */

/* Mobile: 320px - 767px */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */

/* ========================================
   MODAL EMERGENCY FIXES
   ======================================== */

/* Mobile modal fixes */
@media (max-width: 767px) {
    /* All modals */
    [id*="modal"]:not(.notification-modal),
    [class*="modal"]:not(.notification-modal),
    .modal-container {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }
    
    .modal-content,
    .modal-body {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        overflow-y: auto !important;
    }
    
    /* Modal headers */
    .modal-header {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
    }
    
    /* Modal footers */
    .modal-footer {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .modal-footer button {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }
}

/* Tablet modal adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    [id*="modal"]:not(.notification-modal),
    [class*="modal"]:not(.notification-modal) {
        width: 90vw !important;
        max-width: 700px !important;
    }
}

/* ========================================
   TABLE EMERGENCY FIXES
   ======================================== */

/* Mobile table fixes */
@media (max-width: 767px) {
    /* Make tables scrollable */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ensure table wrapper is scrollable */
    .table-responsive,
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Reduce table font size on mobile */
    table {
        font-size: 0.875rem !important;
    }

    table th,
    table td {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.875rem !important;
    }

    /* Hide non-critical columns on mobile */
    table .hide-mobile {
        display: none !important;
    }
}

/* Tablet table fixes */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Make tables scrollable on tablet */
    .table-responsive,
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Slightly reduce table font size on tablet */
    table {
        font-size: 0.9rem !important;
    }

    table th,
    table td {
        padding: 0.625rem 0.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* ========================================
   NAVIGATION EMERGENCY FIXES
   ======================================== */

/* Mobile, Tablet, and iPad navigation (up to 1279px) */
@media (max-width: 1279px) {
    /* Hide desktop navigation */
    nav .hidden-mobile,
    .nav-desktop,
    nav > div > div.hidden.xl\:flex {
        display: none !important;
    }

    /* Show mobile menu button */
    .mobile-menu-toggle,
    #mobile-menu-toggle {
        display: inline-flex !important;
    }

    /* Mobile menu styling */
    #mobile-menu {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* MOBILE MENU ALIGNMENT FIXES */
    #mobile-menu ul {
        align-items: stretch !important;
    }

    #mobile-menu li {
        display: flex !important;
        align-items: center !important;
    }

    #mobile-menu a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 56px !important; /* Touch-friendly height */
    }

    /* Icon container alignment */
    #mobile-menu .w-10.h-10 {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    /* Fine-tune icon positioning within containers */
    #mobile-menu .w-10.h-10 i {
        transform: translateX(-4px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Text alignment */
    #mobile-menu span {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        line-height: 1.4 !important;
    }

    /* RTL Support for mobile menu */
    [dir="rtl"] #mobile-menu ul li a {
        justify-content: flex-end !important;
    }

    [dir="rtl"] #mobile-menu span {
        text-align: right !important;
    }

    /* RTL Icon positioning adjustments */
    [dir="rtl"] #mobile-menu .w-10.h-10 {
        justify-content: center !important;
    }

    [dir="rtl"] #mobile-menu .w-10.h-10 i {
        transform: translateX(-3px) !important;
    }

    /* HEADER FIX: Ensure header elements stay in line */
    nav .container {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* HEADER FIX: Prevent user menu from wrapping */
    nav .flex.items-center.flex-shrink-0 {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* HEADER FIX: Ensure logo doesn't shrink too much */
    nav a.flex.items-center.flex-shrink-0 {
        flex-shrink: 0 !important;
        min-width: fit-content !important;
    }
}

/* Mobile-specific (up to 767px) */
@media (max-width: 767px) {
    /* Logo sizing on mobile */
    nav img[src*="logo.png"],
    header img[src*="logo.png"] {
        max-height: 3rem !important;
        height: 3rem !important;
    }

    /* HEADER FIX: Mobile spacing and alignment */
    nav .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        gap: 0.5rem !important;
    }

    /* HEADER FIX: Reduce spacing between user menu items on mobile */
    nav .flex.items-center.flex-shrink-0 > div {
        margin-right: 0.25rem !important;
    }

    /* HEADER FIX: Ensure mobile menu button is properly sized */
    #mobile-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
    }

    /* MOBILE MENU SPECIFIC ALIGNMENT */
    #mobile-menu {
        margin: 0.5rem !important;
        border-radius: 12px !important;
    }

    #mobile-menu ul {
        padding: 0.75rem !important;
        gap: 0.25rem !important;
    }

    #mobile-menu li a {
        padding: 0.875rem 1rem !important;
        border-radius: 8px !important;
    }

    /* Mobile icon sizing */
    #mobile-menu .w-10.h-10 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* Mobile text sizing */
    #mobile-menu span {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
    }
}

/* Tablet and iPad navigation - SHOW MOBILE MENU (768px - 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
    nav img[src*="logo.png"],
    header img[src*="logo.png"] {
        max-height: 3.5rem !important;
        height: 3.5rem !important;
    }

    /* TABLET/IPAD FIX: Show mobile menu button */
    #mobile-menu-toggle {
        display: inline-flex !important;
    }

    /* TABLET/IPAD FIX: Hide desktop navigation */
    nav > div > div.hidden.xl\:flex {
        display: none !important;
    }

    /* TABLET/IPAD FIX: Ensure navigation is visible */
    nav .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* HEADER FIX: Tablet spacing and alignment */
    nav .container {
        gap: 1rem !important;
    }

    /* HEADER FIX: Tablet user menu spacing */
    nav .flex.items-center.flex-shrink-0 > div {
        margin-right: 0.5rem !important;
    }

    /* HEADER FIX: Ensure tablet menu button is properly sized */
    #mobile-menu-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0.75rem !important;
    }

    /* TABLET MENU ALIGNMENT IMPROVEMENTS */
    #mobile-menu {
        margin: 0.75rem !important;
        border-radius: 16px !important;
    }

    #mobile-menu ul {
        padding: 1rem !important;
        gap: 0.375rem !important;
    }

    #mobile-menu li a {
        padding: 1rem 1.25rem !important;
        border-radius: 10px !important;
        min-height: 60px !important;
    }

    /* Tablet icon sizing */
    #mobile-menu .w-10.h-10 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        justify-content: center !important;
    }

    /* Tablet icon positioning */
    #mobile-menu .w-10.h-10 i {
        transform: translateX(-5px) !important;
    }

    /* Tablet RTL Icon positioning */
    [dir="rtl"] #mobile-menu .w-10.h-10 {
        justify-content: center !important;
    }

    [dir="rtl"] #mobile-menu .w-10.h-10 i {
        transform: translateX(-4px) !important;
    }

    /* Tablet text sizing */
    #mobile-menu span {
        font-size: 1rem !important;
        font-weight: 500 !important;
    }

    /* TABLET/IPAD FIX: Tab headers should be scrollable */
    .nav-tabs,
    .supply-chain-tabs .nav-tabs,
    .tab-container {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }

    /* TABLET/IPAD FIX: Tab items should not wrap */
    .nav-link,
    .tab-button {
        flex-shrink: 0 !important;
        display: inline-flex !important;
    }

    /* CRITICAL: Show ALL hierarchical filters on tablet/iPad */
    #hierarchical-filter-banner .filter-group,
    #hierarchical-filter-banner .filter-dropdown-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure filter container shows all filters */
    #hierarchical-filter-banner .filter-container,
    #hierarchical-filter-banner .enhanced-filter-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important; /* REDUCED: Closer spacing on tablet/iPad */
    }

    /* Make filters scrollable horizontally if needed */
    #hierarchical-filter-banner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Reduce spacing between filter controls */
    #hierarchical-filter-banner .enhanced-filter-controls,
    #hierarchical-filter-banner .filter-controls {
        gap: 6px !important; /* REDUCED: Closer spacing */
    }
}

/* ========================================
   FORM EMERGENCY FIXES
   ======================================== */

/* Mobile form fixes */
@media (max-width: 767px) {
    /* Stack form fields vertically */
    .form-row,
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Full width inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important; /* Prevent iOS zoom */
    }

    /* Form buttons */
    .form-actions,
    .button-group {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .form-actions button,
    .button-group button {
        width: 100% !important;
    }
}

/* Tablet form fixes */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two columns for form fields on tablet */
    .form-row,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Ensure inputs are properly sized */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important; /* Prevent zoom on focus */
    }
}

/* ========================================
   TOUCH-FRIENDLY TARGETS
   ======================================== */

/* Minimum touch target size: 44x44px */
button, 
a.btn,
.btn,
input[type="button"], 
input[type="submit"],
.clickable {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
}

/* Touch-friendly checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px !important;
    min-height: 20px !important;
}

/* Touch-friendly labels */
label {
    cursor: pointer !important;
    padding: 8px 0 !important;
}

/* ========================================
   GRID LAYOUT FIXES
   ======================================== */

/* Mobile grid fixes */
@media (max-width: 767px) {
    /* Single column on mobile */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr !important;
    }
    
    /* Reduce gap on mobile */
    .gap-6 {
        gap: 1rem !important;
    }
    
    .gap-4 {
        gap: 0.75rem !important;
    }
}

/* Tablet grid fixes */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two columns on tablet */
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* TABLET FIX: Prevent content from sticking to bottom */
    body {
        min-height: 100vh !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    /* TABLET FIX: Ensure main content is visible */
    main {
        flex: 1 1 auto !important;
        position: relative !important;
        z-index: 1 !important;
        overflow-y: auto !important;
    }

    /* TABLET FIX: Filter banner should not overlap content */
    #hierarchical-filter-banner {
        position: relative !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
    }

    /* TABLET FIX: Footer should not create extra space */
    footer {
        flex-shrink: 0 !important;
        margin-top: 0 !important;
    }
}

/* ========================================
   RTL SPECIFIC FIXES
   ======================================== */

/* RTL table scrolling */
[dir="rtl"] .table-responsive,
[dir="rtl"] .overflow-x-auto {
    direction: rtl !important;
}

/* RTL modal alignment */
[dir="rtl"] .modal-container,
[dir="rtl"] .modal-content {
    text-align: right !important;
}

/* RTL form alignment */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right !important;
}

/* ========================================
   CARD LAYOUT FIXES
   ======================================== */

/* Mobile card fixes */
@media (max-width: 767px) {
    .card {
        margin-bottom: 1rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem 1rem !important;
    }
}

/* ========================================
   SIDEBAR FIXES
   ======================================== */

/* Mobile sidebar */
@media (max-width: 1023px) {
    .sidebar,
    .dashboard-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        z-index: 9999 !important;
    }
    
    .sidebar.active,
    .dashboard-sidebar.active {
        transform: translateX(0) !important;
    }
    
    /* RTL sidebar */
    [dir="rtl"] .sidebar,
    [dir="rtl"] .dashboard-sidebar {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
    }
    
    [dir="rtl"] .sidebar.active,
    [dir="rtl"] .dashboard-sidebar.active {
        transform: translateX(0) !important;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 767px) {
    .show-mobile {
        display: block !important;
    }
}

/* Show only on tablet */
.show-tablet {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .show-tablet {
        display: block !important;
    }
}

/* ========================================
   DEBUGGING UTILITIES (Development Only)
   ======================================== */

/* Viewport size indicator - remove in production */
.viewport-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    z-index: 99999;
    pointer-events: none;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    /* Hide navigation and sidebars */
    nav,
    .sidebar,
    .dashboard-sidebar,
    .mobile-menu-toggle {
        display: none !important;
    }
    
    /* Full width for content */
    main,
    .container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove shadows and borders */
    .card,
    .modal {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}