/* G-Hub glass design system chrome + dashboard — scoped to .ghub-shell / .ghub-dashboard */

.ghub-shell {
    --ghub-glass-blur: 28px;
    --ghub-radius: 12px;
    /* Fallback accent (agent) — ogni ghub-module--* sovrascrive */
    --ghub-accent-rgb: 125, 255, 224;
    --ghub-surface-rgb: 14, 42, 32;
    /* Accento UI interattivo G-Hub (icone accese, placeholder, primary/info Mud) */
    --ghub-interactive: #ff9800;
    --ghub-interactive-rgb: 255, 152, 0;
    --ghub-interactive-soft: rgba(255, 152, 0, 0.22);
    /* Label campi / hint / collapse — grigio chiaro opaco (senza alpha) */
    --ghub-form-muted: #a0a0a0;
    --ghub-grid-sticky-bg: rgb(var(--ghub-surface-rgb));
    --ghub-grid-sticky-bg-head: rgb(var(--ghub-surface-rgb));
    position: relative;
    min-height: 100vh;
}

.ghub-shell .mud-main-content {
    position: relative;
    z-index: 0;
    background-color: transparent !important;
    --mud-palette-surface: transparent !important;
    --mud-palette-background: transparent !important;
    --mud-palette-primary: var(--ghub-interactive);
    --mud-palette-info: var(--ghub-interactive);
    --mud-palette-info-lighten: var(--ghub-interactive-soft);
    --mud-palette-primary-lighten: var(--ghub-interactive-soft);
    --mud-palette-primary-darken: #e65100;
    --mud-palette-text-primary: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96));
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.72);
    --mud-palette-text-disabled: rgba(255, 255, 255, 0.42);
    --mud-palette-action-default: rgba(255, 255, 255, 0.78);
}

/* Dialog: solo token palette — NON transparent / z-index basso (lo scrim overlay starebbe sopra) */
body:has(.ghub-shell) .mud-dialog-container .mud-dialog {
    --mud-palette-primary: var(--ghub-interactive);
    --mud-palette-info: var(--ghub-interactive);
    --mud-palette-info-lighten: var(--ghub-interactive-soft);
    --mud-palette-primary-lighten: var(--ghub-interactive-soft);
    --mud-palette-primary-darken: #e65100;
    --mud-palette-surface: rgb(var(--ghub-surface-rgb, 38, 32, 12));
    --mud-palette-background: rgb(var(--ghub-surface-rgb, 38, 32, 12));
    --mud-palette-text-primary: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96));
    /* Icone default + HelperText Mud usano text-secondary (altrimenti restano neri) */
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.72);
    --mud-palette-text-disabled: rgba(255, 255, 255, 0.42);
    --mud-palette-action-default: rgba(255, 255, 255, 0.78);
}

/* ScreenCheckDialog: blur sullo scrim (BackgroundClass) */
.custom-blur-dialog {
    backdrop-filter: blur(10px);
}

/* ---- Illuminato: palette per modulo (colore lettera logo) ---- */
.ghub-module--hub.ghub-shell--light {
    --ghub-accent-rgb: 255, 138, 128;
    --ghub-surface-rgb: 42, 16, 14;
    --ghub-bg: #140807;
    --ghub-bg-accent: #2a100e;
    --ghub-glass-bg: rgba(32, 12, 10, 0.38);
    --ghub-glass-chrome: rgba(20, 6, 5, 0.88);
    --ghub-glass-bg-strong: rgba(32, 12, 10, 0.7);
    --ghub-glass-card: rgba(42, 16, 14, 0.52);
    --ghub-glass-card-strong: rgba(52, 20, 18, 0.62);
    --ghub-glass-border: rgba(255, 138, 128, 0.32);
    --ghub-glass-edge: rgba(255, 200, 190, 0.7);
    --ghub-cyan: rgba(255, 138, 128, 0.55);
    --ghub-glow: rgba(255, 138, 128, 0.42);
    --ghub-glow-soft: rgba(229, 57, 53, 0.22);
    --ghub-active: rgba(255, 138, 128, 0.22);
    --ghub-active-bar: #ff8a80;
    --ghub-chrome-fg: rgba(255, 248, 246, 0.96);
    --ghub-pattern: rgba(255, 138, 128, 0.11);
    --ghub-drawer-glass: rgba(58, 22, 20, 0.58);
    --ghub-drawer-border: rgba(255, 138, 128, 0.28);
    --ghub-card-glass: rgba(42, 18, 16, 0.58);
    --ghub-card-border: rgba(255, 138, 128, 0.35);
    --ghub-card-border-top: rgba(255, 180, 170, 0.5);
    --ghub-dash-card-top: rgba(52, 18, 16, 0.88);
    --ghub-dash-card-bottom: rgba(32, 10, 8, 0.92);
    --ghub-dash-card-border: rgba(229, 57, 53, 0.36);
    --ghub-dash-card-glow: rgba(229, 57, 53, 0.2);
    --ghub-dash-hover-top: rgba(62, 22, 18, 0.92);
    --ghub-dash-hover-bottom: rgba(38, 12, 10, 0.94);
    --ghub-select-glass: rgba(68, 28, 24, 0.55);
    --ghub-select-border: rgba(255, 160, 150, 0.38);
    --ghub-appbar-edge: rgba(10, 4, 3, 0.92);
    --ghub-appbar-mid: rgba(28, 10, 8, 0.78);
    --ghub-appbar-center: rgba(42, 16, 12, 0.72);
    --ghub-appbar-center-glow: rgba(255, 138, 128, 0.22);
    --ghub-appbar-bottom-line: rgba(255, 138, 128, 0.55);
    --ghub-logo-glow: rgba(255, 138, 128, 0.42);
    --ghub-clickable-fg: #ff8a80;
}

.ghub-module--agent.ghub-shell--light {
    --ghub-accent-rgb: 125, 255, 224;
    --ghub-surface-rgb: 14, 42, 32;
    --ghub-bg: #07140f;
    --ghub-bg-accent: #0e2a1c;
    --ghub-glass-bg: rgba(10, 32, 24, 0.38);
    --ghub-glass-chrome: rgba(4, 16, 11, 0.88);
    --ghub-glass-bg-strong: rgba(10, 32, 24, 0.7);
    --ghub-glass-card: rgba(14, 42, 32, 0.52);
    --ghub-glass-card-strong: rgba(18, 52, 40, 0.62);
    --ghub-glass-border: rgba(80, 255, 210, 0.32);
    --ghub-glass-edge: rgba(170, 255, 235, 0.7);
    --ghub-cyan: rgba(80, 255, 230, 0.55);
    --ghub-glow: rgba(0, 245, 200, 0.42);
    --ghub-glow-soft: rgba(0, 220, 190, 0.22);
    --ghub-active: rgba(0, 230, 160, 0.22);
    --ghub-active-bar: #00f0a8;
    --ghub-chrome-fg: rgba(245, 255, 250, 0.96);
    --ghub-pattern: rgba(0, 230, 170, 0.11);
    --ghub-drawer-glass: rgba(22, 58, 44, 0.58);
    --ghub-drawer-border: rgba(80, 255, 210, 0.28);
    --ghub-card-glass: rgba(14, 45, 34, 0.58);
    --ghub-card-border: rgba(80, 255, 210, 0.35);
    --ghub-card-border-top: rgba(120, 255, 220, 0.5);
    --ghub-dash-card-top: rgba(14, 52, 38, 0.88);
    --ghub-dash-card-bottom: rgba(8, 32, 22, 0.92);
    --ghub-dash-card-border: rgba(0, 168, 102, 0.36);
    --ghub-dash-card-glow: rgba(0, 140, 88, 0.2);
    --ghub-dash-hover-top: rgba(18, 62, 46, 0.92);
    --ghub-dash-hover-bottom: rgba(10, 38, 26, 0.94);
    --ghub-select-glass: rgba(28, 68, 54, 0.55);
    --ghub-select-border: rgba(100, 255, 210, 0.38);
    --ghub-appbar-edge: rgba(2, 10, 7, 0.92);
    --ghub-appbar-mid: rgba(6, 28, 20, 0.78);
    --ghub-appbar-center: rgba(10, 42, 30, 0.72);
    --ghub-appbar-center-glow: rgba(0, 220, 160, 0.22);
    --ghub-appbar-bottom-line: rgba(80, 255, 230, 0.55);
    --ghub-logo-glow: rgba(0, 230, 170, 0.42);
    --ghub-clickable-fg: #7dffe0;
}

.ghub-module--bridge.ghub-shell--light {
    --ghub-accent-rgb: 130, 177, 255;
    --ghub-surface-rgb: 16, 28, 42;
    --ghub-bg: #070d14;
    --ghub-bg-accent: #0e182a;
    --ghub-glass-bg: rgba(10, 20, 32, 0.38);
    --ghub-glass-chrome: rgba(4, 10, 20, 0.88);
    --ghub-glass-bg-strong: rgba(10, 20, 32, 0.7);
    --ghub-glass-card: rgba(14, 28, 42, 0.52);
    --ghub-glass-card-strong: rgba(18, 36, 52, 0.62);
    --ghub-glass-border: rgba(130, 177, 255, 0.32);
    --ghub-glass-edge: rgba(190, 210, 255, 0.7);
    --ghub-cyan: rgba(130, 177, 255, 0.55);
    --ghub-glow: rgba(130, 177, 255, 0.42);
    --ghub-glow-soft: rgba(30, 136, 229, 0.22);
    --ghub-active: rgba(130, 177, 255, 0.22);
    --ghub-active-bar: #82b1ff;
    --ghub-chrome-fg: rgba(246, 250, 255, 0.96);
    --ghub-pattern: rgba(130, 177, 255, 0.11);
    --ghub-drawer-glass: rgba(22, 38, 58, 0.58);
    --ghub-drawer-border: rgba(130, 177, 255, 0.28);
    --ghub-card-glass: rgba(16, 32, 48, 0.58);
    --ghub-card-border: rgba(130, 177, 255, 0.35);
    --ghub-card-border-top: rgba(170, 200, 255, 0.5);
    --ghub-dash-card-top: rgba(16, 36, 52, 0.88);
    --ghub-dash-card-bottom: rgba(8, 22, 36, 0.92);
    --ghub-dash-card-border: rgba(30, 136, 229, 0.36);
    --ghub-dash-card-glow: rgba(30, 136, 229, 0.2);
    --ghub-dash-hover-top: rgba(20, 44, 62, 0.92);
    --ghub-dash-hover-bottom: rgba(10, 28, 42, 0.94);
    --ghub-select-glass: rgba(28, 48, 68, 0.55);
    --ghub-select-border: rgba(150, 190, 255, 0.38);
    --ghub-appbar-edge: rgba(2, 6, 14, 0.92);
    --ghub-appbar-mid: rgba(6, 18, 32, 0.78);
    --ghub-appbar-center: rgba(10, 28, 42, 0.72);
    --ghub-appbar-center-glow: rgba(130, 177, 255, 0.22);
    --ghub-appbar-bottom-line: rgba(130, 177, 255, 0.55);
    --ghub-logo-glow: rgba(130, 177, 255, 0.42);
    --ghub-clickable-fg: #82b1ff;
}

.ghub-module--sync.ghub-shell--light {
    --ghub-accent-rgb: 225, 190, 231;
    --ghub-surface-rgb: 28, 18, 42;
    --ghub-bg: #0f0714;
    --ghub-bg-accent: #180e2a;
    --ghub-glass-bg: rgba(20, 12, 32, 0.38);
    --ghub-glass-chrome: rgba(10, 5, 18, 0.88);
    --ghub-glass-bg-strong: rgba(20, 12, 32, 0.7);
    --ghub-glass-card: rgba(28, 18, 42, 0.52);
    --ghub-glass-card-strong: rgba(36, 24, 52, 0.62);
    --ghub-glass-border: rgba(225, 190, 231, 0.32);
    --ghub-glass-edge: rgba(240, 220, 245, 0.7);
    --ghub-cyan: rgba(225, 190, 231, 0.55);
    --ghub-glow: rgba(225, 190, 231, 0.42);
    --ghub-glow-soft: rgba(126, 87, 194, 0.22);
    --ghub-active: rgba(225, 190, 231, 0.22);
    --ghub-active-bar: #e1bee7;
    --ghub-chrome-fg: rgba(252, 248, 255, 0.96);
    --ghub-pattern: rgba(225, 190, 231, 0.11);
    --ghub-drawer-glass: rgba(38, 24, 58, 0.58);
    --ghub-drawer-border: rgba(225, 190, 231, 0.28);
    --ghub-card-glass: rgba(32, 20, 48, 0.58);
    --ghub-card-border: rgba(225, 190, 231, 0.35);
    --ghub-card-border-top: rgba(240, 210, 248, 0.5);
    --ghub-dash-card-top: rgba(32, 20, 48, 0.88);
    --ghub-dash-card-bottom: rgba(18, 10, 32, 0.92);
    --ghub-dash-card-border: rgba(126, 87, 194, 0.36);
    --ghub-dash-card-glow: rgba(126, 87, 194, 0.2);
    --ghub-dash-hover-top: rgba(38, 24, 56, 0.92);
    --ghub-dash-hover-bottom: rgba(22, 14, 36, 0.94);
    --ghub-select-glass: rgba(48, 32, 68, 0.55);
    --ghub-select-border: rgba(210, 180, 230, 0.38);
    --ghub-appbar-edge: rgba(6, 3, 12, 0.92);
    --ghub-appbar-mid: rgba(16, 10, 28, 0.78);
    --ghub-appbar-center: rgba(24, 16, 38, 0.72);
    --ghub-appbar-center-glow: rgba(225, 190, 231, 0.22);
    --ghub-appbar-bottom-line: rgba(225, 190, 231, 0.55);
    --ghub-logo-glow: rgba(225, 190, 231, 0.42);
    --ghub-clickable-fg: #e1bee7;
}

.ghub-module--atelier.ghub-shell--light {
    --ghub-accent-rgb: 255, 245, 157;
    --ghub-surface-rgb: 42, 36, 14;
    --ghub-bg: #141007;
    --ghub-bg-accent: #2a220e;
    --ghub-glass-bg: rgba(32, 26, 10, 0.38);
    --ghub-glass-chrome: rgba(18, 14, 4, 0.88);
    --ghub-glass-bg-strong: rgba(32, 26, 10, 0.7);
    --ghub-glass-card: rgba(42, 34, 14, 0.52);
    --ghub-glass-card-strong: rgba(52, 42, 18, 0.62);
    --ghub-glass-border: rgba(255, 245, 157, 0.3);
    --ghub-glass-edge: rgba(255, 248, 200, 0.7);
    --ghub-cyan: rgba(255, 245, 157, 0.5);
    --ghub-glow: rgba(255, 245, 157, 0.38);
    --ghub-glow-soft: rgba(253, 216, 53, 0.2);
    --ghub-active: rgba(255, 245, 157, 0.2);
    --ghub-active-bar: #fff59d;
    --ghub-chrome-fg: rgba(255, 252, 240, 0.96);
    --ghub-pattern: rgba(255, 245, 157, 0.1);
    --ghub-drawer-glass: rgba(58, 48, 22, 0.58);
    --ghub-drawer-border: rgba(255, 245, 157, 0.26);
    --ghub-card-glass: rgba(48, 40, 16, 0.58);
    --ghub-card-border: rgba(255, 245, 157, 0.32);
    --ghub-card-border-top: rgba(255, 248, 180, 0.48);
    --ghub-dash-card-top: rgba(48, 40, 16, 0.88);
    --ghub-dash-card-bottom: rgba(28, 22, 8, 0.92);
    --ghub-dash-card-border: rgba(253, 216, 53, 0.34);
    --ghub-dash-card-glow: rgba(253, 216, 53, 0.18);
    --ghub-dash-hover-top: rgba(56, 46, 18, 0.92);
    --ghub-dash-hover-bottom: rgba(34, 28, 10, 0.94);
    --ghub-select-glass: rgba(68, 56, 24, 0.55);
    --ghub-select-border: rgba(255, 230, 120, 0.36);
    --ghub-appbar-edge: rgba(10, 8, 2, 0.92);
    --ghub-appbar-mid: rgba(28, 22, 6, 0.78);
    --ghub-appbar-center: rgba(42, 34, 10, 0.72);
    --ghub-appbar-center-glow: rgba(255, 245, 157, 0.2);
    --ghub-appbar-bottom-line: rgba(255, 245, 157, 0.5);
    --ghub-logo-glow: rgba(255, 245, 157, 0.38);
    --ghub-clickable-fg: #fff59d;
}

