/*
 * Warehouse and quotations workspaces
 *
 * Scoped overrides for the operational screens. The existing IDs, data
 * bindings, and action handlers remain untouched; this only establishes a
 * usable hierarchy for list, detail, and modal-form states.
 */

#screen-warehouse,
#screen-quotations {
  --ops-content-width: 1280px;
  min-width: 0;
  color: var(--ink, #344f67);
  background:
    radial-gradient(46rem 26rem at 100% -8%, rgba(255,255,255,.72), transparent 62%),
    radial-gradient(34rem 22rem at -10% 25%, rgba(255,255,255,.48), transparent 64%),
    var(--app-bg, #eaf1f8);
}

#screen-warehouse .wh-view-shell,
#screen-quotations .q-view-shell {
  width: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

#screen-warehouse .wh-view-shell > *,
#screen-quotations .q-view-shell > * {
  min-width: 0;
}

/* Keep the compact shell header readable even when it contains several
   icon actions. The main title is allowed to shrink before the actions do. */
#screen-warehouse .wh-screen-header,
#screen-quotations .q-screen-header {
  position: relative;
  z-index: 2;
  min-width: 0;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(228,235,241,.9);
  box-shadow: 0 1px 0 rgba(52,79,103,.04);
}

#screen-warehouse .wh-screen-header::after,
#screen-quotations .q-screen-header::after {
  display: none;
}

#screen-warehouse .wh-screen-header .header-title,
#screen-quotations .q-screen-header .header-title {
  min-width: 0;
  flex: 1 1 auto;
}

#screen-warehouse .wh-screen-header .header-title span,
#screen-quotations .q-screen-header .header-title span {
  display: block;
  overflow: hidden;
  color: var(--ink, #344f67);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-warehouse .wh-screen-header .header-title small,
#screen-quotations .q-screen-header .header-title small {
  overflow: hidden;
  color: var(--ink-muted, #9aa9b6);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-quotations .q-screen-header .header-right,
#screen-warehouse .wh-screen-header .header-right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

#screen-quotations .q-screen-header .header-right .btn-icon,
#screen-warehouse .wh-screen-header .header-right .btn-icon {
  flex: 0 0 auto;
}

/* Context and find controls ------------------------------------------------ */
#screen-warehouse .wh-view-shell > .page-context--compact,
#screen-quotations .q-view-shell > .page-context--compact {
  width: min(calc(100% - 48px), var(--ops-content-width));
  min-height: 136px;
  margin: 18px auto 0;
  padding: 24px 28px;
}

#screen-warehouse .wh-view-shell > .wh-filter-bar,
#screen-quotations .q-view-shell > .q-filter-bar,
#screen-warehouse .wh-view-shell > .wh-type-tabs,
#screen-warehouse .wh-view-shell > .wh-list,
#screen-quotations .q-view-shell > .q-list,
#screen-warehouse .wh-view-shell > .pg-empty,
#screen-quotations .q-view-shell > .pg-empty {
  width: min(calc(100% - 48px), var(--ops-content-width));
  margin-inline: auto;
}

#screen-warehouse .wh-view-shell > .wh-filter-bar,
#screen-quotations .q-view-shell > .q-filter-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgba(228,235,241,.9);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 22px rgba(52,79,103,.055);
}

#screen-warehouse .wh-filter-bar .search-box,
#screen-quotations .q-filter-bar .search-box {
  width: 100%;
  min-width: 0 !important;
  min-height: 48px;
  border-color: transparent;
  border-radius: 13px;
  background: var(--surface-soft, #f5f8fb);
  box-shadow: none;
}

#screen-warehouse .wh-filter-bar .search-box:focus-within,
#screen-quotations .q-filter-bar .search-box:focus-within {
  border-color: var(--coral, #ff6b57);
  box-shadow: 0 0 0 4px rgba(255,107,87,.12);
}

#screen-warehouse .wh-filter-bar .search-box input,
#screen-quotations .q-filter-bar .search-box input {
  min-width: 0;
  color: var(--ink, #344f67);
}

#screen-warehouse .wh-view-shell > .wh-type-tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid rgba(228,235,241,.9);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 22px rgba(52,79,103,.055);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#screen-warehouse .wh-view-shell > .wh-type-tabs::-webkit-scrollbar { display: none; }

#screen-warehouse .wh-type-tabs .pg-tab-btn {
  min-width: max-content;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

#screen-warehouse .wh-type-tabs .pg-tab-btn:not(.active) {
  background: transparent;
}

#screen-warehouse .wh-view-shell > .wh-list,
#screen-quotations .q-view-shell > .q-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  margin-top: 14px;
  padding: 0 0 28px !important;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

#screen-warehouse .wh-view-shell > .pg-empty,
#screen-quotations .q-view-shell > .pg-empty {
  min-height: 190px;
  margin-top: 14px;
  margin-bottom: 26px;
  padding: 28px;
  border: 1px dashed #ccdbe7;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  box-shadow: none;
}

#screen-warehouse .wh-view-shell > .pg-empty strong,
#screen-quotations .q-view-shell > .pg-empty strong {
  color: var(--navy, #426482);
}

#screen-warehouse .wh-list > .pg-loading,
#screen-quotations .q-list > .pg-loading,
#screen-warehouse .wh-list > .pg-error,
#screen-quotations .q-list > .pg-error {
  grid-column: 1 / -1;
  width: min(100%, 520px);
  margin: 0 auto;
}

/* Warehouse lists ---------------------------------------------------------- */
#screen-warehouse .wh-project-list,
#screen-warehouse .wh-items-list {
  grid-template-columns: 1fr;
  gap: 14px;
}

#screen-warehouse .wh-project-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 17px 18px;
  overflow: visible;
  /* See .quotation-item's flex-shrink:0 comment — same fix, same reason:
     this card is a flex child of a scrollable flex-column list
     (.wh-list: flex:1 1 auto; min-height:0; overflow-y:auto), so it needs
     flex-shrink:0 to keep its natural height instead of being compressed
     to fit the visible area. */
  flex-shrink: 0;
  border: 1px solid rgba(228,235,241,.94);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(52,79,103,.065);
  color: var(--ink, #344f67);
}

