/* Gestionale FX: the HorizonX "Emberline Fire Hero" scoped to #gestionale-fx. */

/* Undo what themes usually put on plain elements; the block's own rules win. */
#gestionale-fx :is(div, section, article, aside, nav, header, ul, ol, li, p, h1, h2, h3, a, button, span, label, input, select, table, strong, small, kbd, i) {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; float: none;
  text-transform: none; text-shadow: none; text-decoration: none; letter-spacing: normal;
  font-family: inherit; color: inherit; line-height: inherit; min-height: 0; max-width: none;
}
#gestionale-fx :is(h1, h2, h3, p, li)::before, #gestionale-fx :is(h1, h2, h3)::after { content: none; }
#gestionale-fx { position: relative; isolation: isolate; overflow-x: clip; text-align: left; font-size: 16px; }
#gestionale-fx.gestionale-fx--full { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
#gestionale-fx.gestionale-fx--theme-font { --font: inherit; }
#gestionale-fx canvas { max-width: none; }
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
#gestionale-fx {
  --bg: #07080a;
  --surface: rgba(16, 17, 22, 0.78);
  --surface-solid: #101116;
  --surface-2: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --ink: #f4f4f6;
  --ink-2: #b9bcc6;
  --ink-3: #8d919c;
  --accent: #ff5a1f;
  /* Lighter, paler and deeper shades of the accent, for the gradients and glows. */
  --accent-hi: color-mix(in srgb, var(--accent) 78%, #fff);
  --accent-lt: color-mix(in srgb, var(--accent) 45%, #fff);
  --accent-deep: color-mix(in srgb, var(--accent) 88%, #000);
  --accent-ink: #1a0700;
  --good: #4fd18b;
  --focus: #ffb38a;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out-expo: cubic-bezier(.625, .05, 0, 1);   /* hover motion: quick start, long soft settle */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Text sizes chosen in the settings (1 = as designed); phones have their own. */
  --em-title: var(--sv-title-d, 1);
  --em-text: var(--sv-text-d, 1);
  /* Fluid type, rem-anchored so it scales with browser zoom */
  --fs-h1: calc(clamp(2rem, min(1.25rem + 2.5vw, .875rem + 5vh), 3.5rem) * var(--em-title));
  /* Gap between the copy and the dashboard: flame crown + the part of the eclipse above the card */
  --arc-zone: clamp(96px, 17vh, 190px);
  --fs-lead: calc(clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem) * var(--em-text));
}

#gestionale-fx *, #gestionale-fx *::before, #gestionale-fx *::after { box-sizing: border-box; }
#gestionale-fx { -webkit-text-size-adjust: 100%; background: var(--bg); }
#gestionale-fx {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
#gestionale-fx a { color: inherit; text-decoration: none; }
#gestionale-fx button { font: inherit; color: inherit; }
#gestionale-fx :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
#gestionale-fx .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Stage: everything that sits on top of the fire ---------- */ /* The page is a single screen: no scroll, anything below the fold is cut off */
#gestionale-fx .stage {
  position: relative; isolation: isolate;
  height: 100vh; height: 100dvh;
  overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
}
#gestionale-fx .em-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#gestionale-fx .fx, #gestionale-fx .fx-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2; display: block; pointer-events: none;
}
#gestionale-fx .fx-fallback {
  display: none;
  background:
    radial-gradient(120% 70% at 50% var(--arc-y, 78%), transparent 49.6%, var(--accent-lt) 50%, var(--accent) 51.2%, color-mix(in srgb, var(--accent) 35%, transparent) 55%, transparent 64%),
    radial-gradient(60% 45% at 50% 78%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%),
    var(--bg);
}
#gestionale-fx.no-webgl .fx { display: none; }
#gestionale-fx.no-webgl .fx-fallback { display: block; }
/* Fade the fire into the page below and keep the headline zone dark */
#gestionale-fx .stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% 26%, color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--bg) 0%, transparent) 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent) 0, color-mix(in srgb, var(--bg) 0%, transparent) 18%, color-mix(in srgb, var(--bg) 0%, transparent) 82%, var(--bg) 100%);
}

#gestionale-fx .wrap { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }
#gestionale-fx .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }
#gestionale-fx .brand svg { color: var(--accent); }
#gestionale-fx .brand svg { flex: none; }

