/* ===========================================================================
 * density.css — the desktop density scale applied to what styles.css does not
 * own: the Preventivi add-on (public/quotes.css, #quotes-root /
 * #quotes-modal-root) and the assist widget (public/assist_widget.css).
 *
 * WHY A SEPARATE FILE. quotes.css is the add-on's stylesheet and is edited by
 * the add-on's own work; this file OVERRIDES its rules from the outside — same
 * `#quotes-root …` selectors, loaded later in index.html so the cascade
 * decides — and never renames a class or a data-action.
 *
 * TWO TIERS, LIKE styles.css. The `--q-*` tokens below hold the add-on's own
 * historical values on bare :root and the `compact` values at or above
 * 1280px of viewport (--bp-desk, the same literal as styles.css's tier
 * switch), so under 1280px every rule here resolves to exactly what
 * quotes.css already paints. The host tokens it also reads (--font-base,
 * --control-pad-y, --win-margin, --stack-gap, --field-gap) are styles.css's.
 *
 * CASCADE DISCIPLINE. A rule here outranks the SAME selector in quotes.css
 * wherever it applies, including inside quotes.css's own narrow-container
 * rules — so every override of a property the add-on changes on a phone or a
 * tablet is scoped to the width above that breakpoint (≥901px / ≥1101px of
 * container; ≥641px / ≥901px of viewport for the modal layer), and nothing
 * under 900px gets denser. Every width-keyed rule for #quotes-root is an
 * `@container quotes (…)` query (the add-on is a size container beside the
 * host's sidebar — test/css-responsive-tripwire.test.js's rule, kept here by
 * test/layout-shell.test.js); `@media` is used only for :root tokens, the
 * modal layer (a <body> child) and the assist widget. In a browser without
 * container queries the ≥ enhancements simply do not apply; the one narrow
 * rule that must not be lost (the wizard's one-column layout) has its
 * @supports twin at the foot of the file.
 * ======================================================================== */

:root {
  /* chrome heights the height-filling editors subtract from 100vh. Measured
     against the wizard's sticky head (page-head + stepper + linked line) plus
     its sticky footer plus the card padding above the box; the admin template
     editor's chrome is the host header, the settings strip and the template
     head; the archive's is the hero, the toolbar and the page head. */
  --wizard-chrome-h: 250px;
  --settings-chrome-h: 380px;
  --archive-chrome-h: 300px;

  /* the add-on's own values (quotes.css) — unchanged in this tier */
  --q-card-pad: clamp(16px, 4cqi, 26px) clamp(16px, 4cqi, 28px);
  --q-card-gap: 18px;
  --q-divider-my: 22px;
  --q-grid-gap: 16px;
  --q-btn-pad: 10px 18px;
  --q-btn-sm-pad: 6px 12px;
  --q-page-head-mb: 28px;
  --q-section-hint-mb: 18px;
  --q-toolbar-m: clamp(16px, 3cqi, 26px) 0 14px;
  --q-hero-pad: clamp(20px, 5cqi, 34px);
  --q-hero-gap: 22px;
  --q-lineitem-pad: 16px;
  --q-empty-pad: 60px 24px;
  --q-paper-pad: 30px;
  --q-paper-gap: 24px;
  --q-th-pad: 12px 16px;
  --q-td-pad: 13px 16px;
  --q-ctw-th-pad: 8px 12px;
  --q-ctw-td-pad: 9px 12px;
  --q-wizard-head-pad: 18px 0 14px;
  --q-wizard-page-head-mb: 14px;
  --q-step-pill-pt: 10px;
  --q-wizard-gap: 24px;
  --q-wizard-sidebar-top: 130px;
  --q-wizard-sidebar-gap: 14px;
  --q-totals-pad: 22px;
  --q-footer-pad: 14px 0;
  --q-footer-mt: 26px;
  --q-settings-gap: 22px;
  --q-settings-nav-pad: 10px 14px;
  --q-ct-gap: 22px;
  --q-modal-head-pad: 20px 24px;
  --q-modal-body-pad: 22px 24px;
  --q-modal-foot-pad: 16px 24px;
  --q-pl-editor-head-pad: 16px 20px;
}
@media (min-width: 1280px) {
  :root {
    --q-card-pad: clamp(12px, 2cqi, 18px) clamp(14px, 2.4cqi, 22px);
    --q-card-gap: 16px;
    --q-divider-my: 16px;
    --q-grid-gap: 12px 14px;
    --q-btn-pad: 8px 14px;
    --q-btn-sm-pad: 5px 10px;
    --q-page-head-mb: 18px;
    --q-section-hint-mb: 12px;
    --q-toolbar-m: 14px 0 10px;
    --q-hero-pad: clamp(16px, 3cqi, 26px);
    --q-hero-gap: 16px;
    --q-lineitem-pad: 12px 14px;
    --q-empty-pad: 40px 20px;
    --q-paper-pad: 16px;
    --q-paper-gap: 16px;
    --q-th-pad: 9px 14px;
    --q-td-pad: 10px 14px;
    --q-ctw-th-pad: 7px 12px;
    --q-ctw-td-pad: 8px 12px;
    --q-wizard-head-pad: 8px 0 8px;
    --q-wizard-page-head-mb: 8px;
    --q-step-pill-pt: 6px;
    --q-wizard-gap: 18px;
    --q-wizard-sidebar-top: 112px;
    --q-wizard-sidebar-gap: 10px;
    --q-totals-pad: 14px 16px;
    --q-footer-pad: 10px 0;
    --q-footer-mt: 18px;
    --q-settings-gap: 18px;
    --q-settings-nav-pad: 8px 12px;
    --q-ct-gap: 18px;
    --q-modal-head-pad: 14px 20px;
    --q-modal-body-pad: 18px 20px;
    --q-modal-foot-pad: 12px 20px;
    --q-pl-editor-head-pad: 12px 16px;
  }
}

