/* ===========================================
   TicketReport - Sidebar collapsible
   Caricato da MasterReport.master
   Attivo solo desktop (>=768px). Sotto i 768px
   il layout originale (.container > .header)
   resta invariato.
   =========================================== */

/* ==========================================================
   LAYOUT VARIABLES — modifica qui per allineare TUTTE le pagine
   --layout-pad  : margine SX/DX dell'header (titolo+campanella) e del box contenuto
   --layout-top  : spazio tra l'header fisso e il primo elemento della pagina
   ========================================================== */
:root {
  --layout-pad: 40px;
  --layout-top: 52px;
}

/* ==========================================================
   1. Sidebar nascosta su mobile (preserva layout esistente)
   ========================================================== */
/* Nascosti su mobile (<=767px) */
#hdr-page-title { display: none; }
#hdr-controls   { display: none; }
#page-subbar    { display: none; }

.tr-sidebar { display: none; }

@media (min-width: 768px) {

  /* === Sidebar fixed a sinistra === */
  .tr-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 68px;
    background: #2e4a63;
    color: #fff;
    overflow: hidden;
    transition: width .25s ease, box-shadow .25s ease;
    z-index: 10001;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  }
  .tr-sidebar:hover {
    width: 250px;
    box-shadow: 4px 0 16px rgba(0,0,0,0.20);
  }

  /* === Spazio per la sidebar: body shift a destra === */
  body { padding-left: 68px; }

  /* === Header esistente: nascondi celle logo + RadMenu, resta solo user info ===
     IMPORTANTE: usa > (direct child) per non nascondere i <td> delle tabelle
     annidate (DataList lastdatalist, RadMenu, ecc.)                          === */
  .header > table > tbody > tr > td:first-child,
  .header > table > tbody > tr > td:nth-child(2) {
    display: none !important;
  }
  .header {
    left: 68px !important;
    width: calc(100% - 68px) !important;
    padding: 8px var(--layout-pad) !important;
    background-color: #fff !important;
    border-bottom: 1px solid #e6e8eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .container {
    grid-template-rows: auto 1fr !important;
  }
  /* User info: forza colore scuro su sfondo bianco.
     Le regole sotto battono gli inline color:white su TD/DataList. */
  .header,
  .header *,
  .header table td,
  .header table table,
  .header table table * {
    color: #2e4a63 !important;
  }
  .header .login-icon,
  .header .login-icon i,
  .header a {
    color: #5b6b7c !important;
  }
  .header a:hover,
  .header .login-icon:hover,
  .header .login-icon:hover i {
    color: #2e4a63 !important;
  }
  /* Last TD: flex row — titolo a sinistra, login info a destra */
  .header > table > tbody > tr > td:last-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }
  /* Titolo pagina: occupa lo spazio rimasto, spinge logininfo a destra */
  #hdr-page-title {
    display: block;
    margin-right: auto;       /* spinge logininfo a destra (se non c'è hdrControls) */
    font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 700;
    background: linear-gradient(90deg, #2e4a63, #5b8db8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 12px;
  }
  /* Quando ci sono hdrControls (flex:1), il titolo non spinge nulla —
     hdrControls occupa già tutto lo spazio */
  #hdr-controls ~ #logininfo,
  #hdr-controls + #logininfo {
    flex-shrink: 0;
  }

  /* === Controlli header (es. riepilogo): tra titolo e logininfo === */
  #hdr-controls {
    flex: 1;                   /* occupa tutto lo spazio disponibile */
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
    padding: 0 4px;
    align-self: stretch;       /* si estende in altezza come il TD */
    justify-content: center;
  }
  .hdr-ctrl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .hdr-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .hdr-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  /* Fix colori forzati da .header * */
  #hdr-controls .interval-btn.active { color: #fff !important; }
  #hdr-controls .hdr-stk-btn { color: #2e4a63 !important; }
  #hdr-controls .hdr-search-icon { color: #6b7280 !important; }
  #hdr-controls .hdr-futuri-lbl { color: #374151 !important; }
  /* Chips: striscia fixed separata sotto l'header.
     top e left impostati da JS (_adjustWrapPad) per allinearsi alle card. */
  .header .chips-row {
    position: fixed;
    right: 0;
    background: transparent;
    padding: 4px 0 4px 6px;
    z-index: 9998;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    /* display: flex/none gestito da JS */
  }
  /* Striscia separatrice globale sotto l'header */
  #page-subbar {
    display: block;
    position: fixed;
    top: 44px;
    left: 68px;
    right: 0;
    height: 8px;
    background: lightsteelblue;
    z-index: 9500;
  }
  /* Topbar (es. riepilogo.aspx): offset per sidebar + header ridotto */
  .topbar {
    left: 68px !important;
    top: 44px !important;
  }
  /* Main: padding-top deve superare l'header fisso (~38px).
     L'header è position:fixed, quindi il grid non gli alloca spazio
     automaticamente → serve padding esplicito. */
  .main {
    padding: var(--layout-top) var(--layout-pad) 24px !important;
    min-width: 0;          /* permette al grid cell di shrinkare sotto il min-content */
    overflow-x: hidden;    /* card content non spilla fuori dal viewport */
  }
  /* Layout fluido: rimuove max-width fissi sui wrapper delle singole pagine. */
  .main .wrap,
  .main .geo-wrap,
  .main .mo-wrap,
  .main .abbina-wrap,
  .main .report-container,
  .main .crm-wrap,
  .main .internobase {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Footer: shifta a destra per non sovrapporsi alla sidebar */
  #footer {
    left: 68px !important;
    width: calc(100% - 68px) !important;
    box-sizing: border-box;
  }
}