/* ---- Scuro: base nera condivisa + accent modulo ---- */
.ghub-shell--dark {
    --ghub-bg: #000000;
    --ghub-bg-accent: #0a0a0a;
    --ghub-glass-bg: rgba(255, 255, 255, 0.04);
    --ghub-glass-chrome: rgba(0, 0, 0, 0.45);
    --ghub-glass-bg-strong: rgba(28, 28, 28, 0.75);
    --ghub-glass-card: rgba(255, 255, 255, 0.07);
    --ghub-glass-card-strong: rgba(255, 255, 255, 0.1);
    --ghub-glass-border: rgba(255, 255, 255, 0.14);
    --ghub-glass-edge: rgba(255, 255, 255, 0.55);
    --ghub-cyan: rgba(255, 255, 255, 0.4);
    --ghub-glow: rgba(255, 255, 255, 0.28);
    --ghub-glow-soft: rgba(255, 255, 255, 0.12);
    --ghub-active: rgba(255, 255, 255, 0.08);
    --ghub-active-bar: rgba(255, 255, 255, 0.9);
    --ghub-chrome-fg: rgba(245, 245, 245, 0.96);
    --ghub-pattern: rgba(255, 255, 255, 0.06);
    --ghub-appbar-edge: rgba(0, 0, 0, 0.82);
    --ghub-appbar-mid: rgba(18, 18, 18, 0.55);
    --ghub-appbar-center: rgba(40, 40, 40, 0.5);
    --ghub-appbar-center-glow: rgba(255, 255, 255, 0.14);
    --ghub-appbar-bottom-line: rgba(255, 255, 255, 0.4);
    --ghub-logo-glow: rgba(255, 255, 255, 0.35);
}

.ghub-module--hub.ghub-shell--dark {
    --ghub-accent-rgb: 229, 57, 53;
    --ghub-surface-rgb: 38, 14, 12;
    --ghub-clickable-fg: #e53935;
    --ghub-active-bar: #e53935;
    --ghub-active: rgba(229, 57, 53, 0.14);
    --ghub-glow: rgba(229, 57, 53, 0.32);
    --ghub-glow-soft: rgba(229, 57, 53, 0.16);
    --ghub-select-glass: rgba(55, 18, 16, 0.45);
    --ghub-select-border: rgba(229, 57, 53, 0.35);
    --ghub-drawer-glass: rgba(48, 16, 14, 0.42);
    --ghub-drawer-border: rgba(229, 57, 53, 0.22);
    --ghub-card-glass: rgba(38, 14, 12, 0.42);
    --ghub-card-border: rgba(229, 57, 53, 0.28);
    --ghub-card-border-top: rgba(229, 57, 53, 0.42);
    --ghub-dash-card-top: rgba(38, 14, 12, 0.9);
    --ghub-dash-card-bottom: rgba(24, 8, 6, 0.94);
    --ghub-dash-card-border: rgba(229, 57, 53, 0.32);
    --ghub-dash-card-glow: rgba(229, 57, 53, 0.18);
    --ghub-appbar-bottom-line: rgba(229, 57, 53, 0.45);
    --ghub-dash-hover-top: rgba(48, 18, 16, 0.94);
    --ghub-dash-hover-bottom: rgba(32, 10, 8, 0.96);
}

.ghub-module--agent.ghub-shell--dark {
    --ghub-accent-rgb: 82, 217, 138;
    --ghub-surface-rgb: 14, 38, 28;
    --ghub-clickable-fg: #52d98a;
    --ghub-active-bar: #52d98a;
    --ghub-active: rgba(82, 217, 138, 0.14);
    --ghub-glow: rgba(82, 217, 138, 0.32);
    --ghub-glow-soft: rgba(82, 217, 138, 0.16);
    --ghub-select-glass: rgba(20, 55, 42, 0.45);
    --ghub-select-border: rgba(82, 217, 138, 0.35);
    --ghub-drawer-glass: rgba(18, 48, 36, 0.42);
    --ghub-drawer-border: rgba(82, 217, 138, 0.22);
    --ghub-card-glass: rgba(14, 42, 32, 0.42);
    --ghub-card-border: rgba(82, 217, 138, 0.28);
    --ghub-card-border-top: rgba(82, 217, 138, 0.42);
    --ghub-dash-card-top: rgba(10, 38, 28, 0.9);
    --ghub-dash-card-bottom: rgba(6, 24, 16, 0.94);
    --ghub-dash-card-border: rgba(0, 168, 102, 0.32);
    --ghub-dash-card-glow: rgba(0, 140, 88, 0.18);
    --ghub-appbar-bottom-line: rgba(82, 217, 138, 0.45);
    --ghub-dash-hover-top: rgba(14, 52, 38, 0.94);
    --ghub-dash-hover-bottom: rgba(8, 32, 22, 0.96);
}

.ghub-module--bridge.ghub-shell--dark {
    --ghub-accent-rgb: 30, 136, 229;
    --ghub-surface-rgb: 14, 28, 42;
    --ghub-clickable-fg: #1e88e5;
    --ghub-active-bar: #1e88e5;
    --ghub-active: rgba(30, 136, 229, 0.14);
    --ghub-glow: rgba(30, 136, 229, 0.32);
    --ghub-glow-soft: rgba(30, 136, 229, 0.16);
    --ghub-select-glass: rgba(16, 32, 52, 0.45);
    --ghub-select-border: rgba(30, 136, 229, 0.35);
    --ghub-drawer-glass: rgba(14, 28, 48, 0.42);
    --ghub-drawer-border: rgba(30, 136, 229, 0.22);
    --ghub-card-glass: rgba(12, 26, 42, 0.42);
    --ghub-card-border: rgba(30, 136, 229, 0.28);
    --ghub-card-border-top: rgba(30, 136, 229, 0.42);
    --ghub-dash-card-top: rgba(12, 28, 42, 0.9);
    --ghub-dash-card-bottom: rgba(6, 18, 32, 0.94);
    --ghub-dash-card-border: rgba(30, 136, 229, 0.32);
    --ghub-dash-card-glow: rgba(30, 136, 229, 0.18);
    --ghub-appbar-bottom-line: rgba(30, 136, 229, 0.45);
    --ghub-dash-hover-top: rgba(16, 36, 52, 0.94);
    --ghub-dash-hover-bottom: rgba(8, 22, 36, 0.96);
}

.ghub-module--sync.ghub-shell--dark {
    --ghub-accent-rgb: 126, 87, 194;
    --ghub-surface-rgb: 24, 16, 38;
    --ghub-clickable-fg: #7e57c2;
    --ghub-active-bar: #7e57c2;
    --ghub-active: rgba(126, 87, 194, 0.14);
    --ghub-glow: rgba(126, 87, 194, 0.32);
    --ghub-glow-soft: rgba(126, 87, 194, 0.16);
    --ghub-select-glass: rgba(32, 20, 52, 0.45);
    --ghub-select-border: rgba(126, 87, 194, 0.35);
    --ghub-drawer-glass: rgba(24, 16, 44, 0.42);
    --ghub-drawer-border: rgba(126, 87, 194, 0.22);
    --ghub-card-glass: rgba(20, 14, 36, 0.42);
    --ghub-card-border: rgba(126, 87, 194, 0.28);
    --ghub-card-border-top: rgba(126, 87, 194, 0.42);
    --ghub-dash-card-top: rgba(20, 14, 36, 0.9);
    --ghub-dash-card-bottom: rgba(12, 8, 24, 0.94);
    --ghub-dash-card-border: rgba(126, 87, 194, 0.32);
    --ghub-dash-card-glow: rgba(126, 87, 194, 0.18);
    --ghub-appbar-bottom-line: rgba(126, 87, 194, 0.45);
    --ghub-dash-hover-top: rgba(26, 18, 40, 0.94);
    --ghub-dash-hover-bottom: rgba(14, 8, 28, 0.96);
}

.ghub-module--atelier.ghub-shell--dark {
    --ghub-accent-rgb: 253, 216, 53;
    --ghub-surface-rgb: 38, 32, 12;
    --ghub-clickable-fg: #fdd835;
    --ghub-active-bar: #fdd835;
    --ghub-active: rgba(253, 216, 53, 0.12);
    --ghub-glow: rgba(253, 216, 53, 0.28);
    --ghub-glow-soft: rgba(253, 216, 53, 0.14);
    --ghub-select-glass: rgba(52, 44, 16, 0.45);
    --ghub-select-border: rgba(253, 216, 53, 0.35);
    --ghub-drawer-glass: rgba(44, 36, 14, 0.42);
    --ghub-drawer-border: rgba(253, 216, 53, 0.22);
    --ghub-card-glass: rgba(36, 30, 10, 0.42);
    --ghub-card-border: rgba(253, 216, 53, 0.28);
    --ghub-card-border-top: rgba(253, 216, 53, 0.42);
    --ghub-dash-card-top: rgba(36, 30, 10, 0.9);
    --ghub-dash-card-bottom: rgba(22, 18, 6, 0.94);
    --ghub-dash-card-border: rgba(253, 216, 53, 0.32);
    --ghub-dash-card-glow: rgba(253, 216, 53, 0.18);
    --ghub-appbar-bottom-line: rgba(253, 216, 53, 0.45);
    --ghub-dash-hover-top: rgba(44, 36, 14, 0.94);
    --ghub-dash-hover-bottom: rgba(26, 20, 6, 0.96);
}

/* Token overlay (dialog/menu/select portati su body) — per modulo */
body:has(.ghub-shell) {
    --ghub-radius: 12px;
    --ghub-form-muted: #a0a0a0;
}

body:has(.ghub-module--hub.ghub-shell--light) {
    --ghub-accent-rgb: 255, 138, 128;
    --ghub-surface-rgb: 42, 16, 14;
    --ghub-card-glass: rgba(42, 18, 16, 0.58);
    --ghub-card-border: rgba(255, 138, 128, 0.35);
    --ghub-chrome-fg: rgba(255, 248, 246, 0.96);
    --ghub-select-glass: rgba(68, 28, 24, 0.55);
    --ghub-select-border: rgba(255, 160, 150, 0.38);
    --ghub-active: rgba(255, 138, 128, 0.22);
    --ghub-active-bar: #ff8a80;
    --ghub-clickable-fg: #ff8a80;
}

body:has(.ghub-module--hub.ghub-shell--dark) {
    --ghub-accent-rgb: 229, 57, 53;
    --ghub-surface-rgb: 38, 14, 12;
    --ghub-card-glass: rgba(38, 14, 12, 0.42);
    --ghub-card-border: rgba(229, 57, 53, 0.28);
    --ghub-chrome-fg: rgba(245, 245, 245, 0.96);
    --ghub-select-glass: rgba(55, 18, 16, 0.45);
    --ghub-select-border: rgba(229, 57, 53, 0.35);
    --ghub-active: rgba(229, 57, 53, 0.14);
    --ghub-active-bar: #e53935;
    --ghub-clickable-fg: #e53935;
}

body:has(.ghub-module--agent.ghub-shell--light) {
    --ghub-accent-rgb: 125, 255, 224;
    --ghub-surface-rgb: 14, 42, 32;
    --ghub-card-glass: rgba(14, 45, 34, 0.58);
    --ghub-card-border: rgba(80, 255, 210, 0.35);
    --ghub-chrome-fg: rgba(245, 255, 250, 0.96);
    --ghub-select-glass: rgba(28, 68, 54, 0.55);
    --ghub-select-border: rgba(100, 255, 210, 0.38);
    --ghub-active: rgba(0, 230, 160, 0.22);
    --ghub-active-bar: #00f0a8;
    --ghub-clickable-fg: #7dffe0;
}

body:has(.ghub-module--agent.ghub-shell--dark) {
    --ghub-accent-rgb: 82, 217, 138;
    --ghub-surface-rgb: 14, 38, 28;
    --ghub-card-glass: rgba(14, 42, 32, 0.42);
    --ghub-card-border: rgba(82, 217, 138, 0.28);
    --ghub-chrome-fg: rgba(245, 245, 245, 0.96);
    --ghub-select-glass: rgba(20, 55, 42, 0.45);
    --ghub-select-border: rgba(82, 217, 138, 0.35);
    --ghub-active: rgba(82, 217, 138, 0.14);
    --ghub-active-bar: #52d98a;
    --ghub-clickable-fg: #52d98a;
}

body:has(.ghub-module--bridge.ghub-shell--light) {
    --ghub-accent-rgb: 130, 177, 255;
    --ghub-surface-rgb: 16, 28, 42;
    --ghub-card-glass: rgba(16, 32, 48, 0.58);
    --ghub-card-border: rgba(130, 177, 255, 0.35);
    --ghub-chrome-fg: rgba(246, 250, 255, 0.96);
    --ghub-select-glass: rgba(28, 48, 68, 0.55);
    --ghub-select-border: rgba(150, 190, 255, 0.38);
    --ghub-active: rgba(130, 177, 255, 0.22);
    --ghub-active-bar: #82b1ff;
    --ghub-clickable-fg: #82b1ff;
}

body:has(.ghub-module--bridge.ghub-shell--dark) {
    --ghub-accent-rgb: 30, 136, 229;
    --ghub-surface-rgb: 14, 28, 42;
    --ghub-card-glass: rgba(12, 26, 42, 0.42);
    --ghub-card-border: rgba(30, 136, 229, 0.28);
    --ghub-chrome-fg: rgba(245, 245, 245, 0.96);
    --ghub-select-glass: rgba(16, 32, 52, 0.45);
    --ghub-select-border: rgba(30, 136, 229, 0.35);
    --ghub-active: rgba(30, 136, 229, 0.14);
    --ghub-active-bar: #1e88e5;
    --ghub-clickable-fg: #1e88e5;
}

body:has(.ghub-module--sync.ghub-shell--light) {
    --ghub-accent-rgb: 225, 190, 231;
    --ghub-surface-rgb: 28, 18, 42;
    --ghub-card-glass: rgba(32, 20, 48, 0.58);
    --ghub-card-border: rgba(225, 190, 231, 0.35);
    --ghub-chrome-fg: rgba(252, 248, 255, 0.96);
    --ghub-select-glass: rgba(48, 32, 68, 0.55);
    --ghub-select-border: rgba(210, 180, 230, 0.38);
    --ghub-active: rgba(225, 190, 231, 0.22);
    --ghub-active-bar: #e1bee7;
    --ghub-clickable-fg: #e1bee7;
}

body:has(.ghub-module--sync.ghub-shell--dark) {
    --ghub-accent-rgb: 126, 87, 194;
    --ghub-surface-rgb: 24, 16, 38;
    --ghub-card-glass: rgba(20, 14, 36, 0.42);
    --ghub-card-border: rgba(126, 87, 194, 0.28);
    --ghub-chrome-fg: rgba(245, 245, 245, 0.96);
    --ghub-select-glass: rgba(32, 20, 52, 0.45);
    --ghub-select-border: rgba(126, 87, 194, 0.35);
    --ghub-active: rgba(126, 87, 194, 0.14);
    --ghub-active-bar: #7e57c2;
    --ghub-clickable-fg: #7e57c2;
}

body:has(.ghub-module--atelier.ghub-shell--light) {
    --ghub-accent-rgb: 255, 245, 157;
    --ghub-surface-rgb: 42, 36, 14;
    --ghub-card-glass: rgba(48, 40, 16, 0.58);
    --ghub-card-border: rgba(255, 245, 157, 0.32);
    --ghub-chrome-fg: rgba(255, 252, 240, 0.96);
    --ghub-select-glass: rgba(68, 56, 24, 0.55);
    --ghub-select-border: rgba(255, 230, 120, 0.36);
    --ghub-active: rgba(255, 245, 157, 0.2);
    --ghub-active-bar: #fff59d;
    --ghub-clickable-fg: #fff59d;
}

body:has(.ghub-module--atelier.ghub-shell--dark) {
    --ghub-accent-rgb: 253, 216, 53;
    --ghub-surface-rgb: 38, 32, 12;
    --ghub-card-glass: rgba(36, 30, 10, 0.42);
    --ghub-card-border: rgba(253, 216, 53, 0.28);
    --ghub-chrome-fg: rgba(245, 245, 245, 0.96);
    --ghub-select-glass: rgba(52, 44, 16, 0.45);
    --ghub-select-border: rgba(253, 216, 53, 0.35);
    --ghub-active: rgba(253, 216, 53, 0.12);
    --ghub-active-bar: #fdd835;
    --ghub-clickable-fg: #fdd835;
}

