/* ============================================================
 * Responsive utilities + helpers used across pages.
 * Most responsiveness is already baked into component CSS via
 * logical properties + media queries; this file holds the
 * cross-cutting bits.
 * ============================================================ */

/* Grid helpers for dashboard / list KPIs */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
}
/* 4-up KPI tiles need more room than 2-up cards. Bump to 4 columns
   only once the viewport is wide enough that each tile keeps a
   readable ~250 px of inline space. */
@media (min-width: 1100px) {
  .grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Section spacing */
.section + .section { margin-block-start: var(--space-7); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
  flex-wrap: wrap;
}
.section__title { color: var(--ink); font-size: var(--text-lg); font-weight: 650; }

/* Show / hide helpers */
.hide-mobile { display: none; }
.hide-desktop { display: initial; }
@media (min-width: 900px) {
  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------ */
/* Print — operators commonly save invoices as PDF                */
/* ------------------------------------------------------------ */

@media print {
  /* Strip chrome — only the page content prints. */
  .topbar,
  .sidebar,
  .sidebar-backdrop,
  .page-header__actions,
  .skip-link,
  .locale-switch,
  .btn,
  .btn-link,
  form[method="post"],
  [data-sidebar-toggle],
  .inline-form {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000;
    font-size: 12pt;
  }
  .app-shell {
    display: block !important;
    min-height: auto;
  }
  .app-shell__main {
    grid-area: auto !important;
    padding: 0 !important;
  }
  .card, .table-wrap {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    break-inside: avoid;
  }
  /* Customer documents: the on-screen paper chrome is redundant on real
     paper (UXB-21). Alerts (draft/sandbox markers) print flat so the
     light-tier soft fill never comes out as a toner slab. */
  .doc {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* The DRAFT watermark must stamp EVERY printed page. position:fixed only
     repeats per page in Firefox — Chromium and WebKit paint it once, on the
     first page — so paged output uses a tiled inline-SVG background of the
     same rotated bilingual stamp instead: an element background is sliced
     across pages in every engine, and the 640x480 tile puts at least two
     stamps on each A4 page. The !important flags out-cascade the
     `background: #fff !important` shorthand on .doc above (a shorthand
     resets every longhand, image and size included); print-color-adjust
     stops engines stripping it as "background graphics". Light grey from
     the pre-existing hardcoded print palette (paper is theme-independent). */
  .doc--draft::before { display: none; }
  .doc--draft {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'640'%20height%3D'480'%3E%3Ctext%20x%3D'320'%20y%3D'240'%20text-anchor%3D'middle'%20transform%3D'rotate(-24%20320%20240)'%20font-family%3D'sans-serif'%20font-size%3D'56'%20font-weight%3D'700'%20letter-spacing%3D'4'%20fill%3D'%23999'%20fill-opacity%3D'0.18'%3E%D9%85%D8%B3%D9%88%D8%AF%D8%A9%20%C2%B7%20DRAFT%3C%2Ftext%3E%3C%2Fsvg%3E") !important;
    background-size: 640px 480px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc .alert {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999 !important;
  }
  a { color: #000; text-decoration: none; }
  /* Show URLs after links in print for traceability — but not on
     anchors that are pure navigation (sidebar already hidden). */
  .dl a[href^="http"]::after,
  .card a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}