/* Super App · linguaggio visivo di Demand condiviso da tutte le app.
   1) vista compatta e popup informazioni (tasto destro), valida per tutte le app;
   2) armonizzazione di colori, font, menu, tasti, pannelli, tabelle e popup sul modello Demand,
      limitata alle app con la pelle comune (body.ap-spatial-cockpit). Solo presentazione. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

/* ---------------------------------------------------------------- 1. vista compatta */
.cpx-h { display: none !important; }
.cpx-c1, .cpx-c2, .cpx-c3 { display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.cpx-c1 { -webkit-line-clamp: 1; }
.cpx-c2 { -webkit-line-clamp: 2; }
.cpx-c3 { -webkit-line-clamp: 3; }

.cpx-dlg {
  --c-ink: #17343a; --c-sub: #64787c; --c-line: #dce6e7; --c-muted: #eef3f3; --c-pri: #0f8b98;
  position: fixed !important; inset: 0 !important; margin: auto !important; height: fit-content !important;
  width: min(480px, calc(100vw - 24px)) !important; max-height: calc(100dvh - 32px); padding: 0 !important; overflow: auto; z-index: 2147483000;
  border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: var(--c-ink);
  font: 14px/1.45 "Geist", system-ui, sans-serif; box-shadow: 0 24px 80px -16px #17343a40;
}
.cpx-dlg::backdrop { background: #17343a55; backdrop-filter: blur(3px); }
.cpx-dlg header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; background: #fff; }
.cpx-dlg header small { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--c-sub); }
.cpx-dlg header h2 { margin: 2px 0 0 !important; font: 600 16px/1.35 "Geist", system-ui, sans-serif !important; color: var(--c-ink) !important; text-transform: none !important; line-height: 1.35; overflow-wrap: anywhere; }
.cpx-dlg .cpx-x { flex: none; width: 32px; height: 32px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-ink); cursor: pointer; font-size: 14px; }
.cpx-dlg .cpx-x:hover { border-color: var(--c-pri); color: var(--c-pri); }
.cpx-dlg .cpx-body { padding: 12px 16px 16px; }
.cpx-dlg h3 { margin: 4px 0 6px !important; font: 600 11px/1.4 "Geist", system-ui, sans-serif !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--c-sub) !important; }
.cpx-dlg li, .cpx-dlg p { font: 13px/1.5 "Geist", system-ui, sans-serif !important; color: var(--c-ink) !important; }
.cpx-dlg ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
.cpx-dlg .cpx-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cpx-dlg .cpx-facts li { background: var(--c-muted); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.cpx-dlg .cpx-empty { margin: 0 0 12px; color: var(--c-sub); font-size: 13px; }
#apFieldMenu .cpx-menu-btn { display: block; width: 100%; margin-top: 4px; text-align: left; }

/* ---------------------------------------------------------------- 2. armonizzazione Demand */
html body.ap-spatial-cockpit {
  --ap-canvas: #f3f5f5; --ap-surface: #ffffff; --ap-muted: #eef3f3;
  --ap-ink: #17343a; --ap-subtle: #64787c; --ap-line: #dce6e7;
  --ap-accent: #0f8b98; --ap-accent-text: #0f8b98; --ap-accent-soft: #e3f3f3; --ap-on-accent: #ffffff;
  --ap-nav-ink: #64787c; --ap-nav-group: #64787c; --ap-nav-selected-border: transparent;
  --ap-shadow-soft: 0 5px 24px #17343a09; --ap-backdrop: #17343a55;
  --ap-font-ui: "Geist", "Manrope", system-ui, sans-serif;
  --bg: #f3f5f5; --line: #dce6e7; --line-2: #dce6e7; --ink: #17343a; --ink-2: #64787c; --mute: #64787c; --slate: #64787c;
  --accent: #0f8b98; --primary: #0f8b98; --teal: #0f8b98; --brand: #0f8b98;
  --green: #237a54; --green-bg: #e6f4ed; --red: #b94247; --red-bg: #fcecee; --amber: #9a641c; --amber-bg: #fff3db;
  background: #f3f5f5 !important; color: #17343a !important;
  font: 14px/1.45 var(--ap-font-ui) !important;
}

/* barra superiore: bianca, 58px, filetto inferiore */
html body.ap-spatial-cockpit :is(.topbar,.m-top) {
  background: #fff !important; border-bottom: 1px solid var(--ap-line) !important; box-shadow: none !important;
}

/* menu laterale piatto come Demand */
@media (min-width: 861px) {
  html body.ap-spatial-cockpit :is(.sidebar,.rail,.side,.sidenav) {
    --ap-nav-width: 228px;
    margin: 0 !important; border: 0 !important; border-right: 1px solid var(--ap-line) !important;
    border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
    padding: 20px 12px !important;
  }
}
html body.ap-spatial-cockpit :is(.sidebar,.rail,.side,.sidenav) :is(.nav-item,.rail-item,.side-item,.side-nav>a) {
  min-height: 36px !important; padding: 8px 12px !important; margin: 2px 0 !important;
  font: 500 14px/1.35 var(--ap-font-ui) !important; color: var(--ap-subtle) !important; border-color: transparent !important;
}
html body.ap-spatial-cockpit :is(.sidebar,.rail,.side,.sidenav) :is(.nav-item,.rail-item,.side-item,.side-nav>a):is(.active,[aria-current="page"]) {
  background: var(--ap-accent-soft) !important; color: var(--ap-accent) !important; border-color: transparent !important; font-weight: 600 !important;
}
html body.ap-spatial-cockpit :is(.sidebar,.rail,.side,.sidenav) :is(.badge,.num,.ri-badge) {
  font: 650 11px/18px var(--ap-font-ui) !important; padding: 0 7px !important; border-radius: 999px !important;
  background: var(--ap-muted) !important; color: var(--ap-subtle) !important;
}
html body.ap-spatial-cockpit :is(.sidebar-section,.sb-sec,.nav-section,.nav-group-label,.rail-section,.nav-sec,.nav-label,.side-sec,.sec-label) {
  padding: 14px 12px 3px !important; font: 600 10.5px/1.4 var(--ap-font-ui) !important;
  text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--ap-subtle) !important; opacity: .85;
}