/* Shell: niente fill opaco Mud; pattern su layer fixed */
.ghub-shell.mud-layout,
.ghub-shell.ghub-shell--light,
.ghub-shell.ghub-shell--dark {
    --mud-palette-background: transparent !important;
    --mud-palette-surface: transparent !important;
    --mud-palette-drawer-background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/*
  Pattern su layer fixed SEPARATO: background-attachment:fixed sul parent
  fa ignorare backdrop-filter (Chrome/Edge barrano la proprietà in DevTools).
*/
.ghub-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--ghub-bg);
    background-image:
        radial-gradient(ellipse 70% 45% at 12% 8%, var(--ghub-bg-accent), transparent 58%),
        radial-gradient(circle at 18% 12%, var(--ghub-glow-soft), transparent 42%),
        radial-gradient(circle at 88% 78%, var(--ghub-glow-soft), transparent 48%),
        radial-gradient(circle at 1px 1px, var(--ghub-pattern) 1px, transparent 0),
        linear-gradient(var(--ghub-pattern) 1px, transparent 1px),
        linear-gradient(90deg, var(--ghub-pattern) 1px, transparent 1px);
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        26px 26px,
        52px 52px,
        52px 52px;
}

.ghub-shell::after {
    content: none;
    display: none;
}

.ghub-shell > .mud-main-content {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ghub-chrome-fg);
}

.ghub-shell .mud-main-content .mud-typography:not(.mud-text-secondary), body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-typography:not(.mud-text-secondary),
.ghub-shell .mud-main-content h1, body:has(.ghub-shell) .mud-dialog-container .mud-dialog h1,
.ghub-shell .mud-main-content h2, body:has(.ghub-shell) .mud-dialog-container .mud-dialog h2,
.ghub-shell .mud-main-content h3, body:has(.ghub-shell) .mud-dialog-container .mud-dialog h3,
.ghub-shell .mud-main-content h4, body:has(.ghub-shell) .mud-dialog-container .mud-dialog h4,
.ghub-shell .mud-main-content h5, body:has(.ghub-shell) .mud-dialog-container .mud-dialog h5,
.ghub-shell .mud-main-content h6, body:has(.ghub-shell) .mud-dialog-container .mud-dialog h6 {
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell .mud-main-content .mud-text-secondary, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-text-secondary {
    color: var(--ghub-chrome-fg) !important;
    opacity: 0.72;
}

/* Particles legacy hub: disattiva sotto il vetro Illuminato/Scuro */
body:has(.ghub-shell) #particles-js {
    display: none !important;
    visibility: hidden !important;
}

/* ========== AppBar — sopra al drawer: ombra full-width + glow centrale ========== */
.ghub-shell .ghub-appbar.mud-appbar,
.ghub-shell .mud-appbar.ghub-appbar,
.ghub-shell header.mud-appbar.ghub-appbar {
    --mud-palette-appbar-background: transparent;
    --mud-palette-appbar: transparent;
    z-index: 1300 !important;
    background-color: var(--ghub-glass-chrome) !important;
    background-image:
        radial-gradient(
            ellipse 58% 160% at 50% 40%,
            var(--ghub-appbar-center-glow),
            transparent 68%
        ),
        linear-gradient(
            90deg,
            var(--ghub-appbar-edge) 0%,
            var(--ghub-appbar-mid) 38%,
            var(--ghub-appbar-center) 50%,
            var(--ghub-appbar-mid) 62%,
            var(--ghub-appbar-edge) 100%
        ) !important;
    backdrop-filter: blur(32px) saturate(1.35);
    -webkit-backdrop-filter: blur(32px) saturate(1.35);
    border-bottom: 2px solid var(--ghub-glass-border);
    border-top: 1px solid var(--ghub-cyan);
    /* Ombra sotto AppBar: passa sul drawer (più chiaro) e su tutto il content */
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.45),
        0 10px 24px rgba(0, 0, 0, 0.5),
        0 20px 44px rgba(0, 0, 0, 0.32),
        0 1px 0 var(--ghub-appbar-bottom-line),
        inset 0 1px 0 var(--ghub-glass-edge) !important;
    color: var(--ghub-chrome-fg) !important;
}

/* Logo — glow sul testo base (Illuminato); Scuro spento */
.ghub-shell--light .ghub-logo {
    text-shadow:
        0 0 8px var(--ghub-logo-glow),
        0 0 16px var(--ghub-logo-glow);
}

.ghub-shell--dark .ghub-logo {
    text-shadow: none !important;
}

/* Drawer sotto l'AppBar così l'ombra la copre */
.ghub-shell .ghub-drawer.mud-drawer,
.ghub-shell .mud-drawer.ghub-drawer {
    z-index: 1100 !important;
}

.ghub-shell .ghub-appbar .mud-toolbar,
.ghub-shell .ghub-appbar .mud-toolbar-gutters {
    background: transparent !important;
    background-color: transparent !important;
}

.ghub-shell .ghub-appbar .mud-button-root,
.ghub-shell .ghub-appbar .mud-icon-button,
.ghub-shell .ghub-appbar .mud-typography {
    color: inherit;
}

/* Company select — vetro verde + freccia chiara */
.ghub-shell .ghub-appbar .ghub-company-select.mud-input-control,
.ghub-shell .ghub-appbar .mud-select.ghub-company-select {
    background: transparent !important;
    padding: 0 !important;
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell .ghub-appbar .ghub-company-select .mud-input-control-input-container {
    background: var(--ghub-select-glass) !important;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid var(--ghub-select-border) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        0 0 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.ghub-shell .ghub-appbar .ghub-company-select .mud-input,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-filled,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-outlined,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-slot,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-root,
.ghub-shell .ghub-appbar .ghub-company-select input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: rgba(255, 255, 255, 0.95) !important;
    caret-color: rgba(255, 255, 255, 0.95);
}

.ghub-shell .ghub-appbar .ghub-company-select .mud-input-underline::before,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-underline::after {
    border: none !important;
    border-bottom: none !important;
    display: none !important;
}

.ghub-shell .ghub-appbar .ghub-company-select .mud-input-adornment,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-adornment-end,
.ghub-shell .ghub-appbar .ghub-company-select .mud-select-input {
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.ghub-shell .ghub-appbar .ghub-company-select .mud-input-adornment-end::before,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-adornment-end::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Freccia dropdown chiara (override primary scuro del tema) */
.ghub-shell .ghub-appbar .ghub-company-select .mud-icon-root,
.ghub-shell .ghub-appbar .ghub-company-select .mud-svg-icon,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-adornment svg,
.ghub-shell .ghub-appbar .ghub-company-select .mud-select-icon {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: rgba(255, 255, 255, 0.92) !important;
}

.ghub-shell .ghub-appbar .ghub-company-select .mud-input-label,
.ghub-shell .ghub-appbar .ghub-company-select .mud-input-label-inputlabel {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1;
}

/* ========== Drawer — vetro verde, più chiaro dell'AppBar (ombra visibile) ========== */
.ghub-shell .ghub-drawer.mud-drawer,
.ghub-shell .mud-drawer.ghub-drawer {
    --mud-palette-drawer-background: transparent !important;
    --mud-palette-surface: transparent !important;
    background: var(--ghub-drawer-glass) !important;
    background-color: var(--ghub-drawer-glass) !important;
    background-image: linear-gradient(
        180deg,
        rgba(var(--ghub-accent-rgb), 0.06) 0%,
        transparent 38%,
        rgba(0, 0, 0, 0.14) 100%
    ) !important;
    -webkit-backdrop-filter: blur(2px) saturate(1.2) !important;
    backdrop-filter: blur(2px) saturate(1.2) !important;
    border-right: 2px solid var(--ghub-drawer-border) !important;
    box-shadow: none !important;
    color: var(--ghub-chrome-fg);
    z-index: 1100 !important;
    overflow: hidden !important;
}

.ghub-shell--dark .ghub-drawer.mud-drawer,
.ghub-shell--dark .mud-drawer.ghub-drawer {
    background: var(--ghub-drawer-glass) !important;
    background-color: var(--ghub-drawer-glass) !important;
}

.ghub-shell .ghub-drawer .mud-drawer-content {
    background: transparent !important;
    background-color: transparent !important;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Riserva sempre lo spazio scrollbar → niente salto orizzontale voci */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ghub-accent-rgb), 0.5) rgba(0, 0, 0, 0.22);
}

.ghub-shell .ghub-drawer .mud-drawer-content::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
}

.ghub-shell .ghub-drawer .mud-drawer-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18);
}

.ghub-shell .ghub-drawer .mud-drawer-content::-webkit-scrollbar-thumb {
    background: rgba(var(--ghub-accent-rgb), 0.45);
    border-radius: 4px;
}

.ghub-shell .ghub-drawer .mud-drawer-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ghub-accent-rgb), 0.65);
}

.ghub-shell .ghub-drawer .ghub-drawer-copy {
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 8px;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Margine sotto l'ombra AppBar — solo menu radice (non sottomenu MudNavGroup) */
.ghub-shell .ghub-drawer .mud-drawer-content > .ghub-navmenu,
.ghub-shell .ghub-drawer .mud-drawer-content > .mud-navmenu.ghub-navmenu {
    padding-top: 28px !important;
}

.ghub-shell .ghub-drawer .mud-nav-group .mud-navmenu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.ghub-shell .ghub-drawer .mud-nav-group .mud-navgroup-collapse,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse-wrapper,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse-wrapper-inner {
    padding: 0 !important;
    margin: 0 !important;
}

/* Solo .mud-drawer-content scrolla: niente scrollbar flash sui sottomenu (shift voci) */
.ghub-shell .ghub-drawer .mud-nav-group .mud-navgroup-collapse,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse-container,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse-wrapper,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse-wrapper-inner,
.ghub-shell .ghub-drawer .mud-nav-group .mud-navmenu {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.ghub-shell .ghub-drawer .mud-nav-group .mud-navgroup-collapse::-webkit-scrollbar,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse::-webkit-scrollbar,
.ghub-shell .ghub-drawer .mud-nav-group .mud-collapse-wrapper::-webkit-scrollbar,
.ghub-shell .ghub-drawer .mud-nav-group .mud-navmenu::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.ghub-shell .ghub-drawer .mud-nav-link,
.ghub-shell .ghub-drawer a.mud-nav-link.ghub-nav-link {
    position: relative;
    border-radius: 0 !important;
    margin: 2px 6px !important;
    padding-left: 16px !important;
    color: var(--ghub-chrome-fg) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}

.ghub-shell .ghub-drawer .mud-nav-link .mud-nav-link-text {
    color: var(--ghub-chrome-fg) !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Elevation su tutte le icone del menu */
.ghub-shell .ghub-drawer .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .mud-nav-link .mud-svg-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.ghub-shell .ghub-drawer .mud-nav-link:hover {
    background-color: var(--ghub-active) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Soft fill + glowing LEFT bar — angoli quadrati */
.ghub-shell .ghub-drawer .mud-nav-link.active,
.ghub-shell .ghub-drawer .mud-nav-link.active:hover,
.ghub-shell .ghub-drawer .mud-nav-link.active:focus,
.ghub-shell .ghub-drawer a.mud-nav-link.ghub-nav-link.active,
.ghub-shell .ghub-drawer a.mud-nav-link.mud-nav-link-default.active {
    background: var(--ghub-active) !important;
    background-color: var(--ghub-active) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell .ghub-drawer .mud-nav-link.active::before,
.ghub-shell .ghub-drawer a.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0;
    background: var(--ghub-active-bar);
    box-shadow:
        0 0 8px var(--ghub-glow),
        0 0 16px var(--ghub-glow-soft),
        0 0 4px var(--ghub-active-bar);
    pointer-events: none;
    z-index: 2;
}

.ghub-shell .ghub-drawer .mud-nav-link.active::after {
    content: none !important;
    display: none !important;
}

.ghub-shell .ghub-drawer .mud-nav-link.active .mud-nav-link-text {
    color: var(--ghub-chrome-fg) !important;
    font-weight: 600;
}

/* ========== Superfici UI pagina — vetro modulare (paper, alert, …) ========== */
.ghub-shell .mud-main-content .mud-paper:not(.ghub-dash-card):not(.ghub-color-swatch):not(.ghub-cal-event), body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-paper:not(.ghub-dash-card):not(.ghub-color-swatch):not(.ghub-cal-event),
.ghub-shell .mud-main-content .mud-alert, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-alert,
.ghub-shell .mud-main-content .mud-card, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-card,
.ghub-shell .mud-main-content .mud-expansion-panels, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-expansion-panels,
.ghub-shell .mud-main-content .mud-stepper, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-stepper {
    --mud-palette-surface: transparent !important;
    background: var(--ghub-card-glass) !important;
    background-color: var(--ghub-card-glass) !important;
    background-image: linear-gradient(
        165deg,
        rgba(var(--ghub-accent-rgb), 0.07) 0%,
        transparent 55%
    ) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.15) !important;
    backdrop-filter: blur(8px) saturate(1.15) !important;
    border: 1px solid var(--ghub-card-border) !important;
    color: var(--ghub-chrome-fg);
}

.ghub-shell .mud-main-content .mud-paper:not(.ghub-dash-card):not(.ghub-color-swatch):not(.ghub-cal-event), body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-paper:not(.ghub-dash-card):not(.ghub-color-swatch):not(.ghub-cal-event) {
    border-top-color: var(--ghub-card-border-top) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.05),
        0 0 18px rgba(var(--ghub-accent-rgb), 0.12),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.18) !important;
}

/* Anteprima colore (VarColors / Collections / Orders / Calendar) — non vetro */
.ghub-shell .mud-main-content .mud-paper.ghub-color-swatch,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-paper.ghub-color-swatch {
    --mud-palette-surface: transparent !important;
    background: var(--ghub-swatch-color) !important;
    background-color: var(--ghub-swatch-color) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
    flex-shrink: 0;
}

/* MudDataGrid — pannello vetro indipendente (toolbar pagina = pannello separato sopra) */
.ghub-shell .mud-main-content .mud-data-grid, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid {
    --mud-palette-surface: transparent !important;
    background: var(--ghub-card-glass) !important;
    background-color: var(--ghub-card-glass) !important;
    background-image: linear-gradient(
        165deg,
        rgba(var(--ghub-accent-rgb), 0.07) 0%,
        transparent 55%
    ) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.15) !important;
    backdrop-filter: blur(8px) saturate(1.15) !important;
    border: 1px solid var(--ghub-card-border) !important;
    border-radius: var(--ghub-radius, 12px) !important;
    color: var(--ghub-chrome-fg);
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.05),
        0 0 18px rgba(var(--ghub-accent-rgb), 0.12) !important;
    overflow: hidden;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-root,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-container, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* MudCalendar (Heron) — non è MudPaper: usa --mud-palette-surface (trasparente in shell) + table-lines scure */
.ghub-shell .mud-main-content .mud-calendar {
    --mud-palette-table-lines: var(--ghub-card-border);
    --mud-palette-lines-default: var(--ghub-card-border);
    --mud-palette-divider: rgba(var(--ghub-accent-rgb), 0.2);
    --mud-cal-cell-hover: rgba(var(--ghub-interactive-rgb), 0.14);
    background: var(--ghub-card-glass) !important;
    background-color: var(--ghub-card-glass) !important;
    background-image: linear-gradient(
        165deg,
        rgba(var(--ghub-accent-rgb), 0.07) 0%,
        transparent 55%
    ) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.15) !important;
    backdrop-filter: blur(8px) saturate(1.15) !important;
    border: 1px solid var(--ghub-card-border) !important;
    border-radius: var(--ghub-radius, 12px) !important;
    color: var(--ghub-chrome-fg);
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.05),
        0 0 18px rgba(var(--ghub-accent-rgb), 0.12),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.18) !important;
    overflow: hidden;
}

.ghub-shell .mud-main-content .mud-calendar.mud-cal-outlined {
    border: 1px solid var(--ghub-card-border) !important;
}

.ghub-shell .mud-main-content .mud-calendar .mud-cal-month-cell,
.ghub-shell .mud-main-content .mud-calendar .mud-cal-week-grid > div.mud-cal-week-not-today,
.ghub-shell .mud-main-content .mud-calendar .mud-cal-work-week-grid > div.mud-cal-week-not-today,
.ghub-shell .mud-main-content .mud-calendar .mud-cal-day-grid > div,
.ghub-shell .mud-main-content .mud-calendar .mud-cal-week-header,
.ghub-shell .mud-main-content .mud-calendar .mud-cal-work-week-header,
.ghub-shell .mud-main-content .mud-calendar .mud-cal-day-header,
.ghub-shell .mud-main-content .mud-calendar .mud-cal-week-cell {
    border-color: var(--ghub-card-border) !important;
}

