/* ==========================================================================
   Zurich Wine Festival - Exhibitor Platform
   Design system Material 3, mobile first.
   I token seguono la nomenclatura Material Design 3 e vengono ereditati
   dai componenti <md-*> tramite le variabili --md-sys-*.
   ========================================================================== */

/* -------------------------------------------------------------- 1. Token */
:root {
  color-scheme: light dark;

  /* Palette sorgente: bordeaux del festival. */
  --zwf-primary:            #8e2b4d;
  --zwf-primary-container:  #ffd9e1;
  --zwf-on-primary:         #ffffff;
  --zwf-on-primary-container: #3b021a;

  --zwf-secondary:          #74565e;
  --zwf-secondary-container:#ffd9e1;
  --zwf-on-secondary:       #ffffff;
  --zwf-on-secondary-container: #2b151c;

  --zwf-tertiary:           #7b5733;
  --zwf-tertiary-container: #ffdcbd;
  --zwf-on-tertiary:        #ffffff;

  --zwf-error:              #ba1a1a;
  --zwf-error-container:    #ffdad6;
  --zwf-on-error:           #ffffff;
  --zwf-on-error-container: #410002;

  --zwf-success:            #2e6b42;
  --zwf-success-container:  #b6f2c6;
  --zwf-on-success-container: #06210f;

  --zwf-warning:            #8a5a00;
  --zwf-warning-container:  #ffdfa0;
  --zwf-on-warning-container: #2a1800;

  --zwf-surface:            #fff8f8;
  --zwf-surface-dim:        #e7d6d9;
  --zwf-surface-container-lowest: #ffffff;
  --zwf-surface-container-low:  #fff0f2;
  --zwf-surface-container:  #fbeaed;
  --zwf-surface-container-high: #f5e4e7;
  --zwf-surface-container-highest: #efdee1;
  --zwf-on-surface:         #21191b;
  --zwf-on-surface-variant: #524345;
  --zwf-outline:            #857376;
  --zwf-outline-variant:    #d8c2c5;
  --zwf-scrim:              rgba(0, 0, 0, .42);

  /* Tipografia */
  --zwf-font: "Roboto Flex", "Roboto", -apple-system, BlinkMacSystemFont,
              "Segoe UI", Helvetica, Arial, sans-serif;

  /* Forma */
  --zwf-radius-xs: 4px;
  --zwf-radius-sm: 8px;
  --zwf-radius-md: 12px;
  --zwf-radius-lg: 16px;
  --zwf-radius-xl: 28px;

  /* Spaziatura su scala 4px */
  --zwf-space-1: 4px;
  --zwf-space-2: 8px;
  --zwf-space-3: 12px;
  --zwf-space-4: 16px;
  --zwf-space-5: 20px;
  --zwf-space-6: 24px;
  --zwf-space-8: 32px;
  --zwf-space-10: 40px;

  /* Elevazione */
  --zwf-elev-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px 1px rgba(0,0,0,.14);
  --zwf-elev-2: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px 2px rgba(0,0,0,.14);
  --zwf-elev-3: 0 4px 8px 3px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.28);

  /* Altezze fisse della chrome */
  --zwf-topbar-h: 64px;
  --zwf-bottomnav-h: 80px;

  /* Ponte verso i componenti Material Web */
  --md-sys-color-primary: var(--zwf-primary);
  --md-sys-color-on-primary: var(--zwf-on-primary);
  --md-sys-color-primary-container: var(--zwf-primary-container);
  --md-sys-color-on-primary-container: var(--zwf-on-primary-container);
  --md-sys-color-secondary: var(--zwf-secondary);
  --md-sys-color-on-secondary: var(--zwf-on-secondary);
  --md-sys-color-secondary-container: var(--zwf-secondary-container);
  --md-sys-color-on-secondary-container: var(--zwf-on-secondary-container);
  --md-sys-color-tertiary: var(--zwf-tertiary);
  --md-sys-color-on-tertiary: var(--zwf-on-tertiary);
  --md-sys-color-error: var(--zwf-error);
  --md-sys-color-on-error: var(--zwf-on-error);
  --md-sys-color-error-container: var(--zwf-error-container);
  --md-sys-color-on-error-container: var(--zwf-on-error-container);
  --md-sys-color-surface: var(--zwf-surface);
  --md-sys-color-surface-container: var(--zwf-surface-container);
  --md-sys-color-surface-container-high: var(--zwf-surface-container-high);
  --md-sys-color-surface-container-highest: var(--zwf-surface-container-highest);
  --md-sys-color-surface-container-low: var(--zwf-surface-container-low);
  --md-sys-color-surface-container-lowest: var(--zwf-surface-container-lowest);
  --md-sys-color-on-surface: var(--zwf-on-surface);
  --md-sys-color-on-surface-variant: var(--zwf-on-surface-variant);
  --md-sys-color-outline: var(--zwf-outline);
  --md-sys-color-outline-variant: var(--zwf-outline-variant);
  --md-ref-typeface-brand: var(--zwf-font);
  --md-ref-typeface-plain: var(--zwf-font);
  --md-icon-font: 'Material Symbols Rounded';
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zwf-primary:            #ffb1c2;
    --zwf-primary-container:  #6f0f35;
    --zwf-on-primary:         #5a0526;
    --zwf-on-primary-container: #ffd9e1;

    --zwf-secondary:          #e3bdc6;
    --zwf-secondary-container:#5a3e46;
    --zwf-on-secondary:       #422931;
    --zwf-on-secondary-container: #ffd9e1;

    --zwf-tertiary:           #eebf92;
    --zwf-tertiary-container: #5f4019;
    --zwf-on-tertiary:        #472a0b;

    --zwf-error:              #ffb4ab;
    --zwf-error-container:    #93000a;
    --zwf-on-error:           #690005;
    --zwf-on-error-container: #ffdad6;

    --zwf-success:            #8cd8a4;
    --zwf-success-container:  #17512c;
    --zwf-on-success-container: #b6f2c6;

    --zwf-warning:            #f0c165;
    --zwf-warning-container:  #5e3f00;
    --zwf-on-warning-container: #ffdfa0;

    --zwf-surface:            #191113;
    --zwf-surface-dim:        #191113;
    --zwf-surface-container-lowest: #130c0d;
    --zwf-surface-container-low:  #21191b;
    --zwf-surface-container:  #261d1f;
    --zwf-surface-container-high: #31282a;
    --zwf-surface-container-highest: #3d3234;
    --zwf-on-surface:         #efdee1;
    --zwf-on-surface-variant: #d8c2c5;
    --zwf-outline:            #a08c90;
    --zwf-outline-variant:    #524345;
    --zwf-scrim:              rgba(0, 0, 0, .64);

    --zwf-elev-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.3);
    --zwf-elev-2: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.3);
    --zwf-elev-3: 0 4px 8px 3px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.5);
  }
}