#gestionale-fx .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer;
  position: relative; isolation: isolate;
  transition: border-color .4s var(--ease-out-expo), color .5s var(--ease-out-expo);
}
#gestionale-fx .btn:active { transform: translateY(1px); }
#gestionale-fx .btn-primary { color: var(--bg); }
#gestionale-fx .btn-primary:has(.arrow) { padding-right: 6px; gap: 12px; }
#gestionale-fx .btn-primary::before { /* the fill lives on its own layer so it can tighten on hover while the label keeps its size */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink);
  /* Crisp elevation, no glow: a faint bottom bevel and a tight dark contact shadow */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .6s var(--ease-out-expo), background-color .4s var(--ease-out-expo);
}
#gestionale-fx .btn-ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-strong); color: var(--ink); overflow: hidden; }
#gestionale-fx .btn-ghost::before { /* light fill that grows from the centre on hover */
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 104%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--ease-out-expo);
}
#gestionale-fx .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
#gestionale-fx .btn-sm.btn-primary:has(.arrow) { padding-right: 5px; gap: 10px; }

/* Rolling label: each letter slides up out of a one-line window while its copy (a text-shadow
   1.3em below) rises into place, staggered 10ms per letter. The arrow does the same sideways. */
#gestionale-fx .roll { display: inline-flex; overflow: hidden; line-height: 1.25; }
#gestionale-fx .roll > span {
  display: inline-block; white-space: pre; text-shadow: 0 1.3em currentColor;
  transition: transform .6s var(--ease-out-expo) calc(var(--i, 0) * 10ms);
}
/* Arrow in a dark round chip; on hover it leaves to the right while a second arrow, parked 22px to the left, slides in. */
#gestionale-fx .btn .arrow {
  position: relative; display: inline-block; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); color: var(--ink); overflow: hidden;
}
#gestionale-fx .btn-sm .arrow { width: 30px; height: 30px; }
#gestionale-fx .btn .arrow svg { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; transition: transform .6s var(--ease-out-expo); }
#gestionale-fx .btn .arrow svg + svg { transform: translateX(-22px); }
#gestionale-fx .announce .chev { display: inline-block; transition: transform .6s var(--ease-out-expo); }

/* Hover only where a real pointer hovers, so taps on touch screens do not leave a stuck state.
   Keyboard focus gets the same motion as the pointer. */
@media (hover: hover) and (pointer: fine) {
  #gestionale-fx .btn-primary:hover::before { transform: scale(.95); background-color: #fff; }
  #gestionale-fx .btn-ghost:hover { color: var(--bg); border-color: var(--ink); }
  #gestionale-fx .btn-ghost:hover::before { transform: translate(-50%, -50%) scale(1); }
  #gestionale-fx .btn:hover .arrow svg { transform: translateX(22px); }
  #gestionale-fx .btn:hover .arrow svg + svg { transform: none; }
  #gestionale-fx .announce:hover .chev { transform: translateX(3px); }
}
#gestionale-fx .btn-primary:focus-visible::before { transform: scale(.95); background-color: #fff; }
#gestionale-fx .btn-ghost:focus-visible { color: var(--bg); border-color: var(--ink); }
#gestionale-fx .btn-ghost:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
#gestionale-fx .btn:focus-visible .arrow svg { transform: translateX(22px); }
#gestionale-fx .btn:focus-visible .arrow svg + svg { transform: none; }

/* ---------- Hero ---------- */
#gestionale-fx .hero {
  flex: none;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  /* Gap between the theme's header and the copy: --em-gap from the settings,
     otherwise the template's own (fluid) gap. */
  padding-top: calc(var(--em-gap, clamp(28px, 7vh, 72px)) + var(--sv-header, 0px));
  padding-bottom: var(--arc-zone);
}
#gestionale-fx .announce {   /* release note as a quiet text link, no pill */
  display: inline-flex; align-items: center; gap: 9px; padding: 4px 2px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: color .3s ease-out;
}
#gestionale-fx .announce:hover { color: var(--ink); }
#gestionale-fx .announce .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-hi) 18%, transparent); }
#gestionale-fx .announce .chev { color: var(--ink-3); }
#gestionale-fx .em-h1 {
  margin: clamp(16px, 2.4vh, 22px) auto 0; max-width: 15ch;
  font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.04em; font-weight: 500;
  text-wrap: balance;
}
/* Two fixed lines once the first one fits on its own row */
@media (min-width: 720px) {
  #gestionale-fx .em-h1 { max-width: none; }
  #gestionale-fx .em-h1 .l { display: block; white-space: nowrap; }
}
#gestionale-fx .em-h1 .glow { display: block; }
/* Each line carries its own gradient, white at the cap height into a very pale red at the baseline.
   clone repeats it per wrapped fragment on narrow screens; the padding is room for descenders,
   because background-clip:text clips to the padding box. */
