/* K RM 1.63.1 — shared visual language across pages; presentation only. */
:root {
  --ui-teal: #007b7b;
  --ui-teal-dark: #006565;
  --ui-teal-soft: #e6f2f2;
  --ui-ink: #1b2b2e;
  --ui-muted: #5b6b70;
  --ui-line: #e3e8ea;
  --ui-surface: #fff;
  --ui-background: #fafbfb;
  --ui-shadow: 0 8px 28px rgba(16,48,52,.06);
}

body:not(.krm-login-active) { background: var(--ui-background); color: var(--ui-ink); }
.app-shell { --green: var(--ui-teal); --green-dark: var(--ui-teal-dark); --ink: var(--ui-ink); --muted: var(--ui-muted); --line: var(--ui-line); }
.app-shell .sidebar { background: linear-gradient(180deg, #15363b 0%, #102a2f 100%); }
.app-shell .brand-mark { background: var(--ui-teal); color: #fff; font-family: Inter, system-ui, sans-serif; }
.app-shell .sidebar .nav-item { border-radius: 10px; }
.app-shell .sidebar .nav-item.active,
.app-shell .sidebar .nav-item:hover { background: rgba(130,215,216,.16); color: #fff; }
.app-shell .brand-version { color: #b9d7d7; }
.app-shell > main { max-width: 1600px; }
.app-shell > main > header { gap: 16px; }
.app-shell > main > header h1 { color: var(--ui-ink); font: 750 clamp(25px,2.5vw,32px)/1.2 Inter,system-ui,sans-serif; letter-spacing: -.02em; }
.app-shell > main > header .eyebrow { color: var(--ui-teal); }
.app-shell > main > header .subtitle { color: var(--ui-muted); }
.app-shell > main .section-heading h2,
.app-shell > main .detail-section h3,
.app-shell > main .module-card h2 { color: var(--ui-ink); font-family: Inter,system-ui,sans-serif; font-weight: 700; }
.app-shell :is(.primary,.secondary,.icon-btn),
.overlay :is(.primary,.secondary,.icon-btn) { border-radius: 8px; min-height: 40px; font-size: 13px; font-weight: 650; }
.app-shell .primary, .overlay .primary { background: var(--ui-teal); color: #fff; box-shadow: none; }
.app-shell .primary:hover, .overlay .primary:hover { background: var(--ui-teal-dark); }
.app-shell .secondary, .overlay .secondary { background: #fff; color: var(--ui-ink); border: 1px solid #c5d0d3; }
.app-shell .secondary:hover, .overlay .secondary:hover { border-color: var(--ui-teal); color: var(--ui-teal-dark); }
.app-shell :is(button,a,input,textarea,select,summary):focus-visible,
.overlay :is(button,a,input,textarea,select,summary):focus-visible { outline: 3px solid rgba(0,123,123,.35); outline-offset: 2px; }
.app-shell > main :is(.stats article,.module-grid article,.module-card,.record-card,.work-section,.ticket,.empty-state,.detail-section,.global-chat-shell,.ai-panel,.ai-side) {
  border-color: var(--ui-line);
  border-radius: 12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.app-shell > main :is(.stats article,.module-grid article,.module-card,.record-card,.ticket) { transition: border-color .18s,box-shadow .18s,transform .18s; }
.app-shell > main :is(.record-card,.ticket,.module-card):hover { border-color: #b6d6d6; box-shadow: 0 12px 30px rgba(16,48,52,.09); }
.app-shell > main :is(.stats strong,.module-grid strong) { color: var(--ui-ink); font-family: Inter,system-ui,sans-serif; font-weight: 750; }
.app-shell > main :is(.stats small,.module-grid small,.detail-grid small) { color: var(--ui-muted); letter-spacing: .07em; }
.app-shell > main .stat-filter-card.active { background: var(--ui-teal-soft); border-left-color: var(--ui-teal) !important; }
.app-shell > main .section-heading { gap: 14px; }
.app-shell > main :is(.search,.filters select) { border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; }
.app-shell > main :is(.search input,.filters select) { color: var(--ui-ink); }
.app-shell > main .state-pill { border-radius: 999px; font-size: 11px; }
.app-shell > main .record-card :is(h3,strong),
.app-shell > main .ticket h3 { font-size: 13px; }
.app-shell > main .record-card :is(p,small),
.app-shell > main .ticket-meta { font-size: 11px; }
.overlay:not(#detailOverlay) { background: rgba(19,43,45,.43); }
.overlay:not(#detailOverlay) .detail-panel,
.overlay .modal { background: #fff; color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: 0 24px 64px rgba(16,48,52,.16); }
.overlay .modal-head h2,
.overlay:not(#detailOverlay) .detail-top h2 { font-family: Inter,system-ui,sans-serif; font-weight: 750; color: var(--ui-ink); }
.overlay .modal-head small,
.overlay:not(#detailOverlay) .detail-top small { color: var(--ui-teal); font-size: 11px; }
.overlay .modal :is(input,select,textarea),
.overlay:not(#detailOverlay) .detail-panel :is(input,select,textarea) { border-color: #cbd5d8; border-radius: 8px; background: #fff; }
.overlay .modal :is(input,select,textarea):focus,
.overlay:not(#detailOverlay) .detail-panel :is(input,select,textarea):focus { border-color: var(--ui-teal); }
.overlay .modal :is(input,select,textarea)[aria-invalid="true"],
.overlay .modal :is(input,select,textarea).field-invalid { border-color: #c93a3a; background: #fff8f7; }
.overlay .modal :is(input,select,textarea).field-valid { border-color: #2b9c72; background: #f3fbf7; }
.overlay .close-btn { background: #f0f4f5; color: var(--ui-ink); }
.overlay .modal-actions { gap: 8px; }
@media (max-width: 860px) {
  .app-shell > main { min-width: 0; }
  .app-shell > main > header { flex-wrap: wrap; }
  .app-shell > main .module-grid { gap: 10px; }
}
@media (max-width: 620px) {
  .app-shell > main > header .subtitle { display: block; }
  .app-shell > main > header :is(button,.primary,.secondary) { max-width: 100%; }
  .app-shell > main :is(.stats,.module-grid) { gap: 8px; }
  .app-shell > main :is(.stats article,.module-grid article,.module-card) { min-width: 0; }
  .overlay:not(#detailOverlay) .detail-panel { width: 100%; border-radius: 0; }
  .overlay .modal { max-width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell > main :is(.stats article,.module-grid article,.module-card,.record-card,.ticket) { transition: none; }
}

/* Unificato staging: posizione, contrasto e focus del menu senza cambiare rotte. */
.app-shell .sidebar nav .nav-item { color:#e6f0ec; font-size:14px; font-weight:600; min-height:45px; }
.app-shell .sidebar nav .nav-item > span { font-size:19px; }
.app-shell .sidebar nav .nav-item.active,
.app-shell .sidebar nav .nav-item[aria-current="page"] { background:#216857; color:#fff; box-shadow:inset 4px 0 #d8b76d; font-weight:750; }
.app-shell .sidebar nav :is(.nav-item,.nav-subitem):focus-visible,
.krm-mobile-menu-toggle:focus-visible { outline:3px solid #f3cf76; outline-offset:2px; }
.app-shell .sidebar nav :is(.nav-item,.nav-subitem):hover { background:#28564e; color:#fff; }
.krm-breadcrumb { display:flex; align-items:center; gap:7px; margin:0 0 14px; color:#536b66; font-size:13px; font-weight:650; }
.krm-breadcrumb a { color:#176b57; text-decoration:none; }
.krm-breadcrumb a:hover,.krm-breadcrumb a:focus-visible { text-decoration:underline; }
.krm-mobile-menu-toggle,.krm-mobile-menu-backdrop { display:none; }
.client-list-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:12px 0 16px; }
.client-list-controls label { display:grid; gap:5px; min-width:min(190px,100%); color:#38574e; font-size:12px; font-weight:700; }
.client-list-controls select { min-height:44px; padding:8px 12px; border:1px solid #b9d0c6; border-radius:9px; background:#fff; color:#17352f; font:inherit; font-size:15px; }
.record-card[data-client] { cursor:pointer; }
.record-card[data-client]:focus-visible { outline:3px solid #17705a; outline-offset:2px; }
@media (max-width:620px) {
  .client-list-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client-list-controls label:first-child { grid-column:1/-1; }
  .client-list-controls label { min-width:0; }
  .record-card[data-client] { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .record-card[data-client] > div { min-width:0; overflow-wrap:anywhere; }
}