/* /var/www/html/header.css — NORMALIZZA HAMBURGER SU TUTTE LE PAGINE */

/* Vars globali nav */
:root {
  --header-h: 0px;
  --nav-font: Arial, Helvetica, sans-serif;
  --nav-font-size: 15px;        /* 👈 dimensione coerente */
  --nav-btn-pad-y: 8px;
  --nav-btn-pad-x: 12px;
  --nav-row-h: 42px;            /* altezza logo e riga header */
}

/* Forza font su tutta la navbar */
.panel-header,
.panel-header *:not(svg):not(path),
.menu.desktop-menu,
.menu.desktop-menu a,
.menu.mobile-menu,
.menu.mobile-menu a,
.hamburger,
.user-menu,
.user-menu .badge,
.dropdown button {
  font-family: var(--nav-font) !important;
}

/* Header fixed */
html, body { height: 100%; }
body { padding-top: var(--header-h); }

.panel-header{
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: #1f1f1f;
  border-bottom: 6px solid #232120;
  z-index: 1000;
}
.logo-img{ height: var(--nav-row-h); width: auto; display:block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }

/* Desktop menu */
.menu.desktop-menu{
  display: flex;
  gap: 16px;
  margin-left: 8px;
  flex: 1 1 auto;
}
.menu.desktop-menu a{
  color:#fff; text-decoration:none;
  font-size: var(--nav-font-size);
  padding: var(--nav-btn-pad-y) var(--nav-btn-pad-x);
  border-radius:6px; transition:.2s;
}
.menu.desktop-menu a:hover{ background:#ff4500; color:#000; }

/* BASE: hamburger nascosto su desktop */
.hamburger{
  display: none;                      /* ⬅️ importante */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: calc(var(--nav-row-h) - 10px);
  padding: var(--nav-btn-pad-y) var(--nav-btn-pad-x);
  font-size: var(--nav-font-size);
  line-height: 1;
  background:#333; color:#fff;
  border:1px solid #444;
  border-radius:6px;
  cursor:pointer;
  -webkit-appearance: none; appearance: none;
}
.hamburger:focus{ outline:2px solid #ff4500; outline-offset:2px; }

/* Mobile menu */
.menu.mobile-menu{
  display:none; position:fixed; top:calc(var(--header-h)); left:0; right:0;
  background:#1f1f1f; border-bottom:1px solid #333; z-index:999;
  padding:8px 10px;
}
.menu.mobile-menu.open,
.menu.mobile-menu.show { display:block; }
.menu.mobile-menu a{
  display:block; padding:10px 12px; color:#fff; text-decoration:none; border-radius:6px;
  font-size: var(--nav-font-size);
}
.menu.mobile-menu a:hover{ background:#ff4500; color:#000; }

/* User menu (panel) — se presente */
.user-menu{
  margin-left: auto;
  display:flex; align-items:center; gap:8px;
  background:#333; color:#fff; padding:8px 12px; border-radius:8px;
  cursor:pointer; position:relative; user-select:none;
}
.user-menu:hover{ background:#ff4500; }
.dropdown{
  display:none; position:absolute; right:0; top:44px; background:#222;
  min-width:140px; border-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,.35); overflow:hidden;
}
.dropdown button{ width:100%; padding:10px; background:none; border:none; color:#fff; text-align:left; cursor:pointer; }
.dropdown button:hover{ background:#ff4500; }

.badge{ display:inline-block; margin-left:6px; padding:2px 8px; font-size:12px; border-radius:999px; background:#2b2b2b; }
.badge.role[data-role="admin"]{ background:#8e44ad }
.badge.role[data-role="premium"]{ background:#16a085 }
.badge.role[data-role="regular"]{ background:#34495e }
.badge.slot{ background:#3b3b3b }

/* MOBILE: mostra hamburger e nascondi menu desktop */
@media (max-width: 900px){
  .hamburger{ display: inline-flex; } /* ⬅️ visibile solo sotto 900px */
  .menu.desktop-menu{ display: none; }
}

/* DESKTOP: assicurati che il menu mobile sia sempre nascosto */
@media (min-width: 901px){
  .menu.mobile-menu{ display: none !important; }
}

/* --- Navbar lock: tipografia/spacing coerenti su tutte le pagine --- */
.panel-header,
.panel-header .menu a,
.panel-header .hamburger {
  font-family: Arial, sans-serif !important;   /* stesso font del sito */
}

.panel-header .menu a {
  font-size: 15px !important;                  /* stessa dimensione ovunque */
  line-height: 1.2 !important;
}

.panel-header .hamburger {
  font-size: 20px !important;                  /* grandezza dell’icona */
  line-height: 1 !important;
  padding: 6px 10px !important;
}

/* --- Anti-overflow globale e box model coerente --- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

/* Evita artefatti su mobile con background fissato */
@media (max-width: 900px){
  body { background-attachment: scroll; }
}

/* Menu mobile: non deve mai “allargare” la pagina */
.menu.mobile-menu{
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Quando il menu è aperto, blocco lo scroll della pagina */
body.menu-open { overflow: hidden; }

/* Focus hamburger: bordo meno invadente su mobile */
.hamburger:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,69,0,.45);
  border-color: rgba(255,69,0,.35);
}

/* === Footer globale (coerente su tutte le pagine) === */
.site-footer{
  margin-top: auto;
  width: 100%;
  background: #222;
  color: #fff;
  padding: 14px 0;          /* stessa altezza delle altre pagine */
  text-align: center;
  font-size: .95rem;
  border-top: 1px solid #444;
}
.site-footer p{ margin: 0; } /* evita margini interni “a sorpresa” */

/* ===== Full-width site announcement (no close) ===== */
#site-announcement-host { width: 100%; margin: 0; }

/* Base: usa SEMPRE le stesse var (--bg, --fg, --accent) */
#site-announcement-host .site-announcement{
  --bg: #991b1b;      /* default = danger */
  --fg: #ffffff;
  --accent: #fecaca;

  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .7rem 1rem;
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid rgba(0,0,0,.2);
}

#site-announcement-host .site-announcement .sa-accent{
  width: 6px; height: 1.2em;
  border-radius: 3px;
  background: var(--accent);
}

#site-announcement-host .site-announcement .sa-title{ font-weight: 800; margin-right: .5rem; }
#site-announcement-host .site-announcement .sa-msg{ line-height: 1.25; }
#site-announcement-host .site-announcement .sa-close{ display: none !important; } /* niente X */

/* Varianti – stesse specificità del base */
#site-announcement-host .site-announcement[data-variant="info"]{
  --bg:#075985;  /* blu scuro leggibile */
  --fg:#ffffff;
  --accent:#38bdf8;
}
#site-announcement-host .site-announcement[data-variant="warning"]{
  --bg:#92400e;  /* arancio scuro */
  --fg:#ffffff;
  --accent:#fdba74;
}
#site-announcement-host .site-announcement[data-variant="danger"]{
  --bg:#991b1b;  /* rosso scuro */
  --fg:#ffffff;
  --accent:#fecaca;
}
#site-announcement-host .site-announcement[data-variant="success"]{
  --bg:#065f46;  /* verde scuro */
  --fg:#ffffff;
  --accent:#34d399;
}

/* /var/www/html/header.css */

/* === CTA “Server Panel” a destra sul DESKTOP === */
.panel-cta{
  /* perché: evidenziare azione principale e staccarla dal menu */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--nav-row-h) - 10px);
  padding: var(--nav-btn-pad-y) calc(var(--nav-btn-pad-x) + 2px);
  background: #ff4500;
  color: #000;
  text-decoration: none;
  font-size: var(--nav-font-size);
  font-weight: 800;
  border-radius: 8px;
  border: 1px solid #ff6a33;
  transition: filter .15s ease, transform .02s ease;
}
.panel-cta:hover{ filter: brightness(1.05); }
.panel-cta:active{ transform: translateY(1px); }
.panel-cta:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,69,0,.45);
  border-color: rgba(255,69,0,.55);
}

