/* =========================================================
   UniCondominio Academy — style.css (Modern Tech / SaaS Dark)
   Generated: 2026-05-06

   Note:
   - Questo file è pensato per sostituire interamente il precedente style.css.
   - Include stili per: Home, Area Admin, Area Associato (student), tabelle sticky,
     toolbar/filtri, badge quota, cards, forms, alerts, video embed.
   - Usa solo CSS (nessuna dipendenza esterna).
   ========================================================= */

/* -----------------------------
   1) Design tokens
------------------------------ */
:root{
  /* Brand */
  --primary: #0b63ff;
  --primary-2: #2d8cff;
  --primary-3: #66b2ff;
  --primary-soft: rgba(11,99,255,.14);

  /* Surfaces */
  --bg-0: #07101f;
  --bg-1: #071226;
  --bg-2: #081327;
  --surface-0: rgba(255,255,255,.04);
  --surface-1: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.08);

  /* Text */
  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.84);
  --muted: rgba(255,255,255,.68);
  --muted-2: rgba(255,255,255,.52);

  /* Status */
  --ok: #16c784;
  --ok-soft: rgba(22,199,132,.14);
  --danger: #ff4d5e;
  --danger-soft: rgba(255,77,94,.14);
  --warn: #ffb020;
  --warn-soft: rgba(255,176,32,.16);

  /* Borders / Shadows */
  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.28);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.18);

  /* Radius */
  --radius: 18px;
  --radius-sm: 14px;

  /* Layout */
  --container: 1160px;
  --pad-x: 28px;
  --pad-x-sm: 16px;
  --section-y: 62px;

  /* Focus ring */
  --ring: 0 0 0 4px rgba(11,99,255,.16);
}

/* -----------------------------
   2) Reset / Base
------------------------------ */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Segoe UI, system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 680px at 20% -10%, rgba(11,99,255,.22), transparent 55%),
    radial-gradient(980px 560px at 90% 0%, rgba(45,140,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 40%, var(--bg-0) 100%);
}

/* Pagina con classe .bg (molte pagine admin/student) */
body.bg{
  min-height:100vh;
  background:
    radial-gradient(1200px 680px at 20% -10%, rgba(11,99,255,.22), transparent 55%),
    radial-gradient(980px 560px at 90% 0%, rgba(45,140,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 40%, var(--bg-0) 100%);
}

img{ max-width:100%; height:auto; }

a{ color: var(--primary-2); text-decoration:none; }
a:hover{ color: var(--primary-3); text-decoration:none; }

/* Tipografia */
.h1, h1{ font-size: clamp(22px, 2.2vw, 34px); letter-spacing:-.4px; line-height:1.12; margin:0 0 10px; }
h2{ font-size: 28px; letter-spacing:-.3px; line-height:1.18; margin:0 0 8px; }
h3{ font-size: 18px; letter-spacing:-.2px; margin:0 0 8px; }

.muted{ color: var(--muted); }
.small{ font-size:12px; color: var(--muted-2); }

/* -----------------------------
   3) Layout primitives
------------------------------ */
.container{
  max-width: var(--container);
  margin: 34px auto;
  padding: 0 var(--pad-x);
}

.section{ padding: var(--section-y) var(--pad-x); }

.section-head{
  max-width: var(--container);
  margin: 0 auto 18px;
}
.section-head p.muted{ max-width: 62ch; }

/* Griglie */
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }

.two-col{
  max-width: var(--container);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .container{ padding: 0 var(--pad-x-sm); }
  .section{ padding: 48px var(--pad-x-sm); }
}

/* -----------------------------
   4) Topbar (Header)
------------------------------ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px var(--pad-x);
  background: linear-gradient(180deg, rgba(9,24,55,.92) 0%, rgba(8,20,44,.78) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.brand{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.brand-logo{ height:40px; width:40px; display:block; }
.brand-title{ font-weight: 850; letter-spacing: .2px; color: rgba(255,255,255,.95); }

.nav{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

.nav-link{
  color: rgba(255,255,255,.80);
  font-weight: 750;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.nav-link:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  transform: translateY(-1px);
}

.nav-cta{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  border:0;
  box-shadow: 0 14px 30px rgba(11,99,255,.25);
}
.nav-cta:hover{ filter: brightness(1.05); }

@media(max-width: 900px){
  .topbar{ padding: 12px var(--pad-x-sm); }
  .brand-title{ font-size: 14px; }
}

/* -----------------------------
   5) Hero
------------------------------ */
.hero{
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 84px var(--pad-x);
  color: #fff;
  background:
    radial-gradient(1000px 520px at 20% 10%, rgba(11,99,255,.28), transparent 60%),
    radial-gradient(980px 540px at 90% 0%, rgba(45,140,255,.22), transparent 60%),
   /* linear-gradient(180deg, rgba(9,24,55,.92) 0%, rgba(7,16,31,.92) 100%);*/
    linear-gradient(rgba(9,24,55,.82), rgba(7,16,31,.82)),
    url('../images/hero-modern.png') center/cover no-repeat;

}
.hero-inner{ max-width: 980px; text-align:center; }
.hero h1{ font-size: clamp(34px,4vw,54px); margin:0 0 10px; line-height:1.06; }
.hero-sub{ font-size: clamp(16px,1.6vw,20px); opacity:.95; margin:0 0 8px; }
.hero-strong{ font-size: clamp(14px,1.4vw,18px); opacity:.92; margin:0 0 22px; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* -----------------------------
   6) Cards / Panels