#gestionale-fx .em-h1 .glow .l {
  padding-bottom: .14em; margin-bottom: -.14em;
  background: linear-gradient(180deg, var(--ink) 22%, color-mix(in srgb, var(--accent) 22%, var(--ink)) 100%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#gestionale-fx .lead { margin: clamp(12px, 2vh, 16px) auto 0; max-width: 46ch; font-size: var(--fs-lead); font-weight: 400; color: #9da1ab; text-wrap: balance; }
@media (min-width: 720px) { #gestionale-fx .lead { max-width: none; white-space: nowrap; } }   /* one line wherever it fits */
#gestionale-fx .cta-row { margin-top: clamp(20px, 3.2vh, 30px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Dashboard preview ---------- */
#gestionale-fx .preview { position: relative; flex: none; }
#gestionale-fx .app {
  position: relative;
  border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  padding: 6px;
  background: rgba(10, 11, 14, .86);
  backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--accent-lt) 35%, transparent), 0 -30px 80px -40px color-mix(in srgb, var(--accent) 55%, transparent), 0 40px 120px -40px rgba(0, 0, 0, .9);
  overflow: hidden;
}
#gestionale-fx .app::before { /* fire light catching the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-lt) 90%, transparent) 30%, color-mix(in srgb, var(--accent-lt) 100%, transparent) 50%, color-mix(in srgb, var(--accent-lt) 90%, transparent) 70%, transparent);
}
/* Fire edge glow: a band of heat sits on the centre of the card's top edge, under the fire, and flickers like an ember.
   Built like a border beam: a ring mask on the border, a sharp line plus two blurred copies for the glow.
   Sits after .app without a z-index so plus-lighter adds onto the fire, not onto an isolated group. */
#gestionale-fx .rim { --beam: 56%; position: absolute; inset: 0; pointer-events: none; }
#gestionale-fx .rim-light { position: absolute; inset: 0; }
#gestionale-fx .rim-light--bloom { filter: blur(3px); mix-blend-mode: plus-lighter; }
#gestionale-fx .rim-light--bloom .rim-edge { padding: 3px; }
#gestionale-fx .rim-light--halo { filter: blur(12px); mix-blend-mode: plus-lighter; }
#gestionale-fx .rim-edge {
  position: absolute; inset: 0; padding: 2px; border-radius: var(--radius-l);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#gestionale-fx .rim-light--halo .rim-edge { padding: 7px; }
#gestionale-fx .rim-run { position: absolute; inset: 0; animation: rim-flicker 4.3s ease-in-out infinite; will-change: opacity, transform; }
/* each layer flickers on its own clock so the light never repeats as one pulse */
#gestionale-fx .rim-light--halo .rim-run { animation-duration: 5.7s; }
#gestionale-fx .rim-light--bloom .rim-run { animation-duration: 3.1s; animation-delay: -1.2s; }
#gestionale-fx .rim-run::before { /* the glow: long and low so it hugs the edge, white-hot centre fading to ember */
  content: ""; position: absolute; left: 50%; top: -45px; width: var(--beam); height: 90px; margin-left: calc(var(--beam) / -2);
  background: radial-gradient(closest-side, #fff6ea 0%, var(--accent-lt) 22%, var(--accent-hi) 48%, color-mix(in srgb, var(--accent) 55%, transparent) 74%, color-mix(in srgb, var(--accent) 0%, transparent) 100%);
}
/* Soft, uneven ember flicker: brightness drifts between ~60% and full and the band breathes a few %.
   About two gentle swells a second at most and never dark, so it reads as fire, not as a flashing light. */
