/*
 * SALVIATO LAB — Unified Interface v1
 * 21/10/2026 · Scope: body.salviato-ui, screen only.
 * Visual-only. NO changes to diagrams, printing, pricing or business logic.
 * A mirrored copy belongs to portale-rivenditori/assets/ui-system.css.
 */
@media screen {
  body.salviato-ui {
    --ui-brand: #004747;
    --ui-brand-hover: #00615c;
    --ui-brand-muted: #e4f1ef;
    --ui-ink: #193330;
    --ui-subtle: #536a66;
    --ui-muted: #6b7e7a;
    --ui-canvas: #f3f6f5;
    --ui-surface: #fff;
    --ui-soft: #f8faf9;
    --ui-line: #dce6e3;
    --ui-line-strong: #c7d9d4;
    --ui-focus: #1b8375;
    --ui-warn: #9a571b;
    --ui-bad: #a53030;
    --ui-shadow: 0 6px 20px rgba(17,67,59,.045);
    --ui-shadow-hover: 0 12px 36px rgba(17,67,59,.09);
    --ui-radius-sm: 9px;
    --ui-radius: 14px;
    --ui-radius-lg: 19px;
    --ui-space-1: 6px;
    --ui-space-2: 10px;
    --ui-space-3: 14px;
    --ui-space-4: 20px;
    --ui-space-5: 26px;
    color: var(--ui-ink);
    background: var(--ui-canvas);
    font-variant-numeric: tabular-nums;
  }


  /* Mirrored logo layout on the independently built dealer portal. */
  body.salviato-ui .login-brand.salviato-brand,
  body.salviato-ui .sidebar .brand.salviato-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  body.salviato-ui .salviato-logo {
    display: block;
    width: min(100%, 242px);
    height: auto;
    max-height: 90px;
    object-fit: contain;
  }
  body.salviato-ui .sidebar .salviato-logo {
    width: 100%;
    max-width: 226px;
    max-height: 82px;
  }
  body.salviato-ui .login-brand.salviato-brand > small {
    font-size: 12px;
    color: #586f68;
  }
  body.salviato-ui .sidebar .brand.salviato-brand > small {
    font-size: 11px;
    color: #bedbd3;
    margin: 0;
  }

  /* Shared shell: the original Salviato brand is preserved. */
  body.salviato-ui .login-screen { background: radial-gradient(circle at 15% 18%, rgba(59,155,138,.20), transparent 38%), #004747; }
  body.salviato-ui .login-panel {
    border-radius: 22px;
    box-shadow: 0 26px 80px rgba(0,30,27,.24);
    border: 1px solid rgba(255,255,255,.62);
  }
  body.salviato-ui .login-panel .login-copy h1 { letter-spacing: -.035em; line-height: 1.12; }
  body.salviato-ui :is(.sidebar,.responsive-drawer) {
    background: #004747;
    color: #fff;
  }
  body.salviato-ui .sidebar {
    border-right: 1px solid rgba(255,255,255,.12);
    scrollbar-color: rgba(255,255,255,.22) transparent;
    scrollbar-width: thin;
  }
  body.salviato-ui .sidebar .brand.salviato-brand { padding-bottom: 12px; }
  body.salviato-ui .sidebar .brand.salviato-brand > small { color: #c4dad5; }
  body.salviato-ui .main-nav { gap: 3px; }
  body.salviato-ui .nav-group { margin-block: 8px 5px; }
  body.salviato-ui .nav-group-title { letter-spacing: .09em; color: #b8d5d0; }
  body.salviato-ui .nav-item {
    min-height: 43px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .005em;
    transition: background-color .15s ease, color .15s ease;
  }
  body.salviato-ui .sidebar .nav-item:not(.is-active),
  body.salviato-ui .responsive-drawer .nav-item:not(.is-active) { color: #cbe0dd; }
  body.salviato-ui .nav-item:hover { background: rgba(255,255,255,.11); color: white; }
  body.salviato-ui .nav-item.is-active {
    color: var(--ui-brand);
    background: #f7fdfb;
    font-weight: 780;
    box-shadow: inset 3px 0 0 #66c2b0;
  }
  body.salviato-ui .account-card,
  body.salviato-ui :is(.sidebar-note,.security-card) {
    border-color: rgba(255,255,255,.19);
    background: rgba(255,255,255,.065);
    border-radius: 13px;
  }
  body.salviato-ui .sidebar :is(.sidebar-note,.security-card) small { color: #c0d9d4; }

  /* Headings and executive overview */
  body.salviato-ui .app-shell { min-width: 0; }
  body.salviato-ui .topbar {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--ui-line);
    box-shadow: 0 2px 14px rgba(25,59,54,.025);
  }
  body.salviato-ui .topbar h1,
  body.salviato-ui .page-title { color: #183c37; letter-spacing: -.035em; }
  body.salviato-ui .eyebrow { color: #096e62; letter-spacing: .095em; }
  body.salviato-ui .protected-badge {
    border: 1px solid #bbdbd4;
    border-radius: 999px;
    background: #ecf7f4;
    color: #0d5c52;
  }
  body.salviato-ui .save-status { color: #536d67; }
  body.salviato-ui :is(.card,.kpi-card,.loading-card,.quote-card,.summary-card) {
    border-color: var(--ui-line);
    box-shadow: var(--ui-shadow);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
  }
  body.salviato-ui :is(.card-header,.panel-heading) h2 { color: #1c4039; letter-spacing: -.02em; }
  body.salviato-ui :is(.card-header,.panel-heading) p { color: var(--ui-subtle); }
  body.salviato-ui .kpi-card {
    padding: clamp(16px, 1.65vw, 22px);
    border-radius: 16px;
    border-top: 3px solid #d5e6e1;
  }
  body.salviato-ui .kpi-card strong { color: #173e36; letter-spacing: -.045em; }
  body.salviato-ui .kpi-card small { color: #56716b; font-size: 11px; letter-spacing: .07em; }
  body.salviato-ui .kpi-card.accent,
  body.salviato-ui .summary-hero { background: #004747; color: #fff; border-color: #004747; }
  body.salviato-ui .kpi-card.accent strong,
  body.salviato-ui .summary-hero strong,
  body.salviato-ui .summary-hero h2 { color: white; }
  body.salviato-ui .kpi-card.accent small,
  body.salviato-ui .summary-hero small,
  body.salviato-ui .summary-hero p { color: #cfe9e3; }

  /* Shared action hierarchy: primary / secondary / destructive. */
  body.salviato-ui :is(.button,.role-card,.primary-action) {
    border-radius: 10px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  body.salviato-ui .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 41px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.35;
    white-space: normal;
  }
  body.salviato-ui .button.primary {
    background: #004747;
    border-color: #004747;
    color: white;
    box-shadow: 0 4px 12px rgba(0,71,71,.12);
  }
  body.salviato-ui .button.primary:hover { background: #00615c; border-color: #00615c; }
  body.salviato-ui .button.ghost {
    background: white;
    border-color: var(--ui-line-strong);
    color: #20534b;
    box-shadow: none;
  }
  body.salviato-ui .button.ghost:hover { background: #f2f9f6; border-color: #a2cfc2; }
  body.salviato-ui .button.order { background: #ae6427; color: white; border-color: #ae6427; }
  body.salviato-ui .button.danger { color: #922d2d; background: #fff7f7; border-color: #ebc9c9; }
  body.salviato-ui .button:disabled { cursor: not-allowed; box-shadow: none; opacity: .55; transform: none; }
  body.salviato-ui :is(.button,.nav-item,.role-card,.responsive-menu-button,button,summary):focus-visible {
    outline: 3px solid #58c3b4;
    outline-offset: 3px;
  }

  /* Inputs — preserve grid geometry and existing controlled values. */
  body.salviato-ui :is(.field,.bc-field,.form-field,label) { min-width: 0; }
  body.salviato-ui .form-grid > *,
  body.salviato-ui .position-form > *,
  body.salviato-ui .advanced-form-grid > * { min-width: 0; }
  body.salviato-ui :is(
      .form-grid,.position-form,.advanced-form-grid,
      .configurator-shell,.bgp-dialog,.gardesa-dialog,
      .mixed-editor-dialog,.cassamatta-embedded-dialog
    ) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
    min-width: 0;
    max-width: 100%;
    border: 1px solid #c9d7d3;
    border-radius: 9px;
    background: #fff;
    color: #1d3632;
    padding: 10px 12px;
    min-height: 42px;
    line-height: 1.35;
    box-shadow: inset 0 1px 1px rgba(10,50,41,.015);
  }
  body.salviato-ui :is(.form-grid,.position-form,.advanced-form-grid,.configurator-shell,.bgp-dialog,.gardesa-dialog)
    :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea):focus {
    border-color: #1a8575;
    box-shadow: 0 0 0 3px rgba(26,133,117,.12);
    outline: none;
  }
  body.salviato-ui :is(.form-grid,.configurator-shell,.bgp-dialog,.gardesa-dialog) :is(input,select,textarea):disabled {
    background: #f2f5f4;
    border-color: #d9e3df;
    color: #64736f;
  }
  body.salviato-ui :is(.form-grid,.configurator-shell,.bgp-dialog,.gardesa-dialog) :is(input,select,textarea)[aria-invalid=true] {
    border-color: #ba4040;
    box-shadow: 0 0 0 2px rgba(186,64,64,.12);
  }
  body.salviato-ui input[type=checkbox],
  body.salviato-ui input[type=radio] { accent-color: #00645a; }

  /* Data density remains operationally useful, with better alignment and reading. */
  body.salviato-ui .table-wrap { border-color: var(--ui-line); border-radius: 0 0 12px 12px; }
  body.salviato-ui .table-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; }
  body.salviato-ui .table-wrap :is(th,td) { vertical-align: middle; border-bottom-color: #e6edea; }
  body.salviato-ui .table-wrap th { background: #f7faf9; color: #49635e; font-weight: 740; }
  body.salviato-ui .table-wrap tbody tr:hover { background: #f5faf8; }
  body.salviato-ui .table-wrap tbody tr:last-child td { border-bottom: 0; }
  body.salviato-ui :is(.table-wrap,.position-table) :is(.money,.total,.price) {
    font-variant-numeric: tabular-nums;
  }

  /* Product configuration system: Gardesa, BGP, Bettio, Eko and wood. */
  body.salviato-ui .configurator-shell[open] {
    border: 1px solid #ccdad6;
    border-radius: 18px;
    box-shadow: 0 27px 80px rgba(11,45,40,.21);
    background: #f3f6f5;
  }
  body.salviato-ui :is(.configurator-shell,.installation-dialog,.bgp-dialog) .installation-dialog-head {
    background: #fff;
    border-bottom: 1px solid #d9e6e1;
    padding-block: 18px;
  }
  body.salviato-ui :is(.configurator-shell,.installation-dialog,.bgp-dialog) .installation-dialog-head h2 {
    font-size: clamp(19px,2vw,24px);
    line-height: 1.3;
    color: #173f38;
    letter-spacing: -.025em;
  }
  body.salviato-ui :is(.configurator-shell,.installation-dialog,.bgp-dialog) .installation-dialog-head p {
    color: #59706b; font-size: 12px; line-height: 1.5;
  }
  body.salviato-ui .configurator-shell .configurator-scroll { background: #f3f6f5; }
  body.salviato-ui :is(.configurator-shell,.gardesa-dialog) .config-stage,
  body.salviato-ui .configurator-shell .configurator-section,
  body.salviato-ui .configurator-shell .direct-advanced,
  body.salviato-ui .bgp-dialog :is(.bgp-model,.bgp-manual,.bgp-accessory) {
    border-radius: 13px;
    border-color: #dae5e1;
    background: white;
    box-shadow: 0 2px 10px rgba(25,55,47,.027);
  }
  body.salviato-ui .configurator-shell .configurator-section>summary {
    display: block;
    padding: 17px 18px;
    color: #184940;
    font-weight: 730;
    min-height: 52px;
    border-radius: 12px;
  }
  body.salviato-ui .configurator-shell .configurator-section>summary:hover { background: #f4f9f7; }
  body.salviato-ui .configurator-shell .configurator-section[open]>summary { border-bottom: 1px solid #e1ebe7; border-radius: 12px 12px 0 0; }
  body.salviato-ui .configurator-shell .configurator-brief {
    font-size: 12px;
    line-height: 1.5;
    color: #5d756e;
    font-weight: 450;
  }
  body.salviato-ui .configurator-shell .configurator-section.has-warning {
    border-color: #d4a35f; background: #fffdf8;
  }
  body.salviato-ui .configurator-shell .configurator-section.has-warning>summary {
    color: #875417;
  }
  body.salviato-ui :is(.configurator-shell,.gardesa-dialog) .config-stage-title {
    border-bottom: 1px solid #e9efed;
    padding-bottom: 12px;
    margin-bottom: 15px;
  }
  body.salviato-ui :is(.configurator-shell,.gardesa-dialog) .config-stage-title h3 { color: #174b42; letter-spacing: -.02em; }
  body.salviato-ui :is(.configurator-shell,.gardesa-dialog) .config-stage-title small { color: #5a726d; }
  body.salviato-ui .configurator-shell .configurator-footer {
    background: #fff;
    border-top: 1px solid #d3e2dd;
    box-shadow: 0 -8px 26px rgba(19,60,52,.04);
  }
  body.salviato-ui .configurator-shell .configurator-footer-info strong {
    color: #00584d;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
  }
  body.salviato-ui .configurator-shell .configurator-footer-info span {
    color: #59726b;
    line-height: 1.5;
    font-size: 12px;
  }
  body.salviato-ui .configurator-shell .configurator-footer :is(.button,button[type=submit]) {
    min-height: 44px;
    border-radius: 10px;
  }
  body.salviato-ui .gardesa-dialog .gardesa-panel-config,
  body.salviato-ui .bgp-dialog .bgp-option-list {
    border-radius: 12px; border-color: #dce6e2; background: #fafcfa;
  }
  body.salviato-ui .bgp-dialog .bgp-model {
    background: #f7faf8; padding: 16px; border-radius: 12px;
  }
  body.salviato-ui .bgp-dialog .bgp-model img {
    width: auto; height: auto; max-width: 100%; max-height: 205px; object-fit: contain;
  }
  body.salviato-ui .bgp-dialog .bgp-economics div,
  body.salviato-ui .gardesa-dialog [data-summary] {
    background: #edf6f2;
    border: 1px solid #d3e5dd;
    border-radius: 10px;
  }
  body.salviato-ui :is(.bgp-error,.bgp-errors,.form-error,[data-error]) {
    overflow-wrap: anywhere;
  }

  /* Cassamatte/scuri editors: keep CAD and 2D diagrams untouched. */
  body.salviato-ui .cassamatta-embedded-dialog[open],
  body.salviato-ui .mixed-editor-dialog[open] {
    border: 1px solid #ccdad6;
    border-radius: 17px;
    box-shadow: 0 24px 70px rgba(0,45,38,.2);
  }
  body.salviato-ui .mixed-editor-bar {
    background: #eff7f4;
    color: #164f45;
    border-bottom: 1px solid #d6e6df;
    min-height: 54px;
  }
  body.salviato-ui .mixed-family-heading h3 { color: #1a4a41; }
  body.salviato-ui .mixed-family-heading span { color: #58716a; }


  /* Standalone Cassamatte (the editor runs in its own iframe). */
  body.salviato-ui .portal-sidebar { background: #004747; color: white; }
  body.salviato-ui .portal-sidebar :is(a,button) { border-radius: 9px; }
  body.salviato-ui .portal-sidebar .portal-brand { color: white; }
  body.salviato-ui :is(.site-header,.editor-top) {
    background: #fff;
    border-bottom: 1px solid #dce7e2;
    color: #194b42;
    box-shadow: 0 3px 12px rgba(20,71,61,.035);
  }
  body.salviato-ui .editor-top strong { color: #154b41; font-size: 15px; }
  body.salviato-ui .editor-top :is(input,select,textarea),
  body.salviato-ui .configurator-panel :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
    border: 1px solid #c9d9d3;
    border-radius: 9px;
    background: white;
    color: #1a3f37;
    min-height: 39px;
    max-width: 100%;
    padding: 8px 11px;
  }
  body.salviato-ui .editor-top :is(input,select,textarea):focus-visible,
  body.salviato-ui .configurator-panel :is(input,select,textarea):focus-visible {
    outline: 3px solid #68bfae;
    outline-offset: 2px;
    border-color: #188070;
  }
  body.salviato-ui .configurator-panel :is(.button.primary,button.primary) {
    background: #004747; border-color: #004747; color: white;
  }
  body.salviato-ui .configurator-panel :is(.button,button) { border-radius: 9px; }
  body.salviato-ui .configurator-panel :is(.card,.section-card,.form-section) {
    border-color: #dbe8e2; border-radius: 12px;
  }

  /* Status/warnings: semantic colors, no concealment of the message. */
  body.salviato-ui :is(.warning-box,.config-status.is-review,.dialog-list.warning) {
    border: 1px solid #efdab9;
    border-left: 4px solid #bd822c;
    border-radius: 10px;
    background: #fff9ed;
    color: #82501c;
  }
  body.salviato-ui :is(.config-status.is-invalid,.dialog-list.error,.bgp-error,.form-error) {
    border-left-color: #c54a40;
    color: #942d28;
  }
  body.salviato-ui .toast { border-radius: 12px; box-shadow: var(--ui-shadow-hover); }
  body.salviato-ui :is(.order-dialog,.installation-dialog)[open] { box-shadow: 0 26px 75px rgba(7,45,41,.24); }
  body.salviato-ui dialog::backdrop { background: rgba(7,32,30,.59); }
  body.salviato-ui .legal-footer { color: #617a73; }

  /* Responsive: preserve workflow controls without horizontal scrolling. */
  @media (max-width: 1100px) {
    body.salviato-ui .responsive-header { background: #004747; border-bottom: 1px solid rgba(255,255,255,.12); }
    body.salviato-ui .responsive-drawer .nav-item { min-height: 46px; }
    body.salviato-ui .topbar { gap: 16px; }
    body.salviato-ui .top-actions { flex-wrap: wrap; row-gap: 8px; }
    body.salviato-ui .app-shell { min-width: 0; }
  }
  @media (max-width: 700px) {
    body.salviato-ui .login-panel { padding: 22px 18px; border-radius: 18px; }
    body.salviato-ui .topbar h1 { font-size: clamp(20px,5vw,27px); }
    body.salviato-ui .topbar .top-actions { gap: 7px; }
    body.salviato-ui .topbar .top-actions .button { padding: 9px 11px; min-height: 43px; }
    body.salviato-ui .kpi-card { padding: 15px; }
    body.salviato-ui .kpi-card strong { white-space: normal; font-size: 21px; overflow-wrap: anywhere; }
    body.salviato-ui .configurator-shell[open],
    body.salviato-ui .cassamatta-embedded-dialog[open] { border-radius: 0; }
    body.salviato-ui .configurator-shell .configurator-scroll { padding: 14px; }
    body.salviato-ui .configurator-shell .configurator-footer { padding: 12px 14px max(12px,env(safe-area-inset-bottom)); }
    body.salviato-ui .bgp-dialog .bgp-model img { max-height: 165px; }
    body.salviato-ui .mobile-action-bar {
      background: rgba(255,255,255,.985);
      border-top: 1px solid #d4e2dd;
      box-shadow: 0 -5px 22px rgba(14,60,53,.09);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body.salviato-ui :is(.button,.nav-item,.role-card) { transition: none; }
  }
}


/* ── Visual redesign v2: distinctive workspace shell rather than token-only changes ── */
@media screen {
  body.salviato-ui {
    --ui-canvas:#edf2ef;
    --ui-brand:#006158;
    background-color:#edf2ef;
    background-image:radial-gradient(circle at 75% 5%,rgba(171,213,199,.28),transparent 40%);
  }
  /* Desktop navigation has a stable dedicated 272px workspace rail. */
  @media(min-width:1101px) {
    body.salviato-ui .sidebar {
      width:272px;
      padding:24px 16px 20px;
    }
    body.salviato-ui .app-shell { margin-left:272px; }
  }
  body.salviato-ui .sidebar {
    background:linear-gradient(165deg,#052f30 0%,#073e3b 53%,#004747 100%);
    border-right:1px solid rgba(207,240,230,.16);
    box-shadow:8px 0 28px rgba(10,48,40,.075);
  }
  body.salviato-ui .sidebar .brand.salviato-brand {
    align-items:flex-start;
    padding:8px 10px 18px;
    margin-bottom:16px;
    border-bottom:1px solid rgba(202,244,228,.21);
    gap:12px;
  }
  body.salviato-ui .sidebar .brand.salviato-brand .salviato-logo {
    max-width:220px;
    padding:0;
  }
  body.salviato-ui .sidebar .brand.salviato-brand>small {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:10px;
    font-weight:760;
    text-transform:uppercase;
    letter-spacing:.13em;
    color:#a7d8ca;
  }
  body.salviato-ui .sidebar .brand.salviato-brand>small::before {
    content:"";
    display:inline-block;
    width:7px;height:7px;
    border-radius:50%;
    background:#7de1bf;
    box-shadow:0 0 0 4px rgba(125,225,191,.13);
  }
  body.salviato-ui .sidebar .main-nav {
    gap:5px;
    padding:2px 0;
  }
  body.salviato-ui .sidebar .nav-group {
    padding:15px 0;
    margin:10px 0 6px;
    border-block:1px solid rgba(205,240,231,.14);
  }
  body.salviato-ui .sidebar .nav-group-title {
    padding:0 13px 10px;
    color:#90cfc0;
    font-size:10px;
    letter-spacing:.14em;
  }
  body.salviato-ui .sidebar .nav-item {
    padding:11px 14px;
    min-height:45px;
    width:100%;
    border-radius:11px;
    font-size:13px;
    font-weight:590;
    letter-spacing:0;
  }
  body.salviato-ui .sidebar .nav-item>span:first-child {
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    color:#a7e6d2;
    font-size:16px;
  }
  body.salviato-ui .sidebar .nav-item.is-active {
    background:#dff7ed;
    color:#054b43;
    font-weight:800;
    border-radius:11px;
    box-shadow:0 3px 13px rgba(1,15,13,.14);
  }
  body.salviato-ui .sidebar .nav-item.is-active>span:first-child {
    color:#00695c;
  }
  body.salviato-ui .sidebar :is(.sidebar-note,.security-card,.account-card) {
    background:rgba(224,252,240,.08);
    border-color:rgba(196,240,221,.18);
  }

  /* Brand-green command header. Strong hierarchy on all three portals. */
  body.salviato-ui .topbar {
    min-height:125px;
    padding:24px clamp(22px,3vw,42px);
    align-items:center;
    gap:20px;
    background:linear-gradient(110deg,#005049 0%,#07655b 62%,#125b57 100%);
    border-bottom:0;
    box-shadow:0 12px 26px rgba(0,66,57,.18);
    border-radius:0 0 22px 22px;
    color:#fff;
    z-index:8;
  }
  body.salviato-ui .topbar .ui-page-heading {min-width:0}
  body.salviato-ui .ui-header-meta {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:7px;
  }
  body.salviato-ui .ui-header-symbol {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    flex:none;
    border:1px solid rgba(255,255,255,.32);
    border-radius:9px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:17px;
    line-height:1;
    font-weight:800;
  }
  body.salviato-ui .topbar .eyebrow {
    color:#b9eee0;
    letter-spacing:.11em;
    font-weight:760;
    font-size:10px;
    margin:0;
  }
  body.salviato-ui .topbar h1,
  body.salviato-ui .topbar #page-title {
    font-size:clamp(25px,2.55vw,34px);
    font-weight:800;
    line-height:1.16;
    letter-spacing:-.045em;
    color:#fff;
    margin:0;
  }
  body.salviato-ui .ui-page-subtitle {
    display:block;
    margin-top:7px;
    color:#c5ebe2;
    font-size:12px;
    font-weight:480;
    line-height:1.45;
  }
  body.salviato-ui .topbar .save-status {
    display:inline-flex;
    margin-top:8px;
    font-size:11px;
    color:#c4f0df;
    font-weight:620;
  }
  body.salviato-ui .topbar .top-actions {
    gap:9px;
    align-items:center;
  }
  body.salviato-ui .topbar .top-actions .button {
    min-height:43px;
    padding:10px 15px;
    border-radius:11px;
    font-size:12px;
    font-weight:760;
    box-shadow:none;
    white-space:normal;
  }
  body.salviato-ui .topbar .button.ghost {
    border-color:rgba(212,254,243,.40);
    background:rgba(247,255,252,.11);
    color:#fff;
  }
  body.salviato-ui .topbar .button.ghost:hover {
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.65);
  }
  body.salviato-ui .topbar .button.primary {
    background:#e3fbf1;
    color:#03483e;
    border-color:#e3fbf1;
    box-shadow:0 5px 12px rgba(0,36,31,.1);
  }
  body.salviato-ui .topbar .button.primary:hover {
    color:#013c36;
    border-color:#fff;
    background:#fff;
  }
  body.salviato-ui .topbar .button.order {
    background:#ffcf8b;
    border-color:#ffcf8b;
    color:#542e09;
  }
  body.salviato-ui .topbar .protected-badge {
    color:#e1fff5;
    background:rgba(255,255,255,.10);
    border-color:rgba(225,255,241,.33);
    font-size:11px;
    padding:9px 12px;
    min-height:43px;
  }
  body.salviato-ui .topbar .protected-badge::before {color:#a0f0bd;}

  /* Page-level content layout no longer looks like the old flat portal. */
  body.salviato-ui #app {
    max-width:1680px;
    padding:clamp(20px,2.6vw,36px) clamp(18px,3.1vw,43px) 72px;
  }
  body.salviato-ui .card,
  body.salviato-ui .loading-card {
    border:1px solid #dbe6df;
    border-radius:18px;
    box-shadow:0 9px 26px rgba(9,58,44,.06);
  }
  body.salviato-ui .card-header {
    padding:22px 24px 19px;
    border-bottom:1px solid #e5eeea;
    background:linear-gradient(125deg,#fff 0%,#f7faf8 100%);
  }
  body.salviato-ui .card-header h2 {
    color:#073f38;
    font-size:19px;
    font-weight:800;
    letter-spacing:-.035em;
  }
  body.salviato-ui .card-header h3 {
    color:#073f38;
    font-size:16px;
    font-weight:780;
  }
  body.salviato-ui .card-header p {
    color:#5b7169;
    margin-top:6px;
    font-size:12px;
    line-height:1.45;
  }
  body.salviato-ui .card-body {padding:22px 24px 24px;}
  body.salviato-ui .kpi-grid {gap:17px;margin-bottom:24px}
  body.salviato-ui .kpi-card {
    position:relative;
    overflow:hidden;
    padding:22px;
    border:1px solid #d9e8e1;
    border-top:0;
    border-left:5px solid #4ba58d;
    border-radius:16px;
    background:#fff;
    box-shadow:0 9px 27px rgba(5,57,45,.07);
  }
  body.salviato-ui .kpi-card::after {
    content:"";
    position:absolute;
    right:-20px;top:-28px;
    width:120px;height:120px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(126,205,168,.18),transparent 69%);
    pointer-events:none;
  }
  body.salviato-ui .kpi-card small {
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:.10em;
    color:#5a746d;
  }
  body.salviato-ui .kpi-card strong {
    margin-top:11px;
    font-size:clamp(24px,2.6vw,31px);
    color:#004f44;
    font-weight:830;
  }
  body.salviato-ui .kpi-card.accent {
    background:linear-gradient(135deg,#005b53,#003f3d);
    border-left-color:#81dbc0;
    border-top:0;
    border-color:#005b53;
  }
  body.salviato-ui .kpi-card.accent strong {color:#fff;}
  body.salviato-ui .kpi-card.accent::after {
    background:radial-gradient(circle,rgba(212,255,239,.22),transparent 69%);
  }
  body.salviato-ui .content-grid {gap:26px;}
  body.salviato-ui .content-stack {gap:21px;}
  body.salviato-ui .summary-hero {
    background:linear-gradient(135deg,#00594f 0%,#003b3a 100%);
    border-bottom:1px solid rgba(255,255,255,.10);
    padding:27px 25px;
  }
  body.salviato-ui .table-wrap th {
    background:#eff6f1;
    border-bottom:1px solid #cfded6;
    color:#416259;
    padding-top:12px;
    padding-bottom:12px;
  }
  body.salviato-ui .table-wrap tbody tr:nth-child(even) {
    background:#fbfdfb;
  }

  /* Steps are now visual landmarks, not identical grey boxes. */
  body.salviato-ui .configurator-shell[open] {
    width:min(1390px,calc(100vw - 32px));
    height:min(950px,calc(100dvh - 32px));
    border:1px solid #bdd9cd;
    border-radius:20px;
    background:#edf3ef;
  }
  body.salviato-ui .configurator-shell .installation-dialog-head {
    padding:20px 26px;
    background:linear-gradient(105deg,#004942,#07665b);
    color:#fff;
    border-bottom:0;
  }
  body.salviato-ui .configurator-shell .installation-dialog-head h2 {
    font-size:clamp(20px,2.5vw,26px);
    color:#fff;
  }
  body.salviato-ui .configurator-shell .installation-dialog-head p {color:#cdece0;}
  body.salviato-ui .configurator-shell .installation-dialog-head .button.ghost {
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.4);
    color:#fff;
  }
  body.salviato-ui .configurator-shell .configurator-section {
    border-radius:14px;
    border:1px solid #d1e1d9;
    border-left:4px solid #8cbba9;
    box-shadow:0 6px 14px rgba(16,62,51,.055);
  }
  body.salviato-ui .configurator-shell .configurator-section[open] {
    border-left:4px solid #008875;
  }
  body.salviato-ui .configurator-shell .configurator-section>summary {
    padding:19px 19px 20px;
    font-size:15px;
    font-weight:790;
    color:#004c43;
  }
  body.salviato-ui .configurator-shell .configurator-section>summary strong {
    font-size:15px;
  }
  body.salviato-ui .configurator-shell .configurator-section>summary .configurator-brief {
    padding-left:0;
    margin-top:8px;
    font-size:12px;
    color:#5d716a;
  }
  body.salviato-ui .configurator-shell .configurator-footer {
    min-height:84px;
    padding:14px 26px;
    border-top:1px solid #cbded3;
    box-shadow:0 -10px 28px rgba(10,70,50,.06);
  }
  body.salviato-ui .configurator-shell .configurator-footer-info strong {font-size:23px;}
  body.salviato-ui .configurator-shell .config-stage {
    padding:21px;
    border-radius:13px;
  }
  body.salviato-ui .configurator-shell .form-grid {
    gap:15px 18px;
  }
  body.salviato-ui .bgp-dialog .bgp-model {
    background:linear-gradient(135deg,#f0f8f4,#fff);
    border:1px solid #d1e5d8;
    padding:24px;
  }
  body.salviato-ui .gardesa-dialog .gardesa-panel-config {
    background:#f9fbfa;
    border:1px solid #d8e5dd;
    padding:16px;
    border-radius:12px;
  }
  /* Larger customer and technical warning differences without changing semantics. */
  body.salviato-ui .config-status.is-invalid {
    border:1px solid #eab9b5;
    border-left:5px solid #b74646;
    background:#fff4f2;
    padding:14px 17px;
    border-radius:12px;
  }

  /* A two-column login is immediately recognizable, even before credentials. */
  @media (min-width:830px) {
    body.salviato-ui:has(.admin-login-form) .login-panel {
      max-width:1040px;
      width:min(1040px,calc(100vw - 50px));
      display:grid;
      grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
      grid-template-areas:"brand login" "intro login" ". legal";
      gap:0 38px;
      padding:46px 48px;
      align-items:start;
      border-radius:24px;
      background:linear-gradient(105deg,#f4f9f5 0%,#f4f9f5 49.6%,#fff 49.7%,#fff 100%);
    }
    body.salviato-ui:has(.admin-login-form) .login-brand {grid-area:brand;border:0;padding-bottom:22px;}
    body.salviato-ui:has(.admin-login-form) .login-copy {grid-area:intro;padding:4px 0 0;}
    body.salviato-ui:has(.admin-login-form) .admin-login-form {
      grid-area:login;
      padding:42px 0 10px;
    }
    body.salviato-ui:has(.admin-login-form) .login-note {
      grid-area:legal;
      text-align:left;
      margin:16px 0 0;
    }
    body.salviato-ui:has(.admin-login-form) .password-row {
      display:grid;
      grid-template-columns:1fr;
      gap:13px;
    }
    body.salviato-ui:has(.admin-login-form) .password-row>input {
      min-height:58px;
    }
    body.salviato-ui:has(.admin-login-form) .role-card {min-height:78px;}
  }
  body.salviato-ui .login-screen {
    background-color:#003b39;
    background-image:radial-gradient(circle at 15% 15%,rgba(106,220,183,.24),transparent 36%),
      radial-gradient(circle at 90% 87%,rgba(162,218,192,.16),transparent 37%);
  }
  body.salviato-ui .login-panel {
    border-radius:24px;
    border-color:rgba(240,255,247,.7);
    box-shadow:0 36px 110px rgba(0,31,27,.35);
  }
  body.salviato-ui .login-copy h1 {font-size:clamp(31px,3.2vw,46px);letter-spacing:-.055em;color:#053c37;}
  body.salviato-ui .login-copy>p:last-child {font-size:15px;line-height:1.75;}
  body.salviato-ui .role-card {border-color:#cddfd6;}
  body.salviato-ui .role-card:hover {border-color:#8ac9b7;background:#f1fbf6;}
  body.salviato-ui .login-panel .eyebrow {font-size:11px;color:#087a65;}

  @media(max-width:1100px) {
    body.salviato-ui .app-shell {margin-left:0;}
    body.salviato-ui .topbar {
      min-height:118px;
      padding:19px 22px;
      border-radius:0 0 18px 18px;
    }
    body.salviato-ui .topbar .ui-page-subtitle {font-size:11px;}
  }
  @media(max-width:700px) {
    body.salviato-ui .topbar {
      position:relative;
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      min-height:0;
      gap:14px;
      padding:20px 18px;
      border-radius:0 0 15px 15px;
    }
    body.salviato-ui .topbar h1,
    body.salviato-ui .topbar #page-title {font-size:25px;}
    body.salviato-ui .topbar .top-actions {
      width:100%;
      justify-content:flex-start;
    }
    body.salviato-ui .topbar .top-actions .button {flex:1 1 auto;min-height:44px;}
    body.salviato-ui .topbar .protected-badge {display:none;}
    body.salviato-ui .kpi-grid {gap:12px;}
    body.salviato-ui .kpi-card {padding:17px 18px;}
    body.salviato-ui .kpi-card strong {font-size:23px;}
    body.salviato-ui .card-header {padding:18px;}
    body.salviato-ui .card-body {padding:18px;}
    body.salviato-ui .configurator-shell[open] {
      width:100vw;
      height:100dvh;
      border:0;
      border-radius:0;
      margin:0;
    }
    body.salviato-ui .configurator-shell .installation-dialog-head {padding:15px 17px;}
    body.salviato-ui .configurator-shell .configurator-footer {padding:12px 15px max(12px,env(safe-area-inset-bottom));}
  }
}

/* Visual step navigation: same existing details, no price or form logic. */
@media screen {
  body.salviato-ui .configurator-step-nav {
    display:flex;
    flex:0 0 auto;
    gap:10px;
    align-items:stretch;
    padding:12px 22px;
    background:#eaf3ee;
    border-bottom:1px solid #cdded4;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:#a4c8ba transparent;
  }
  body.salviato-ui .configurator-step-chip {
    flex:1 0 160px;
    max-width:270px;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    font-family:inherit;
    font-size:12px;
    font-weight:650;
    line-height:1.35;
    color:#22574a;
    border:1px solid #c7ded3;
    border-radius:11px;
    background:#fff;
    padding:9px 13px;
    cursor:pointer;
    scroll-snap-align:start;
    transition:background .14s ease,border-color .14s ease;
  }
  body.salviato-ui .configurator-step-chip .configurator-step-num {
    display:grid;
    place-items:center;
    flex:0 0 29px;
    width:29px;
    height:29px;
    border-radius:8px;
    background:#e7f4ec;
    color:#006b55;
    font-size:11px;
    font-weight:820;
  }
  body.salviato-ui .configurator-step-chip:hover {
    background:#f4fbf7;
    border-color:#90cbb9;
  }
  body.salviato-ui .configurator-step-chip.is-current {
    color:#fff;
    background:#00594f;
    border-color:#00594f;
    box-shadow:0 4px 14px rgba(0,73,57,.14);
  }
  body.salviato-ui .configurator-step-chip.is-current .configurator-step-num {
    background:rgba(255,255,255,.18);
    color:white;
  }
  body.salviato-ui .configurator-step-chip.has-warning {
    border-color:#d29d4d;
  }
  body.salviato-ui .configurator-step-chip:focus-visible {
    outline:3px solid #60c8b0;
    outline-offset:2px;
  }
  body.salviato-ui .configurator-section {
    scroll-margin-top:12px;
  }
  @media (max-width:700px) {
    body.salviato-ui .configurator-step-nav {
      padding:9px 13px;
      gap:8px;
    }
    body.salviato-ui .configurator-step-chip {
      flex:0 0 175px;
      font-size:11px;
      min-height:45px;
      padding:8px 11px;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    body.salviato-ui .configurator-step-chip {transition:none}
  }
}

/* Visual redesign v2 for the standalone Cassamatte and BGP dialogs. */
@media screen {
  body.salviato-ui .editor-top,
  body.salviato-ui .site-header {
    background:linear-gradient(105deg,#004a43,#087065);
    color:#fff;
    border-bottom:0;
    box-shadow:0 8px 20px rgba(0,65,51,.15);
  }
  body.salviato-ui .editor-top strong,
  body.salviato-ui .site-header :is(strong,h1,span) {
    color:#fff;
  }
  body.salviato-ui .editor-top label {
    color:#def6ee;
    font-size:12px;
    font-weight:690;
  }
  body.salviato-ui .editor-top .button:not(.primary) {
    border:1px solid rgba(234,255,245,.52);
    background:rgba(255,255,255,.10);
    color:#fff;
  }
  body.salviato-ui .editor-top .button.primary {
    background:#e2fcf1;
    color:#064a3f;
    border-color:#e2fcf1;
    font-weight:800;
  }
  body.salviato-ui .portal-sidebar {
    background:linear-gradient(165deg,#063538,#00564e);
    border-right:1px solid rgba(220,255,244,.14);
  }
  body.salviato-ui .access-screen {
    background:radial-gradient(circle at 14% 12%,rgba(111,218,185,.23),transparent 37%),#00423c;
  }
  body.salviato-ui .mixed-family-heading {
    padding:11px 13px;
    background:#f0f8f4;
    border-left:4px solid #0d7e6b;
    border-radius:9px;
    margin:8px 0 12px;
  }
  body.salviato-ui .mixed-family-heading h3 {
    color:#07493e;
    font-weight:790;
  }
  body.salviato-ui .bgp-dialog .installation-dialog-head {
    background:linear-gradient(110deg,#004e46,#0e6e60);
    color:white;
    border-bottom:0;
    padding:19px 24px;
  }
  body.salviato-ui .bgp-dialog .installation-dialog-head h2 {color:#fff;}
  body.salviato-ui .bgp-dialog .installation-dialog-head p {color:#daf6eb;}
  body.salviato-ui .bgp-dialog .installation-dialog-head .button.ghost {
    background:rgba(255,255,255,.12);
    color:white;
    border-color:rgba(255,255,255,.4);
  }
}

/* Compact operational headers shared by Admin, Preventivi and Rivenditori. */
@media screen {
 body.salviato-ui .topbar {
  position:relative;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  min-height:72px;padding:10px 20px;gap:10px 18px;border-radius:0;
  box-shadow:0 3px 10px rgba(0,66,57,.1);
 }
 body.salviato-ui .topbar .ui-page-heading {flex:1 1 200px;}
 body.salviato-ui .topbar h1,
 body.salviato-ui .topbar #page-title {font-size:20px;line-height:1.25;letter-spacing:-.02em;}
 body.salviato-ui .topbar .save-status {display:block;margin-top:4px;font-size:12px;line-height:1.35;overflow-wrap:anywhere;}
 body.salviato-ui .topbar .top-actions {display:flex;width:auto;flex:0 1 auto;justify-content:flex-end;gap:8px;}
 body.salviato-ui .topbar .top-actions .button {min-height:44px;padding:9px 12px;border-radius:8px;}
 body.salviato-ui .nav-item .nav-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;}
 body.salviato-ui .nav-icon svg {display:block;width:22px;height:22px;}
 body.salviato-ui .nav-item.is-active {box-shadow:inset 4px 0 0 currentColor;font-weight:800;}
 @media(max-width:1100px){
  body.salviato-ui .responsive-header {min-height:68px;box-sizing:border-box;}
  body.salviato-ui .responsive-header .salviato-logo {width:154px;max-height:54px;}
 }
 @media(max-width:700px){
  body.salviato-ui .topbar {padding:12px 14px;gap:10px;}
  body.salviato-ui .topbar .ui-page-heading {flex-basis:100%;}
  body.salviato-ui .topbar .top-actions {width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;}
  body.salviato-ui .topbar .top-actions .button {flex:1 1 auto;}
  body.salviato-ui .topbar #page-title {font-size:19px;}
 }
}