/* ---- always: the same text base as the host, no second width cap -------- */
#quotes-root { font-size: var(--font-base, 15px); }
/* .main already caps at --content-max (min(100%, 1920px)); the add-on's own
   1600px cap under it was the second band of empty margin on a wide screen. */
#quotes-root .shell { max-width: none; }
/* padding-block only: the horizontal paddings stay the add-on's own (the
   select's chevron slot and the search boxes' icon slots live there). The
   token equals quotes.css's 9px under 1280px. */
#quotes-root input[type=text], #quotes-root input[type=email], #quotes-root input[type=tel],
#quotes-root input[type=number], #quotes-root input[type=date], #quotes-root input[type=time],
#quotes-root input[type=url], #quotes-root select, #quotes-root textarea,
#quotes-modal-root input[type=text], #quotes-modal-root input[type=email], #quotes-modal-root input[type=tel],
#quotes-modal-root input[type=number], #quotes-modal-root input[type=date], #quotes-modal-root input[type=time],
#quotes-modal-root input[type=url], #quotes-modal-root select, #quotes-modal-root textarea {
  padding-block: var(--control-pad-y, 9px);
}
/* no forced sideways scroll in a box wider than 820px; the header row is
   stuck to the top of whatever scroller the table sits in */
#quotes-root .table-wrap table { min-width: min(820px, 100%); }
#quotes-root .table-wrap table thead th { position: sticky; top: 0; z-index: 1; }