@keyframes rim-flicker {
  0% { opacity: .85; transform: scaleX(1); }
  12% { opacity: 1; }
  19% { opacity: .7; }
  31% { opacity: .95; transform: scaleX(1.04); }
  44% { opacity: .62; }
  52% { opacity: .9; }
  63% { opacity: .74; transform: scaleX(.97); }
  78% { opacity: 1; }
  88% { opacity: .68; }
  100% { opacity: .85; transform: scaleX(1); }
}
/* Shell: a near-black frame holding the sidebar, with the workspace in a lighter inset panel */
#gestionale-fx .app-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
#gestionale-fx .app[data-side="rail"] .app-grid { grid-template-columns: 58px minmax(0, 1fr); }

/* ---- Sidebar ---- */
#gestionale-fx .side { display: flex; flex-direction: column; gap: 18px; padding: 10px 10px 10px; min-width: 0; }
#gestionale-fx .side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 40px; padding: 0 0 0 8px; }
#gestionale-fx .side-head .brand { font-size: 15px; gap: 9px; }
#gestionale-fx .icon-plain {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: none; color: var(--ink-3); cursor: pointer; transition: color .2s, background-color .2s;
}
#gestionale-fx .icon-plain:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
#gestionale-fx .side nav { display: grid; gap: 16px; }
#gestionale-fx .side-label {
  display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; padding: 0 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
#gestionale-fx .side-label svg { opacity: .7; }
#gestionale-fx .side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#gestionale-fx .side-item {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: color .2s, background-color .2s;
}
#gestionale-fx .side-item svg { flex: none; color: var(--ink-3); transition: color .2s; }
#gestionale-fx .side-item:hover { color: var(--ink); background: rgba(255, 255, 255, .035); }
#gestionale-fx .side-item:hover svg { color: var(--ink-2); }
#gestionale-fx .side-item[aria-current="page"] {
  color: var(--ink); border-color: color-mix(in srgb, var(--accent-hi) 24%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 3%, transparent) 75%);
}
#gestionale-fx .side-item[aria-current="page"] svg { color: var(--accent-hi); }
#gestionale-fx .side-item[aria-current="page"]::before { /* ember marker on the shell edge */
  content: ""; position: absolute; left: -11px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 75%, transparent);
}
#gestionale-fx .badge {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 600; line-height: 1; background: rgba(255, 255, 255, .07); color: var(--ink-2);
}
#gestionale-fx .badge.new { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-lt); }
#gestionale-fx .upgrade {
  position: relative; overflow: hidden; margin-top: auto; padding: 16px; border-radius: 14px; color: var(--accent-ink);
  background: radial-gradient(130% 140% at 100% 0%, var(--accent-lt) 0%, var(--accent-hi) 32%, var(--accent) 64%, var(--accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
#gestionale-fx .upgrade > :not(.arcs) { position: relative; }
#gestionale-fx .upgrade strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#gestionale-fx .upgrade p { margin: 4px 0 12px; font-size: 13px; font-weight: 500; line-height: 1.4; }
#gestionale-fx .upgrade button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent-ink); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
#gestionale-fx .arcs { position: absolute; pointer-events: none; fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
#gestionale-fx .upgrade .arcs { right: -64px; top: -64px; width: 170px; height: 170px; opacity: .55; }
/* Collapsed rail: icons only; labels stay in the accessibility tree */
#gestionale-fx .app[data-side="rail"] .side { padding-inline: 9px; }
#gestionale-fx .app[data-side="rail"] .side-head { flex-direction: column; padding: 0; gap: 8px; }
#gestionale-fx .app[data-side="rail"] :is(.side-text, .side-label, .badge, .upgrade) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#gestionale-fx .app[data-side="rail"] .side-item { justify-content: center; padding: 0; }
#gestionale-fx .app[data-side="rail"] .side-item[aria-current="page"]::before { left: -10px; }

/* ---- Workspace panel ---- */
#gestionale-fx .main {
  min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .012) 45%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#gestionale-fx .topbar { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 10px 9px 20px; border-bottom: 1px solid var(--line); }
#gestionale-fx .top-brand { display: none; font-size: 14px; gap: 8px; }
#gestionale-fx .crumbs ol { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ink-3); }
#gestionale-fx .crumbs li { display: inline-flex; align-items: center; gap: 9px; }
#gestionale-fx .crumbs li + li::before {
  content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .7;
}
#gestionale-fx .crumbs a { display: inline-flex; align-items: center; min-height: 28px; color: var(--ink-3); transition: color .2s; }
#gestionale-fx .crumbs a:hover { color: var(--ink); }
#gestionale-fx .crumbs [aria-current] { color: var(--ink); font-weight: 500; }
#gestionale-fx .top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#gestionale-fx .search {
  display: flex; align-items: center; gap: 8px; width: 280px; height: 38px; padding: 0 5px 0 13px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .28); color: var(--ink-3); cursor: text;
}
#gestionale-fx .search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
#gestionale-fx .search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none; font: inherit; font-size: 13px; color: var(--ink); }
#gestionale-fx .search input::placeholder { color: var(--ink-3); opacity: 1; }
#gestionale-fx .search input::-webkit-search-cancel-button { display: none; }
#gestionale-fx .search kbd { font: inherit; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); }
#gestionale-fx .icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); cursor: pointer; color: var(--ink-2);
  transition: color .2s, border-color .2s;
}
#gestionale-fx .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
#gestionale-fx .icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #121318; }
#gestionale-fx .avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-lt), var(--accent)); color: var(--accent-ink); font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 2px #121318, 0 0 0 3px color-mix(in srgb, var(--accent-hi) 45%, transparent);
}