/* --------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--zwf-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--zwf-on-surface);
  background: var(--zwf-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure { margin: 0; }

img { max-width: 100%; display: block; }

a { color: var(--zwf-primary); }

:focus-visible {
  outline: 3px solid var(--zwf-primary);
  outline-offset: 2px;
  border-radius: var(--zwf-radius-xs);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Evita il "flash of unstyled custom element" prima dell'upgrade dei
   componenti Material: riserviamo lo spazio e nascondiamo il grezzo. */
md-filled-text-field:not(:defined),
md-outlined-text-field:not(:defined),
md-outlined-select:not(:defined) {
  display: block;
  min-height: 56px;
  border: 1px solid var(--zwf-outline-variant);
  border-radius: var(--zwf-radius-xs);
  background: var(--zwf-surface-container-high);
}
md-filled-button:not(:defined),
md-outlined-button:not(:defined),
md-text-button:not(:defined) {
  display: inline-block;
  min-height: 40px;
  min-width: 120px;
  border-radius: 100px;
  background: var(--zwf-surface-container-high);
}
md-icon:not(:defined), md-icon-button:not(:defined) { display: inline-block; min-width: 24px; min-height: 24px; }
md-dialog:not(:defined), md-select-option:not(:defined), md-menu:not(:defined) { display: none; }

