/* ====== Tema Unico (light/dark) + layout coerente con il calendario ====== */

/* Variabili per i due temi */
:root{
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.20);
  --font: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* DARK */
html[data-theme="dark"]{
  --bg:#0b0f14;
  --paper:#111823;
  --paper-2:#0f1722;
  --ink:#e6edf3;
  --muted:#93a4b7;
  --accent:#7aa2f7;
  --border:#203041;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
}

/* LIGHT */
html[data-theme="light"]{
  --bg:#f6f8fb;
  --paper:#ffffff;
  --paper-2:#f1f5fb;
  --ink:#0b1220;
  --muted:#51627a;
  --accent:#3b82f6;
  --border:#d9e0ea;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
}

/* Base */
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Upperbar */
#upperbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, transparent), color-mix(in srgb, var(--paper-2) 92%, transparent));
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
#logo-container{
  display:inline-flex; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--paper-2) 70%, transparent);
  border:1px solid var(--border);
  padding:6px 10px; border-radius:10px;
}
#logo-container img{ display:block; max-height:34px; width:auto; }
#user-info{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  color:var(--muted);
}
.user-box{
  display:flex; align-items:center; gap:8px;
  background:var(--paper-2); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px;
}

/* Layout colonne */
#bars_container{
  display:grid; grid-template-columns: 250px 1fr; gap:0; min-height:calc(100vh - 64px);
}

/* Sidebar */
#sidebar{
  position:sticky; top:64px; align-self:start;
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 95%, transparent), color-mix(in srgb, var(--paper-2) 95%, transparent));
  border-right:1px solid var(--border);
  padding:14px 10px; min-height:calc(100vh - 64px);
}
#sidebar ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
#sidebar a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  padding:10px 12px; border-radius:10px; border:1px solid transparent;
  background:transparent; transition:.18s background,.18s border,.18s transform;
  font-weight:600; font-size:14px;
}
#sidebar a i{ width:18px; text-align:center; color:color-mix(in srgb, var(--muted) 70%, var(--ink) 30%); }
#sidebar a:hover{
  background:var(--paper-2); border-color:var(--border); transform:translateX(2px);
}
#sidebar a.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 88%, transparent), color-mix(in srgb, var(--paper) 88%, transparent));
  border-color:color-mix(in srgb, var(--accent) 25%, var(--border) 75%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Content */
#content{
  padding:16px; min-width:0;
}

/* Cards / utility */
.card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 96%, transparent), color-mix(in srgb, var(--paper-2) 96%, transparent));
  border:1px solid var(--border); border-radius:var(--radius); padding:12px;
  box-shadow:var(--shadow);
}
.muted{ color:var(--muted); }
.container{ max-width:1100px; margin:0 auto; }
.grid{ display:grid; gap:12px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:1fr 1fr 1fr; }

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--border);
  background:var(--paper); color:var(--ink);
  padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer;
  transition:.18s background,.18s border,.18s transform,.18s filter;
}
.btn:hover{ border-color:color-mix(in srgb, var(--accent) 30%, var(--border) 70%); transform:translateY(-1px); }
.btn-primary{ background:var(--accent); border-color:transparent; color:#0b1220; }
html[data-theme="light"] .btn-primary{ color:white; }
.btn-primary:hover{ filter:brightness(1.06); }

/* Forms */
input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="time"],
select, textarea{
  width:100%; background:var(--paper-2); color:var(--ink);
  border:1px solid var(--border); border-radius:10px; padding:8px 10px;
  outline:none; transition:.18s border,.18s box-shadow,.18s background;
}
input:focus, select:focus, textarea:focus{
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border) 65%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
label{ color:var(--muted); font-size:13px; }

/* Tables */
table{ width:100%; border-collapse:collapse; }
th,td{ border-bottom:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top; }
th{
  color:color-mix(in srgb, var(--muted) 70%, var(--ink) 30%);
  background:var(--paper-2); font-size:12px; font-weight:700;
}

/* Responsivo */
@media (max-width: 980px){
  #bars_container{ grid-template-columns: 1fr; }
  #sidebar{ position:static; min-height:auto; border-right:none; border-bottom:1px solid var(--border); }
  #upperbar{ gap:8px; }
  #user-info{ display:none; } /* spazio su mobile */
}

/* ===== Brand wordmark ===== */
.brand{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  line-height:1;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--paper-2) 70%, transparent);
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

/* Dimensioni responsive: compatto su mobile, imponente su desktop */
.brand .brand-uni,
.brand .brand-rig{
  font-family: "Outfit", var(--font);
  font-weight:800;
  letter-spacing:0.5px;
  font-size: clamp(18px, 3.2vw, 26px);
}

/* Colori che si adattano al tema */
html[data-theme="dark"] .brand .brand-uni{ color: var(--ink); }
html[data-theme="dark"] .brand .brand-rig{ color: var(--accent); }

html[data-theme="light"] .brand .brand-uni{ color: var(--ink); }
html[data-theme="light"] .brand .brand-rig{ color: var(--accent); }

/* Piccolo accento grafico (bar) che rende il marchio più “tech” */
.brand::after{
  content:"";
  display:inline-block;
  width:8px; height:8px; margin-left:6px;
  border-radius:2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.brand:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border) 75%);
}

/* Allinea e misura contenitore logo nell’upperbar */
#logo-container{
  display:inline-flex; align-items:center; gap:10px;
  padding:0; border:0; background:transparent; /* il contenuto è la .brand */
}

#logo-container .brand{
  padding:8px 12px;
}

/* ===== UNIRIG wordmark ===== */
.brand.unirig{
  gap:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.brand.unirig::after{ content:none; } /* remove the small square accent */

.brand.unirig .wordmark{
  font-family:"Outfit", var(--font);
  font-weight:800;
  /* big, compact, rounded look like the sample */
  font-size:clamp(24px, 3.6vw, 32px);
  line-height:0.9;
  letter-spacing:-0.8px;
  text-transform:lowercase;   /* keeps the “unirig” look even if typed uppercase */
  color:#d91c24;
  display:inline-block;
}

/* Optional: tiny lift on hover like the rest of the UI */
#logo-container .brand.unirig:hover{
  transform:translateY(-1px);
}