/* Offertsidorna (/offerter/<id>/ och sammanfattningen) i Zimlas nya skal:
   samma moduler, typografi och knappar som projektsidan. Inga serifrubriker. */
.quote-detail-page, .quote-review-page {
  --font-headline: Outfit, Inter, ui-sans-serif, system-ui, sans-serif;
  --pj-ink: #17211a; --pj-ink-2: #35493d; --pj-muted: #6b7a70; --pj-faint: #9fb3a6; --pj-line: #e3e8e2; --pj-line-2: #eef1ec;
  --pj-leaf: #3a8874; --pj-leaf-dark: #2f6f5c; --pj-ok-2: #e5f3ea;
  color: var(--pj-ink);
}
/* Rubriker: Outfit 500, arbetsytans storlekar. */
.quote-detail-page h1, .quote-detail-page h2, .quote-detail-page h3,
.quote-review-page h1, .quote-review-page h2, .quote-review-page h3,
.quote-detail-page .quote-review-title, .quote-review-page .quote-review-title,
.quote-detail-page .font-headline, .quote-review-page .font-headline {
  font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 500 !important; letter-spacing: -0.01em;
}
.quote-detail-page .quote-detail-hero__title { font-size: 22px !important; line-height: 1.15; }
.quote-detail-page .quote-review-title, .quote-review-page .quote-review-title { font-size: 17px !important; }
.quote-detail-page .quote-review-title small, .quote-review-page .quote-review-title small { font-family: inherit; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--pj-muted); }
.quote-detail-page .quote-review-eyebrow, .quote-review-page .quote-review-eyebrow,
.quote-detail-page .quote-detail-hero__number, .quote-detail-page .quote-detail-hero__version {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: #8a9b83;
}
/* Kort som projektsidans moduler. */
.quote-detail-page .quote-review-card, .quote-review-page .quote-review-card,
.quote-detail-page .quote-detail-hero, .quote-detail-page .quote-review-sidebar-card, .quote-review-page .quote-review-sidebar-card {
  border: 1px solid var(--pj-line); border-radius: 16px; background: #fff; box-shadow: 0 3px 12px rgba(40, 70, 40, 0.03);
}
.quote-detail-page .quote-review-topline, .quote-review-page .quote-review-topline {
  background: transparent; border: 0; box-shadow: none;
}
/* Belopp: grönt, tabellsiffror; statuspill som projektets chip. */
.quote-detail-page .quote-detail-hero__total-value, .quote-detail-page .quote-detail-status-card__amount, .quote-detail-page .quote-detail-pay-total,
.quote-review-page .quote-review-total-value {
  font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif !important; font-weight: 500 !important; color: var(--pj-leaf-dark); font-variant-numeric: tabular-nums;
}
.quote-detail-page .quote-detail-status-pill { border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; background: var(--pj-line-2); color: var(--pj-muted); }
.quote-detail-page .quote-detail-status-pill--sent { background: #e8f0fa; color: #3b6fb0; }
.quote-detail-page .quote-detail-status-pill--accepted { background: var(--pj-ok-2); color: var(--pj-leaf-dark); }
.quote-detail-page .quote-detail-status-pill--draft { background: #fbf3e3; color: #b7791f; }
/* Knappar: samma som projektsidans kbtn. */
.quote-detail-page .quote-detail-primary-action, .quote-review-page .quote-review-primary-action {
  height: 36px; min-height: 36px !important; padding: 0 14px !important; border-radius: 10px !important; background: var(--pj-leaf-dark) !important; color: #fff !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; letter-spacing: 0;
}
.quote-detail-page .quote-detail-primary-action:hover, .quote-review-page .quote-review-primary-action:hover { background: #27604f !important; }
.quote-detail-page .quote-detail-ghost-action, .quote-detail-page .quote-detail-secondary-action, .quote-review-page .quote-review-ghost-action {
  height: 36px; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--pj-line); background: #fff; color: var(--pj-ink); font-size: 13px; font-weight: 500; box-shadow: none;
}
/* Flikar överst: understruken flik som projektets steg. */
.quote-detail-page .quote-detail-desktop-tabs a { font-size: 13px; font-weight: 500; color: var(--pj-muted); border-radius: 0; padding: 10px 2px; margin-right: 18px; background: none; }
.quote-detail-page .quote-detail-desktop-tabs a.is-active { color: var(--pj-ink); box-shadow: inset 0 -2px 0 var(--pj-ink); }
/* Arbetsgrupper och rader: kompakta som Offert-fliken. */
.quote-detail-page .quote-detail-work-group__name, .quote-detail-page .quote-detail-work-line__name { font-weight: 500; font-size: 13px; }
.quote-detail-page .quote-detail-work-group__meta, .quote-detail-page .quote-detail-work-line__meta { font-size: 11px; color: var(--pj-muted); }
.quote-detail-page .quote-detail-work-group__metrics { font-size: 12px; font-variant-numeric: tabular-nums; }
.quote-detail-page .quote-detail-work-group__metrics strong, .quote-detail-page .quote-detail-work-line__amount { color: var(--pj-leaf-dark); font-weight: 500; }
/* Tidslinje och nyckeltal: lugn brödtext. */
.quote-detail-page .quote-detail-timeline-item h3 { font-size: 13px !important; }
.quote-detail-page .quote-detail-timeline-item p, .quote-detail-page .quote-detail-metric__hint { font-size: 12px; color: var(--pj-muted); }
.quote-detail-page .quote-detail-metric__value { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif !important; font-weight: 500 !important; font-size: 18px; }
.quote-detail-page .quote-detail-metric__label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a9b83; }
.quote-detail-page .quote-detail-totals-card__body { font-size: 12.5px; }
.quote-detail-page .quote-detail-totals-card__body strong, .quote-detail-page .quote-detail-totals-card__body b { font-weight: 500; }
.quote-detail-page .quote-detail-hero__client { font-size: 12.5px; color: var(--pj-muted); }

/* Sammanfattningen använder samma arbetsyta och modulskala som offertdetaljen. */
.quote-summary-page {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 0 32px;
  min-height: 0;
  background: transparent;
}
.quote-summary-page .quote-review-topline { min-height: 40px; margin-bottom: 12px; }
.quote-summary-page .quote-summary-heading { margin-bottom: 14px; }
.quote-summary-page .quote-summary-heading .phead-row { grid-template-columns: minmax(0, 1fr) auto; }
.quote-summary-heading__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quote-summary-page .quote-summary-links { display: none; }
.quote-summary-page .quote-review-summary-head { flex-wrap: wrap; gap: 12px; padding: 16px 18px 12px; border-color: var(--pj-line-2); }
.quote-summary-page .quote-review-title-stack { gap: 10px; }
.quote-summary-page .quote-review-title-icon { width: 20px; height: 24px; border-radius: 0; background: none; color: #72906e; font-size: 20px; }
.quote-summary-page .quote-review-title small { display: block; margin: 4px 0 0; }
.quote-summary-page .quote-review-card--pad,
.quote-summary-page .quote-review-sidebar-card { padding: 16px 18px; }
.quote-summary-page .quote-review-card--summary { padding: 0; }
.quote-summary-page .quote-review-card__header { border-color: var(--pj-line-2); }
.quote-summary-page .quote-review-eyebrow { font-size: 10px; letter-spacing: .08em; }
.quote-summary-page .quote-review-icon-chip,
.quote-summary-page .quote-review-attachment-icon { width: 26px; height: 26px; border-radius: 8px; background: #f2f5ed; color: #72906e; font-size: 16px; }
.quote-summary-page .quote-review-group__summary { padding: 10px 18px; gap: 12px; }
.quote-summary-page .quote-review-group__name { font-size: 13px; font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
.quote-summary-page .quote-review-group__count { font-size: 11px; color: var(--pj-muted); }
.quote-summary-page .quote-review-group__details,
.quote-summary-page .quote-review-room__details { padding-inline: 18px; }
.quote-summary-page .quote-review-line-name { flex-wrap: wrap; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.quote-summary-page .quote-review-line-name > span { min-width: 0; max-width: 100%; }
.quote-summary-page .quote-review-line-detail { white-space: normal; }
.quote-summary-page .quote-review-metric strong,
.quote-summary-page .quote-review-room__total,
.quote-summary-page .quote-review-recipient-name { font-weight: 500; font-variant-numeric: tabular-nums; }
.quote-summary-page .quote-review-subpanel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.quote-summary-page .quote-review-attachment-tile { padding: 12px; border-color: var(--pj-line-2); border-radius: 12px; background: #fbfcfb; box-shadow: none; }
.quote-summary-page .quote-review-attachment-title,
.quote-summary-page .quote-review-option__copy strong { font-size: 13px; font-weight: 500; }
.quote-summary-page .quote-review-attachment-title { -webkit-hyphens: auto; hyphens: auto; }
.quote-summary-page .quote-review-file-list a,
.quote-summary-page .quote-review-recipient-contact,
.quote-summary-page .quote-review-info-list dd { overflow-wrap: anywhere; white-space: normal; }
.quote-summary-page .quote-review-terms-panel { border-color: var(--pj-line-2); }
/* Smal huvudkolumn (surfplatta/1024): knapparna bryter under rubriken i stället för att tryckas ihop. */
.quote-summary-page .quote-review-terms-heading { flex-wrap: wrap; row-gap: 10px; }
.quote-summary-page .quote-review-terms-heading-actions { flex-wrap: wrap; }
.quote-summary-page .quote-review-terms-heading-actions button { white-space: nowrap; }
.quote-summary-page .quote-review-terms-list--readonly { gap: 0; }
.quote-summary-page .quote-review-terms-list--readonly .quote-review-term-card { padding: 10px 0; border: 0; border-bottom: 1px solid var(--pj-line-2); border-radius: 0; background: none; box-shadow: none; }
.quote-summary-page .quote-detail-totals-card { padding: 0; }
.quote-summary-page .quote-detail-sidebar-card__header { padding: 16px 18px 12px; }
.quote-summary-page .quote-detail-totals-card__body { padding: 0 18px 16px; }
.quote-summary-page .quote-detail-totals-card__body strong,
.quote-summary-page .quote-detail-totals-card__body dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.quote-summary-page .quote-detail-pay-total strong { font-size: 22px; color: var(--pj-leaf-dark); }
.quote-summary-page :is(a, button, input, textarea):focus-visible { outline: 2px solid var(--pj-leaf-dark); outline-offset: 2px; }
@media (min-width: 1024px) {
  .quote-summary-page .quote-review-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
  .quote-summary-page .quote-review-main,
  .quote-summary-page .quote-review-sidebar { gap: 14px; }
  .quote-summary-page .quote-review-sidebar { position: static; max-height: none; overflow: visible; }
  .quote-summary-page .quote-review-group__metrics { gap: 8px; }
}
@media (max-width: 1023px) {
  .quote-summary-page { padding-bottom: 12px; }
  /* Docken ligger över sidans nederkant – bläddringsraden ska stå ovanför den, och docken har redan orben. */
  .zimla-has-mobile-dock .quote-summary-page { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  .zimla-has-mobile-dock .quote-summary-page .quote-review-topline > [data-zimla-ai-orb-button] { display: none; }
  .quote-summary-page .quote-summary-heading { display: none; }
  .quote-summary-page .quote-review-topline { margin-bottom: 0; }
  .quote-summary-page .quote-review-crumbs { min-width: 0; flex-wrap: wrap; row-gap: 4px; }
  .quote-summary-page .quote-review-mobile-chapters { border-radius: 16px; border-color: var(--pj-line); }
  .quote-summary-page .quote-review-mobile-overview { background: #fff; border-radius: 16px; border-color: var(--pj-line); }
  .quote-summary-page .quote-review-mobile-overview__head { padding: 0 0 14px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--pj-line-2); }
  .quote-summary-page .quote-review-mobile-overview__head strong { font-size: 22px; font-weight: 500; }
  .quote-summary-page .quote-review-mobile-overview__rows > div { border-color: var(--pj-line-2); }
  .quote-summary-page .quote-review-card--pad,
  .quote-summary-page .quote-review-sidebar-card { padding: 14px; }
  .quote-summary-page .quote-review-card--summary,
  .quote-summary-page .quote-detail-totals-card { padding: 0; }
  .quote-summary-page .quote-review-summary-head { padding: 14px; }
  .quote-summary-page .quote-review-summary-actions { flex-wrap: wrap; min-width: 0; }
  .quote-summary-page .quote-review-group__summary { padding: 8px 14px; }
  .quote-summary-page .quote-review-group__details,
  .quote-summary-page .quote-review-room__details { padding-inline: 10px; }
  .quote-summary-page .quote-review-group__toggle,
  .quote-summary-page .quote-review-room__summary,
  .quote-summary-page .quote-review-view-switch button,
  .quote-summary-page .quote-review-expand-all { min-height: 44px; }
  .quote-summary-page .quote-review-back { width: 40px; height: 40px; min-height: 40px; flex: none; border-radius: 999px; }
  .quote-summary-page .quote-review-file-list a { display: flex; align-items: center; min-height: 44px; flex: 1; }
  .quote-summary-page .quote-review-line-room { display: inline; }
  .quote-summary-page .quote-review-sidebar > #quote-totals { grid-column: 1 / -1; }
  .quote-summary-page .quote-summary-links { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; order: 4; }
  .quote-summary-page .quote-summary-links .kbtn { min-height: 44px; }
}

/* Sparade offerter följer projektytans phead/mod-skala, utan dokumentark runt korten. */
.quote-detail-page--retained {
  width: min(1180px, 100%);
  max-width: 1180px;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.quote-detail-page--retained .quote-detail-main-shell {
  gap: 14px;
  padding: 0 0 32px;
  background: transparent;
}
.quote-detail-page--retained .quote-detail-topline {
  margin: 0 0 12px;
  min-height: 40px;
  padding: 0;
  gap: 12px;
}
.quote-detail-page--retained .quote-detail-topline__identity > strong,
.quote-detail-page--retained .quote-detail-version-menu > summary > strong { display: none; }
.quote-detail-page--retained .quote-detail-topline__identity span {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .04em;
}
.quote-detail-page--retained .quote-detail-hero {
  padding: 16px 18px 0;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 24px 60px -40px rgba(60, 40, 10, .5);
}
.quote-detail-page--retained .quote-detail-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 0 0 12px;
}
.quote-detail-page--retained .quote-detail-hero__title {
  margin: 4px 0 0;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.quote-detail-page--retained .quote-detail-hero__total { padding-top: .25rem; }
.quote-detail-page--retained .quote-detail-hero__total strong {
  font-size: 20px;
  font-weight: 500;
  color: var(--pj-leaf-dark);
  white-space: nowrap;
}
.quote-detail-page--retained .quote-detail-hero__total small b { font-weight: 400; }
.quote-detail-page--retained .quote-detail-retained-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--pj-line-2);
  color: var(--pj-muted);
  font-size: .75rem;
  line-height: 1.5;
}
.quote-detail-retained-note .material-symbols-outlined { font-size: 1rem; flex: 0 0 auto; margin-top: .05rem; }
.quote-detail-page--retained .quote-detail-desktop-tabs {
  gap: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--pj-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
}
.quote-detail-page--retained .quote-detail-desktop-tabs a {
  min-height: 42px;
  padding: 0 14px;
  margin: 0;
}
.quote-detail-page--retained .quote-detail-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  margin-top: 0;
  align-items: start;
}
.quote-detail-page--retained .quote-review-card {
  box-shadow: 0 3px 12px rgba(40, 70, 40, .03);
  border-color: var(--pj-line);
  border-radius: 16px;
  background: #fff;
}
.quote-detail-page--retained .quote-detail-live-main,
.quote-detail-page--retained .quote-detail-live-rail,
.quote-detail-page--retained .quote-detail-mobile-panel { gap: 14px; }
.quote-detail-page--retained .quote-detail-live-rail { position: static; }
.quote-detail-page--retained .quote-detail-flow-card {
  padding: 16px 18px;
}
.quote-detail-page--retained .quote-review-title-stack { gap: 10px; }
.quote-detail-page--retained .quote-review-title-stack > .quote-review-title-icon {
  display: inline-flex;
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #72906e;
  font-size: 20px;
}
.quote-detail-page--retained .quote-detail-flow-card .quote-review-card__header {
  padding: 0 0 .75rem;
  border: 0;
}
.quote-detail-page--retained .quote-detail-flow-grid { padding: 0; border: 0; background: transparent; }
.quote-detail-page--retained .quote-detail-flow-step__dot { width: 24px; height: 24px; }
.quote-detail-page--retained .quote-detail-flow-step__label { font-size: 11px; }
.quote-detail-page--retained .quote-detail-status-card { display: none; }
.quote-detail-page--retained .quote-detail-section-head,
.quote-detail-page--retained .quote-detail-sidebar-card__header { padding: 16px 18px 12px; border-bottom-color: var(--pj-line-2); }
.quote-detail-page--retained .quote-review-eyebrow { color: #8a9b83; font-size: 10px; letter-spacing: .08em; }
.quote-detail-page--retained h2.quote-review-title { font-size: 17px !important; font-weight: 500 !important; }
.quote-detail-page--retained .quote-detail-card-link {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--pj-line);
  border-radius: 10px;
  background: #fff;
  color: var(--pj-ink);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}
.quote-detail-page--retained .quote-detail-work-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 5.5rem 6.5rem 1rem;
  gap: .65rem;
  padding: 7px 18px;
  border-block: 1px solid var(--pj-line-2);
  background: #fbfcfb;
  color: var(--pj-muted);
  font-size: .65rem;
  text-align: right;
}
.quote-detail-work-columns > :first-child { text-align: left; }
.quote-detail-page--retained .quote-detail-work-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  min-height: 58px;
  padding: 10px 18px;
}
.quote-detail-page--retained .quote-detail-work-group__identity { gap: .65rem; min-width: 0; }
.quote-detail-page--retained .quote-detail-work-group__identity .quote-review-icon-chip {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f2f5ed;
  font-size: 16px;
  color: #72906e;
}
.quote-detail-page--retained .quote-detail-work-group__name { overflow-wrap: anywhere; }
.quote-detail-page--retained .quote-detail-work-group__metrics {
  display: grid;
  grid-template-columns: 4rem 5.5rem 6.5rem 1rem;
  gap: .65rem;
  width: auto;
  padding: 0;
  text-align: right;
  justify-items: end;
  white-space: nowrap;
}
.quote-detail-page--retained .quote-detail-work-group__metrics small { display: none; }
.quote-detail-page--retained .quote-detail-work-group[open] > summary,
.quote-detail-page--retained .quote-detail-work-group > summary:hover { background: #fbfcfb; }
.quote-detail-page--retained .quote-detail-work-line { gap: 1rem; }
.quote-detail-page--retained .quote-detail-work-line__name { overflow-wrap: anywhere; }
.quote-detail-page--retained .quote-detail-totals-card__body { padding: 4px 18px 12px; }
.quote-detail-page--retained .quote-detail-totals-card .quote-review-total-list { font-size: .78rem; }
.quote-detail-page--retained .quote-detail-totals-card .quote-review-total-list > div { min-height: 2.15rem; }
.quote-detail-page--retained .quote-detail-customer-card__person small,
.quote-detail-page--retained .quote-detail-acceptance-head p { overflow-wrap: anywhere; }
.quote-detail-page--retained .quote-detail-signature-box { background: #fcfdfb; }
.quote-detail-page--retained .quote-detail-conversation-card,
.quote-detail-page--retained .quote-detail-timeline-card { padding: 16px 18px; }
.quote-detail-page--retained :is(a, button, summary):focus-visible { outline: 2px solid var(--pj-leaf-dark); outline-offset: 3px; }
.quote-detail-page--retained [id^="quote-detail-"] { scroll-margin-top: 5rem; }
@media (max-width: 1100px) {
  .quote-detail-page--retained .quote-detail-live-grid { grid-template-columns: minmax(0, 1fr) 16rem; gap: .85rem; }
  .quote-detail-page--retained .quote-detail-work-columns { display: none; }
  .quote-detail-page--retained .quote-detail-work-group > summary { grid-template-columns: minmax(0, 1fr); }
  .quote-detail-page--retained .quote-detail-work-group__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) 1rem; width: 100%; }
  .quote-detail-page--retained .quote-detail-work-group__metrics small { display: block; color: var(--pj-muted); font-size: .6rem; font-weight: 400; }
}
@media (max-width: 760px) {
  .quote-detail-page--retained { width: 100%; margin: 0; background: transparent; }
  .quote-detail-page--retained .quote-detail-topline { margin: 0; padding: .5rem 0; }
  .quote-detail-page--retained .quote-detail-main-shell { padding: .75rem 0 calc(6.5rem + env(safe-area-inset-bottom)); }
  .quote-detail-page--retained .quote-detail-hero { padding: 1rem 1rem 0; }
  .quote-detail-page--retained .quote-detail-hero__top { display: block; padding-bottom: .8rem; }
  .quote-detail-page--retained .quote-detail-hero__total { margin-top: .85rem; text-align: left; }
  .quote-detail-page--retained .quote-detail-hero__total strong { font-size: 1.4rem; }
  .quote-detail-page--retained .quote-detail-retained-note { font-size: .7rem; }
  .quote-detail-page--retained .quote-detail-hero__mobile-actions { margin-inline: -1rem; }
  .quote-detail-page--retained .quote-detail-live-grid { display: flex; flex-direction: column; gap: .85rem; }
  .quote-detail-page--retained .quote-detail-live-main,
  .quote-detail-page--retained .quote-detail-live-rail { width: 100%; }
  .quote-detail-page--retained .quote-detail-flow-card { padding: 14px; }
  .quote-detail-page--retained .quote-detail-card-link { min-height: 2.75rem; }
  .quote-detail-page--retained .quote-detail-work-group > summary { min-height: 2.75rem; }
}

/* Offertsidan: skicka en skickad offert till en ny mottagare. */
.quote-detail-new-recipient { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(23 32 27 / 8%); }
.quote-detail-new-recipient label { color: #4f5c54; font-size: .8rem; }
.quote-detail-new-recipient > div { display: flex; gap: 8px; }
.quote-detail-new-recipient input { flex: 1; min-width: 0; min-height: 38px; padding: 0 12px; border: 1px solid rgb(23 32 27 / 12%); border-radius: 10px; background: #fafbf8; font: inherit; font-size: .86rem; }
.quote-detail-new-recipient input:focus { border-color: #028a51; outline: none; box-shadow: 0 0 0 3px rgb(2 138 81 / 14%); }

/* Offertens egen sida (/offerter/<id>/) i projektsidans ram: inget eget ark eller fast huvud
   som klipps – samma bredd, bakgrund, brödsmulor och frostade huvudkort som projektsidan. */
.quote-detail-shell .quote-review-page.quote-detail-page {
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.quote-detail-shell .quote-detail-topline {
  position: static !important;
  top: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.quote-detail-shell .quote-detail-topline__back { display: none !important; }
.quote-detail-shell .quote-detail-hero {
  padding: 16px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 24px 60px -40px rgba(60, 40, 10, 0.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.quote-detail-shell .quote-review-card { border-radius: 16px; }
/* Telefon: brödsmulorna bär titeln – appbalken visar bara menyknappen, till höger. Huvudkortet
   tar hela bredden som övriga kort. */
@media (max-width: 760px) {
  .quote-detail-shell .quote-detail-topline { display: flex !important; justify-content: flex-end; margin: -40px 0 8px !important; min-height: 0 !important; }
  /* Menyknappen ligger på brödsmulornas rad – smulorna bryter före den. */
  .quote-detail-shell .pcrumb-block { padding-right: 48px; }
}
@media (max-width: 1023px) {
  .quote-detail-shell .quote-detail-mobile-appbar__identity > :not(.quote-detail-mobile-appbar__menu) { display: none !important; }
  .quote-detail-shell .quote-detail-hero { margin-inline: 0 !important; width: auto !important; }
}
@media (max-width: 1023px) {
  /* Projektramen har redan sidomarginal – innehållet ska inte dra in en gång till. */
  .quote-detail-shell .quote-detail-main-shell { padding-inline: 0 !important; }
  .quote-detail-shell .quote-detail-mobile-tabs { margin-inline: 0 !important; }
}

/* Telefon i projektramen: korten är vita moduler här, så de som ritades kantlösa får inre marginal;
   faktarutorna växer med texten i stället för att klippa den; nästa handling svävar ovanför docken. */
@media (max-width: 760px) {
  .quote-detail-shell .quote-detail-page :is(.quote-detail-flow-card, .quote-detail-customer-card, .quote-detail-totals-card) { padding: 14px; }
  .quote-detail-shell .quote-detail-page .quote-detail-metrics-card { border: 0; background: transparent; box-shadow: none; }
  /* Inget fast appfält ovanför längre – flikarna fastnar mot sidans överkant. */
  .quote-detail-shell .quote-detail-mobile-tabs { top: env(safe-area-inset-top, 0px); }
  .quote-detail-shell .quote-detail-metric { height: auto; min-height: 74px; }
  .quote-detail-shell .quote-detail-customer-card__person { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .quote-detail-shell .quote-detail-resend-button { min-height: 36px; white-space: nowrap; }
  .quote-detail-shell .quote-detail-metric__value,
  .quote-detail-shell .quote-detail-metric__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .quote-detail-shell .quote-detail-hero__total { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; }
  .quote-detail-shell .quote-detail-hero__total strong { white-space: nowrap; }
  .quote-detail-shell .quote-detail-hero__total small { margin-left: auto; }
  .zimla-has-mobile-dock .quote-detail-shell .quote-detail-mobile-sticky-action {
    left: 50%; right: auto; width: min(28rem, calc(100% - 2rem)); transform: translateX(-50%);
    bottom: calc(5.15rem + env(safe-area-inset-bottom)); padding: 0;
    border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .zimla-has-mobile-dock .quote-detail-shell .quote-detail-mobile-sticky-action :is(a, button) { box-shadow: 0 14px 30px -18px rgb(20 50 35 / 55%); }
  .zimla-has-mobile-dock .quote-detail-shell .quote-detail-main-shell { padding-bottom: 72px !important; }
}
@media (max-width: 374px) {
  /* Smal telefon: Skicka igen under mottagaren, så namn och adress får raden. */
  .quote-detail-shell .quote-detail-customer-card__person > form { grid-column: 2 / -1; }
  .quote-detail-shell .quote-detail-hero__total small { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* Zimla AI-panelen öppen på desktop tar ~380px: sidan är då smalare än fönstret, så kolumnerna
   följer sidans egen bredd (container) i stället för fönstrets. Samma staplade läge som surfplattan. */
@media (min-width: 1101px) {
  .quote-detail-shell .quote-detail-page { container: qdetail / inline-size; }
  @container qdetail (max-width: 900px) {
    .quote-detail-live-grid { grid-template-columns: minmax(0, 1fr); }
    .quote-detail-live-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }
}
@media (min-width: 1024px) {
  .quote-summary-page { container: qsummary / inline-size; }
  @container qsummary (max-width: 880px) {
    .quote-summary-page .quote-review-grid { grid-template-columns: minmax(0, 1fr); }
    .quote-summary-page .quote-review-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .quote-summary-page .quote-review-sidebar > :is(.quote-review-primary-action, .quote-review-customer-preview, button, a) { grid-column: 1 / -1; }
  }
}