/* titoli */
html body.ap-spatial-cockpit main :is(h1,.page-title) { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.01em !important; }
html body.ap-spatial-cockpit :is(.panel-h,.card-h,.card > header) :is(h2,h3,h4,.t,.title) { font-size: 14px !important; font-weight: 600 !important; }

/* pannelli e schede */
html body.ap-spatial-cockpit :is(.card,.panel,.box,.tile,.stat-card,.action-card,.ai-summary,.ai-hero,.ai-reco,.brief) {
  border-color: var(--ap-line) !important; border-radius: 8px !important; box-shadow: var(--ap-shadow-soft) !important;
}
html body.ap-spatial-cockpit :is(.panel-h,.card-h) { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--ap-line) !important; }

/* indicatori: etichetta piccola, valore in evidenza */
html body.ap-spatial-cockpit .kpi { border-color: var(--ap-line) !important; border-radius: 8px !important; box-shadow: none !important; }
html body.ap-spatial-cockpit :is(.kpi-lbl,.kpi-h,.kpi .l,.kpi small,.stat .l):not(.featured *) {
  font: 500 11.5px/1.35 var(--ap-font-ui) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ap-subtle) !important;
}
html body.ap-spatial-cockpit :is(.kpi-val,.kpi .v,.stat .v,.kpi b) {
  font-family: var(--ap-font-ui) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums;
}

