/**
 * vision_mobile.css — أساس جوال موحّد لـ Vision (لا يغيّر Desktop)
 * يُحمَّل في كل الصفحات عبر vision_ui_assets.php أو vision_mobile_assets.php
 */

/* ── أساس آمن (Desktop + Mobile) ── */
html {
    -webkit-text-size-adjust: 100%;
    width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

img, video, svg {
    max-width: 100%;
    height: auto;
}

/* ── حاويات وجداول ── */
@media (max-width: 768px) {
    .page-wrap,
    .container,
    .la-client-wrap,
    .la-st-support-wrap,
    .la-cs-main,
    .la-shell,
    .la-main,
    .la-outer-wrap,
    .au-wrap,
    .auth-shell,
    .auth-wrap,
    .main-grid,
    .main-col,
    .side-col,
    .card,
    .cust-card,
    .la-card,
    .panel,
    .cs-panel,
    .dataTables_wrapper,
    .tbl-wrap,
    table.dataTable {
        max-width: 100%;
    }

    .tbl-wrap,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.dataTable,
    table.cust-dt,
    table.tbl {
        width: 100% !important;
    }

    /* DataTables — فلتر وبحث */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100%;
        text-align: start;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        max-width: none;
        display: block;
        margin-top: 6px;
        margin-inline-start: 0 !important;
    }

    .dataTables_wrapper .dt-top {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dataTables_wrapper .dt-bot {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    /* ── Staff navigation ── */
    .vs-staff-shell {
        margin-inline: 0;
        border-radius: 12px;
    }

    .vs-staff-hub {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 8px 10px;
    }

    .vs-staff-hub a {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 11px;
    }

    .vs-staff-body {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
        gap: 10px;
    }

    .vs-staff-title-block {
        min-width: 0;
    }

    .vs-staff-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .vs-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* ── LA shell (مستودعات / ملصقات) ── */
    .la-with-staff-hub .vs-staff-shell--compact {
        margin: 8px 8px 0;
    }

    .la-main,
    .la-wh-cn-main {
        padding: 14px 12px 28px !important;
    }

    .la-topbar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }

    .la-topbar h1 {
        font-size: 18px;
    }

    .la-topbar-actions {
        width: 100%;
    }

    .la-topbar-actions .la-btn {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    .la-sidebar {
        position: relative;
        height: auto;
    }

    .la-nav {
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .la-wh-ops-layout {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .la-wh-ops-sidebar {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .la-wh-sidebar-card {
        width: 100%;
        min-width: 0;
    }

    .la-sla-donut-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .la-wh-scan-row.la-scan-layout,
    .la-scan-layout {
        grid-template-columns: 1fr !important;
    }

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

    .la-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .la-tab {
        flex: 0 0 auto;
        min-width: 88px;
    }

    .la-wh-table-wrap,
    .la-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Customer dashboard ── */
    .page-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 12px 28px !important;
        margin: 0 auto !important;
    }

    .main-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .main-col,
    .side-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Ops workspace (admin) ── */
    .vos-ws {
        grid-template-columns: 1fr !important;
    }

    .vos-ws-ctx {
        position: static !important;
        order: -1;
        width: 100% !important;
    }

    /* ── CS dashboard (inline classes) ── */
    body .container {
        max-width: 100%;
        width: 100%;
        padding: 0 12px 24px;
        margin: 0 auto;
    }

    body .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }

    body .topbar-right {
        flex-wrap: wrap;
        width: 100%;
    }

    body .stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    body .tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 4px;
    }

    body .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    body .search-bar {
        flex-direction: column;
        align-items: stretch;
    }

    body .search-bar input,
    body .search-bar select {
        width: 100%;
        min-width: 0;
    }

    body .panel {
        padding: 14px;
        overflow-x: auto;
    }

    /* ── Super admin layout ── */
    .vision-exec-dashboard .layout {
        flex-direction: column;
    }

    .vision-exec-dashboard .main {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .vision-exec-dashboard .sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100% !important;
        max-width: 100%;
        border-inline-start: none !important;
        border-bottom: 1px solid var(--border, #e2e8f0);
    }

    .main {
        max-width: 100% !important;
        width: 100% !important;
        padding: 16px 12px 28px !important;
    }

    .exec-topbar,
    .exec-grid {
        flex-direction: column;
    }

    /* ── VOS / ops grids ── */
    .vos-kpi-grid,
    .vos-intel,
    .vos-ws,
    .ops-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .vos-ws-ctx {
        order: -1;
    }

    /* ── Support tickets ── */
    .la-st-support-wrap .vos-ws {
        grid-template-columns: 1fr !important;
    }

    .la-st-support-wrap {
        padding: 0 12px 28px;
    }

    /* ── CS LA tabs ── */
    .cs-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .cs-tab-btn {
        flex: 0 0 auto;
        min-width: 120px;
    }

    .la-cs-main {
        padding: 14px 12px 28px !important;
    }

    /* ── Admin orders / tickets common ── */
    .ao-wrap,
    .tk-page-wrap {
        padding: 12px !important;
    }

    /* ── Auth (تكميل auth_ui.css) ── */
    .auth-main {
        padding-inline: 12px;
    }

    .auth-card {
        margin-inline: 0;
    }

    /* ── صفحات staff بـ padding على body ── */
    body.vision-body-pad {
        padding: 12px !important;
    }

    body.vision-body-pad .container {
        padding: 18px 16px !important;
    }

    body.vision-body-pad .header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body.vision-body-pad .top-buttons {
        flex-wrap: wrap;
        width: 100%;
    }

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

    /* ── مركز العمليات ── */
    .ops-command-bar {
        flex-direction: column;
        gap: 10px;
    }

    .smart-search-wrap,
    .smart-search-input {
        width: 100%;
        max-width: none;
    }

    .smart-alerts-scroll {
        flex-direction: column;
        align-items: stretch;
    }

    .smart-alert {
        min-width: 0;
        max-width: none;
    }

    .tabs-nav,
    .vos-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .la-ops-wrap,
    .la-tickets-wrap,
    .la-exec-wrap {
        padding: 0 12px 28px;
    }

    .ad-wrap {
        padding: 0 12px 28px !important;
        margin: 12px auto !important;
    }

    /* ── Dispatch / manifests ── */
    .wh-dispatch-grid {
        grid-template-columns: 1fr !important;
    }

    .wh-dispatch-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .wh-dispatch-scan-row {
        flex-direction: column;
    }

    .wh-dispatch-scan-row input {
        min-width: 0;
        width: 100%;
    }

    .wh-dispatch-scan-row button {
        width: 100%;
    }

    /* ── Super admin KPI ── */
    .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    table.dataTable,
    table.cust-dt,
    table.tbl,
    table.la-wh-table {
        min-width: 0 !important;
    }

    /* ── حقول — منع تكبير iOS ── */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    body .stats {
        grid-template-columns: 1fr;
    }

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

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

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

    .la-topbar-actions .la-btn {
        flex: 1 1 100%;
    }

    .vs-staff-hub-brand {
        display: none;
    }
}