/* =========================================================================
   WAVELINK — Tema Hexywave (Brand Guidelines 2026)
   Un solo font (Geist Regular 400). Nessun gradiente, contrasto elevato,
   un solo colore di testo per blocco. Scala tipografica e spaziature
   normalizzate tramite CSS custom properties.
   ========================================================================= */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Palette principale */
  --hw-deep-blue: #09116B;
  --hw-light-blue: #78AAFF;
  /* Palette di supporto */
  --hw-deep-green: #013800;
  --hw-green: #00943C;
  /* Palette estesa (accenti) */
  --hw-purple: #2F0068;
  --hw-lilla: #C58FFE;
  --hw-pink: #FB6F7A;
  --hw-bordeaux: #510115;
  --hw-yellow: #FED440;
  --hw-flame: #B84A00;
  /* Neutri */
  --hw-white: #FBF8E7;
  --hw-black: #171312;
  --hw-surface: #FFFFFF;
  --hw-line: #E4E0CC;
  --hw-muted: #6B655A;
  --hw-hover: #FAF7EA;

  /* Semantica */
  --hw-success: var(--hw-green);
  --hw-warning: var(--hw-yellow);
  --hw-danger: var(--hw-bordeaux);
  --hw-primary: var(--hw-deep-blue);

  /* Tipografia — un solo font */
  --hw-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --hw-font-mono: var(--hw-font);

  /* Scala tipografica */
  --fs-h1: 1.5rem;
  --fs-h2: 1.25rem;
  --fs-h3: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.6875rem;
  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* Spaziature */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
  --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;

  /* Raggi */
  --radius: 10px; --radius-sm: 6px; --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--hw-white); color: var(--hw-black);
  font-family: var(--hw-font); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-2); font-weight: 400; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-body); }
p  { margin: 0 0 var(--sp-3); }
a  { color: var(--hw-deep-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 400; color: var(--hw-black); }

.mono, .label, th, .caption, .meta {
  font-family: var(--hw-font-mono); text-transform: uppercase;
  letter-spacing: 0.02em; font-size: var(--fs-xs);
}

/* Layout */
.container { width: min(1180px, 92vw); margin: 0 auto; }
.app-main { padding: var(--sp-5) 0 var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Barra superiore */
.topbar { background: var(--hw-deep-blue); color: var(--hw-white); }
.topbar .container { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }
.topbar a { color: var(--hw-white); }
.topbar .brand img { height: 28px; display: block; }
.topbar nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; margin-left: var(--sp-2); }
.topbar nav a, .topbar .dropdown > button {
  font-family: var(--hw-font-mono); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.02em;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: transparent; border: none; color: var(--hw-white); cursor: pointer; line-height: 1;
}
.topbar nav a.active, .topbar nav a:hover,
.topbar .dropdown > button:hover, .topbar .dropdown.open > button {
  background: var(--hw-light-blue); color: var(--hw-deep-blue); text-decoration: none;
}
.topbar .spacer { margin-left: auto; }
.topbar .user { display: flex; align-items: center; gap: var(--sp-3); }
.topbar .user a { font-size: var(--fs-sm); }
.topbar .user .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--hw-light-blue); object-fit: cover; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown > button::after { content: ' \25BE'; }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 190px; background: var(--hw-surface); border: 1px solid var(--hw-line);
  border-radius: var(--radius-sm); padding: var(--sp-1); box-shadow: 0 6px 20px rgba(23,19,18,.14);
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block; color: var(--hw-black); font-family: var(--hw-font-mono); text-transform: uppercase;
  font-size: var(--fs-xs); letter-spacing: 0.02em; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
}
.dropdown-menu a:hover { background: var(--hw-hover); text-decoration: none; }