------------------------------ */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.045) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}
.card:hover{ border-color: var(--border-2); }

.section-box{ margin-top: 18px; border: 1px solid rgba(255,255,255,.10); box-shadow: none; }

.icon-card{ /* compat legacy */
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.045) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.icon{ font-size: 22px; }

/* Media card (home) */
.media-card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.media-img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display:block;
}

/* -----------------------------
   7) Buttons
------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 850;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.btn:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }

.btn-primary{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  border:0;
  box-shadow: 0 14px 30px rgba(11,99,255,.26);
}
.btn-primary:hover{ filter: brightness(1.06); }

.btn-ghost{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover{ background: rgba(255,255,255,.12); }

.btn-danger{
  background: linear-gradient(135deg, #ff4d5e 0%, #ff6b79 100%);
  color:#fff;
  border:0;
  box-shadow: 0 14px 30px rgba(255,77,94,.22);
}

/* CTA row */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px; }

/* -----------------------------
   8) Badges / Chips
------------------------------ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  font-size: 12px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,99,255,.12);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(11,99,255,.22);
  font-weight: 850;
}

/* -----------------------------
   9) Forms
------------------------------ */
.auth-card{ max-width: 520px; margin: 0 auto; }
.form{ display:grid; gap: 10px; margin-top: 14px; }
.label{ font-weight: 850; font-size: 14px; color: rgba(255,255,255,.86); }

.input{
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline:none;
  width:100%;
}
.input::placeholder{ color: rgba(255,255,255,.50); }
.input:focus{ border-color: rgba(11,99,255,.55); box-shadow: var(--ring); }

.pw-row{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }
.pw-row .input{ flex:1; min-width: 200px; }
.pw-toggle{ white-space: nowrap; }

.two-col-form{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media(max-width: 900px){ .two-col-form{ grid-template-columns: 1fr; } }

/* -----------------------------
   10) Alerts
------------------------------ */
.alert{ padding: 12px 14px; border-radius: var(--radius-sm); margin: 12px 0; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.alert-error{ background: var(--danger-soft); border-color: rgba(255,77,94,.35); color: rgba(255,255,255,.92); }
.alert-ok{ background: var(--ok-soft); border-color: rgba(22,199,132,.35); color: rgba(255,255,255,.92); }

/* -----------------------------
   11) Tables
------------------------------ */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.table th, .table td{
  padding: 10px 8px;
  text-align:left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.table thead th{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.table tbody tr:hover td{ background: rgba(255,255,255,.04); }

/* Wrapper scroll + sticky helpers (usati in morosi.php) */
.table-wrap{ overflow:auto; margin-top: 12px; border-radius: var(--radius-sm); }

/* Sticky header */
.table thead th{ position: sticky; top: 0; z-index: 5; }

/* Sticky left (1 & 2) and right actions (se usi le classi) */
:root{ --col-nominativo: 260px; --col-username: 170px; }
.table thead th.sticky-left-1, .table tbody td.sticky-left-1{ min-width: var(--col-nominativo); }
.table thead th.sticky-left-2, .table tbody td.sticky-left-2{ min-width: var(--col-username); }

.table thead th.sticky-left-1{ left:0; z-index: 10; background: rgba(11,99,255,.10); }
.table tbody td.sticky-left-1{ position: sticky; left:0; z-index: 8; background: rgba(255,255,255,.035); }

.table thead th.sticky-left-2{ left: var(--col-nominativo); z-index: 9; background: rgba(255,255,255,.06); }
.table tbody td.sticky-left-2{ position: sticky; left: var(--col-nominativo); z-index: 7; background: rgba(255,255,255,.04); box-shadow: 10px 0 12px -12px rgba(0,0,0,.35); }

.table thead th.actions{ right:0; z-index: 11; }
.table tbody td.actions{ position: sticky; right:0; z-index: 9; background: rgba(255,255,255,.04); box-shadow: -10px 0 12px -12px rgba(0,0,0,.35); }

@media(max-width:900px){
  :root{ --col-nominativo: 220px; --col-username: 150px; }
}

/* -----------------------------
   12) Toolbars / Filters (admin)
------------------------------ */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 12px; }

.quick-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 6px; }
.qbtn{ padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); font-weight: 850; font-size: 12px; cursor: pointer; }
.qbtn.active{ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); border-color: transparent; color:#fff; }

.statusline{ display:flex; gap: 12px; flex-wrap:wrap; align-items:center; justify-content: space-between; }

/* -----------------------------
   13) Avatars
------------------------------ */
.avatar{ width:44px; height:44px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.avatar-lg{ width:86px; height:86px; border-radius: 18px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }

/* -----------------------------
   14) Video embed
------------------------------ */
.video{ position: relative; padding-top: 56.25%; border-radius: 16px; overflow:hidden; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.10); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* -----------------------------
   15) Footer
------------------------------ */
.footer{
  padding: 26px var(--pad-x);
  text-align:center;
  color: rgba(255,255,255,.65);
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(6,14,28,.55);
}

/* -----------------------------
   16) Reduced motion
------------------------------ */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =========================================================
   HOME HERO – Background Modern Tech con box a destra
   ========================================================= */

/* 1) Usa l’immagine come background */
#hero-home{
  /* L’immagine deve stare in: /academy/assets/images/hero-modern-tech.png */
  background: url('../images/hero-modern-tech.png') center/cover no-repeat !important;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: flex-end;     /* testo a destra (dentro box) */
  padding: 64px 28px;
  position: relative;
}

