/* Replica statica del design system di Camelot (Camelot-back-office-lov / studio.camelot.vote):
   token da src/index.css + tailwind.config.ts del repo Lovable. */

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(213 14% 21%);
  --primary: hsl(207 100% 40%);          /* #0169c9 */
  --primary-fg: hsl(0 0% 100%);
  --muted: hsl(210 10% 96%);
  --muted-fg: hsl(215 14% 46%);
  --border: hsl(220 13% 91%);
  --success: hsl(140 85% 40%);
  --warning: hsl(36 100% 60%);
  --destructive: hsl(6 100% 62%);
  --accent: hsl(207 100% 40%);
  --radius: 0.5rem;

  --sidebar-bg: hsl(216 14% 21%);        /* #2E3540 */
  --sidebar-fg: hsl(210 40% 96%);
  --sidebar-primary: hsl(205 99% 50%);
  --sidebar-accent: hsl(216 14% 28%);
  --sidebar-border: hsl(216 14% 30%);

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--foreground);
  background: var(--background);
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; margin: 0; }

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

/* ============ Bottoni (src/components/ui/button.tsx) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  width: 100%;
  height: 3rem;
  border-radius: 0.375rem;             /* il bottone Accedi originale è rounded-md */
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 1rem;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: hsl(207 100% 40% / 0.9); box-shadow: var(--shadow-card-hover); }

.btn-outline {
  height: 2.25rem;
  padding: 0 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  box-shadow: var(--shadow-card);
}
.btn-outline:hover { background: var(--muted); border-color: hsl(207 100% 40% / 0.3); }

/* ============ LOGIN (replica di src/pages/Auth.tsx) ============ */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-bg);
  position: relative;
  overflow: hidden;
  padding: 1rem;
}

.deco-card {
  position: absolute;
  width: 160px;
  height: 100px;
  border-radius: 0.75rem;
  overflow: hidden;
  opacity: 0.6;
  pointer-events: none;
}
@media (min-width: 768px) {
  .deco-card { width: 200px; height: 120px; }
}
.deco-card .texture {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, white 4px, white 5px);
}
.deco-card .inner {
  position: relative;
  z-index: 1;
  padding: 0.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.deco-card .title {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  white-space: pre-line;
}
.deco-card .badge-row { display: flex; justify-content: flex-end; }
.deco-card .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.05em;
}
.deco-card .pill svg { width: 8px; height: 8px; stroke: rgba(255, 255, 255, 0.7); }

.auth-overlay {
  position: absolute;
  inset: 0;
  background: hsl(216 14% 21% / 0.4);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.auth-card {
  width: 100%;
  max-width: 28rem;
  background: var(--background);
  border-radius: 1rem;
  box-shadow: var(--shadow-2xl);
  position: relative;
  z-index: 10;
  overflow: hidden;
  padding: 2.5rem 2rem 2rem;
}

.auth-logo { display: flex; justify-content: center; margin-bottom: 2rem; }
.auth-logo img { height: 4rem; object-fit: contain; }

.auth-title { font-size: 1.5rem; text-align: center; margin-bottom: 0.25rem; }
.auth-subtitle {
  color: var(--muted-fg);
  font-size: 0.875rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

.info-box {
  margin-bottom: 1.5rem;
  border: 1px solid hsl(207 100% 40% / 0.2);
  background: hsl(207 100% 40% / 0.05);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.info-box svg { width: 1rem; height: 1rem; stroke: var(--primary); flex-shrink: 0; margin-top: 0.125rem; }
.info-box strong { color: var(--foreground); }
.info-box code { background: var(--muted); padding: 1px 5px; border-radius: 4px; font-size: 0.8rem; }

.auth-org-line {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.auth-org-line strong { color: var(--foreground); }

.auth-footer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--muted-fg);
  text-align: center;
}

/* ============ SHELL DASHBOARD (replica di Dashboard.tsx) ============ */
.shell {
  min-height: 100vh;
  display: flex;
  background: hsl(210 10% 96% / 0.3);
}

/* --- sidebar (DashboardSidebar.tsx) --- */
.sidebar {
  display: none;
  flex-direction: column;
  width: 300px;
  min-height: 100vh;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  border-right: 1px solid var(--sidebar-border);
}
@media (min-width: 1024px) { .sidebar { display: flex; } }

.sidebar .logo-block { padding: 1.25rem; border-bottom: 1px solid var(--sidebar-border); }
.sidebar .logo-block img { height: 1.75rem; object-fit: contain; object-position: left; filter: brightness(0) invert(1); }
.sidebar .payoff { display: block; font-size: 9px; letter-spacing: 0.05em; color: hsl(210 40% 96% / 0.6); padding-left: 2px; margin-top: 2px; }

.sidebar .search-block { padding: 0.75rem; border-bottom: 1px solid var(--sidebar-border); position: relative; }
.sidebar .search-block svg {
  position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%);
  width: 0.875rem; height: 0.875rem; stroke: hsl(210 40% 96% / 0.4);
}
.sidebar .search-block input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font);
  background: var(--sidebar-accent);
  border: none;
  color: var(--sidebar-fg);
}
.sidebar .search-block input::placeholder { color: hsl(210 40% 96% / 0.4); }

.sidebar .section-label {
  padding: 0.75rem 1rem 0.25rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(210 40% 96% / 0.6);
}