.ghub-shell .mud-main-content .mud-calendar .mud-cal-week-cell.mud-cal-week-cell-half {
    border-top-color: var(--mud-palette-divider) !important;
}

@media (hover: hover) {
    .ghub-shell .mud-main-content .mud-calendar .mud-cal-month-link:hover,
    .ghub-shell .mud-main-content .mud-calendar .mud-cal-week-link:hover {
        background-color: rgba(var(--ghub-interactive-rgb), 0.1) !important;
    }
}

/* Eventi agenda — colore evento, non vetro paper */
.ghub-shell .mud-main-content .mud-paper.ghub-cal-event,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-paper.ghub-cal-event {
    --mud-palette-surface: transparent !important;
    background: var(--ghub-swatch-color) !important;
    background-color: var(--ghub-swatch-color) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Toolbar + MudDataGrid = due riquadri distinti.
   Nota: MudBlazor 9 MudStack NON emette più .mud-stack (solo d-flex/flex-column/gap-*),
   quindi non si può dipendere da .mud-stack né da :has(+ .mud-data-grid)
   (durante il loader c’è spesso un sibling intermedio → angoli restavano squadrati). */
.ghub-shell .mud-main-content .mud-paper.position-sticky.sticky-top,
.ghub-shell .mud-main-content .mud-paper.sticky-top,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-paper.position-sticky.sticky-top,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-paper.sticky-top {
    margin-bottom: 8px !important;
    border-radius: var(--ghub-radius, 12px) !important;
    overflow: hidden;
    isolation: isolate;
}

.ghub-shell .mud-main-content .mud-data-grid,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid {
    margin-top: 0 !important;
    border-radius: var(--ghub-radius, 12px) !important;
    overflow: hidden;
    isolation: isolate;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar {
    background: rgba(var(--ghub-surface-rgb), 0.72) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.72) !important;
    border: none !important;
    border-bottom: 1px solid rgba(var(--ghub-accent-rgb), 0.14) !important;
    box-shadow: none !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-head .mud-table-cell, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-table-cell {
    background: rgba(var(--ghub-surface-rgb), 0.65) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.65) !important;
    color: var(--ghub-form-muted, #a0a0a0) !important;
    border-bottom-color: var(--ghub-card-border) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-head .mud-table-cell .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-table-cell .mud-typography,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-head .mud-table-sort-label,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-table-sort-label,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-head .mud-button-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-button-root,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-head .mud-table-sort-label .mud-table-sort-label-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-table-sort-label .mud-table-sort-label-icon {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    fill: currentColor !important;
    opacity: 1 !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-row .mud-table-cell, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-row .mud-table-cell {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom-color: rgba(var(--ghub-accent-rgb), 0.12) !important;
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-row:hover .mud-table-cell, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-row:hover .mud-table-cell {
    background: rgba(var(--ghub-accent-rgb), 0.1) !important;
    background-color: rgba(var(--ghub-accent-rgb), 0.1) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-row.mud-selected-item .mud-table-cell, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-row.mud-selected-item .mud-table-cell {
    background: rgba(var(--ghub-accent-rgb), 0.16) !important;
    background-color: rgba(var(--ghub-accent-rgb), 0.16) !important;
}

/* Colonne sticky — sfondo opaco (no trasparenza scroll) */
.ghub-shell .mud-main-content .mud-data-grid .mud-table-cell.sticky-left, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-cell.sticky-left,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-cell.sticky-right, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-cell.sticky-right {
    background-color: var(--ghub-grid-sticky-bg) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-head .mud-table-cell.sticky-left, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-table-cell.sticky-left,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-head .mud-table-cell.sticky-right, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-table-cell.sticky-right {
    background-color: var(--ghub-grid-sticky-bg-head) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-row:hover .mud-table-cell.sticky-left, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-row:hover .mud-table-cell.sticky-left,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-row:hover .mud-table-cell.sticky-right, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-row:hover .mud-table-cell.sticky-right {
    background-color: color-mix(in srgb, var(--ghub-grid-sticky-bg) 72%, rgba(var(--ghub-accent-rgb), 1) 28%) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-row.mud-selected-item .mud-table-cell.sticky-left, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-row.mud-selected-item .mud-table-cell.sticky-left,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-row.mud-selected-item .mud-table-cell.sticky-right, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-row.mud-selected-item .mud-table-cell.sticky-right {
    background-color: color-mix(in srgb, var(--ghub-grid-sticky-bg) 62%, rgba(var(--ghub-accent-rgb), 1) 38%) !important;
}

.ghub-shell .mud-main-content .mud-alert, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-alert {
    border-radius: var(--ghub-radius) !important;
    box-shadow: 0 0 16px rgba(var(--ghub-interactive-rgb), 0.12) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-foot .mud-table-cell, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-foot .mud-table-cell,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-pagination, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination {
    background: rgba(var(--ghub-surface-rgb), 0.82) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.82) !important;
    border-top: 1px solid rgba(var(--ghub-accent-rgb), 0.14) !important;
    border-top-color: rgba(var(--ghub-accent-rgb), 0.14) !important;
    color: var(--ghub-chrome-fg) !important;
}

/* Illuminato: bordi toolbar / grid / footer — accent smorzato (non bianco/pastel) */
.ghub-shell--light .mud-main-content .mud-paper.sticky-top,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top,
.ghub-shell--light .mud-main-content .mud-data-grid,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid {
    border-color: color-mix(in srgb, rgb(var(--ghub-accent-rgb)) 42%, rgba(0, 0, 0, 0.72) 58%) !important;
    border-top-color: color-mix(in srgb, rgb(var(--ghub-accent-rgb)) 48%, rgba(0, 0, 0, 0.65) 52%) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, rgb(var(--ghub-accent-rgb)) 18%, transparent),
        0 0 16px rgba(var(--ghub-accent-rgb), 0.1),
        inset 0 1px 0 color-mix(in srgb, rgb(var(--ghub-accent-rgb)) 22%, transparent) !important;
}

.ghub-shell--light .mud-main-content .mud-data-grid .mud-table-toolbar,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar {
    border-bottom-color: color-mix(in srgb, rgb(var(--ghub-accent-rgb)) 35%, rgba(0, 0, 0, 0.7) 65%) !important;
}

.ghub-shell--light .mud-main-content .mud-data-grid .mud-table-foot .mud-table-cell,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-foot .mud-table-cell,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-table-pagination,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination {
    border-top-color: color-mix(in srgb, rgb(var(--ghub-accent-rgb)) 35%, rgba(0, 0, 0, 0.7) 65%) !important;
}

/* Illuminato: icone toolbar/grid bianche; accese (info/primary) arancioni */
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button .mud-svg-icon, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button svg, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button svg,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-toggle-icon-button .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button .mud-svg-icon, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-toggle-icon-button .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-icon-button:not(.mud-info-text) .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-icon-button:not(.mud-info-text) .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-icon-button:not(.mud-info-text) .mud-svg-icon, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-icon-button:not(.mud-info-text) .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-icon-button:not(.mud-info-text) svg, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-icon-button:not(.mud-info-text) svg,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-toggle-icon-button:not(.mud-info-text) .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-toggle-icon-button:not(.mud-info-text) .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-toggle-icon-button:not(.mud-info-text) .mud-svg-icon, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-toggle-icon-button:not(.mud-info-text) .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-table-pagination .mud-icon-button .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination .mud-icon-button .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-table-pagination .mud-icon-button .mud-svg-icon, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination .mud-icon-button .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-table-pagination .mud-select .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination .mud-select .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-checkbox:not(.mud-checked) .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-checkbox:not(.mud-checked) .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-checkbox:not(.mud-checked) .mud-svg-icon, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-checkbox:not(.mud-checked) .mud-svg-icon {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: currentColor !important;
}

.ghub-shell--light .mud-main-content .mud-data-grid .mud-checkbox.mud-checked .mud-icon-root, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-checkbox.mud-checked .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-data-grid .mud-checkbox.mud-checked .mud-svg-icon, body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-checkbox.mud-checked .mud-svg-icon {
    color: var(--ghub-interactive) !important;
    fill: currentColor !important;
}

/* Illuminato: pulsanti disabilitati (es. OrdersPage RIATTIVA/SOSPENDI) — grigio chiaro, non nero.
   Esclude MudIconButton/MudToggleIconButton (toolbar): restano grigio #757575. */
.ghub-shell--light .mud-main-content .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button),
.ghub-shell--light .mud-main-content .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button),
.ghub-shell--light .mud-main-content .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button).mud-button-filled,
.ghub-shell--light .mud-main-content .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button).mud-button-filled,
.ghub-shell--light .mud-main-content .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button)[class*="mud-button-filled"],
.ghub-shell--light .mud-main-content .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button)[class*="mud-button-filled"],
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button),
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) {
    color: #c8c8c8 !important;
    background: rgba(255, 255, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    --mud-palette-action-disabled: #c8c8c8;
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.16);
}

.ghub-shell--light .mud-main-content .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-button-label,
.ghub-shell--light .mud-main-content .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-button-label,
.ghub-shell--light .mud-main-content .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) svg,
.ghub-shell--light .mud-main-content .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) svg,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-button-label,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-button-label,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-icon-root,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) .mud-icon-root,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root:disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) svg,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-button-root.mud-disabled:not(.mud-icon-button):not(.mud-toggle-icon-button) svg {
    color: #c8c8c8 !important;
    fill: currentColor !important;
    opacity: 1 !important;
}

/* Toolbar icone disabilitate — dopo i pulsanti, così non ereditano #c8c8c8 */
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button:disabled,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled .mud-svg-icon,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled svg,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled svg,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button:disabled .mud-icon-root,
.ghub-shell--light .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button:disabled svg,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button:disabled,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button.mud-disabled,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button:disabled .mud-icon-root,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button.mud-disabled .mud-icon-root,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button:disabled svg,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button.mud-disabled svg {
    color: #757575 !important;
    fill: currentColor !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button:disabled,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled .mud-svg-icon,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled .mud-svg-icon,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button:disabled svg,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-icon-button.mud-disabled svg,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button:disabled .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-paper.sticky-top .mud-toggle-icon-button:disabled svg,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button:disabled,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button.mud-disabled,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button:disabled .mud-icon-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button.mud-disabled .mud-icon-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button:disabled svg,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-paper.sticky-top .mud-icon-button.mud-disabled svg {
    color: color-mix(in srgb, var(--ghub-clickable-fg, #fdd835) 48%, #000 52%) !important;
    fill: currentColor !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Accento arancione — icone accese, link info, pagination attiva */
.ghub-shell .mud-main-content .mud-icon-button.mud-info-text .mud-icon-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-info-text .mud-icon-root,
.ghub-shell .mud-main-content .mud-icon-button.mud-info-text .mud-svg-icon, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-info-text .mud-svg-icon,
.ghub-shell .mud-main-content .mud-icon-button.mud-info-text svg, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-info-text svg,
.ghub-shell .mud-main-content .mud-button-root.mud-info-text, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-button-root.mud-info-text,
.ghub-shell .mud-main-content .mud-button-root.mud-info-text .mud-icon-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-button-root.mud-info-text .mud-icon-root,
.ghub-shell .mud-main-content .mud-toggle-icon-button.mud-info-text .mud-icon-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button.mud-info-text .mud-icon-root,
.ghub-shell .mud-main-content .mud-toggle-icon-button.mud-info-text .mud-svg-icon, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button.mud-info-text .mud-svg-icon,
.ghub-shell .mud-main-content .mud-icon-button.mud-primary-text .mud-icon-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-primary-text .mud-icon-root,
.ghub-shell .mud-main-content .mud-icon-button.mud-primary-text .mud-svg-icon, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-primary-text .mud-svg-icon {
    color: var(--ghub-interactive) !important;
    fill: currentColor !important;
}

/* MudIconButton / MudToggleIconButton — glow lieve = colore icona */
.ghub-shell .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led) .mud-icon-root,
.ghub-shell .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led) .mud-svg-icon,
.ghub-shell .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led) svg,
.ghub-shell .mud-toggle-icon-button:not(:disabled):not(.mud-disabled) .mud-icon-root,
.ghub-shell .mud-toggle-icon-button:not(:disabled):not(.mud-disabled) .mud-svg-icon,
.ghub-shell .mud-toggle-icon-button:not(:disabled):not(.mud-disabled) svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led) .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led) .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led) svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:not(:disabled):not(.mud-disabled) .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:not(:disabled):not(.mud-disabled) .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:not(:disabled):not(.mud-disabled) svg {
    filter:
        drop-shadow(0 0 1px color-mix(in srgb, currentColor 70%, transparent))
        drop-shadow(0 0 4px color-mix(in srgb, currentColor 32%, transparent));
    transition: filter 0.18s ease;
}

@media (hover: hover) {
    .ghub-shell .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led):hover .mud-icon-root,
    .ghub-shell .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led):hover .mud-svg-icon,
    .ghub-shell .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led):hover svg,
    .ghub-shell .mud-toggle-icon-button:not(:disabled):not(.mud-disabled):hover .mud-icon-root,
    .ghub-shell .mud-toggle-icon-button:not(:disabled):not(.mud-disabled):hover .mud-svg-icon,
    .ghub-shell .mud-toggle-icon-button:not(:disabled):not(.mud-disabled):hover svg,
    body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led):hover .mud-icon-root,
    body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led):hover .mud-svg-icon,
    body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:not(:disabled):not(.mud-disabled):not(.ghub-play-led):hover svg,
    body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:not(:disabled):not(.mud-disabled):hover .mud-icon-root,
    body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:not(:disabled):not(.mud-disabled):hover .mud-svg-icon,
    body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:not(:disabled):not(.mud-disabled):hover svg {
        filter:
            drop-shadow(0 0 1.5px color-mix(in srgb, currentColor 82%, transparent))
            drop-shadow(0 0 6px color-mix(in srgb, currentColor 42%, transparent));
    }
}

.ghub-shell .mud-icon-button:disabled .mud-icon-root,
.ghub-shell .mud-icon-button:disabled .mud-svg-icon,
.ghub-shell .mud-icon-button:disabled svg,
.ghub-shell .mud-icon-button.mud-disabled .mud-icon-root,
.ghub-shell .mud-icon-button.mud-disabled .mud-svg-icon,
.ghub-shell .mud-icon-button.mud-disabled svg,
.ghub-shell .mud-toggle-icon-button:disabled .mud-icon-root,
.ghub-shell .mud-toggle-icon-button:disabled .mud-svg-icon,
.ghub-shell .mud-toggle-icon-button:disabled svg,
.ghub-shell .mud-toggle-icon-button.mud-disabled .mud-icon-root,
.ghub-shell .mud-toggle-icon-button.mud-disabled .mud-svg-icon,
.ghub-shell .mud-toggle-icon-button.mud-disabled svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:disabled .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:disabled .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button:disabled svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-disabled .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-disabled .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-icon-button.mud-disabled svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:disabled .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:disabled .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button:disabled svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button.mud-disabled .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button.mud-disabled .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-toggle-icon-button.mud-disabled svg {
    filter: none !important;
}