#gestionale-fx .app-body { padding: 20px 22px 22px; display: grid; gap: 16px; }
#gestionale-fx .app-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; }
#gestionale-fx .title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#gestionale-fx .app-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
#gestionale-fx .pill-select {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .03);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
#gestionale-fx .pill-select:hover { color: var(--ink); }
#gestionale-fx .live { margin: 5px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
#gestionale-fx .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(79, 209, 139, .18); }
#gestionale-fx .head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#gestionale-fx .dbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color .2s, border-color .2s;
}
#gestionale-fx .dbtn svg { flex: none; color: var(--ink-3); }
#gestionale-fx .dbtn:hover { background: rgba(255, 255, 255, .07); }
#gestionale-fx .dbtn-ember {
  border-color: transparent; color: var(--accent-ink); font-weight: 600;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
#gestionale-fx .dbtn-ember svg { color: currentColor; }
#gestionale-fx .dbtn-ember:hover { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }

/* ---- Cards ---- */
#gestionale-fx .card {
  position: relative; min-width: 0; border-radius: var(--radius-m); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .016));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#gestionale-fx .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#gestionale-fx .kpi { padding: 14px 14px 15px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#gestionale-fx .kpi-top { display: flex; align-items: center; gap: 10px; }
#gestionale-fx .chip-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--accent-hi);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-hi) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
#gestionale-fx .kpi .label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gestionale-fx .round-btn {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer; transition: color .2s, border-color .2s;
}
#gestionale-fx .round-btn:hover { color: var(--ink); border-color: var(--line-strong); }
#gestionale-fx .kpi .value { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
#gestionale-fx .kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
#gestionale-fx .delta {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: #7fe0aa; background: rgba(79, 209, 139, .12); border: 1px solid rgba(79, 209, 139, .18);
}
/* The ember card: the one block that carries the brand colour at full strength */
#gestionale-fx .kpi-ember {
  overflow: hidden; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-lt) 60%, transparent);
  background: radial-gradient(130% 140% at 100% 0%, var(--accent-lt) 0%, var(--accent-hi) 30%, var(--accent) 62%, var(--accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 40px -24px color-mix(in srgb, var(--accent) 90%, transparent);
}
#gestionale-fx .kpi-ember > :not(.arcs) { position: relative; }
#gestionale-fx .kpi-ember .label, #gestionale-fx .kpi-ember .kpi-foot { color: var(--accent-ink); }
#gestionale-fx .kpi-ember .chip-ico { color: var(--accent-ink); background: rgba(26, 7, 0, .1); border-color: rgba(26, 7, 0, .16); box-shadow: none; }
#gestionale-fx .kpi-ember .arcs { right: -70px; bottom: -96px; width: 230px; height: 230px; opacity: .6; }
#gestionale-fx .kpi-ember :focus-visible { outline-color: var(--accent-ink); }
#gestionale-fx .kpi-ember[data-off="true"] .value { opacity: .5; }
#gestionale-fx .switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: rgba(26, 7, 0, .25); cursor: pointer; }
#gestionale-fx .switch::after { content: ""; position: absolute; inset: -10px 0; }   /* 40px tall touch target */
#gestionale-fx .switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .35s var(--ease-out-expo); }
#gestionale-fx .switch[aria-checked="true"] { background: var(--accent-ink); }
#gestionale-fx .switch[aria-checked="true"] i { transform: translateX(16px); }

#gestionale-fx .row-2 { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 12px; }
#gestionale-fx .panel { padding: 16px 16px 14px; }
#gestionale-fx .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 8px; }
#gestionale-fx .panel h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#gestionale-fx .panel .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }
#gestionale-fx .panel .sub strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
#gestionale-fx .panel .sub .up { color: #7fe0aa; font-weight: 600; }
#gestionale-fx .panel-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#gestionale-fx .pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
#gestionale-fx .pills button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3); transition: color .2s;
}
#gestionale-fx .pills button:hover { color: var(--ink); }
#gestionale-fx .pills button[aria-pressed="true"] { color: var(--accent-ink); font-weight: 600; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
#gestionale-fx .select { position: relative; display: inline-flex; align-items: center; }
#gestionale-fx .select select {
  appearance: none; -webkit-appearance: none; height: 36px; padding: 0 32px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(0, 0, 0, .28); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