#screen-warehouse .wh-project-card::before {
  left: auto;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(180deg, var(--coral, #ff6b57), #ff9a8d);
}

#screen-warehouse .wh-project-card:hover {
  border-color: #cbdbe8;
  background: #fff;
  box-shadow: 0 14px 28px rgba(52,79,103,.11);
  transform: translateY(-2px);
}

#screen-warehouse .wh-project-card__icon {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: var(--surface-blue, #edf4fa);
  color: var(--navy, #426482);
}

/* Stock-health dot on each project card icon — green/amber/red at a glance */
#screen-warehouse .wh-health-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2.5px solid var(--surface, #fff);
}
#screen-warehouse .wh-health-dot--success { background: var(--success, #38a169); }
#screen-warehouse .wh-health-dot--warn { background: var(--warning, #d99b2b); }
#screen-warehouse .wh-health-dot--danger { background: var(--danger, #ff5f5f); }

/* Stats strip — total tracked warehouses / low-stock / out-of-stock */
#screen-warehouse .wh-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 16px 4px;
}
#screen-warehouse .wh-stat-tile {
  padding: 12px 14px;
  border: 1px solid rgba(228,235,241,.94);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 20px rgba(52,79,103,.06);
  text-align: center;
}
#screen-warehouse .wh-stat-tile__value {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink, #344f67);
  line-height: 1.2;
}
#screen-warehouse .wh-stat-tile--warning .wh-stat-tile__value { color: var(--warning, #d99b2b); }
#screen-warehouse .wh-stat-tile--danger .wh-stat-tile__value { color: var(--danger, #ff5f5f); }
#screen-warehouse .wh-stat-tile__label {
  margin-top: 2px;
  color: var(--ink-muted, #9aa9b6);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Recent Activity panel — surfaces cross-app pulls/additions at a glance */
#screen-warehouse .wh-activity-panel {
  margin: 12px 16px;
  border: 1px solid rgba(228,235,241,.94);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 20px rgba(52,79,103,.06);
  overflow: hidden;
}
#screen-warehouse .wh-activity-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--ink, #344f67);
  font: inherit;
  cursor: pointer;
}
#screen-warehouse .wh-activity-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
}
#screen-warehouse .wh-activity-panel__chevron {
  color: var(--ink-muted, #9aa9b6);
  transition: transform .15s ease;
}
#screen-warehouse .wh-activity-panel--collapsed .wh-activity-panel__chevron { transform: rotate(-90deg); }
#screen-warehouse .wh-activity-panel--collapsed .wh-activity-list { display: none; }

#screen-warehouse .wh-activity-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--line, #e4ebf1);
}
#screen-warehouse .wh-activity-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #e4ebf1);
}
#screen-warehouse .wh-activity-row:last-child { border-bottom: none; }
#screen-warehouse .wh-activity-row__icon {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-blue, #edf4fa);
  color: var(--navy, #426482);
}
#screen-warehouse .wh-activity-row__icon--success { background: #edf9f1; color: var(--success, #258050); }
#screen-warehouse .wh-activity-row__icon--warn { background: #fff7e8; color: var(--warning, #ab7412); }
#screen-warehouse .wh-activity-row__icon--danger { background: #fff1f1; color: var(--danger, #c84b4b); }
#screen-warehouse .wh-activity-row__icon--info { background: #edf8ff; color: var(--info, #287fb7); }
#screen-warehouse .wh-activity-row__body { min-width: 0; flex: 1; }
#screen-warehouse .wh-activity-row__line {
  font-size: 12.5px;
  color: var(--ink, #344f67);
  overflow-wrap: anywhere;
}
#screen-warehouse .wh-activity-row__qty--pos { color: var(--success, #258050); font-weight: 700; }
#screen-warehouse .wh-activity-row__qty--neg { color: var(--danger, #c84b4b); font-weight: 700; }
#screen-warehouse .wh-activity-row__meta {
  margin-top: 2px;
  color: var(--ink-muted, #9aa9b6);
  font-size: 11px;
}
#screen-warehouse .wh-task-link {
  color: var(--info, #287fb7);
  text-decoration: underline;
  cursor: pointer;
}

#screen-warehouse .wh-project-card__body {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#screen-warehouse .wh-project-card__eyebrow,
#screen-warehouse .wh-item-card__eyebrow {
  color: var(--ink-muted, #9aa9b6);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#screen-warehouse .wh-project-card__name,
#screen-warehouse .wh-item-card__name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink, #344f67);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

#screen-warehouse .wh-project-card__meta,
#screen-warehouse .wh-item-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

#screen-warehouse .tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid #d9e5ee;
  border-radius: 999px;
  background: #f7fafc;
  color: var(--ink-soft, #718293);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

/* Pale tint/border stay as pre-computed hex (color-mix() isn't used anywhere
   else in this codebase and isn't universally supported in PWA webviews);
   the meaningful foreground color is token-driven so a future palette
   change still reaches these. */
#screen-warehouse .tag-chip--success { border-color: #ccebd9; background: #edf9f1; color: var(--success, #258050); }
#screen-warehouse .tag-chip--warn { border-color: #f5ddae; background: #fff7e8; color: var(--warning, #ab7412); }
#screen-warehouse .tag-chip--danger { border-color: #f4cfd0; background: #fff1f1; color: var(--danger, #c84b4b); }
#screen-warehouse .tag-chip--info { border-color: #cce5f4; background: #edf8ff; color: var(--info, #287fb7); }

#screen-warehouse .wh-project-card__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin-inline-start: auto;
}

#screen-warehouse .wh-project-card__aside .btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #f3f7fa;
}

#screen-warehouse .wh-project-card__count {
  display: grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--navy, #426482);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

#screen-warehouse .wh-project-card__arrow {
  flex: 0 0 auto;
  color: var(--blue-gray, #718ba3);
}