.ghub-shell .mud-main-content .mud-input, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input,
.ghub-shell .mud-main-content input.mud-input-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog input.mud-input-root,
.ghub-shell .mud-main-content div.mud-input-slot.mud-input-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog div.mud-input-slot.mud-input-root,
.ghub-shell .mud-main-content .mud-select-input, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-select-input,
.ghub-shell .mud-main-content .mud-data-grid .mud-input-slot, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-input-slot {
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell .mud-main-content .mud-input::placeholder, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input::placeholder,
.ghub-shell .mud-main-content input.mud-input-root::placeholder, body:has(.ghub-shell) .mud-dialog-container .mud-dialog input.mud-input-root::placeholder,
.ghub-shell .mud-main-content .mud-input-control .mud-input::placeholder, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input::placeholder {
    color: var(--ghub-interactive) !important;
    opacity: 0.9;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-pagination .mud-select-input, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination .mud-select-input,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-pagination .mud-typography, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination .mud-typography {
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-pagination .mud-select .mud-icon-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-pagination .mud-select .mud-icon-root {
    color: var(--ghub-interactive) !important;
}

/* Header grid — titolo lista + label filtri = grigio muted; MudSelect valore resta arancione */
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar > .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar > .mud-typography,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-typography-h4,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-typography-h5,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-typography-h6,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-typography-subtitle1,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-typography-subtitle2,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-typography-h4,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-typography-h5,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-typography-h6,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-typography-subtitle1,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-typography-subtitle2 {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-control .mud-input-label, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-control .mud-input-label,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-label, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-label,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-label-inputlabel, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-label-inputlabel,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-label.mud-disabled, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-label.mud-disabled,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-label.mud-input-label-inputcontrol, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-label.mud-input-label-inputcontrol {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* MudSelect Tipo — testo arancione, linea e freccia bianche (hint resta muted) */
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-input-slot, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-input-slot,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-select-input, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-select-input,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select input, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select input,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-typography:not(.mud-input-label):not(.mud-input-helper-text), body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-typography:not(.mud-input-label):not(.mud-input-helper-text) {
    color: var(--ghub-interactive) !important;
    -webkit-text-fill-color: var(--ghub-interactive) !important;
}

/* Header grid — valori + placeholder campi testo (Cerca, filtri) = arancione */
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar input.mud-input-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar input.mud-input-root,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar div.mud-input-slot.mud-input-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar div.mud-input-slot.mud-input-root,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-slot,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-slot,
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input,
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-toolbar input.mud-input-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar input.mud-input-root,
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-toolbar div.mud-input-slot.mud-input-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar div.mud-input-slot.mud-input-root,
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-slot,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-slot {
    color: var(--ghub-interactive) !important;
    -webkit-text-fill-color: var(--ghub-interactive) !important;
    caret-color: var(--ghub-interactive);
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input::placeholder,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input::placeholder,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar input.mud-input-root::placeholder,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar input.mud-input-root::placeholder,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-control .mud-input::placeholder,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-control .mud-input::placeholder {
    color: var(--ghub-interactive) !important;
    -webkit-text-fill-color: var(--ghub-interactive) !important;
    opacity: 0.9;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-icon-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-icon-root,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-svg-icon, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-svg-icon,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-input-adornment, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-input-adornment,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-input-adornment svg, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-input-adornment svg {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: currentColor !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-input-underline::before, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-input-underline::before,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-select .mud-input-underline::after, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-select .mud-input-underline::after {
    border-bottom-color: rgba(255, 255, 255, 0.85) !important;
}

/* Campo Cerca — MudBlazor: MudIcon in adornment ha classe .mud-input-adornment-icon
   (MudInputAdornment.razor). AdornmentColor tinge l'icona via mud-*-text / mud-icon-default.
   SVG Material (es. Search) include path clip 24×24 con fill="none": non forzare fill su tutti i path. */
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-root, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-root,
.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-default, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-default {
    color: rgba(255, 255, 255, 0.96) !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon svg path[fill="none"], body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon svg path[fill="none"] {
    fill: none !important;
}

.ghub-shell .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon svg path:not([fill="none"]), body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon svg path:not([fill="none"]) {
    fill: currentColor !important;
}

html body .ghub-shell--light .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-root, html body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-root,
html body .ghub-shell--light .mud-main-content .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-default, html body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar .mud-input-adornment-icon.mud-icon-default {
    color: rgba(255, 255, 255, 0.96) !important;
}

/* Scuro: righe alternate molto discrete (accent minimo) */
.ghub-shell--dark .mud-main-content, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog {
    --mud-palette-table-striped: color-mix(in srgb, rgb(var(--ghub-surface-rgb)) 97%, rgb(var(--ghub-accent-rgb)) 3%);
    --mud-palette-table-hover: rgba(var(--ghub-accent-rgb), 0.08);
}

.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd),
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd),
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd),
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, rgb(var(--ghub-surface-rgb)) 96%, rgb(var(--ghub-accent-rgb)) 4%) !important;
}

.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even),
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even),
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container table tbody tr:nth-of-type(even), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container table tbody tr:nth-of-type(even),
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container table tbody tr:nth-of-type(even), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container table tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-left, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-left,
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-right, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-right,
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-left, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-left,
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-right, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell.sticky-right {
    background-color: color-mix(in srgb, rgb(var(--ghub-surface-rgb)) 95%, rgb(var(--ghub-accent-rgb)) 5%) !important;
}

.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-left, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-left,
.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-right, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-right,
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-left, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-left,
.ghub-shell--dark .mud-main-content .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-right, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell.sticky-right {
    background-color: var(--ghub-grid-sticky-bg) !important;
}

.ghub-shell--dark .mud-main-content .mud-paper:not(.ghub-dash-card):not(.ghub-color-swatch):not(.ghub-cal-event), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-paper:not(.ghub-dash-card):not(.ghub-color-swatch):not(.ghub-cal-event),
.ghub-shell--dark .mud-main-content .mud-data-grid, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid,
.ghub-shell--dark .mud-main-content .mud-calendar, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-calendar,
.ghub-shell--dark .mud-main-content .mud-alert, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-alert,
.ghub-shell--dark .mud-main-content .mud-card, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-card,
.ghub-shell--dark .mud-main-content .mud-expansion-panels, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-expansion-panels,
.ghub-shell--dark .mud-main-content .mud-stepper, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-stepper {
    background: var(--ghub-card-glass) !important;
    background-color: var(--ghub-card-glass) !important;
    border-color: var(--ghub-card-border) !important;
}

.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-toolbar, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-toolbar {
    background: rgba(var(--ghub-surface-rgb), 0.78) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.78) !important;
}

.ghub-shell--dark .mud-main-content .mud-data-grid .mud-table-head .mud-table-cell, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-data-grid .mud-table-head .mud-table-cell {
    background: rgba(var(--ghub-surface-rgb), 0.75) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.75) !important;
}

/* ========== Dashboard cards — verde scuro + glow neon (mock) ========== */
.ghub-shell .ghub-dashboard .mud-paper.ghub-dash-card,
.ghub-shell .ghub-dashboard .ghub-dash-card.mud-paper,
html body .ghub-shell .ghub-dashboard .mud-paper.ghub-dash-card {
    --mud-palette-surface: transparent !important;
    --mud-palette-background: transparent !important;
    position: relative;
    background: var(--ghub-dash-card-bottom) !important;
    background-color: var(--ghub-dash-card-bottom) !important;
    background-image: linear-gradient(
        180deg,
        var(--ghub-dash-card-top) 0%,
        var(--ghub-dash-card-bottom) 100%
    ) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.25) !important;
    backdrop-filter: blur(6px) saturate(1.25) !important;
    border: 1px solid var(--ghub-dash-card-border) !important;
    border-radius: var(--ghub-radius) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.1),
        0 0 8px var(--ghub-dash-card-glow),
        0 0 18px rgba(var(--ghub-accent-rgb), 0.16),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.14) !important;
    color: var(--ghub-chrome-fg);
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.15s ease, background 0.22s ease;
    overflow: hidden;
}

.ghub-shell--dark .ghub-dashboard .mud-paper.ghub-dash-card,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card.mud-paper,
html body .ghub-shell--dark .ghub-dashboard .mud-paper.ghub-dash-card {
    background: var(--ghub-dash-card-bottom) !important;
    background-color: var(--ghub-dash-card-bottom) !important;
    background-image: linear-gradient(
        180deg,
        var(--ghub-dash-card-top) 0%,
        var(--ghub-dash-card-bottom) 100%
    ) !important;
    border-color: var(--ghub-dash-card-border) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.09),
        0 0 8px var(--ghub-dash-card-glow),
        0 0 16px rgba(var(--ghub-accent-rgb), 0.14),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.12) !important;
}

.ghub-shell .ghub-dashboard .ghub-dash-card.mud-paper:hover {
    background-image: linear-gradient(
        180deg,
        var(--ghub-dash-hover-top) 0%,
        var(--ghub-dash-hover-bottom) 100%
    ) !important;
    border-color: rgba(var(--ghub-accent-rgb), 0.48) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.14),
        0 0 10px rgba(var(--ghub-accent-rgb), 0.24),
        0 0 22px rgba(var(--ghub-accent-rgb), 0.2),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.16) !important;
    transform: translateY(-2px);
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-card.mud-paper:hover {
    background-image: linear-gradient(
        180deg,
        var(--ghub-dash-hover-top) 0%,
        var(--ghub-dash-hover-bottom) 100%
    ) !important;
}

.ghub-shell .ghub-dashboard .ghub-dash-card.mud-paper::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--ghub-accent-rgb), 0.4) 25%,
        rgba(var(--ghub-accent-rgb), 0.65) 50%,
        rgba(var(--ghub-accent-rgb), 0.4) 75%,
        transparent
    );
    pointer-events: none;
    z-index: 1;
}

.ghub-dashboard .ghub-dash-card .mud-typography,
.ghub-dashboard .ghub-dash-card .mud-text-secondary {
    color: inherit;
}

.ghub-dashboard .ghub-dash-card .mud-text-secondary {
    opacity: 0.72;
}

.ghub-dashboard .ghub-dash-toolbar {
    color: var(--ghub-chrome-fg);
}

.ghub-dashboard .ghub-dash-toolbar .mud-icon-button,
.ghub-dashboard .ghub-dash-cta.mud-button-root,
.ghub-dashboard .ghub-dash-empty.mud-alert,
.ghub-dashboard .ghub-dash-card .mud-icon-button:not(.ghub-play-led) {
    background: rgba(var(--ghub-surface-rgb), 0.45) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.45) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(var(--ghub-accent-rgb), 0.32) !important;
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-toolbar .mud-icon-button,
.ghub-shell--dark .ghub-dashboard .ghub-dash-cta.mud-button-root,
.ghub-shell--dark .ghub-dashboard .ghub-dash-empty.mud-alert,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .mud-icon-button:not(.ghub-play-led) {
    background: rgba(var(--ghub-surface-rgb), 0.55) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.55) !important;
    border-color: rgba(var(--ghub-accent-rgb), 0.32) !important;
}

.ghub-dashboard .ghub-dash-toolbar .mud-icon-button {
    border-radius: 10px;
}

.ghub-dashboard .ghub-dash-empty.mud-alert {
    border-radius: var(--ghub-radius);
    box-shadow: 0 0 24px rgba(var(--ghub-accent-rgb), 0.15);
}

.ghub-dashboard .ghub-dash-empty .mud-alert-message,
.ghub-dashboard .ghub-dash-empty .mud-alert-icon {
    color: inherit !important;
}

.ghub-dashboard .ghub-dash-cta.mud-button-root:hover,
.ghub-dashboard .ghub-dash-card .mud-icon-button:not(.ghub-play-led):hover {
    background: rgba(var(--ghub-surface-rgb), 0.58) !important;
    box-shadow: 0 0 18px rgba(var(--ghub-accent-rgb), 0.28);
}

