/* ====== 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;
  --on-accent:#0b1220;
  --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;
  --on-accent:#ffffff;
  --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, #sidebar button.nav-link{
  width:100%; font-family:inherit; cursor:pointer; text-align:left;
  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, #sidebar button.nav-link i{ width:18px; text-align:center; color:color-mix(in srgb, var(--muted) 70%, var(--ink) 30%); }
#sidebar form{ margin:0; }
#sidebar a:hover, #sidebar button.nav-link: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:var(--on-accent); }
.btn.disabled, .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; pointer-events:none; }

/* Messaggi di sistema (django.contrib.messages), mostrati dai template base */
.site-messages{ display:grid; gap:8px; margin:0 0 14px 0; }
.site-messages .notice{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  border-left-width:4px; background:var(--paper); color:var(--ink);
}
.site-messages .notice.success{ border-left-color:var(--ok); }
.site-messages .notice.warning{ border-left-color:var(--warn); }
.site-messages .notice.error{ border-left-color:var(--danger); }
.site-messages .notice.info{ border-left-color:var(--accent); }
.btn-primary:hover{ filter:brightness(1.06); }

/* Forms */
/* border-box: con width:100% + padding i campi uscivano dal contenitore */
input, select, textarea, button{ box-sizing:border-box; }
input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="time"],
input[type="url"], input[type="search"], input[type="password"], input[type="tel"],
input[type="datetime-local"], input[type="month"], input[type="week"], input:not([type]),
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); padding:8px 10px; }
  /* Su telefono il menu è una riga scorrevole, non una lista lunga quanto lo schermo */
  #sidebar ul{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:6px; scrollbar-width:thin; }
  #sidebar li{ flex:0 0 auto; }
  #sidebar a, #sidebar button.nav-link{ white-space:nowrap; padding:8px 10px; font-size:13px; width:auto; }
  #sidebar a:hover, #sidebar button.nav-link:hover{ transform:none; }
  #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);
}



/* ===================================================================
   Libreria documenti DIVO (app "library")
   Solo variabili del tema: nessun colore fisso, funziona chiaro/scuro.
   =================================================================== */
.lib-page{ max-width:1180px; margin:0 auto; padding:4px 0 32px; }

/* Intestazione */
.lib-head{
  display:flex; gap:16px; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:14px;
}
.lib-head h1{
  margin:0; font-family:"Outfit", var(--font); font-size:clamp(22px,3vw,30px);
  letter-spacing:-.5px;
}
.lib-head .lib-sub{ margin:4px 0 0; color:var(--muted); font-size:13px; }
.lib-search{ display:flex; gap:8px; align-items:center; min-width:min(360px,100%); }
.lib-search input{ min-width:220px; }

/* Percorso */
.lib-crumbs{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:13px; margin:0 0 14px; color:var(--muted);
}
.lib-crumbs a{ color:var(--ink); text-decoration:none; font-weight:600; }
.lib-crumbs a:hover{ color:var(--accent); }
.lib-crumbs .sep{ opacity:.5; }

/* Titoletti di sezione */
.lib-section{ margin:22px 0 10px; display:flex; align-items:center; gap:10px; }
.lib-section h2{
  margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700;
}
.lib-section::after{ content:""; flex:1; height:1px; background:var(--border); }

/* Griglie */
.lib-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.lib-grid.wide{ grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }

/* Card cartella */
.folder-card{
  display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:var(--ink);
  border:1px solid var(--border); border-radius:var(--radius); padding:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 96%, transparent), color-mix(in srgb, var(--paper-2) 96%, transparent));
  transition:.18s transform,.18s border-color,.18s box-shadow;
}
.folder-card:hover{
  transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 35%, var(--border) 65%);
  box-shadow:var(--shadow);
}
.folder-card .ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; font-size:18px;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
}
.folder-card .name{ font-weight:700; font-size:15px; line-height:1.25; }
.folder-card .desc{
  color:var(--muted); font-size:12px; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.folder-card .count{ color:var(--muted); font-size:11px; margin-top:8px; }

/* Card documento */
.doc-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--paper); transition:.18s transform,.18s border-color,.18s box-shadow;
}
.doc-card:hover{
  transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 35%, var(--border) 65%);
  box-shadow:var(--shadow);
}
.doc-thumb{
  position:relative; aspect-ratio:16/9; display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    var(--paper-2);
  border-bottom:1px solid var(--border); overflow:hidden;
}
.doc-thumb img{ width:100%; height:100%; object-fit:cover; }
.doc-thumb .glyph{ font-size:34px; color:color-mix(in srgb, var(--ink) 45%, transparent); }
.doc-thumb .glyph.pdf{ color:color-mix(in srgb, var(--danger) 75%, var(--ink) 25%); }
.doc-thumb .play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:color-mix(in srgb, var(--bg) 25%, transparent);
}
.doc-thumb .play i{
  font-size:44px; color:var(--paper);
  text-shadow:0 4px 18px rgba(0,0,0,.45);
  transition:.18s transform;
}
.doc-card:hover .play i{ transform:scale(1.08); }
.doc-body{ padding:11px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.doc-body .name{ font-weight:700; font-size:14px; line-height:1.3; }
.doc-body .desc{
  color:var(--muted); font-size:12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.doc-meta{ margin-top:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:11px; }

/* Etichette */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--border); background:var(--paper-2); color:var(--muted);
  font-size:11px; font-weight:700; white-space:nowrap;
}
.chip.accent{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, var(--border) 65%); }
.chip.ok{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, var(--border) 65%); }
.chip.warn{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 35%, var(--border) 65%); }
.chip.danger{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--border) 65%); }