#screen-warehouse .wh-item-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  min-width: 0;
  overflow: visible;
  flex-shrink: 0;
  border: 1px solid rgba(228,235,241,.94);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(52,79,103,.065);
  color: var(--ink, #344f67);
}

#screen-warehouse .wh-item-card::before {
  z-index: 1;
  left: auto;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 20px 0 0 20px;
  background: var(--coral, #ff6b57);
}

#screen-warehouse .wh-item-card--material::before { background: var(--warning, #d99b2b); }
#screen-warehouse .wh-item-card--equipment::before { background: var(--coral, #ff6b57); }
#screen-warehouse .wh-item-card--tool::before { background: var(--success, #38a169); }

#screen-warehouse .wh-item-card:hover {
  border-color: #cbdbe8;
  box-shadow: 0 14px 28px rgba(52,79,103,.11);
}

#screen-warehouse .wh-item-card__body {
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 18px;
  padding-inline-start: 22px;
}

#screen-warehouse .wh-item-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#screen-warehouse .wh-item-card__header > div:first-child { min-width: 0; }

#screen-warehouse .wh-item-card__qty {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--surface-blue, #edf4fa);
  color: var(--navy, #426482);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-warehouse .wh-item-card__desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft, #718293);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#screen-warehouse .wh-item-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  padding-inline-start: 22px;
  border-top: 1px solid #edf2f6;
  background: #fbfdff;
}

#screen-warehouse .wh-item-card__actions .btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f1f6fa;
}

#screen-warehouse .wh-item-card__actions .btn-icon:hover { background: var(--surface-blue, #edf4fa); }
#screen-warehouse .wh-item-card__actions .btn-icon--danger { color: var(--danger, #d95757); background: #fff2f2; }

/* Quotation list ----------------------------------------------------------- */
#screen-quotations .q-project-list,
#screen-quotations .q-quotation-list {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Card. display/flex-direction/gap/padding define the actual current
   layout. This used to be TWO rules: a legacy CSS Grid layout (this one,
   with align-items:center, plus dead sibling selectors for an unused
   .quotation-project-card variant never referenced by js/quotations.js)
   and a later "redesigned card" flex-column override further down that
   replaced display/flex-direction/gap/padding but never reset
   align-items — since align-items is valid on both grid AND flex
   containers, the leftover align-items:center silently carried over onto
   the flex-column card and shrank+centered every child (header row,
   recipient row, facts grid, totals row) horizontally instead of letting
   them stretch full width. That was the actual root cause of the
   centered/misaligned/unevenly-spaced card content. Consolidated into one
   rule, dead .quotation-project-card/__body/__eyebrow/__meta/__aside/
   __total selectors removed, and cross-axis alignment left at its default
   (stretch) so every row fills the card's full width. */
#screen-quotations .quotation-item {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Explicit, not omitted: a lower-specificity legacy rule in style.css
     (".quotation-item { ... align-items:center }", a shared base also used
     by the row-direction .wh-project-card, where center is correct) sets
     align-items:center for this class too. CSS cascades per-PROPERTY, not
     per-rule — omitting align-items here does NOT make a higher-specificity
     rule "win by default"; it just leaves style.css's declaration as the
     only one, which is centering/shrinking every row (header, recipient,
     facts, totals) instead of letting them stretch full width. Stating it
     explicitly here is what actually overrides it. */
  align-items: stretch;
  /* The list (#q-list-container / .q-quotation-list) is itself a flex
     child of a height-constrained, overflow-y:auto scroll container
     (.q-list: flex:1 1 auto; min-height:0). Flex items default to
     flex-shrink:1, so once the cards' combined natural height exceeds the
     visible area, the browser shrinks every card to fit instead of
     letting the list scroll and the cards keep their real height — this
     was the actual cause of the "compressed to ~42px, content vertically
     distributed/overlapping" card layout. flex-shrink:0 makes each card's
     height purely a function of its own content, as it should be; the
     list scrolls instead. */
  flex-shrink: 0;
  gap: 10px;
  min-width: 0;
  padding: 16px 18px;
  overflow: visible;
  border: 1px solid rgba(228,235,241,.94);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(52,79,103,.065);
  color: var(--ink, #344f67);
}

#screen-quotations .quotation-item::before {
  left: auto;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(180deg, var(--coral, #ff6b57), #ff9b8e);
}

#screen-quotations .quotation-item:hover {
  border-color: #cbdbe8;
  background: #fff;
  box-shadow: 0 14px 28px rgba(52,79,103,.11);
  transform: translateY(-2px);
}

#screen-quotations .quotation-item__number {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink, #344f67);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

#screen-quotations .quotation-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid #d9e5ee;
  border-radius: 999px;
  background: #f7fafc;
  color: var(--ink-soft, #718293);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

#screen-quotations .quotation-status-chip--accepted { border-color: #ccebd9; background: #edf9f1; color: #258050; }
#screen-quotations .quotation-status-chip--sent { border-color: #cce5f4; background: #edf8ff; color: #287fb7; }
#screen-quotations .quotation-status-chip--rejected { border-color: #f4cfd0; background: #fff1f1; color: #c84b4b; }
#screen-quotations .quotation-status-chip--expired { border-color: #f4cfd0; background: #fff1f1; color: #c84b4b; }

/* Quotation list — stats summary bar ---------------------------------------- */
#screen-quotations .q-list-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 16px 4px;
}

#screen-quotations .q-list-stat {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(228,235,241,.94);
  background: #fff;
  box-shadow: 0 6px 16px rgba(52,79,103,.06);
}

#screen-quotations .q-list-stat--danger {
  border-color: #f4cfd0;
  background: #fff8f8;
}

#screen-quotations .q-list-stat__label {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-muted, #9aa9b6);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

