/* ARTIPLANE — pelle comune chiara delle Worker App.
   Riporta tutte le app HTML alla palette chiara Artiplane e uniforma
   barra superiore, barra laterale e menu. Struttura, contenuti,
   navigazione e funzioni restano quelli originali. */

:root,
html,
body {
  /* accenti Artiplane */
  --ap-tealvariant: #0093a7;
  --ap-tealvariant-d: #007a8a;
  --ap-tealvariant-x: #005663;
  --ap-tealvariant-soft: #e5f3f5;
  --ap-tealvariant-line: #c8e2e6;

  --apple: #0093a7;
  --apple-d: #007a8a;
  --apple-x: #005663;
  --teal: #0093a7;
  --teal-d: #007a8a;
  --teal-l: #45cbdc;
  --teal-x: #005663;
  --teal-xl: #1b515a;
  --accent: #0093a7;
  --primary: #0093a7;
  --brand: #0093a7;
  --blue: #0093a7;
  --blue-bg: #e5f3f5;
  --gold: #b9831b;
  --gold-d: #96690f;

  /* superfici chiare */
  --petrol: #ffffff;
  --petrol-d: #ffffff;
  --petrol-x: #ffffff;
  --ink-dark: #17383e;
  --bg: #f4fafb;
  --panel: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fcfb;
  --surface-3: #edf7f8;
  --ink: #17383e;
  --ink-2: #315860;
  --slate: #5b7479;
  --slate-2: #6a8185;
  --mute: #627b80;
  --line: #dde9eb;
  --line-2: #cee2e5;

  /* semafori */
  --green: #1f7a58;
  --green-bg: #e2f4ec;
  --red: #b4412f;
  --red-bg: #fbe8e4;
  --amber: #b9831b;
  --amber-bg: #fdf1dc;
  --bordeaux: #b4412f;

  /* navigazione */
  --nav-text: #315860;
  --nav-muted: #6a8185;
  --nav-line: #dde9eb;
  --nav-active: #0093a7;
}

html,
body {
  background: #f4fafb !important;
  color: #17383e !important;
}

/* ------------------------------------------------- barra superiore comune */
.topbar,
header.topbar,
.m-top,
.topbar-row,
.topbar-actions,
.toolbar,
.conv-top {
  background: #ffffff !important;
  color: #17383e !important;
  border-color: #dde9eb !important;
}

.topbar,
header.topbar,
.m-top {
  border-bottom: 1px solid #dde9eb !important;
  box-shadow: 0 1px 0 rgba(13, 41, 40, 0.03) !important;
}

.topbar *,
.m-top * {
  border-color: #dde9eb;
}

.topbar span,
.topbar strong,
.topbar small,
.topbar div,
.topbar a,
.topbar label,
.topbar input,
.m-top span,
.m-top strong,
.m-top div {
  color: #315860;
}

.topbar .brand,
.topbar .brand-name,
.topbar .brand-sub,
.m-top .brand,
.m-top .brand-name {
  color: #17383e !important;
}

.topbar .brand-name,
.m-top .brand-name {
  color: #0093a7 !important;
}

.topbar .brand-mark,
.brand-mark,
.login-brand,
.ocra-login-brand {
  background: #0093a7 !important;
  color: #ffffff !important;
}

/* chip, pill e campi della barra: da traslucidi su scuro a chiari */
.topbar .tenant-tag,
.topbar .demo-badge,
.topbar .ri-badge,
.topbar .ai-badge,
.topbar .chip,
.topbar .tb-btn,
.topbar .tour-btn,
.topbar button,
.topbar select,
.topbar .askbar .ask-wrap,
.m-top button {
  background: #edf7f8 !important;
  border: 1px solid #c8e2e6 !important;
  color: #007a8a !important;
}

.topbar .askbar input,
.topbar input {
  background: transparent !important;
  color: #17383e !important;
}

.topbar input::placeholder {
  color: #6a8185 !important;
}

.topbar button:hover,
.topbar .tb-btn:hover,
.topbar .tour-btn:hover {
  background: #d2eeee !important;
}

/* ------------------------------------------------ barra laterale comune */
.sidebar,
.rail,
aside.sidebar,
aside.rail,
.sidebar-chat,
.ai-side {
  background: #f8fcfb !important;
  border-right: 1px solid #dde9eb !important;
  color: #315860 !important;
}

