/* ============================================================
   Offerte / CreaOfferta page styles
   ============================================================ */

/* ── Shell ─────────────────────────────────────────────────── */
.offerta-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h, 56px));
}

/* ── Page header ────────────────────────────────────────────── */
.offerta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.offerta-header-left  { display: flex; align-items: center; gap: 12px; }
.offerta-header-right { display: flex; align-items: center; gap: 8px; }

.offerta-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color .12s;
  flex-shrink: 0;
}
.offerta-back:hover { color: hsl(var(--foreground)); }

.offerta-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: hsl(var(--foreground));
}

/* ── Body ───────────────────────────────────────────────────── */
.offerta-body {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Quadro card ────────────────────────────────────────────── */
.offerta-quadro {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 8px);
  background: hsl(var(--card));
  transition: border-color .15s, box-shadow .15s;
}
.offerta-quadro.is-expanded {
  border-color: hsl(var(--primary) / 0.35);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.1);
}

.offerta-quadro-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: hsl(var(--muted) / 0.4);
  cursor: pointer;
  user-select: none;
  transition: background .12s;
  border-radius: var(--radius, 8px);
}
.offerta-quadro.is-expanded .offerta-quadro-header {
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.offerta-quadro-header:hover { background: hsl(var(--muted) / 0.65); }

.offerta-quadro-name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  outline: none;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offerta-quadro-name:focus {
  background: hsl(var(--background));
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
  overflow: visible;
}

.offerta-quadro-total {
  font-size: 12px;
  font-weight: 700;
  color: hsl(var(--foreground));
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Quadro info card header ─────────────────────────────────── */
.offerta-quadro-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

/* ── Articles table ──────────────────────────────────────────── */
.offerta-table-wrap { overflow-x: auto; }

/* Article section — tbl-wrap-like container for split tables */
.offerta-article-section {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
}
/* Per-article block separator + left accent stripe groups article with its accessories */
.offerta-article-block {
  border-top: 1px solid hsl(var(--border) / 0.6);
  border-left: 3px solid hsl(var(--primary) / 0.18);
}

.offerta-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.offerta-table thead th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.3);
  border-bottom: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border) / 0.4);
  white-space: nowrap;
}
.offerta-table thead th:last-child { border-right: none; }
.offerta-table thead th.th-num { text-align: right; }

/* Rounded top corners inside section */
.offerta-article-section .offerta-table thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.offerta-article-section .offerta-table thead th:last-child  { border-top-right-radius: calc(var(--radius) - 1px); }

/* article row */
.articolo-row { background: hsl(var(--background)); transition: background .1s; }
.articolo-row:hover { background: hsl(var(--muted) / 0.25); }
.articolo-row td {
  padding: 5px 4px;
  vertical-align: middle;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  border-right: 1px solid hsl(var(--border) / 0.4);
}
.articolo-row td:last-child { border-right: none; }

/* accessory row — muted bg + left indent to show nesting */
.accessorio-row { background: hsl(var(--muted) / 0.28); }
.accessorio-row:hover { background: hsl(var(--muted) / 0.42); }
.accessorio-row td {
  padding: 4px 4px;
  vertical-align: middle;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  border-right: 1px solid hsl(var(--border) / 0.4);
}
.accessorio-row td:last-child { border-right: none; }

/* Remove bottom border from last row in each split table */
.offerta-table tbody tr:last-child td { border-bottom: none; }

.acc-add-row td  { padding: 5px 10px; background: hsl(var(--muted) / 0.08); }
.acc-spacer td   { padding: 0; height: 1px; background: hsl(var(--border) / 0.4); }

/* column widths */
.col-toggle { width: 52px; text-align: center; padding: 0 4px !important; }
.col-codice { width: 100px; }
.col-desc   { min-width: 100px; }
.col-qty    { width: 90px; }
.col-price  { width: 104px; }
.col-disc   { width: 96px; }
.col-total  { width: 96px; text-align: right; white-space: nowrap; }
.col-del    { width: 44px; text-align: center; padding: 0 4px !important; }

/* Toggle cell: arrow + accessory count inline */
.col-toggle-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.acc-count-badge {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--primary));
  letter-spacing: 0;
}

.acc-indent {
  padding-left: 10px !important;
  color: hsl(var(--muted-foreground));
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* hide spinner arrows on number cell inputs */
.cell-in[type=number]::-webkit-inner-spin-button,
.cell-in[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cell-in[type=number] { -moz-appearance: textfield; }

/* cell inputs (inline table editing — not covered by Input component) */
.cell-in {
  width: 100%;
  font-size: 12px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color .1s, background .1s;
  box-sizing: border-box;
}
.cell-in:hover  { border-color: hsl(var(--border)); background: hsl(var(--background)); }
.cell-in:focus  { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--background)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); }
.cell-in-r      { text-align: right; }
.cell-total-val {
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  padding-right: 8px;
  color: hsl(var(--foreground));
}

/* inline discount input in table cells */
.disc-input {
  width: 58px;
  text-align: right;
  padding: 3px 6px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color .12s, background .12s;
}
.disc-input:hover  { border-color: hsl(var(--border)); background: hsl(var(--muted)/0.5); }
.disc-input:focus  { border-color: hsl(var(--primary)/0.6); background: hsl(var(--background)); }
.disc-input::-webkit-inner-spin-button,
.disc-input::-webkit-outer-spin-button { opacity: 0; }
.disc-input:focus::-webkit-inner-spin-button { opacity: 1; }

/* add article row container */
.offerta-add-article-row {
  padding: 6px 8px;
  border-top: 1px dashed hsl(var(--border));
}

/* ── Sticky total bar ────────────────────────────────────────── */
.offerta-totalbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 12px 24px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  position: sticky;
  bottom: 0;
  z-index: 20;
}
.offerta-totalbar-label {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}
.offerta-totalbar-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

/* ── Offerta identity strip ─────────────────────────────────── */
.offerta-identity-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: hsl(var(--muted) / 0.35);
  border-bottom: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  flex-wrap: wrap;
}
.ois-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ois-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  line-height: 1;
}
.ois-code {
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.ois-value {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.5;
}
.ois-sep {
  width: 1px;
  height: 28px;
  background: hsl(var(--border));
  flex-shrink: 0;
}

/* ── Flex row for info tab fields ───────────────────────────── */
.offerta-info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* ── Section group label (condizioni commerciali) ───────────── */
.offerta-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 10px;
}
.offerta-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

/* ── Filter-clear button (filter icon + X overlay) ─────────── */
.filter-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.filter-clear-btn:hover {
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}
.filter-clear-x {
  position: absolute;
  bottom: 2px;
  right: 2px;
  color: hsl(var(--primary));
  stroke-width: 3;
}

/* ── Offerte list page ───────────────────────────────────────── */
.offerte-page { padding: 24px; display: flex; flex-direction: column; gap: 20px; }

.offerte-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.offerte-page-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: hsl(var(--foreground));
}
.offerte-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.offerte-stats--row { grid-template-columns: repeat(5, 1fr); }

/* ── Key-value read-only grid (riepilogo) ───────────────────── */
.offerta-kv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 24px;
}
.offerta-kv-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.kv-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: hsl(var(--muted-foreground));
}
.kv-value {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offerta-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}
.offerta-status-bozza    { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.offerta-status-inviata  { background: hsl(var(--info) / 0.15); color: hsl(var(--info)); }
.offerta-status-approvata{ background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
.offerta-status-scaduta  { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }