:root { 
  /* VARIABILI TEMA SCURO (DEFAULT) */
  --bg: #0f1115; 
  --fg: #e8e8ea; 
  --muted: #a9abb3; 
  --accent: #9d7afe; 
  --card: rgba(23, 25, 36, 0.75); 
  --line: rgba(42, 45, 58, 0.8); 
  --btn-txt: #111;
  --input-bg: rgba(12, 14, 18, 0.8);
  --header-bg: rgba(18, 21, 32, 0.85);
  --shadow: 0 10px 24px rgba(0,0,0, 0.4);
  /* Sfondo Tema Scuro (relativo alla posizione del CSS) */
  --theme-bg: url('costellazioni_dark.svg');
}

:root[data-theme="light"] {
  /* VARIABILI TEMA CHIARO */
  --bg: #f3f4f6; 
  --fg: #1f2937; 
  --muted: #6b7280; 
  --accent: #6d28d9; 
  --card: rgba(255, 255, 255, 0.80); 
  --line: rgba(209, 213, 219, 0.8); 
  --btn-txt: #ffffff;
  --input-bg: rgba(249, 250, 251, 0.8);
  --header-bg: rgba(255, 255, 255, 0.90);
  --shadow: 0 8px 24px rgba(0,0,0, 0.08);
  /* Sfondo Tema Chiaro */
  --theme-bg: url('costellazioni_light.svg');
}

*{ box-sizing:border-box; }

/* FIX DEFINITIVO: Sfondo ancorato direttamente al body, senza pseudo-elementi */
html, body { 
  margin: 0; 
  background-color: var(--bg);
  background-image: var(--theme-bg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Lo inchioda allo schermo a prescindere dal contenuto */
  color: var(--fg); 
  font: 16px/1.45 system-ui, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial; 
  transition: background-color 0.3s, color 0.3s, background-image 0.3s;
  min-height: 100vh;
}

.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 10000; }
.brand{ font-weight:700; letter-spacing:.5px; }
.menu a, .menu button{ color:var(--fg); text-decoration:none; margin:0 10px; background:none; border:none; cursor:pointer; font-weight:600; }

.dropdown{ display:inline-block; position:relative; }
.dropdown-content{ display:none; position:absolute; top: 100%; left: 0; z-index: 11000; background:var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width:240px; box-shadow:var(--shadow); border:1px solid var(--line); }
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content{ display:block; }
.dropdown-content::before{ content: ""; position: absolute; left: 0; right: 0; height: 8px; top: -8px; }
.dropdown-content a{ display:block; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--fg); text-decoration: none; }
.menu > .dropdown:last-child .dropdown-content{ right: 0; left: auto; }

.logout{ margin-left:20px; opacity:.8; }
.container{ max-width:1400px; margin:30px auto; padding:0 18px; }

.card{ background:var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); transition: background 0.3s; }
.narrow{ max-width:440px; margin:30px auto; }
.hero{ padding:28px; background:linear-gradient(135deg, rgba(157,122,254,.15), rgba(74,222,128,.05)); border:1px solid var(--line); border-radius:18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.grid{ margin-top:18px; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.tile{ display:block; padding:22px; background:var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border:1px solid var(--line); border-radius:16px; color:var(--fg); margin-bottom:16px; box-shadow:var(--shadow); transition: background 0.3s, box-shadow 0.3s; text-decoration: none; }

label{ display:block; margin:10px 0; }
input, select, textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--input-bg); color:var(--fg); }
button{ padding:10px 16px; border-radius:12px; background:var(--accent); color:var(--btn-txt); font-weight:800; border:none; cursor: pointer; }
.flash{ margin:10px 0; padding:10px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line); }
.error{ color:#ff9595; }

.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 12px; border-bottom:1px solid var(--line); }
th{ position:sticky; top:0; background:var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor:pointer; z-index: 1; }
.footer{ margin:50px 0 30px; text-align:center; color:var(--muted); }
.tip{ color:var(--muted); font-size:.9em; }
.badge{ display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:999px; cursor: pointer; user-select: none; text-decoration: none; }
.badge:hover{ border-color: var(--accent); color: var(--accent); background: rgba(157,122,254,.12); text-decoration: none; }
.badge:active { transform: translateY(1px); }

/* Tasti nella HOME PAGE non sottolineati */
a.tile { text-decoration: none !important; }
a.tile:hover { text-decoration: none !important; }

/* Righe cliccabili nelle liste */
#tbl tbody tr[onclick], tr.clickable { cursor: pointer; user-select: none; }
#tbl tbody tr[onclick]:hover, tr.clickable:hover { background: rgba(157,122,254,.08); }

/* === Buttons === */
.btnbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; }

a.btn, button.btn {
  --btn-bg: var(--accent); --btn-fg: var(--btn-txt);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:800; text-decoration:none !important; cursor:pointer; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .05s ease, filter .15s ease; user-select:none;
}
a.btn:hover, button.btn:hover { filter:brightness(1.1); text-decoration: none !important; }
a.btn:active, button.btn:active { transform:translateY(1px); }

/* Ripristino priorità dei colori originali */
button.btn.btn-primary,   a.btn.btn-primary   { --btn-bg: var(--accent);  --btn-fg: var(--btn-txt); background: var(--btn-bg); color: var(--btn-fg); }    
button.btn.btn-secondary, a.btn.btn-secondary { --btn-bg: #5fb3ff;        --btn-fg: #111;           background: var(--btn-bg); color: var(--btn-fg); }    
button.btn.btn-success,   a.btn.btn-success   { --btn-bg: #22c55e;        --btn-fg: #111;           background: var(--btn-bg); color: var(--btn-fg); }    
button.btn.btn-warning,   a.btn.btn-warning   { --btn-bg: #f59e0b;        --btn-fg: #111;           background: var(--btn-bg); color: var(--btn-fg); }    
button.btn.btn-danger,    a.btn.btn-danger    { --btn-bg: #ef4444;        --btn-fg: #fff;           background: var(--btn-bg); color: var(--btn-fg); }    

a.btn-outline, button.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--fg);
  background:transparent; color:var(--btn-fg);
  border-color:var(--line); box-shadow:none;
}
a.btn-outline:hover, button.btn-outline:hover { border-color:var(--accent); color:var(--accent); background:rgba(157,122,254,.12); }

a.btn-ghost, button.btn-ghost {
  --btn-fg: var(--fg);
  background:rgba(255,255,255,.03); color:var(--btn-fg);
  border:1px solid var(--line); box-shadow:none;
}

.btn-sm{ padding:6px 10px; border-radius:10px; font-weight:700; font-size:0.9rem; }
.btn-pill{ padding:6px 10px; border-radius:10px; box-shadow:none; font-weight:700; }

.chip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-weight:600; }
.camp-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.camp-item{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); }
.camp-title{ font-weight:700; }

/* === Layout Pagina Valutazione === */
.top-meta-bar {
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px;
  padding: 16px;
}
.top-meta-bar .meta-item { 
  flex: 1 1 120px; 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  padding: 10px 14px; 
  background: rgba(157,122,254,.03); 
  border: 1px solid var(--line); 
  border-radius: 10px;
  min-height: 64px;
}
.meta-item span { font-size: 0.75em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 2px; }
.meta-item b { font-size: 0.95em; color: var(--fg); }

.valuta-layout{ 
  display:grid; 
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); 
  gap:20px; 
  align-items:start; 
}
.col-left-center { display: flex; flex-direction: column; gap: 20px; }
.col-right { min-width:0; }

.inner-2-cols {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.col-main { flex: 1.4; display: flex; flex-direction: column; gap: 16px; min-width:0; }
.col-center { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width:0; }

.flex-tile { 
  flex: 1 1 auto; 
  display: flex; 
  flex-direction: column; 
  margin-bottom: 0; 
  min-height: 220px; 
}
.flex-tile .tcontent { 
  flex: 1 0 auto; 
}

.side-sticky {
  position: sticky; top: 72px; z-index: 2;               
  max-height: calc(100vh - 90px); 
  overflow-y: auto; 
  padding-right: 6px;
}
.side-sticky::-webkit-scrollbar { width: 6px; }
.side-sticky::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.tlabel{ font-weight:700; color:var(--muted); margin-bottom:6px; }
.tcontent{ font-size: .95em; line-height:1.55; color: var(--fg); }
.pre{ white-space: pre-wrap; }

.tile a:not(.btn) { color: var(--accent); text-decoration: none; }
.tile a:not(.btn):hover { text-decoration: underline; }

.mt8{ margin-top:8px; } .mb8{ margin-bottom:8px; } .mb12{ margin-bottom:12px; }
.text-block { white-space: pre-wrap; word-break: break-word; line-height: 1.35; font-size: 0.95rem; }

.exp-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 700; font-size: 0.9em;
  cursor: pointer; user-select: none;
}
.exp-toggle:hover { text-decoration: underline; }
.exp-icon { font-size: 1.1em; }

.tbl-personali { table-layout: fixed; } 
.tbl-personali th.col-location, .tbl-personali td.col-location { width: 18ch; }  
.tbl-personali th.col-note, .tbl-personali td.col-note { width: 24ch; }
.td-xxs{ font-size: 0.72rem; line-height: 1.1; color: var(--muted); }
.td-ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-clamp2{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; }

@media (max-width: 1200px){
  .valuta-layout{ grid-template-columns: 1fr; } 
  .col-right { position: static; max-height: none; overflow-y: visible; padding-right: 0; }
}

@media (max-width: 800px){
  .inner-2-cols { flex-direction: column; align-items: stretch; } 
  .card{ padding: 14px; border-radius: 12px; }
  .table-wrap{ overflow-x: auto; }
}

input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--accent); }
label.chk{ display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: .5rem; }
.campaign-grid label.chk{ background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: none !important; color: inherit !important; }
.campaign-grid label.chk input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--accent); background: transparent !important; }