/**
 * Mobile Theme Enhancements for RTL/LTR and Dark Mode
 * Ensures mobile devices display correctly with new theme system
 */

@media (max-width: 991px) {
    /* Theme-aware mobile styles */
    
    body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }

    /* Mobile header styles */
    header,
    .header-h,
    .dashboard-header {
        background-color: var(--bg-tertiary);
        border-bottom: 1px solid var(--border-color);
    }

    /* Mobile form controls */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    /* Mobile buttons */
    .btn {
        background: var(--primary-color);
        color: var(--text-inverse);
        border-color: var(--primary-color);
        transition: all 0.3s linear;
    }

    .btn:hover {
        background: var(--secondary-color);
        color: var(--text-inverse);
    }

    /* Ensure button spans inherit text color */
    .btn span,
    .btn i {
        color: inherit !important;
    }

    .btn:hover span {
        transform: none !important;
        opacity: 1 !important;
    }

    /* Mobile dropdowns */
    .sub-menu {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    .sub-menu ul li a {
        color: var(--text-primary);
    }

    /* Remove hover background on dropdown items */
    .sub-menu ul li a:hover {
        background-color: transparent;
        color: var(--primary-color);
    }

    /* Profile dropdown */
    .user-h .sub-menu {
        background-color: var(--bg-tertiary);
        border-top: 6px var(--primary-color) solid;
    }

    .user-h .sub-menu ul li a {
        color: var(--text-primary);
        border-bottom-color: var(--border-color);
    }

    .user-h .sub-menu ul li a:hover {
        background-color: transparent;
        color: var(--primary-color);
    }

    /* Mobile sidebar */
    .dashboard-inner .sidebar {
        background-color: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
    }

    html[dir="rtl"] .dashboard-inner .sidebar {
        border-right: none;
        border-left: 1px solid var(--border-color);
    }

    /* Mobile dashboard content */
    /* .dashboard-content, */
    .dashboard-inner {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }

    /* Mobile cards */
    .card, .box, .dash-block {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    /* Mobile menu positioning RTL */
    html[dir="rtl"] .sub-menu {
        box-shadow: 6px 4px 7px 0px var(--shadow-medium);
        text-align: right;
    }

    html[dir="ltr"] .sub-menu {
        box-shadow: -6px 4px 7px 0px var(--shadow-medium);
        text-align: left;
    }

    /* RTL menu alignment */
    html[dir="rtl"] .menu-right {
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .user-h .drop-menu-h {
        flex-direction: row-reverse;
    }

    /* RTL spacing helpers */
    html[dir="rtl"] input,
    html[dir="rtl"] textarea,
    html[dir="rtl"] select {
        direction: rtl;
        text-align: right;
    }

    html[dir="ltr"] input,
    html[dir="ltr"] textarea,
    html[dir="ltr"] select {
        direction: ltr;
        text-align: left;
    }
}

@media (max-width: 768px) {
    /* Tablet-specific theme adjustments */
    
    .dashboard-content {
        padding: 15px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .btn {
        width: 100%;
    }

    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"] {
        width: 100%;
    }

    /* Tablet sidebar adjustments */
    .dashboard-inner .sidebar {
        background-color: var(--bg-secondary);
    }

    /* Tablet menu positioning */
    .sub-menu {
        background-color: var(--bg-tertiary);
        position: absolute;
        z-index: 1000;
        min-width: 200px;
    }
}

@media (max-width: 600px) {
    /* Phone-specific theme adjustments */
    
    header,
    .header-h,
    .dashboard-header {
        padding: 10px;
    }

    .dashboard-title h2 {
        font-size: 20px;
    }

    .form-group label {
        font-size: 13px;
    }

    .form-control,
    input,
    textarea,
    select {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 10px;
    }

    .btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Phone form spacing */
    .form-group {
        margin-bottom: 12px;
    }

    /* Phone menu adjustments */
    .user-h .drop-menu-h .details {
        display: none;
    }

    .user-h .drop-menu-h {
        padding: 8px;
        width: auto;
    }

    /* Phone dropdown menu full width */
    .sub-menu {
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw;
        margin: 0;
        border-radius: 0;
    }

    html[dir="rtl"] .sub-menu {
        right: 0;
        left: auto;
    }

    /* Phone sidebar adjustments */
    .dashboard-inner .sidebar {
        width: 100%;
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        z-index: 999;
        transition: left 0.3s ease;
    }

    html[dir="rtl"] .dashboard-inner .sidebar {
        left: auto;
        right: -100%;
    }

    .dashboard-inner .sidebar.show-sidebar {
        left: 0;
    }

    html[dir="rtl"] .dashboard-inner .sidebar.show-sidebar {
        right: 0;
    }

    /* Phone content area adjustments */
    #wrapper {
        width: 100%;
        margin: 0;
    }

    /* Phone modal adjustments */
    .modal-content {
        background-color: var(--bg-tertiary);
        border-color: var(--border-color);
    }

    .modal-header {
        background-color: var(--bg-secondary);
        border-color: var(--border-color);
    }

    /* Phone table adjustments */
    .table {
        font-size: 12px;
    }

    .table th, .table td {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    /* Small phone-specific theme adjustments */
    
    body {
        font-size: 14px;
    }

    .dashboard-title h2 {
        font-size: 18px;
    }

    .form-control,
    input,
    textarea {
        font-size: 14px;
    }

    .btn {
        padding: 10px 15px;
        font-size: 13px;
    }

    .sub-menu {
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Ensure text is readable on RTL */
    html[dir="rtl"] body {
        text-align: right;
    }

    html[dir="ltr"] body {
        text-align: left;
    }
}

/* Ensure theme consistency across all media queries */
@media (prefers-color-scheme: dark) {
    /* Fallback for system dark mode */
    body:not([data-theme]) {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
    }
}

@media (prefers-color-scheme: light) {
    /* Fallback for system light mode */
    body:not([data-theme]) {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

/* Ensure proper touch targets on mobile */
@media (hover: none) and (pointer: coarse) {
    /* Mobile touchscreen optimizations */
    .btn,
    .drop-menu-h,
    a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Remove hover effects on touch devices */
    .btn:hover {
        transform: none;
    }

    .drop-menu-h:hover {
        transform: none;
    }

    a:hover {
        opacity: 0.8;
    }
}

/* Print styles - always use light theme */
@media print {
    body,
    * {
        background-color: white !important;
        color: black !important;
        border-color: black !important;
    }
}