/*
 * components.css — pulsanti, campi, card, dialog, toast, menu utente,
 * badge, toolbar, barra di stato, alert, kbd, icone.
 */

@layer components {
  /* ================= Icone (Lucide via CSS mask) =================
   * Un'unica convenzione: .icon + modificatore --nome-icona che imposta
   * --icon-src. Colorate con currentColor; sempre aria-hidden nel markup,
   * accompagnate da testo visibile o aria-label sul controllo che le ospita.
   */
  .icon {
    --icon-size: 20px;
    display: inline-block;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: currentColor;
    mask-image: var(--icon-src);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: var(--icon-src);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  .icon--sm {
    --icon-size: 16px;
  }

  .icon--lg {
    --icon-size: 24px;
  }

  .icon--file-up {
    --icon-src: url("../vendor/icons/lucide/file-up.f793e2e75118.svg");
  }
  .icon--file-text {
    --icon-src: url("../vendor/icons/lucide/file-text.d6dd1d3b5ad7.svg");
  }
  .icon--zoom-in {
    --icon-src: url("../vendor/icons/lucide/zoom-in.4d6e780d603e.svg");
  }
  .icon--zoom-out {
    --icon-src: url("../vendor/icons/lucide/zoom-out.14f44781f80e.svg");
  }
  .icon--maximize {
    --icon-src: url("../vendor/icons/lucide/maximize.06c51d443372.svg");
  }
  .icon--scan {
    --icon-src: url("../vendor/icons/lucide/scan.a5757cff48e8.svg");
  }
  .icon--rotate-ccw {
    --icon-src: url("../vendor/icons/lucide/rotate-ccw.acc3d64d8dee.svg");
  }
  .icon--rotate-cw {
    --icon-src: url("../vendor/icons/lucide/rotate-cw.7f2a33d49d16.svg");
  }
  .icon--circle-check {
    --icon-src: url("../vendor/icons/lucide/circle-check.f87873d463ad.svg");
  }
  .icon--circle-alert {
    --icon-src: url("../vendor/icons/lucide/circle-alert.85d9043ddec6.svg");
  }
  .icon--triangle-alert {
    --icon-src: url("../vendor/icons/lucide/triangle-alert.b71a3265838e.svg");
  }
  .icon--info {
    --icon-src: url("../vendor/icons/lucide/info.2065bc4bc88a.svg");
  }
  .icon--loader-circle {
    --icon-src: url("../vendor/icons/lucide/loader-circle.301d1586dc45.svg");
  }
  .icon--user {
    --icon-src: url("../vendor/icons/lucide/user.d8a1ff51bbbc.svg");
  }
  .icon--chevron-down {
    --icon-src: url("../vendor/icons/lucide/chevron-down.6d2c8da1ccbf.svg");
  }
  .icon--log-out {
    --icon-src: url("../vendor/icons/lucide/log-out.f4f96ddffd24.svg");
  }
  .icon--sun {
    --icon-src: url("../vendor/icons/lucide/sun.4964a6f29220.svg");
  }
  .icon--moon {
    --icon-src: url("../vendor/icons/lucide/moon.0eb1a4ca8e06.svg");
  }
  .icon--monitor {
    --icon-src: url("../vendor/icons/lucide/monitor.66ace483b436.svg");
  }
  .icon--x {
    --icon-src: url("../vendor/icons/lucide/x.49f99a6638d6.svg");
  }
  .icon--keyboard {
    --icon-src: url("../vendor/icons/lucide/keyboard.96ec7db1901d.svg");
  }

  .icon--spin {
    animation: icon-spin 900ms linear infinite;
  }

  @keyframes icon-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .icon--spin {
      animation: none;
    }
  }

  /* ================= Pulsanti ================= */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: var(--space-2);
    min-height: 40px;
    padding-inline: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard),
      color var(--motion-fast) var(--ease-standard);
  }

  .btn:disabled {
    opacity: 0.5;
  }

  .btn--primary {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
  }
  .btn--primary:hover:not(:disabled) {
    background: var(--color-accent-hover);
  }

  .btn--secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
  }
  .btn--secondary:hover:not(:disabled) {
    background: var(--color-surface-2);
  }

  .btn--ghost {
    background: transparent;
    color: var(--color-text);
  }
  .btn--ghost:hover:not(:disabled) {
    background: var(--color-surface-2);
  }

  .btn--danger {
    background: var(--color-danger);
    color: #fff;
  }
  .btn--danger:hover:not(:disabled) {
    background: var(--danger-700);
  }

  .btn--sm {
    min-height: 32px;
    padding-inline: var(--space-3);
    font-size: var(--fs-12);
  }

  .btn--icon {
    min-width: 40px;
    padding-inline: 0;
  }

  .btn--icon.btn--sm {
    min-width: 32px;
  }

  /* ================= Campi di testo ================= */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .field__label {
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--color-text);
  }

  .field__hint {
    font-size: var(--fs-12);
    color: var(--color-text-muted);
  }

  .field__error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-12);
    color: var(--color-danger-text);
  }

  .input {
    width: 100%;
    min-height: 40px;
    padding-inline: var(--space-3);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
  }

  .input:hover {
    border-color: var(--color-text-muted);
  }

  .input::placeholder {
    color: var(--color-text-muted);
  }

  .field--invalid .input {
    border-color: var(--color-danger);
  }

  .input--number {
    text-align: right;
    font-variant-numeric: var(--numeric-variant);
  }

  /* ================= Area di trascinamento file ================= */
  .dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-16) var(--space-6);
    text-align: center;
    background: var(--color-surface);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    transition: border-color var(--motion-fast) var(--ease-standard),
      background-color var(--motion-fast) var(--ease-standard);
  }

  .dropzone.is-dragover {
    border-color: var(--color-accent);
    background: var(--color-surface-2);
  }

  .dropzone__icon {
    color: var(--color-text-muted);
  }

  .dropzone__hint {
    font-size: var(--fs-14);
    color: var(--color-text-muted);
  }

  .dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  /* Il campo file è nascosto: il focus da tastiera si mostra sul pulsante "Scegli file". */
  .dropzone:has(.dropzone__input:focus-visible) label[for] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  /* ================= Card ================= */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    padding: var(--space-6);
  }

  .card--elevated {
    box-shadow: var(--shadow-2);
  }

  /* ================= Dialog nativo ================= */
  .dialog {
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-2);
    width: min(440px, 92vw);
    opacity: 1;
    transition: opacity var(--motion-base) var(--ease-standard),
      transform var(--motion-base) var(--ease-standard),
      overlay var(--motion-base) allow-discrete,
      display var(--motion-base) allow-discrete;
  }

  .dialog::backdrop {
    background: var(--color-backdrop);
    transition: background-color var(--motion-base) var(--ease-standard);
  }

  @starting-style {
    .dialog[open] {
      opacity: 0;
      transform: scale(0.96);
    }
  }

  .dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-6) 0;
  }

  .dialog__title {
    font-size: var(--fs-20);
  }

  .dialog__body {
    padding: var(--space-4) var(--space-6);
    color: var(--color-text-muted);
  }

  .dialog__body dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--fs-14);
  }

  .dialog__body dt {
    color: var(--color-text-muted);
  }

  .dialog__body dd {
    color: var(--color-text);
  }

  .dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-6);
  }

  .dialog__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-6) var(--space-6);
    list-style: none;
  }

  .dialog__list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--fs-14);
  }

  /* ================= Toast ================= */
  .toast-region {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    translate: -50% 0;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .toast {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-14);
  }

  .toast--success .icon {
    color: var(--color-success-text);
  }
  .toast--danger .icon {
    color: var(--color-danger-text);
  }
  .toast--info .icon {
    color: var(--color-info-text);
  }

  /* ================= Intestazione applicativa ================= */
  .app-header {
    --header-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding-inline: var(--space-6);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .app-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-20);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-decoration: none;
  }

  /* ================= Navigazione principale ================= */
  .app-nav {
    margin-inline: var(--space-8) auto;
  }

  .app-nav__list {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text-muted);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    text-decoration: none;
  }

  .app-nav__link:hover {
    color: var(--color-text);
    background: var(--color-surface-2);
  }

  /* Voce corrente: non solo colore, anche sottolineatura (WCAG 1.4.1). */
  .app-nav__link[aria-current="page"] {
    color: var(--color-text);
    background: var(--color-surface-2);
    box-shadow: inset 0 -2px 0 var(--color-accent);
  }

  /* ================= Menu utente ================= */
  .user-menu {
    position: relative;
  }

  .user-menu__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
  }

  .user-menu__button:hover {
    background: var(--color-surface-2);
  }

  .user-menu__panel {
    position: fixed;
    inset: auto var(--space-6) auto auto;
    top: calc(var(--header-height, 64px) + var(--space-2));
    margin: 0;
    min-width: 240px;
    padding: var(--space-2);
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2);
  }

  /* Il display:none dello stato chiuso resta quello nativo dell'UA per
   * [popover]; qui si imposta solo come appare quando è aperto. */
  .user-menu__panel:popover-open {
    display: flex;
  }

  .user-menu__panel::backdrop {
    background: transparent;
  }

  .user-menu__name {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
  }

  .user-menu__sep {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
  }

  .user-menu__label {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-12);
    color: var(--color-text-muted);
  }

  .theme-switch {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-2) var(--space-1);
  }

  .theme-switch__option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    border-radius: var(--radius-control);
    border: 1px solid var(--color-border);
    font-size: var(--fs-12);
    color: var(--color-text-muted);
  }

  .theme-switch__option:hover {
    background: var(--color-surface-2);
  }

  .theme-switch__option[aria-pressed="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    background: var(--accent-50);
  }

  :root[data-theme="dark"] .theme-switch__option[aria-pressed="true"] {
    background: var(--accent-900);
  }

  .user-menu__logout {
    display: flex;
    width: 100%;
  }

  .user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 40px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font-size: var(--fs-14);
    text-align: left;
  }

  .user-menu__item:hover {
    background: var(--color-surface-2);
  }

  /* ================= Badge ================= */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
  }

  .badge--accent {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-color: transparent;
  }

  /* Stato: testo semantico su fondo leggermente tinto (contrasto ≥ 4.5:1 in entrambi i temi). */
  .badge--success {
    color: var(--color-success-text);
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border));
  }

  .badge--warning {
    color: var(--color-warning-text);
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
  }

  /* ================= Toolbar / barra di stato ================= */
  .toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .toolbar__sep {
    align-self: stretch;
    width: 1px;
    margin-inline: var(--space-1);
    background: var(--color-border);
  }

  .status-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-12);
  }

  .status-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* ================= Barra di avanzamento ================= */
  .progress {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    overflow: hidden;
  }

  .progress__bar {
    height: 100%;
    background: var(--color-accent);
    border-radius: inherit;
    transition: width var(--motion-base) var(--ease-standard);
  }

  /* ================= Alert / messaggio in linea ================= */
  .alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border-strong);
    border-radius: var(--radius-control);
  }

  .alert__icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  .alert__title {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
  }

  .alert__body {
    font-size: var(--fs-14);
    color: var(--color-text-muted);
  }

  .alert--danger {
    border-left-color: var(--color-danger);
  }
  .alert--danger .alert__icon {
    color: var(--color-danger-text);
  }

  .alert--warning {
    border-left-color: var(--color-warning);
  }
  .alert--warning .alert__icon {
    color: var(--color-warning-text);
  }

  .alert--success {
    border-left-color: var(--color-success);
  }
  .alert--success .alert__icon {
    color: var(--color-success-text);
  }

  .alert--info {
    border-left-color: var(--color-info);
  }
  .alert--info .alert__icon {
    color: var(--color-info-text);
  }

  /* ================= kbd ================= */
  kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
  }
}