:root,
html[data-theme="light"] {
  color-scheme: light;
  --rsgt-bg: #f4f7f9;
  --rsgt-surface: #ffffff;
  --rsgt-surface-soft: #f8fafb;
  --rsgt-surface-raised: #ffffff;
  --rsgt-text: #17232b;
  --rsgt-muted: #64747f;
  --rsgt-border: #dce5e9;
  --rsgt-border-strong: #c8d5da;
  --rsgt-brand: #28677a;
  --rsgt-brand-strong: #194f61;
  --rsgt-brand-soft: #e7f1f4;
  --rsgt-success: #16805f;
  --rsgt-warning: #b46612;
  --rsgt-danger: #c2414d;
  --rsgt-focus: rgba(40, 103, 122, .2);
  --rsgt-shadow: 0 1px 2px rgba(23, 35, 43, .04), 0 8px 24px rgba(23, 35, 43, .06);
  --rsgt-shadow-lg: 0 18px 48px rgba(23, 35, 43, .13);

  --bg: var(--rsgt-bg);
  --bg-soft: var(--rsgt-surface-soft);
  --card: var(--rsgt-surface);
  --card-2: var(--rsgt-surface);
  --text: var(--rsgt-text);
  --muted: var(--rsgt-muted);
  --brand: var(--rsgt-brand);
  --brand-2: var(--rsgt-brand-strong);
  --club: var(--rsgt-brand);
  --b: var(--rsgt-border);
  --b-soft: var(--rsgt-border);
  --table-head: #eef4f6;
  --table-row: var(--rsgt-surface);
  --shadow: var(--rsgt-shadow);
  --shadow-lg: var(--rsgt-shadow-lg);
  --radius: 14px;
  --r: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --rsgt-bg: #0f171c;
  --rsgt-surface: #172229;
  --rsgt-surface-soft: #1c2931;
  --rsgt-surface-raised: #203039;
  --rsgt-text: #edf4f6;
  --rsgt-muted: #a6b6bd;
  --rsgt-border: #30434c;
  --rsgt-border-strong: #415862;
  --rsgt-brand: #72b5c8;
  --rsgt-brand-strong: #9bcbd7;
  --rsgt-brand-soft: #193641;
  --rsgt-success: #62c6a2;
  --rsgt-warning: #f0b564;
  --rsgt-danger: #f0838b;
  --rsgt-focus: rgba(114, 181, 200, .24);
  --rsgt-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 12px 30px rgba(0, 0, 0, .22);
  --rsgt-shadow-lg: 0 22px 56px rgba(0, 0, 0, .34);
  --bg: var(--rsgt-bg);
  --bg-soft: var(--rsgt-surface-soft);
  --card: var(--rsgt-surface);
  --card-2: var(--rsgt-surface);
  --text: var(--rsgt-text);
  --muted: var(--rsgt-muted);
  --brand: var(--rsgt-brand);
  --brand-2: var(--rsgt-brand-strong);
  --club: var(--rsgt-brand);
  --b: var(--rsgt-border);
  --b-soft: var(--rsgt-border);
  --table-head: #203039;
  --table-row: var(--rsgt-surface);
  --shadow: var(--rsgt-shadow);
  --shadow-lg: var(--rsgt-shadow-lg);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --rsgt-bg: #0f171c;
    --rsgt-surface: #172229;
    --rsgt-surface-soft: #1c2931;
    --rsgt-surface-raised: #203039;
    --rsgt-text: #edf4f6;
    --rsgt-muted: #a6b6bd;
    --rsgt-border: #30434c;
    --rsgt-border-strong: #415862;
    --rsgt-brand: #72b5c8;
    --rsgt-brand-strong: #9bcbd7;
    --rsgt-brand-soft: #193641;
    --rsgt-success: #62c6a2;
    --rsgt-warning: #f0b564;
    --rsgt-danger: #f0838b;
    --rsgt-focus: rgba(114, 181, 200, .24);
    --rsgt-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 12px 30px rgba(0, 0, 0, .22);
    --rsgt-shadow-lg: 0 22px 56px rgba(0, 0, 0, .34);
    --bg: var(--rsgt-bg);
    --bg-soft: var(--rsgt-surface-soft);
    --card: var(--rsgt-surface);
    --card-2: var(--rsgt-surface);
    --text: var(--rsgt-text);
    --muted: var(--rsgt-muted);
    --brand: var(--rsgt-brand);
    --brand-2: var(--rsgt-brand-strong);
    --club: var(--rsgt-brand);
    --b: var(--rsgt-border);
    --b-soft: var(--rsgt-border);
    --table-head: #203039;
    --table-row: var(--rsgt-surface);
    --shadow: var(--rsgt-shadow);
    --shadow-lg: var(--rsgt-shadow-lg);
  }
}