.ghub-shell--light .ghub-dashboard .ghub-dash-card .mud-button-outlined {
    border-color: rgba(var(--ghub-accent-rgb), 0.4) !important;
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-card .mud-button-outlined {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.ghub-shell--light .ghub-dashboard .ghub-dash-card .mud-icon-button.mud-button-outlined:not(.ghub-play-led) {
    box-shadow: 0 0 10px rgba(0, 230, 170, 0.25);
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-card .mud-icon-button.mud-button-outlined:not(.ghub-play-led) {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.ghub-dashboard .mud-progress-linear {
    border-radius: 4px;
    overflow: hidden;
}

/* Progress LED: track = spento, fill = acceso */
.ghub-dashboard .ghub-progress-led.mud-progress-linear,
.ghub-dashboard .ghub-progress-led .mud-progress-linear-background {
    background-color: #1f5c42 !important;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.35);
}

.ghub-dashboard .ghub-progress-led .mud-progress-linear-bar {
    background-color: #5cffc2 !important;
    background-image: linear-gradient(
        90deg,
        #00c853 0%,
        #69ffd6 50%,
        #00e676 100%
    ) !important;
    box-shadow:
        0 0 4px #00ff9c,
        0 0 10px rgba(0, 230, 118, 0.7),
        0 0 16px rgba(0, 200, 100, 0.45);
}

/* Play LED spento / acceso (anche se disabled durante run) */
.ghub-dashboard .ghub-dash-card .ghub-play-led.mud-icon-button,
.ghub-dashboard .ghub-dash-card .ghub-play-led.mud-icon-button:disabled,
.ghub-dashboard .ghub-dash-card .ghub-play-led.mud-icon-button.mud-button-outlined {
    background: rgba(10, 30, 22, 0.55) !important;
    background-color: rgba(10, 30, 22, 0.55) !important;
    border: 1px solid rgba(0, 80, 50, 0.55) !important;
    border-radius: 8px !important;
    color: inherit !important;
    opacity: 1 !important;
}

.ghub-dashboard .ghub-dash-card .ghub-play-led .mud-icon-root,
.ghub-dashboard .ghub-dash-card .ghub-play-led .mud-svg-icon,
.ghub-dashboard .ghub-dash-card .ghub-play-led svg {
    fill: currentColor !important;
}

.ghub-dashboard .ghub-dash-card .ghub-play-led--off,
.ghub-dashboard .ghub-dash-card .ghub-play-led--off.mud-button-outlined {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(0, 55, 35, 0.7) !important;
}

.ghub-dashboard .ghub-dash-card .ghub-play-led--off .mud-icon-root,
.ghub-dashboard .ghub-dash-card .ghub-play-led--off .mud-svg-icon,
.ghub-dashboard .ghub-dash-card .ghub-play-led--off svg {
    color: #3d9a6e !important;
    filter: none;
    opacity: 1;
}

.ghub-dashboard .ghub-dash-card .ghub-play-led--on,
.ghub-dashboard .ghub-dash-card .ghub-play-led--on.mud-button-outlined,
.ghub-dashboard .ghub-dash-card .ghub-play-led--on:disabled {
    border-color: rgba(0, 230, 160, 0.7) !important;
    box-shadow:
        0 0 8px rgba(0, 255, 156, 0.5),
        0 0 18px rgba(0, 200, 120, 0.35),
        inset 0 0 8px rgba(0, 255, 180, 0.18) !important;
}

.ghub-dashboard .ghub-dash-card .ghub-play-led--on .mud-icon-root,
.ghub-dashboard .ghub-dash-card .ghub-play-led--on .mud-svg-icon,
.ghub-dashboard .ghub-dash-card .ghub-play-led--on svg {
    color: #7dffe0 !important;
    filter: drop-shadow(0 0 4px #00ff9c) drop-shadow(0 0 12px rgba(0, 230, 118, 0.85));
    opacity: 1;
}

.ghub-dashboard .ghub-dash-card .ghub-play-led--off:hover:not(:disabled) .mud-icon-root,
.ghub-dashboard .ghub-dash-card .ghub-play-led--off:hover:not(:disabled) .mud-svg-icon,
.ghub-dashboard .ghub-dash-card .ghub-play-led--off:hover:not(:disabled) svg {
    color: #55c48a !important;
}

/* ========== Dark: testo verde su oggetti cliccabili ========== */
.ghub-shell--dark .ghub-appbar .mud-icon-button,
.ghub-shell--dark .ghub-appbar .mud-button-root,
.ghub-shell--dark .ghub-appbar .mud-icon-button .mud-icon-root,
.ghub-shell--dark .ghub-appbar .mud-icon-button .mud-svg-icon,
.ghub-shell--dark .ghub-appbar .mud-icon-button svg,
.ghub-shell--dark .ghub-appbar .mud-button-root .mud-button-label,
.ghub-shell--dark .ghub-appbar .ghub-company-select,
.ghub-shell--dark .ghub-appbar .ghub-company-select .mud-input-slot,
.ghub-shell--dark .ghub-appbar .ghub-company-select .mud-input-label,
.ghub-shell--dark .ghub-appbar .ghub-company-select .mud-typography,
.ghub-shell--dark .ghub-appbar .ghub-company-select input,
.ghub-shell--dark .ghub-appbar .ghub-company-select .mud-select-input,
.ghub-shell--dark .ghub-appbar .ghub-company-select .mud-input-adornment,
.ghub-shell--dark .ghub-appbar .ghub-company-select .mud-input-adornment .mud-icon-root,
.ghub-shell--dark .ghub-appbar .ghub-company-select .mud-input-adornment svg,
.ghub-shell--dark .ghub-appbar .mud-menu .mud-button-root,
.ghub-shell--dark .ghub-appbar .mud-avatar {
    color: var(--ghub-clickable-fg) !important;
}

.ghub-shell--dark .ghub-drawer .mud-nav-link,
.ghub-shell--dark .ghub-drawer a.mud-nav-link.ghub-nav-link,
.ghub-shell--dark .ghub-drawer .mud-nav-link .mud-nav-link-text,
.ghub-shell--dark .ghub-drawer .mud-nav-link.active,
.ghub-shell--dark .ghub-drawer .mud-nav-link.active .mud-nav-link-text {
    color: var(--ghub-chrome-fg) !important;
}

/* Scuro: icone drawer restano multicolore (non ereditare clickable-fg) */
.ghub-shell--dark .ghub-drawer .mud-nav-link .mud-nav-link-icon,
.ghub-shell--dark .ghub-drawer .mud-nav-link .mud-icon-root,
.ghub-shell--dark .ghub-drawer .mud-nav-link .mud-svg-icon {
    color: inherit;
}

.ghub-shell--dark .ghub-dashboard .mud-button-root:not(.ghub-play-led),
.ghub-shell--dark .ghub-dashboard .mud-icon-button:not(.ghub-play-led),
.ghub-shell--dark .ghub-dashboard .mud-button-root:not(.ghub-play-led) .mud-button-label,
.ghub-shell--dark .ghub-dashboard .mud-icon-button:not(.ghub-play-led) .mud-icon-root,
.ghub-shell--dark .ghub-dashboard .mud-icon-button:not(.ghub-play-led) .mud-svg-icon,
.ghub-shell--dark .ghub-dashboard .mud-icon-button:not(.ghub-play-led) svg,
.ghub-shell--dark .ghub-dashboard a.mud-typography,
.ghub-shell--dark .mud-main-content .mud-button-root, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-content .mud-button-root,
.ghub-shell--dark .mud-main-content .mud-icon-button:not(.ghub-play-led):not(.mud-info-text):not(.mud-primary-text):not(:disabled):not(.mud-disabled), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-content .mud-icon-button:not(.ghub-play-led):not(.mud-info-text):not(.mud-primary-text):not(:disabled):not(.mud-disabled),
.ghub-shell--dark .mud-main-content .mud-button-root .mud-button-label, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-content .mud-button-root .mud-button-label,
.ghub-shell--dark .mud-main-content .mud-icon-button:not(.ghub-play-led):not(.mud-info-text):not(.mud-primary-text):not(:disabled):not(.mud-disabled) .mud-icon-root, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-content .mud-icon-button:not(.ghub-play-led):not(.mud-info-text):not(.mud-primary-text):not(:disabled):not(.mud-disabled) .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-icon-button:not(.ghub-play-led):not(.mud-info-text):not(.mud-primary-text):not(:disabled):not(.mud-disabled) svg, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-content .mud-icon-button:not(.ghub-play-led):not(.mud-info-text):not(.mud-primary-text):not(:disabled):not(.mud-disabled) svg,
.ghub-shell--dark .mud-main-content .mud-nav-link, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-nav-link,
.ghub-shell--dark .mud-main-content .mud-tab, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-tab,
/* Chip semantici (OK/Warning/Error/Info) conservano i colori Mud; Default resta clickable-fg. */
.ghub-shell--dark .mud-main-content .mud-chip:not(.mud-chip-color-success):not(.mud-chip-color-warning):not(.mud-chip-color-error):not(.mud-chip-color-info),
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-chip:not(.mud-chip-color-success):not(.mud-chip-color-warning):not(.mud-chip-color-error):not(.mud-chip-color-info),
.ghub-shell--dark .mud-main-content a:not(.mud-nav-link), body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-content a:not(.mud-nav-link) {
    color: var(--ghub-clickable-fg) !important;
}

.ghub-shell--dark .mud-main-content .mud-chip.mud-chip-color-success,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-chip.mud-chip-color-success {
    color: var(--mud-palette-success-text, #fff) !important;
}

.ghub-shell--dark .mud-main-content .mud-chip.mud-chip-color-warning,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-chip.mud-chip-color-warning {
    color: var(--mud-palette-warning-text, #fff) !important;
}

.ghub-shell--dark .mud-main-content .mud-chip.mud-chip-color-error,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-chip.mud-chip-color-error {
    color: var(--mud-palette-error-text, #fff) !important;
}

.ghub-shell--dark .mud-main-content .mud-chip.mud-chip-color-info,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-chip.mud-chip-color-info {
    color: var(--mud-palette-info-text, #fff) !important;
}

.ghub-shell--dark .mud-main-content .mud-icon-button.mud-info-text .mud-icon-root, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-icon-button.mud-info-text .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-icon-button.mud-info-text .mud-svg-icon, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-icon-button.mud-info-text .mud-svg-icon,
.ghub-shell--dark .mud-main-content .mud-icon-button.mud-primary-text .mud-icon-root, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-icon-button.mud-primary-text .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-toggle-icon-button.mud-info-text .mud-icon-root, body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-toggle-icon-button.mud-info-text .mud-icon-root {
    color: var(--ghub-interactive) !important;
    fill: currentColor !important;
}

.ghub-shell .mud-main-content .mud-selected-row, body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-selected-row {
    background-color: var(--ghub-interactive-soft) !important;
}

/* Dark: LED play/progress come tema chiaro (non silver) */
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led.mud-icon-button,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led.mud-icon-button:disabled,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led.mud-icon-button.mud-button-outlined {
    background: rgba(10, 30, 22, 0.65) !important;
    background-color: rgba(10, 30, 22, 0.65) !important;
    border: 1px solid rgba(0, 100, 60, 0.55) !important;
    color: inherit !important;
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--off,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--off.mud-button-outlined {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(0, 70, 42, 0.75) !important;
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--off .mud-icon-root,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--off .mud-svg-icon,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--off svg {
    color: #3d9a6e !important;
    filter: none;
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--on,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--on.mud-button-outlined,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--on:disabled {
    border-color: rgba(0, 230, 160, 0.75) !important;
    box-shadow:
        0 0 8px rgba(0, 255, 156, 0.55),
        0 0 18px rgba(0, 200, 120, 0.4),
        inset 0 0 8px rgba(0, 255, 180, 0.2) !important;
}

.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--on .mud-icon-root,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--on .mud-svg-icon,
.ghub-shell--dark .ghub-dashboard .ghub-dash-card .ghub-play-led--on svg {
    color: #7dffe0 !important;
    filter: drop-shadow(0 0 4px #00ff9c) drop-shadow(0 0 12px rgba(0, 230, 118, 0.9));
}

.ghub-shell--dark .ghub-dashboard .ghub-progress-led.mud-progress-linear,
.ghub-shell--dark .ghub-dashboard .ghub-progress-led .mud-progress-linear-background {
    background-color: #1f5c42 !important;
}

.ghub-shell--dark .ghub-dashboard .ghub-progress-led .mud-progress-linear-bar {
    background-color: #5cffc2 !important;
    background-image: linear-gradient(
        90deg,
        #00c853 0%,
        #69ffd6 50%,
        #00e676 100%
    ) !important;
    box-shadow:
        0 0 4px #00ff9c,
        0 0 10px rgba(0, 230, 118, 0.75),
        0 0 16px rgba(0, 200, 100, 0.5);
}

/* ========== Modulo — lettera accent (Illuminato accesa / Scuro spenta) ========== */
.ghub-shell .ghub-logo__accent {
    font-weight: 700;
}

/* Scuro: accent spenta (colore modulo piatto, no glow) */
.ghub-shell--dark .ghub-logo .ghub-logo__accent {
    color: var(--ghub-clickable-fg) !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Illuminato: accent accesa — glow per modulo (shell--light + module sulla stessa MudLayout) */
.ghub-module--hub.ghub-shell--light .ghub-logo__accent {
    color: #ff8a80;
    text-shadow:
        0 0 2px #ffffff,
        0 0 8px rgba(255, 138, 128, 0.85),
        0 0 18px rgba(229, 57, 53, 0.65);
}

.ghub-module--agent.ghub-shell--light .ghub-logo__accent {
    color: #7dffe0;
    text-shadow:
        0 0 2px #ffffff,
        0 0 6px #b8ffe8,
        0 0 12px #00ffb0,
        0 0 22px #00e676,
        0 0 36px rgba(0, 230, 118, 0.7);
}

.ghub-module--bridge.ghub-shell--light .ghub-logo__accent {
    color: #82b1ff;
    text-shadow:
        0 0 2px #ffffff,
        0 0 8px rgba(130, 177, 255, 0.85),
        0 0 18px rgba(30, 136, 229, 0.6);
}

.ghub-module--sync.ghub-shell--light .ghub-logo__accent {
    color: #e1bee7;
    text-shadow:
        0 0 2px #ffffff,
        0 0 8px rgba(225, 190, 231, 0.85),
        0 0 18px rgba(126, 87, 194, 0.6);
}

.ghub-module--atelier.ghub-shell--light .ghub-logo__accent {
    color: #fff59d;
    text-shadow:
        0 0 2px #ffffff,
        0 0 8px rgba(255, 245, 157, 0.85),
        0 0 18px rgba(253, 216, 53, 0.55);
}

/* Nav icone multicolore — slot 1–5 (link, MudNavGroup header, nth-child) */
.ghub-shell .ghub-drawer .ghub-nav-link--1 .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-link--1 .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-link--1 .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--1 > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--1 > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-group--1 > .mud-nav-link .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+1) .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+1) .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+1) .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+1) > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+1) > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+1) > .mud-nav-link .mud-svg-icon {
    color: #00e5a0 !important;
    fill: #00e5a0 !important;
}

.ghub-shell .ghub-drawer .ghub-nav-link--2 .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-link--2 .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-link--2 .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--2 > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--2 > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-group--2 > .mud-nav-link .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+2) .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+2) .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+2) .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+2) > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+2) > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+2) > .mud-nav-link .mud-svg-icon {
    color: #64b5f6 !important;
    fill: #64b5f6 !important;
}

.ghub-shell .ghub-drawer .ghub-nav-link--3 .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-link--3 .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-link--3 .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--3 > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--3 > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-group--3 > .mud-nav-link .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+3) .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+3) .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+3) .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+3) > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+3) > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+3) > .mud-nav-link .mud-svg-icon {
    color: #ffb74d !important;
    fill: #ffb74d !important;
}

.ghub-shell .ghub-drawer .ghub-nav-link--4 .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-link--4 .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-link--4 .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--4 > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--4 > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-group--4 > .mud-nav-link .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+4) .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+4) .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+4) .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+4) > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+4) > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+4) > .mud-nav-link .mud-svg-icon {
    color: #ce93d8 !important;
    fill: #ce93d8 !important;
}

.ghub-shell .ghub-drawer .ghub-nav-link--5 .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-link--5 .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-link--5 .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--5 > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-nav-group--5 > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-nav-group--5 > .mud-nav-link .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+5) .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+5) .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-link:nth-child(5n+5) .mud-svg-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+5) > .mud-nav-link .mud-nav-link-icon,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+5) > .mud-nav-link .mud-icon-root,
.ghub-shell .ghub-drawer .ghub-navmenu > .mud-nav-group:nth-child(5n+5) > .mud-nav-link .mud-svg-icon {
    color: #ef9a9a !important;
    fill: #ef9a9a !important;
}

/* ========== Dialog — chrome + form (renderizzati su body, fuori .ghub-shell) ========== */
/* Pannello opaco: stesso hue di --ghub-surface-rgb, senza alpha (niente griglia sotto) */
body:has(.ghub-shell) .mud-dialog-container .mud-dialog,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog.mud-paper {
    --mud-palette-surface: rgb(var(--ghub-surface-rgb)) !important;
    background: rgb(var(--ghub-surface-rgb)) !important;
    background-color: rgb(var(--ghub-surface-rgb)) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body:has(.ghub-shell) .mud-dialog-container .mud-dialog-title {
    background: rgb(var(--ghub-surface-rgb)) !important;
    background-color: rgb(var(--ghub-surface-rgb)) !important;
    color: var(--ghub-chrome-fg) !important;
    border-bottom: 1px solid var(--ghub-card-border) !important;
}

body:has(.ghub-shell) .mud-dialog-container .mud-dialog-title .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog-title .mud-icon-root {
    color: var(--ghub-chrome-fg) !important;
}

body:has(.ghub-shell) .mud-dialog-container .mud-dialog-content {
    background: rgb(var(--ghub-surface-rgb)) !important;
    background-color: rgb(var(--ghub-surface-rgb)) !important;
    color: var(--ghub-chrome-fg) !important;
}

body:has(.ghub-shell) .mud-dialog-container .mud-dialog-actions {
    background: rgb(var(--ghub-surface-rgb)) !important;
    background-color: rgb(var(--ghub-surface-rgb)) !important;
    border-top: 1px solid rgba(var(--ghub-accent-rgb), 0.14) !important;
}

/* ---------- Form fields — vetro (pagina + dialog) ---------- */
.ghub-shell .mud-main-content .mud-input.mud-input-outlined,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input.mud-input-outlined {
    border-radius: 10px !important;
    background: var(--ghub-select-glass) !important;
    background-color: var(--ghub-select-glass) !important;
    background-image: linear-gradient(
        165deg,
        rgba(var(--ghub-accent-rgb), 0.08) 0%,
        transparent 55%
    ) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.15) !important;
    backdrop-filter: blur(8px) saturate(1.15) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.06),
        0 0 16px rgba(var(--ghub-accent-rgb), 0.14),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.16) !important;
    transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

/* Outer control: niente fill opaco/trasparente inline che annulla il vetro interno */
.ghub-shell .mud-main-content .mud-input-control:not(.ghub-company-select),
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control {
    background: transparent !important;
    background-color: transparent !important;
}

.ghub-shell .mud-main-content .mud-input-outlined .mud-input-outlined-border,
.ghub-shell .mud-main-content fieldset.mud-input-outlined-border,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-outlined .mud-input-outlined-border,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog fieldset.mud-input-outlined-border {
    border-color: var(--ghub-card-border) !important;
    border-radius: 10px !important;
}

.ghub-shell .mud-main-content .mud-input-outlined:hover .mud-input-outlined-border,
.ghub-shell .mud-main-content fieldset.mud-input-outlined-border:hover,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-outlined:hover .mud-input-outlined-border,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog fieldset.mud-input-outlined-border:hover {
    border-color: rgba(var(--ghub-accent-rgb), 0.55) !important;
}

.ghub-shell .mud-main-content .mud-input.mud-input-outlined:hover,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input.mud-input-outlined:hover {
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.1),
        0 0 20px rgba(var(--ghub-accent-rgb), 0.2),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.2) !important;
}

.ghub-shell .mud-main-content .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.ghub-shell .mud-main-content .mud-input-outlined.mud-input-focused fieldset.mud-input-outlined-border,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-outlined.mud-input-focused fieldset.mud-input-outlined-border {
    border-color: var(--ghub-interactive) !important;
    border-width: 2px !important;
}

.ghub-shell .mud-main-content .mud-input.mud-input-outlined.mud-input-focused,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input.mud-input-outlined.mud-input-focused {
    background: var(--ghub-select-glass) !important;
    background-color: var(--ghub-select-glass) !important;
    background-image: linear-gradient(
        165deg,
        rgba(var(--ghub-interactive-rgb), 0.12) 0%,
        transparent 55%
    ) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-interactive-rgb), 0.22),
        0 0 22px rgba(var(--ghub-interactive-rgb), 0.28),
        inset 0 1px 0 rgba(var(--ghub-interactive-rgb), 0.18) !important;
}

