/* Solo layout dell'app: colori e componenti vengono da NOWY UI v2 (token --nw-* / --st-*) */
.nat-urlbar { display: grid; grid-template-columns: 96px 200px minmax(0, 1fr); gap: 6px; align-items: center; }
.nat-urlbar .form-select, .nat-urlbar .form-control { height: 30px; font-size: 13px; }
.nat-fullurl { font: 12px/1.5 'JetBrains Mono', ui-monospace, monospace; color: var(--nw-label-3); margin: 6px 0 0; word-break: break-all; }
.nat-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
@media (max-width: 1100px) { .nat-grid { grid-template-columns: 1fr; } .nat-urlbar { grid-template-columns: 90px 1fr; } .nat-urlbar .nat-path { grid-column: 1 / -1; } }
.nat-panel { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--nw-sep); background: var(--nw-bg-2, transparent); min-width: 0; }
.nat-panel-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--nw-sep); }
.nat-panel-head .grow { flex: 1; }
.nat-panel-body { padding: 10px; }
.nat-code { width: 100%; min-height: 380px; resize: vertical; font: 12.5px/1.55 'JetBrains Mono', ui-monospace, monospace; tab-size: 2;
  background: var(--nw-fill-2); color: var(--nw-label); border: 0; border-radius: 6px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--nw-sep); }
.nat-code:focus { outline: none; box-shadow: var(--nw-focus-ring, 0 0 0 2px var(--nw-accent)); }
pre.nat-code { white-space: pre-wrap; word-break: break-word; margin: 0; min-height: 200px; max-height: 560px; overflow: auto; }
.nat-drop { position: relative; }
.nat-drop.over::after { content: 'Rilascia il file per caricarlo nel corpo'; position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 6px; border: 1.5px dashed var(--nw-accent); background: color-mix(in srgb, var(--nw-accent) 10%, transparent); color: var(--nw-label); font-weight: 500; }
.nat-fields { display: grid; grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.4fr); gap: 4px 10px; align-items: center; max-height: 470px; overflow: auto; }
.nat-fields .k { font: 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--nw-label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nat-fields .k .idx { color: var(--nw-label-3); }
.nat-fields .form-control { height: 28px; font-size: 12.5px; }
.nat-fields .sep { grid-column: 1 / -1; font-size: 11.5px; color: var(--nw-label-3); text-transform: uppercase; letter-spacing: .04em; padding-top: 8px; border-top: 1px solid var(--nw-sep); margin-top: 4px; }
.nat-headers { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.4fr) 28px; gap: 4px 6px; align-items: center; }
.nat-headers .form-control { height: 28px; font-size: 12.5px; }
.nat-resp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nat-resp-meta .ms { color: var(--nw-label-3); font-variant-numeric: tabular-nums; }
.nat-help { border: 0; background: none; color: var(--nw-label-3); padding: 0 2px; line-height: 1; }
.nat-help:hover { color: var(--nw-label); }
.nat-title-input { font: inherit; font-weight: 500; background: transparent; border: 0; color: var(--nw-label); padding: 0 4px; border-radius: 4px; min-width: 220px; }
.nat-title-input:focus { outline: none; box-shadow: var(--nw-focus-ring, 0 0 0 2px var(--nw-accent)); }
.nat-dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--st-partial, #e2b714); display: inline-block; margin-left: 6px; vertical-align: middle; }
.nav-item .nat-m { font: 10px 'JetBrains Mono', ui-monospace, monospace; color: var(--nw-label-3); margin-left: auto; }
.nat-env-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .nat-env-grid { grid-template-columns: 1fr; } }
.nat-form .row-f { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; }
.nat-form label { color: var(--nw-label-2); font-size: 12.5px; }
.nat-form .form-control, .nat-form .form-select { height: 30px; font-size: 13px; }
.nat-mpl { font: 12px 'JetBrains Mono', ui-monospace, monospace; }
.popover { --bs-popover-max-width: 340px; font-size: 12.5px; }
.nat-guide h3 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.nat-guide p, .nat-guide li { color: var(--nw-label-2); font-size: 13px; }
.nat-kbd { font: 11px 'JetBrains Mono', monospace; padding: 1px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--nw-sep); color: var(--nw-label-2); }

