@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;700;900&display=swap');

:root {
  --bg: #060b14;
  --panel: #0b1220;
  --sidebar: #050914;
  --cyan: #00aaff;
  --blue: #006dff;
  --border: #12345c;
  --muted: #9ca8d8;
  --danger: #ff3860;
  --gold: #ffd400;
  --purple: #8d2bd1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at top, #0b1730 0, #060b14 45%, #04070d 100%);
  color: white;
  font-family: Inter, Arial, sans-serif;
}

.hidden { display: none !important; }

.loginOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.86);
  display: grid;
  place-items: center;
  z-index: 50;
}

.loginModal {
  width: 420px;
  max-width: calc(100% - 30px);
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 0 50px rgba(0,170,255,.15);
}

.loginModal h2 {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  margin: 0 0 10px;
}

.serverSelectPage {
  min-height: 100vh;
  padding: 0 8vw 60px;
}

.landingHeader {
  height: 70px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landingBrand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.miniLogo {
  width: 46px;
  height: 46px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-weight: 900;
}

.landingName {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  font-size: 28px;
  font-weight: 900;
}

.landingSub {
  color: var(--muted);
  letter-spacing: 4px;
  font-size: 12px;
}

.landingNav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: Orbitron, sans-serif;
}

.landingNav a {
  color: white;
  text-decoration: none;
}

.serverHero {
  text-align: center;
  margin-top: 70px;
}

.serverHero h1 {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 45px;
}

.searchRow {
  display: flex;
  gap: 16px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto 65px;
}

.searchRow input {
  flex: 1;
}

.serverCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 28px;
}

.serverCard {
  background: rgba(11, 18, 32, .96);
  border: 1px solid #17345e;
  border-radius: 16px;
  min-height: 315px;
  padding: 28px 24px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  box-shadow: 0 12px 35px rgba(0,123,255,.08);
}

.serverIcon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  display: grid;
  place-items: center;
  color: var(--cyan);
  overflow: hidden;
}

.serverIcon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serverCard h3 {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  font-size: 23px;
  margin: 8px 0 0;
}

.serverCard p {
  color: var(--muted);
  margin: 0;
}

.emptyServers {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 22px;
}

