/* Hand-maintained overrides loaded after output.css.
   Tailwind CLI is not available in this environment, so estimate-ux-spec
   tweaks live here instead of being compiled into output.css. */

/* Suma su PVM in normal black, not blue */
.app-main .flow-price-summary-row.is-strong strong {
  color: #0f172a;
}

/* Sticky stepper while scrolling */
.app-main .flow-stepper-card {
  position: sticky;
  top: 16px;
  align-self: start;
  min-height: 0;
}

/* Estimate tables read like documents; input chrome only in edit mode */
[data-flow-estimate] .flow-table {
  table-layout: fixed;
}
[data-flow-estimate] .flow-table th:first-child,
[data-flow-estimate] .flow-table td:first-child {
  width: 42%;
}
[data-flow-estimate] .flow-table th:last-child,
[data-flow-estimate] .flow-table td:last-child {
  width: 46px;
}
[data-flow-estimate] .flow-table th,
[data-flow-estimate] .flow-table td {
  border: 1px solid #eef2f7;
}
[data-flow-estimate] .flow-cell-input {
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  padding-left: 2px;
}
[data-flow-page][data-flow-editing="true"] [data-flow-estimate] .flow-cell-input:not([readonly]) {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  cursor: text;
  padding-left: 8px;
}

/* Bendra suma as a sticky footer, styled like the new-offer footer */
.flow-main-panel .flow-total-band {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  z-index: 5;
  margin-top: 22px;
  padding: 16px 4px;
}
.flow-total-footer {
  display: flex;
  justify-content: flex-end;
}
.flow-footer-total {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 28px;
}
.flow-footer-total > div {
  display: grid;
  gap: 2px;
  text-align: right;
}
.flow-footer-total > div > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.flow-footer-total > div > strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}
.flow-footer-total .flow-footer-grand > strong {
  font-size: 20px;
}

/* Discount block in the footer */
.flow-footer-discount strong[data-flow-discount-amount] {
  color: #b45309;
}
.flow-footer-discount.is-empty {
  display: none;
}
[data-flow-page][data-flow-editing="true"] .flow-footer-discount.is-empty {
  display: grid;
}
.flow-discount-edit {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
[data-flow-page][data-flow-editing="true"] .flow-discount-edit {
  display: inline-flex;
}
.flow-discount-edit input[type="number"] {
  width: 84px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}
.flow-discount-edit select {
  height: 30px;
}

/* Pokytis percentage in grey, not blue */
.flow-compare-item .flow-small-positive {
  color: #64748b;
}

/* Galutinis matavimas: gate/wicket capture as twin flow-section cards with the
   Naujas pasiūlymas field controls inside */
.app-main .flow-measure-openings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.app-main .flow-measure-openings .flow-section {
  margin: 0;
  height: 100%;
}
.app-main .flow-opening-body {
  display: grid;
  gap: 14px;
}
.app-main .flow-opening-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.app-main .flow-opening-fields .create-field {
  margin: 0;
}
.app-main .flow-opening-fields .create-field.is-wide,
.app-main .flow-opening-fields .create-check {
  grid-column: 1 / -1;
}

/* Segment grids size to content (the estimate's fixed 34%-name layout squeezes
   the 6-column measurement table and overlaps its headers) */
.app-main .flow-segments-table {
  table-layout: auto;
}
.app-main .flow-segments-table th,
.app-main .flow-segments-table td {
  width: auto;
}
.app-main .flow-segments-table th {
  white-space: normal;
  vertical-align: bottom;
}
.app-main .flow-segments-table th:first-child,
.app-main .flow-segments-table td:first-child {
  width: 44px;
}
.app-main .flow-segments-table th:last-child,
.app-main .flow-segments-table td:last-child {
  width: 46px;
}
.app-main .flow-segments-table .flow-cell-input.is-number {
  min-width: 86px;
}

/* Measurement actions: clear separation, save as neutral secondary */
.app-main .flow-measure-actions {
  gap: 12px;
  flex-wrap: wrap;
}
.app-main .flow-measure-save {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #0f172a;
  border-radius: 8px;
  padding: 0 18px;
  background: #0f172a;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.app-main .flow-measure-save:hover {
  background: #1e293b;
}
.app-main .flow-measure-save:focus-visible {
  outline: 3px solid rgb(15 23 42 / 0.24);
  outline-offset: 2px;
}

/* Contract-locked banner on the Galutinė sąmata estimate */
.app-main .flow-contract-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid #16a34a;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
}

/* Segment grid footer: hint on the left, add-row button on the right */
.app-main .flow-segments-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.app-main .flow-segments-hint {
  font-size: 12px;
  color: #64748b;
}
.app-main .flow-segments-live {
  font-size: 13px;
  font-weight: 500;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}
/* Variant-card styling lives in the PRELIMINARI SĄMATA block lower in this
   file (the modern recreation). The earlier draft block was removed to stop it
   double-padding the measurement-step variant picker. */

/* Normalized (Plotis gamybai) cell reads as a computed production value */
.app-main .flow-norm-output {
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  font-weight: 600;
}
.app-main .flow-norm-output[data-empty="true"] {
  color: #94a3b8;
  font-weight: 500;
}

/* Papildomi vartai / varteliai: dynamic add/remove rows */
.app-main .create-extra-openings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-main .create-extra-openings-list:empty {
  display: none;
}
/* Self-contained row layout: the inherited .create-width-action-row grid + the
   field components' own label/control grids collide in this 3-item row, so lay it
   out as a flex row with each field stacked label-over-control. */
.app-main .create-extra-opening-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.app-main .create-extra-opening-row .create-choice-field,
.app-main .create-extra-opening-row .create-unit-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  width: auto;
}
.app-main .create-extra-opening-row .create-choice-field {
  flex: 1 1 auto;
  min-width: 0;
}
.app-main .create-extra-opening-row .create-unit-field {
  flex: 0 0 130px;
}
.app-main .create-extra-opening-row .create-extra-opening-kind,
.app-main .create-extra-opening-row .create-unit-input {
  width: 100%;
}
.app-main .create-extra-opening-remove {
  align-self: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: transparent;
  color: #b91c1c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.app-main .create-extra-opening-remove:hover {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #ffffff;
}
.app-main .create-add-opening-btn {
  margin-top: 12px;
  align-self: start;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
}
.app-main .create-add-opening-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
}

/* Transient toasts */
.app-toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 8px;
  z-index: 60;
}
.app-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.18);
  animation: app-toast-in 0.18s ease-out;
}
.app-toast.is-error {
  background: #b91c1c;
}
.app-toast.is-success {
  background: #047857;
}
@keyframes app-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   B1 — Unified input box geometry (symmetry across pages).
   The shared type scale (font/colour/weight) is already unified in
   output.css; the *box dimensions* still diverged (heights 28/34/38/40,
   radii 5/7/8/10). Normalize every editable text/number/select control
   onto one height + radius so the new-offer calculator and the flow
   forms read as one product. Loaded after output.css, so these win.
   ============================================================ */
:root {
  --app-input-height: 40px;
  --app-input-radius: 8px;
}
.app-main .create-field input,
.app-main .create-field select,
.app-main .create-unit-input input,
.app-main .create-text-row-field input,
.app-main .create-select-field select,
.app-main .create-quote-number input {
  height: var(--app-input-height);
  border-radius: var(--app-input-radius);
}

/* ============================================================
   B2 — Matavimas (field measurement) made phone-friendly.
   Scoped to the measurement wraps so the dense read-only estimate
   tables stay compact. Comfortable input height, normal weight
   (was 850), generous touch targets, and on narrow screens each
   row collapses into a labelled card (no sideways scroll).
   ============================================================ */
#initial-measurement-wrap .flow-cell-input,
#final-measurement-wrap .flow-cell-input {
  height: var(--app-input-height);
  border-radius: var(--app-input-radius);
  font-size: 15px;
  font-weight: 400;
}
#initial-measurement-wrap .flow-row-action,
#final-measurement-wrap .flow-row-action {
  width: 40px;
  height: 40px;
}
@media (pointer: coarse) {
  #initial-measurement-wrap .flow-cell-input,
  #final-measurement-wrap .flow-cell-input {
    height: 44px;
  }
  #initial-measurement-wrap .flow-row-action,
  #final-measurement-wrap .flow-row-action {
    width: 44px;
    height: 44px;
  }
}

/* Live measurement summary: measured running total vs. the preliminari
   estimate, so an obvious mis-measure is caught on site. */
.app-main .flow-segments-live .flow-live-expected {
  color: #64748b;
  font-weight: 500;
}
.app-main .flow-segments-live .flow-live-delta.is-over {
  color: #b45309;
}
.app-main .flow-segments-live .flow-live-delta.is-under {
  color: #1d4ed8;
}