/* ==========================================================
   2. Brand (logo): swap mini <-> orizzontale
   ========================================================== */
.tr-sidebar .tr-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  height: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  overflow: hidden;
}
.tr-sidebar .tr-brand a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.tr-sidebar .tr-brand img { display: block; }
.tr-sidebar .tr-brand .logo-mini { height: 36px; width: auto; }
.tr-sidebar .tr-brand .logo-full { height: 26px; width: auto; display: none; }

.tr-sidebar:hover .tr-brand {
  justify-content: flex-start;
  padding-left: 18px;
}
.tr-sidebar:hover .tr-brand .logo-mini { display: none; }
.tr-sidebar:hover .tr-brand .logo-full { display: block; }

/* ==========================================================
   3. Navigation
   ========================================================== */
.tr-sidebar .tr-nav {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* Footer sidebar: Impostazioni pinned in basso */
.tr-sidebar .tr-bottom {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 6px 0;
}

.tr-sidebar .tr-group {
  display: flex;
  flex-direction: column;
}

/* Voce top-level: anchor <a> (link diretto) o button (gruppo) */
.tr-sidebar .tr-group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 22px;
  color: rgba(255,255,255,0.80);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.tr-sidebar .tr-group-head i.tr-ic {
  font-size: 18px;
  min-width: 22px;
  flex-shrink: 0;
  text-align: center;
}
/* Label testo: nascosto quando sidebar collapsed, visibile al hover */
.tr-sidebar .tr-group-head > span {
  opacity: 0;
  transition: opacity .15s ease;
}
.tr-sidebar:hover .tr-group-head > span {
  opacity: 1;
}
.tr-sidebar .tr-group-head:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.tr-sidebar .tr-group-head .tr-chev {
  margin-left: auto;
  font-size: 11px;
  opacity: 0;
  transition: opacity .15s, transform .2s;
}
.tr-sidebar:hover .tr-group-head .tr-chev { opacity: .65; }

/* Stato attivo (voce corrente) e open (accordion aperto) */
.tr-sidebar .tr-group.tr-active > .tr-group-head,
.tr-sidebar .tr-group.tr-open > .tr-group-head {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-left-color: #ffd54a;
}
.tr-sidebar .tr-group.tr-open > .tr-group-head .tr-chev {
  transform: rotate(90deg);
  opacity: .9;
}

/* Sottovoci */
.tr-sidebar .tr-sub {
  display: none;
  flex-direction: column;
  padding: 4px 0 6px;
  background: rgba(0,0,0,0.15);
}
.tr-sidebar:hover .tr-group.tr-open .tr-sub {
  display: flex;
}
.tr-sidebar .tr-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 52px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.tr-sidebar .tr-sub a i {
  font-size: 13px;
  width: 16px;
  opacity: .8;
  flex-shrink: 0;
}
.tr-sidebar .tr-sub a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.tr-sidebar .tr-sub a.tr-active {
  background: rgba(255,255,255,0.12);
  border-left-color: #ffd54a;
  color: #fff;
  font-weight: 500;
}