html {
  background: var(--rsgt-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--rsgt-bg) !important;
  color: var(--rsgt-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px;
  line-height: 1.55;
  min-width: 0;
  overflow-x: hidden;
}

body::before {
  opacity: .035 !important;
}

button,
input,
select,
textarea {
  font-family: inherit !important;
}

a {
  color: var(--rsgt-brand);
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  color: var(--rsgt-text);
  letter-spacing: -.025em;
  line-height: 1.2;
}

h1 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.muted,
.sub,
.subtitle {
  color: var(--rsgt-muted) !important;
}

.card,
.corso-card,
.settings,
.panel,
.kpi,
.stat,
.riepilogo,
.list,
.scrollbox,
.scrollbox-sm,
.table-wrap,
.storico-scroll {
  background: var(--rsgt-surface) !important;
  border-color: var(--rsgt-border) !important;
  box-shadow: var(--rsgt-shadow) !important;
}

.card,
.corso-card,
.settings,
.panel {
  border-radius: 14px !important;
}

.card:hover,
.corso-card:hover,
.panel:hover {
  transform: none !important;
  border-color: var(--rsgt-border-strong) !important;
  box-shadow: var(--rsgt-shadow) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px !important;
  color: var(--rsgt-text) !important;
  background: var(--rsgt-surface-raised) !important;
  border: 1px solid var(--rsgt-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

textarea {
  min-height: 104px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--rsgt-focus) !important;
  outline-offset: 2px;
  border-color: var(--rsgt-brand) !important;
}

button,
.btn,
.back,
.logout-btn,
.btn-salva,
.btn-quick-all,
.btn-bulk,
.btn-applica {
  min-height: 44px;
  border-radius: 10px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

.btn,
.btn-salva,
.btn-quick-all,
button[type="submit"]:not(.logout-btn),
.panel button {
  color: #fff !important;
  background: var(--rsgt-brand) !important;
  border: 1px solid var(--rsgt-brand) !important;
}

.btn:hover,
.btn-salva:hover,
.btn-quick-all:hover,
button[type="submit"]:not(.logout-btn):hover,
.panel button:hover {
  background: var(--rsgt-brand-strong) !important;
  border-color: var(--rsgt-brand-strong) !important;
  filter: none !important;
  transform: none !important;
}

.btn-danger,
.btn-applica {
  background: var(--rsgt-danger) !important;
  border-color: var(--rsgt-danger) !important;
}

.back,
.logout-btn,
.btn-dark,
.btn-bulk {
  color: var(--rsgt-text) !important;
  background: var(--rsgt-surface-soft) !important;
  border: 1px solid var(--rsgt-border-strong) !important;
}

.topbar {
  color: var(--rsgt-text) !important;
  background: color-mix(in srgb, var(--rsgt-surface) 94%, transparent) !important;
  border-color: var(--rsgt-border) !important;
  box-shadow: 0 1px 0 var(--rsgt-border) !important;
  backdrop-filter: blur(16px) saturate(130%);
}

.topbar .brand .title,
.topbar .club .club-name,
.topbar .club .club-sub {
  color: var(--rsgt-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.topbar .club .club-sub {
  color: var(--rsgt-muted) !important;
}

.sidebar {
  background: var(--rsgt-surface) !important;
  border-color: var(--rsgt-border) !important;
  box-shadow: none !important;
}

.sidebar .brand {
  background: var(--rsgt-surface-soft) !important;
  border-color: var(--rsgt-border) !important;
}

.nav a {
  min-height: 44px;
  color: var(--rsgt-text) !important;
  border-radius: 9px !important;
}

.nav a:hover {
  background: var(--rsgt-brand-soft) !important;
  border-color: transparent !important;
}

.nav a.active {
  color: var(--rsgt-brand-strong) !important;
  background: var(--rsgt-brand-soft) !important;
  border-color: transparent !important;
  box-shadow: inset 3px 0 var(--rsgt-brand);
}

.main {
  background: var(--rsgt-bg) !important;
}

.page,
.container,
.wrap,
main {
  min-width: 0;
}

.hero {
  color: var(--rsgt-text) !important;
  background: var(--rsgt-surface) !important;
  border: 1px solid var(--rsgt-border) !important;
  border-left: 4px solid var(--rsgt-brand) !important;
  border-radius: 14px !important;
  box-shadow: var(--rsgt-shadow) !important;
}

.hero p {
  color: var(--rsgt-muted) !important;
}

.badge,
.pill,
.chip,
.tag,
.year-badge,
.stat-pill,
.anno-pill {
  box-shadow: none !important;
  background-image: none !important;
}

.table-wrap,
.storico-scroll {
  overflow: auto;
  border-radius: 12px !important;
}

table {
  width: 100% !important;
  color: var(--rsgt-text) !important;
  background: var(--rsgt-surface) !important;
  border-collapse: collapse;
}

thead tr,
th {
  color: var(--rsgt-muted) !important;
  background: var(--rsgt-surface-soft) !important;
}

th {
  font-size: .75rem !important;
  font-weight: 750 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

th,
td {
  padding: 12px 14px !important;
  border-color: var(--rsgt-border) !important;
}

tbody tr:hover td {
  background: var(--rsgt-brand-soft) !important;
}

.row {
  border-color: var(--rsgt-border) !important;
}

.row:hover {
  transform: none !important;
}

.role-switcher {
  color: var(--rsgt-text);
  background: var(--rsgt-surface-soft) !important;
  border-color: var(--rsgt-border) !important;
  backdrop-filter: none !important;
}

.role-switcher select,
.theme-switch select {
  min-height: 38px;
  font-size: 14px !important;
}

.rsgt-theme-dock {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  color: var(--rsgt-text);
  background: color-mix(in srgb, var(--rsgt-surface) 94%, transparent);
  border: 1px solid var(--rsgt-border);
  border-radius: 11px;
  box-shadow: var(--rsgt-shadow);
  backdrop-filter: blur(14px);
}

.topbar .rsgt-theme-dock,
.rsgt-theme-host .rsgt-theme-dock {
  position: static;
  box-shadow: none;
  background: var(--rsgt-surface-soft);
  backdrop-filter: none;
}

.rsgt-page-toolbar {
  position: sticky;
  top: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 56px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--rsgt-surface) 96%, transparent);
  border-bottom: 1px solid var(--rsgt-border);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--rsgt-border) 75%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
}

.rsgt-theme-dock label {
  color: var(--rsgt-muted);
  font-size: .76rem;
  font-weight: 750;
}

.rsgt-theme-dock select {
  width: auto !important;
  min-width: 96px;
  min-height: 36px;
  padding: 6px 28px 6px 9px !important;
  font-size: 14px !important;
}

.login-card {
  color: var(--rsgt-text) !important;
  background: var(--rsgt-surface) !important;
  border: 1px solid var(--rsgt-border) !important;
  box-shadow: var(--rsgt-shadow-lg) !important;
}

.login-card::before {
  display: none;
}

.login-card h2 {
  color: var(--rsgt-brand) !important;
}

.brand-card h1,
.brand-card .brand-title {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55) !important;
}

.brand-card,
.brand-top,
.brand-body,
.brand-headings {
  min-width: 0;
  max-width: 100%;
}

.brand-name,
.brand-sub {
  overflow-wrap: anywhere;
}

.login-card .rsgt-theme-dock {
  position: absolute;
  top: 14px;
  right: 14px;
  box-shadow: none;
  background: var(--rsgt-surface-soft);
  backdrop-filter: none;
}

.login-card h2 {
  padding-right: 128px;
}

@media (min-width: 981px) {
  .shell {
    grid-template-columns: 264px minmax(0, 1fr) !important;
  }

  .sidebar {
    padding: 14px 12px !important;
  }

  .page {
    max-width: 1280px !important;
    padding-inline: 24px !important;
  }
}

@media (max-width: 980px) {
  .sidebar {
    width: min(88vw, 360px) !important;
    inset: 0 auto 0 0 !important;
  }

  .topbar {
    padding: 10px 12px !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  body:not(:has(.topbar)):not(:has(.rsgt-page-toolbar)) {
    padding-top: 66px !important;
  }

  body:has(.login-shell) {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  .login-shell,
  .brand-card,
  .login-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .brand-card {
    min-height: 340px !important;
    aspect-ratio: auto !important;
  }

  .topbar {
    position: sticky !important;
    top: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 62px;
  }

  .topbar .brand {
    justify-content: flex-start !important;
    min-width: 0;
  }

  .topbar .brand .logo {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto;
  }

  .topbar .brand .title {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .club,
  .topbar .hello,
  .topbar .topbar-right > .hello {
    display: none !important;
  }

  .topbar .topbar-right,
  .tb-right {
    width: auto !important;
    flex: 0 1 auto !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .tb-left {
    min-width: 0;
    flex: 1 1 auto;
  }

  .tb-left > .muted {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .role-switcher label,
  .topbar .rsgt-theme-dock label {
    display: none;
  }

  .topbar .role-switcher,
  .topbar .rsgt-theme-dock {
    width: auto !important;
    padding: 4px !important;
  }

  .topbar .role-switcher select {
    width: 112px !important;
    min-width: 0 !important;
  }

  .topbar .rsgt-theme-dock select {
    width: 82px !important;
    min-width: 0;
  }

  .logout-btn {
    width: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    white-space: nowrap;
  }

  .logout-btn::before {
    content: "Esci";
    color: var(--rsgt-text);
    font-size: 12px;
  }

  .page,
  .container,
  .wrap,
  body > main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .card,
  .corso-card,
  .settings,
  .panel {
    padding: 16px !important;
    margin-bottom: 14px !important;
  }

  .grid,
  .cols,
  .kpis,
  .stats,
  .statgrid,
  .riepilogo {
    grid-template-columns: 1fr !important;
  }

  .legend,
  .toolbar,
  .actions,
  .row-actions,
  .inline,
  .corso-controls,
  .head {
    align-items: stretch !important;
  }

  .toolbar > *,
  .actions > *,
  .row-actions > *,
  .corso-controls > *,
  .head > .back {
    width: 100% !important;
  }

  .lista-allievi .row,
  #list_flic .row,
  .list .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 12px !important;
    min-height: 64px;
    padding: 13px !important;
    border: 1px solid var(--rsgt-border) !important;
    border-radius: 11px !important;
    margin: 8px 0 !important;
    background: var(--rsgt-surface) !important;
  }

  .lista-allievi .row[hidden],
  #list_flic .row[hidden],
  #list_flic_teach .row[hidden],
  .list .row[hidden] {
    display: none !important;
  }

  #flic-allievi > .inline,
  #flic_allievi_teacher > .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #flt_flic_attivo {
    max-width: none !important;
  }

  #list_flic .row,
  #list_flic_teach .row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lista-allievi .row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #list_flic .row > *,
  #list_flic_teach .row > *,
  .lista-allievi .row > * {
    min-width: 0;
  }

  #list_flic .row-actions,
  #list_flic_teach .row-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px !important;
  }

  #list_flic .row-actions > *,
  #list_flic_teach .row-actions > * {
    width: 100% !important;
    min-width: 0;
  }

  #list_flic .row-actions .btn,
  #list_flic .row-actions button,
  #list_flic_teach .row-actions .btn {
    width: 100% !important;
    min-width: 0;
    white-space: normal;
  }

  .lista-allievi .row .name {
    grid-column: 1 / -1;
    font-size: 1rem;
    font-weight: 750;
  }

  .lista-allievi .row .cm,
  .lista-allievi .row .pay,
  .lista-allievi .row .storico {
    grid-column: 1 / -1;
    min-width: 0;
    width: auto !important;
    font-size: .8rem;
  }

  .lista-allievi .row .pay .pill {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .table-wrap,
  .storico-scroll {
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  table.rsgt-mobile-table,
  table.rsgt-mobile-table tbody {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  table.rsgt-mobile-table thead {
    display: none;
  }

  table.rsgt-mobile-table tr {
    display: block;
    margin: 0 0 12px;
    padding: 7px 12px;
    background: var(--rsgt-surface);
    border: 1px solid var(--rsgt-border);
    border-radius: 12px;
    box-shadow: var(--rsgt-shadow);
  }

  table.rsgt-mobile-table td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 38px;
    padding: 9px 0 !important;
    text-align: right !important;
    word-break: break-word;
    background: transparent !important;
    border-bottom: 1px solid var(--rsgt-border) !important;
  }

  table.rsgt-mobile-table td:last-child {
    border-bottom: 0 !important;
  }

  table.rsgt-mobile-table td::before {
    content: attr(data-label);
    color: var(--rsgt-muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .035em;
    text-align: left;
    text-transform: uppercase;
  }

  table.rsgt-mobile-table td[colspan] {
    display: block;
    text-align: left !important;
  }

  table.rsgt-mobile-table td[colspan]::before {
    content: none;
  }

  .riepilogo-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rsgt-border);
  }

  .rsgt-theme-dock {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
  }

  .login-card .rsgt-theme-dock {
    position: static;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .login-card h2 {
    padding-right: 0;
  }
}

@media (max-width: 420px) {
  .tb-left > .muted {
    display: none !important;
  }

  .topbar .role-switcher select {
    width: 96px !important;
  }

  .topbar .rsgt-theme-dock select {
    width: 72px !important;
  }

  table.rsgt-mobile-table td {
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}