/* ============================================================
   RESPONSIVE · added layer (prototype CSS kept verbatim)
   ------------------------------------------------------------
   1. Overflow-safe base (applies at ALL widths): nothing spills
      past the viewport; grids/flex rows shrink and wrap.
   2. Breakpoint stacking at 1180 / 768 / 480.
   ============================================================ */

/* ---- 1 · Overflow-safe base ---- */
html, body { overflow-x: hidden; max-width: 100%; }
.main, .content { min-width: 0; }
.content { overflow-x: hidden; }

/* Grid/flex children must be allowed to shrink, otherwise long content
   (monospace command strings, wide tables) forces page-wide overflow. */
.grid > *, .detail-grid > *, .ops-top > *, .dash-cols > *,
.visual-grid > *, .attr-sections > * { min-width: 0; }

/* Tracks that can collapse to 0 instead of min-content. */
.detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.ops-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }

/* KPI cards wrap responsively instead of forcing 4 fixed columns. */
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Long monospace strings wrap rather than push width. */
code { overflow-wrap: anywhere; word-break: break-word; }

/* Button / control rows wrap. */
.page-actions, .biblioteca-bar, .approval-actions, .qdas-actions, .qdas-summary, .top-actions { flex-wrap: wrap; }

/* Wide tables scroll inside their card at every width (was clipped > 768). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Compare table can be wide → its card scrolls horizontally. */
.compare-table { min-width: 520px; }

/* Mobile-only affordances — hidden on desktop, out of the grid. */
.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
}
.hamburger .ico { width: 18px; height: 18px; }
.nav-backdrop { display: none; }

[x-cloak] { display: none !important; }
.btn.is-disabled { opacity: .5; pointer-events: none; }

.page-title { font-size: clamp(18px, 2.4vw, 22px); }

/* Natural-language search box fills its row (base input style is scoped to .filter-row). */
.nl-search { width: 100%; }
.nl-search .f-search { flex: 1 1 auto; min-width: 0; position: relative; }
.nl-search .f-search input {
    width: 100%; height: 38px; border-radius: 8px;
    padding: 0 12px 0 36px; font-size: 13px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.nl-search .f-search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-mute); }

/* ============================================================
   LOGIN — the 1fr/1fr split clips the 380px form card once each
   half drops under ~500px. Below 1024px show a single centred
   column (art hidden) so the form can never clip.
   ============================================================ */
@media (max-width: 1024px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-art { display: none; }
    .login-form { padding: 40px 24px; }
    .login-form .form-card { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   2 · Stacking — two-column working areas collapse early
   (≤ 1180px) so they never feel cramped on laptops/tablets.
   ============================================================ */
@media (max-width: 1180px) {
    .detail-grid,
    .ops-top,
    .visual-grid,
    .dash-cols { grid-template-columns: 1fr; }
    .detail-right { position: relative; top: auto; max-height: none; }
    .compare-card { width: min(94vw, 1000px); }
}

/* ============================================================
   ≤ 768px — sidebar becomes an off-canvas drawer.
   ============================================================ */
@media (max-width: 768px) {
    .app { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed; top: 0; left: 0;
        width: 248px; height: 100vh; z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: translateX(0); }

    .nav-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(15, 23, 42, .45);
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease; z-index: 55;
    }
    .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

    .hamburger { display: inline-flex; }

    .topbar { height: 52px; padding: 0 12px; gap: 8px; }
    .content { padding: 16px; }

    .gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

    .attr-grid { grid-template-columns: 1fr; }
    .attr-mat-head, .attr-mat-row { grid-template-columns: 1.4fr 1fr 54px; gap: 8px; }
    .attr-mat.has-variants .attr-mat-head,
    .attr-mat.has-variants .attr-mat-row { grid-template-columns: 1.2fr .9fr .9fr 54px; }
    .qdas-row { grid-template-columns: 1fr; gap: 8px; }
    .qdas-summary { flex-direction: column; align-items: stretch; gap: 14px; }

    .filter-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .filter-row .f-search, .filter-row select { min-width: 0; width: 100%; }

    .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .page-actions { width: 100%; }

    .table-wrap table { min-width: 640px; }

    .modal-overlay { padding: 16px; }
    .modal-card { width: min(94vw, 100%); }
    .modal-card.lg, .compare-card { width: 96vw; }

    .top-actions .tag.info { display: none; }
}

/* ============================================================
   ≤ 480px — mobile portrait.
   ============================================================ */
@media (max-width: 480px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-art { display: none; }
    .login-form { padding: 28px 20px; }
    .login-form .form-card { max-width: 100%; }

    .gallery { grid-template-columns: 1fr; }

    .attr-mat-head { display: none; }
    .attr-mat-row { grid-template-columns: 1fr; gap: 2px; }

    .content { padding: 12px; }
    .btn { min-height: 44px; }
    .nav-item { padding: 11px 12px; }
}