/* Narrow screens: collapse the matavimas-sąmatai grids (segments +
   gates/wickets) into one labelled card per row. */
@media (max-width: 640px) {
  #initial-measurement-wrap .flow-table-wrap {
    overflow-x: visible;
  }
  #initial-measurement-wrap .flow-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #initial-measurement-wrap .flow-table,
  #initial-measurement-wrap .flow-table tbody,
  #initial-measurement-wrap .flow-table tr,
  #initial-measurement-wrap .flow-table td {
    display: block;
    width: auto;
    min-width: 0;
  }
  #initial-measurement-wrap .flow-table tr {
    position: relative;
    margin: 0 0 12px;
    padding: 6px 12px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
  }
  #initial-measurement-wrap .flow-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 6px 0;
  }
  #initial-measurement-wrap .flow-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
  }
  #initial-measurement-wrap .flow-table .flow-cell-input {
    max-width: 60%;
  }
  /* Row number becomes the card header. */
  #initial-measurement-wrap .flow-table td:first-child {
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    font-weight: 700;
  }
  #initial-measurement-wrap .flow-table td:first-child::before {
    content: "Nr.";
  }
  /* Delete sits as a full row at the card foot. */
  #initial-measurement-wrap .flow-table td:last-child {
    justify-content: flex-end;
    padding-top: 8px;
  }
  #initial-measurement-wrap .flow-table td:last-child::before {
    content: "";
  }
}

/* ============================================================
   TYPOGRAPHY — Segoe UI everywhere + a clean weight hierarchy.
   This block is last in the last-loaded stylesheet, so it wins.

   Segoe UI ships only Light 300 / Regular 400 / Semibold 600 /
   Bold 700 / Black 900. The legacy CSS used 650–950, which the
   browser rounds up to Black — so titles, buttons and totals all
   rendered as the same heavy slab. We remap onto the real faces:

     700 Bold      page titles + the numbers that carry the money
     600 Semibold  section titles, headings-as-labels, buttons,
                   badges, table headers, emphasized values
     400 Regular   body copy, table cells, inputs (left as-is)
     300 Light     subtitles, hints, empty states — airy secondary
   ============================================================ */

/* Make Segoe UI explicit on every surface (was the generic
   ui-sans-serif / system-ui stack). Redefining --font-sans also
   flows through --default-font-family, which the base layer uses. */
:root {
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    Roboto, "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji",
    "Segoe UI Symbol";
  --app-weight-light: 300;
}
html,
body {
  font-family: var(--font-sans);
}
/* form controls don't inherit font-family on their own */
.app-shell,
.app-shell :where(button, input, select, textarea, optgroup) {
  font-family: var(--font-sans);
}

/* 700 Bold — page titles + the figures that carry the money. */
.app-main :where(h1, .app-page-title, .flow-title, .create-offer-head h1,
  .personnel-hero h1, .calendar-hero h1) {
  font-weight: 700;
}
.app-main .flow-summary-grand strong,
.app-main .flow-grand-values strong,
.app-main .flow-total-band strong,
.app-main .flow-stage-tile strong,
.app-main .flow-value,
.app-main .flow-price-summary-row.is-strong strong,
.app-main .personnel-stat strong,
.app-main .calendar-summary-total strong,
.app-main .create-estimate-total-mini strong,
.app-main .create-preview-hero strong {
  font-weight: 700;
}

/* 600 Semibold — section titles, headings-as-labels, table headers. */
.app-main h2,
.app-main h3,
.app-main h4,
.app-main th,
.app-main thead th,
.app-main .flow-panel-title,
.app-main .flow-section-head,
.app-main .flow-side-title,
.app-main .flow-summary-head,
.app-main .flow-grand-label,
.app-main .flow-measure-note-title,
.app-main .create-subsection-title,
.app-main .create-offer-section-head h2,
.app-main .create-estimate-head h2,
.app-main .create-estimate-section h3,
.app-main .personnel-table-head h2 {
  font-weight: 600;
}

/* 600 Semibold — controls, badges, kickers and emphasized values
   (these were the worst Black offenders). */
.app-main button,
.app-main .app-page-kicker,
.app-main .create-offer-kicker,
.app-main .flow-breadcrumb,
.app-main .flow-stage-label,
.app-main .flow-step-title,
.app-main .flow-step-marker,
.app-main .flow-state-badge,
.app-main .flow-sent-toggle,
.app-main .flow-sent-submit,
.app-main .flow-summary-pill,
.app-main .flow-button,
.app-main .flow-send-button,
.app-main .flow-stage-select,
.app-main .flow-stage-submit,
.app-main .flow-add-row,
.app-main .flow-outline-link,
.app-main .flow-measure-submit,
.app-main .flow-measure-unit,
.app-main .flow-measure-check strong,
.app-main .flow-confirmation-check strong,
.app-main .flow-measure-field .flow-cell-input,
.app-main .personnel-role,
.app-main .personnel-person strong,
.app-main .personnel-office strong,
.app-main .create-check span {
  font-weight: 600;
}

/* Sidebar lives outside .app-main. */
.app-shell .app-account-avatar,
.app-shell .app-brand-text strong {
  font-weight: 600;
}

/* 500 Medium — secondary labels that sit beside a bold value, so the
   value (not its caption) carries the emphasis. */
.app-main .flow-price-summary-row span,
.app-main .flow-section-total {
  font-weight: 500;
}

/* Personnel had its own 500-weight table headers; bring them onto the
   shared 600 so every table's header reads the same across pages. */
.app-main .personnel-page .personnel-table th {
  font-weight: 600;
}

/* 300 Light — the quiet secondary lines, for some air. */
.app-main .app-page-subtitle,
.app-main .personnel-page .app-page-subtitle,
.app-main .flow-panel-subtitle,
.app-main .flow-step-meta,
.app-main .flow-segments-hint {
  font-weight: var(--app-weight-light);
}

/* ============================================================
   NEW OFFER — "Naujas pasiūlymas" reference design.
   Card-based layout on the light app canvas: a header card (kicker +
   title + Sąmatos nr.), a Klientas card, a calculation card beside an
   estimate card, and a sticky totals card with the dark primary action.
   Last block in the last-loaded sheet, so it wins the tangled
   output.css cascade. Scoped to .app-main to match its specificity.
   ============================================================ */

.app-main:has(.create-offer-shell) { padding-bottom: 40px; }
.app-main .create-offer-shell { gap: 18px; max-width: 1320px; }

/* Shared card chrome */
.app-main .create-offer-head,
.app-main .create-info-panel,
.app-main .create-input-rail,
.app-main .create-estimate-panel {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.05);
  margin: 0;
}