.ghub-shell .mud-main-content .mud-input-label-outlined,
.ghub-shell .mud-main-content .mud-input-label-inputcontrol,
.ghub-shell .mud-main-content .mud-input-label,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-label-outlined,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-label-inputcontrol,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-label {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.ghub-shell .mud-main-content .mud-input-outlined.mud-input-focused .mud-input-label,
.ghub-shell .mud-main-content .mud-input-control:focus-within .mud-input-label-outlined,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-outlined.mud-input-focused .mud-input-label,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control:focus-within .mud-input-label-outlined {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
}

.ghub-shell .mud-main-content .mud-input,
.ghub-shell .mud-main-content input.mud-input-root,
.ghub-shell .mud-main-content div.mud-input-slot.mud-input-root,
.ghub-shell .mud-main-content .mud-select-input,
.ghub-shell .mud-main-content .mud-select .mud-input-slot,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog input.mud-input-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog div.mud-input-slot.mud-input-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-select-input,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-select .mud-input-slot {
    color: var(--ghub-chrome-fg) !important;
}

/* Icone adornment campi (Select / Autocomplete / TextField) — arancione interattivo */
.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment,
.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment .mud-icon-root,
.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment .mud-svg-icon,
.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment .mud-icon-default,
.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment .mud-input-adornment-icon,
.ghub-shell .mud-main-content .mud-select .mud-input-adornment,
.ghub-shell .mud-main-content .mud-autocomplete .mud-input-adornment,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-icon-default,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-input-adornment-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-select .mud-input-adornment,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-autocomplete .mud-input-adornment {
    color: var(--ghub-interactive) !important;
}

.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment svg,
.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment svg *:not([fill="none"]),
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment svg *:not([fill="none"]) {
    color: var(--ghub-interactive) !important;
    fill: currentColor !important;
}

.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment svg [fill="none"],
.ghub-shell .mud-main-content .mud-input-control .mud-input-adornment svg path[fill="none"],
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment svg [fill="none"],
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment svg path[fill="none"] {
    fill: none !important;
}

/* Freccia MudSelect / clear Autocomplete */
.ghub-shell .mud-main-content .mud-select .mud-input-adornment-end .mud-icon-root,
.ghub-shell .mud-main-content .mud-autocomplete .mud-input-adornment-end .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-select .mud-input-adornment-end .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-autocomplete .mud-input-adornment-end .mud-icon-root {
    color: var(--ghub-interactive) !important;
}

/* HelperText / hint sotto i campi */
.ghub-shell .mud-main-content .mud-input-helper-text,
.ghub-shell .mud-main-content .mud-input-control-helper-container,
.ghub-shell .mud-main-content .mud-input-control-helper-container .mud-typography,
.ghub-shell .mud-main-content .mud-input-helper-text .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-helper-text,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control-helper-container,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-control-helper-container .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-helper-text .mud-typography {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
}

/* Checkbox / Radio / Switch — testo label = stesso grigio */
.ghub-shell .mud-main-content .mud-checkbox .mud-typography,
.ghub-shell .mud-main-content .mud-radio .mud-typography,
.ghub-shell .mud-main-content .mud-switch .mud-typography,
.ghub-shell .mud-main-content .mud-input-control.mud-checkbox .mud-typography,
.ghub-shell .mud-main-content .mud-input-control.mud-radio .mud-typography,
.ghub-shell .mud-main-content .mud-input-control.mud-switch .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-checkbox .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-radio .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-switch .mud-typography {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
}

/* MudTable (non DataGrid) — titoli colonna */
.ghub-shell .mud-main-content .mud-table .mud-table-head .mud-table-cell,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-table .mud-table-head .mud-table-cell,
.ghub-shell .mud-main-content .mud-table .mud-table-head .mud-table-cell .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-table .mud-table-head .mud-table-cell .mud-typography,
.ghub-shell .mud-main-content .mud-table .mud-table-head .mud-table-sort-label,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-table .mud-table-head .mud-table-sort-label {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
}

/* NumericField spinner */
.ghub-shell .mud-main-content .mud-input-numeric-spin .mud-icon-button .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-input-numeric-spin .mud-icon-button .mud-icon-root {
    color: var(--ghub-chrome-fg) !important;
}

/* ---------- Scuro: valori + icone = accent logo; label/hint = bianco ---------- */
.ghub-shell--dark .mud-main-content .mud-input,
.ghub-shell--dark .mud-main-content input.mud-input-root,
.ghub-shell--dark .mud-main-content div.mud-input-slot.mud-input-root,
.ghub-shell--dark .mud-main-content .mud-select-input,
.ghub-shell--dark .mud-main-content .mud-select .mud-input-slot,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog input.mud-input-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog div.mud-input-slot.mud-input-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-select-input,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-select .mud-input-slot {
    color: var(--ghub-clickable-fg) !important;
}

.ghub-shell--dark .mud-main-content .mud-input-label-outlined,
.ghub-shell--dark .mud-main-content .mud-input-label-inputcontrol,
.ghub-shell--dark .mud-main-content .mud-input-label,
.ghub-shell--dark .mud-main-content .mud-input-outlined.mud-input-focused .mud-input-label,
.ghub-shell--dark .mud-main-content .mud-input-control:focus-within .mud-input-label-outlined,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-label-outlined,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-label-inputcontrol,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-label,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-outlined.mud-input-focused .mud-input-label,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control:focus-within .mud-input-label-outlined {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.ghub-shell--dark .mud-main-content .mud-input-helper-text,
.ghub-shell--dark .mud-main-content .mud-input-control-helper-container,
.ghub-shell--dark .mud-main-content .mud-input-control-helper-container .mud-typography,
.ghub-shell--dark .mud-main-content .mud-input-helper-text .mud-typography,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-helper-text,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control-helper-container,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control-helper-container .mud-typography,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-helper-text .mud-typography {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
}

.ghub-shell--dark .mud-main-content .mud-input-control .mud-input-adornment,
.ghub-shell--dark .mud-main-content .mud-input-control .mud-input-adornment .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-input-control .mud-input-adornment .mud-svg-icon,
.ghub-shell--dark .mud-main-content .mud-input-control .mud-input-adornment .mud-icon-default,
.ghub-shell--dark .mud-main-content .mud-input-control .mud-input-adornment .mud-input-adornment-icon,
.ghub-shell--dark .mud-main-content .mud-select .mud-input-adornment,
.ghub-shell--dark .mud-main-content .mud-autocomplete .mud-input-adornment,
.ghub-shell--dark .mud-main-content .mud-select .mud-input-adornment-end .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-autocomplete .mud-input-adornment-end .mud-icon-root,
.ghub-shell--dark .mud-main-content .mud-input-numeric-spin .mud-icon-button .mud-icon-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-icon-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-svg-icon,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-icon-default,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment .mud-input-adornment-icon,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-select .mud-input-adornment,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-autocomplete .mud-input-adornment,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-select .mud-input-adornment-end .mud-icon-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-autocomplete .mud-input-adornment-end .mud-icon-root,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-numeric-spin .mud-icon-button .mud-icon-root {
    color: var(--ghub-clickable-fg) !important;
}

.ghub-shell--dark .mud-main-content .mud-input-control .mud-input-adornment svg,
.ghub-shell--dark .mud-main-content .mud-input-control .mud-input-adornment svg *:not([fill="none"]),
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment svg,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-input-control .mud-input-adornment svg *:not([fill="none"]) {
    color: var(--ghub-clickable-fg) !important;
    fill: currentColor !important;
}

/* Scuro: footer form — stessi colori del tema Illuminato (non accent logo) */
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text-default,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text-default .mud-button-label,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root:not(.mud-button-filled):not([class*="mud-button-text-error"]):not([class*="mud-button-text-success"]):not([class*="mud-button-filled-"]) {
    color: rgba(255, 255, 255, 0.96) !important;
}

body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text-error,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text-error .mud-button-label,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-error-text,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-error-text .mud-button-label {
    color: var(--mud-palette-error, #f44336) !important;
}

body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-filled-success,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-filled-success .mud-button-label {
    color: #fff !important;
    background-color: var(--mud-palette-success, #4caf50) !important;
}

/* ---------- Collapse form (MudStack.bg-light + MudCollapse) ---------- */
.ghub-shell .mud-main-content .bg-light,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .bg-light {
    background: rgba(var(--ghub-surface-rgb), 0.72) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.72) !important;
    background-image: linear-gradient(
        165deg,
        rgba(var(--ghub-accent-rgb), 0.1) 0%,
        transparent 60%
    ) !important;
    border: 1px solid var(--ghub-card-border) !important;
    border-radius: var(--ghub-radius, 12px) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.05),
        0 0 16px rgba(var(--ghub-accent-rgb), 0.12),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.16) !important;
    color: var(--ghub-chrome-fg) !important;
    overflow: hidden;
}

.ghub-shell .mud-main-content .bg-light .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .bg-light .mud-typography {
    color: var(--ghub-chrome-fg) !important;
}

/* Illuminato + Scuro: label collapse / campi / hint — stesso grigio muted opaco */
.ghub-shell--light .mud-main-content .bg-light .mud-typography,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .bg-light .mud-typography,
.ghub-shell--dark .mud-main-content .bg-light .mud-typography,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .bg-light .mud-typography {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
}

.ghub-shell--light .mud-main-content .mud-expand-panel .mud-expand-panel-header .mud-typography,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .mud-expand-panel .mud-expand-panel-header .mud-typography,
.ghub-shell--dark .mud-main-content .mud-expand-panel .mud-expand-panel-header .mud-typography,
body:has(.ghub-shell--dark) .mud-dialog-container .mud-dialog .mud-expand-panel .mud-expand-panel-header .mud-typography {
    color: var(--ghub-form-muted, #a0a0a0) !important;
    -webkit-text-fill-color: var(--ghub-form-muted, #a0a0a0) !important;
    opacity: 1 !important;
}

.ghub-shell .mud-main-content .bg-light .mud-icon-button,
.ghub-shell .mud-main-content .bg-light .mud-icon-button .mud-icon-root,
.ghub-shell .mud-main-content .bg-light .mud-icon-button .mud-svg-icon,
.ghub-shell .mud-main-content .bg-light .mud-icon-button svg,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .bg-light .mud-icon-button,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .bg-light .mud-icon-button .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .bg-light .mud-icon-button .mud-svg-icon,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .bg-light .mud-icon-button svg {
    color: var(--ghub-chrome-fg) !important;
    fill: currentColor !important;
}

.ghub-shell--light .mud-main-content .bg-light .mud-icon-button .mud-icon-root,
.ghub-shell--light .mud-main-content .bg-light .mud-icon-button svg,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .bg-light .mud-icon-button .mud-icon-root,
body:has(.ghub-shell--light) .mud-dialog-container .mud-dialog .bg-light .mud-icon-button svg {
    color: #fff !important;
    fill: #fff !important;
}

/* MudExpansionPanel (se usato nei form) */
.ghub-shell .mud-main-content .mud-expand-panel,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-expand-panel {
    background: rgba(var(--ghub-surface-rgb), 0.72) !important;
    background-color: rgba(var(--ghub-surface-rgb), 0.72) !important;
    border: 1px solid var(--ghub-card-border) !important;
    border-radius: var(--ghub-radius, 12px) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb), 0.05),
        0 0 16px rgba(var(--ghub-accent-rgb), 0.12) !important;
    color: var(--ghub-chrome-fg) !important;
    overflow: hidden;
}

.ghub-shell .mud-main-content .mud-expand-panel .mud-expand-panel-header,
.ghub-shell .mud-main-content .mud-expand-panel .mud-expand-panel-content,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-expand-panel .mud-expand-panel-header,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-expand-panel .mud-expand-panel-content {
    background: transparent !important;
    color: var(--ghub-chrome-fg) !important;
}

.ghub-shell .mud-main-content .mud-expand-panel .mud-expand-panel-header .mud-typography,
.ghub-shell .mud-main-content .mud-expand-panel .mud-expand-panel-header .mud-icon-root,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-expand-panel .mud-expand-panel-header .mud-typography,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-expand-panel .mud-expand-panel-header .mud-icon-root {
    color: var(--ghub-chrome-fg) !important;
}

/* Backdrop: overlay e dialog sono sibling in .mud-dialog-container.
   Scrim = solo .mud-overlay-scrim. Dialog DEVE restare sopra lo scrim
   (Mud: dialog z-index = --mud-zindex-dialog + 2, overlay = +1). */
body:has(.ghub-shell) .mud-dialog-container > .mud-overlay.mud-overlay-dialog {
    background: transparent !important;
    background-color: transparent !important;
    /* non abbassare z-index dell’overlay sotto il default Mud */
}

body:has(.ghub-shell) .mud-dialog-container > .mud-overlay.mud-overlay-dialog .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(0, 0, 0, 0.55) !important;
    border-color: transparent !important;
}

body:has(.ghub-shell) .mud-dialog-container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dialog — pannello solido sopra lo scrim (non transparent, non z-index basso) */
body:has(.ghub-shell) .mud-dialog-container .mud-dialog {
    z-index: calc(var(--mud-zindex-dialog, 1300) + 2) !important;
    background: rgb(var(--ghub-surface-rgb, 38, 32, 12)) !important;
    background-color: rgb(var(--ghub-surface-rgb, 38, 32, 12)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--ghub-card-border, rgba(80, 255, 210, 0.35)) !important;
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb, 0, 230, 170), 0.05),
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(var(--ghub-accent-rgb, 0, 230, 170), 0.14) !important;
}

/* Dentro dialog: paper/grid opachi (niente vetro che lascia passare lo scrim) */
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-paper:not(.ghub-dash-card):not(.ghub-color-swatch):not(.ghub-cal-event),
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-data-grid,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-alert,
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-card {
    background: rgba(var(--ghub-surface-rgb, 38, 32, 12), 0.98) !important;
    background-color: rgba(var(--ghub-surface-rgb, 38, 32, 12), 0.98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Lista indirizzi in dialog — aria sotto footer/pager */
body:has(.ghub-shell) .mud-dialog-container .mud-dialog .mud-dialog-content:has(.ghub-dialog-addresses) {
    padding-bottom: 1.25rem !important;
}

body:has(.ghub-shell) .mud-dialog-container .mud-dialog .ghub-dialog-addresses .mud-data-grid {
    margin-bottom: 0.5rem !important;
}

/* ========== Overlay glass (menu, popover/select, snackbar) ========== */
.mud-popover.mud-paper,
.mud-popover .mud-popover-paper,
html body div[id^="popovercontent-"].mud-popover,
html body .mud-popover-provider .mud-popover,
html body .ghub-select-popover,
.mud-menu .mud-menu-content,
.mud-snackbar-content-root,
.mud-picker-popover-paper {
    background: var(--ghub-card-glass, rgba(14, 45, 34, 0.58)) !important;
    background-color: var(--ghub-card-glass, rgba(14, 45, 34, 0.58)) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    border: 1px solid var(--ghub-card-border, rgba(80, 255, 210, 0.35)) !important;
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb, 0, 230, 170), 0.05),
        0 0 24px rgba(var(--ghub-accent-rgb, 0, 230, 170), 0.14) !important;
}