/* ---- ≥901px of container: the tablet-and-up surfaces ------------------- */
@container quotes (min-width: 901px) {
  #quotes-root .card-pad { padding: var(--q-card-pad); }
  #quotes-root .card + .card { margin-top: var(--q-card-gap); }
  #quotes-root .divider { margin: var(--q-divider-my) 0; }
  #quotes-root .grid { gap: var(--q-grid-gap); }
  #quotes-root .btn { padding: var(--q-btn-pad); }
  #quotes-root .btn-sm { padding: var(--q-btn-sm-pad); }
  /* restated: same specificity as .btn above, which would otherwise win */
  #quotes-root .btn-icon-only { padding: 8px; }
  #quotes-root .page-head { margin-bottom: var(--q-page-head-mb); }
  #quotes-root .section-hint { margin-bottom: var(--q-section-hint-mb); }
  #quotes-root .toolbar { margin: var(--q-toolbar-m); }
  #quotes-root .toolbar-field--search { max-width: 420px; }
  #quotes-root .hero-panel { padding: var(--q-hero-pad); gap: var(--q-hero-gap); }
  #quotes-root .lineitem { padding: var(--q-lineitem-pad); }
  #quotes-root .empty-state { padding: var(--q-empty-pad); }
  #quotes-root .pl-search { max-width: 520px; }
  /* the scaled A4 preview: PAPER_CSS's 30px frame came straight off the
     page's scale (quotes.js measurePaper reads the computed padding, so a
     thinner frame is safe and gives the page the width back). */
  #quotes-root .paper-scroll { padding: var(--q-paper-pad); gap: var(--q-paper-gap); }
  /* tables */
  #quotes-root .table-wrap table thead th { padding: var(--q-th-pad); }
  #quotes-root .table-wrap table tbody td { padding: var(--q-td-pad); }
  #quotes-root .ctw-table thead th { padding: var(--q-ctw-th-pad); }
  #quotes-root .ctw-table tbody td { padding: var(--q-ctw-td-pad); }
  /* the wizard (quotes and contracts): a thin sticky head. The inner
     .page-head carries an inline margin-bottom:14px from quotes.js, hence
     the !important; the token keeps the 14px under 1280px. */
  #quotes-root .wizard-head { padding: var(--q-wizard-head-pad); }
  #quotes-root .wizard-head .page-head { margin-bottom: var(--q-wizard-page-head-mb) !important; }
  #quotes-root .step-pill { padding-top: var(--q-step-pill-pt); }
  #quotes-root .totals-card { padding: var(--q-totals-pad); }
  #quotes-root .wizard-footer { padding: var(--q-footer-pad); margin-top: var(--q-footer-mt); }
  /* Contratti (admin): template list | editor, proportional to the box */
  #quotes-root .ct-layout { grid-template-columns: clamp(240px, 22cqi, 340px) minmax(0, 1fr); gap: var(--q-ct-gap); }
  /* height-filling editors: the contract text step and the admin template
     editor reach the bottom of the screen (100vh minus the measured chrome)
     instead of a vh percentage that left a band unused on a tall screen and
     overflowed a short one; the preview beside each is bounded to the same
     height and scrolls inside. Under 900px quotes.css's own rules
     (min-height in vh, no cap) stay in force. */
  #quotes-root #ctw-body { min-height: max(320px, calc(100vh - var(--wizard-chrome-h) - 48px)); min-height: max(320px, calc(100dvh - var(--wizard-chrome-h) - 48px)); max-height: none; }
  #quotes-root .ctw-split-preview .ctw-preview { max-height: max(320px, calc(100vh - var(--wizard-chrome-h))); max-height: max(320px, calc(100dvh - var(--wizard-chrome-h))); }
  #quotes-root #ct-body-it, #quotes-root #ct-body-en { min-height: max(280px, calc(100vh - var(--settings-chrome-h))); min-height: max(280px, calc(100dvh - var(--settings-chrome-h))); max-height: none; }
  #quotes-root .ct-previews .ct-preview { max-height: max(280px, calc(100vh - var(--settings-chrome-h) + 80px)); max-height: max(280px, calc(100dvh - var(--settings-chrome-h) + 80px)); }
  /* the archive and the Contratti list: a bounded scroller with the header
     row stuck to its top, so a long list scrolls under it instead of
     pushing the page (the hero and the toolbar stay in reach). */
  #quotes-root .table-wrap--cards { max-height: max(360px, calc(100vh - var(--archive-chrome-h))); max-height: max(360px, calc(100dvh - var(--archive-chrome-h))); overflow: auto; }
}

/* ---- ≥1101px of container: the two-pane surfaces ------------------------ */
@container quotes (min-width: 1101px) {
  /* the wizard sidebar is proportional (was a fixed 360px column) */
  #quotes-root .wizard-body { grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 400px); gap: var(--q-wizard-gap); }
  #quotes-root .wizard-sidebar { top: var(--q-wizard-sidebar-top); gap: var(--q-wizard-sidebar-gap); }
  /* Impostazioni: the sub-nav column is as wide as its longest label */
  #quotes-root .settings-layout { grid-template-columns: max-content minmax(0, 1fr); gap: var(--q-settings-gap); }
  #quotes-root .settings-nav button { padding: var(--q-settings-nav-pad); }
  /* contract text step: the editor is what is being worked on — 3/5 of the
     width; the printed preview 2/5 (auto-fit gave them exactly half each). */
  #quotes-root .ctw-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  /* Listini: the rows are short (name + one line of meta) and were one per
     line — two columns of rows use the width; the selected row's overview
     spans both, still directly under its row block. The 1px column gap on
     the border colour is the separator between the two columns. */
  #quotes-root #pl-rows, #quotes-root #pl-inherited-rows {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1px; background: var(--border);
  }
  #quotes-root #pl-rows > .pl-row:not(.selected):not(:hover),
  #quotes-root #pl-inherited-rows > .pl-row:not(.selected):not(:hover) { background: var(--surface); }
  #quotes-root #pl-rows > .pl-overview, #quotes-root #pl-inherited-rows > .pl-overview,
  #quotes-root #pl-rows > .pl-list-empty, #quotes-root #pl-inherited-rows > .pl-list-empty { grid-column: 1 / -1; }
}