/* Mobile: la CTA desktop sparisce, il link è nel menu mobile */
@media (max-width: 900px){
  .panel-cta{ display: none; }
}

/* === Variante mobile nel menu a tendina (aspetti coerenti) === */
.menu.mobile-menu a.panel-cta-mobile{
  font-weight: 800;
  border: 1px solid #444;
  text-align: center;
  margin-top: 6px;
}
.menu.mobile-menu a.panel-cta-mobile:hover{
  background:#ff4500;
  color:#000;
}
/* esempio, se non l’hai già */
.dropdown a.dropdown-item {
  display: block;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  color: inherit;
}
.dropdown a.dropdown-item:hover {
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   Shared user menu + badges (header di tutte le pagine)
   ========================================================= */

.user-menu{
  display:flex;
  align-items:center;
  gap:8px;
  background:#333;
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  position:relative;
  user-select:none;
  border:1px solid #444;
  font-size:14px;
}

.user-menu:hover{
  background:#ff4500;
  color:#000;
}

#user-name{
  max-width:40vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Dropdown comune (admin + account + panel) */
.dropdown{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:#111827;
  min-width:190px;
  border-radius:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  overflow:hidden;
  border:1px solid #2e2e2e;
  z-index:90;
}

.dropdown-item{
  display:block;
  width:100%;
  padding:10px 12px;
  background:none;
  border:0;
  color:#e5e7eb;
  text-align:left;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
}

.dropdown-item:hover{
  background:#ff4500;
  color:#000;
}

/* Se usi <button> dentro .dropdown */
.dropdown button.dropdown-item{
  font-family:inherit;
}

/* Badge header (ruolo / slots) */

.badge{
  display:inline-block;
  margin-left:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  background:#1f2937;
  border:1px solid rgba(148,163,184,.45);
  color:#e5e7eb;
}

/* Ruolo visuale (usa data-role="admin|premium|regular") */
.badge.role[data-role="admin"]{
  background:#8e44ad;
  border-color:#c084fc;
  color:#f9fafb;
}
.badge.role[data-role="premium"]{
  background:#16a085;
  border-color:#6ee7b7;
  color:#ecfeff;
}
.badge.role[data-role="regular"]{
  background:#334155;
  border-color:#64748b;
  color:#e2e8f0;
}

/* badge slots tipo "1/2 slots" */
.badge.slot{
  background:#3b3b3b;
  border-color:#6b7280;
}

/* Posizionamento del pill nel header */
#user-menu{
  margin-left:12px;
}

/* Responsivo: header compatto su mobile */
@media (max-width:900px){
  #user-menu{
    margin-left:8px;
    margin-right:6px;
    padding:6px 8px;
    gap:6px;
    border-radius:10px;
  }
  #user-name{
    max-width:52vw;
    font-size:13px;
  }
  #user-dropdown{
    right:0;
    left:auto;
    top:46px;
  }
}

@media (max-width:360px){
  #user-name{
    max-width:48vw;
    font-size:12px;
  }
  #user-slot-badge{
    font-size:11px;
  }
}