/* ============================================================
   AIESEC Webapp — Design System "Evoluzione pulita"
   Token neutri + componenti riusabili (.ui-*). CSS puro (Tailwind CDN-safe).
   Caricato globalmente da layout.html → ricade su tutte le pagine logged-in.
   Le pagine adottano le classi .ui-* dove serve; non sovrascrive il layout esistente.
   ============================================================ */
:root {
  /* Superfici / neutri */
  --ui-bg: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8fafc;
  --ui-border: #e9edf3;
  --ui-border-strong: #dde3ec;
  /* Testo */
  --ui-text: #0f172a;
  --ui-text-muted: #64748b;
  --ui-text-faint: #94a3b8;
  /* Accento (override per-area via --area-color quando presente) */
  --ui-accent: var(--area-color, #2563eb);
  --ui-accent-soft: var(--area-color-light, rgba(37,99,235,0.10));
  /* Forma */
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
  --ui-radius-lg: 22px;
  --ui-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px -12px rgba(15,23,42,.12);
  --ui-shadow-hover: 0 10px 30px -12px rgba(15,23,42,.22);
}

/* Rifiniture globali leggere (no reset aggressivo) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Card ---------- */
.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
.ui-card--pad { padding: 1.25rem; }
@media (min-width: 640px) { .ui-card--pad { padding: 1.5rem; } }
.ui-card--hover { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
@media (hover: hover) {
  .ui-card--hover:hover { box-shadow: var(--ui-shadow-hover); border-color: var(--ui-border-strong); }
}

/* ---------- Titolo sezione ---------- */
.ui-section-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ui-text-faint); display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.ui-section-title i { color: var(--ui-accent); }

/* ---------- Bottoni ---------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 42px; padding: 0 1rem; border-radius: var(--ui-radius-sm);
  font-size: .8rem; font-weight: 700; line-height: 1; white-space: nowrap;
  border: 1px solid var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text);
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease, color .15s ease;
}
.ui-btn:hover { background: var(--ui-surface-2); }
.ui-btn:active { transform: scale(.97); }
.ui-btn--primary { background: var(--ui-accent); border-color: transparent; color: #fff; }
.ui-btn--primary:hover { filter: brightness(.95); background: var(--ui-accent); }
.ui-btn--dark { background: #0f172a; border-color: transparent; color: #fff; }
.ui-btn--dark:hover { background: #000; }
.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--ui-text-muted); }
.ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.ui-btn--sm { min-height: 36px; padding: 0 .75rem; font-size: .72rem; }
.ui-btn--icon { width: 42px; height: 42px; padding: 0; }

/* ---------- Chip / Badge stato ---------- */
.ui-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text-muted);
}
.ui-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 8px; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; border: 1px solid;
}
.ui-badge--green { background:#ecfdf5; color:#047857; border-color:#d1fae5; }
.ui-badge--amber { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.ui-badge--red   { background:#fef2f2; color:#b91c1c; border-color:#fee2e2; }
.ui-badge--blue  { background:#eff6ff; color:#1d4ed8; border-color:#dbeafe; }
.ui-badge--gray  { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

/* ---------- Toolbar filtri ---------- */
.ui-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); padding: .75rem; box-shadow: var(--ui-shadow);
}
.ui-search { position: relative; flex: 1 1 240px; min-width: 0; }
.ui-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ui-text-faint); }
.ui-input, .ui-select, .ui-search input {
  width: 100%; background: var(--ui-surface-2); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm); padding: .7rem 1rem; font-size: .85rem; font-weight: 600;
  color: var(--ui-text); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ui-search input { padding-left: 2.6rem; }
.ui-input:focus, .ui-select:focus, .ui-search input:focus {
  background: #fff; border-color: var(--ui-accent);
  box-shadow: 0 0 0 4px var(--ui-accent-soft);
}
.ui-select { -webkit-appearance: none; appearance: none; cursor: pointer; }

/* ---------- Segmented toggle ---------- */
.ui-segment { display: inline-flex; padding: 4px; background: #eef2f7; border-radius: var(--ui-radius-sm); gap: 2px; }
.ui-segment button {
  border: 0; background: transparent; cursor: pointer;
  padding: .5rem .9rem; border-radius: 10px; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ui-text-faint);
  display: inline-flex; align-items: center; gap: .4rem; transition: all .15s ease;
}
.ui-segment button.is-active { background: #fff; color: var(--ui-text); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

/* ---------- Tabella ---------- */
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table thead th {
  text-align: left; padding: .85rem 1.25rem; font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ui-text-faint);
  background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-border);
}
.ui-table tbody td { padding: .85rem 1.25rem; border-bottom: 1px solid var(--ui-border); font-size: .88rem; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background .12s ease; }
.ui-table tbody tr:hover { background: var(--ui-surface-2); }

/* ---------- Avatar iniziali ---------- */
.ui-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: #0f172a; color: #fff; font-weight: 800; font-size: .72rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Empty state ---------- */
.ui-empty { padding: 3rem 1rem; text-align: center; color: var(--ui-text-faint); }
.ui-empty i { font-size: 1.9rem; margin-bottom: .6rem; display: block; }
.ui-empty p { font-weight: 700; }

/* ---------- KPI / stat ---------- */
.ui-stat { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 1.1rem 1.25rem; }
.ui-stat__label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ui-text-faint); }
.ui-stat__value { font-size: 1.6rem; font-weight: 900; color: var(--ui-text); margin-top: .25rem; line-height: 1; }

/* ============================================================
   RESPONSIVE — finestre piccole/medie ben gestite
   ============================================================ */
/* La tabella sotto una certa larghezza scorre orizzontalmente invece di rompere il layout */
.ui-table { min-width: 640px; }
.ui-card > .overflow-x-auto, .overflow-x-auto { -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  :root { --ui-radius: 14px; --ui-radius-lg: 18px; }
  .ui-card--pad { padding: 1.1rem; }
  /* La barra filtri impila e la ricerca va a tutta larghezza */
  .ui-toolbar { gap: .6rem; padding: .65rem; }
  .ui-search { flex: 1 1 100%; }
  .ui-toolbar .ui-select { flex: 1 1 100%; width: 100% !important; }
  .ui-segment { width: 100%; }
  .ui-segment button { flex: 1 1 0; justify-content: center; }
  /* margine extra mai negativo */
  .ui-toolbar > [style*="margin-left:auto"] { margin-left: 0 !important; }
  /* Bottoni azione header: a tutta larghezza, leggibili */
  .ui-btn { min-height: 44px; }
}

/* Tap target adeguati ovunque (accessibilità mobile) */
@media (hover: none) {
  .ui-btn, .ui-segment button { min-height: 44px; }
}