/* Card */
.card { background: var(--hw-surface); border: 1px solid var(--hw-line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

/* Pulsanti */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
  font-family: var(--hw-font); font-weight: 400; font-size: var(--fs-sm); line-height: 1;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; background: var(--hw-line); color: var(--hw-black); white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(0.97); }
.btn--primary { background: var(--hw-deep-blue); color: var(--hw-white); }
.btn--success { background: var(--hw-green); color: #fff; }
.btn--danger  { background: var(--hw-bordeaux); color: #fff; }
.btn--ghost   { background: transparent; border-color: var(--hw-line); color: var(--hw-black); }
.btn--sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Tabelle */
table.table { width: 100%; border-collapse: collapse; background: var(--hw-surface); font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hw-line); vertical-align: middle; }
.table th { color: var(--hw-deep-blue); white-space: nowrap; }
.table td { line-height: 1.35; }
.table tbody tr:hover { background: var(--hw-hover); }
.table--click tbody tr { cursor: pointer; }

/* Badge */
.badge {
  display: inline-block; font-family: var(--hw-font-mono); text-transform: uppercase;
  font-size: var(--fs-xs); letter-spacing: 0.02em; line-height: 1.4;
  padding: 0.15rem var(--sp-2); border-radius: var(--radius-pill); border: 1px solid transparent;
}
.badge--deepblue { background: var(--hw-deep-blue); color: var(--hw-white); }
.badge--lightblue { background: var(--hw-light-blue); color: var(--hw-deep-blue); }
.badge--green { background: var(--hw-green); color: #fff; }
.badge--purple { background: var(--hw-purple); color: #fff; }
.badge--neutral { background: var(--hw-white); color: var(--hw-black); border-color: var(--hw-line); }
.badge--env { background: var(--hw-light-blue); color: var(--hw-deep-blue); }
.state-ok      { background: var(--hw-green); color: #fff; }
.state-warning { background: var(--hw-yellow); color: var(--hw-black); }
.state-danger  { background: var(--hw-bordeaux); color: #fff; }
tr.row-warning { background: #FFF7D6; }
tr.row-danger  { background: #FFE4E6; }
tr.row-warning td, tr.row-danger td { color: var(--hw-black); }

/* Rating */
.stars { display: inline-flex; gap: 2px; font-size: 1rem; line-height: 1; }
.stars .star { color: var(--hw-line); }
.stars .star.on { color: var(--hw-yellow); }
.stars--edit .star { cursor: pointer; }
.stars--edit .star:hover, .stars--edit .star.hover { color: var(--hw-yellow); }

/* Form */
label.field { display: block; margin-bottom: var(--sp-3); }
label.field > span { display: block; font-family: var(--hw-font-mono); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--hw-deep-blue); margin-bottom: var(--sp-1); }
.input, select.input, textarea.input {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--hw-line);
  border-radius: var(--radius-sm); background: #fff; color: var(--hw-black);
  font-family: var(--hw-font); font-size: var(--fs-sm); line-height: 1.4;
}
.input:focus { outline: 2px solid var(--hw-light-blue); border-color: var(--hw-light-blue); }
textarea.input { min-height: 84px; resize: vertical; }
.check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.help { font-size: var(--fs-sm); color: var(--hw-muted); }
.error { color: var(--hw-bordeaux); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* Alert */
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); margin-bottom: var(--sp-4); border: 1px solid transparent; font-size: var(--fs-sm); }
.alert--ok  { background: #E3F6EA; color: var(--hw-deep-green); border-color: var(--hw-green); }
.alert--err { background: #FFE4E6; color: var(--hw-bordeaux); border-color: var(--hw-bordeaux); }
.alert ul { margin: var(--sp-1) 0 0 var(--sp-4); }

/* Tabs */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 2px solid var(--hw-line); margin-bottom: var(--sp-4); }
.tabs button { font-family: var(--hw-font-mono); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.02em; background: transparent; border: none; padding: var(--sp-2) var(--sp-3); cursor: pointer; color: var(--hw-black); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tabs button.active { color: var(--hw-deep-blue); border-bottom-color: var(--hw-deep-blue); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(23,19,18,.55); display: none; align-items: flex-start; justify-content: center; z-index: 50; padding: 5vh var(--sp-4); }
.modal-backdrop.open { display: flex; }
.modal { background: var(--hw-surface); border-radius: var(--radius); width: min(640px, 100%); max-height: 90vh; overflow: auto; padding: var(--sp-5); }
.modal h3 { margin-top: 0; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Dropzone */
.dropzone { border: 2px dashed var(--hw-light-blue); border-radius: var(--radius); padding: var(--sp-5); text-align: center; color: var(--hw-deep-blue); background: #F4F8FF; cursor: pointer; }
.dropzone.drag { background: #E7F0FF; }
.dropzone .mono { display: block; margin-top: var(--sp-1); }

/* Utilities */
.text-center { text-align: center; }
.muted { color: var(--hw-muted); }
.small { font-size: var(--fs-sm); }
.flex { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt { margin-top: var(--sp-4); } .mb { margin-bottom: var(--sp-4); }
.pill-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--hw-line); border-radius: var(--radius-pill); font-size: var(--fs-sm); }

/* Config hub */
.config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 860px) { .config-grid { grid-template-columns: 1fr; } }
.config-card { display: block; border: 1px solid var(--hw-line); border-radius: var(--radius); padding: var(--sp-5); background: var(--hw-surface); color: var(--hw-black); }
.config-card:hover { text-decoration: none; border-color: var(--hw-light-blue); }
.config-card h3 { margin: 0 0 var(--sp-1); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--hw-deep-blue); padding: var(--sp-4); }
.login-card { background: var(--hw-surface); border-radius: var(--radius); padding: var(--sp-6); width: min(420px, 100%); text-align: center; }
.login-card img.logo { height: 38px; margin-bottom: var(--sp-4); }