/* ==========================================================================
   TEXFLOW ERP — Responsive behaviour  (1920 → 390)
   Mobile navigation is a pure CSS checkbox drawer. No JavaScript.
   ========================================================================== */

/* ---------------------------------------------------------- 1440 and down */
@media (max-width: 1440px) {
    .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .split-wide { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ---------------------------------------------------------- 1280 and down */
@media (max-width: 1280px) {
    .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .split, .split-wide, .split-2-1 { grid-template-columns: minmax(0, 1fr); }
    .content { padding: 18px 20px 44px; }
}

/* ---------------------------------------------------------- 1024 and down */
@media (max-width: 1024px) {
    .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* --- sidebar becomes an off-canvas drawer --- */
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: none;
    }
    .nav-toggle:checked ~ .app .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    .nav-toggle:checked ~ .app .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(15, 23, 42, .45);
        cursor: pointer;
    }
    .main { margin-left: 0; }

    .nav-burger {
        display: grid;
        place-items: center;
        width: 34px; height: 34px;
        border-radius: var(--r);
        color: var(--text-2);
        flex: none;
        cursor: pointer;
    }
    .nav-burger:hover { background: var(--surface-sunken); }
    .nav-burger svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }

    .topbar { padding: 0 16px; }
    .topbar-search { width: 240px; }

    .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-strip > div:nth-child(2n) { border-right: 0; }
    .kpi-strip > div { border-bottom: 1px solid var(--border); }

    .tna-row {
        grid-template-columns: 20px minmax(120px, 1fr) 82px 82px 62px;
    }
    .tna-row .t-owner, .tna-row .t-status-cell { display: none; }

    .risk-row { grid-template-columns: 84px minmax(0, 1fr) 110px 56px; }
    .risk-row .r-due-cell { display: none; }
}

/* ----------------------------------------------------------- 768 and down */
@media (max-width: 768px) {
    :root { --topbar-h: 52px; }

    .content { padding: 14px 14px 40px; }

    .g-2, .g-3, .g-4, .g-5, .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid { gap: 12px; }

    .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }

    .greeting h1 { font-size: 19px; }
    .kpi-value { font-size: 21px; }
    .prod-hero .ph-value { font-size: 26px; }

    .topbar-search { display: none; }
    .topbar-user .u-name, .topbar-user .u-role { display: none; }

    .topbar { gap: 8px; padding: 0 14px; }

    .doc { padding: 22px 18px; }

    .bar-row { grid-template-columns: 96px minmax(0, 1fr) 52px; gap: 8px; }
    .meter-row { grid-template-columns: 88px minmax(0, 1fr) 46px; }

    .dl { grid-template-columns: minmax(96px, 46%) minmax(0, 1fr); }

    .modal-card { margin: 3vh auto; }
    .drawer-panel { width: 100%; }

    /* dense ERP tables scroll horizontally rather than break the layout */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    table.table thead th,
    table.table tbody td { padding: 9px 11px; }
}

/* ----------------------------------------------------------- 560 and down */
@media (max-width: 560px) {
    .g-2, .g-3, .g-4, .g-5, .g-6 { grid-template-columns: minmax(0, 1fr); }
    .kpi-strip { grid-template-columns: minmax(0, 1fr); }
    .kpi-strip > div { border-right: 0; }

    .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qa-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recon     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mo-figs   { grid-template-columns: minmax(0, 1fr); text-align: left; }

    .tna-row { grid-template-columns: 18px minmax(0, 1fr) 72px 62px; }
    .tna-row .t-actual-cell { display: none; }

    .risk-row { grid-template-columns: 76px minmax(0, 1fr) 52px; }
    .risk-row .r-prog-cell { display: none; }

    .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
    .filter-tabs a { flex: none; }

    /* full-width touch targets for the primary actions */
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; }

    /* keep the topbar to four controls on the narrowest screens */
    .topbar { gap: 6px; padding: 0 12px; }
    .topbar .btn { padding: 0 10px; }
    .topbar .icon-btn[title="Help & settings"] { display: none; }

    .col-chart { height: 150px; gap: 6px; }
    .donut { width: 108px; height: 108px; }
    .donut::after { width: 78px; height: 78px; }

    .card-head { padding: 11px 13px; }
    .card-body { padding: 13px; }
    .doc-head { flex-direction: column; }
    .doc-type { text-align: left; }
}

/* ----------------------------------------------------------- 400 and down */
@media (max-width: 400px) {
    .content { padding: 12px 11px 36px; }
    .dept-grid, .qa-grid { grid-template-columns: minmax(0, 1fr); }
    .kpi-value { font-size: 19px; }
    .btn { padding: 0 11px; }
    .auth-wrap { padding: 0; }
}

/* ---------------- Login page collapses its marketing panel on small screens */
@media (max-width: 900px) {
    .auth-wrap { grid-template-columns: minmax(0, 1fr); }
    .auth-side { display: none; }
}

/* ------------------------------------------------- Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}