#screen-quotations .q-list-stat__value {
  display: block;
  color: var(--navy, #426482);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

#screen-quotations .q-list-stat--danger .q-list-stat__value { color: #c84b4b; }

/* Quotation card row-level layout (display/flex-direction/gap/padding for
   the card itself now live in the single consolidated rule above). */
#screen-quotations .quotation-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#screen-quotations .quotation-item__number {
  color: var(--ink, #344f67);
  font-size: 16px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

#screen-quotations .quotation-item__badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

#screen-quotations .quotation-item__recipient {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

#screen-quotations .quotation-item__recipient strong {
  color: var(--ink, #344f67);
  font-size: 14px;
  font-weight: 700;
}

#screen-quotations .quotation-item__recipient span {
  color: var(--ink-soft, #718293);
  font-size: 12px;
}

#screen-quotations .quotation-item__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px dashed #e4ebf1;
  border-bottom: 1px dashed #e4ebf1;
}

#screen-quotations .quotation-item__facts dt {
  color: var(--ink-muted, #9aa9b6);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}

#screen-quotations .quotation-item__facts dd {
  margin: 0;
  color: var(--ink, #344f67);
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#screen-quotations .quotation-item__fact-danger { color: #c84b4b !important; }

#screen-quotations .quotation-item__totals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 16px;
}

#screen-quotations .quotation-item__totals > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#screen-quotations .quotation-item__totals span {
  color: var(--ink-muted, #9aa9b6);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#screen-quotations .quotation-item__totals strong {
  color: var(--ink-soft, #718293);
  font-size: 13px;
  font-weight: 700;
}

#screen-quotations .quotation-item__totals-grand {
  margin-inline-start: auto;
}

#screen-quotations .quotation-item__totals-grand strong {
  color: var(--navy, #426482);
  font-size: 18px;
  font-weight: 800;
}

/* Quotation detail --------------------------------------------------------- */
#screen-quotations #q-view-detail {
  min-width: 0;
  min-height: 0;
}

#screen-quotations #q-detail-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 20px 24px 24px !important;
  overflow: auto;
  background: transparent;
}

#screen-quotations #q-detail-content .quotation-paper {
  width: min(100%, 1120px);
  max-width: 1120px !important;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px) !important;
  overflow: hidden;
  border: 1px solid rgba(218,228,237,.96);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(52,79,103,.10);
}

#screen-quotations .quotation-paper__hero {
  grid-template-columns: minmax(0,1.25fr) minmax(210px,.75fr);
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom-color: #e8eef3;
}

#screen-quotations .quotation-paper__company,
#screen-quotations .quotation-paper__summary,
#screen-quotations .quotation-paper__footer > * {
  min-width: 0;
}

#screen-quotations .quotation-paper__logo {
  width: clamp(76px, 10vw, 112px);
  border-radius: 14px;
}

#screen-quotations .quotation-paper__company-copy {
  color: #607486;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

#screen-quotations .quotation-paper__company-copy a { color: var(--navy, #426482); }
#screen-quotations .quotation-paper__summary { text-align: end; }

#screen-quotations .quotation-paper__eyebrow {
  color: var(--ink-muted, #9aa9b6);
  font-size: 10px;
  font-weight: 800;
}

#screen-quotations .quotation-paper__number {
  color: var(--navy-dark, #35536f);
  font-size: clamp(21px, 3vw, 27px);
}

#screen-quotations .quotation-paper__dates,
#screen-quotations .quotation-paper__recipient,
#screen-quotations .quotation-paper__notes-body,
#screen-quotations .quotation-paper__total-row {
  color: #607486;
}

#screen-quotations .quotation-paper__recipient {
  padding: 14px 16px;
  border-color: #e1eaf1;
  border-radius: 16px;
  background: #f7fafd;
  overflow-wrap: anywhere;
}

#screen-quotations .quotation-paper__table-wrap {
  overflow-x: auto;
  margin-bottom: 20px;
  border: 1px solid #e0e8ef;
  border-radius: 16px;
}

#screen-quotations .quotation-paper__table { min-width: 700px; }

#screen-quotations .quotation-paper__table th {
  padding: 12px;
  border-color: #e0e8ef;
  background: #f5f9fc;
  color: var(--navy, #426482);
  font-size: 11px;
}

#screen-quotations .quotation-paper__cell {
  padding: 12px;
  border-color: #e5edf3;
  color: #435a70;
}

#screen-quotations .quotation-paper__table-name,
#screen-quotations .quotation-paper__item-name {
  color: var(--ink, #344f67);
}

#screen-quotations .quotation-paper__footer {
  grid-template-columns: minmax(0,1.4fr) minmax(250px,.8fr);
  gap: 20px;
}

#screen-quotations .quotation-paper__notes {
  border-left: 0;
  border-inline-start: 4px solid var(--coral, #ff6b57);
  border-radius: 14px;
  background: #fff9f7;
}

#screen-quotations .quotation-paper__notes-title { color: var(--navy, #426482); }

#screen-quotations .quotation-paper__totals {
  border-color: #e0e8ef;
  border-radius: 16px;
  background: #f5f9fc;
}

#screen-quotations .quotation-paper__total-row--grand { color: var(--coral, #ff6b57); }

#screen-quotations .quotation-paper__total-row--grand strong,
#screen-quotations .quotation-paper__item-stats strong { color: var(--navy-dark, #35536f); }

#screen-quotations .quotation-paper__item-card {
  border-color: #e0e8ef;
  background: #fff;
  box-shadow: 0 8px 18px rgba(52,79,103,.05);
}

#screen-quotations .quotation-paper__item-stats > div { background: #f0f6fa; }

#screen-quotations #q-detail-actions {
  position: static;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  width: min(calc(100% - 48px), var(--ops-content-width));
  margin: 0 auto;
  padding: 0 0 24px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#screen-quotations #q-detail-actions .btn {
  flex: 0 1 auto;
  min-width: 126px;
}

/* Forms and operational modals ------------------------------------------- */
#modal-wh-item-form.modal-overlay .modal-sheet,
#modal-wh-transaction.modal-overlay .modal-sheet {
  width: min(100% - 36px, 560px);
  max-height: min(800px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
}

#modal-wh-history.modal-overlay .modal-sheet {
  width: min(100% - 36px, 940px);
  max-height: min(820px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
}