/* avvio: niente lampo del menu prima di sapere se serve il login */
.nat-boot .layout { visibility: hidden; }

/* cartelle nel menu "Chiamate salvate" */
.nat-folder-head { display: flex; align-items: center; border-radius: var(--nw-r-sm); margin: 1px 0; }
.nat-folder-head:hover, .nat-folder-head.active { background: var(--nw-fill-2); }
.nat-folder-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 4px 6px 8px;
  font-size: 13px; color: var(--nw-label-2); text-align: left; cursor: pointer; }
.nat-folder-toggle .nw-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nat-folder-toggle .nat-caret { font-size: 8px; color: var(--nw-label-3); transition: transform .2s ease; }
.nat-folder.closed .nat-caret { transform: rotate(-90deg); }
.nat-folder-toggle .nat-fico { color: var(--nw-label-3); font-size: 13px; }
.nat-folder-open { padding: 4px 8px; color: var(--nw-label-3); opacity: 0; line-height: 1; }
.nat-folder-head:hover .nat-folder-open, .nat-folder-head.active .nat-folder-open, .nat-folder-open:focus { opacity: 1; }
.nat-folder-open:hover { color: var(--nw-label); }
.nat-folder-items { display: flex; flex-direction: column; padding-left: 12px; }
.nat-folder.closed .nat-folder-items { display: none; }
.nat-searching .nat-folder.closed .nat-folder-items { display: flex; }
.nat-folder-empty { font-size: 12px; color: var(--nw-label-3); padding: 2px 10px 4px; }
.sidebar .nav-item i.nat-pub, .nat-folder-toggle i.nat-pub { width: auto; font-size: 11px; color: var(--nw-label-3); opacity: 1; flex: none; }
.nat-nav-link { display: flex; align-items: center; gap: 8px; padding: 5px 10px; margin-top: 2px; font-size: 12.5px; color: var(--nw-label-3); border-radius: var(--nw-r-sm); }
.nat-nav-link:hover { color: var(--nw-label); background: var(--nw-fill-2); }

/* proprieta' della chiamata: cartella, Pubblica, autore */
.nat-props-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 12.5px; color: var(--nw-label-2); }
.nat-props-bar .form-select { width: auto; min-width: 160px; height: 28px; font-size: 12.5px; padding-top: 2px; padding-bottom: 2px; }
.nat-props-bar .form-control { width: 200px; height: 28px; font-size: 12.5px; }
.nat-props-note { color: var(--nw-label-3); }
.nat-inline { display: inline-flex; align-items: center; gap: 4px; }

/* payload salvati della chiamata (riga sopra il tracciato) */
.nat-payloads { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--nw-sep); font-size: 12.5px; color: var(--nw-label-2); }
.nat-payloads .grow { flex: 1; }
.nat-payloads .btn { font-size: 12.5px; padding-top: 1px; padding-bottom: 1px; }
.nat-payloads .btn-group > .btn:first-child { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nat-payloads .form-control { width: 180px; height: 26px; font-size: 12.5px; }
.nat-payloads .form-select { width: auto; height: 26px; font-size: 12.5px; padding-top: 1px; padding-bottom: 1px; }
.nat-pl-label { color: var(--nw-label-3); }
.nat-pl-def { color: var(--nw-accent); font-size: 10px; margin-right: 4px; }

/* pagina di accesso (sfondo .nw-auth del kit) */
.nat-login { width: 380px; max-width: calc(100vw - 32px); }
.nat-login .card-body { padding: 28px; }
.nat-login-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--nw-label); }
.nat-login-title { font-size: 20px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 6px; }
.nat-login label { display: block; margin-bottom: 4px; }
.nat-login .form-control { height: 34px; }

/* "Chi la vede" (chiamate, cartelle, puntamenti) e team */
.nat-vis { flex-wrap: wrap; gap: 6px; }
.nat-props-bar .nat-emails { width: 320px; max-width: 100%; }
.nat-form .nat-props-bar { margin-top: 0; }
.nat-teams { max-width: 820px; }
.nat-teams .nw-tag a { color: var(--nw-label-3); margin-left: 2px; }
.nat-teams .nw-tag a:hover { color: var(--nw-label); }