/* MudSelect / MudMenu / Autocomplete — pannello voci allineato al select vetro */
.mud-popover.mud-paper:has(.mud-list),
html body div[id^="popovercontent-"].mud-popover:has(.mud-list),
html body .ghub-select-popover {
    background: var(--ghub-select-glass, var(--ghub-card-glass, rgba(14, 45, 34, 0.58))) !important;
    background-color: var(--ghub-select-glass, var(--ghub-card-glass, rgba(14, 45, 34, 0.58))) !important;
    border-color: var(--ghub-select-border, var(--ghub-card-border, rgba(80, 255, 210, 0.35))) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.mud-popover.mud-paper .mud-list,
.mud-popover.mud-paper .mud-menu-list-wrapper,
html body div[id^="popovercontent-"] .mud-list,
html body div[id^="popovercontent-"] .mud-menu-list-wrapper,
html body .ghub-select-popover .ghub-select-list,
html body .ghub-select-popover .mud-list {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
}

.mud-popover.mud-paper .mud-list-item,
html body div[id^="popovercontent-"] .mud-list-item,
html body .ghub-select-popover .mud-list-item {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
}

.mud-popover.mud-paper .mud-list-item .mud-list-item-text,
.mud-popover.mud-paper .mud-list-item .mud-typography,
html body div[id^="popovercontent-"] .mud-list-item .mud-list-item-text,
html body div[id^="popovercontent-"] .mud-list-item .mud-typography,
html body .ghub-select-popover .mud-list-item .mud-typography {
    color: inherit !important;
}

.mud-popover.mud-paper .mud-list-item-clickable:hover,
.mud-popover.mud-paper .mud-list-item-clickable:focus-visible,
.mud-popover.mud-paper .mud-list-item-clickable:active,
html body div[id^="popovercontent-"] .mud-list-item-clickable:hover,
html body div[id^="popovercontent-"] .mud-list-item-clickable:focus-visible,
html body div[id^="popovercontent-"] .mud-list-item-clickable:active,
html body .ghub-select-popover .mud-list-item-clickable:hover,
html body .ghub-select-popover .mud-list-item-clickable:focus-visible,
html body .ghub-select-popover .mud-list-item-clickable:active {
    background-color: var(--ghub-active, rgba(0, 230, 160, 0.22)) !important;
}

.mud-popover.mud-paper .mud-list-item.mud-selected-item,
html body div[id^="popovercontent-"] .mud-list-item.mud-selected-item,
html body .ghub-select-popover .mud-list-item.mud-selected-item {
    background-color: var(--ghub-active, rgba(0, 230, 160, 0.22)) !important;
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
    font-weight: 600;
}

.mud-popover.mud-paper .mud-list-item.mud-selected-item[class*="-text"],
.mud-popover.mud-paper .mud-list-item[class*="-hover"],
html body div[id^="popovercontent-"] .mud-list-item.mud-selected-item[class*="-text"],
html body div[id^="popovercontent-"] .mud-list-item[class*="-hover"],
html body .ghub-select-popover .mud-list-item.mud-selected-item[class*="-text"],
html body .ghub-select-popover .mud-list-item[class*="-hover"] {
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
}

.mud-popover.mud-paper .mud-list-item.mud-list-item-disabled,
.mud-popover.mud-paper .mud-list-item.mud-list-item-disabled .mud-list-item-text,
html body div[id^="popovercontent-"] .mud-list-item.mud-list-item-disabled,
html body div[id^="popovercontent-"] .mud-list-item.mud-list-item-disabled .mud-list-item-text {
    color: rgba(var(--ghub-accent-rgb, 128, 128, 128), 0.45) !important;
    opacity: 0.55;
}

.mud-popover.mud-paper .mud-list-item-icon,
.mud-popover.mud-paper .mud-list-item .mud-icon-root,
.mud-popover.mud-paper .mud-list-item .mud-svg-icon,
html body div[id^="popovercontent-"] .mud-list-item-icon,
html body div[id^="popovercontent-"] .mud-list-item .mud-icon-root,
html body div[id^="popovercontent-"] .mud-list-item .mud-svg-icon {
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
    fill: currentColor !important;
}

.mud-popover.mud-paper .mud-list-item.mud-selected-item .mud-list-item-icon,
.mud-popover.mud-paper .mud-list-item.mud-selected-item .mud-icon-root,
.mud-popover.mud-paper .mud-list-item.mud-selected-item .mud-svg-icon,
html body div[id^="popovercontent-"] .mud-list-item.mud-selected-item .mud-icon-root,
html body .ghub-select-popover .mud-list-item.mud-selected-item .mud-icon-root {
    color: var(--ghub-clickable-fg, var(--ghub-active-bar, #00f0a8)) !important;
    fill: currentColor !important;
}

/* MudMenu — icone voci (avatar, lingua, …) bianche sul vetro */
.mud-popover.mud-paper .mud-menu-item > .mud-icon-root,
.mud-popover.mud-paper .mud-menu-item .mud-menu-item-icon,
.mud-popover.mud-paper .mud-menu-item .mud-menu-item-icon .mud-icon-root,
.mud-popover.mud-paper .mud-menu-item .mud-menu-item-icon .mud-svg-icon,
.mud-popover.mud-paper .mud-menu-item .mud-menu-submenu-icon,
html body div[id^="popovercontent-"] .mud-menu-item > .mud-icon-root,
html body div[id^="popovercontent-"] .mud-menu-item .mud-menu-item-icon,
html body div[id^="popovercontent-"] .mud-menu-item .mud-menu-item-icon .mud-icon-root,
html body div[id^="popovercontent-"] .mud-menu-item .mud-menu-item-icon .mud-svg-icon,
html body div[id^="popovercontent-"] .mud-menu-item .mud-menu-submenu-icon {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: currentColor !important;
}

.mud-popover.mud-paper .mud-menu-item,
.mud-popover.mud-paper .mud-menu-item .mud-menu-item-text,
html body div[id^="popovercontent-"] .mud-menu-item,
html body div[id^="popovercontent-"] .mud-menu-item .mud-menu-item-text {
    color: var(--ghub-chrome-fg, rgba(245, 255, 250, 0.96)) !important;
}

.mud-popover.mud-paper .mud-menu-item:hover,
.mud-popover.mud-paper .mud-menu-item:focus-visible,
html body div[id^="popovercontent-"] .mud-menu-item:hover,
html body div[id^="popovercontent-"] .mud-menu-item:focus-visible {
    background-color: var(--ghub-active, rgba(0, 230, 160, 0.22)) !important;
}

.mud-popover.mud-paper .mud-divider,
html body div[id^="popovercontent-"] .mud-divider {
    border-color: var(--ghub-select-border, var(--ghub-card-border, rgba(80, 255, 210, 0.35))) !important;
    opacity: 0.65;
}

.mud-popover.mud-paper .mud-list,
html body div[id^="popovercontent-"] .mud-list,
html body .ghub-select-popover .mud-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ghub-accent-rgb, 0, 230, 170), 0.45) rgba(0, 0, 0, 0.18);
}

.mud-popover.mud-paper .mud-list::-webkit-scrollbar,
html body div[id^="popovercontent-"] .mud-list::-webkit-scrollbar {
    width: 8px;
}

.mud-popover.mud-paper .mud-list::-webkit-scrollbar-track,
html body div[id^="popovercontent-"] .mud-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18);
}

.mud-popover.mud-paper .mud-list::-webkit-scrollbar-thumb,
html body div[id^="popovercontent-"] .mud-list::-webkit-scrollbar-thumb {
    background: rgba(var(--ghub-accent-rgb, 0, 230, 170), 0.45);
    border-radius: 4px;
}

/*
 * MudBlazor 9 — popover/select in MudPopoverProvider (fuori da .ghub-shell).
 * Override palette Mud + classi primary su hover/selected.
 */
body:has(.ghub-shell) .mud-popover-provider {
    --mud-palette-surface: var(--ghub-select-glass, rgba(52, 44, 16, 0.92));
    --mud-palette-background: var(--ghub-select-glass, rgba(52, 44, 16, 0.92));
    --mud-palette-text-primary: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96));
    --mud-palette-text-secondary: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.72));
    --mud-palette-action-default: rgba(255, 255, 255, 0.92);
    --mud-palette-action-default-hover: var(--ghub-active, rgba(253, 216, 53, 0.14));
    --mud-palette-primary: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96));
    --mud-palette-primary-hover: var(--ghub-active, rgba(253, 216, 53, 0.14));
    --mud-palette-primary-text: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96));
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"].mud-popover.mud-paper,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover.mud-popover.mud-paper {
    background: var(--ghub-select-glass, rgba(52, 44, 16, 0.92)) !important;
    background-color: var(--ghub-select-glass, rgba(52, 44, 16, 0.92)) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    border: 1px solid var(--ghub-select-border, rgba(253, 216, 53, 0.35)) !important;
    border-radius: 14px !important;
    color: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96)) !important;
    box-shadow:
        0 0 0 1px rgba(var(--ghub-accent-rgb, 253, 216, 53), 0.06),
        0 8px 28px rgba(0, 0, 0, 0.38) !important;
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-list {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96)) !important;
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96)) !important;
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item-gutters,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item-gutters {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item .mud-typography,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item .mud-typography {
    color: inherit !important;
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item-clickable:hover,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item-clickable:focus-visible,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item-clickable:active,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item-clickable:hover,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item-clickable:focus-visible,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item-clickable:active {
    background-color: var(--ghub-active, rgba(253, 216, 53, 0.14)) !important;
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item.mud-selected-item,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item.mud-selected-item,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item.mud-primary-hover,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item.mud-primary-hover {
    background-color: var(--ghub-active, rgba(253, 216, 53, 0.14)) !important;
    color: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96)) !important;
    font-weight: 600;
}

body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item.mud-primary-text,
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item.mud-primary-text,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item[class*="-text"],
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item[class*="-text"],
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-list-item[class*="-hover"],
body:has(.ghub-shell) .mud-popover-provider .ghub-select-popover .mud-list-item[class*="-hover"] {
    color: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96)) !important;
    --mud-ripple-color: rgba(var(--ghub-accent-rgb, 253, 216, 53), 0.35) !important;
}

body:has(.ghub-shell) .mud-popover-provider .mud-menu-item > .mud-icon-root,
body:has(.ghub-shell) .mud-popover-provider .mud-menu-item .mud-menu-item-icon,
body:has(.ghub-shell) .mud-popover-provider .mud-menu-item .mud-menu-item-icon .mud-icon-root,
body:has(.ghub-shell) .mud-popover-provider .mud-menu-item .mud-menu-item-icon .mud-svg-icon,
body:has(.ghub-shell) .mud-popover-provider .mud-menu-item .mud-menu-submenu-icon,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-menu-item > .mud-icon-root,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-menu-item .mud-menu-item-icon .mud-icon-root,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-menu-item .mud-menu-item-icon .mud-svg-icon {
    color: rgba(255, 255, 255, 0.92) !important;
    fill: currentColor !important;
}

body:has(.ghub-shell) .mud-popover-provider .mud-menu-item,
body:has(.ghub-shell) .mud-popover-provider .mud-menu-item .mud-menu-item-text,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-menu-item,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-menu-item .mud-menu-item-text {
    color: var(--ghub-chrome-fg, rgba(245, 245, 245, 0.96)) !important;
}

body:has(.ghub-shell) .mud-popover-provider .mud-menu-item:hover,
body:has(.ghub-shell) .mud-popover-provider .mud-menu-item:focus-visible,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-menu-item:hover,
body:has(.ghub-shell) .mud-popover-provider div[id^="popovercontent-"] .mud-menu-item:focus-visible {
    background-color: var(--ghub-active, rgba(253, 216, 53, 0.14)) !important;
}

/* ========== LED globale (running / progress) ========== */
.ghub-led--off.mud-icon-button,
.ghub-play-led--off.mud-icon-button {
    background: rgba(10, 30, 22, 0.55) !important;
    border: 1px solid rgba(0, 80, 50, 0.55) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

.ghub-led--off .mud-icon-root,
.ghub-led--off .mud-svg-icon,
.ghub-led--off svg,
.ghub-play-led--off .mud-icon-root,
.ghub-play-led--off .mud-svg-icon,
.ghub-play-led--off svg {
    color: #3d9a6e !important;
    filter: none;
}

.ghub-led--on.mud-icon-button,
.ghub-play-led--on.mud-icon-button {
    border-color: rgba(0, 230, 160, 0.7) !important;
    box-shadow:
        0 0 8px rgba(0, 255, 156, 0.5),
        0 0 18px rgba(0, 200, 120, 0.35),
        inset 0 0 8px rgba(0, 255, 180, 0.18) !important;
}

.ghub-led--on .mud-icon-root,
.ghub-led--on .mud-svg-icon,
.ghub-led--on svg,
.ghub-play-led--on .mud-icon-root,
.ghub-play-led--on .mud-svg-icon,
.ghub-play-led--on svg {
    color: #7dffe0 !important;
    filter: drop-shadow(0 0 4px #00ff9c) drop-shadow(0 0 12px rgba(0, 230, 118, 0.85));
}

.ghub-progress-led.mud-progress-linear,
.ghub-progress-led .mud-progress-linear-background {
    background-color: #1f5c42 !important;
}

.ghub-progress-led .mud-progress-linear-bar {
    background-image: linear-gradient(90deg, #00c853 0%, #69ffd6 50%, #00e676 100%) !important;
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.65);
}

/* FormPilot KPI grid (ex formpilot-dashboard.css) */
.fp-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.fp-kpi-completion,
.fp-kpi-cell {
    min-height: 0;
    height: 100%;
}

@media (min-width: 600px) {
    .fp-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fp-kpi-completion {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .fp-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr;
    }

    .fp-kpi-completion {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}

/* ========== Module hub sticky stats footer ========== */
.module-hub-page {
    --module-hub-footer-h: 96px;
    /* Padding inferiore = spazio per il footer fisso (non occorre min-height: il footer è position:fixed) */
    padding-bottom: calc(var(--module-hub-footer-h) + 1.25rem);
    box-sizing: border-box;
}

/* Blocca la scrollbar globale quando la hub page è montata */
body:has(.module-hub-page) {
    overflow: hidden;
}

/* Permette scroll verticale solo dentro il main-content della hub, se le cards sono tante */
body:has(.module-hub-page) .ghub-shell > .mud-main-content {
    overflow-y: auto;
    overflow-x: hidden;
    /* Altezza = viewport meno AppBar (64px) meno footer fisso */
    max-height: calc(100vh - 64px - var(--module-hub-footer-h, 96px));
}

.module-hub-stats-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    height: var(--module-hub-footer-h);
    display: flex;
    align-items: stretch;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(var(--ghub-surface-rgb), 0.55) 0%,
        var(--ghub-glass-chrome) 55%
    );
    -webkit-backdrop-filter: blur(var(--ghub-glass-blur)) saturate(1.2);
    backdrop-filter: blur(var(--ghub-glass-blur)) saturate(1.2);
    border-top: 1px solid var(--ghub-glass-border);
    box-shadow:
        0 -1px 0 var(--ghub-glass-edge),
        0 -12px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(var(--ghub-accent-rgb), 0.22);
}

.module-hub-stats-footer__inner {
    pointer-events: auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.55rem 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 0.5rem 1rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.module-hub-stat {
    flex: 1 1 0;
    min-width: 5.5rem;
    max-width: 11rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.module-hub-stat__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
}

.module-hub-stat__visual--bar,
.module-hub-stat__visual--segments,
.module-hub-stat__visual--bars {
    flex-direction: column;
    gap: 0.35rem;
}

.module-hub-stat__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ghub-chrome-fg);
    line-height: 1;
}

.module-hub-stat__value--gauge {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0;
}

.module-hub-stat__value--inline {
    position: static;
    font-size: 0.78rem;
}

.module-hub-stat__label {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ghub-chrome-fg);
    opacity: 0.72;
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
}

.module-hub-gauge {
    width: 2.85rem;
    height: 2.85rem;
    transform: rotate(-90deg);
    overflow: visible;
}

.module-hub-gauge__track,
.module-hub-gauge__value {
    fill: none;
    stroke-width: 3.2;
}

.module-hub-gauge__track {
    stroke: rgba(255, 138, 128, 0.22);
    stroke: rgba(var(--ghub-accent-rgb), 0.22);
}

.module-hub-gauge__value {
    stroke: #ff8a80;
    stroke: var(--ghub-clickable-fg, #ff8a80);
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(var(--ghub-accent-rgb), 0.55));
    transition: stroke-dasharray 0.55s ease;
}

.module-hub-progress {
    width: 100%;
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(var(--ghub-accent-rgb), 0.16);
    overflow: hidden;
}

.module-hub-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(var(--ghub-accent-rgb), 0.55),
        var(--ghub-clickable-fg)
    );
    box-shadow: 0 0 8px rgba(var(--ghub-accent-rgb), 0.45);
    transition: width 0.55s ease;
}

.module-hub-progress__fill--unlimited {
    opacity: 0.28;
    background: repeating-linear-gradient(
        -45deg,
        rgba(var(--ghub-accent-rgb), 0.35),
        rgba(var(--ghub-accent-rgb), 0.35) 4px,
        transparent 4px,
        transparent 8px
    );
    box-shadow: none;
}

.module-hub-segments {
    display: flex;
    flex-direction: row;
    gap: 0.28rem;
    align-items: center;
    justify-content: center;
}

.module-hub-segments__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: rgba(var(--ghub-accent-rgb), 0.18);
    border: 1px solid rgba(var(--ghub-accent-rgb), 0.28);
}

.module-hub-segments__dot--on {
    background: var(--ghub-clickable-fg);
    border-color: transparent;
    box-shadow: 0 0 8px rgba(var(--ghub-accent-rgb), 0.55);
}

.module-hub-barchart {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    max-width: 5.5rem;
    min-height: 2.6rem;
}

.module-hub-barchart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    flex: 1 1 0;
    min-width: 0;
}

.module-hub-barchart__track {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 0.42rem;
    height: 28px;
    border-radius: 2px;
    background: rgba(var(--ghub-accent-rgb), 0.14);
    overflow: hidden;
}

.module-hub-barchart__fill {
    width: 100%;
    height: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(
        180deg,
        var(--ghub-clickable-fg),
        rgba(var(--ghub-accent-rgb), 0.55)
    );
    box-shadow: 0 0 6px rgba(var(--ghub-accent-rgb), 0.45);
    transition: height 0.45s ease;
}

.module-hub-barchart__fill--today {
    box-shadow: 0 0 8px rgba(var(--ghub-accent-rgb), 0.7);
    filter: brightness(1.1);
}

.module-hub-barchart__day {
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ghub-chrome-fg);
    opacity: 0.7;
    letter-spacing: 0;
}

.ghub-shell--dark .module-hub-stats-footer {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(var(--ghub-surface-rgb), 0.92) 60%
    );
}

@media (max-width: 600px) {
    .module-hub-stats-footer__inner {
        justify-content: flex-start;
        padding: 0.3rem 0.75rem;
        gap: 0.75rem;
    }

    .module-hub-stat {
        flex: 0 0 auto;
        min-width: 4.75rem;
    }

    .module-hub-stat__label {
        font-size: 0.55rem;
    }
}

/* Legacy gagent-* → use ghub-* (gagent-glass.css re-exports ghub-glass.css) */