#modal-q-form.modal-overlay .modal-sheet {
  width: min(100% - 36px, 1080px);
  max-height: min(860px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
}

#modal-q-view-items.modal-overlay .modal-sheet {
  width: min(100% - 36px, 1000px);
  max-height: min(820px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
}

#modal-q-all-items.modal-overlay .modal-sheet,
#modal-q-stats.modal-overlay .modal-sheet {
  width: min(100% - 36px, 1240px);
  height: min(860px, calc(100dvh - 32px));
  max-height: min(860px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
}

#modal-wh-item-form .modal-header,
#modal-wh-transaction .modal-header,
#modal-wh-history .modal-header,
#modal-q-form .modal-header,
#modal-q-view-items .modal-header,
#modal-q-all-items .modal-header,
#modal-q-stats .modal-header {
  flex: 0 0 auto;
  padding: 18px 20px;
  border-bottom: 1px solid #e5edf3;
}

#modal-wh-item-form .modal-body,
#modal-wh-transaction .modal-body,
#modal-wh-history .modal-body,
#modal-q-form .modal-body,
#modal-q-view-items .modal-body,
#modal-q-all-items .modal-body,
#modal-q-stats .modal-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

#modal-wh-item-form form,
#modal-wh-transaction form,
#modal-q-form form { min-width: 0; }

#modal-wh-item-form .form-row-2,
#modal-wh-transaction .form-row-2,
#modal-q-form .form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

#modal-wh-item-form .form-actions,
#modal-wh-transaction .form-actions,
#modal-q-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5edf3;
}

#modal-wh-item-form .form-actions .btn,
#modal-wh-transaction .form-actions .btn,
#modal-q-form .form-actions .btn { min-width: 132px; }

#modal-wh-transaction #wh-tr-item-display {
  padding: 12px 14px !important;
  overflow-wrap: anywhere;
  border: 1px solid #e1eaf1;
  border-radius: 13px !important;
  background: #f5f9fc !important;
  color: var(--navy, #426482);
}

#modal-q-form .form-fieldset {
  min-width: 0;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #e3ebf1;
  border-radius: 18px;
  background: #fbfdff;
}

#modal-q-form .form-fieldset > legend {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0 5px;
  color: var(--navy, #426482);
  font-size: 13px;
  font-weight: 800;
}

#modal-q-form .form-fieldset > legend[style] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

#modal-q-form .form-fieldset > legend > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

#modal-q-form .btn-sm {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #d8e5ee;
  border-radius: 10px;
  background: #eff5f9;
  color: var(--navy, #426482);
  font-size: 11px;
  font-weight: 800;
}

#modal-q-form .btn-sm:hover { background: #e4eef5; }

#modal-q-form #q-items-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#modal-q-form .q-item-row {
  min-width: 0;
  padding: 15px;
  border: 1px solid #e0e9f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 16px rgba(52,79,103,.045);
  animation: none;
}

#modal-q-form .q-item-grid {
  display: grid;
  grid-template-columns: minmax(180px,2fr) minmax(82px,.55fr) minmax(86px,.65fr) minmax(112px,.75fr) auto;
  grid-template-areas: "product qty unit price remove";
  align-items: end;
  gap: 10px;
  min-width: 0;
}

#modal-q-form .q-item-product-field { grid-area: product; min-width: 0; }
#modal-q-form .q-item-qty-field { grid-area: qty; min-width: 0; }
#modal-q-form .q-item-unit-field { grid-area: unit; min-width: 0; }
#modal-q-form .q-item-price-field { grid-area: price; min-width: 0; }

#modal-q-form .q-item-remove-wrap {
  grid-area: remove;
  align-self: end;
  justify-self: end;
  padding: 0 0 2px;
}

#modal-q-form .q-item-grid > .btn-sm {
  grid-column: 1 / -1;
  justify-self: start;
}

#modal-q-form .q-item-product-picker,
#modal-q-form .q-item-product-dropdown,
#modal-q-form .q-edit-product-picker,
#modal-q-form .q-edit-product-dropdown {
  min-width: 0;
  max-width: 100%;
}

#modal-q-form .q-item-product-trigger,
#modal-q-form .q-edit-product-trigger {
  min-height: 48px;
  overflow: hidden;
  border-color: #dbe7ef;
  border-radius: 12px;
  background: #f9fbfd;
  color: var(--ink, #344f67);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal-q-form .q-item-product-dropdown,
#modal-q-form .q-edit-product-dropdown {
  width: min(520px, 100%);
  padding: 10px;
  border-color: #dce7ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(52,79,103,.18);
}

#modal-q-form .q-item-product-option,
#modal-q-form .q-edit-product-option {
  border-color: #e3ebf1;
  background: #fff;
  color: var(--ink, #344f67);
}

#modal-q-form .q-item-product-option:hover,
#modal-q-form .q-edit-product-option:hover,
#modal-q-form .q-item-product-option.is-selected,
#modal-q-form .q-edit-product-option.is-selected {
  border-color: #cadce8;
  background: #f0f6fa;
}

#modal-q-form .q-item-product-preview {
  min-width: 0;
  margin-top: 12px;
  padding: 12px;
  border-color: #e0e9f0;
  border-radius: 14px;
  background: #f8fbfd;
}

#modal-q-form .q-product-preview-thumb,
#modal-q-form .q-product-preview-empty-icon {
  border-color: #dce7ef;
  background: #eef4f8;
}

#modal-q-form .q-product-preview-title { color: var(--ink, #344f67); }
#modal-q-form .q-product-preview-meta,
#modal-q-form .q-product-preview-desc { color: var(--ink-soft, #718293); }

#modal-q-form .q-item-editable-fields {
  min-width: 0;
  padding: 12px;
  border-color: #d9e7ef;
  border-radius: 14px;
  background: #f7fbfd;
}

#modal-q-form .q-item-editable-fields .form-row-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

#modal-q-form .q-item-line-total {
  min-width: 0;
  padding: 9px 11px;
  border-color: #dce7ef;
  border-radius: 11px;
  background: #eff5f9;
  color: var(--ink-soft, #718293);
}