.sidebar {
  width: 330px;
  height: 100vh;
  background: var(--sidebar);
  border-right: 5px solid var(--cyan);
  padding: 20px 14px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.brand {
  padding: 0 4px 24px;
  flex-shrink: 0;
}

.brandTitle {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  font-size: 30px;
  font-weight: 900;
}

.brandSub {
  color: #67739a;
  letter-spacing: 5px;
  font-size: 13px;
  margin-left: 34px;
  margin-top: 8px;
}

.userCard {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #1d3155;
  background: #0c1322;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 22px;
  flex-shrink: 0;
}

.avatar, .smallAvatar {
  border: 2px solid var(--cyan);
  color: var(--cyan);
  background: #061426;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.avatar { width: 58px; height: 58px; border-radius: 50%; }
.smallAvatar { width: 42px; height: 42px; border-radius: 50%; font-size: 12px; }

.userName { color: var(--cyan); font-weight: 900; font-size: 18px; }
.userSub { color: #7480a8; margin-top: 4px; }

.miniBox {
  background: #0c1322;
  border: 1px solid #1d3155;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.smallBtn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
}

.menu {
  display: grid;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  padding-bottom: 30px;
  flex: 1;
  min-height: 0;
}

.menu::-webkit-scrollbar { width: 6px; }
.menu::-webkit-scrollbar-track { background: #050914; }
.menu::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 999px; }

.menu a, .menuGroupHead {
  text-decoration: none;
  color: #c6cff5;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px;
  border-radius: 12px;
  font-family: Orbitron, sans-serif;
  letter-spacing: .5px;
  cursor: pointer;
}

.menu a:hover, .menu a.active, .menuGroupHead:hover {
  background: #0d2137;
  color: white;
}

.menu span, .menuGroupHead span {
  color: var(--cyan);
  font-size: 22px;
  width: 28px;
}

.menuGroupHead b {
  margin-left: auto;
  border: 1px solid #298bff;
  color: #8ec5ff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.menuGroupHead em { font-style: normal; margin-left: 10px; }

.submenu {
  display: none;
  background: #101827;
  border-radius: 14px;
  padding: 10px;
  border-left: 4px solid var(--cyan);
}

.menuGroup.open .submenu { display: block; }

.submenu a {
  font-family: Inter, Arial, sans-serif;
  min-height: 48px;
  color: #b6c3ee;
  font-weight: 800;
}

.main {
  margin-left: 330px;
  width: calc(100% - 330px);
  min-height: 100vh;
}

.topbar {
  height: 62px;
  background: #050914;
  border-bottom: 1px solid #162846;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 28px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.breadcrumb {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
}

.topUser {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content {
  max-width: 1520px;
  margin: 0 auto;
  padding: 26px 34px 60px;
  min-height: calc(100vh - 62px);
}

.page { display: none; }
.page.active { display: block; }

.pageTitle { margin-bottom: 28px; }

.pageTitle h1 {
  font-family: Orbitron, sans-serif;
  color: white;
  font-size: 34px;
  margin: 0 0 10px;
}

.pageTitle h1::first-letter { color: var(--cyan); }

.pageTitle p { color: var(--muted); margin: 0; }

.panel, .formCard, .reportDetail {
  background: rgba(11, 18, 32, .96);
  border: 1px solid #17345e;
  border-radius: 18px;
  padding: 26px;
  margin-bottom: 28px;
}

.panel h2 {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  margin: 0 0 22px;
  text-transform: uppercase;
}

.infoBox {
  background: linear-gradient(135deg, #0c2442, #0c1628);
  border-left: 4px solid var(--cyan);
  border-radius: 13px;
  padding: 20px 26px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 700;
}

.formGrid, .roleGrid3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px 30px;
}

.roleGrid3 { grid-template-columns: repeat(3, 1fr); }
.roleGrid1 { display: grid; grid-template-columns: 1fr; gap: 18px; }

label {
  color: var(--muted);
  font-weight: 900;
  font-size: 16px;
}

input, select, textarea {
  width: 100%;
  background: #070d18;
  color: white;
  border: 1px solid #1b3258;
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 12px;
  font-size: 18px;
  outline: none;
  min-height: 58px;
}

input:focus, select:focus, textarea:focus { border-color: var(--cyan); }

button {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: white;
  border: 0;
  border-radius: 18px;
  padding: 14px 28px;
  font-family: Orbitron, sans-serif;
  font-weight: 900;
  cursor: pointer;
  text-transform: uppercase;
}

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.rolesPanel {
  border: 1px solid #174b78;
  border-radius: 12px;
  overflow: hidden;
  background: #07101d;
}

.rolesHead {
  background: #0b2844;
  border-bottom: 1px solid #2b7dbd;
  min-height: 66px;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rolesHead h3 {
  color: var(--cyan);
  margin: 0;
  font-family: Orbitron, sans-serif;
}

.collapseBtn {
  background: transparent;
  color: #9cccff;
  font-size: 24px;
  padding: 0;
}

.roleRow {
  margin: 10px;
  background: #0c1322;
  border: 1px solid #12345c;
  border-radius: 14px;
  overflow: hidden;
}

.roleHeader {
  min-height: 66px;
  padding: 15px 22px;
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  align-items: center;
}

.toggle {
  width: 58px;
  height: 30px;
  border-radius: 999px;
  background: #252638;
  position: relative;
  cursor: pointer;
}

.toggle::after {
  content: "";
  width: 22px;
  height: 22px;
  background: #f2f4ff;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 5px;
  transition: all .18s ease;
}

.toggle.on { background: var(--cyan); }
.toggle.on::after { left: 31px; }

.roleName { font-size: 20px; color: white; font-weight: 900; }
.roleSummary { color: #66708c; font-weight: 800; margin-left: 8px; }
.chev { color: var(--cyan); font-size: 24px; text-align: right; cursor: pointer; }
.roleBody { display: none; padding: 0 16px 18px; }
.roleRow.open .roleBody { display: block; }

.roleBox {
  border: 1px solid #12345c;
  background: #070d18;
  border-radius: 14px;
  padding: 18px;
}

.roleSectionTitle {
  color: var(--cyan);
  font-weight: 900;
  margin: 20px 0 12px;
  text-transform: uppercase;
}

.list, .cardsList {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.item, .infoCard {
  background: #07101d;
  border: 1px solid #17345e;
  padding: 16px;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.statCard {
  min-height: 92px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid #155d8f;
  background: #07101d;
}

.statCard b {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: var(--cyan);
}

.statCard span { color: #d5d8ee; font-size: 14px; }

.tableWrap { overflow-x: auto; }

table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #070d18;
}

th {
  background: #0b2844;
  color: white;
}

td, th {
  border: 1px solid #0e5f9a;
  padding: 14px;
  text-align: center;
  font-weight: 800;
}

td:last-child { color: var(--cyan); font-weight: 900; }

@media (max-width: 1150px) {
  .serverCards { grid-template-columns: repeat(2, 1fr); }
  .statGrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .serverSelectPage { padding: 0 18px 40px; }
  .serverHero h1 { font-size: 34px; }
  .searchRow { flex-direction: column; }
  .serverCards { grid-template-columns: 1fr; }

  .sidebar {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .main {
    margin-left: 0;
    width: 100%;
  }

  .formGrid,
  .roleGrid3,
  .statGrid {
    grid-template-columns: 1fr;
  }
}


.invoiceToolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.invoiceTableWrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #17345e;
}

.invoiceTable {
  min-width: 1180px;
  width: 100%;
  border-collapse: collapse;
  background: #11131c;
}

.invoiceTable th {
  color: var(--cyan);
  text-transform: uppercase;
  font-family: Orbitron, sans-serif;
  font-size: 13px;
  letter-spacing: .8px;
  background: #1a1b25;
  border: 0;
  border-bottom: 1px solid #2c2d3a;
  padding: 16px 12px;
  text-align: left;
}

.invoiceTable td {
  border: 0;
  border-bottom: 1px solid #242635;
  padding: 14px 12px;
  text-align: left;
  color: #e7e9f5;
  font-weight: 800;
}

.invoiceTable tr:hover td {
  background: rgba(0, 170, 255, .04);
}

.userCell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fakeAvatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--cyan);
  background: #07101d;
  color: var(--cyan);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.invoiceCode {
  background: rgba(0, 170, 255, .13);
  color: var(--cyan);
  border: 1px solid rgba(0, 170, 255, .25);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
}

.invoiceType {
  background: #9b4dff;
  color: white;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
}

.iconBtn {
  width: 42px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  margin-right: 8px;
  font-family: Inter, Arial, sans-serif;
}

.editBtn {
  background: rgba(0, 128, 255, .16);
  color: #4aa3ff;
  border: 1px solid #1766b1;
}

.deleteBtn {
  background: rgba(255, 56, 96, .16);
  color: #ff4d75;
  border: 1px solid #9c2440;
}

.emptyRow {
  text-align: center !important;
  color: var(--muted) !important;
  padding: 28px !important;
}

.mutedText {
  color: #7f8498;
  font-size: 12px;
}


.quickButtonsPanel {
  border-color: rgba(0, 214, 189, .45);
}

.quickButtonsPanel h2 {
  color: #00d6bd;
  margin-left: 24px;
}

.quickButtonsHead,
.quickButtonRow {
  display: grid;
  grid-template-columns: 220px minmax(280px, 1.3fr) minmax(180px, .8fr) minmax(180px, .8fr);
  gap: 16px;
  align-items: center;
}

.quickButtonsHead {
  color: #00d6bd;
  font-family: Orbitron, sans-serif;
  font-weight: 900;
  margin: 10px 0;
  padding: 0 8px;
}

.quickButtonRow {
  margin-bottom: 14px;
}

.quickButtonRow label {
  text-align: right;
  color: #00d6bd;
  font-family: Orbitron, sans-serif;
  font-weight: 900;
}

.quickButtonRow input,
.quickButtonRow select {
  margin-top: 0;
  border-color: rgba(0, 214, 189, .36);
}

.turnFilters {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(200px, .75fr) minmax(200px, .75fr);
  gap: 16px;
  margin-bottom: 22px;
}

.searchInput {
  display: flex;
  align-items: center;
  background: #11131c;
  border: 1px solid #242635;
  border-radius: 10px;
  overflow: hidden;
}

.searchInput span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #00d6bd;
  background: rgba(0, 214, 189, .12);
}

.searchInput input {
  border: 0;
  margin: 0;
  border-radius: 0;
  min-height: 48px;
}

.turnFilters select {
  margin: 0;
  min-height: 48px;
  border-color: #242635;
  background: #11131c;
}

.showingBar {
  background: #123033;
  border-left: 4px solid #00d6bd;
  color: white;
  border-radius: 10px;
  padding: 16px 22px;
  font-weight: 900;
  margin-bottom: 16px;
}

.turnTablePanel {
  padding: 0;
  overflow: hidden;
}

.turnTableWrap {
  overflow-x: auto;
}

.turnTable {
  min-width: 1180px;
  width: 100%;
  border-collapse: collapse;
  background: #171820;
}

.turnTable th {
  background: #1d1d27;
  color: #00d6bd;
  border: 0;
  border-bottom: 1px solid #2c2d3a;
  text-align: left;
  text-transform: uppercase;
  font-family: Orbitron, sans-serif;
  font-size: 13px;
  letter-spacing: .8px;
  padding: 16px 14px;
}

.turnTable td {
  border: 0;
  border-bottom: 1px solid #2a2b35;
  text-align: left;
  padding: 16px 14px;
  color: #e7e9f5;
  font-weight: 800;
}

.turnId {
  color: #c0c1cc;
  font-family: monospace;
  font-size: 13px;
}

.turnCount {
  color: #00d6bd !important;
  font-weight: 900 !important;
}

.modifyShiftBtn {
  background: #00c7ad;
  color: #051312;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 12px;
  margin-right: 8px;
}

@media (max-width: 980px) {
  .quickButtonsHead {
    display: none;
  }

  .quickButtonRow {
    grid-template-columns: 1fr;
    background: #101827;
    border: 1px solid #17345e;
    border-radius: 14px;
    padding: 14px;
  }

  .quickButtonRow label {
    text-align: left;
  }

  .turnFilters {
    grid-template-columns: 1fr;
  }
}


/* FIX TOGGLE RUOLI */
.toggle {
  border: 0 !important;
  padding: 0 !important;
  min-height: 30px !important;
  display: block !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer !important;
  flex-shrink: 0;
}

.toggle:hover {
  filter: brightness(1.25);
  box-shadow: 0 0 14px rgba(0, 170, 255, .35);
}

.chevBtn {
  background: transparent !important;
  border: 0 !important;
  color: var(--cyan) !important;
  font-size: 20px !important;
  padding: 0 !important;
  min-height: 34px !important;
  width: 34px !important;
  cursor: pointer !important;
}

.statusBox {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-weight: 900;
  line-height: 1.45;
}

.statusBox.active {
  background: rgba(0, 170, 255, .12);
  border: 1px solid rgba(0, 170, 255, .45);
  color: #9bd6ff;
}

.statusBox.inactive {
  background: rgba(255, 56, 96, .10);
  border: 1px solid rgba(255, 56, 96, .35);
  color: #ff9aae;
}

button.danger {
  background: rgba(255, 56, 96, .16) !important;
  color: #ff6b8b !important;
  border: 1px solid rgba(255, 56, 96, .45) !important;
}


/* FIX DEFINITIVO SWITCH RUOLI - checkbox reale */
.roleHeader {
  position: relative;
}

.roleSwitch {
  width: 58px !important;
  height: 30px !important;
  display: inline-block !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

.roleSwitch input {
  opacity: 0 !important;
  width: 58px !important;
  height: 30px !important;
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}

.roleSwitch span {
  position: absolute !important;
  inset: 0 !important;
  background: #252638 !important;
  border-radius: 999px !important;
  transition: .18s ease !important;
  pointer-events: none !important;
}

.roleSwitch span::after {
  content: "" !important;
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  left: 5px !important;
  top: 4px !important;
  background: #f2f4ff !important;
  transition: .18s ease !important;
}

.roleSwitch input:checked + span {
  background: var(--cyan) !important;
}

.roleSwitch input:checked + span::after {
  left: 31px !important;
}

.roleSwitch:hover span {
  filter: brightness(1.2);
  box-shadow: 0 0 14px rgba(0, 170, 255, .35);
}

.roleHeader > .toggle {
  display: none !important;
}

.chevBtn {
  background: transparent !important;
  border: 0 !important;
  color: var(--cyan) !important;
  font-size: 20px !important;
  padding: 0 !important;
  min-height: 34px !important;
  width: 34px !important;
  cursor: pointer !important;
}

.statusBox {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-weight: 900;
  line-height: 1.45;
}

.statusBox.active {
  background: rgba(0, 170, 255, .12);
  border: 1px solid rgba(0, 170, 255, .45);
  color: #9bd6ff;
}

.statusBox.inactive {
  background: rgba(255, 56, 96, .10);
  border: 1px solid rgba(255, 56, 96, .35);
  color: #ff9aae;
}


/* RESOCONTO COMPLETO STILE ACTIVITYMANAGER */
.reportDetailFull {
  background: rgba(8, 12, 22, .98);
  border: 1px solid #12345c;
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 40px;
  overflow-x: hidden;
}

.reportHero {
  border: 1px solid var(--cyan);
  border-radius: 12px;
  background: linear-gradient(135deg, #0b2444, #071424);
  padding: 28px;
  margin-bottom: 28px;
}

.reportHero h2 {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  font-size: 38px;
  margin: 0;
  text-transform: none;
}

.reportHero p {
  color: #8d99ba;
  margin-top: 12px;
}

.reportStatsGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.reportStat {
  min-height: 92px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid #155d8f;
  background: #07101d;
}

.reportStat b {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: var(--cyan);
}

.reportStat span {
  color: #d5d8ee;
  font-size: 14px;
}

.reportStat.red b { color: #ff536a; }
.reportStat.blue b { color: #008cff; }
.reportStat.purple b { color: var(--purple); }
.reportStat.gold b { color: var(--gold); }

.reportSectionTitle,
.advancedTitle {
  color: var(--cyan);
  font-size: 30px;
  font-family: Inter, Arial, sans-serif;
  margin: 0 0 12px;
  text-transform: none;
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 12px;
}

.reportTableWrap {
  overflow-x: auto;
  margin-bottom: 24px;
}

.reportSummaryTable,
.employeeReportTable {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  background: #070d18;
}

.reportSummaryTable th,
.employeeReportTable th {
  background: #0b2844;
  color: white;
}

.reportSummaryTable td,
.reportSummaryTable th,
.employeeReportTable td,
.employeeReportTable th {
  border: 1px solid #0e5f9a;
  padding: 14px;
  text-align: center;
  font-weight: 800;
}

.employeeReportTable td:last-child,
.cyanValue {
  color: var(--cyan);
  font-weight: 900;
}

.weeklyResultBox {
  border: 1px solid var(--cyan);
  border-radius: 14px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 190px;
  margin-bottom: 28px;
}

.weeklyResultBox h2 {
  color: var(--cyan);
  font-size: 30px;
  font-family: Inter, Arial, sans-serif;
  text-transform: none;
}

.weeklyResultBox h3 {
  color: var(--cyan);
  font-size: 23px;
}

.cleanTurnoverBox p {
  color: #8d99ba;
  font-size: 13px;
  margin-top: 12px;
}

.bigMoney {
  font-size: 26px;
  font-weight: 900;
}

.cyanText { color: var(--cyan); }
.blueText { color: #008cff !important; }

.profitBox {
  border: 2px solid var(--cyan);
  border-radius: 16px;
  padding: 34px;
  background: radial-gradient(circle at center, rgba(0,170,255,.18), rgba(0,82,255,.12), rgba(6,10,18,.6));
  text-align: center;
  margin-bottom: 28px;
}

.profitLabel {
  color: var(--cyan);
  font-family: Orbitron, sans-serif;
  letter-spacing: 5px;
  font-weight: 900;
}

.profitAmount {
  color: var(--cyan);
  font-size: 58px;
  font-weight: 900;
  margin: 28px 0;
}

.profitStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}

.profitStats div,
.advancedGrid div {
  min-height: 92px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid #155d8f;
  background: #07101d;
}

.profitStats b,
.advancedGrid b {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--cyan);
}

.profitStats span,
.advancedGrid span {
  color: #a5a8b8;
  font-size: 13px;
}

.progressBar {
  height: 14px;
  border-radius: 999px;
  background: #06151b;
  overflow: hidden;
  margin: 12px 0;
}

.progressBar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 999px;
}

.profitStatus {
  font-weight: 900;
}

.bestEmployeeBox {
  border: 1px solid var(--gold);
  background: #1d1a0e;
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  margin-bottom: 28px;
}

.bestEmployeeBox h2 {
  color: var(--gold);
  font-family: Inter, Arial, sans-serif;
  font-size: 30px;
  text-transform: none;
  margin: 0 0 14px;
}

.bestEmployeeBox h3 {
  font-size: 24px;
  margin: 0 0 14px;
}

.advancedGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

@media (max-width: 1150px) {
  .reportStatsGrid,
  .profitStats,
  .advancedGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .weeklyResultBox {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .reportStatsGrid,
  .profitStats,
  .advancedGrid {
    grid-template-columns: 1fr;
  }
}


/* FILTRI FATTURE */
.invoiceFilters{display:grid;grid-template-columns:minmax(280px,1.4fr) minmax(180px,.7fr) minmax(180px,.7fr) minmax(180px,.7fr) minmax(180px,.7fr);gap:16px;margin-bottom:22px}.invoiceFilters select{margin:0;min-height:48px;border-color:#242635;background:#11131c}.invoicePanel{padding:0;overflow:hidden}.searchInput{display:flex;align-items:center;background:#11131c;border:1px solid #242635;border-radius:10px;overflow:hidden}.searchInput span{width:48px;height:48px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,170,255,.12)}.searchInput input{border:0;margin:0;border-radius:0;min-height:48px}.showingBar{background:#123033;border-left:4px solid var(--cyan);color:white;border-radius:10px;padding:16px 22px;font-weight:900;margin-bottom:16px}.invoiceTableWrap{overflow-x:auto;border-radius:14px}.invoiceTable{min-width:1180px;width:100%;border-collapse:collapse;background:#11131c}.invoiceTable th{color:var(--cyan);text-transform:uppercase;font-family:Orbitron,sans-serif;font-size:13px;letter-spacing:.8px;background:#1a1b25;border:0;border-bottom:1px solid #2c2d3a;padding:16px 12px;text-align:left}.invoiceTable td{border:0;border-bottom:1px solid #242635;padding:14px 12px;text-align:left;color:#e7e9f5;font-weight:800}.invoiceTable tr:hover td{background:rgba(0,170,255,.04)}.userCell{display:flex;align-items:center;gap:10px}.fakeAvatar{width:34px;height:34px;border-radius:999px;border:1px solid var(--cyan);background:#07101d;color:var(--cyan);display:grid;place-items:center;font-size:12px;font-weight:900}.invoiceCode{background:rgba(0,170,255,.13);color:var(--cyan);border:1px solid rgba(0,170,255,.25);border-radius:6px;padding:5px 8px;font-size:12px}.invoiceType{background:#9b4dff;color:white;border-radius:999px;padding:6px 12px;font-size:12px}.iconBtn{width:42px;height:34px;padding:0;border-radius:9px;margin-right:8px;font-family:Inter,Arial,sans-serif}.editBtn{background:rgba(0,128,255,.16);color:#4aa3ff;border:1px solid #1766b1}.deleteBtn{background:rgba(255,56,96,.16);color:#ff4d75;border:1px solid #9c2440}.emptyRow{text-align:center!important;color:var(--muted)!important;padding:28px!important}@media(max-width:1200px){.invoiceFilters{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.invoiceFilters{grid-template-columns:1fr}}


/* DETTAGLI TOTALI SETTIMANALI */
.detailTotalsPanel h2 {
  color: var(--cyan);
  font-family: Orbitron, sans-serif;
  margin-bottom: 18px;
}

.totalSearchRow {
  margin-bottom: 16px;
}

.totalSearchRow input {
  max-width: 420px;
}

.totalsDetailTable {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  background: #070d18;
}

.totalsDetailTable th {
  background: #0b2844;
  color: white;
}

.totalsDetailTable td,
.totalsDetailTable th {
  border: 1px solid #0e5f9a;
  padding: 14px;
  text-align: center;
  font-weight: 800;
}

.totalsDetailTable td:last-child {
  color: var(--cyan);
  font-weight: 900;
}

.weeklyReportsList {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.historyReportItem {
  background: #07101d;
  border: 1px solid #17345e;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.historyReportItem b {
  color: var(--cyan);
  display: block;
  margin-bottom: 6px;
}

.historyReportItem span {
  color: var(--muted);
}

.historyReportItem div:last-child {
  display: flex;
  gap: 8px;
}

button.danger {
  background: rgba(255, 56, 96, .16) !important;
  color: #ff6b8b !important;
  border: 1px solid rgba(255, 56, 96, .45) !important;
}

@media (max-width: 760px) {
  .historyReportItem {
    display: grid;
  }
}


/* RESOCONTI SETTIMANALI COME SCREENSHOT */
.resocontiWeeklyPanel {
  background: rgba(18, 19, 28, .96);
  border: 1px solid #2b2c39;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 28px;
}

.resocontiWeeklyPanel h2 {
  font-family: Orbitron, sans-serif;
  color: var(--cyan);
  margin: 0 0 20px;
  font-size: 25px;
}

.resocontiActions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.createReportBtn {
  background: linear-gradient(135deg, #00d6bd, #00a8ff) !important;
  color: #041012 !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
}

.deleteAllReportsBtn {
  background: rgba(255, 75, 90, .14) !important;
  border: 1px solid rgba(255, 75, 90, .55) !important;
  color: #ff6878 !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
}

.weeklyReportsAccordion {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.weeklyReportRow {
  display: grid;
  grid-template-columns: 1fr 46px 46px;
  align-items: stretch;
  min-height: 58px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.weeklyReportRow.selected .weeklyReportMain,
.weeklyReportRow.open .weeklyReportMain {
  outline: 2px solid rgba(0, 128, 255, .45);
  background: rgba(0, 128, 255, .06) !important;
}

.weeklyReportMain {
  width: 100%;
  min-height: 58px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cyan) !important;
  padding: 0 18px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: Orbitron, sans-serif;
  font-weight: 900;
}

.weeklyCalendar {
  color: var(--cyan);
  font-size: 18px;
}

.weeklyTitle {
  font-size: 17px;
}

.weeklyEmployees {
  color: #00b99f;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  margin-left: 4px;
}

.weeklyChevron {
  margin-left: auto;
  color: white;
  font-size: 20px;
  transform: rotate(0deg);
  transition: .18s;
}

.weeklyReportRow.open .weeklyChevron {
  transform: rotate(180deg);
}

.weeklyToolBtn,
.weeklyDeleteBtn {
  width: 38px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  align-self: center;
  justify-self: center;
  font-family: Inter, Arial, sans-serif !important;
}

.weeklyToolBtn {
  background: rgba(255, 193, 7, .16) !important;
  border: 1px solid #ffc107 !important;
  color: #ffc107 !important;
}

.weeklyDeleteBtn {
  background: rgba(255, 75, 90, .16) !important;
  border: 1px solid #ff4b5c !important;
  color: #ff4b5c !important;
}

.weeklyReportDetails {
  grid-column: 1 / -1;
  display: none;
  background: #070d18;
  border-left: 3px solid var(--cyan);
  padding: 18px;
}

.weeklyReportRow.open .weeklyReportDetails {
  display: block;
}

.weeklyMiniStats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.weeklyMiniStats div {
  background: #0b1220;
  border: 1px solid #17345e;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.weeklyMiniStats b {
  display: block;
  color: var(--cyan);
  font-size: 21px;
}

.weeklyMiniStats span {
  color: var(--muted);
  font-size: 12px;
}

.weeklyMiniTableWrap {
  overflow-x: auto;
}

.weeklyMiniTable {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.weeklyMiniTable th {
  background: #0b2844;
  color: white;
}

.weeklyMiniTable th,
.weeklyMiniTable td {
  border: 1px solid #0e5f9a;
  padding: 10px;
  text-align: center;
  font-weight: 800;
}

.weeklyMiniActions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.weeklyReportEmpty {
  background: #07101d;
  border: 1px solid #17345e;
  border-radius: 12px;
  padding: 18px;
}

.weeklyReportEmpty b {
  color: var(--cyan);
  display: block;
  margin-bottom: 6px;
}

.weeklyReportEmpty span {
  color: var(--muted);
}

@media (max-width: 900px) {
  .weeklyMiniStats {
    grid-template-columns: repeat(2, 1fr);
  }

  .weeklyReportMain {
    gap: 8px;
  }

  .weeklyTitle {
    font-size: 14px;
  }

  .weeklyEmployees {
    display: none;
  }
}


.resetWeeklyBtn {
  background: rgba(255, 193, 7, .16) !important;
  border: 1px solid #ffc107 !important;
  color: #ffc107 !important;
  border-radius: 999px !important;
  padding: 14px 34px !important;
}

button.danger {
  background: rgba(255, 56, 96, .16) !important;
  color: #ff6b8b !important;
  border: 1px solid rgba(255, 56, 96, .45) !important;
}


/* FIX CHIUSURA COMPLETA RESOCONTO */
#reportDetail.reportHidden {
  display: none !important;
}

.weeklyReportRow:not(.open) .weeklyReportDetails {
  display: none !important;
}


/* FIX RESOCONTO DETTAGLIATO STIPENDI */
#reportDetail {
  width: 100%;
}

#reportDetail.reportHidden {
  display: none !important;
}

.employeeReportTable {
  width: 100% !important;
  min-width: 1450px !important;
  table-layout: fixed;
  font-size: 13px !important;
}

.employeeReportTable th {
  background: #073d35 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  padding: 13px 10px !important;
}

.employeeReportTable td {
  color: #e8ebf7 !important;
  font-weight: 800 !important;
  padding: 12px 10px !important;
  word-break: break-word;
}

.employeeReportTable td:last-child {
  color: var(--cyan) !important;
  font-weight: 1000 !important;
}

.employeeReportTable th:last-child {
  background: #086d61 !important;
}

.reportTableWrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(0, 214, 189, .35);
}

.advancedTitle {
  margin-top: 24px !important;
  color: var(--cyan) !important;
}

.employeesWithoutPayBox {
  margin-top: 22px;
  border: 1px solid rgba(255, 193, 7, .5);
  background: rgba(255, 193, 7, .08);
  border-radius: 12px;
  padding: 16px;
}

.employeesWithoutPayBox h3 {
  color: #ffc107;
  margin: 0 0 8px;
}

.employeesWithoutPayBox p {
  margin: 0;
  color: #e8ebf7;
}

.weeklyMiniActions button {
  background: linear-gradient(135deg, #00a8ff, #007bff) !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 12px 22px !important;
}


/* MIGLIORIA GRAFICA GENERALE + NAVIGAZIONE */
:root {
  --sidebar-w: 318px;
  --bg-main: #050b15;
  --panel-soft: rgba(11, 22, 38, .86);
  --line-blue: rgba(0, 149, 255, .35);
  --glow-blue: 0 0 22px rgba(0, 149, 255, .22);
}

body {
  background:
    radial-gradient(circle at top left, rgba(0, 149, 255, .14), transparent 32%),
    radial-gradient(circle at bottom right, rgba(0, 214, 189, .08), transparent 35%),
    var(--bg-main) !important;
}

.sidebar,
aside {
  width: var(--sidebar-w) !important;
  background: linear-gradient(180deg, #061123 0%, #030814 100%) !important;
  border-right: 2px solid rgba(0, 149, 255, .75) !important;
  box-shadow: 12px 0 34px rgba(0, 0, 0, .28);
}

.main,
main,
.content {
  margin-left: var(--sidebar-w);
}

.logo,
.brand,
.sidebar h1 {
  color: var(--cyan) !important;
  text-shadow: 0 0 18px rgba(0, 149, 255, .45);
}

.userCard,
.serverBox,
.navGroup,
.panel,
.statCard,
.infoCard {
  background: var(--panel-soft) !important;
  border: 1px solid var(--line-blue) !important;
  box-shadow: var(--glow-blue);
  backdrop-filter: blur(10px);
}

.navItem,
.navGroup > button,
.subNav button {
  border-radius: 12px !important;
  transition: .18s ease !important;
}

.navItem:hover,
.navGroup > button:hover,
.subNav button:hover {
  background: rgba(0, 149, 255, .14) !important;
  transform: translateX(3px);
}

.navItem.active,
.navGroup > button.active,
.subNav button.active,
.subNav .active {
  background: linear-gradient(90deg, rgba(0, 149, 255, .22), rgba(0, 214, 189, .08)) !important;
  border-left: 4px solid var(--cyan) !important;
  color: #fff !important;
}

.topbar,
.header {
  background: rgba(5, 11, 21, .92) !important;
  border-bottom: 1px solid var(--line-blue) !important;
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
}

button:hover {
  filter: brightness(1.13);
  transform: translateY(-1px);
}

.invoiceTable tr:hover td,
.turnTable tr:hover td,
.employeeReportTable tr:hover td {
  background: rgba(0, 149, 255, .07) !important;
}


/* UI MODERNA NETGESTIONALE */
.ngHidePlan,
.badge,
.planBadge,
span[class*="plan"],
span[class*="badge"]{display:none!important}

:root{
  --ng-bg:#030914;--ng-panel:rgba(8,18,34,.92);--ng-line:rgba(0,154,255,.32);
  --ng-cyan:#00a8ff;--ng-cyan2:#00e0ff;--ng-muted:#8fa7c6;
  --ng-shadow:0 18px 50px rgba(0,0,0,.35),0 0 24px rgba(0,168,255,.08)
}
html,body{background:radial-gradient(circle at 18% 8%,rgba(0,168,255,.14),transparent 34%),linear-gradient(180deg,#020711,#04101e 60%,#020711)!important;color:#eef6ff!important}
#sidebar,.sidebar,aside{background:linear-gradient(180deg,rgba(4,13,27,.98),rgba(2,7,15,.98))!important;border-right:1px solid rgba(0,170,255,.75)!important;box-shadow:14px 0 40px rgba(0,0,0,.35),0 0 22px rgba(0,168,255,.12)!important}
.logo,.brand,#sidebar h1,.sidebar h1{color:var(--ng-cyan)!important;text-shadow:0 0 18px rgba(0,168,255,.45)}
.userCard,.serverBox,.panel,.statCard,.infoCard,.card,section[class*="panel"]{background:linear-gradient(180deg,var(--ng-panel),rgba(6,14,27,.88))!important;border:1px solid var(--ng-line)!important;border-radius:18px!important;box-shadow:var(--ng-shadow)!important}
.navGroup>button,.navItem,.subNav button{min-height:48px!important;border-radius:13px!important;transition:.16s!important;justify-content:flex-start!important;gap:12px!important}
.navGroup>button:hover,.navItem:hover,.subNav button:hover{background:rgba(0,168,255,.12)!important;transform:translateX(3px)}
.navGroup>button.active,.navItem.active,.subNav button.active,.subNav .active{background:linear-gradient(90deg,rgba(0,168,255,.22),rgba(0,224,255,.06))!important;border-left:4px solid var(--ng-cyan)!important;color:white!important}
.topbar,.header,#topbar{background:rgba(3,9,20,.92)!important;border-bottom:1px solid var(--ng-line)!important;backdrop-filter:blur(14px)}
button,.btn,input[type="button"]{border-radius:13px!important;transition:.14s!important}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.12);box-shadow:0 0 22px rgba(0,168,255,.20)}
input,select,textarea{background:rgba(3,10,20,.92)!important;border:1px solid rgba(0,168,255,.28)!important;border-radius:13px!important;color:white!important}
input:focus,select:focus,textarea:focus{border-color:var(--ng-cyan)!important;box-shadow:0 0 0 3px rgba(0,168,255,.14)!important;outline:none!important}
th{background:linear-gradient(180deg,rgba(0,168,255,.22),rgba(0,224,255,.09))!important;color:#f5fbff!important}
td,th{border-color:rgba(0,168,255,.22)!important}
tr:hover td{background:rgba(0,168,255,.055)!important}
.ngHomeDashboard{width:100%;margin-top:28px}
.ngHeroPanel{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:28px;border:1px solid var(--ng-line);border-radius:24px;background:linear-gradient(135deg,rgba(0,168,255,.16),rgba(0,224,255,.05)),rgba(5,15,29,.92);box-shadow:var(--ng-shadow)}
.ngHeroPanel h2{margin:12px 0 8px;font-size:34px;color:white}.ngHeroPanel p{margin:0;color:var(--ng-muted)}
.ngStatusPill{display:inline-flex;color:#70ffb8;background:rgba(22,163,74,.13);border:1px solid rgba(112,255,184,.35);border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px;letter-spacing:1px}
.ngHeroActions{display:flex;gap:12px;flex-wrap:wrap}.ngHeroActions button{padding:13px 18px!important;background:linear-gradient(135deg,#00a8ff,#007bff)!important;color:white!important;border:0!important}
.ngKpiGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:18px 0}
.ngKpi{padding:22px;border:1px solid var(--ng-line);border-radius:18px;background:rgba(4,12,24,.88);text-align:center;box-shadow:var(--ng-shadow)}
.ngKpi b{display:block;color:var(--ng-cyan);font-size:30px;margin-bottom:8px}.ngKpi span{color:var(--ng-muted);font-weight:800}
.ngHomeGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ngInfoPanel{padding:22px;border:1px solid var(--ng-line);border-radius:20px;background:rgba(4,12,24,.9);box-shadow:var(--ng-shadow)}
.ngInfoPanel h3{margin:0 0 18px;color:var(--ng-cyan);font-size:20px}
.ngProgressLine{height:10px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;margin-bottom:16px}.ngProgressLine i{display:block;height:100%;background:linear-gradient(90deg,#00a8ff,#00e0ff);border-radius:99px}
.ngCheckRow{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(0,168,255,.12)}.ngCheckRow:last-child{border-bottom:0}.ngCheckRow em{font-style:normal;color:var(--ng-muted)}.ngCheckRow.ok em{color:#70ffb8}.ngCheckRow.missing em{color:#ffc857}
.ngLastReport{display:grid;gap:12px}.ngLastReport b{color:white;font-size:18px}.ngLastReport span{color:var(--ng-muted)}.ngLastReport button{width:fit-content;padding:11px 16px!important;background:rgba(0,168,255,.18)!important;color:white!important;border:1px solid var(--ng-line)!important}
@media(max-width:1200px){.ngKpiGrid{grid-template-columns:repeat(2,1fr)}.ngHomeGrid,.ngHeroPanel{grid-template-columns:1fr;display:grid}}@media(max-width:700px){.ngKpiGrid{grid-template-columns:1fr}.ngHeroPanel h2{font-size:25px}}