#gestionale-fx .select option { background: #121318; color: var(--ink); }
#gestionale-fx .select svg { position: absolute; right: 12px; pointer-events: none; color: var(--ink-3); }

/* Line chart: one series, glowing ember stroke, a pinned point with its tooltip */
#gestionale-fx .chart { position: relative; }
#gestionale-fx .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
#gestionale-fx .chart .grid line { stroke: rgba(255, 255, 255, .07); stroke-dasharray: 2 5; }
#gestionale-fx .chart .axis text { fill: #9ea2ac; font-size: 12px; font-family: var(--font); font-variant-numeric: tabular-nums; }
#gestionale-fx .chart .line { fill: none; stroke: var(--accent-hi); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#gestionale-fx .chart .line-glow { fill: none; stroke: var(--accent); stroke-width: 7; opacity: .5; }
#gestionale-fx .chart .guide { stroke: color-mix(in srgb, var(--accent-lt) 50%, transparent); stroke-dasharray: 3 4; }
#gestionale-fx .chart .pt-halo { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
#gestionale-fx .chart .pt { fill: #fff; stroke: var(--accent); stroke-width: 3; }
#gestionale-fx .chart .hit { fill: transparent; cursor: crosshair; outline: none; }
#gestionale-fx .chart .hit:focus-visible { stroke: var(--focus); stroke-width: 2; }
#gestionale-fx .tip {
  --ax: 50%;
  position: absolute; pointer-events: none; transform: translate(calc(var(--ax) * -1), calc(-100% - 16px));
  padding: 8px 12px 9px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-lt) 35%, transparent); background: rgba(24, 17, 15, .94);
  font-size: 12px; color: var(--ink-2); white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
  transition: left .3s var(--ease-out-expo), top .3s var(--ease-out-expo);
}
#gestionale-fx .tip::after {
  content: ""; position: absolute; left: var(--ax); bottom: -5px; width: 8px; height: 8px; margin-left: -4px;
  background: rgb(24, 17, 15); border: solid color-mix(in srgb, var(--accent-lt) 35%, transparent); border-width: 0 1px 1px 0; transform: rotate(45deg);
}
#gestionale-fx .tip strong { display: block; margin-top: 1px; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
#gestionale-fx .tip .up { margin-left: 6px; font-size: 12px; color: #7fe0aa; }

/* Heatmap: events per two-hour slot, last seven days */
#gestionale-fx .heat { display: grid; grid-template-columns: 30px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; margin-top: 6px; }
#gestionale-fx .heat span { font-size: 12px; line-height: 1; color: var(--ink-3); }
#gestionale-fx .heat .hx { grid-column: span 2; padding-top: 4px; }
#gestionale-fx .heat i { display: block; aspect-ratio: 1.3; border-radius: 4px; }
#gestionale-fx :is(.heat, .heat-legend) i { background: rgba(255, 255, 255, .045); }
#gestionale-fx :is(.heat, .heat-legend) i[data-l="1"] { background: color-mix(in srgb, var(--accent) 20%, transparent); }
#gestionale-fx :is(.heat, .heat-legend) i[data-l="2"] { background: color-mix(in srgb, var(--accent) 40%, transparent); }
#gestionale-fx :is(.heat, .heat-legend) i[data-l="3"] { background: color-mix(in srgb, var(--accent) 70%, transparent); }
#gestionale-fx :is(.heat, .heat-legend) i[data-l="4"] { background: var(--accent-hi); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
#gestionale-fx .heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
#gestionale-fx .heat-legend span:first-child { margin-right: 4px; }
#gestionale-fx .heat-legend span:last-child { margin-left: 4px; }
#gestionale-fx .heat-legend i { width: 12px; height: 12px; border-radius: 3px; }