/* --------------------------------------------------------- 3. Tipografia */
.display-s  { font-size: 2rem;     line-height: 1.25; font-weight: 400; letter-spacing: 0; }
.headline-m { font-size: 1.5rem;   line-height: 1.33; font-weight: 500; }
.headline-s { font-size: 1.25rem;  line-height: 1.4;  font-weight: 500; }
.title-m    { font-size: 1rem;     line-height: 1.5;  font-weight: 600; letter-spacing: .15px; }
.title-s    { font-size: .875rem;  line-height: 1.43; font-weight: 600; letter-spacing: .1px; }
.body-l     { font-size: 1rem;     line-height: 1.5; }
.body-m     { font-size: .875rem;  line-height: 1.43; }
.label-m    { font-size: .75rem;   line-height: 1.33; font-weight: 500; letter-spacing: .5px; }
.muted      { color: var(--zwf-on-surface-variant); }

/* ------------------------------------------------------------- 4. Layout */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--zwf-space-4);
}

/* Barra superiore */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--zwf-space-3);
  height: var(--zwf-topbar-h);
  padding-inline: var(--zwf-space-4);
  background: var(--zwf-surface-container);
  color: var(--zwf-on-surface);
  box-shadow: var(--zwf-elev-1);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-2);
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.topbar__brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar__mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--zwf-primary);
  color: var(--zwf-on-primary);
  font-size: 20px;
}

.topbar__spacer { flex: 1 1 auto; }

.topbar__account {
  display: none;
  align-items: center;
  gap: var(--zwf-space-2);
  padding: 6px 6px 6px 12px;
  border-radius: 100px;
  background: var(--zwf-surface-container-high);
  max-width: 260px;
}
.topbar__account strong { font-size: .875rem; font-weight: 600; }
.topbar__account span {
  display: block; font-size: .75rem;
  color: var(--zwf-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.main {
  flex: 1 1 auto;
  padding-block: var(--zwf-space-5) calc(var(--zwf-bottomnav-h) + var(--zwf-space-8));
}

@media (min-width: 840px) {
  .main { padding-block: var(--zwf-space-8) var(--zwf-space-10); }
  .topbar__account { display: flex; }
}

/* Navigazione inferiore (mobile) -> laterale (desktop) */
.bottomnav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: var(--zwf-bottomnav-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--zwf-surface-container);
  box-shadow: 0 -1px 3px rgba(0,0,0,.12);
}

.bottomnav__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 4px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  color: var(--zwf-on-surface-variant);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bottomnav__indicator {
  display: grid;
  place-items: center;
  width: 64px; height: 32px;
  border-radius: 100px;
  transition: background-color .2s ease;
}

.bottomnav__item[aria-selected="true"] { color: var(--zwf-on-surface); }
.bottomnav__item[aria-selected="true"] .bottomnav__indicator {
  background: var(--zwf-primary-container);
  color: var(--zwf-on-primary-container);
}
.bottomnav__item md-icon { font-size: 24px; }

.bottomnav__badge {
  position: absolute;
  top: 8px; inset-inline-start: 50%;
  translate: 6px 0;
  min-width: 16px; height: 16px;
  padding-inline: 4px;
  border-radius: 8px;
  background: var(--zwf-error);
  color: var(--zwf-on-error);
  font-size: .625rem; font-weight: 700;
  display: grid; place-items: center;
}

@media (min-width: 840px) {
  .shell { flex-direction: row; }
  .shell__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .bottomnav {
    position: sticky;
    top: 0;
    inset-inline: auto;
    bottom: auto;
    height: 100dvh;
    width: 96px;
    flex: 0 0 96px;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--zwf-space-3);
    padding: var(--zwf-space-4) 0;
    box-shadow: none;
    border-inline-end: 1px solid var(--zwf-outline-variant);
    background: var(--zwf-surface);
  }
  .bottomnav__item { flex: 0 0 auto; padding: 4px; }
}

/* --------------------------------------------------------- 5. Componenti */

/* Card */
.card {
  background: var(--zwf-surface-container-low);
  border-radius: var(--zwf-radius-lg);
  padding: var(--zwf-space-5);
  border: 1px solid var(--zwf-outline-variant);
}
.card + .card { margin-top: var(--zwf-space-4); }
.card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--zwf-space-3);
  margin-bottom: var(--zwf-space-4);
}
.card__header md-icon {
  flex: 0 0 auto;
  color: var(--zwf-primary);
}
.card__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.card__subtitle { font-size: .875rem; color: var(--zwf-on-surface-variant); margin-top: 2px; }