/* impostazioni (ingranaggio in fondo al menu) */
.nw-side-foot .nw-side-btn.active { background: var(--nw-fill-2); color: var(--nw-label); }
.nat-settings { max-width: 560px; }
.nat-settings .nw-section { margin-top: 0; }
.nat-settings .form-check-label { font-size: 13px; color: var(--nw-label); }
.nat-guide-toc { font-size: 12.5px; color: var(--nw-label-3); }

/* finestra stretta: il kit nasconde il menu sotto 992px; pulsante nella barra in alto + velo dietro il menu aperto */
.topbar h1 .nw-menu-btn { width: 28px; height: 28px; padding: 0; align-items: center; justify-content: center; flex: none; margin-right: 4px; font-size: 16px; }
.nat-scrim { display: none; }
@media (max-width: 992px) {
  .nat-scrim { display: block; position: fixed; inset: 0; z-index: 1035; background: color-mix(in srgb, var(--nw-label) 28%, transparent);
    opacity: 0; pointer-events: none; transition: opacity .2s var(--nw-ease); }
  html[data-theme="dark"] .nat-scrim { background: color-mix(in srgb, var(--nw-bg) 65%, transparent); }
  body.nav-open .nat-scrim { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .nat-scrim { transition: none; } }

/* pulsanti (Strumenti › Pulsanti): tessere che avviano una chiamata salvata */
.nat-buttons { max-width: 980px; }
.nat-btn-form { max-width: 640px; }
.nat-btn-form .form-check-label { font-size: 13px; color: var(--nw-label); }
.nat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.nat-tile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--nw-sep); border-radius: var(--nw-r-lg); background: var(--nw-panel); }
.nat-tile.is-armed { border-color: var(--nw-orange); box-shadow: 0 0 0 1px var(--nw-orange); }
.nat-tile-run { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 14px 44px 12px 14px; border: 0; background: none; color: var(--nw-label);
  text-align: left; border-radius: var(--nw-r-lg) var(--nw-r-lg) 0 0; transition: background-color var(--nw-dur-fast) var(--nw-ease); }
.nat-tile-run:hover:not(:disabled) { background: var(--nw-fill); }
.nat-tile-run:focus-visible { outline: none; box-shadow: var(--nw-focus-ring); }
.nat-tile-run:disabled { cursor: default; opacity: .75; }
.nat-tile-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--nw-r);
  background: var(--nw-accent-tint); color: var(--nw-accent); font-size: 17px; }
.nat-tile.is-armed .nat-tile-ico { background: var(--nw-orange-tint); color: var(--nw-orange); }
.nat-tile-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.nat-tile-txt b { font-weight: 600; font-size: 13.5px; }
.nat-tile-txt .sub { font-size: 12px; color: var(--nw-label-3); }
.nat-tile.is-armed .nat-tile-txt .sub { color: var(--nw-orange); font-weight: 500; }
.nat-tile-txt .note { font-size: 12px; color: var(--nw-label-2); }
.nat-tile-more { position: absolute; top: 10px; right: 10px; }
.nat-tile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; padding: 8px 14px; border-top: 1px solid var(--nw-sep); font-size: 12px; font-variant-numeric: tabular-nums; }
.nat-tile-foot .muted { color: var(--nw-label-3); }
.nat-btn-form .nat-tile-ico { width: 30px; height: 30px; font-size: 15px; }
.nat-btn-form .nat-inline .form-select { width: auto; }
/* esito su PeoplePortal dei flussi «…/invia» (letto dal Monitor CPI) */
.nat-esiti { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--nw-sep); border-radius: 8px; font-size: 13px; }
.nat-esiti-head { margin-bottom: 6px; }
.nat-esiti .muted, .nat-esiti-row .muted { color: var(--nw-label-3); }
.nat-esiti-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.nat-esiti-sub { margin: 8px 0 2px; font-weight: 500; }
.nat-esiti-row { display: grid; grid-template-columns: 64px 120px 1fr; gap: 8px; padding: 3px 0; border-top: 1px solid var(--nw-sep); align-items: baseline; }
.nat-esiti details { margin-top: 6px; } .nat-esiti summary { cursor: pointer; color: var(--nw-label-2); }
.nat-tile-esiti { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
@media (max-width: 600px) { .nat-esiti-row { grid-template-columns: 56px 1fr; } .nat-esiti-row .muted { grid-column: 1 / -1; } }