/* Essedi Admin — Theme aligned to Tech (beta)
   - White topbar + grey content background like Tech app
   - Uses official Essedi red for primary actions
*/
:root{
  --techBg:#575c61;
  --techWhite:#ffffff;
  --techRed:#e00000;
  --techRed2:#b80000;
  --techShadow:rgba(0,0,0,.30);
}

body.light.admin{
  background: var(--techBg) !important;
  color:#141414;
}

/* make main areas transparent so cards stand out */
body.light.admin .adminLayout,
body.light.admin .main,
body.light.admin .container{
  background: transparent !important;
}

/* Topbar */
body.light.admin .topbar{
  height:120px !important;
  background: var(--techWhite) !important;
  border-bottom:1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}

/* Sidebar (hamburger menu) — same style/colors as Tech */
body.light.admin .sidebar{
  background: rgba(255,255,255,.96) !important;
  border-right: 1px solid rgba(0,0,0,.10) !important;
}
body.light.admin .navTitle{
  color: rgba(0,0,0,.70) !important;
}
body.light.admin .navItem{
  color: rgba(0,0,0,.78) !important;
}
body.light.admin .navItem:hover{
  background: rgba(0,0,0,.03) !important;
  border-color: rgba(0,0,0,.06) !important;
}
body.light.admin .navItem.active{
  background: rgba(224,0,0,.10) !important;
  border-color: rgba(224,0,0,.30) !important;
  color: #141414 !important;
}
body.light.admin .navIcon{
  background: rgba(224,0,0,.10) !important;
  color: var(--techRed2) !important;
}
body.light.admin .sidebarOverlay{
  background: rgba(0,0,0,.35) !important;
}
body.light.admin .sidebarClose .btn{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important;
}

/* Planning Admin: colonna Dipendente (allineata e leggibile) */
body.light.admin #cal thead th:first-child,
body.light.admin #cal tbody th.techHead{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  padding: 10px 10px !important;
  /* IMPORTANT: non cambiare display del TH (altrimenti su iPhone si rompe l'allineamento tabella) */
  white-space: normal !important;
  overflow: visible !important;
}

/* Clamp del testo SOLO dentro i div, non sul TH */
body.light.admin #cal tbody th.techHead .techName{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.05;
}
body.light.admin #cal tbody th.techHead .techSede{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

@media (max-width: 900px){
  body.light.admin #cal thead th:first-child,
  body.light.admin #cal tbody th.techHead{
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    padding: 9px 10px !important;
  }
  body.light.admin #cal tbody th.techHead .techName{ -webkit-line-clamp: 2; font-size: 12px; }
  body.light.admin #cal tbody th.techHead .techSede{ font-size: 9px; }
}

/* Cards */
body.light.admin .card,
body.light.admin .panel,
body.light.admin .modal{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Buttons */
body.light.admin .btn.primary,
body.light.admin button.primary{
  background: var(--techRed) !important;
  color:#fff !important;
  border: 1px solid var(--techRed2) !important;
}
body.light.admin .btn.primary:hover,
body.light.admin button.primary:hover{
  background: var(--techRed2) !important;
}

body.light.admin .btn.danger{
  background:#fff !important;
  color: var(--techRed2) !important;
  border:1px solid var(--techRed2) !important;
}

/* Request status badges */
.badge.req-pending{ background: rgba(245,158,11,.18) !important; color:#8a5a00 !important; border:1px solid rgba(245,158,11,.35) !important; }
.badge.req-approved{ background: rgba(34,197,94,.18) !important; color:#0f6a2d !important; border:1px solid rgba(34,197,94,.35) !important; }
.badge.req-rejected{ background: rgba(224,0,0,.15) !important; color:#8a0000 !important; border:1px solid rgba(224,0,0,.30) !important; }

/* =========================
   ADMIN — Visual polish
   (Spese / Cartellino / Rendicontazione / Setting richieste)
   ========================= */

/* Setting > Richieste dipendenti: filtro con colore Essedi */
body.light.admin #reqHead{
  background: linear-gradient(180deg, var(--techRed), var(--techRed2)) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.18) !important;
}

/* Furgoni: header con colori aziendali */
body.light.admin #furgHead{
  background: linear-gradient(180deg, var(--techRed), var(--techRed2)) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.18) !important;
  border-radius: 18px !important;
}
body.light.admin #furgHead .bigTitle{ color:#fff !important; }
body.light.admin #furgHead .muted{ color: rgba(255,255,255,.92) !important; }

/* Furgoni: form a 2 colonne su desktop, 1 colonna su mobile (evita sovrapposizioni / tap errati) */
@media (max-width: 780px){
  body.light.admin .vanFormGrid{ grid-template-columns: 1fr !important; }
}

/* Furgoni: tab attiva in rosso (coerente con stile Essedi) */
body.light.admin #page_furgoni .btn.isActiveTab{
  background: linear-gradient(180deg, var(--techRed), var(--techRed2)) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: #fff !important;
}
body.light.admin #reqHead label.small,
body.light.admin #reqHead .small{
  color: rgba(255,255,255,.92) !important;
}
body.light.admin #reqHead .input,
body.light.admin #reqHead select.input{
  background:#fff !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.18) !important;
}
body.light.admin #reqHead .input:focus,
body.light.admin #reqHead select.input:focus{
  border-color: rgba(0,0,0,.28) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25) !important;
}
body.light.admin #reqHead .pill{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.35) !important;
  color:#fff !important;
}
body.light.admin #reqHead .pill .dot{ background: rgba(255,255,255,.9) !important; }

/* Titolo sezione elenco richieste: pill rossa */
body.light.admin #reqListCard .sectionTitle{
  display:inline-block;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(224,0,0,.10) !important;
  border: 1px solid rgba(224,0,0,.25) !important;
  color: var(--techRed2) !important;
}

/* Spese / Cartellino: separa bene il blocco filtri e rendilo "card" */
body.light.admin #speseHead,
body.light.admin #cartHead{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:18px !important;
  padding:14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  margin: 12px 0 14px 0 !important;
}
body.light.admin #speseHead .bigTitle,
body.light.admin #cartHead .bigTitle{
  color:#141414 !important;
}

/* Rendicontazione: filtri come card separata */
body.light.admin .rcHead{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:18px !important;
  padding:14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  margin: 12px 0 14px 0 !important;
}
body.light.admin .rcHead .hTitle,
body.light.admin .rcHead .helper{ color:#141414 !important; }
body.light.admin .rcHead .label{ color: rgba(0,0,0,.65) !important; font-weight:900; }

/* Tabelle: intestazioni rosse con testo bianco (Spese/Cartellino/Rendicontazione) */
body.light.admin #speseTable thead th,
body.light.admin #cartTable thead th,
body.light.admin #rcTable thead th{
  background: var(--techRed) !important;
  color:#fff !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
}
body.light.admin #speseTable thead th:first-child,
body.light.admin #cartTable thead th:first-child,
body.light.admin #rcTable thead th:first-child{
  border-top-left-radius: 14px;
}
body.light.admin #speseTable thead th:last-child,
body.light.admin #cartTable thead th:last-child,
body.light.admin #rcTable thead th:last-child{
  border-top-right-radius: 14px;
}


@media (max-width:520px){
  body.light.admin .topbar{ height:104px !important; }
}