/* Griglia riepilogo */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zwf-space-3);
  margin-bottom: var(--zwf-space-5);
}
@media (min-width: 600px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-3);
  padding: var(--zwf-space-4);
  border-radius: var(--zwf-radius-lg);
  background: var(--zwf-surface-container);
  border: 1px solid transparent;
}
.stat__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--zwf-radius-md);
  background: var(--zwf-surface-container-highest);
}
.stat__label { font-size: .75rem; letter-spacing: .4px; text-transform: uppercase; color: var(--zwf-on-surface-variant); }
.stat__value { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.stat__value--mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .5px; }

.stat--success { background: var(--zwf-success-container); color: var(--zwf-on-success-container); }
.stat--success .stat__icon { background: rgba(255,255,255,.35); color: inherit; }
.stat--success .stat__label { color: inherit; opacity: .8; }
.stat--warning { background: var(--zwf-warning-container); color: var(--zwf-on-warning-container); }
.stat--warning .stat__icon { background: rgba(255,255,255,.35); color: inherit; }
.stat--warning .stat__label { color: inherit; opacity: .8; }
.stat--danger { background: var(--zwf-error-container); color: var(--zwf-on-error-container); }
.stat--danger .stat__icon { background: rgba(255,255,255,.35); color: inherit; }
.stat--danger .stat__label { color: inherit; opacity: .8; }

/* Form */
.form { display: grid; gap: var(--zwf-space-4); }
.form__row { display: grid; gap: var(--zwf-space-4); }
@media (min-width: 600px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: repeat(3, 1fr); }
}
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zwf-space-3);
  align-items: center;
}
.form__actions--end { justify-content: flex-end; }
.form__hint { font-size: .8125rem; color: var(--zwf-on-surface-variant); }

md-filled-text-field, md-outlined-text-field, md-outlined-select { width: 100%; }

/* Checkbox / switch con etichetta */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--zwf-space-3);
  padding: var(--zwf-space-2) 0;
  cursor: pointer;
}
.check__text { font-size: .9375rem; }
.check__text small { display: block; color: var(--zwf-on-surface-variant); font-size: .8125rem; }

/* Banner / alert */
.banner {
  display: flex;
  gap: var(--zwf-space-3);
  padding: var(--zwf-space-4);
  border-radius: var(--zwf-radius-md);
  margin-bottom: var(--zwf-space-4);
  font-size: .9375rem;
}
.banner md-icon { flex: 0 0 auto; }
.banner--success { background: var(--zwf-success-container); color: var(--zwf-on-success-container); }
.banner--error   { background: var(--zwf-error-container);   color: var(--zwf-on-error-container); }
.banner--warning { background: var(--zwf-warning-container); color: var(--zwf-on-warning-container); }
.banner--info    { background: var(--zwf-secondary-container); color: var(--zwf-on-secondary-container); }
.banner a { color: inherit; font-weight: 600; }