/* Section headings — small, muted, upper, tracked */
.app-main .create-offer-section-head { margin: 0 0 16px; }
.app-main .create-offer-section-head h2,
.app-main .create-estimate-head h2 {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Header card: kicker + title left, Sąmatos nr. right */
.app-main .create-offer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
}
.app-main .create-offer-title-block { border-left: 0; padding-left: 0; }
.app-main .create-offer-kicker {
  display: block;
  margin-bottom: 7px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.app-main .create-offer-head .app-page-title {
  margin: 0;
  color: #172033;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}
.app-main .create-quote-number {
  display: grid;
  grid-template-columns: auto 124px;
  align-items: center;
  gap: 12px;
  justify-items: end;
}
.app-main .create-quote-number label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-main .create-quote-number input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  color: #172033;
  font-size: 15px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.app-main .create-quote-number input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.app-main .create-quote-number small {
  grid-column: 1 / -1;
  justify-self: end;
  color: #dc2626;
  font-size: 12px;
}

/* Klientas / Užklausos cards */
.app-main .create-info-panel { padding: 22px 26px; }
/* Stacked label-over-input inside the info cards (not the rail's side-by-side) */
.app-main .create-info-panel .create-text-row-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}
.app-main .create-info-panel .create-text-row-field > span {
  color: #475569;
  font-size: 13px;
  font-weight: 400;
}
.app-main .create-info-panel .create-text-row-field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  color: #172033;
  font-size: 15px;
}
.app-main .create-info-panel .create-text-row-field input::placeholder { color: #9aa7b8; }
.app-main .create-info-panel .create-text-row-field input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

/* Two columns: a compact calculation card + a roomy estimate card.
   The calc rows are label-left / control-right, so the card needs little
   width; give the surplus to the estimate so its tables don't scroll. */
.app-main .create-offer-inputs {
  display: grid;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* Calculation card + its rows */
.app-main .create-input-rail {
  --create-control-width: 168px;
  --create-segmented-width: 190px;
  padding: 22px 26px;
  gap: 0;
  min-height: 0;
}
.app-main .create-rail-section {
  display: grid;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef2f7;
}
.app-main .create-rail-section + .create-rail-section { padding-top: 18px; }
.app-main .create-rail-section:last-child { border-bottom: 0; padding-bottom: 0; }

.app-main .create-choice-field,
.app-main .create-static-field,
.app-main .create-text-row-field,
.app-main .create-select-field,
.app-main .create-unit-field {
  display: grid;
  align-items: center;
  gap: 14px;
  grid-template-columns: minmax(92px, 1fr) var(--create-control-width);
}
.app-main .create-choice-field {
  grid-template-columns: minmax(92px, 1fr) var(--create-segmented-width);
}
.app-main .create-choice-field:has(input[name="price_list"]) { --create-segmented-width: 170px; }
.app-main .create-choice-field:has(input[name="gate_type"]) { --create-segmented-width: 200px; }
.app-main .create-choice-field:has(input[name="wicket_required"]) { --create-segmented-width: 150px; }

.app-main .create-choice-label,
.app-main .create-field > span,
.app-main .create-static-field > span {
  color: #475569;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

/* Selects (Katalogas, Modelis, Spalva) — left-aligned value (text labels, not figures) */
.app-main .create-select-field select {
  width: var(--create-control-width);
  height: 40px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
  color: #172033;
  font-size: 14px;
  text-align: left;
}
.app-main .create-select-field select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

/* Unit inputs (Bendras ilgis, Tvoros aukštis) */
.app-main .create-unit-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  width: var(--create-control-width);
}
.app-main .create-unit-input input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
  color: #172033;
  font-size: 14px;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.app-main .create-unit-input input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.app-main .create-unit-input em {
  color: #94a3b8;
  font-size: 13px;
  font-style: normal;
  padding-left: 8px;
}

/* Segmented toggles — light track, dark active pill */
.app-main .create-segmented {
  display: flex;
  width: var(--create-segmented-width);
  padding: 3px;
  gap: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #eef1f6;
}
.app-main .create-segmented label { flex: 1 1 0; cursor: pointer; }
.app-main .create-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.app-main .create-segmented span {
  display: block;
  width: 100%;
  padding: 7px 6px;
  border-radius: 7px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #475569;
  white-space: nowrap;
}
.app-main .create-segmented input:checked + span {
  background: #111827;
  color: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.2);
}
.app-main .create-segmented input:focus-visible + span {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

/* Colour swatches (Spalva) */
.app-main .create-swatch-field { align-items: center; }
.app-main .create-swatches {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app-main .create-swatch-opt { display: inline-flex; margin: 0; cursor: pointer; }
.app-main .create-swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.app-main .create-swatch {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cbd5e1;
}
.app-main .create-swatches input:checked + .create-swatch { box-shadow: 0 0 0 2px #111827; }
.app-main .create-swatches input:focus-visible + .create-swatch { box-shadow: 0 0 0 2px #2563eb; }
.app-main .create-swatch-RAL7016PM { background: #29313d; }
.app-main .create-swatch-RAL6005PM { background: #16432f; }
.app-main .create-swatch-RAL8017PM { background: #3f2a26; }
.app-main .create-swatch-RAL8019PM { background: #3b3a3c; }
.app-main .create-swatch-name {
  margin-left: 4px;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Grouped gate + wicket sub-blocks inside the one section */
.app-main .create-subsection--gate,
.app-main .create-subsection--wicket { display: grid; gap: 12px; }

/* Estimate card */
.app-main .create-estimate-panel { padding: 22px 26px; min-height: 0; }
.app-main .create-estimate-head { margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; }
/* Let the estimate tables fit the panel and wrap the name column instead of
   forcing a fixed min-width that triggers horizontal scrollbars. */
.app-main .create-preview-table { min-width: 0; width: 100%; }
.app-main .create-preview-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  max-width: none;
}
.app-main .create-preview-hero div {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 14px 16px;
}
.app-main .create-preview-hero span {
  display: block;
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-main .create-preview-hero strong {
  display: block;
  color: #172033;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.app-main .create-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 20px;
  border: 1px dashed #d7dee8;
  border-radius: 12px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

/* Footer — sticky rounded card with the dark primary action */
.app-main .create-sticky-submit {
  position: sticky;
  bottom: 16px;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: auto;
  margin: 0;
  padding: 18px 26px;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(15 23 42 / 0.1);
  z-index: 20;
}
.app-main .create-footer-total {
  display: flex;
  align-items: baseline;
  gap: 36px;
  text-align: left;
}
.app-main .create-footer-total > div { display: grid; gap: 4px; text-align: left; }
.app-main .create-footer-total span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-main .create-footer-total strong {
  min-width: 0;
  color: #172033;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.app-main .create-footer-grand strong { font-size: 24px; }
.app-main .create-sticky-submit button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.app-main .create-sticky-submit button:hover { background: #1e293b; }
.app-main .create-sticky-submit button::after { content: "→"; font-size: 16px; line-height: 1; }

@media (max-width: 920px) {
  .app-main .create-offer-inputs { grid-template-columns: 1fr; }
  .app-main .create-offer-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .app-main .create-quote-number { grid-template-columns: 1fr; justify-items: stretch; }
  .app-main .create-sticky-submit { flex-direction: column; align-items: stretch; gap: 14px; }
  .app-main .create-sticky-submit button { justify-content: center; }
}

/* ============================================================
   PRELIMINARI SĄMATA (offer flow) — recreated to match the design.
   Blue is the hero-price accent (selected variant + proposal sum);
   every other figure stays neutral dark. Soft blue carries fills:
   picked variant + grand-total band. Consistent 14–16px rounded
   cards, light borders, calm section heads.
   ============================================================ */

/* ---- Section heads (variant strip + estimate tables): calm, tracked ---- */
.app-main .flow-variant-strip .flow-section-head,
.app-main [data-flow-estimate] .flow-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.app-main .flow-variant-strip .flow-section-head-title,
.app-main [data-flow-estimate] .flow-section-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-main .flow-variant-strip .flow-section-head-title svg,
.app-main [data-flow-estimate] .flow-section-head-title svg { color: #64748b; }
.app-main .flow-variant-strip .flow-section-head-title svg,
.app-main [data-flow-estimate] .flow-section-head-title svg { width: 16px; height: 16px; }
.app-main .flow-section-head-sub { color: #94a3b8; font-size: 12px; font-weight: 400; }

/* ---- Variant picker: modern equal cards in a responsive grid ---- */
.app-main .flow-variant-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0 0;
}
/* Variant cards keep a compact fixed width instead of stretching across the row,
   so a couple of variants don't sprawl the full width. */
.app-main .flow-variant-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 210px;
  max-width: 210px;
  min-height: 140px;
  box-sizing: border-box;
  padding: 14px 14px;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  background: #fff;
  overflow: visible;
}
.app-main .flow-variant-kicker {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.app-main .flow-variant-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app-main .flow-variant-model { color: #0f172a; font-size: 17px; font-weight: 700; }
.app-main .flow-variant-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-main .flow-variant-badge svg { width: 11px; height: 11px; }
.app-main .flow-variant-total {
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.app-main .flow-variant-total.is-muted { color: #0f172a; font-size: 18px; font-weight: 700; }
.app-main .flow-variant-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.app-main .flow-variant-dl:hover { color: #2563eb; }
.app-main .flow-variant-dl svg { width: 14px; height: 14px; }

/* Picked variant — soft light-blue fill, blue hero price */
.app-main .flow-variant-card.is-selected {
  background: #eaf1fe;
  border: 1.5px solid #b9d0f7;
  box-shadow: 0 6px 18px rgb(37 99 235 / 0.08);
}

/* Selectable (non-picked) variant card */
.app-main .flow-variant-selform { margin: 0; display: flex; flex: 1; }
.app-main button.flow-variant-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.app-main .flow-variant-pick { color: #2f5fc4; font-size: 12px; font-weight: 600; margin-top: 2px; }
.app-main .flow-variant-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}
.app-main .flow-variant-delform { margin: 0; margin-left: auto; }
.app-main .flow-variant-del { border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.app-main .flow-variant-del:hover { color: #dc2626; }
.app-main .flow-variant-del svg { width: 15px; height: 15px; }

/* Single add-variant card: dashed surface holding the model select + submit.
   One add path — pick a model, press Pridėti variantą. */
.app-main .flow-variant-add {
  gap: 10px;
  border: 1.5px dashed #cbd5e1;
  background: #fafbfd;
}
.app-main .flow-variant-add .flow-variant-kicker { color: #94a3b8; }
.app-main .flow-variant-select-wrap { position: relative; display: flex; align-items: center; }
.app-main .flow-variant-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.app-main .flow-variant-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.app-main .flow-variant-select-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  color: #64748b;
}
.app-main .flow-variant-select-chevron svg { width: 16px; height: 16px; }
.app-main .flow-variant-add-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.app-main .flow-variant-add-submit:hover { background: #1e293b; }
.app-main .flow-variant-add-submit svg { width: 15px; height: 15px; }

/* ---- Estimate tables: unit chip + boxed section totals ---- */
.app-main [data-flow-page]:not([data-flow-editing="true"]) [data-flow-estimate] .flow-table td:nth-child(3) .flow-cell-input {
  display: inline-block;
  width: 48px;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}
.app-main [data-flow-estimate] .flow-section-total {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.app-main [data-flow-estimate] .flow-price-summary {
  width: 340px;
  max-width: 100%;
  display: grid;
  gap: 5px;
  padding: 11px 16px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #fff;
}
.app-main [data-flow-estimate] .flow-price-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.app-main [data-flow-estimate] .flow-price-summary-row span { color: #64748b; font-size: 13px; font-weight: 500; }
.app-main [data-flow-estimate] .flow-price-summary-row strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.app-main [data-flow-estimate] .flow-price-summary-row.is-strong {
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px solid #eef2f7;
}
.app-main [data-flow-estimate] .flow-price-summary-row.is-strong span { color: #0f172a; font-weight: 600; }
.app-main [data-flow-estimate] .flow-price-summary-row.is-strong strong { font-size: 15px; font-weight: 700; }

/* ---- Right rail: client card + proposal sum ---- */
.app-main .flow-side { display: grid; gap: 14px; align-content: start; }
.app-main .flow-client-card {
  padding: 0;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  overflow: hidden;
}
.app-main .flow-client-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.app-main .flow-client-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #dbe7fb;
  color: #2f5fc4;
  font-size: 15px;
  font-weight: 700;
}
.app-main .flow-client-id { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.app-main .flow-client-id > strong { color: #0f172a; font-size: 15px; font-weight: 700; line-height: 1.2; }
.app-main .flow-client-id > span { color: #94a3b8; font-size: 12px; }
.app-main .flow-client-edit { display: inline-flex; flex: 0 0 auto; color: #94a3b8; }
.app-main .flow-client-edit:hover { color: #2563eb; }
.app-main .flow-client-edit svg { width: 16px; height: 16px; }
.app-main .flow-client-list { display: grid; gap: 0; padding: 2px 18px; border-top: 1px solid #eef2f7; }
.app-main .flow-client-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.app-main .flow-client-field:last-child { border-bottom: 0; }
.app-main .flow-client-field > span { color: #64748b; font-size: 13px; }
.app-main .flow-client-field > strong { color: #0f172a; font-size: 13px; font-weight: 600; text-align: right; }
.app-main .flow-client-field > strong.is-empty { color: #94a3b8; font-style: italic; font-weight: 400; }
.app-main .flow-client-editbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 18px 18px;
  padding: 9px 12px;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.app-main .flow-client-editbtn:hover { border-color: #2563eb; color: #2563eb; }
.app-main .flow-client-editbtn svg { width: 15px; height: 15px; }
.app-main .flow-proposal-sum {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  background: #fff;
}
.app-main .flow-proposal-label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-main .flow-proposal-amount {
  color: #0f172a;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.app-main .flow-proposal-note { color: #94a3b8; font-size: 12px; }

/* ---- Grand-total band: same card style as the "Šio pasiūlymo suma" rail card
   (white, #e6ebf2 border, 16px, soft shadow) so the two summaries match ---- */
.app-main .flow-main-panel .flow-total-band {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.05);
  padding: 16px 18px;
}
.app-main .flow-total-band.flow-total-footer {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.app-main .flow-grand-label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-main .flow-footer-total > div > strong { color: #0f172a; }
.app-main .flow-grand-caption { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-main .flow-grand-caption-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #dbe7fb;
  color: #2f5fc4;
}
.app-main .flow-grand-caption-icon svg { width: 18px; height: 18px; }
.app-main .flow-grand-caption-text {
  min-width: 0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-main .flow-footer-total .flow-footer-grand > strong { font-size: 23px; color: #0f172a; }

/* ---- Flow chrome aligned to the new-offer design system ----
   Scoped to the single-use modifiers (.flow-main-panel, .flow-stepper-card)
   — NOT base .flow-card/.flow-section/.flow-table, which back the dense
   measurement/production grids and must stay untouched. */
.app-main .flow-main-panel,
.app-main .flow-stepper-card {
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.05);
}
/* Page title → new-offer title ink + scale */
.app-main .flow-title { color: #172033; font-size: 30px; line-height: 1.1; }
/* Per-step heading: drop the heavy 800 weight to the 700 system */
.app-main .flow-panel-title { font-weight: 700; }
/* Toolbar buttons (Redaguoti / PDF / Išsaugoti / Atšaukti): light ghost chrome */
.app-main .flow-button {
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
}
.app-main .flow-button:hover { border-color: #2563eb; color: #2563eb; }
/* Siųsti → dark-navy primary, no blue glow (matches the new-offer button) */
.app-main .flow-send-group { box-shadow: none; }
.app-main .flow-send-button {
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.app-main .flow-send-button:hover { background: #1e293b; }

/* ============================================================
   FLOW POLISH — completed = green, compact client card, clean
   add-line picker, consistent shadows, neutral numbers.
   ============================================================ */

/* Stepper: a finished step reads GREEN; the active step stays blue. */
.app-main .flow-step-link.is-complete .flow-step-marker {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}
.app-main .flow-step-link.is-active .flow-step-marker {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

/* Right-rail + variant hover parity with the new-offer card shadow token */
.app-main .flow-client-card,
.app-main .flow-proposal-sum { box-shadow: 0 10px 28px rgb(15 23 42 / 0.05); }
.app-main button.flow-variant-main:hover { background: #f5f8fd; border-radius: 8px; }

/* Client card — more compact, customer data not oversized */
.app-main .flow-client-head { padding: 13px 16px; gap: 10px; }
.app-main .flow-client-avatar { width: 32px; height: 32px; font-size: 13px; }
.app-main .flow-client-id > strong { font-size: 14px; }
.app-main .flow-client-id > span { font-size: 11px; }
.app-main .flow-client-list { padding: 0 16px; }
.app-main .flow-client-field { padding: 8px 0; }
.app-main .flow-client-field > span,
.app-main .flow-client-field > strong { font-size: 12px; }
.app-main .flow-client-editbtn { margin: 6px 16px 14px; min-height: 34px; font-size: 12px; }
.app-main .flow-proposal-sum { padding: 14px 16px; }
.app-main .flow-proposal-amount { font-size: 23px; }

/* Add-line picker: clean white controls, neutral dark add button (no blue),
   sits as one tidy row inside the section — no box-behind-box. */
.app-main [data-flow-estimate] .flow-picker {
  border: 1px dashed #d8e0ea;
  border-radius: 12px;
  background: #fafbfd;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
}
.app-main [data-flow-estimate] .flow-picker-select,
.app-main [data-flow-estimate] .flow-picker-qty {
  height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  font-weight: 500;
  color: #0f172a;
}
.app-main [data-flow-estimate] .flow-picker-select:focus,
.app-main [data-flow-estimate] .flow-picker-qty:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.app-main [data-flow-estimate] .flow-add-row {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.app-main [data-flow-estimate] .flow-add-row:hover { background: #1e293b; box-shadow: none; transform: none; }

/* Custom (blank) line row: free-text name + unit + qty + net price + add — for
   items not in the kainoraštis (e.g. "Senų stulpų išardymas"). Hidden until the
   sąmata is in edit mode (Redaguoti); the catalog picker above stays always on. */
.app-main [data-flow-estimate] .flow-picker-custom {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px dashed #d8e0ea;
  border-radius: 12px;
  background: #fafbfd;
}
.app-main [data-flow-page][data-flow-editing="true"] [data-flow-estimate] .flow-picker-custom {
  display: flex;
}
.app-main [data-flow-estimate] .flow-picker-name,
.app-main [data-flow-estimate] .flow-picker-unit,
.app-main [data-flow-estimate] .flow-picker-price {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
}
.app-main [data-flow-estimate] .flow-picker-name { flex: 1 1 200px; min-width: 160px; }
.app-main [data-flow-estimate] .flow-picker-unit { width: 64px; text-align: center; padding: 0 8px; }
.app-main [data-flow-estimate] .flow-picker-custom .flow-picker-qty { width: 76px; }
.app-main [data-flow-estimate] .flow-picker-price { width: 124px; text-align: right; }
.app-main [data-flow-estimate] .flow-picker-name:focus,
.app-main [data-flow-estimate] .flow-picker-unit:focus,
.app-main [data-flow-estimate] .flow-picker-price:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

/* ============================================================
   CROSS-PAGE CONSISTENCY — one system on every page.
   • numbers are always black / white / grey, never tinted
   • KPI / stat tiles look identical everywhere (new-offer hero tile)
   • one card chrome: 16px radius, #e6ebf2 border, soft slate shadow
   • flatten box-in-box; even vertical rhythm
   ============================================================ */

/* ---- Numbers: neutral only (no blue/amber/red/green/purple) ---- */
/* Calendar event time inherited each chip's tint — force grey */
.app-main .calendar-event-time { color: #64748b !important; }
/* Offer-flow stragglers the harmonization had not reached */
.app-main .flow-footer-discount strong[data-flow-discount-amount] { color: #0f172a; }
.app-main .flow-segments-live { color: #0f172a; }
.app-main .flow-segments-live .flow-live-delta.is-over,
.app-main .flow-segments-live .flow-live-delta.is-under { color: #64748b; }
.app-main .flow-value.is-positive { color: #172033; }
.app-main .flow-small-positive { color: #64748b; }

/* ---- Unified KPI / stat tiles (model: new-offer .create-preview-hero) ---- */
.app-main :is(.personnel-stat, .flow-stage-tile) {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: none;
}
.app-main :is(.personnel-stat > span, .flow-stage-tile > span) {
  display: block;
  margin: 0 0 8px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.app-main :is(.personnel-stat > strong, .flow-stage-tile > strong) {
  display: block;
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Personnel page has a higher-specificity type bridge — beat it for the
   label/value sizes so the tiles match the reference everywhere. */
.app-main .personnel-page .personnel-stat > span { font-size: 11px; }
.app-main .personnel-page .personnel-stat > strong { font-size: 22px; }
/* .flow-stage-tile renders value-then-label; flip so the label sits on top */
.app-main .flow-stage-tile { display: flex; flex-direction: column-reverse; }
/* Measurement accent tile must not be a blue box behind a number */
.app-main .flow-info-tile.is-accent { background: #f8fafc; border-color: #eef2f7; color: inherit; }

/* Calendar summary stays an inline list (no box-in-box inside the panel),
   but its values read neutral and not oversized */
.app-main :is(.calendar-summary-row, .calendar-summary-total) strong {
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.app-main .calendar-summary-total strong { font-size: 17px; }

/* ---- One card chrome across the list/detail pages ---- */
.app-main :is(.proj-card, .personnel-table-card, .calendar-month-card, .calendar-panel) {
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.05);
}

/* (Projektai numeric-column polish lives in the modernization block at the
   end of this file.) */

/* ---- Inbox detail: flatten the mini-card grid (no box behind box) ---- */
.app-main .inbox-hint {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 0;
  padding: 8px 0;
}

/* ---- Even vertical rhythm between stacked cards ---- */
.app-main .personnel-page { gap: 18px; }
.app-main .personnel-admin { padding: 0; overflow: hidden; }
.app-main .personnel-role-editor { display: grid; gap: 0; }
.app-main .personnel-role-row {
  display: grid;
  grid-template-columns: minmax(95px, .6fr) minmax(130px, 1fr) minmax(180px, 1.4fr) minmax(135px, .85fr) minmax(120px, .8fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px 16px;
  border-top: 1px solid #eef2f7;
}
.app-main .personnel-role-row.is-new {
  background: #f8fafc;
}
.app-main .personnel-role-row label,
.app-main .personnel-assignment {
  display: grid;
  gap: 5px;
}
.app-main .personnel-role-row label > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}
.app-main .personnel-role-row input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #172033;
  font-size: 13px;
}
.app-main .personnel-check,
.app-main .personnel-role-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #334155;
  font-size: 12px;
}
.app-main .personnel-role-key {
  align-self: center;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}
.app-main .personnel-role-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.app-main .personnel-role-actions button,
.app-main .personnel-assignment button {
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #172033;
  font-size: 12px;
}
.app-main .personnel-role-actions button.is-danger {
  border-color: #fecaca;
  color: #b91c1c;
}
.app-main .personnel-assignment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 250px;
}
.app-main .personnel-assignment button {
  grid-column: 1 / -1;
  justify-self: start;
}
@media (max-width: 1100px) {
  .app-main .personnel-role-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-main .personnel-role-actions { justify-content: flex-start; }
}

/* ---- Užklausa form: compact 2-column layout using the full panel width
   (the step has no right rail, so the form had a lot of empty space). ---- */
.app-main .inquiry-edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
}
/* Klientas spans the top; the calc rail + Užklausos detalės sit side by side */
.app-main .inquiry-edit-form > .create-info-panel:first-of-type { grid-column: 1 / -1; }
.app-main .inquiry-rail { max-width: none; }
/* Tighter spacing throughout the form */
.app-main .inquiry-edit-form .create-info-panel,
.app-main .inquiry-edit-form .create-input-rail { padding: 16px 20px; }
.app-main .inquiry-edit-form .create-rail-section { gap: 10px; padding-bottom: 12px; }
.app-main .inquiry-edit-form .create-rail-section + .create-rail-section { padding-top: 12px; }
.app-main .inquiry-edit-form .create-offer-section-head { margin-bottom: 8px; }
@media (max-width: 920px) {
  .app-main .inquiry-edit-form { grid-template-columns: 1fr; }
}

/* ============================================================
   PRELIMINARI — fit & polish pass
   ============================================================ */

/* Variant cards: more compact, and hover the whole card (no inner box) */
.app-main .flow-variant-card { min-height: 110px; padding: 11px 14px; gap: 6px; }
.app-main .flow-variant-model { font-size: 16px; }
.app-main .flow-variant-total { font-size: 20px; }
.app-main button.flow-variant-main:hover { background: transparent; }
.app-main .flow-variant-card:has(button.flow-variant-main:hover) {
  border-color: #b9d0f7;
  background: #f7faff;
}

/* Estimate table: Pavadinimas takes the slack and WRAPS (it's text now, not a
   truncating input); numeric columns sized to their content. */
.app-main [data-flow-estimate] .flow-table { table-layout: fixed; width: 100%; min-width: 0; }
.app-main [data-flow-estimate] .flow-table th:nth-child(1),
.app-main [data-flow-estimate] .flow-table td:nth-child(1) { width: auto; }
.app-main [data-flow-estimate] .flow-table th:nth-child(2),
.app-main [data-flow-estimate] .flow-table td:nth-child(2) { width: 108px; }
.app-main [data-flow-estimate] .flow-table th:nth-child(3),
.app-main [data-flow-estimate] .flow-table td:nth-child(3) { width: 52px; }
.app-main [data-flow-estimate] .flow-table th:nth-child(4),
.app-main [data-flow-estimate] .flow-table td:nth-child(4) { width: 96px; }
.app-main [data-flow-estimate] .flow-table th:nth-child(5),
.app-main [data-flow-estimate] .flow-table td:nth-child(5) { width: 92px; }
.app-main [data-flow-estimate] .flow-table th:nth-child(6),
.app-main [data-flow-estimate] .flow-table td:nth-child(6) { width: 34px; }
/* Wider centre column on estimate + measurement steps; the rail still drops
   below 1320px so the work area gets the full width on narrow screens. */
.app-main .flow-layout--wide {
  grid-template-columns: 232px minmax(0, 1fr) 286px;
  gap: 18px;
}
@media (max-width: 1320px) {
  .app-main .flow-layout--wide { grid-template-columns: 232px minmax(0, 1fr); }
}

/* Measurement steps: the work area only needs ~800px, so the right column takes
   all the leftover space and the cards (Klientas · Matuotojo paskyrimas ·
   Nuotraukos) flow into 2–3 wider columns instead of a thin stacked rail. */
.app-main .flow-layout--measure {
  grid-template-columns: 232px minmax(0, 820px) minmax(300px, 1fr);
  gap: 18px;
}
.app-main .flow-layout--measure .flow-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  align-content: start;
}
@media (max-width: 1500px) {
  .app-main .flow-layout--measure { grid-template-columns: 232px minmax(0, 1fr); }
}
.app-main [data-flow-estimate] .flow-line-name {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

/* Grand band: label left, totals right. Cells wrap as whole units when the row
   is tight — a number value is never broken across lines. */
.app-main .flow-total-band.flow-total-footer { gap: 10px 18px; flex-wrap: wrap; align-items: center; }
.app-main .flow-footer-total { gap: 12px 18px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; }
.app-main .flow-discount-edit input[type="number"] { width: 62px; }
.app-main .flow-grand-label { white-space: nowrap; }
.app-main .flow-footer-total > div { white-space: nowrap; }
.app-main .flow-footer-total > div > strong { font-size: 16px; white-space: nowrap; }
.app-main .flow-footer-total .flow-footer-grand > strong { font-size: 22px; font-weight: 800; white-space: nowrap; }

/* Minimal variant cards: no pick/PDF text; delete tucks into the corner */
.app-main .flow-variant-card { position: relative; }
.app-main .flow-variant-delform { position: absolute; top: 8px; right: 8px; margin: 0; }
.app-main .flow-variant-del { padding: 2px; line-height: 0; opacity: 0.55; }
.app-main .flow-variant-del:hover { opacity: 1; }
.app-main .flow-variant-card .flow-variant-selform { padding-right: 18px; }

/* ============================================================
   MEASUREMENT — matuotojas assignment moved to a right-rail card
   (same chrome as the Klientas card), plus a calmer work area.
   ============================================================ */
.app-main .flow-schedule-card {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.05);
  overflow: hidden;
}
.app-main .flow-rail-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; }
.app-main .flow-rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #dbe7fb;
  color: #2f5fc4;
}
.app-main .flow-rail-icon svg { width: 18px; height: 18px; }
.app-main .flow-rail-id { display: grid; gap: 1px; min-width: 0; }
.app-main .flow-rail-id > strong { color: #0f172a; font-size: 14px; font-weight: 700; line-height: 1.2; }
.app-main .flow-rail-id > span { color: #94a3b8; font-size: 12px; }
.app-main .flow-rail-body { display: grid; gap: 12px; padding: 12px 18px 14px; border-top: 1px solid #eef2f7; }
.app-main .flow-rail-field { display: grid; gap: 5px; }
.app-main .flow-rail-field > span { color: #64748b; font-size: 12px; font-weight: 500; }
.app-main .flow-rail-field select,
.app-main .flow-rail-field input,
.app-main .flow-rail-field textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-family: inherit;
  box-shadow: none;
}
.app-main .flow-rail-field select,
.app-main .flow-rail-field input { height: 40px; padding: 0 12px; }
.app-main .flow-rail-field textarea { padding: 8px 12px; resize: vertical; min-height: 54px; }
.app-main .flow-rail-field select:focus,
.app-main .flow-rail-field input:focus,
.app-main .flow-rail-field textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.app-main .flow-rail-status { display: grid; gap: 6px; }
.app-main .flow-rail-note { margin: 0; color: #94a3b8; font-size: 12px; line-height: 1.4; }
.app-main .flow-rail-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 18px 16px;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.app-main .flow-rail-submit:hover { background: #1e293b; }
.app-main .flow-rail-submit:disabled { background: #cbd5e1; cursor: not-allowed; }
.app-main .flow-rail-submit svg { width: 15px; height: 15px; }

/* Measurement work sections read as clean, intentional sub-cards */
.app-main .flow-main-panel--measure .flow-section {
  border: 1px solid #eef2f7;
  border-radius: 12px;
  box-shadow: none;
}
/* No blue: add-row + measurement actions use the dark-navy primary */
.app-main .flow-add-row {
  background: #111827;
  border-color: #111827;
  box-shadow: none;
  font-weight: 600;
}
.app-main .flow-add-row:hover { background: #1e293b; border-color: #1e293b; box-shadow: none; transform: none; }
.app-main .flow-measure-submit {
  background: #111827;
  border-color: #111827;
  box-shadow: none;
}
.app-main .flow-measure-submit:hover { background: #1e293b; border-color: #1e293b; }
.app-main .flow-measure-submit:disabled { background: #cbd5e1; border-color: #cbd5e1; }

/* Kiekis renders as plain right-aligned text (not an editable box) */
.app-main [data-flow-estimate] .flow-line-qty {
  display: block;
  text-align: right;
  padding-right: 2px;
  color: #0f172a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---- Final blue cleanup: no blue left on any button ---- */
.app-main .flow-stage-submit {
  border: 1px solid #111827;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.app-main .flow-stage-submit:hover { background: #1e293b; border-color: #1e293b; box-shadow: none; }
/* secondary/ghost buttons hover neutral, not blue */
.app-main .flow-button:hover { border-color: #94a3b8; color: #111827; }
.app-main .create-add-opening-btn:hover {
  border-color: #94a3b8;
  border-style: solid;
  background: transparent;
  color: #111827;
}
.app-main .flow-outline-link { color: #334155; }
.app-main .flow-outline-link:hover { color: #111827; }

/* Vnt. column is always locked → render as plain text, not a chip/box */
.app-main [data-flow-estimate] .flow-line-unit {
  display: block;
  color: #0f172a;
  font-size: 13px;
}
/* Measurement footer: "Išsaugoti matmenis" is the secondary (ghost) action so it
   reads distinctly from the dark-navy primary (Perskaičiuoti / advance). */
.app-main .flow-measure-save {
  background: #fff;
  color: #0f172a;
  border: 1px solid #d8e0ea;
  box-shadow: none;
}
.app-main .flow-measure-save:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Measurement photo dialog launched from the Dokumentai row. */
.app-main .flow-photo-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.34);
}
.app-main .flow-photo-dialog::backdrop {
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(2px) saturate(0.9);
}
.app-main .flow-photo-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 48px);
}
.app-main .flow-photo-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 32px 10px;
}
.app-main .flow-photo-dialog-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.app-main .flow-photo-dialog-head strong {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 700;
  color: #0f172a;
}
.app-main .flow-photo-dialog-head span {
  font-size: 14px;
  color: #64748b;
}
.app-main .flow-photo-dialog-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}
.app-main .flow-photo-dialog-close:hover { background: #f1f5f9; }
.app-main .flow-photo-dialog-close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.app-main .flow-photo-dialog-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 12px 32px 14px;
  overflow: auto;
}
.app-main .flow-photo-dialog-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 20px;
}
.app-main .flow-photo-search,
.app-main .flow-photo-sort {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
}
.app-main .flow-photo-search {
  padding: 0 12px;
}
.app-main .flow-photo-search .app-icon,
.app-main .flow-photo-sort .app-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.app-main .flow-photo-search input,
.app-main .flow-photo-sort select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
}
.app-main .flow-photo-search input::placeholder { color: #94a3b8; }
.app-main .flow-photo-sort {
  position: relative;
  padding: 0 10px;
}
.app-main .flow-photo-sort select {
  appearance: none;
  cursor: pointer;
  font-weight: 600;
  padding-right: 22px;
}
.app-main .flow-photo-sort .app-icon {
  position: absolute;
  right: 10px;
  pointer-events: none;
}
.app-main .flow-photo-search:focus-within,
.app-main .flow-photo-sort:focus-within {
  border-color: #93b4ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
.app-main .flow-photo-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.app-main .flow-photo-card {
  position: relative;
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-rows: 138px auto;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.app-main .flow-photo-card[data-flow-photo-active] {
  border-color: #356cff;
  box-shadow: 0 0 0 2px rgba(53, 108, 255, 0.16);
}
.app-main .flow-photo-card:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.app-main .flow-photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.app-main .flow-photo-card-body {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 11px 34px 11px 11px;
}
.app-main .flow-photo-card-body strong {
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-main .flow-photo-card-body span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}
.app-main .flow-photo-card-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #94a3b8;
}
.app-main .flow-photo-card-icon .app-icon { width: 15px; height: 15px; }
.app-main .flow-photo-empty {
  padding: 24px;
  border: 1px dashed #d8e0ea;
  border-radius: 8px;
  color: #64748b;
  text-align: center;
  font-size: 13px;
}
.app-main .flow-photo-preview[hidden] { display: none !important; }
.app-main .flow-photo-dialog[data-flow-photo-previewing] .flow-photo-dialog-tools,
.app-main .flow-photo-dialog[data-flow-photo-previewing] .flow-photo-grid,
.app-main .flow-photo-dialog[data-flow-photo-previewing] .flow-photo-empty {
  display: none;
}
.app-main .flow-photo-preview {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}
.app-main .flow-photo-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.app-main .flow-photo-preview-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.app-main .flow-photo-preview-head strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.app-main .flow-photo-preview-head span {
  color: #64748b;
  font-size: 13px;
}
.app-main .flow-photo-preview-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
}
.app-main .flow-photo-preview-close:hover { background: #f8fafc; }
.app-main .flow-photo-preview-close .app-icon {
  width: 17px;
  height: 17px;
}
.app-main .flow-photo-preview-frame {
  min-height: 0;
  height: min(58dvh, 540px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #0f172a;
}
.app-main .flow-photo-preview-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(58dvh, 540px);
  display: block;
  object-fit: contain;
}
.app-main .flow-photo-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 32px 24px;
}
.app-main .flow-photo-secondary,
.app-main .flow-photo-primary {
  min-width: 112px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.app-main .flow-photo-secondary {
  border: 1px solid #dfe5ee;
  background: #fff;
  color: #0f172a;
}
.app-main .flow-photo-secondary:hover { background: #f8fafc; }
.app-main .flow-photo-primary {
  border: 1px solid #2f66e8;
  background: #2f66e8;
  color: #fff;
}
.app-main .flow-photo-primary:hover { background: #2458d6; }
.app-main .flow-photo-primary .app-icon {
  width: 17px;
  height: 17px;
}
@media (max-width: 900px) {
  .app-main .flow-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-main .flow-photo-dialog-tools { grid-template-columns: minmax(0, 1fr) 240px; }
}
@media (max-width: 700px) {
  .app-main .flow-photo-dialog-tools {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .app-main .flow-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-main .flow-photo-dialog-head,
  .app-main .flow-photo-dialog-body,
  .app-main .flow-photo-dialog-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 460px) {
  .app-main .flow-photo-grid { grid-template-columns: 1fr; }
  .app-main .flow-photo-dialog-foot {
    display: grid;
    grid-template-columns: 1fr;
  }
  .app-main .flow-photo-secondary,
  .app-main .flow-photo-primary {
    width: 100%;
  }
}

/* Measurement grids: fixed leading columns so the Aukštis and Plotis boxes line up
   vertically across all three tables. Vartai leads with a Tipas column; Segmentai
   and Varteliai use a matching-width Nr cell, so Aukštis always starts at the same
   X. The table is capped so the columns stay sensibly sized (no sprawl/scroll). */
.app-main .flow-segments-table { table-layout: fixed; width: 100%; max-width: 820px; }
.app-main .flow-segments-table th,
.app-main .flow-segments-table td { white-space: nowrap; }

/* Vartai (gates): Nr · Tipas · Aukštis · Plotis (Plotis column widened to leave a
   clear gap before Užpildas). */
.app-main .flow-gates-table th:nth-child(1),
.app-main .flow-gates-table td:nth-child(1) { width: 44px; }
.app-main .flow-gates-table th:nth-child(2),
.app-main .flow-gates-table td:nth-child(2) { width: 128px; }
.app-main .flow-gates-table th:nth-child(3),
.app-main .flow-gates-table td:nth-child(3) { width: 124px; }
.app-main .flow-gates-table th:nth-child(4),
.app-main .flow-gates-table td:nth-child(4) { width: 124px; }

/* Segmentai + Varteliai: Nr (matched to Nr+Tipas width) · Aukštis · Plotis */
.app-main .flow-segments-table:not(.flow-openings-table) th:nth-child(1),
.app-main .flow-segments-table:not(.flow-openings-table) td:nth-child(1),
.app-main .flow-wickets-table th:nth-child(1),
.app-main .flow-wickets-table td:nth-child(1) { width: 172px; }
.app-main .flow-segments-table:not(.flow-openings-table) th:nth-child(2),
.app-main .flow-segments-table:not(.flow-openings-table) td:nth-child(2),
.app-main .flow-wickets-table th:nth-child(2),
.app-main .flow-wickets-table td:nth-child(2) { width: 124px; }
.app-main .flow-segments-table:not(.flow-openings-table) th:nth-child(3),
.app-main .flow-segments-table:not(.flow-openings-table) td:nth-child(3),
.app-main .flow-wickets-table th:nth-child(3),
.app-main .flow-wickets-table td:nth-child(3) { width: 124px; }

/* Aukštis / Plotis boxes 50% wider (64 → 96px); other number boxes compact. */
.app-main .flow-segments-table .flow-cell-input.is-number { width: 64px; min-width: 0; }
.app-main .flow-segments-table .flow-cell-input.is-number[name="seg_height"],
.app-main .flow-segments-table .flow-cell-input.is-number[name="seg_width"],
.app-main .flow-segments-table .flow-cell-input.is-number[name$="_height_mm"],
.app-main .flow-segments-table .flow-cell-input.is-number[name$="_width_mm"] { width: 96px; }
.app-main .flow-segments-table .flow-cell-input.is-number[name="seg_qty"] { width: 84px; }
/* Selects size to their selected value (full option text shows in the open dropdown). */
.app-main .flow-segments-table select.flow-cell-input { width: 92px; min-width: 0; max-width: 100%; }
.app-main .flow-segments-table select[name$="_type"] { width: 116px; }

/* Number columns left-align their header AND box (like Tipas/Užpildas), so the
   "Aukštis" / "Plotis" / "Kiekis" label starts exactly where the input below it
   starts. The remaining width in each column then forms a natural gap before the
   next column (e.g. between Plotis and Užpildas). */
.app-main .flow-segments-table th.is-number,
.app-main .flow-segments-table td.is-number { text-align: left; }
.app-main .flow-segments-table .flow-cell-input.is-number { text-align: left; }
/* The delete column keeps the 40px touch-target button on the right without
   spilling past the table edge (which would force a horizontal scrollbar). */
.app-main .flow-segments-table th:last-child,
.app-main .flow-segments-table td:last-child { width: 60px; text-align: right; }
.app-main .flow-segments-table select[name$="_automation"],
.app-main .flow-segments-table select[name$="_electric_lock"] { width: 68px; }

/* Consistent footer for every measurement box (Segmentai / Vartai / Varteliai):
   the add button sits left-aligned inside the box, with optional live info on the
   right. Keeps all "Pridėti …" buttons aligned and inside their own card. */
.app-main .flow-measure-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid #eef2f7;
  flex-wrap: wrap;
}
.app-main .flow-measure-foot .flow-add-row {
  margin: 0;
  min-height: 32px;
  padding: 0 12px;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}
.app-main .flow-measure-foot .flow-add-row:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: none;
  transform: none;
}
.app-main .flow-measure-foot .flow-add-row svg { width: 14px; height: 14px; }
.app-main p.flow-segments-hint {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 12px;
  color: #94a3b8;
}

/* Vartai / varteliai: the non-applicable add-on (Automatika on a wicket, El.
   spyna on a gate) is hidden and shown as a muted dash instead of a control. */
.app-main td.is-na .flow-cell-input { display: none; }
.app-main td.is-na { text-align: center; }
.app-main td.is-na::after { content: "—"; color: #cbd5e1; }

/* ============================================================
   DOKUMENTAI — per-step file list (documents registry).
   White card, dark-navy download button, light-blue status pills.
   ============================================================ */
.app-main .flow-docs {
  margin-top: 18px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 0.05);
}
.app-main .flow-docs .flow-section-head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.app-main .flow-docs .flow-section-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}
.app-main .flow-docs .flow-section-head-title svg { width: 16px; height: 16px; color: #64748b; }

.app-main .flow-docs-list { list-style: none; margin: 0; padding: 0; }
.app-main .flow-docs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #f1f5f9;
}
.app-main .flow-docs-row:first-child { border-top: 0; }
.app-main .flow-docs-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: #334155;
  min-width: 0;
}
.app-main .flow-docs-label svg { width: 16px; height: 16px; color: #94a3b8; flex: 0 0 auto; }
.app-main .flow-docs-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Download = dark-navy primary, matches Siųsti / new-offer button. */
.app-main .flow-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 12px;
  text-decoration: none;
}
.app-main .flow-doc-btn:hover { background: #1e293b; }
.app-main .flow-doc-btn svg { width: 15px; height: 15px; }

/* Status pills for not-yet-downloadable docs (our shades of blue + grey). */
.app-main .flow-doc-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  padding: 4px 11px;
  border: 1px solid transparent;
}
.app-main .flow-doc-pill-upload { background: #eef4ff; color: #2563eb; border-color: #dbe7ff; }
.app-main .flow-doc-pill-fetch  { background: #eaf0fb; color: #1d4ed8; border-color: #d7e3f7; }
.app-main .flow-doc-pill-soon   { background: #f1f5f9; color: #64748b; border-color: #e6ebf2; }
.app-main .flow-photo-doc-gallery {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 1 auto;
}
.app-main .flow-photo-doc-thumbs {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-main .flow-photo-doc-thumbs img,
.app-main .flow-photo-doc-more {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #dfe7f3;
  border-radius: 8px;
  background: #f8fafc;
}
.app-main .flow-photo-doc-thumbs img {
  display: block;
  object-fit: cover;
}
.app-main .flow-photo-doc-more {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.app-main .flow-doc-view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid #dbe7ff;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
}
.app-main .flow-doc-view-all-btn:hover { background: #dfeaff; }
.app-main .flow-doc-view-all-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.app-main .flow-doc-view-all-btn span { white-space: nowrap; }

@media (max-width: 700px) {
  .app-main .flow-photo-doc-gallery {
    width: 100%;
    justify-content: space-between;
  }
  .app-main .flow-docs-row:has(.flow-photo-doc-gallery) {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================
   PROJEKTAI LIST — modernization pass (matches new-offer / flow).
   Appended last so it wins over the stale output.css proj-* base
   and the earlier card-chrome block. Numbers stay neutral; only
   status badges carry colour; navy/green palette; no box-in-box.
   Column order in ProjectsTable: 1 Nr · 2 Klientas · 3 Miestas ·
   4 Vadybininkas · 5 Etapas · 6 Modelis · 7 Ilgis · 8 Segmentai ·
   9 Suma.
   ============================================================ */

/* Filter bar: flatten it onto the page (the table card is the only
   real surface — kill the second bordered/shadowed box). */
.app-main .proj-filters {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  box-shadow: none;
  gap: 12px;
}

/* Controls: neutral chrome, navy (not blue) focus — matches the
   reference inputs and the "no blue glow" decision. */
.app-main .proj-search,
.app-main .proj-select {
  height: 40px;
  border: 1px solid #d7dde7;
  border-radius: 10px;
  background: #ffffff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.app-main .proj-search { background: #f8fafc; }
.app-main .proj-search .app-icon { color: #94a3b8; }
.app-main .proj-search input { font-size: 13.5px; color: #172033; }
.app-main .proj-search input::placeholder { color: #9aa7b8; }
.app-main .proj-select {
  font-weight: 600;
  color: #172033;
  font-size: 13px;
}
.app-main .proj-search:focus-within,
.app-main .proj-select:focus {
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgb(15 23 42 / 0.07);
}

/* Card: align radius with the unified chrome (16px), clip table
   corners, and self-describe overflow so we don't rely on the
   stale output.css base. */
.app-main .proj-card {
  overflow: hidden;
  border-radius: 16px;
}

/* Header row: faint surface + crisper label tone. */
.app-main .proj-table thead th {
  background: #f9fafc;
  color: #6b7688;
  letter-spacing: 0.5px;
  padding: 11px 16px 10px;
  border-bottom: 1px solid #e9edf4;
}

/* Body rows: a touch more air and a calmer hover. */
.app-main .proj-table tbody td {
  padding: 13px 16px;
  color: #334155;
  border-bottom-color: #f1f4f9;
}
.app-main .proj-table tbody tr {
  transition: background-color .12s ease;
}
.app-main .proj-table tbody tr:hover { background: #f6f8fb; }

/* Project Nr.: navy ink, no underline until hover. Sub-label themed
   via class (promoted from the inline style). */
.app-main .proj-table .proj-id { color: #111827; font-weight: 700; }
.app-main .proj-table .proj-id-sub {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

/* Text columns (Klientas / Miestas / Vadybininkas): cap width and
   ellipsis so one long "UAB ..." name can't widen the whole table. */
.app-main .proj-table td:nth-child(2),
.app-main .proj-table td:nth-child(3),
.app-main .proj-table td:nth-child(4) {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Numeric columns: tabular + stay on one line (reaffirms the
   nowrap fix). Ilgis / Segmentai are secondary slate. */
.app-main .proj-table td.is-number,
.app-main .proj-table th.is-number { white-space: nowrap; }
.app-main .proj-table td.is-number {
  color: #475569;
  font-variant-numeric: tabular-nums;
}

/* Suma reads as THE primary figure — bigger, heavier, neutral ink
   (never coloured), tabular for clean column alignment. */
.app-main .proj-table td.proj-amount {
  color: #111827;
  font-weight: 700;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

/* Status badges: one cohesive low-saturation set. Soft tinted fills
   + same-family dark text + hairline border. close/done share the
   green family; done = solid system green ("finished" convention);
   measure = teal so sales vs measure stay glanceable. */
.app-main .proj-badge {
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
  border: 1px solid transparent;
}
.app-main .proj-badge.badge-sales {
  background: #eef4ff; color: #1d4ed8; border-color: #dbe7ff;
}
.app-main .proj-badge.badge-measure {
  background: #e6f4f4; color: #0f766e; border-color: #cce8e6;
}
.app-main .proj-badge.badge-works {
  background: #fdf3e6; color: #b45309; border-color: #f6e3c7;
}
.app-main .proj-badge.badge-close {
  background: #e7f6ee; color: #047857; border-color: #cdebd9;
}
.app-main .proj-badge.badge-done {
  background: #16a34a; color: #ffffff; border-color: #16a34a;
}

/* Empty state: centred and intentional. */
.app-main .proj-empty {
  padding: 44px 28px;
  text-align: center;
  color: #6b7688;
  font-size: 14px;
}

/* Responsive: kill horizontal scroll on laptop/projector widths by
   dropping the lowest-value columns. .proj-table-wrap stays as the
   safety net. 8 = Segmentai, 3 = Miestas. */
@media (max-width: 1100px) {
  .app-main .proj-table th:nth-child(8),
  .app-main .proj-table td:nth-child(8) { display: none; }
}
@media (max-width: 920px) {
  .app-main .proj-table th:nth-child(3),
  .app-main .proj-table td:nth-child(3) { display: none; }
}

/* ============================================================
   PROJECT TIMELINE (T2) — dated milestone history under the flow.
   Vertical timeline: connector rail + tone-coded dots (neutral /
   plan = navy-blue / done = green), matching the system palette.
   ============================================================ */
.app-main .flow-timeline-card { margin-top: 16px; padding: 18px 20px 20px; }
.app-main .flow-timeline-head { margin-bottom: 14px; }
.app-main .flow-timeline-empty {
  color: #64748b;
  font-size: 13px;
  max-width: 640px;
  margin: 0;
}
.app-main ol.flow-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 680px;
}
.app-main .flow-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 0 0 16px;
}
.app-main .flow-timeline-item:last-child { padding-bottom: 0; }
/* connector rail between dots */
.app-main .flow-timeline-item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: -2px;
  width: 2px;
  background: #e8edf4;
}
.app-main .flow-timeline-item:last-child::before { display: none; }
.app-main .flow-timeline-dot {
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f8;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.app-main .flow-timeline-dot .app-icon { width: 15px; height: 15px; }
.app-main .flow-timeline-item--plan .flow-timeline-dot {
  background: #eef4ff; color: #1d4ed8; border-color: #dbe7ff;
}
.app-main .flow-timeline-item--done .flow-timeline-dot {
  background: #e7f6ee; color: #047857; border-color: #cdebd9;
}
.app-main .flow-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 3px;
  min-width: 0;
}
.app-main .flow-timeline-when {
  font-size: 12px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.app-main .flow-timeline-label { font-size: 14px; font-weight: 600; color: #172033; }
.app-main .flow-timeline-sub { font-size: 12.5px; color: #64748b; }

/* Logged-in account: give the "Atsijungti" (logout) button its own full-width
   row instead of cramming it into the 18px chevron column, where it overflowed
   the sidebar and ended up behind the main content (unclickable). */
.app-sidebar .app-account:has(form) {
  grid-template-columns: 38px 1fr;
  row-gap: 4px;
}
.app-sidebar .app-account:has(form) form {
  grid-column: 1 / -1;
  margin: 0;
}
.app-sidebar .app-account:has(form) form button {
  width: 100%;
  text-align: left;
  padding: 6px 2px;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
}
.app-sidebar .app-account:has(form) form button:hover {
  color: #ffffff;
}

/* Login page: the stale output.css is missing the `max-w-sm`/`shadow-sm`
   utilities the card markup relies on, so without this it stretches full
   width. Constrain it to a centered card. */
.login-main {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 24rem;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.08);
}
.login-logo {
  height: 48px;
  width: auto;
}

/* Užpildas (gate/wicket infill) dropdowns a bit wider so model codes like
   "Vertikalios tvoralentės" / "3D segmentas 4mm" fit. Applies in every step
   (Vartai/varteliai): the openings-grid selects and the measure infill select.
   Appended last to win over the 92px/144px base widths (same specificity). */
.app-main .flow-segments-table select[name$="_infill_model"],
.app-main .create-select-field select[name$="_infill_model"] {
  width: 160px;
  min-width: 160px;
}

/* …except inside the measurement Vartai/Varteliai tables (initial + final), which
   are table-layout:fixed and only ~760px wide on most cards. There the hard 160px
   Užpildas select overflowed into the Automatika / El. spyna column. Let it fill
   its own cell, and pin Automatika / El. spyna to a compact column so Užpildas
   still takes the remaining width. */
.app-main .flow-gates-table select[name$="_infill_model"],
.app-main .flow-wickets-table select[name$="_infill_model"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.app-main .flow-gates-table th:nth-child(6),
.app-main .flow-gates-table td:nth-child(6) { width: 100px; }
.app-main .flow-wickets-table th:nth-child(5),
.app-main .flow-wickets-table td:nth-child(5) { width: 100px; }