/* Vuoto */
.lib-empty{
  display:grid; place-items:center; gap:10px; text-align:center;
  padding:48px 20px; color:var(--muted);
  border:1px dashed var(--border); border-radius:var(--radius); background:var(--paper-2);
}
.lib-empty i{ font-size:34px; opacity:.65; }

/* Pagina di visualizzazione */
.lib-viewer{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.lib-stage{
  background:var(--paper-2); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.lib-stage video, .lib-stage iframe, .lib-stage img{ display:block; width:100%; border:0; background:#000; }
.lib-stage video{ max-height:70vh; }
.lib-stage iframe{ height:min(78vh,900px); background:var(--paper); }
.lib-stage img{ background:var(--paper); max-height:70vh; object-fit:contain; }
.lib-fileinfo{ display:grid; place-items:center; gap:12px; padding:56px 20px; text-align:center; color:var(--muted); }
.lib-fileinfo i{ font-size:52px; }
.lib-info{ margin-top:14px; }
.lib-info h1{ margin:0 0 6px; font-size:22px; font-family:"Outfit", var(--font); }
.lib-info .desc{ color:var(--ink); opacity:.85; font-size:14px; white-space:pre-line; margin-top:10px; }
.lib-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.lib-side h3{ margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.lib-side .item{
  display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink);
  padding:8px; border-radius:10px; border:1px solid transparent;
}
.lib-side .item:hover{ background:var(--paper-2); border-color:var(--border); }
.lib-side .item .mini{
  flex:0 0 auto; width:52px; height:34px; border-radius:8px; background:var(--paper-2);
  border:1px solid var(--border); display:grid; place-items:center; overflow:hidden; font-size:13px; color:var(--muted);
}
.lib-side .item .mini img{ width:100%; height:100%; object-fit:cover; }
.lib-side .item .t{ font-size:13px; font-weight:600; line-height:1.25; }
@media (max-width: 900px){ .lib-viewer{ grid-template-columns:1fr; } }

/* ---- Gestione (unirig) ---- */
.lib-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.lib-table-wrap{ border:1px solid var(--border); border-radius:12px; overflow:auto; }
.lib-table{ width:100%; border-collapse:collapse; min-width:760px; }
.lib-table th{ position:sticky; top:0; }
.lib-table td .t{ font-weight:600; }
.lib-table td .s{ color:var(--muted); font-size:12px; }
.lib-actions-cell{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.lib-actions-cell .btn{ padding:6px 9px; font-size:12px; }
.icon-cell{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--paper-2); border:1px solid var(--border); color:var(--muted);
}

/* Form: scelta destinatari */
.access-option{
  display:block; border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  background:var(--paper-2); cursor:pointer; margin-bottom:8px; transition:.18s border-color,.18s background;
}
.access-option:hover{ border-color:color-mix(in srgb, var(--accent) 30%, var(--border) 70%); }
.access-option input{ margin-right:8px; }
.access-option .t{ font-weight:700; color:var(--ink); font-size:14px; }
.access-option .h{ display:block; color:var(--muted); font-size:12px; margin-top:3px; margin-left:22px; }
.access-panel{
  border:1px solid var(--border); border-radius:12px; padding:12px; margin:8px 0 4px;
  background:var(--paper);
}
.access-panel[hidden]{ display:none; }
.pick-list{
  max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:10px;
  padding:8px; background:var(--paper-2);
}
.pick-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.pick-list label{ display:flex; gap:8px; align-items:center; color:var(--ink); font-size:13px; cursor:pointer; padding:2px 0; }
.pick-list input[type="checkbox"]{ width:auto; }
.pick-filter{ margin-bottom:8px; }
.form-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.form-row{ margin-bottom:14px; }
.form-row > label{ display:block; margin-bottom:6px; font-weight:600; color:var(--ink); font-size:13px; }
.form-help{ color:var(--muted); font-size:12px; margin-top:4px; }
.form-error{ color:var(--danger); font-size:12px; margin-top:4px; }
.lib-messages{ display:grid; gap:8px; margin-bottom:14px; }
.lib-msg{
  border:1px solid var(--border); border-left:3px solid var(--accent);
  background:var(--paper-2); border-radius:10px; padding:10px 12px; font-size:13px;
}
.lib-msg.error{ border-left-color:var(--danger); }
.drop-zone{
  /* è un <label>: senza display:block bordo e sfondo si spezzano in riquadri
     sparsi attorno al testo (frammentazione delle scatole inline). */
  display:block; position:relative; cursor:pointer;
  border:2px dashed var(--border); border-radius:var(--radius); padding:26px; text-align:center;
  background:var(--paper-2); transition:.18s border-color,.18s background;
}
/* Il campo file vero resta raggiungibile da tastiera e dalla validazione del
   browser, ma non si vede: si clicca la zona di trascinamento. */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.drop-zone.hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--paper-2)); }
.drop-zone i{ font-size:30px; color:var(--muted); }
.file-list{ margin-top:10px; display:grid; gap:6px; font-size:13px; }
.file-list .f{ display:flex; justify-content:space-between; gap:10px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--paper); }

/* ===== Testi bilingui ===== */
/* <span class="lang-it">…</span><span class="lang-en">…</span>: senza data-lang resta l'italiano */
.lang-en{ display:none; }
[data-lang='en'] .lang-en{ display:inline; }
[data-lang='en'] .lang-it{ display:none; }

/* ===== Area centri di assistenza ===== */
.center-badge{
  display:inline-flex; align-items:center; gap:8px; max-width:32vw;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--paper-2); color:var(--ink); font-weight:700; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.center-badge i{ color:var(--accent); }
.lang-form{ margin:0; }
@media (max-width: 760px){
  .center-badge{ display:none; }
}