#modal-q-form .q-item-line-total strong { color: var(--navy, #426482); }

#modal-q-form .q-totals-box {
  width: min(100%, 380px);
  margin: 20px 0 0;
  margin-inline-start: auto;
  padding: 14px 16px;
  border: 1px solid #dce7ef;
  border-radius: 16px;
  background: #f4f9fc;
}

#modal-q-form .q-total-row { color: var(--ink-soft, #718293); }
#modal-q-form .q-total-row strong { color: var(--navy, #426482); }
#modal-q-form .q-total-final { border-top-color: #d8e5ed; color: var(--coral, #ff6b57); }
#modal-q-form .q-total-final strong { color: var(--coral, #ff6b57); }

/* Transaction history and quotation item tables use horizontal scroll rather
   than forcing seven-column data into unreadable phone cells. */
#modal-wh-history #wh-history-list,
#modal-q-view-items #q-items-view-container {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  overflow: auto;
}

#modal-wh-history #wh-history-list > div { min-width: 690px; padding: 0 !important; }
#modal-wh-history #wh-history-list table { min-width: 690px; }

#modal-wh-history #wh-history-list th,
#modal-wh-history #wh-history-list td {
  padding: 11px !important;
  border-color: #e1eaf1 !important;
  color: var(--ink, #344f67);
  vertical-align: top;
}

#modal-q-view-items .q-items-table {
  min-width: 720px;
  overflow: visible;
  border-color: #e0e9f0;
  border-radius: 14px;
  background: #fff;
}

#modal-q-view-items .q-items-table thead { background: #f3f8fb; }

#modal-q-view-items .q-items-table th,
#modal-q-view-items .q-items-table td {
  border-color: #e0e9f0;
  color: var(--ink, #344f67);
}

#modal-q-view-items .q-items-table th { color: var(--navy, #426482); }
#modal-q-view-items .q-item-name-cell,
#modal-q-view-items .q-item-amount { color: var(--navy, #426482); }
#modal-q-view-items .q-items-table th:last-child,
#modal-q-view-items .q-items-table td:last-child { background: #fff; box-shadow: none; }

#modal-q-view-items .q-items-summary {
  border-color: #dce7ef;
  border-radius: 16px;
  background: #f4f9fc;
}

#modal-q-view-items .q-summary-label { color: var(--ink-soft, #718293); }
#modal-q-view-items .q-summary-value { color: var(--navy, #426482); }

/* All items and analytics dialogs ----------------------------------------- */
#modal-q-all-items .modal-body,
#modal-q-stats .modal-body { padding: 18px; }

#modal-q-all-items .q-all-items-shell,
#modal-q-stats #q-stats-container {
  min-width: 0;
  display: grid;
  gap: 16px;
}

#modal-q-all-items .q-all-items-toolbar {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(320px,1.2fr);
  align-items: end;
  gap: 20px;
  padding: 20px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--navy-dark, #35536f), var(--navy, #426482));
  box-shadow: none;
}

#modal-q-all-items .q-all-items-toolbar strong { color: #fff; }
#modal-q-all-items .q-all-items-toolbar small { color: #dfeaf3; }

#modal-q-all-items .q-all-items-search {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  background: #fff;
}

#modal-q-all-items .q-all-items-search input { color: var(--ink, #344f67); }
#modal-q-all-items .q-all-items-search input::placeholder { color: var(--ink-muted, #9aa9b6); }

#modal-q-all-items .q-filter-pill {
  min-height: 34px;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.09);
  color: #edf5fb;
}

#modal-q-all-items .q-filter-pill:hover,
#modal-q-all-items .q-filter-pill.is-active {
  border-color: #fff;
  background: var(--coral, #ff6b57);
  color: #fff;
  transform: none;
}

#modal-q-all-items .q-all-items-results-head {
  align-items: end;
  padding: 0 4px;
}

#modal-q-all-items .q-all-items-results-head strong { color: var(--navy, #426482); }
#modal-q-all-items .q-all-items-results-head span,
#modal-q-all-items .q-all-items-results-hint { color: var(--ink-soft, #718293); }

#modal-q-all-items .q-all-items-cards {
  grid-template-columns: 1fr;
  gap: 12px;
}

#modal-q-all-items .q-all-item-card {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(180px,.75fr) minmax(170px,.7fr);
  gap: 16px;
  min-width: 0;
  padding: 17px;
  overflow: hidden;
  border-color: #e0e9f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(52,79,103,.055);
}

#modal-q-all-items .q-all-item-card::before {
  height: 3px;
  background: linear-gradient(90deg, var(--coral, #ff6b57), #ffad9f, var(--navy, #426482));
}

#modal-q-all-items .q-all-item-card__top {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
}

#modal-q-all-items .q-all-item-card__chips { grid-column: 1; }
#modal-q-all-items .q-all-item-card__meta { grid-column: 2; grid-row: 1 / span 2; }
#modal-q-all-items .q-all-item-card__foot { grid-column: 3; grid-row: 1 / span 2; }

#modal-q-all-items .q-all-item-card__eyebrow { color: var(--coral, #ff6b57); }
#modal-q-all-items .q-all-item-card__title { color: var(--ink, #344f67); }
#modal-q-all-items .q-all-item-card__value { color: var(--navy, #426482); font-size: 17px; }

#modal-q-all-items .q-all-chip,
#modal-q-all-items .q-item-type-badge {
  border-color: #d9e7ef;
  background: #f2f7fa;
  color: var(--navy, #426482);
}

#modal-q-all-items .q-item-type-badge.blank { border-color: #f3dca9; background: #fff7e8; color: #aa7414; }
#modal-q-all-items .q-all-item-card__meta span { color: var(--ink-muted, #9aa9b6); }
#modal-q-all-items .q-all-item-card__meta strong,
#modal-q-all-items .q-all-item-card__context span { color: var(--ink, #344f67); }