/* Snackbar */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--zwf-bottomnav-h) + 16px);
  translate: -50% 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--zwf-space-3);
  min-height: 48px;
  max-width: min(560px, calc(100vw - 32px));
  padding: var(--zwf-space-3) var(--zwf-space-4);
  border-radius: var(--zwf-radius-xs);
  background: #322f30;
  color: #f5eff0;
  box-shadow: var(--zwf-elev-3);
  font-size: .875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, translate .2s ease;
}
.snackbar[data-open="true"] { opacity: 1; pointer-events: auto; translate: -50% -8px; }
.snackbar--error { background: var(--zwf-error); color: var(--zwf-on-error); }
@media (min-width: 840px) { .snackbar { bottom: 24px; left: auto; right: 24px; translate: 0 0; }
  .snackbar[data-open="true"] { translate: 0 -8px; } }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 10px;
  border-radius: var(--zwf-radius-sm);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3px;
  background: var(--zwf-surface-container-highest);
  color: var(--zwf-on-surface-variant);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.chip[data-tone="red"]       { background: #f6dde2; color: #6b1024; }
.chip[data-tone="white"]     { background: #f3eedb; color: #5c5219; }
.chip[data-tone="rose"]      { background: #fbe3e6; color: #7d2f3e; }
.chip[data-tone="sparkling"] { background: #ddeaf6; color: #17415f; }
.chip[data-tone="fortified"] { background: #ecdfd2; color: #5c3a17; }
.chip[data-tone="sweet"]     { background: #f0e2f5; color: #4d2358; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip[data-tone="red"]       { background: #4d101f; color: #ffd9e0; }
  :root:not([data-theme="light"]) .chip[data-tone="white"]     { background: #423b12; color: #f5edc8; }
  :root:not([data-theme="light"]) .chip[data-tone="rose"]      { background: #55232c; color: #ffdde2; }
  :root:not([data-theme="light"]) .chip[data-tone="sparkling"] { background: #123247; color: #d3e8f8; }
  :root:not([data-theme="light"]) .chip[data-tone="fortified"] { background: #45290e; color: #f0dcc7; }
  :root:not([data-theme="light"]) .chip[data-tone="sweet"]     { background: #3b1a44; color: #efdcf5; }
}

/* Lista vini: card su mobile, tabella su desktop */
.wines { display: grid; gap: var(--zwf-space-3); }

.wine {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--zwf-space-3);
  padding: var(--zwf-space-4);
  border-radius: var(--zwf-radius-md);
  background: var(--zwf-surface-container);
  border: 1px solid var(--zwf-outline-variant);
}
.wine__order {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--zwf-surface-container-highest);
  font-size: .8125rem; font-weight: 700;
  color: var(--zwf-on-surface-variant);
}
.wine__body { min-width: 0; }
.wine__label { font-weight: 600; font-size: 1rem; line-height: 1.3; word-break: break-word; }
.wine__producer { font-size: .875rem; color: var(--zwf-on-surface-variant); word-break: break-word; }
.wine__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--zwf-space-2);
  margin-top: var(--zwf-space-2);
  font-size: .8125rem;
  color: var(--zwf-on-surface-variant);
}
.wine__meta span { display: inline-flex; align-items: center; gap: 4px; }
.wine__actions { display: flex; flex-direction: column; gap: 2px; }

@media (min-width: 840px) {
  .wine { grid-template-columns: 44px 1.4fr 1fr 110px 90px 110px auto; align-items: center; }
  .wine__body { grid-column: auto; }
  .wine__actions { flex-direction: row; }
  .wine__cell { font-size: .875rem; color: var(--zwf-on-surface-variant); }
  .wines__head {
    display: grid;
    grid-template-columns: 44px 1.4fr 1fr 110px 90px 110px auto;
    gap: var(--zwf-space-3);
    padding: 0 var(--zwf-space-4) var(--zwf-space-2);
    font-size: .75rem; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--zwf-on-surface-variant);
  }
}
.wines__head { display: none; }
@media (min-width: 840px) { .wines__head { display: grid; } }

.wine__cell--hide-mobile { display: none; }
@media (min-width: 840px) { .wine__cell--hide-mobile { display: block; } }

/* Stato vuoto */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--zwf-space-3);
  padding: var(--zwf-space-8) var(--zwf-space-4);
  text-align: center;
  color: var(--zwf-on-surface-variant);
}
.empty md-icon { font-size: 48px; opacity: .5; }

/* Logo */
.logo-field {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-4);
  flex-wrap: wrap;
}
.logo-preview {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  flex: 0 0 96px;
  border-radius: var(--zwf-radius-md);
  background: var(--zwf-surface-container-highest);
  border: 1px dashed var(--zwf-outline);
  overflow: hidden;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-preview md-icon { color: var(--zwf-on-surface-variant); font-size: 32px; }

/* Piantina */
.floorplan {
  border-radius: var(--zwf-radius-md);
  overflow: hidden;
  border: 1px solid var(--zwf-outline-variant);
  background: #fff;
}
.floorplan img { width: 100%; height: auto; }

/* Pannelli / sezioni */
.panel[hidden] { display: none; }
.panel__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--zwf-space-1);
}
.panel__lead { color: var(--zwf-on-surface-variant); margin-bottom: var(--zwf-space-5); }

/* ---------------------------------------------- 6. Pagine autenticazione */
.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(1200px 500px at 110% -10%, var(--zwf-primary-container), transparent 60%),
    var(--zwf-surface);
}