/* ---- the wizard under 1100px of container: one column, the sidebar is a
   ROW OF CHIPS above the step (order:-1) — the totals stay in view without a
   360px column stealing a third of a mid-size window. quotes.css's own
   1024px one-column rule is subsumed by this one. ------------------------- */
@container quotes (max-width: 1100px) {
  #quotes-root .wizard-body { grid-template-columns: 1fr; }
  #quotes-root .wizard-sidebar { position: static; order: -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  #quotes-root .wizard-sidebar > * { flex: 1 1 320px; min-width: 0; }
  #quotes-root .totals-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; }
  #quotes-root .totals-card .t-row { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; }
  #quotes-root .totals-card .t-row.grand { border-top: 0; margin-top: 0; padding: 5px 12px; font-size: 14px; background: var(--brand-900); color: #fff; }
  #quotes-root .totals-card .t-row.grand .v { color: #fff; }
  #quotes-root .totals-card .yearly-breakdown { display: contents; }
  #quotes-root .totals-card .t-row.yr { padding: 3px 9px; }
  #quotes-root .totals-card .vat-note { flex-basis: 100%; margin-top: 2px; padding-top: 4px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    #quotes-root .wizard-body { grid-template-columns: 1fr; }
    #quotes-root .wizard-sidebar { position: static; order: -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
    #quotes-root .wizard-sidebar > * { flex: 1 1 320px; min-width: 0; }
    #quotes-root .totals-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; }
    #quotes-root .totals-card .t-row { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; }
    #quotes-root .totals-card .t-row.grand { border-top: 0; margin-top: 0; padding: 5px 12px; font-size: 14px; background: var(--brand-900); color: #fff; }
    #quotes-root .totals-card .t-row.grand .v { color: #fff; }
    #quotes-root .totals-card .yearly-breakdown { display: contents; }
    #quotes-root .totals-card .vat-note { flex-basis: 100%; margin-top: 2px; padding-top: 4px; }
  }
}

/* ---- the modal layer (a <body> child: viewport-keyed) -------------------
   Above the phone breakpoint, where quotes.css's own ≤640px paddings do not
   apply; the Listini editor above the tablet one, where it is a sheet. */
@media (min-width: 641px) {
  #quotes-modal-root .modal-box.wide { max-width: min(800px, 96vw); }
  #quotes-modal-root .modal-head { padding: var(--q-modal-head-pad); }
  #quotes-modal-root .modal-body { padding: var(--q-modal-body-pad); }
  #quotes-modal-root .modal-foot { padding: var(--q-modal-foot-pad); }
  #quotes-modal-root .btn { padding: var(--q-btn-pad); }
  #quotes-modal-root .btn-sm { padding: var(--q-btn-sm-pad); }
  #quotes-modal-root .btn-icon-only { padding: 8px; }
  #quotes-modal-root .grid { gap: var(--q-grid-gap); }
}
@media (min-width: 901px) {
  /* the Listini editor: 960 wide (bilingual descriptions side by side, the
     attachments row) and the FULL viewport height minus one margin above
     and below — the body scrolls, the head and the foot stay put. */
  #quotes-modal-root .modal-box.pl-editor {
    width: min(960px, 96vw);
    height: calc(100vh - 2 * var(--win-margin, 16px)); height: calc(100dvh - 2 * var(--win-margin, 16px));
    max-height: calc(100vh - 2 * var(--win-margin, 16px)); max-height: calc(100dvh - 2 * var(--win-margin, 16px));
  }
  #quotes-modal-root .pl-editor-head { padding: var(--q-pl-editor-head-pad); }
}

/* ---- the assist widget ("Chiedi a Salem") on a desktop: wider, and as tall
   as the screen minus the launcher's corner (88px bottom + 20px top). ----- */
@media (min-width: 1280px) {
  .assist-widget-panel { width: clamp(360px, 28vw, 480px); max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); }
}

/* ---- touch: quotes.css's own (hover: none) targets, restated because the
   rules above sit later in the cascade at the same specificity. A tablet in
   landscape is ≥901px of container and must keep its 36px rows. ---------- */
@media (hover: none) {
  #quotes-root .btn, #quotes-modal-root .btn, #quotes-root .settings-nav button, #quotes-root .step-pill { min-height: 36px; }
  #quotes-root .table-wrap table thead th { padding: 14px 16px; }
}