#gestionale-fx .src-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
#gestionale-fx .src { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
#gestionale-fx .src:nth-child(-n+2) { border-top: 0; }
#gestionale-fx .src .logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
#gestionale-fx .src .name { font-size: 14px; font-weight: 600; }
#gestionale-fx .src .meta { font-size: 12px; color: var(--ink-3); }
#gestionale-fx .status { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
#gestionale-fx .status svg { color: var(--good); }
#gestionale-fx .status.syncing svg { color: var(--accent-hi); }



/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  #gestionale-fx .row-2 { grid-template-columns: 1fr; }
  #gestionale-fx .src-list { grid-template-columns: 1fr; }
  #gestionale-fx .src:nth-child(2) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  #gestionale-fx .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gestionale-fx .search { width: 210px; }
}
@media (max-width: 760px) {
  #gestionale-fx .app .side { display: none; }
  #gestionale-fx .app .app-grid, #gestionale-fx .app[data-side="rail"] .app-grid { grid-template-columns: minmax(0, 1fr); }
  #gestionale-fx .top-brand { display: inline-flex; }
  #gestionale-fx .crumbs { display: none; }
}
@media (max-width: 640px) {
  #gestionale-fx .rim { --beam: 74%; }
  #gestionale-fx .app { padding: 4px; }
  #gestionale-fx .main { border-radius: 18px; }
  #gestionale-fx .topbar { min-height: 54px; padding: 8px 8px 8px 14px; }
  #gestionale-fx .search, #gestionale-fx .dbtn-date { display: none; }
  #gestionale-fx .app-body { padding: 14px; gap: 12px; }
  #gestionale-fx .app-head h2 { font-size: 19px; }
  #gestionale-fx .kpis { gap: 10px; }
  #gestionale-fx .kpi { padding: 12px; gap: 10px; }
  #gestionale-fx .kpi .value { font-size: 20px; }
  #gestionale-fx .kpi .round-btn { display: none; }
  #gestionale-fx .chip-ico { width: 30px; height: 30px; }
  #gestionale-fx .kpi-ember { grid-column: 1 / -1; order: -1; }
  #gestionale-fx .kpis > .kpi:nth-child(3) { grid-column: 1 / -1; }
  #gestionale-fx .src { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; }
  #gestionale-fx .src .status { grid-column: 2; }
}
@media (max-width: 380px) { #gestionale-fx .kpis { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  #gestionale-fx *, #gestionale-fx *::before, #gestionale-fx *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  #gestionale-fx .rim-run { animation: none; }   /* the glow stays lit at the centre of the top edge, steady */
}
@media (forced-colors: active) {
  #gestionale-fx .btn-primary { border: 1px solid ButtonText; }
  #gestionale-fx .rim { display: none; }
}

/* Phones have their own text sizes (settings). After the block's variables, so it wins.
   The gap between the buttons and the dashboard is also much shorter there,
   so more of the dashboard shows on the first screen. */
@media (max-width: 719px) {
  #gestionale-fx { --em-title: var(--sv-title-m, 1); --em-text: var(--sv-text-m, 1); --em-gap: var(--em-gap-m, clamp(28px, 7vh, 72px)); --arc-zone: clamp(48px, 7vh, 80px); }
}

/* The computer gap from the settings, on wider screens. */
@media (min-width: 720px) {
  #gestionale-fx { --em-gap: var(--em-gap-d, clamp(28px, 7vh, 72px)); }
}

/* The site's own logo in the dashboard (settings): as tall as the template's mark. */
#gestionale-fx .em-logo { display: block; flex: none; width: auto; max-width: 64px; height: 16px; object-fit: contain; }
#gestionale-fx .side-head .em-logo { height: 18px; }