.sidebar .org-row {
  margin: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  background: var(--sidebar-accent);
  font-weight: 600;
}
.sidebar .org-avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem;
  background: hsl(220 15% 18%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar .org-avatar img { width: 1.75rem; height: 1.75rem; }
.sidebar .org-row .org-name { flex: 1; min-width: 0; }
.sidebar .org-row .org-sub { display: block; font-size: 10px; font-weight: 400; color: hsl(210 40% 96% / 0.6); }
.sidebar .org-row .chev {
  padding: 0.375rem; border-radius: 0.5rem; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sidebar .org-row .chev svg { width: 1rem; height: 1rem; stroke: var(--sidebar-primary); }

.sidebar .submenu { margin-left: 1.5rem; padding-left: 1rem; border-left: 1px solid var(--sidebar-border); }
.sidebar .submenu a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(210 40% 96% / 0.5);
  text-decoration: none;
}
.sidebar .submenu a:hover { color: var(--sidebar-primary); background: hsl(205 99% 50% / 0.1); }
.sidebar .submenu svg { width: 0.875rem; height: 0.875rem; stroke: currentColor; }

.sidebar .sep { margin: 0.75rem; border: 0; border-top: 1px solid var(--sidebar-border); }

.sidebar .create-org {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--sidebar-primary);
  text-decoration: none;
}
.sidebar .create-org .plus-box {
  width: 1.75rem; height: 1.75rem;
  border-radius: 0.5rem;
  border: 1px dashed hsl(205 99% 50% / 0.4);
  display: flex; align-items: center; justify-content: center;
}
.sidebar .create-org svg { width: 0.875rem; height: 0.875rem; stroke: currentColor; }

.sidebar .foot {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem;
  color: hsl(210 40% 96% / 0.7);
}
.sidebar .foot svg { width: 1rem; height: 1rem; stroke: currentColor; }

/* --- colonna principale --- */
.main-col { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.topbar .inner {
  padding: 0 1.5rem;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 1024px) { .topbar .inner { padding: 0 2.5rem; } }
.topbar h1 { font-size: 1.125rem; font-weight: 400; color: var(--muted-fg); }
.topbar h1 strong { font-weight: 600; color: var(--foreground); }
.topbar .right { display: flex; align-items: center; gap: 0.75rem; }
.topbar .user-name { font-size: 0.875rem; font-weight: 500; }
.topbar .avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.main-content { flex: 1; padding: 2rem 1.5rem; }
@media (min-width: 1024px) { .main-content { padding: 2rem 2.5rem; } }

/* --- barra statistiche (OrgDashboardContent) --- */
.stats-bar {
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: hsl(210 10% 96% / 0.4);
  border: 1px solid var(--border);
}
.stats-bar .bar-title {
  font-size: 0.75rem; font-weight: 600;
  color: var(--muted-fg);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; align-items: center; gap: 0.75rem; }
.stat .ico {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
}
.stat .ico svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; }
.stat .ico.success { background: hsl(140 85% 40% / 0.1); color: var(--success); }
.stat .ico.primary { background: hsl(207 100% 40% / 0.1); color: var(--primary); }
.stat .ico.muted { background: var(--muted); color: var(--muted-fg); }
.stat .ico.accent { background: hsl(207 100% 40% / 0.1); color: var(--accent); }
.stat .num { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.stat .lbl { font-size: 11px; color: var(--muted-fg); }

/* --- card CTA gradient (spigoli vivi come nell'originale) --- */
.cta-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.cta-card {
  position: relative;
  border-radius: 0;
  padding: 2rem;
  text-align: left;
  overflow: hidden;
  color: #fff;
  min-height: 200px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none;
  transition: all 0.3s;
}
.cta-card:hover { box-shadow: var(--shadow-card-hover); transform: scale(1.02); }
.cta-card.blue { background: linear-gradient(to bottom right, hsl(207 100% 55%), hsl(207 100% 45%), hsl(220 100% 35%)); }
.cta-card.purple { background: linear-gradient(to bottom right, hsl(264 63% 55%), hsl(264 63% 45%), hsl(280 70% 30%)); }
.cta-card .circle {
  position: absolute; top: 0; right: 0;
  width: 10rem; height: 10rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  transform: translate(33%, -33%);
}
.cta-card .badge-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  margin-bottom: 1rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cta-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.cta-card .sub { color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; margin: 0; position: relative; z-index: 1; }
.cta-card .cta-line {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1rem;
}
.cta-card .cta-line svg { width: 1rem; height: 1rem; stroke: currentColor; }

/* --- card profilo di Ateneo (stile card Studio) --- */
.profile-card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}
.profile-card h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge.member { background: hsl(207 100% 40% / 0.1); color: var(--primary); }
.badge.enrolled { background: hsl(140 85% 40% / 0.1); color: var(--success); }
.badge.alreadyMember { background: hsl(36 100% 60% / 0.15); color: hsl(30 80% 38%); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 1.25rem; font-size: 0.875rem; }
.kv dt { color: var(--muted-fg); }
.kv dd { margin: 0; word-break: break-all; font-weight: 500; }

.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
th {
  text-align: left; padding: 0.5rem 0.625rem;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-fg);
  border-bottom: 1px solid var(--border);
}
td { text-align: left; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--border); word-break: break-all; }

/* --- legenda (StatusLegend) --- */
.legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background: hsl(210 10% 96% / 0.3);
  font-size: 0.75rem;
  color: var(--muted-fg);
}
.legend .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.legend .item { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend .dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; display: inline-block; }
.dot.sky { background: #0ea5e9; }
.dot.primary { background: var(--primary); }
.dot.emerald { background: #10b981; }
.dot.purple { background: #a855f7; }