/* Area utente v2: accesso, registrazione, password, area personale, privacy. I pezzi (campi, select, bottoni, card
   annuncio, badge) sono componenti del design system: qui solo l'impaginazione. */

@layer pages {
  .acc { padding-top: clamp(32px, 5vw, 72px); padding-bottom: var(--block); }

  .acc h1 { margin-top: 10px; font-size: var(--step-head); }
  .acc .lead { margin-top: 20px; max-width: 52ch; color: var(--ink-soft); }
  .acc .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

  /* ---------- Accesso e registrazione: testo e vantaggi a sinistra, modulo a destra ---------- */
  .acc-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "intro panel" "aside panel";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 6vw, 112px);
    align-items: start;
  }
  .acc-intro { grid-area: intro; }
  .acc-grid > .acc-panel { grid-area: panel; }
  .acc-aside {
    grid-area: aside;
    margin-top: clamp(40px, 5vw, 72px);
    max-width: 560px;

    & h2 { margin-top: 6px; font-size: var(--step-lead); }
    & ul { display: grid; gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
    & li { padding-left: 20px; box-shadow: inset 2px 0 0 var(--accent-soft); }
    & h3 { font-family: var(--font); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
    & li p { margin-top: 4px; font-size: var(--step-small); color: var(--ink-soft); }
  }

  /* ---------- Pannello ---------- */
  .acc-panel {
    padding: clamp(24px, 3.4vw, 48px);
    border-radius: var(--r-lg);
    background: var(--tint);

    & > .acc-form:first-child { margin-top: 0; }
    & > h2 { margin-top: 6px; font-size: var(--step-lead); }
    & > p:not(.kicker) { margin-top: 12px; max-width: 62ch; }
    & > .note { font-size: var(--step-small); color: var(--ink-soft); }
    & > .actions { margin-top: 24px; }
    &.danger { background: var(--ground); box-shadow: inset 0 0 0 1px var(--heart); }
    &.danger > h2 { color: var(--heart); }
    /* su fondo bianco i campi tornano --tint */
    &.danger .acc-form { --field-bg: var(--tint); }
  }
  .acc-hint {
    margin-top: 24px;
    font-size: var(--step-small);
    color: var(--ink-soft);

    & a { color: var(--accent); font-weight: 500; text-underline-offset: 3px; }
  }

  /* ---------- Pagine strette: password, privacy, eliminazione ---------- */
  .acc-narrow {
    & > .acc-panel { margin-top: 32px; max-width: 760px; }
    & > .actions { margin-top: 28px; }
    & h1 { max-width: 22ch; }
  }
  .acc-back { margin-top: 16px; font-size: var(--step-small); }
  .acc-back a { color: var(--accent); font-weight: 500; text-underline-offset: 3px; }
  .acc-list {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding-left: 20px;
    max-width: 62ch;
  }
  .acc-narrow > .msgs { margin: 24px 0 0; max-width: 760px; }

  .btn.danger { --btn-bg: var(--heart); --btn-bg-hover: var(--ink); }
  .btn.ghost.danger { --btn-bg: var(--ground); --btn-fg: var(--heart); --btn-bg-hover: var(--ground); box-shadow: inset 0 0 0 1px var(--heart); }

  /* ---------- Moduli ---------- */
  .acc-form {
    --field-bg: var(--ground); /* i campi stanno su un pannello --tint */

    display: grid;
    gap: 20px;
    margin-top: 28px;

    &.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gap); }
    &.two > :is(.vf.full, .actions, .acc-prefs) { grid-column: 1 / -1; }

    & .actions { margin-top: 4px; }
    & .field input, & .field textarea, & .select, & .check { background-color: var(--field-bg); }
    & .check:has(input:checked) { background-color: var(--accent-soft); }
    & input[type="file"] { padding-top: 11px; }
  }
  .acc-box { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-md); background: var(--tint); }

  .acc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gap); margin-top: 20px; }
  .acc-fields > .vf.full { grid-column: 1 / -1; }

  .form-error { margin-top: 20px; }

  .acc-role { min-width: 0; margin: 0; padding: 0; border: 0; }
  .acc-role { container-type: inline-size; }
  .acc-role > legend { padding: 0; }

  /* Le 4 voci del profilo non stanno su una riga: due per riga, la pillola scorre anche in verticale */
  @container (max-width: 690px) {
    .acc-role .switch {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 1fr;
      border-radius: var(--r-md);

      & label {
        height: auto;
        min-width: 0;
        min-height: 36px;
        padding: 4px 8px;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
      }
      &:has(> input:nth-of-type(2):checked) { --x: 1; }
      &:has(> input:nth-of-type(3):checked) { --y: 1; }
      &:has(> input:nth-of-type(4):checked) { --x: 1; --y: 1; }
    }
    .acc-role .switch-thumb {
      inset-block: 4px auto;
      width: calc((100% - 8px) / 2);
      height: calc((100% - 8px) / 2);
      transform: translate(calc(100% * var(--x, 0)), calc(100% * var(--y, 0)));
    }
  }

  /* Preferenze nella registrazione: facoltative e chiuse, solo per i profili che cercano casa */
  .acc-prefs {
    display: none;
    border-radius: var(--r-md);
    background: var(--ground);

    & > summary {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-radius: inherit;
      list-style: none;
      cursor: pointer;
    }
    & > summary::-webkit-details-marker { display: none; }
    & > summary::after {
      content: "";
      flex: none;
      width: 9px;
      height: 9px;
      margin-right: 4px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      transition: transform .25s var(--ease);
    }
    &[open] > summary::after { transform: translateY(2px) rotate(225deg); }
    & > summary:hover .h { color: var(--accent); }
    & > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

    & .note { font-size: var(--step-small); color: var(--ink-soft); }
    & .field input, & .field textarea, & .select, & .check { background-color: var(--tint); }
    & .check:has(input:checked) { background: var(--accent-soft); }
  }
  .acc-form:has(input[name="role"]:is([value="buyer"], [value="both"]):checked) .acc-prefs { display: block; }
  .acc-prefs-title { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
  .acc-prefs-title .h { font-weight: 600; transition: color var(--dur-fast) var(--ease); }
  .acc-prefs-body { min-width: 0; margin: 0; padding: 0 20px 20px; border: 0; }

  /* ---------- Area personale ---------- */
  .dash-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
  }
  .dash-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    margin-top: clamp(32px, 4vw, 56px);
    align-items: start;
  }

  /* Indice a lato: i contatori del portale e i collegamenti alle sezioni */
  .dash-nav {
    position: sticky;
    top: 96px;

    & ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
    & a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      min-height: var(--field-h);
      padding: 0 16px;
      border-radius: var(--r-pill);
      font-size: var(--step-small);
      font-weight: 500;
      text-decoration: none;
      transition: background-color var(--dur-fast) var(--ease);

      &:hover { background: var(--tint); }
    }
    & b { font-family: var(--display); font-weight: 500; color: var(--accent); }
  }

  .dash-main { display: grid; gap: var(--block); min-width: 0; }
  .dash-sec {
    scroll-margin-top: 96px;
    min-width: 0;

    & > h2 { margin-top: 6px; font-size: var(--step-lead); }
    & > .teaser { margin-top: 6px; font-size: var(--step-small); color: var(--ink-soft); }
    & > .listings, & > .dash-rows, & > .acc-form { margin-top: 24px; }
    & > .dash-empty { margin-top: 24px; }
  }

  .dash-rows { display: grid; gap: 10px; }
  .dash-row {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--tint);

    & h3 { font-family: var(--font); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
    & h3 a { text-underline-offset: 3px; }
    & .meta { font-size: var(--step-small); color: var(--ink-soft); overflow-wrap: anywhere; }
    & .when { flex: none; font-size: var(--step-small); color: var(--ink-soft); }
    & .actions { margin-top: 6px; gap: 8px; }
    & .field input { background-color: var(--ground); }

    &.link { text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
    &.link:hover { background: var(--tint-2); }
  }
  .dash-row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
  .dash-rename {
    display: flex;
    gap: 8px;
    align-items: center;

    & .field { flex: 1 1 auto; min-width: 0; }
  }
  .dash-empty {
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--tint);
    font-size: var(--step-small);
    color: var(--ink-soft);
  }

  /* ---------- Telefono e tablet stretto ---------- */
  @media (max-width: 960px) {
    .acc-grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "intro" "panel" "aside";
      grid-template-rows: none;
    }
    .acc-grid > .acc-panel { margin-top: 32px; }

    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-nav {
      position: static;
      margin-inline: calc(var(--m) * -1);
      overflow-x: auto;
      scrollbar-width: none;

      & ul { display: flex; width: max-content; gap: 6px; padding-inline: var(--m); }
      & li { flex: none; }
      & a { background: var(--tint); white-space: nowrap; }
    }
  }
  @media (max-width: 560px) {
    .acc-panel { margin-inline: calc(var(--m) * -1 + 8px); padding: 24px 18px; }
    .acc-form.two, .acc-fields { grid-template-columns: minmax(0, 1fr); }
    .acc-form .actions .btn { width: 100%; }
    .acc-form .actions form, .dash-row .actions form { display: contents; }
    .dash-rename { flex-wrap: wrap; }
    .dash-rename .btn { width: 100%; }
  }
}