/* 2) Piccolo “fade” leggero per migliorare leggibilità (non copre il box) */
#hero-home::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(7,18,38,.35) 0%,
      rgba(7,18,38,.20) 35%,
      rgba(7,18,38,0) 60%,
      rgba(7,18,38,0) 100%);
  pointer-events: none;
}

/* 3) Box testo: lo posizioniamo sopra il riquadro bianco dell’immagine */
#hero-home .hero-box{
  position: relative;           /* sopra ::before */
  z-index: 2;
  width: min(520px, 100%);
  margin-right: 4.5%;           /* micro regolazione: sposta dentro il box dell’immagine */
  padding: 18px 18px;
  text-align: left;

  /* IMPORTANTISSIMO:
     il riquadro bianco trasparente è già disegnato nell’immagine,
     quindi qui teniamo lo sfondo trasparente (non lo copriamo). */
  background: transparent;
}

/* 4) Testo scuro (perché il box nell’immagine è chiaro) */
#hero-home .hero-box h1,
#hero-home .hero-box .hero-sub,
#hero-home .hero-box .hero-strong{
  color: #0b1b33 !important;
  text-shadow: none !important;
}

#hero-home .hero-box .hero-sub{
  opacity: .90;
}

#hero-home .hero-box .hero-strong{
  opacity: .92;
}

/* 5) Bottoni sul box chiaro: rendiamo il ghost più “chiaro” */
#hero-home .hero-actions .btn-ghost{
  background: rgba(11,99,255,.10) !important;
  border: 1px solid rgba(11,99,255,.18) !important;
  color: #0b1b33 !important;
}
#hero-home .hero-actions .btn-ghost:hover{
  background: rgba(11,99,255,.14) !important;
}

/* 6) Responsive: su mobile il box va centrato e più leggibile */
@media (max-width: 900px){
  #hero-home{
    justify-content: center;
    padding: 40px 16px;
    min-height: 520px;
  }
  #hero-home .hero-box{
    margin-right: 0;
    padding: 14px 14px;

    /* su mobile aggiungiamo un supporto di leggibilità
       (piccolo vetro chiaro) perché il box dell’immagine può essere meno centrato */
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(11,27,51,.12);
    border-radius: 18px;
    backdrop-filter: blur(6px);
  }
}


/* =========================================================
   Premium UI Pack — Cards/Buttons (Modern Tech)
   Incolla in fondo a assets/css/style.css
   ========================================================= */

/* Cards: hover più moderno (lift + glow controllato) */
.card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.18);
}

/* Cards grid: un filo più aria */
.cards{ gap: 16px; }

/* CTA row: separatore visivo */
.cta-row{
  margin-top: 18px;
}

/* Badge un po’ più “app” */
.badge{
  backdrop-filter: blur(6px);
}

/* Riduci motion se richiesto */
@media (prefers-reduced-motion: reduce){
  .card{ transition: none !important; }
  .card:hover{ transform:none !important; }
}

/* =========================================
SELECT PREMIUM UNIFICATO (GLOBAL)
========================================= */

.select-native {
  display: none !important;
}

.select-premium {
  position: relative;
  width: 100%;
}

.select-premium .trigger {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,140,0,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,140,0,.35);
  color: #0b1b33 !important;
  cursor: pointer;
  font-weight: 600;
}

.select-premium .dropdown {
  position: absolute;
  top: calc(100% + 6px);
  width: 100%;
  background: #fff7ef !important;
  border-radius: 12px;
  border: 1px solid rgba(255,140,0,.3);
  padding: 10px;
  display: none;
  z-index: 999;
}

.select-premium.open .dropdown {
  display: block;
}

.select-premium .search {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ffd199;
  margin-bottom: 8px;
  color:#0b1b33;
}

.select-premium .option {
  padding: 10px;
  border-radius: 10px;
  background: #fff7ef !important;
  color: #0b1b33 !important;
  cursor: pointer;
  margin-bottom: 4px;
}

.select-premium .option:hover {
  background: rgba(255,140,0,.25) !important;
}