/* tasti: pillola come Demand */
html body.ap-spatial-cockpit main :is(.btn,.btn-sec,.btn-ghost,.btn-secondary,.btn-outline) {
  border-radius: 999px !important; min-height: 32px; padding: 5px 12px !important; font: 500 12.5px/1.2 var(--ap-font-ui) !important;
  border: 1px solid var(--ap-line) !important; background: #fff !important; color: var(--ap-ink) !important; box-shadow: none !important;
}
html body.ap-spatial-cockpit main :is(.btn,.btn-sec,.btn-ghost,.btn-secondary,.btn-outline):hover { border-color: var(--ap-accent) !important; color: var(--ap-accent) !important; }
html body.ap-spatial-cockpit :is(.btn-primary,button.primary,.btn.prim,.btn.pri,.btn.primary,.btn-ai) {
  border-radius: 999px !important; min-height: 32px; font: 500 12.5px/1.2 var(--ap-font-ui) !important;
  background: var(--ap-accent) !important; border: 1px solid var(--ap-accent) !important; color: #fff !important;
}
html body.ap-spatial-cockpit :is(.btn-primary,button.primary,.btn.prim,.btn.pri,.btn.primary,.btn-ai):hover { filter: brightness(1.06); color: #fff !important; }

/* chip e stati */
html body.ap-spatial-cockpit :is(.pill,.chip,.tag,.badge) { border-radius: 999px !important; font-family: var(--ap-font-ui) !important; font-weight: 600; }

/* campi e filtri */
html body.ap-spatial-cockpit main :is(select,input[type="text"],input[type="search"],input[type="date"],input[type="number"],input:not([type])) {
  background-color: var(--ap-muted) !important; border: 1px solid var(--ap-line) !important; border-radius: 6px !important; color: var(--ap-ink) !important;
}

/* tabelle */
html body.ap-spatial-cockpit main table { font-size: 12px; }
html body.ap-spatial-cockpit main th {
  background: var(--ap-muted) !important; color: var(--ap-subtle) !important; font: 550 11px/1.3 var(--ap-font-ui) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
html body.ap-spatial-cockpit main td { border-color: var(--ap-line) !important; }
html body.ap-spatial-cockpit main tbody tr:hover > td { background: #f5fafa; }

/* popup e pannelli laterali */
html body.ap-spatial-cockpit :is(.detail-modal,.cluster-modal,.opt-modal,.modal,.dm,.drawer,.sheet,.dialog) {
  border-radius: 8px !important; border: 1px solid var(--ap-line) !important;
}
html body.ap-spatial-cockpit :is(.detail-overlay,.cluster-overlay,.opt-overlay,.modal-overlay,.modal-bg,.dm-bg,.drawer-bg,.mask) { background: var(--ap-backdrop) !important; }

html body.ap-spatial-cockpit .kpi.featured :is(.kpi-foot,.kpi-foot *) { color: #9fd6dc !important; }
/* telefono/tablet: il pulsante delle sezioni sta nella barra superiore, accanto a Esci, e non copre i titoli */
@media (max-width: 860px) {
  html body.ap-spatial-cockpit .ap-section-toggle { top: 12px !important; left: auto !important; right: 104px !important; z-index: 100001 !important; }
}

/* ---------------------------------------------------------------- 3. colori della home (gradiente brand)
   Stesso gradiente teal → ciano → azzurro dei pulsanti della home. Solo presentazione. */
html body.ap-spatial-cockpit {
  --ap-brand-grad: linear-gradient(115deg, #0093a7 0%, #14c4dc 48%, #3b8cff 100%);
  --ap-brand-grad-soft: linear-gradient(90deg, #e3f6f8 0%, #eaf3ff 100%);
  --ap-accent: #0093a7; --ap-accent-text: #007f91; --accent: #0093a7; --primary: #0093a7; --teal: #0093a7; --brand: #0093a7;
}
html body.ap-spatial-cockpit :is(.topbar,.m-top) { background-image: linear-gradient(115deg, #0093a7, #14c4dc 48%, #3b8cff) !important; background-size: 100% 3px !important; background-repeat: no-repeat !important; background-position: top left !important; background-color: #fff !important; }
html body.ap-spatial-cockpit :is(.sidebar,.rail,.side,.sidenav) :is(.nav-item,.rail-item,.side-item,.side-nav>a):is(.active,[aria-current="page"]) {
  position: relative; background: var(--ap-brand-grad-soft) !important; color: var(--ap-accent-text) !important;
  box-shadow: inset 3px 0 0 #14c4dc !important;
}
html body.ap-spatial-cockpit :is(.btn-primary,button.primary,.btn.prim,.btn.pri,.btn.primary,.btn-ai) {
  background: var(--ap-brand-grad) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 8px 18px -10px #0093a7b3 !important;
}

/* ---------------------------------------------------------------- 4. menu laterale enterprise uniforme
   Stesse tessere icona, hover e voce attiva in tutte le app (gradiente della home). Solo presentazione. */
html body:not(#ap-nav-x) :is(.sidebar,.rail,.side,.sidenav,.ip-sidebar) .ap-nav-icon { background:#eef4f6 !important; color:#4d6371 !important; border-radius:8px !important; box-shadow:none !important; border:0 !important; }
html body:not(#ap-nav-x) :is(.sidebar,.rail,.side,.sidenav,.ip-sidebar) :is(.nav-item,.rail-item,.side-item,.ams-nav-btn,button,a):hover .ap-nav-icon { background:#e3f6f8 !important; color:#0093a7 !important; }
html body:not(#ap-nav-x) :is(.sidebar,.rail,.side,.sidenav,.ip-sidebar) :is(.nav-item,.rail-item,.side-item,.ams-nav-btn,button,a):is(.active,.on,[aria-current="page"]) .ap-nav-icon { background:linear-gradient(115deg,#0093a7 0%,#14c4dc 48%,#3b8cff 100%) !important; color:#fff !important; box-shadow:0 6px 14px -8px #0093a7cc !important; }
html body:not(#ap-nav-x) :is(.sidebar,.rail,.side,.sidenav,.ip-sidebar) :is(.nav-item,.rail-item,.side-item,.ams-nav-btn):is(.active,.on,[aria-current="page"]) {
  background:linear-gradient(90deg,#e3f6f8 0%,#eaf3ff 100%) !important; background-color:transparent !important; color:#007f91 !important; font-weight:600 !important;
  box-shadow:inset 3px 0 0 #14c4dc !important; border-color:transparent !important;
}
html body:not(#ap-nav-x) :is(.sidebar,.rail,.side,.sidenav,.ip-sidebar) :is(.nav-item,.rail-item,.side-item,.ams-nav-btn):not(.active):not(.on):hover { background:#f3f8fa !important; color:#0a1f2b !important; }
html body:not(#ap-nav-x) :is(.sidebar,.rail,.side,.sidenav,.ip-sidebar) :is(.nav-item,.rail-item,.side-item,.ams-nav-btn) { border-radius:8px !important; }
html body:not(#ap-nav-x) .side button.on { background:linear-gradient(90deg,#e3f6f8 0%,#eaf3ff 100%) !important; color:#007f91 !important; font-weight:600 !important; box-shadow:inset 3px 0 0 #14c4dc !important; }