#modal-q-all-items .q-all-item-card__foot {
  gap: 10px;
  padding: 0;
}

#modal-q-all-items .q-all-item-card__actions { gap: 7px; }

#modal-q-all-items .q-all-item-card .btn-mini {
  min-width: 0;
  min-height: 34px;
  padding: 7px 10px;
  border-color: #d8e5ee;
  border-radius: 10px;
  background: #eff5f9;
  color: var(--navy, #426482);
  box-shadow: none;
}

#modal-q-all-items .q-all-item-card .btn-mini:hover { border-color: #c6d9e6; background: #e3eef5; color: var(--navy-dark, #35536f); }
#modal-q-all-items .q-all-item-card .btn-mini.danger { border-color: #f1d0d0; background: #fff2f2; color: #c94f4f; }

#modal-q-all-items .q-items-summary {
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin: 0;
  border-color: #dce7ef;
  border-radius: 18px;
  background: #f4f9fc;
}

#modal-q-stats #q-stats-container {
  max-height: none;
  overflow: visible;
  padding: 0;
}

#modal-q-stats .q-stats-hero {
  grid-template-columns: minmax(0,1.2fr) minmax(210px,.8fr);
  padding: 22px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--navy-dark, #35536f), var(--navy, #426482));
}

#modal-q-stats .q-stats-hero__eyebrow { color: #cfe0ef; }
#modal-q-stats .q-stats-hero h3,
#modal-q-stats .q-stats-orbit-core strong { color: #fff; }
#modal-q-stats .q-stats-hero p,
#modal-q-stats .q-stats-orbit-core span { color: #dfeaf3; }

#modal-q-stats .q-stats-orbit-ring { border-color: rgba(255,255,255,.25); }
#modal-q-stats .q-stats-orbit-ring--two { border-color: rgba(255,194,184,.48); }

#modal-q-stats .q-stats-orbit-core {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
}

#modal-q-stats .q-stat-card,
#modal-q-stats .q-stats-panel {
  border-color: #e0e9f0;
  background: #fff;
  box-shadow: 0 8px 18px rgba(52,79,103,.055);
}

#modal-q-stats .q-stat-card::after { background: linear-gradient(90deg, var(--coral, #ff6b57), #ffad9f); }
#modal-q-stats .q-stat-card--accent::after { background: linear-gradient(90deg, var(--navy, #426482), #7ea6c5); }
#modal-q-stats .q-stat-card small { color: var(--ink-muted, #9aa9b6); }
#modal-q-stats .q-stat-card strong,
#modal-q-stats .q-stats-panel h4 { color: var(--navy, #426482); }

#modal-q-stats .q-stats-bar-row,
#modal-q-stats .q-stats-donut-legend__item {
  border-color: #e1eaf1;
  background: #f7fafc;
}

#modal-q-stats .q-stats-bar-row__head { color: var(--ink, #344f67); }
#modal-q-stats .q-stats-bar-track { background: #e7eef4; }
#modal-q-stats .q-stats-bar-fill { background: linear-gradient(90deg, var(--coral, #ff6b57), #ffad9f); box-shadow: none; }
#modal-q-stats .q-stats-donut::after { border-color: #e0e9f0; background: #fff; }
#modal-q-stats .q-stats-donut__inner strong { color: var(--navy, #426482); }
#modal-q-stats .q-stats-donut__inner span { color: var(--ink-soft, #718293); }

/* Desktop grids ------------------------------------------------------------
   Multi-column layout removed — operational-ui-polish.css (loaded last)
   now forces grid-template-columns: minmax(0,1fr) !important at every
   width, so warehouse/quotation lists are always single-column, full-width
   stacked cards. Padding-bottom kept. */
@media (min-width: 769px) {
  #screen-warehouse .wh-view-shell > .wh-list,
  #screen-quotations .q-view-shell > .q-list { padding-bottom: 28px !important; }
}

