/* styles/responsive.css — the breakpoint ladder. Order in VulnerabilityCore.html is the cascade order. */

/* ============================================================ responsive
   Breakpoint ladder:
     1180  laptops      — 3-up charts → 2-up, detail collapses to one column
     1024  small laptop — tighter page padding
      900  tablet       — sidebar becomes an off-canvas drawer (hamburger),
                          KPI row → 2-up
      760  large phone  — ledger rows become cards, login → single
                          card, full-width toast / modal
      560  phone        — single-column cards & field grids, full-width seg
      380  small phone  — single-column KPIs                                 */
@media (max-width: 1180px) {
  .chart-grid {
    grid-template-columns: 1fr 1fr;
  }
  .chart-trend {
    grid-column: span 2;
    order: -1;
  }
  /* The ledger's columns are not here: they follow the table's own width, via the
     @container ladder in ledger.css. */
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .detail-side > .side-card {
    flex: 1;
    min-width: 240px;
  }
}

@media (max-width: 1024px) {
  .content {
    padding: 22px;
  }
}

/* Tablet & below — collapse the sticky sidebar into an off-canvas drawer
   toggled by the topbar hamburger; a tap-scrim closes it. */
@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 264px;
    max-width: 84vw;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
    z-index: 30;
  }
  .sidebar.is-open {
    transform: none;
    box-shadow: var(--shadow);
  }
  .nav-scrim.is-open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .content {
    padding: 20px;
  }
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .topbar {
    padding: 0 16px;
  }
  .content {
    padding: 16px;
  }
  .page {
    gap: 16px;
  }
  .page-head {
    gap: 12px;
  }
  .page-title {
    font-size: 22px;
  }
  .page-head-aside {
    width: 100%;
    flex-wrap: wrap;
  }
  /* Dashboard charts stack into a single readable column. */
  .chart-grid {
    grid-template-columns: 1fr;
  }
  .chart-trend {
    grid-column: auto;
    order: 0;
  }
  /* Ledger: stack each row into a compact card — no horizontal scroll and no
     clipped column headers. The desktop header row is hidden (rows are
     self-describing: severity, CVE id, description, status). */
  .table-card {
    overflow-x: hidden;
  }
  .lrow-head {
    display: none;
  }
  .lrow-data {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "sev id   stat"
      "sev desc desc";
    column-gap: 11px;
    row-gap: 5px;
    align-items: center;
    min-width: 0;
    padding: 14px;
  }
  .lrow-data .lc-sev {
    grid-area: sev;
    align-self: start;
  }
  .lrow-data .lc-id {
    grid-area: id;
    white-space: nowrap;
  }
  .lrow-data .lc-desc {
    grid-area: desc;
    min-width: 0;
  }
  .lrow-data .lc-desc-tx {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lrow-data .lc-stat {
    grid-area: stat;
    justify-self: end;
  }
  /* Assignee is hidden on the phone card (like ecu/sup/date): assignment stays
     available from the detail screen, which is one tap away via the row. */
  /* The row collapses to a 3-column card here (severity · text · status), so the
     due chip goes with the other secondary columns. The deadline is still on the
     detail page, and "Overdue" remains reachable from the ledger's Due filter. */
  .lrow-data .lc-ecu,
  .lrow-data .lc-sup,
  .lrow-data .lc-date,
  .lrow-data .lc-due,
  .lrow-data .lc-jira,
  .lrow-data .lc-assignee {
    display: none;
  }
  /* Empty ledger toolbar spacer collapses so filters wrap tightly. */
  .tool-spacer {
    display: none;
  }
  /* Login collapses to the single sign-in card. */
  .login {
    grid-template-columns: 1fr;
  }
  .login-aside {
    display: none;
  }
  /* Brand follows the card's gutter once the aside is gone. */
  .login-brand {
    top: 22px;
    left: 20px;
    width: 195px;
  }
  .login-main {
    /* min-width:0 lets the single grid column shrink to the viewport instead of
       being held open by the card's min-content (which caused right-edge clipping). */
    min-width: 0;
    padding: 32px 20px;
  }
  .login-card {
    max-width: 100%;
  }
  .login-wordmark {
    height: 34px;
    max-width: 100%;
  }
  /* Toast + modal use the full width on small screens. */
  .toast {
    left: 16px;
    right: 16px;
    transform: none;
    justify-content: center;
  }
  .usm-scrim {
    padding: 16px;
  }
  .usm-body {
    max-height: none;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding: 0 12px;
  }
  .content {
    padding: 12px;
  }
  .page-title {
    font-size: 20px;
  }
  /* Cards & field grids go single-column. */
  .fldgrid {
    grid-template-columns: 1fr;
  }
  .fld-wide {
    grid-column: span 1;
  }
  .ent-grid {
    grid-template-columns: 1fr;
  }
  /* Trim oversized card / section / search padding to claw back width. */
  .card,
  .dsec {
    padding: 16px;
  }
  /* Search gets its own full-width row above the dropdowns — a comfortable tap
     target instead of a cramped, truncated field sharing the row. */
  .search {
    min-width: 0;
    flex-basis: 100%;
  }
  /* Segmented toggles grow to share the row alongside any sibling button. */
  .page-head-aside .seg {
    flex: 1;
  }
  .seg-btn {
    flex: 1;
    justify-content: center;
  }
  /* Detail side cards stack again on the narrowest screens. */
  .detail-side {
    flex-direction: column;
  }
  .detail-side > .side-card {
    min-width: 0;
  }
  /* SBOM library rows: drop the supplier column so name + version stay readable. */
  .librow-sup {
    display: none;
  }
  /* Drop the breadcrumb prefix, keep just the current page. */
  .topbar-crumb span,
  .topbar-crumb .crumb-sep {
    display: none;
  }
}

@media (max-width: 380px) {
  .kpi-row {
    grid-template-columns: 1fr;
  }
  .login-main {
    padding: 24px 16px;
  }
  .login-brand {
    left: 16px;
    width: 170px;
  }
  .page-title {
    font-size: 19px;
  }
}