/* Comfit ERP — universal mobile responsive rules.
   Loaded by every template + Django admin via <link rel="stylesheet">.
   Targets phones (<=768px) and small tablets (<=900px) where useful.
*/

/* ============================================================
   Phones (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* 1) Body / page padding — give back screen real estate */
    body { padding: 10px !important; font-size: 14px !important; }
    .container, .layout, .page-wide { padding: 14px 16px !important; }

    /* 2) Top bar — wrap content + smaller title */
    .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px !important; }
    .topbar h1 { font-size: 16px !important; }
    .topbar nav { gap: 8px !important; flex-wrap: wrap; }
    .topbar nav a { padding: 6px 10px !important; font-size: 12px !important; }

    /* 3) KPI / summary grids → single column */
    .kpis,
    .summary-strip,
    .charts,
    .admin-modules,
    .reports,
    .type-summary,
    .split { grid-template-columns: 1fr !important; gap: 10px !important; }

    /* 4) KPI card text — slightly smaller */
    .kpi .value, .summary-cell .value, .type-card .value { font-size: 18px !important; }
    .kpi .label, .summary-cell .label, .type-card .label { font-size: 11px !important; }

    /* 5) Tables — horizontal scroll wrapper.
       Any table that overflows shows native horizontal scrolling. */
    .scroll-x, table { display: block !important; max-width: 100% !important;
                       overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    /* Re-establish table semantics inside the scroll area */
    table > thead, table > tbody, table > tfoot { display: table-row-group; }
    table > thead { display: table-header-group; }
    table > tbody > tr, table > thead > tr, table > tfoot > tr { display: table-row; }
    table th, table td { white-space: nowrap; }

    /* 6) Smaller table fonts on mobile */
    table { font-size: 11.5px !important; }
    th, td { padding: 6px 8px !important; }

    /* 7) Page header (h1) — smaller + wrap */
    .page-header { flex-wrap: wrap !important; gap: 8px; }
    .page-header h1 { font-size: 17px !important; }
    h1 { font-size: 18px !important; }
    h2 { font-size: 15px !important; margin-top: 18px !important; }

    /* 8) Sidebars (opening wizard, etc.) → stack above content */
    .sidebar { position: static !important; }

    /* 9) Filter pills + action buttons — wrap nicely */
    .filters, .actions, .toolbar { flex-wrap: wrap !important; gap: 6px !important; }
    .filters a, .btn { font-size: 12px !important; padding: 7px 12px !important; }

    /* 10) Forms — full-width inputs */
    input[type="text"], input[type="number"], input[type="date"],
    input[type="email"], select, textarea {
        width: 100% !important; max-width: 100% !important;
        box-sizing: border-box; font-size: 14px !important;
    }
    .form-row { flex-wrap: wrap !important; gap: 8px !important; }
    .form-row label { width: 100% !important; }

    /* 11) Visual / image cards — single column */
    .product-grid, .visual-grid, .item-grid { grid-template-columns: 1fr !important; }

    /* 12) Reports section tiles */
    .report-tile { flex-direction: row !important; align-items: center !important; gap: 10px; }
    .report-tile .icon { font-size: 18px !important; }

    /* 13) Module cards — tighter */
    .admin-module-header { font-size: 11px !important; padding: 7px 12px !important; }
    .admin-module li { padding: 7px 12px !important; }
    .admin-module li a.model-link { font-size: 12px !important; }
}

/* ============================================================
   Tablets / two-column layouts (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr !important; }
    .charts { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   Django Admin — make the change-list / change-form usable on phones
   ============================================================ */
@media (max-width: 768px) {
    #header { padding: 8px 14px !important; }
    #branding h1 { font-size: 16px !important; }
    #user-tools { font-size: 11px !important; }
    .breadcrumbs { padding: 6px 14px !important; font-size: 11.5px !important; }
    #content { padding: 14px !important; }
    #content-main { padding: 0 !important; }

    /* Sidebar nav in admin — stacked */
    #nav-sidebar { width: 100% !important; }

    /* Change-list filters / search */
    #changelist-search { display: block; }
    #changelist-search input { width: 100% !important; }
    #changelist-filter { width: 100% !important; float: none !important;
                         margin-bottom: 12px; }

    /* Change-list table — horizontal scroll */
    #changelist table { display: block !important; overflow-x: auto !important;
                        white-space: nowrap; -webkit-overflow-scrolling: touch; }
    #changelist .results { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Change-form fieldsets — single column */
    .form-row { display: block !important; }
    .form-row > div { width: 100% !important; }
    .form-row label { display: block !important; margin-bottom: 4px; }
    .form-row input[type="text"], .form-row input[type="number"],
    .form-row textarea, .form-row select {
        width: 100% !important; max-width: 100% !important;
    }

    /* Inlines (line items in invoices) — scroll horizontally */
    .inline-related .tabular { overflow-x: auto !important;
                                -webkit-overflow-scrolling: touch; }

    /* Submit row — buttons wrap */
    .submit-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .submit-row input, .submit-row a.button {
        flex: 1 1 auto; min-width: 110px; padding: 8px 12px !important;
        font-size: 12px !important;
    }
}