/* === VARIABILI === */
:root{
  --nav-h: 80px;    /* altezza navbar */
  --sb-w:  260px;   /* larghezza sidebar desktop */
}

/* Bottoni utilita' (secondary outline con hover primary) */
.btn.app-btn-secondary {
  color: var(--bs-secondary);
  border: 1px solid var(--bs-secondary);
  background-color: transparent;
  transition: all .15s ease-in-out;
}
.btn.app-btn-secondary:hover,
.btn.app-btn-secondary:focus {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn.app-btn-secondary:disabled {
  color: var(--bs-secondary);
  background-color: transparent;
  opacity: .65;
}

/* Navbar, spazio superiore */
main.app-main { padding-top: var(--nav-h) !important; }

/* Sidebar fissa (desktop) */
@media (min-width: 768px) {
  .app-sidebar{
    position: fixed;
    top: var(--nav-h);
    left: 0;
    bottom: 0;
    width: var(--sb-w);
    overflow-y: auto;
    background: #f8f9fa;
    border-right: 1px solid rgba(0,0,0,.06);
    z-index: 1029;
  }
}

/* 👉 Cambio chiave: USA PADDING-LEFT invece di margin-left */
.with-sidebar { 
  margin-left: 0 !important;           /* reset sicuro */
  padding-left: 0 !important; 
}
@media (min-width: 768px) {
  .with-sidebar { 
    padding-left: var(--sb-w) !important; /* non crea overflow orizzontale */
  }
}

/* Offcanvas mobile larghezza coerente */
.offcanvas.app-offcanvas { width: var(--sb-w); }

/* Contenitore contenuti (centrato + padding laterale) */
.sb-content {
  max-width: 1280px;        /* regola come preferisci (1200/1140/1320…) */
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* (opzionale) evitare scroll orizzontale in casi limite */
html, body { overflow-x: hidden; }

/* ========== PALETTE (light) ========== */
:root{
  --sb-body: #F6F6F6; 	
  --sb-bg: #f7f8fa;
  --sb-border: rgba(0,0,0,.08);
  --sb-text: #25324a;
  --sb-muted: #6c7a93;
  --sb-hover: rgba(13,110,253,.06);
  --sb-active-bg: linear-gradient(90deg,#4ea1ff 0%,#7b61ff 100%);
  --sb-active-text: #fff;
  --sb-ring: rgba(78,161,255,.36);
}

.app-utility-item svg,
.app-utility-item .bi {
  color: inherit;
  fill: currentColor;
}

/* ========== SFONDO PAGINA  ========== */

body {
	  background: var(--sb-body);
}

/* ========== CONTENITORE SIDEBAR ========== */
.app-sidebar{
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
}

/* scrollbar elegante */
.app-sidebar-inner{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-muted) transparent;
}
.app-sidebar-inner::-webkit-scrollbar{ width: 8px; }
.app-sidebar-inner::-webkit-scrollbar-track{ background: transparent; }
.app-sidebar-inner::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 8px;
}


/* ========== LISTA MENU ========== */
.app-nav { padding: .25rem; }
.app-nav .nav-item { margin: 2px 0; }

/* link base */
.app-nav .nav-link{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  color: var(--sb-text);
  border-radius: .6rem;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
  text-decoration: none;
}

/* icona */
.app-nav .nav-link .nav-icon{
  display: inline-flex;
  width: 1.25rem; height: 1.25rem;
  align-items: center; justify-content: center;
  opacity: .9;
}
.app-nav .nav-link .nav-icon svg{ width: 1.25rem; height: 1.25rem; }

.nav-link-text-small{
  font-size: smaller;
  letter-spacing: .1px;
  margin-left: 5px;	
}


/* hover */
.app-nav .nav-link:hover{
  background: var(--sb-hover);
  color: var(--sb-text);
}

/* active “chip” (niente pill blu di Bootstrap) */
.app-nav .nav-link.active{
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  box-shadow: 0 0 0 .18rem var(--sb-ring);
}
.app-nav .nav-link.active .nav-icon { opacity: 1; }
.app-nav .nav-link.active .nav-link-text { color: var(--sb-active-text); }

/* focus accessibile */
.app-nav .nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .22rem var(--sb-ring);
}

/* separatori */
.app-nav .dropdown-divider{
  border-color: var(--sb-border);
  margin: .4rem .25rem;
}

/* ========== SUBMENU ========== */
.has-submenu .submenu-toggle{
  position: relative;
  padding-right: 2rem; /* spazio freccia */
}

/* caret che ruota */
.has-submenu .submenu-arrow{
  position: absolute;
  right: .7rem; top: 50%; transform: translateY(-50%) rotate(0deg);
  opacity: .7; transition: transform .2s ease, opacity .2s ease;
}
.has-submenu .submenu-toggle[aria-expanded="true"] .submenu-arrow{
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
}

/* corpo submenu */
.submenu{
  border-left: 2px solid var(--sb-border);
  margin: .25rem 0 .35rem .35rem;
  padding-left: .5rem;
}
.submenu-list .submenu-item{ margin: 2px 0; }
.submenu-list .submenu-link{
  display: block;
  padding: .4rem .5rem .4rem 1.9rem; /* indent */
  border-radius: .5rem;
  color: var(--sb-muted);
  transition: background-color .18s ease, color .18s ease;
  text-decoration: none;
}
.submenu-list .submenu-link:hover{
  background: var(--sb-hover);
  color: var(--sb-text);
}
/* stato attivo per link del submenu (se lato PHP aggiungi 'active') */
.submenu-list .submenu-link.active{
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  box-shadow: 0 0 0 .14rem var(--sb-ring);
}

/* ========== FOOTER MENU ========== */
.footer-menu{
  border-top: 1px dashed var(--sb-border);
  padding-top: .5rem;
  margin-top: .6rem;
}
.footer-menu .nav-link{
  color: var(--sb-muted);
  /*padding: .42rem .6rem; */
}
.footer-menu .nav-link:hover{
  color: var(--sb-text);
  background: var(--sb-hover);
}

/* ========== MATCH OFFCANVAS (mobile) ========== */
.offcanvas.app-offcanvas{
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
}
.offcanvas.app-offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--sb-border);
}



/* Uniforma cards/sezioni come workspace-admin */
.app-card, .card {
  border-radius: 10px;
  border: 1px solid var(--sb-border);
}
.app-card-header, .card-header {
  background-color: var(--sb-bg);
  border-bottom: 1px solid var(--sb-border);
}
.app-card-body, .card-body {
  color: var(--sb-text);
}
.app-page-title {
  font-size: 1.6rem;
  font-weight: 600;
}
.section-title {
  font-size: 1.1rem;
  font-weight: 600;
}
.table th,
.table thead th {
  font-size: 0.85rem;
  font-weight: 400;
}

/* Switch primario */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
  border-color: var(--bs-primary);
}