.sidebar *,
.rail * {
  border-color: #dde9eb;
}

.nav,
.nav-wrap,
.navbar-menu,
.sidebar-section,
.nav-section,
.nav-group-label,
.sidebar-foot,
.side-foot {
  background: transparent !important;
  color: #6a8185 !important;
}

.nav-wrap::after {
  background: linear-gradient(180deg, rgba(248, 252, 251, 0), #f8fcfb) !important;
}

.nav-item,
.side-nav > a {
  color: #315860 !important;
  background: transparent !important;
}

.nav-item .ic,
.nav-item i {
  color: #5b7479 !important;
  opacity: 1 !important;
}

.nav-item:hover,
.rail .nav-item:hover,
.side-nav > a:hover {
  background: #f0ebff !important;
  color: #17383e !important;
}

.sidebar .nav-item.active,
.rail .nav-item.active,
.nav-item.active,
.nav-item[aria-current="page"],
.side-nav > a.active {
  background: #0093a7 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.nav-item.active .ic,
.nav-item.active i,
.nav-item.active .num,
.nav-item.active .badge {
  color: #ffffff !important;
}

.nav-item.active::before {
  background: #b9831b !important;
}

.nav-item .num {
  color: #6a8185 !important;
}

.nav-item .badge {
  background: #e5f3f5 !important;
  color: #007a8a !important;
}

.nav-item.active .badge {
  background: rgba(255, 255, 255, 0.22) !important;
}

.sidebar-backdrop {
  background: rgba(13, 41, 40, 0.42) !important;
}

/* ------------------------------------------------ pannelli e superfici */
.card,
.panel,
.cfg-card,
.ai-card,
.action-card,
.detail-panel,
.fxd-card,
.login-card,
.ocra-login-card {
  background: #ffffff !important;
  border-color: #dde9eb !important;
  color: #17383e !important;
}

.cfg-tab.active,
.cfg-btn,
.action-btn,
.login-btn,
.ocra-login-btn,
.suggest-btn,
.f-mc-btn,
.fxd-btn {
  background: #0093a7 !important;
  border-color: #007a8a !important;
  color: #ffffff !important;
}

/* Nessun logo di terze parti nelle Worker App */
.brand-logo-img {
  display: none !important;
}

/* ------- testi delle barre laterali: sempre leggibili su fondo chiaro ---- */
.sidebar .brand,
.sidebar .brand *,
.rail .brand,
.rail .brand *,
.nav-wrap .brand,
.nav-wrap .brand *,
.sidebar .brand-row,
.sidebar .brand-row *,
.sidebar-foot,
.sidebar-foot *,
.side-foot,
.side-foot *,
.sidebar .user,
.sidebar .user * {
  color: #17383e !important;
}

.sidebar .brand-name,
.rail .brand-name,
.nav-wrap .brand-name {
  color: #0093a7 !important;
}

.sidebar-foot,
.side-foot {
  border-top: 1px solid #dde9eb !important;
  background: #edf7f8 !important;
}

.sidebar .avatar,
.sidebar-foot .avatar,
.side-foot .avatar {
  background: #0093a7 !important;
  color: #ffffff !important;
}

.demo-badge,
.sidebar .demo-badge {
  background: #fdf1dc !important;
  border: 1px solid #ecd6a6 !important;
  color: #96690f !important;
}

/* ------ fasce AI/hero: erano scure, ora chiare con testo leggibile ------ */
.ai-hero,
.hero,
.insight-hero,
.ai-banner,
.banner-ai,
.ai-strip,
.ai-hero-top,
.ai-hero-stats,
.ai-hero-links {
  color: #17383e !important;
}

.ai-hero,
.hero,
.insight-hero,
.ai-banner,
.banner-ai,
.ai-strip {
  background: linear-gradient(135deg, #edf7f8 0%, #ffffff 100%) !important;
  border: 1px solid #dde9eb !important;
}

.ai-hero::before,
.hero::before,
.insight-hero::before {
  background: none !important;
}

.ai-hero h1,
.ai-hero h2,
.ai-hero h3,
.ai-hero p,
.ai-hero span,
.ai-hero div,
.hero h1,
.hero h2,
.hero p,
.insight-hero h2,
.insight-hero p {
  color: #17383e !important;
}

.ai-hero .ai-sub,
.ai-hero-stat .l,
.hero .sub,
.insight-hero .sub {
  color: #5b7479 !important;
}

.ai-hero h2 b,
.ai-hero-stat .v,
.ai-hero strong {
  color: #007a8a !important;
}

.ai-hero .ai-tag,
.ai-tag,
.ai-hero-link {
  background: #e5f3f5 !important;
  border: 1px solid #c8e2e6 !important;
  color: #007a8a !important;
}

.ai-hero-link .badge,
.ai-tag .dot {
  background: #0093a7 !important;
  color: #ffffff !important;
}

/* --------- varianti di menu (rail, side) trattate come la sidebar -------- */
.rail-item,
.side-item {
  color: #315860 !important;
  background: transparent !important;
}

.rail-item:hover,
.side-item:hover,
.sidebar .nav-item:hover,
.rail .rail-item:hover {
  background: #f0ebff !important;
  color: #17383e !important;
}

.nav-item.active,
.rail-item.active,
.side-item.active,
.sidebar .nav-item.active,
.rail .rail-item.active,
.rail .rail-item.active *,
.side .side-item.active,
.sidebar .nav-item.active * {
  background-color: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-left-color: #007a8a !important;
}

.rail .rail-item.active *,
.sidebar .nav-item.active * {
  background-color: transparent !important;
}

.rail .rail-item.active i,
.rail .rail-item.active .ri-ic,
.sidebar .nav-item.active i,
.side .side-item.active i {
  color: #ffffff !important;
}

/* --------- barra superiore: ogni testo e controllo resta leggibile ------ */
.topbar *,
.m-top *,
.topbar-row * {
  color: #315860 !important;
}

.topbar .brand-mark,
.topbar .brand-mark *,
.topbar .tb-btn.primary,
.topbar .tb-btn.primary *,
.topbar .btn.primary,
.topbar .btn.primary *,
.topbar .avatar,
.topbar .avatar * {
  color: #ffffff !important;
}

.topbar .tb-btn.primary,
.topbar .btn.primary,
.topbar .avatar {
  background: #0093a7 !important;
  background-image: none !important;
  border-color: #007a8a !important;
}

/* --- testi barra superiore: vincono anche sulle vecchie regole scure --- */
.topbar .brand,
.topbar .brand *,
.topbar .brand-prod,
.topbar .brand-pill,
.tb .brand,
.tb .brand *,
.topbar .tb-btn,
.topbar .tb-btn .lbl,
.topbar .tb-status,
.topbar .tb-search,
.tb .tb-btn,
.tb .tb-status,
.tb .tb-search {
  color: #315860 !important;
}

.topbar .brand-prod span,
.topbar .brand-pill,
.tb .brand-pill {
  color: #007a8a !important;
}

.topbar .tb-search input::placeholder,
.tb .tb-search input::placeholder {
  color: #6a8185 !important;
}

.topbar .tb-search,
.tb .tb-search {
  background: #edf7f8 !important;
  border-color: #c8e2e6 !important;
}

.topbar .tb-btn.primary,
.topbar .tb-btn.primary *,
.tb .tb-btn.primary,
.tb .tb-btn.primary * {
  color: #ffffff !important;
}

.topbar .tb-avatar,
.tb .tb-avatar {
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #007a8a !important;
}

/* --- residui di testo chiaro su fondo chiaro (barre e pannelli) --- */
.client-tag,
.client-tag *,
header .sub,
.topbar .sub,
.navbar .sub,
header .btn,
header .btn *,
.navbar .btn,
.navbar .btn *,
header .btn-icon,
.navbar .btn-icon,
.copilot-close,
.panel-close,
.drawer-close {
  color: #315860 !important;
}

.client-tag,
header .btn,
.navbar .btn,
header .btn-icon,
.navbar .btn-icon {
  background: #edf7f8 !important;
  background-image: none !important;
  border-color: #c8e2e6 !important;
}

header .btn.primary,
header .btn.primary *,
.navbar .btn.primary,
.navbar .btn.primary * {
  background: #0093a7 !important;
  color: #ffffff !important;
  border-color: #007a8a !important;
}

.chat-avatar,
.ai-avatar,
.avatar {
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* --- ultimi residui: chip cliente, pulsanti icona, sottotitoli copilot --- */
.topbar .client-tag,
.topbar .client-tag *,
.topbar-row .client-tag,
.topbar-row .client-tag * {
  background: #edf7f8 !important;
  border: 1px solid #c8e2e6 !important;
  color: #007a8a !important;
}

.topbar .btn-icon,
.topbar .btn-icon *,
.topbar-actions .btn-icon,
.topbar-actions .btn-icon *,
.top-actions .btn-icon,
.topbar-actions .btn:not(.btn-ai):not(.tour-cta):not(.btn-primary),
.topbar-actions .btn:not(.btn-ai):not(.tour-cta):not(.btn-primary) * {
  background: #edf7f8 !important;
  background-image: none !important;
  border: 1px solid #c8e2e6 !important;
  color: #007a8a !important;
}

.copilot-h .sub,
.copilot-h p,
.chat-h .sub {
  color: rgba(255, 255, 255, 0.82) !important;
}

.copilot-h,
.chat-h {
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* --- pulsante menu su telefono --- */
#ocraMNavBtn,
.navbar #ocraMNavBtn,
.teams-topbar #ocraMNavBtn,
.topbar-row #ocraMNavBtn,
.topbar:has(.tb-brand) #ocraMNavBtn {
  background: #edf7f8 !important;
  border-color: #c8e2e6 !important;
  color: #007a8a !important;
}

/* =========================================================================
   LIVELLO 2 — stessa mano dell'accesso utente Artiplane.
   Tipografia, scala dei testi, geometria, barre, menu, tabelle, tour,
   accesso e uscita. Solo estetica: nessuna regola cambia comportamenti.
   ========================================================================= */

/* ------------------------------------------------- 1. tipografia comune */
:root,
html,
body {
  --ff: "Manrope", system-ui, -apple-system, sans-serif;
  --ff-d: "Sora", system-ui, sans-serif;
  --ff-m: "Manrope", ui-monospace, monospace;
  --ff-s: "Sora", system-ui, sans-serif;
  --r: 6px;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0, 147, 167, 0.08), 0 14px 34px rgba(0, 147, 167, 0.08);
}

body {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.page-h h1,
.card h3,
.panel h3,
.ai-hero h2,
.brand-name,
.tb-brand,
.kpi .v,
.kpi-v,
.metric .v {
  font-family: "Sora", system-ui, sans-serif !important;
  letter-spacing: -0.01em !important;
}

h1,
.page-h h1 {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

h2,
.ai-hero h2,
.insight-hero h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

h3,
.card h3,
.panel h3,
.card-h h3,
.panel-h h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* testi minori: mai sotto 12px, così restano leggibili come nell'accesso utente */
.sub,
.h-sub,
.page-h .h-sub,
.page-meta,
.card-h .sub,
.panel-h .sub,
.meta,
.lbl,
.l,
.hint,
.note,
.cap,
small {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.ai-tag,
.tag,
.chip,
.pill,
.badge,
.demo-badge,
.tenant-tag,
.client-tag,
.sidebar-section,
.nav-section,
.nav-group-label,
.rail-section,
th {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

.sidebar-section,
.nav-section,
.nav-group-label,
.rail-section,
th {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: #6a8185 !important;
}

/* ------------------------------------------------- 2. geometria comune */
.card,
.panel,
.cfg-card,
.ai-card,
.action-card,
.kpi,
.kpi-card,
.metric,
.stat,
.chip,
.pill,
.tag,
.badge,
.btn,
button,
input,
select,
textarea,
.tb-btn,
.nav-item,
.rail-item,
.side-item,
.tour-popup,
.login-card,
.drawer,
.modal,
.sheet {
  border-radius: 6px !important;
}

.card,
.panel,
.cfg-card,
.ai-card,
.action-card,
.kpi,
.kpi-card {
  box-shadow: 0 1px 2px rgba(0, 147, 167, 0.06) !important;
  border: 1px solid #dde9eb !important;
}

.card:hover,
.panel:hover {
  box-shadow: 0 1px 2px rgba(0, 147, 167, 0.08), 0 14px 34px rgba(0, 147, 167, 0.08) !important;
}

/* ------------------------------------ 3. barra superiore: 56px per tutti */
.topbar,
header.topbar,
.m-top,
.navbar,
.teams-topbar {
  min-height: 56px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.topbar-row,
.topbar-actions,
.top-actions {
  min-height: 56px !important;
  gap: 8px !important;
}

.topbar,
.topbar *,
.m-top *,
.navbar * {
  font-size: 13px;
}

.topbar .brand-name,
.m-top .brand-name,
.tb-brand,
.navbar .brand-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.topbar .brand-sub,
.m-top .brand-sub {
  font-size: 12px !important;
  color: #6a8185 !important;
  letter-spacing: 0.02em !important;
}

.topbar .brand-mark,
.m-top .brand-mark,
.brand-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #0093a7 !important;
  background-image: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.topbar button,
.topbar .tb-btn,
.topbar .btn,
.topbar select,
.m-top button {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* ------------------------------------------- 4. menu laterale uniforme */
.sidebar,
aside.sidebar,
.rail,
aside.rail {
  padding-top: 4px !important;
}

.nav-item,
.side-nav > a,
.rail-item,
.side-item {
  min-height: 36px !important;
  margin: 1px 8px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  gap: 10px !important;
}

.nav-item.active,
.rail-item.active,
.side-item.active,
.side-nav > a.active {
  font-weight: 600 !important;
}

.nav-item .ic,
.rail-item .ic,
.nav-item i {
  width: 18px !important;
  font-size: 14px !important;
}

.nav-item .badge,
.nav-item .num {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

.sidebar-section,
.nav-section,
.rail-section {
  padding: 14px 16px 6px !important;
}

.sidebar-foot,
.side-foot {
  padding: 12px 16px !important;
  font-size: 12.5px !important;
}

/* ------------------------------------------------ 5. tabelle ed elenchi */
table {
  font-size: 13px !important;
}

thead th {
  background: #f4fafb !important;
  color: #627b80 !important;
  border-bottom: 1px solid #dde9eb !important;
  padding: 8px 10px !important;
}

tbody td {
  border-bottom: 1px solid #e8f4f6 !important;
  padding: 8px 10px !important;
  color: #315860 !important;
}

tbody tr:hover td {
  background: #f8fcfb !important;
}

/* --------------------------------- 6. semafori e stati: tinte Artiplane */
.ok,
.good,
.up,
.badge.ok,
.pill.ok,
.state-ok {
  color: #1f7a58 !important;
}

.warn,
.badge.warn,
.pill.warn,
.state-warn {
  color: #96690f !important;
}

.bad,
.ko,
.down,
.crit,
.badge.bad,
.pill.bad,
.state-bad {
  color: #a1352a !important;
}

/* --------------------------------------- 7. riquadri del tour uniformi */
.tour-popup,
.tt-pop,
.tour-popup-b {
  font-family: "Manrope", system-ui, sans-serif !important;
  border-radius: 6px !important;
}

.tour-popup {
  border: 1px solid #c8e2e6 !important;
  box-shadow: 0 1px 2px rgba(0, 147, 167, 0.08), 0 18px 46px rgba(0, 147, 167, 0.18) !important;
}

.tour-popup-h,
.tt-pop-h {
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
}

.tour-popup-h h3,
.tt-pop-h h3 {
  font-family: "Sora", system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #ffffff !important;
}

.tour-popup-h .step-tag {
  background: rgba(255, 255, 255, 0.2) !important;
  background-image: none !important;
  box-shadow: none !important;
  letter-spacing: 0.06em !important;
}

.tour-popup-b,
.tt-pop-b {
  font-size: 13px !important;
  color: #315860 !important;
}

.tour-popup-f,
.tt-pop-f {
  background: #f8fcfb !important;
  border-top: 1px solid #dde9eb !important;
}

.tour-popup-f::after {
  display: none !important;
}

.tour-btn,
.tt-btn {
  border-radius: 6px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  border: 1px solid #c8e2e6 !important;
  background: #ffffff !important;
  color: #315860 !important;
}

.tour-btn.primary,
.tt-btn.primary {
  background: #0093a7 !important;
  background-image: none !important;
  border-color: #007a8a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.tour-spot {
  border-color: #0093a7 !important;
  border-radius: 6px !important;
}

.tour-cta {
  background: #edf7f8 !important;
  background-image: none !important;
  border: 1px solid #c8e2e6 !important;
  color: #007a8a !important;
  border-radius: 6px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
}

/* -------------------------------------- 8. schermata di accesso e dialoghi */
.login-card,
.ocra-login-card,
.modal,
.drawer,
.sheet,
.dialog {
  border: 1px solid #dde9eb !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 147, 167, 0.08), 0 18px 46px rgba(0, 147, 167, 0.14) !important;
}

.login-card h1,
.ocra-login-card h1,
.login-card h2 {
  font-family: "Sora", system-ui, sans-serif !important;
}

input,
select,
textarea {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  border-color: #cee2e5 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(0, 147, 167, 0.35) !important;
  outline-offset: 1px;
}

/* ------------------------------------ 9. tasto di uscita come nell'app */
#ocra-exit-btn {
  top: 11px !important;
  right: 16px !important;
  gap: 8px !important;
  padding: 0 12px !important;
  min-height: 34px !important;
  align-items: center !important;
  background: #ffffff !important;
  color: #315860 !important;
  border: 1px solid #c8e2e6 !important;
  border-radius: 6px !important;
  font: 600 12.5px/1 "Manrope", system-ui, sans-serif !important;
  box-shadow: 0 1px 2px rgba(0, 147, 167, 0.08) !important;
}

#ocra-exit-btn:hover {
  background: #edf7f8 !important;
  border-color: #7ad5dc !important;
  color: #007a8a !important;
}

#ocra-exit-btn .ic {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* ------------------------------------------------ 10. telefono e tablet */
@media (max-width: 860px) {
  body {
    font-size: 13.5px !important;
  }

  h1,
  .page-h h1 {
    font-size: 20px !important;
  }

  h2,
  .ai-hero h2 {
    font-size: 17px !important;
  }

  .topbar,
  .topbar-row,
  .navbar,
  .teams-topbar {
    min-height: 52px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ------------------- 11. componenti canonici (filtri, avvisi, oro) */
.audtr-chip,
.chip,
.pill {
  border-radius: 999px !important;
}

.audtr-chip.on,
.audtr-chip.active {
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #007a8a !important;
  font-family: "Manrope", system-ui, sans-serif !important;
}

.audtr-chip {
  font-size: 12px !important;
}

.ocra-i18n-toast {
  font-family: "Manrope", system-ui, sans-serif !important;
  background: #17383e !important;
  border-radius: 6px !important;
  box-shadow: 0 18px 46px rgba(0, 147, 167, 0.28) !important;
}

.ocra-i18n-toast .dot {
  background: #7ad5dc !important;
  box-shadow: none !important;
  animation: none !important;
}

.btn.gold,
.btn-gold,
button.btn-gold,
.btn-ai,
.ra.gold {
  background: #0093a7 !important;
  background-image: none !important;
  border-color: #007a8a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn.gold:hover,
.btn-gold:hover,
button.btn-gold:hover,
.btn-ai:hover {
  background: #007a8a !important;
}

.user-av,
.av,
.avatar {
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
}

.brand-product,
.demo-badge,
.ai-badge,
.ai-stat .v,
.kpi.featured .kpi-foot,
.pill.vip {
  color: #007a8a !important;
}

.demo-badge,
.ai-badge {
  background: #edf7f8 !important;
  border-color: #c8e2e6 !important;
}

.demo-badge::before,
.ai-badge .dot {
  background: #0093a7 !important;
  box-shadow: none !important;
  animation: none !important;
}

.pill.vip {
  background: #edf7f8 !important;
  background-image: none !important;
  border: 1px solid #c8e2e6 !important;
}

.bar-row .fill,
.bar .fill,
.progress > span {
  background: #0093a7 !important;
  background-image: none !important;
}

/* ------------------- 12. ritocchi per singola app */
body[data-ap-app="cfo-ai-copilot"] .brand-name,
body[data-ap-app="buyer-copilot"] .brand-name,
body[data-ap-app="buying-command-center"] .brand-name {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 15px !important;
}

body[data-ap-app="clienteling"] .nav-item.active::before {
  background: #0093a7 !important;
}

body[data-ap-app="clienteling"] .nav-item.active .num {
  color: #007a8a !important;
}

/* ------------------- 13. pannelli AI e pulsanti primari uniformi */
.ai-summary,
.recommendation,
.ai-reco,
.insight-hero {
  background: #edf7f8 !important;
  background-image: none !important;
  color: #17383e !important;
  border: 1px solid #c8e2e6 !important;
  border-radius: 6px !important;
}

.ai-summary *,
.recommendation *,
.insight-hero * {
  color: #315860 !important;
}

.ai-summary h2,
.ai-summary h3,
.ai-summary b,
.recommendation h2,
.recommendation h3,
.recommendation b,
.ai-summary .v,
.recommendation .v,
.ai-stat .v {
  color: #007a8a !important;
}

.ai-summary .lbl,
.recommendation .lbl,
.ai-summary small,
.recommendation small {
  color: #627b80 !important;
}

.btn-primary,
.btn.primary,
button.primary,
.btn.btn-primary,
.cta,
.btn-run {
  background: #0093a7 !important;
  background-image: none !important;
  border: 1px solid #007a8a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn.primary:hover,
button.primary:hover,
.cta:hover {
  background: #007a8a !important;
}

/* la barra superiore non manda a capo le etichette dei pulsanti */
.topbar button,
.topbar .btn,
.topbar .tour-cta,
.topbar .client-tag,
.topbar-actions > *,
.main-actions > * {
  white-space: nowrap !important;
}

/* ------------------- 14. intestazione del menu laterale leggibile */
.sidebar .brand,
.sidebar .sidebar-head,
.sidebar .brand-row {
  color: #17383e !important;
}

.sidebar .brand-product,
.sidebar .brand-name,
.sidebar .brand-title {
  color: #007a8a !important;
  font-family: var(--ff-d) !important;
  line-height: 1.25 !important;
}

.sidebar .brand-sub,
.sidebar .brand-meta,
.sidebar .brand small {
  color: #627b80 !important;
}

.sidebar .brand {
  border-bottom: 1px solid #dde9eb !important;
}

/* spazio per il pulsante di uscita fisso in alto a destra */
body.ocra-exit-visible .topbar,
body.ocra-exit-visible .main-top,
body.ocra-exit-visible .navbar-row1,
body.ocra-exit-visible .topbar-row,
body.ocra-exit-visible .teams-topbar {
  padding-right: 120px !important;
}

/* 15. Menu Worker App — replica della navigazione Business Artiplane */
@media (min-width: 861px) {
  .sidebar,
  aside.sidebar,
  .rail,
  aside.rail {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}

.sidebar,
aside.sidebar,
.rail,
aside.rail {
  padding: 16px 7px 10px !important;
  background: #ffffff !important;
  border-color: #d7e7e9 !important;
}

.sidebar-section,
.sb-sec,
.nav-section,
.nav-group-label,
.rail-section {
  margin: 0 !important;
  padding: 14px 4px 7px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #5b7473 !important;
  text-transform: none !important;
}

.nav-item,
.side-nav > a,
.rail-item,
.side-item {
  position: relative !important;
  min-height: 40px !important;
  margin: 1px 0 !important;
  padding: 9px 12px !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-left: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #5b7473 !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease !important;
}

.nav-item:hover,
.side-nav > a:hover,
.rail-item:hover,
.side-item:hover,
.sidebar .nav-item:hover,
.rail .rail-item:hover {
  background: #edf7f8 !important;
  color: #17383e !important;
  border-color: transparent !important;
  transform: none !important;
}

.nav-item.active,
.nav-item[aria-current="page"],
.side-nav > a.active,
.rail-item.active,
.side-item.active,
.sidebar .nav-item.active,
.rail .rail-item.active,
.side .side-item.active {
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #0093a7 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(0, 147, 167, 0.14) !important;
}

.nav-item.active *,
.nav-item[aria-current="page"] *,
.side-nav > a.active *,
.rail-item.active *,
.side-item.active *,
.sidebar .nav-item.active *,
.rail .rail-item.active * {
  background-color: transparent !important;
  color: #ffffff !important;
}

.nav-item.active::before,
.nav-item[aria-current="page"]::before,
.side-nav > a.active::before,
.rail-item.active::before,
.side-item.active::before {
  content: none !important;
}

/* Come nella navigazione Admin: nessuna iconcina, solo un pallino sobrio. */
.nav-item .ic,
.nav-item i,
.rail-item .ic,
.rail-item i,
.rail-item .ri-ic,
.side-item i {
  display: inline-block !important;
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  margin: 0 3px 0 1px !important;
  overflow: hidden !important;
  border: 1px solid #007a8a !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
}

.nav-item .ic::before,
.nav-item i::before,
.rail-item .ic::before,
.rail-item i::before,
.rail-item .ri-ic::before,
.side-item i::before,
.nav-item .ic::after,
.nav-item i::after,
.rail-item .ic::after,
.rail-item i::after,
.side-item i::after {
  content: none !important;
  display: none !important;
}

.nav-item.active .ic,
.nav-item.active i,
.nav-item[aria-current="page"] .ic,
.rail-item.active .ic,
.rail-item.active i,
.rail-item.active .ri-ic,
.side-item.active i {
  border-color: #ffffff !important;
  background: #ffffff !important;
}


.nav-item .badge,
.nav-item .num,
.rail-item .ri-badge,
.side-item .badge {
  margin-left: auto !important;
  padding: 1px 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #edf7f8 !important;
  color: #627b80 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.nav-item.active .badge,
.nav-item.active .num,
.rail-item.active .ri-badge,
.side-item.active .badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.sidebar-foot,
.side-foot {
  padding: 10px !important;
  font-size: 11.5px !important;
}

@media (max-width: 860px) {
  .sidebar,
  aside.sidebar,
  .rail,
  aside.rail {
    padding: 5px 7px 9px !important;
  }

  .nav-item,
  .side-nav > a,
  .rail-item,
  .side-item {
    min-height: 40px !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
  }
}

/* =========================================================================
   16. Barra in alto: marchio Artiplane uniforme in tutte le Worker App
   ========================================================================= */
.topbar .ap-brand,
.m-top .ap-brand,
.ap-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ap-brand .ap-brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #0093a7 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
}

.ap-brand .ap-brand-mark svg {
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  display: block !important;
}

/* Gli stili locali delle app (es. .topbar .brand *) applicano il colore scuro
   anche al path; forziamo il bianco direttamente sul path con specificità alta. */
.topbar .ap-brand .ap-brand-mark svg path,
.m-top .ap-brand .ap-brand-mark svg path,
.ap-brand .ap-brand-mark svg path,
.ap-brand .ap-brand-mark svg *[fill="currentColor"] {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.ap-brand .ap-brand-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  line-height: 1.15 !important;
}

.topbar .ap-brand .brand-name,
.ap-brand .brand-name {
  font-family: "Urbanist", "Manrope", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #17383e !important;
  white-space: nowrap !important;
}

.topbar .ap-brand .brand-sub,
.ap-brand .brand-sub {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #5b7473 !important;
  white-space: nowrap !important;
}

/* 17. Pallini del menu: specificità sufficiente a vincere sui CSS delle app */
.sidebar .nav-item .ic,
.sidebar .nav-item i,
.rail .rail-item .ic,
.rail .rail-item i,
.rail .rail-item .ri-ic,
.side .side-item i,
.sidenav .nav-item i,
.side-nav > a i,
aside.sidebar .nav-item i,
aside.rail .rail-item i {
  display: inline-block !important;
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  margin: 0 3px 0 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #007a8a !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  opacity: 1 !important;
}

.sidebar .nav-item.active .ic,
.sidebar .nav-item.active i,
.sidebar .nav-item[aria-current="page"] i,
.rail .rail-item.active .ic,
.rail .rail-item.active i,
.rail .rail-item.active .ri-ic,
.side .side-item.active i,
.sidenav .nav-item.active i,
.side-nav > a.active i,
aside.sidebar .nav-item.active i,
aside.rail .rail-item.active i {
  border-color: #ffffff !important;
  background: #ffffff !important;
}