.auth__main {
  display: grid;
  place-items: center;
  padding: var(--zwf-space-5) var(--zwf-space-4) var(--zwf-space-8);
}

.auth__card {
  width: 100%;
  max-width: 460px;
  background: var(--zwf-surface-container-lowest);
  border-radius: var(--zwf-radius-xl);
  border: 1px solid var(--zwf-outline-variant);
  box-shadow: var(--zwf-elev-2);
  padding: var(--zwf-space-6) var(--zwf-space-5) var(--zwf-space-5);
}
.auth__card--wide { max-width: 720px; }

.auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zwf-space-2);
  padding: var(--zwf-space-5) var(--zwf-space-4) 0;
  font-weight: 700;
  letter-spacing: .3px;
}

.auth__title { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.auth__lead { color: var(--zwf-on-surface-variant); margin: var(--zwf-space-2) 0 var(--zwf-space-5); font-size: .9375rem; }

.auth__footer {
  padding: var(--zwf-space-4);
  text-align: center;
  font-size: .8125rem;
  color: var(--zwf-on-surface-variant);
}

.auth__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--zwf-space-2);
  margin-top: var(--zwf-space-4);
  font-size: .875rem;
}

.auth__result {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--zwf-space-3);
  padding-block: var(--zwf-space-4);
}
.auth__result md-icon { font-size: 56px; }
.auth__result--ok md-icon { color: var(--zwf-success); }
.auth__result--ko md-icon { color: var(--zwf-error); }

/* Wizard di registrazione */
.wizard__progress {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-2);
  margin-bottom: var(--zwf-space-5);
}
.wizard__step {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--zwf-surface-container-highest);
  transition: background-color .25s ease;
}
.wizard__step[data-state="done"],
.wizard__step[data-state="active"] { background: var(--zwf-primary); }

.wizard__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--zwf-space-3);
  font-size: .8125rem;
  color: var(--zwf-on-surface-variant);
}

.wizard__pane[hidden] { display: none; }

.terms {
  max-height: 220px;
  overflow-y: auto;
  padding: var(--zwf-space-4);
  border: 1px solid var(--zwf-outline-variant);
  border-radius: var(--zwf-radius-md);
  background: var(--zwf-surface-container);
  font-size: .8125rem;
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}
.terms h4 { font-size: .875rem; margin: var(--zwf-space-3) 0 var(--zwf-space-1); }
.terms p { margin: 0 0 var(--zwf-space-2); }

/* Indicatore robustezza password */
.pwmeter { display: grid; gap: 6px; }
.pwmeter__bar {
  display: flex; gap: 4px;
}
.pwmeter__seg {
  flex: 1 1 0; height: 4px; border-radius: 2px;
  background: var(--zwf-surface-container-highest);
}
.pwmeter[data-score="1"] .pwmeter__seg:nth-child(-n+1) { background: var(--zwf-error); }
.pwmeter[data-score="2"] .pwmeter__seg:nth-child(-n+2) { background: var(--zwf-warning); }
.pwmeter[data-score="3"] .pwmeter__seg:nth-child(-n+3) { background: var(--zwf-tertiary); }
.pwmeter[data-score="4"] .pwmeter__seg { background: var(--zwf-success); }
.pwmeter__text { font-size: .75rem; color: var(--zwf-on-surface-variant); }

/* Dialog */
md-dialog { max-width: min(560px, calc(100vw - 32px)); }
md-dialog form[slot="content"] { display: grid; gap: var(--zwf-space-4); padding-top: var(--zwf-space-2); }

/* Pagine di errore */
.errorpage { display: grid; justify-items: center; gap: var(--zwf-space-3); text-align: center; padding: var(--zwf-space-10) var(--zwf-space-4); }
.errorpage__code { font-size: 4rem; font-weight: 700; color: var(--zwf-primary); line-height: 1; }

/* Stampa */
@media print {
  .topbar, .bottomnav, .form__actions, .wine__actions, .snackbar { display: none !important; }
  .main { padding: 0; }
  .card { border: 1px solid #ccc; box-shadow: none; }
}

/* Riduzione movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}