/* Phone and narrow-tablet -------------------------------------------------- */
@media (max-width: 768px) {
  #screen-warehouse .wh-view-shell > .page-context--compact,
  #screen-quotations .q-view-shell > .page-context--compact,
  #screen-warehouse .wh-view-shell > .wh-filter-bar,
  #screen-quotations .q-view-shell > .q-filter-bar,
  #screen-warehouse .wh-view-shell > .wh-type-tabs,
  #screen-warehouse .wh-view-shell > .wh-list,
  #screen-quotations .q-view-shell > .q-list,
  #screen-warehouse .wh-view-shell > .pg-empty,
  #screen-quotations .q-view-shell > .pg-empty {
    width: calc(100% - 24px);
  }

  #screen-warehouse .wh-view-shell > .page-context--compact,
  #screen-quotations .q-view-shell > .page-context--compact {
    min-height: 122px;
    margin-top: 12px;
    padding: 20px;
  }

  #screen-warehouse .wh-view-shell > .wh-list,
  #screen-quotations .q-view-shell > .q-list {
    margin-top: 12px;
    padding-bottom: calc(var(--nav-h, 72px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
    scrollbar-gutter: auto;
  }

  #screen-warehouse .wh-screen-header,
  #screen-quotations .q-screen-header { padding-inline: 12px; }

  #screen-quotations .q-screen-header .header-right { gap: 4px; }

  #screen-quotations .q-screen-header .header-right .btn-icon.secondary,
  #screen-warehouse .wh-screen-header .header-right .btn-icon.secondary {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  #screen-warehouse .wh-project-card,
  #screen-quotations .quotation-item {
    padding: 15px;
    border-radius: 18px;
  }

  #screen-warehouse .wh-item-card { border-radius: 18px; }
  #screen-warehouse .wh-item-card__body { padding: 15px; padding-inline-start: 19px; }
  #screen-warehouse .wh-item-card__actions { padding: 10px 13px; padding-inline-start: 19px; }

  #screen-quotations #q-detail-content {
    padding: 12px 12px 14px !important;
  }

  #screen-quotations #q-detail-content .quotation-paper {
    width: 100%;
    padding: 18px !important;
    border-radius: 20px;
  }

  #screen-quotations .quotation-paper__hero,
  #screen-quotations .quotation-paper__footer { grid-template-columns: 1fr; gap: 16px; }

  #screen-quotations .quotation-paper__company {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr);
    gap: 12px;
  }

  #screen-quotations .quotation-paper__logo { width: 68px; }
  #screen-quotations .quotation-paper__summary { text-align: start; }
  #screen-quotations .quotation-paper__table-wrap { display: none; }
  #screen-quotations .quotation-paper__mobile-list { display: grid !important; gap: 10px; }

  #screen-quotations #q-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    width: 100%;
    margin: 0;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e0e9f0;
    background: rgba(255,255,255,.94);
    box-shadow: 0 -7px 18px rgba(52,79,103,.06);
  }

  #screen-quotations #q-detail-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 9px;
    font-size: 12px;
  }

  #modal-wh-item-form.modal-overlay .modal-sheet,
  #modal-wh-transaction.modal-overlay .modal-sheet,
  #modal-wh-history.modal-overlay .modal-sheet,
  #modal-q-form.modal-overlay .modal-sheet,
  #modal-q-view-items.modal-overlay .modal-sheet,
  #modal-q-all-items.modal-overlay .modal-sheet,
  #modal-q-stats.modal-overlay .modal-sheet {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    height: auto;
    border-radius: 22px;
  }

  #modal-q-all-items.modal-overlay .modal-sheet,
  #modal-q-stats.modal-overlay .modal-sheet { height: calc(100dvh - 16px); }

  #modal-wh-item-form .modal-body,
  #modal-wh-transaction .modal-body,
  #modal-wh-history .modal-body,
  #modal-q-form .modal-body,
  #modal-q-view-items .modal-body,
  #modal-q-all-items .modal-body,
  #modal-q-stats .modal-body { padding: 16px 14px; }

  #modal-wh-item-form .form-row-2,
  #modal-wh-transaction .form-row-2,
  #modal-q-form .form-row-2,
  #modal-q-form .q-item-editable-fields .form-row-2 { grid-template-columns: 1fr; }

  #modal-wh-item-form .form-actions,
  #modal-wh-transaction .form-actions,
  #modal-q-form .form-actions { display: grid; grid-template-columns: 1fr 1fr; }

  #modal-wh-item-form .form-actions .btn,
  #modal-wh-transaction .form-actions .btn,
  #modal-q-form .form-actions .btn { min-width: 0; width: 100%; }

  #modal-q-form .form-fieldset { padding: 14px 12px; border-radius: 16px; }

  #modal-q-form .q-item-row { padding: 13px; border-radius: 15px; }

  #modal-q-form .q-item-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "product product"
      "qty unit"
      "price price"
      "remove remove";
    gap: 9px;
  }

  #modal-q-form .q-item-remove-wrap { justify-self: end; }
  #modal-q-form .q-item-grid > .btn-sm { grid-column: 1 / -1; }
  #modal-q-form .q-item-product-dropdown,
  #modal-q-form .q-edit-product-dropdown { width: 100%; }

  #modal-q-form .q-totals-box { width: 100%; margin-inline: 0; }

  #modal-q-all-items .q-all-items-toolbar {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
  }

  #modal-q-all-items .q-all-items-results-head { align-items: flex-start; flex-direction: column; }

  #modal-q-all-items .q-all-item-card {
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    padding: 14px;
    border-radius: 16px;
  }

  #modal-q-all-items .q-all-item-card__top { grid-column: 1 / -1; }
  #modal-q-all-items .q-all-item-card__chips { grid-column: 1 / -1; }
  #modal-q-all-items .q-all-item-card__meta { grid-column: 1; grid-row: auto; }
  #modal-q-all-items .q-all-item-card__foot { grid-column: 2; grid-row: auto; }

  #modal-q-all-items .q-items-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }

  #modal-q-stats .q-stats-hero { grid-template-columns: 1fr; padding: 18px; }
  #modal-q-stats .q-stats-hero__orbit { min-height: 160px; }
  #modal-q-stats .q-stats-orbit-ring--one { width: 158px; height: 158px; }
  #modal-q-stats .q-stats-orbit-ring--two { width: 118px; height: 118px; }
  #modal-q-stats .q-stats-orbit-core { width: 96px; height: 96px; }
  #modal-q-stats .q-stats-grid,
  #modal-q-stats .q-stats-sections { grid-template-columns: 1fr; }
  #modal-q-stats .q-stats-donut-shell { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  #screen-warehouse .wh-project-card {
    grid-template-columns: 42px minmax(0,1fr);
    gap: 11px;
  }

  #screen-warehouse .wh-project-card__icon { width: 42px; height: 42px; border-radius: 13px; }

  #screen-warehouse .wh-project-card__aside {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid #edf2f6;
  }

  #screen-quotations #q-detail-actions { grid-template-columns: 1fr; }

  #modal-q-form .q-item-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "product"
      "qty"
      "unit"
      "price"
      "remove";
  }

  #modal-q-form .q-item-remove-wrap { justify-self: stretch; }
  #modal-q-form .q-item-remove-wrap .btn-icon { width: 100% !important; }

  #modal-q-form .form-actions,
  #modal-wh-item-form .form-actions,
  #modal-wh-transaction .form-actions { grid-template-columns: 1fr; }

  #modal-q-all-items .q-all-item-card { grid-template-columns: 1fr; }
  #modal-q-all-items .q-all-item-card__meta,
  #modal-q-all-items .q-all-item-card__foot { grid-column: 1; }
  #modal-q-all-items .q-all-item-card__actions { display: grid; grid-template-columns: 1fr; }
  #modal-q-all-items .q-items-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-warehouse .wh-project-card,
  #screen-quotations .quotation-project-card,
  #screen-quotations .quotation-item,
  #modal-q-stats .q-stats-orbit-ring,
  #modal-q-stats .q-stats-bar-row,
  #modal-q-stats .q-stats-bar-fill,
  #modal-q-stats .q-stats-donut { animation: none; }
}