/* =========================================
   تحسينات عامة للموبايل والتابلت
   ========================================= */

/* Admin sidebar - off canvas للموبايل */
@media screen and (max-width: 768px) {
    /* Public header */
    header.main-header {
        flex-direction: column;
        padding: 15px !important;
        gap: 15px;
    }
    .dynamic-nav {
        margin-right: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .nav-item {
        font-size: 13px;
        padding: 6px 10px;
    }

    /* Admin sidebar */
    .sidebar {
        transform: translateX(260px);
        width: 260px !important;
        transition: transform 0.3s ease;
        z-index: 1050;
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar.collapsed {
        transform: translateX(70px);
        width: 70px !important;
    }
    .sidebar.collapsed.open {
        transform: translateX(0);
        width: 260px !important;
    }
    .sidebar.collapsed.open .sidebar-menu span,
    .sidebar.collapsed.open .fa-angle-down {
        display: inline;
    }
    .sidebar.collapsed.open .sidebar-menu a {
        text-align: right;
        padding: 15px 25px;
        justify-content: flex-start;
    }
    .sidebar.collapsed.open .sidebar-menu i {
        font-size: 20px;
        margin-left: 15px;
    }
    .sidebar.open + .sidebar-backdrop {
        display: block;
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1049;
    }

    .main-content {
        margin-right: 0 !important;
        padding: 20px 15px !important;
    }
    .main-content.expanded {
        margin-right: 0 !important;
    }

    /* Admin top-navbar */
    .top-navbar {
        padding: 0 10px;
        height: 60px;
    }
    .top-navbar h2 {
        font-size: 14px !important;
    }
    .user-dropdown-toggle span {
        display: none;
    }

    /* Dashboard */
    .command-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }
    .cmd-btn {
        font-size: 13px;
        padding: 12px 8px;
    }
    .cmd-btn i {
        font-size: 20px;
    }
    .dash-layout {
        grid-template-columns: 1fr !important;
    }
    .radar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .radar-card h2 {
        font-size: 20px;
    }
    .charts-grid {
        grid-template-columns: 1fr !important;
    }
    .tables-grid {
        grid-template-columns: 1fr !important;
    }

    /* Finance dashboard */
    .finance-dashboard {
        grid-template-columns: 1fr !important;
    }
    .stat-details .amount {
        font-size: 22px;
    }

    /* Tables - جعلها قابلة للتمرير */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px !important;
    }
    .styled-table {
        min-width: 600px;
    }
    .modern-table {
        min-width: 600px;
    }
    .styled-table th,
    .styled-table td,
    .modern-table th,
    .modern-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
    .dash-table {
        font-size: 12px;
    }
    .dash-table th,
    .dash-table td {
        padding: 8px;
    }

    /* Filter grid */
    .filter-grid {
        grid-template-columns: 1fr !important;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
    .form-group {
        min-width: 100%;
    }
    .form-box, .form-card, .settings-form {
        padding: 20px 15px;
    }
    .form-row-flex {
        flex-direction: column;
        gap: 10px;
    }

    /* Legal page */
    .legal-grid {
        grid-template-columns: 1fr !important;
    }

    /* Admin page header */
    .admin-page-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    .admin-page-header h1 {
        font-size: 20px;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* Buttons - تحسين حجم اللمس */
    .btn-sm, .btn-control-action, .sq-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-control-action {
        width: 44px !important;
        height: 44px !important;
    }

    /* POS widget */
    .pos-widget {
        padding: 15px;
    }

    /* Action buttons in tables */
    .actions-wrapper {
        gap: 4px;
    }

    /* Car catalog */
    .catalog-grid {
        grid-template-columns: 1fr;
        padding: 20px 15px;
        gap: 20px;
    }
    .car-title {
        font-size: 18px;
    }
    .badge-status {
        font-size: 10px;
        padding: 4px 10px;
        white-space: nowrap;
    }

    /* Car details */
    .details-container {
        grid-template-columns: 1fr !important;
        margin: 20px auto;
        padding: 0 15px;
    }
    .car-title-box {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .price-value {
        font-size: 24px;
    }
    .booking-sidebar {
        position: static !important;
    }

    /* Modal */
    .modal-content {
        padding: 20px 15px;
        margin: 10px;
    }

    /* Login page */
    .login-container {
        padding: 25px 20px !important;
        margin: 0 15px;
    }

    /* Page content */
    .page-content {
        padding: 20px 15px !important;
    }

    /* Font sizes */
    body {
        font-size: 14px;
    }
    .footer-desc {
        font-size: 13px;
    }
    .dash-table {
        font-size: 12px;
    }

    /* Image upload grid */
    .image-upload-grid {
        grid-template-columns: 1fr !important;
    }

    /* Images gallery in view car */
    .images-gallery {
        grid-template-columns: 1fr !important;
    }

    /* Settings section */
    .settings-section {
        padding: 15px !important;
    }

    /* Select2 fix for mobile */
    .select2-container {
        width: 100% !important;
    }

    /* Header logo */
    .header-logo img {
        max-width: 100%;
        height: auto !important;
    }
}