/* ==========================================================================
   KappaMed Layout — foglio stile unificato
   Estratto da: proto/layout-generico-prototype.html
               proto/selezione-paziente-prototype.html
               proto/patient-banner-prototype.html
   Non rimuovere: Import.css e i CSS dei controlli ASP.NET continuano ad
   essere inclusi separatamente; questo file si sovrappone solo al layout
   di pagina.
   ========================================================================== */


/* ==========================================================================
   JQUERY UI AUTOCOMPLETE — override globale (caricato dopo jquery-ui.css)
   ========================================================================== */
ul.ui-autocomplete.ui-menu {
  list-style: none !important;
  list-style-type: none !important;
  margin: 4px 0 0 !important;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border: 1px solid #c8d0da !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(31, 36, 48, .18) !important;
  max-height: 300px !important;
  max-width: calc(100vw - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}

ul.ui-autocomplete::-webkit-scrollbar {
  width: 5px;
}

ul.ui-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}

ul.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #c8d0da;
  border-radius: 3px;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item {
  list-style: none !important;
  list-style-type: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item+li.ui-menu-item {
  border-top: 1px solid #f0f2f5 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper,
ul.ui-autocomplete.ui-menu li.ui-menu-item a {
  display: block !important;
  padding: 10px 14px !important;
  color: #1f2430 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a:hover {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-focus {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.ui-autocomplete.ui-widget-content {
  border: none !important;
}

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  --km-blue-700: #2c5c8f;
  --km-blue-600: #3b74ad;
  --km-blue-50: #eaf2fb;

  --km-maroon-900: #3a0f0e;
  --km-maroon-700: #5c1917;
  --km-tan-100: #f6e7d2;
  --km-tan-300: #e8c79b;

  --km-yellow-500: #e0a52c;
  --km-yellow-600: #c98f1c;
  --km-green-600: #4a9d5f;

  --km-bg: #eef1f4;
  --km-card: #ffffff;
  --km-border: #dde2e7;
  --km-ink: #1f2430;
  --km-muted: #5b6472;
  --km-focus: #7fb7ff;
  --km-radius: 8px;

  /*
    Breakpoint system (3 livelli):
      --km-bp-sm : 640px   (iPad portrait / small tablet)
      --km-bp-lg : 1024px  (desktop / iPad landscape)
      --km-bp-xl : 1280px  (desktop wide)

    Sidebar width per livello:
      Mobile  (<640px) : drawer fixed 270px (fuori dal flusso)
      iPad    (640px+) : sticky 200px
      Desktop (1024px+): sticky 250px
  */
  --km-sidebar-w-tablet: 200px;
  --km-sidebar-w-desktop: 250px;

  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Reset di base ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--km-bg);
  color: var(--km-ink);
  min-height: 100%;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Blocco scroll body quando la sidebar mobile è aperta */
body.km-body-locked {
  overflow: hidden !important;
  position: relative;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
label:focus-within {
  outline: 2px solid var(--km-focus);
  outline-offset: 2px;
}

/* -- Shell (flex column) ------------------------------------------- */
html {
  height: 100%;
}

.km-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* -- Header: sticky al top ------------------------------------------ */
.km-app-header {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* -- km-main: flex-row sidebar+content ------------------------------ */
.km-main {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

/* Topbar blu */
.km-topbar {
  background: var(--km-blue-700, #2c5c8f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  padding-left: max(16px, calc(16px + env(safe-area-inset-left, 0px)));
  padding-right: max(16px, calc(16px + env(safe-area-inset-right, 0px)));
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  flex: none;
}

.km-topbar h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 15px;
  margin: 0;
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.km-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--km-blue-700, #2c5c8f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  user-select: none;
}

.km-brand-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.km-brand-sub {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  display: block;
  line-height: 1.2;
}

/* Pulsante icona */
.km-topbar a.km-icon-btn,
.km-topbar button.km-icon-btn,
.km-icon-btn {
  background: rgba(255, 255, 255, .15) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  color: #ffffff !important;
  border-radius: 7px !important;
  padding: 6px 12px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}

.km-topbar a.km-icon-btn svg,
.km-topbar button.km-icon-btn svg,
.km-icon-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  stroke: #ffffff !important;
}

.km-topbar a.km-icon-btn:hover,
.km-topbar button.km-icon-btn:hover,
.km-icon-btn:hover {
  background: rgba(255, 255, 255, .26) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #ffffff !important;
}

.km-topbar a.km-icon-btn:active,
.km-topbar button.km-icon-btn:active,
.km-icon-btn:active {
  transform: translateY(1px) !important;
}

.km-topbar a.km-icon-btn.km-btn-logout,
.km-icon-btn.km-btn-logout {
  background: rgba(255, 255, 255, .14) !important;
}

.km-topbar a.km-icon-btn.km-btn-logout:hover,
.km-icon-btn.km-btn-logout:hover {
  background: rgba(239, 68, 68, 0.4) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
}

.km-hamburger {
  display: inline-flex !important;
  font-size: 16px !important;
  padding: 6px 10px !important;
}

/* -- Backdrop mobile (parte sotto header) ---------------------------- */
.km-backdrop {
  display: none;
  position: fixed;
  top: var(--km-header-h, 0);
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .40);
  z-index: 29;
  cursor: default;
}

.km-backdrop--visible {
  display: block;
}

/* -- Sidebar (mobile-first: drawer sotto header) --------------------- */
.km-sidebar {
  grid-area: sidebar;
  background: var(--km-card);
  border-right: 1px solid var(--km-border);
  position: fixed;
  top: var(--km-header-h, 0);
  bottom: 0;
  left: 0;
  width: calc(270px + env(safe-area-inset-left, 0px));
  max-width: 85vw;
  box-sizing: border-box;
  z-index: 30;
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
}

.km-sidebar--open {
  transform: translateX(0) !important;
}

.km-sidebar h2 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--km-muted);
  background: #f3f5f7;
  margin: 0;
  padding: 6px 12px 5px;
  font-weight: 700;
  border-top: 1px solid var(--km-border);
}

/* Prima sezione: nessun bordo sopra (già attaccata alla topbar) */
.km-sidebar h2:first-child {
  border-top: none;
}

.km-sidebar nav .km-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  /* padding verticale: 7px top+bottom = 14px totale + font 13px = 27px.
     Su mobile le linee guida touch indicano ≥44px di target: il min-height
     sotto garantisce questo senza sprecare spazio visivo. */
  padding: 7px 12px;
  min-height: 36px;
  /* ≥44px con border + line-height: ok per tocco */
  font-size: 13px;
  line-height: 1.3;
  color: var(--km-ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  /* ripristina dopo font:inherit */
}

.km-sidebar nav .km-nav-link:hover {
  background: #f5f7f9;
  color: var(--km-ink);
}

.km-sidebar nav .km-nav-link.active {
  background: var(--km-blue-50);
  border-left-color: var(--km-blue-600);
  border-left-width: 4px;
  /* linguetta più spessa: 3px -> 4px */
  font-weight: 700;
  color: var(--km-blue-700);
}

.km-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: var(--km-blue-600);
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
}

/* ── Patient Banner ──────────────────────────────────────────────────────── */
.km-pb {
  container-type: inline-size;
  background: linear-gradient(180deg, var(--km-maroon-700), var(--km-maroon-900));
  color: var(--km-tan-100);
  padding: 12px 14px;
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
}

.km-pb-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.km-pb-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.km-pb-age {
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, .14);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--km-tan-100);
}

.km-pb-icon-right {
  margin-left: auto;
}

.km-pb-detail-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--km-tan-300);
}

.km-pb-detail-line a {
  color: var(--km-tan-300);
  text-decoration: underline;
  text-decoration-color: rgba(232, 199, 155, .4);
}

.km-pb-detail-line a:hover,
.km-pb-detail-line a:focus-visible {
  text-decoration-color: var(--km-tan-300);
}

.km-pb-detail-line svg {
  flex: none;
  opacity: .85;
}

.km-pb-toggle {
  margin-top: 6px;
}

.km-pb-toggle summary {
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--km-tan-300);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.km-pb-toggle summary::-webkit-details-marker {
  display: none;
}

.km-pb-toggle summary .km-chev {
  transition: transform .15s ease;
}

.km-pb-toggle[open] summary .km-chev {
  transform: rotate(90deg);
}

.km-pb-details-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.km-pb-desktop-row {
  display: none;
}

.km-pb-sep {
  opacity: .35;
}

@container (min-width: 620px) {
  .km-pb-toggle {
    display: none;
  }

  .km-pb-desktop-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 2px;
  }
}

/* ── Content area ────────────────────────────────────────────────────────── */
.km-content {
  padding: 14px;
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  min-width: 0;
}

.km-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.km-results-count {
  font-size: 13px;
  color: var(--km-muted);
  margin: 0 0 8px 2px;
}

.km-search-wrap {
  display: flex;
  flex: 1;
  max-width: 420px;
  border: 1px solid var(--km-border);
  border-radius: 6px;
  background: var(--km-card);
  overflow: hidden;
}

.km-search {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: none;
  font-size: 14px;
  background: transparent;
}

.km-search:focus {
  outline: none;
}

.km-search-wrap:focus-within {
  outline: 2px solid var(--km-focus);
  outline-offset: -1px;
}

.km-search-btn {
  border: none;
  background: var(--km-blue-600);
  color: #fff;
  padding: 0 13px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ── Tabella responsive (card su mobile) ─────────────────────────────────── */
.km-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--km-radius);
}

.km-table-scroll table,
table.km-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--km-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.km-table-scroll table thead tr th,
table.km-table thead tr th {
  background: #f3f5f7;
  text-align: left;
  font-size: 12.5px;
  color: var(--km-muted);
  padding: 9px 12px;
  font-weight: 600;
}

.km-table-scroll table tbody tr td,
table.km-table tbody tr td {
  padding: 11px 12px;
  font-size: 13.5px;
  border-top: 1px solid var(--km-border);
  vertical-align: middle;
}

/* ==========================================================================
   RESPONSIVE - 3 LIVELLI: Mobile (<640) / iPad (640-1023) / Desktop (>=1024)
   ========================================================================== */


/* ==========================================================================
   JQUERY UI AUTOCOMPLETE — override globale (caricato dopo jquery-ui.css)
   ========================================================================== */
ul.ui-autocomplete.ui-menu {
  list-style: none !important;
  list-style-type: none !important;
  margin: 4px 0 0 !important;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border: 1px solid #c8d0da !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(31, 36, 48, .18) !important;
  max-height: 300px !important;
  max-width: calc(100vw - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}

ul.ui-autocomplete::-webkit-scrollbar {
  width: 5px;
}

ul.ui-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}

ul.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #c8d0da;
  border-radius: 3px;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item {
  list-style: none !important;
  list-style-type: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item+li.ui-menu-item {
  border-top: 1px solid #f0f2f5 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper,
ul.ui-autocomplete.ui-menu li.ui-menu-item a {
  display: block !important;
  padding: 10px 14px !important;
  color: #1f2430 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a:hover {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-focus {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.ui-autocomplete.ui-widget-content {
  border: none !important;
}

/* -- Mobile: tabella -> card (solo <640px) --------------------------------- */
@media (max-width: 639px) {

  .km-table-scroll table,
  table.km-table {
    display: block;
  }

  .km-table-scroll table thead,
  table.km-table thead,
  .km-table-wrap table thead,
  .km-table-scroll table tr:has(> th),
  table.km-table tr:has(> th),
  .km-table-wrap table tr:has(> th),
  table.km-table th,
  .km-table-wrap table th {
    display: none !important;
  }

  .km-table-scroll table tbody,
  table.km-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .km-table-scroll table tbody tr,
  table.km-table tbody tr {
    display: block;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    padding: 4px 12px;
    background: var(--km-card);
  }

  .km-table-scroll table tbody tr td,
  table.km-table tbody tr td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #eef0f2;
    align-items: flex-start;
    text-align: right;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
    width: auto !important;
  }

  .km-table-scroll table tbody tr td:first-child,
  table.km-table tbody tr td:first-child {
    border-top: none;
  }

  .km-table-scroll table tbody tr td[data-label]::before,
  table.km-table tbody tr td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--km-muted);
    text-align: left;
  }
}

/* -- iPad/Tablet: >= 640px ------------------------------------------------- */
@media (min-width: 640px) {

  /* Hamburger: sidebar sempre visibile a tablet */
  #km-hamburger-btn,
  .km-hamburger {
    display: none !important;
  }

  .km-sidebar {
    position: sticky;
    top: var(--km-header-h, 0);
    bottom: auto;
    left: auto;
    width: calc(var(--km-sidebar-w-tablet) + env(safe-area-inset-left, 0px));
    /* 200px */
    padding-left: env(safe-area-inset-left, 0px);
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    flex: none;
    transform: none;
    max-height: calc(100vh - var(--km-header-h, 0px));
    overflow-y: auto;
    align-self: flex-start;
    border-right: 1px solid var(--km-border);
    visibility: visible;
    transition: none;
  }

  .km-backdrop {
    display: none !important;
  }

  .km-content {
    padding: 14px 16px;
    padding-left: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .km-table-scroll table,
  table.km-table {
    min-width: 540px;
  }
}

/* -- Desktop: >= 1024px ---------------------------------------------------- */
@media (min-width: 1024px) {

  .km-sidebar {
    width: calc(var(--km-sidebar-w-desktop) + env(safe-area-inset-left, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    /* 250px */
  }

  .km-content {
    padding: 20px 24px;
    padding-left: 24px;
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .km-table-scroll table,
  table.km-table {
    min-width: 680px;
  }
}

/* -- Desktop wide: >= 1280px ----------------------------------------------- */
@media (min-width: 1280px) {
  .km-content {
    max-width: 1200px;
  }
}


/* ── Selezione Paziente ──────────────────────────────────────────────────── */
.km-sel-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.km-sel-search-block {
  width: 100%;
  margin-bottom: 8px;
}

.km-sel-search-panel {
  width: 100%;
}

.km-sel-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--km-muted, #5b6472);
  margin-bottom: 6px;
}

.km-sel-search-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--km-border, #cbd5e1);
  border-radius: 8px;
  background: var(--km-card, #ffffff);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}

.km-sel-search-wrap:focus-within {
  border-color: var(--km-blue-600, #3b74ad);
  box-shadow: 0 0 0 3px rgba(59, 116, 173, .18);
}

/* Neutralize any jQuery Mobile styling inside search wrap */
.km-sel-search-wrap .ui-input-text,
.km-sel-search-wrap div.ui-input-text {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: 0 !important;
}

.km-sel-input,
.km-sel-search-wrap input[type="text"] {
  flex: 1;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  color: var(--km-ink, #1f2430) !important;
  line-height: normal !important;
}

.km-sel-search-btn {
  border: none !important;
  background: var(--km-blue-600, #3b74ad) !important;
  color: #fff !important;
  width: 48px;
  min-width: 48px;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: background-color .15s ease;
  flex-shrink: 0;
}

.km-sel-search-btn:hover {
  background-color: var(--km-blue-700, #2c5c8f) !important;
}

/* Doctor selector bar (for group doctors) */
.km-sel-doctor-panel {
  width: 100%;
}

.km-sel-doctor-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 6px;
  background: var(--km-card, #ffffff);
  border: 1px solid var(--km-border, #dde2e7);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.km-sel-doctor-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--km-muted, #5b6472);
  white-space: nowrap;
}

.km-sel-select {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--km-border, #dde2e7);
  border-radius: 6px;
  background: #ffffff;
  color: var(--km-ink, #1f2430);
  outline: none;
  cursor: pointer;
}

.km-sel-select:focus {
  border-color: var(--km-blue-600, #3b74ad);
  box-shadow: 0 0 0 2px rgba(59, 116, 173, .2);
}

/* Patient Card & GridView (allineata allo stile Diario Clinico km-table) */
.km-sel-card {
  margin-top: 14px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  background: #ffffff;
  border: 1px solid #dde2e7;
}

.km-sel-card:empty,
.km-sel-card:not(:has(tr)) {
  display: none;
}

table.km-sel-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  background: #ffffff !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 13.5px;
  border: none !important;
}

table.km-sel-table tr {
  border-top: 1px solid #dde2e7 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  cursor: pointer;
  transition: background-color .15s ease;
  background-color: #ffffff !important;
  background-image: none !important;
}

table.km-sel-table tr:first-child {
  border-top: none !important;
}

table.km-sel-table tr:hover {
  background-color: #f8f9fc !important;
  background-image: none !important;
}

table.km-sel-table tr:hover td {
  background-color: #f8f9fc !important;
  background-image: none !important;
}

table.km-sel-table td {
  padding: 11px 14px !important;
  vertical-align: middle !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #1f2430 !important;
}

table.km-sel-table td:first-child {
  padding-right: 6px !important;
}

table.km-sel-table td:last-child {
  padding-left: 6px !important;
  width: 48px;
  text-align: right;
}

.km-r-info {
  flex: 1;
  min-width: 0;
}

.km-r-name {
  font-weight: 700;
  font-size: 14.5px;
  color: #1f2430;
  line-height: 1.3;
}

.km-r-age {
  font-weight: 400;
  color: #5b6472;
  font-size: 13px;
  margin-left: 4px;
}

.km-r-addr {
  font-size: 12.5px;
  color: #5b6472;
  margin-top: 3px;
  line-height: 1.3;
}

.km-r-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 3px rgba(34, 197, 94, .3);
}

table.km-sel-table tr:hover .km-r-go {
  background: #16a34a;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(22, 163, 74, .4);
}

/* GridView Pager */
table.km-sel-table tr.km-sel-pager td {
  padding: 10px 14px !important;
  text-align: center !important;
  background: #f8fafc !important;
  background-image: none !important;
  border-top: 1px solid #dde2e7 !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: none !important;
}

table.km-sel-table .km-sel-pager table {
  margin: 0 auto;
  border: none;
}

table.km-sel-table .km-sel-pager a,
table.km-sel-table .km-sel-pager span {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 2px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--km-blue-600, #3b74ad);
}

table.km-sel-table .km-sel-pager span {
  background: var(--km-blue-600, #3b74ad);
  color: #fff;
}

table.km-sel-table .km-sel-pager a:hover {
  background: #eaf2fb;
}

/* Section Title */
.km-sel-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--km-muted, #5b6472);
  margin: 28px 0 12px;
  letter-spacing: 0.02em;
}

/* Actions Grid (Altre operazioni) */
.km-sel-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 520px) {
  .km-sel-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .km-sel-actions {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.km-tile-group {
  display: contents;
}

/* Materico Action Tiles */
.km-tile {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  padding: 14px 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 94px;
  background: linear-gradient(180deg, #f7be48 0%, #e0a52c 100%);
  color: #3d2800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  user-select: none;
  box-sizing: border-box;
}

.km-tile:hover {
  background: linear-gradient(180deg, #fbc657 0%, #e8af37 100%);
  box-shadow: 0 4px 12px rgba(224, 165, 44, .35), 0 1px 3px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
  color: #2c1d00;
}

.km-tile:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.km-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.km-tile-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.km-tile-label {
  display: block;
}

.km-tile.km-tile-primary {
  background: linear-gradient(180deg, #3b74ad 0%, #2c5c8f 100%);
  border-color: #234b75;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(44, 92, 143, .3), 0 1px 2px rgba(0, 0, 0, .1);
}

.km-tile.km-tile-primary:hover {
  background: linear-gradient(180deg, #4682c0 0%, #31659c 100%);
  box-shadow: 0 4px 14px rgba(44, 92, 143, .45), 0 1px 3px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
  color: #ffffff;
}

.km-tile.km-tile-primary .km-tile-icon svg {
  stroke: #ffffff;
}

/* ==========================================================================
   Stili UI aggiuntivi (senza dipendenza da jQuery Mobile)
   ========================================================================== */


/* ==========================================================================
   JQUERY UI AUTOCOMPLETE — override globale (caricato dopo jquery-ui.css)
   ========================================================================== */
ul.ui-autocomplete.ui-menu {
  list-style: none !important;
  list-style-type: none !important;
  margin: 4px 0 0 !important;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border: 1px solid #c8d0da !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(31, 36, 48, .18) !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px !important;
  z-index: 9999 !important;
}

ul.ui-autocomplete::-webkit-scrollbar {
  width: 5px;
}

ul.ui-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}

ul.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #c8d0da;
  border-radius: 3px;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item {
  list-style: none !important;
  list-style-type: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item+li.ui-menu-item {
  border-top: 1px solid #f0f2f5 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper,
ul.ui-autocomplete.ui-menu li.ui-menu-item a {
  display: block !important;
  padding: 10px 16px !important;
  color: #1f2430 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a:hover {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-focus {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.ui-autocomplete.ui-widget-content {
  border: none !important;
}

/* ── Campo cerca integrato (prescrizioni.ascx e altri UserControl) ───────── */
/*
   Il markup target è:
     <div class="km-uc-search">
       <input type="text" class="km-search" />
       <input type="submit" class="km-search-btn" />
     </div>
*/
.km-uc-search {
  display: flex;
  border: 1px solid var(--km-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--km-card);
  max-width: 420px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.km-uc-search .km-search,
.km-uc-search input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: none;
  font-size: 13.5px;
  background: transparent;
  font-family: inherit;
  color: var(--km-ink);
  outline: none;
}

.km-uc-search:focus-within {
  outline: 2px solid var(--km-focus);
  outline-offset: -1px;
}

/* Bottone cerca: input[type=submit] — niente child elements,
   quindi usiamo background-image SVG per la lente. */
.km-uc-search .km-search-btn,
.km-uc-search input[type="submit"],
.km-uc-search input[type="button"] {
  flex: none;
  border: none;
  background-color: var(--km-blue-600);
  /* Lente di ingrandimento (SVG inline, bianca) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  width: 42px;
  cursor: pointer;
  font-size: 0;
  /* nasconde il testo del pulsante se presente */
  color: transparent;
  transition: background-color .15s;
}

.km-uc-search .km-search-btn:hover,
.km-uc-search input[type="submit"]:hover {
  background-color: var(--km-blue-700);
}

/* ── Popup shim (sostituisce data-role="popup" di jQM) ───────────────────── */
/*
   Gli elementi [data-role="popup"] sono generati dal code-behind di
   prescrizioni.ascx.cs. Lo shim JS nella master page li mostra/nasconde;
   qui definiamo solo lo stile base quando sono nascosti (display:none di default).
   Lo shim imposta inline style quando li apre.
*/
[data-role="popup"] {
  display: none;
}

/* ui-body-e usato dentro il popup generato — sovrascrive stili jQM residui */
.ui-body-e,
.ui-corner-all {
  border-radius: 6px;
  background: #fff;
}


/* ==========================================================================
   UC DESIGN SYSTEM — componenti condivisi per tutti gli UserControl
   Usare le classi uc-* invece di stili inline nei controlli .ascx
   ========================================================================== */


/* ==========================================================================
   JQUERY UI AUTOCOMPLETE — override globale (caricato dopo jquery-ui.css)
   ========================================================================== */
ul.ui-autocomplete.ui-menu {
  list-style: none !important;
  list-style-type: none !important;
  margin: 4px 0 0 !important;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border: 1px solid #c8d0da !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(31, 36, 48, .18) !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px !important;
  z-index: 9999 !important;
}

ul.ui-autocomplete::-webkit-scrollbar {
  width: 5px;
}

ul.ui-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}

ul.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #c8d0da;
  border-radius: 3px;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item {
  list-style: none !important;
  list-style-type: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item+li.ui-menu-item {
  border-top: 1px solid #f0f2f5 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper,
ul.ui-autocomplete.ui-menu li.ui-menu-item a {
  display: block !important;
  padding: 10px 16px !important;
  color: #1f2430 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a:hover {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-focus {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.ui-autocomplete.ui-widget-content {
  border: none !important;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.uc-card {
  background: var(--km-card);
  border-radius: var(--km-radius);
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  margin-bottom: 14px;
}

.uc-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--km-ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--km-border);
}

.uc-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--km-muted);
  margin: 14px 0 6px;
}

.uc-section-label:first-child {
  margin-top: 0;
}

/* ── Campo form ─────────────────────────────────────────────────────────── */
.uc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.uc-field:last-child {
  margin-bottom: 0;
}

.uc-field>label,
.uc-field>.uc-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--km-muted);
}

.uc-field input[type=text],
.uc-field input[type=number],
.uc-field input[type=email],
.uc-field input[type=tel],
.uc-field textarea,
.uc-field select {
  padding: 8px 11px;
  border: 1px solid var(--km-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  background: #fff;
  color: var(--km-ink);
  box-sizing: border-box;
}

.uc-field input:focus,
.uc-field textarea:focus,
.uc-field select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--km-focus);
}

.uc-field input[readonly],
.uc-field textarea[readonly] {
  background: #f7f8fa;
}

/* Input generico fuori da uc-field */
input.uc-input,
textarea.uc-input,
select.uc-input {
  padding: 8px 11px;
  border: 1px solid var(--km-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--km-ink);
  box-sizing: border-box;
  width: 100%;
}

input.uc-input:focus,
textarea.uc-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--km-focus);
}

/* ── Riga flex ──────────────────────────────────────────────────────────── */
.uc-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}

.uc-row .uc-field {
  margin-bottom: 0;
  flex: 1;
  min-width: 140px;
}

.uc-row .uc-grow {
  flex: 2;
}

.uc-row .uc-narrow {
  flex: none;
}

/* ── Bottoni ────────────────────────────────────────────────────────────── */
/* Stili base: funzionano sia su <button> che su <input type=submit> */
.uc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.uc-btn:active {
  transform: translateY(1px);
}

.uc-btn-primary {
  background: var(--km-blue-600, #3b74ad);
  color: #fff;
  border-color: var(--km-blue-700, #2c5c8f);
  box-shadow: 0 1px 3px rgba(44, 92, 143, .25);
}

.uc-btn-primary:hover {
  background: var(--km-blue-700, #2c5c8f);
  border-color: #1a426d;
  box-shadow: 0 3px 8px rgba(44, 92, 143, .35);
  color: #fff;
}

.uc-btn-danger {
  background: #b3402f;
  color: #fff;
  border-color: #922e1f;
  box-shadow: 0 1px 3px rgba(179, 64, 47, .25);
}

.uc-btn-danger:hover {
  background: #922e1f;
  box-shadow: 0 3px 8px rgba(179, 64, 47, .35);
}

.uc-btn-success {
  background: #3b8754;
  color: #fff;
  border-color: #2e6c42;
  box-shadow: 0 1px 3px rgba(46, 108, 66, .25);
}

.uc-btn-success:hover {
  background: #2e6c42;
  box-shadow: 0 3px 8px rgba(46, 108, 66, .35);
}

.uc-btn-ghost {
  background: #ffffff;
  color: var(--km-ink, #1f2430);
  border-color: var(--km-border, #dde2e7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.uc-btn-ghost:hover {
  background: #f7f9fa;
  border-color: #c5ccd4;
  color: var(--km-ink, #1f2430);
}

.uc-btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 6px;
}

.uc-btn-wide {
  width: 100%;
}

.uc-btn-save {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--km-blue-600, #3b74ad);
  color: #fff;
  border: 1px solid var(--km-blue-700, #2c5c8f);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 5px rgba(44, 92, 143, .25);
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.uc-btn-save:hover {
  background: var(--km-blue-700, #2c5c8f);
  border-color: #1a426d;
  box-shadow: 0 4px 10px rgba(44, 92, 143, .35);
}

.uc-btn-save:active {
  transform: translateY(1px);
}

/* Bottone icona (solo icona, quadrato) */
.uc-btn-icon {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 6px;
  background-color: #eceff2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
  padding: 0;
  flex: none;
  box-sizing: border-box;
}

.uc-btn-icon:hover {
  background-color: #dde2e7;
}

.uc-btn-icon-sm {
  width: 30px;
  height: 30px;
  background-size: 14px;
}

/* SVG icons via background-image */
.uc-icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}

.uc-icon-star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.8 1.7 7-6.3-3.9L5.7 21l1.7-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E");
}

.uc-icon-refresh {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15'/%3E%3C/svg%3E");
}

.uc-icon-add {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.uc-icon-delete {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E");
}

.uc-icon-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 7L2 7'/%3E%3C/svg%3E");
}

/* Primary variant degli icon-btn */
.uc-btn-icon-primary {
  background-color: var(--km-blue-600);
}

.uc-btn-icon-primary:hover {
  background-color: var(--km-blue-700);
}

.uc-btn-icon-primary.uc-icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}

/* ── Griglia dati ───────────────────────────────────────────────────────── */
.uc-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
  border-radius: 6px;
}

.uc-grid-wrap table,
table.uc-grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--km-card);
  min-width: 400px;
}

.uc-grid-wrap table thead tr th,
table.uc-grid thead tr th {
  background: #f3f5f7;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--km-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--km-border);
  white-space: nowrap;
}

.uc-grid-wrap table tbody tr td,
table.uc-grid tbody tr td {
  padding: 10px 10px;
  font-size: 13.5px;
  border-top: 1px solid var(--km-border);
  vertical-align: middle;
  color: var(--km-ink);
}

.uc-grid-wrap table tbody tr:hover,
table.uc-grid tbody tr:hover {
  background: #f8f9fa;
}

/* Riga selezionata */
.uc-grid-wrap table tbody tr.selected,
table.uc-grid tbody tr.selected {
  background: var(--km-blue-50);
}

/* ── Choice pill (checkbox / radio come pillola) ────────────────────────── */
.uc-choice-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.uc-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--km-border);
  border-radius: 20px;
  font-size: 13.5px;
  cursor: pointer;
  background: #fff;
  user-select: none;
  color: var(--km-ink);
  font-family: inherit;
}

.uc-choice input {
  accent-color: var(--km-blue-600);
}

/* ── RadioButtonList / CheckBoxList — reset stili vecchi ───────────────── */
.uc-rbl,
.pp-rbl {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Nasconde visivamente il radio/checkbox nativo */
.uc-rbl input[type=radio],
.uc-rbl input[type=checkbox],
.pp-rbl input[type=radio],
.pp-rbl input[type=checkbox] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* La label diventa la pillola interattiva con touch target confortevole */
.uc-rbl label,
.pp-rbl label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 7px 14px !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #4a5568 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all .15s ease !important;
  line-height: 1.2 !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
}

/* Indicatore circolare interno alla pillola */
.uc-rbl label::before,
.pp-rbl label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #b8c2cc;
  transition: all .15s ease;
  flex-shrink: 0;
}

/* Hover pillola */
.uc-rbl label:hover,
.pp-rbl label:hover {
  background: #f7f9fa !important;
  border-color: #c8d0da !important;
  color: #1f2430 !important;
}

.uc-rbl label:hover::before,
.pp-rbl label:hover::before {
  border-color: #7fb7ff;
}

/* Pillola selezionata */
.uc-rbl input[type=radio]:checked + label,
.uc-rbl input[type=checkbox]:checked + label,
.pp-rbl input[type=radio]:checked + label,
.pp-rbl input[type=checkbox]:checked + label {
  background: #eaf2ff !important;
  border-color: #7fb7ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(31, 74, 128, .12) !important;
}

.uc-rbl input[type=radio]:checked + label::before,
.uc-rbl input[type=checkbox]:checked + label::before,
.pp-rbl input[type=radio]:checked + label::before,
.pp-rbl input[type=checkbox]:checked + label::before {
  background: #2b6cb0 !important;
  border-color: #2b6cb0 !important;
  box-shadow: 0 0 0 2px #eaf2ff;
}

/* Focus per accessibilità */
.uc-rbl input[type=radio]:focus-visible + label,
.uc-rbl input[type=checkbox]:focus-visible + label,
.pp-rbl input[type=radio]:focus-visible + label,
.pp-rbl input[type=checkbox]:focus-visible + label {
  outline: none !important;
  box-shadow: 0 0 0 2px #7fb7ff !important;
}

.uc-rbl table {
  border: none;
}

.uc-rbl td {
  padding: 3px 14px 3px 0;
  font-size: 13.5px;
}

.uc-rbl input[type=radio],
.uc-rbl input[type=checkbox] {
  accent-color: var(--km-blue-600);
  margin-right: 5px;
}

.uc-rbl span {
  font-weight: normal;
}

/* ── Badge stato ────────────────────────────────────────────────────────── */
.uc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.uc-badge-green {
  background: #d4f0dc;
  color: #2a6a40;
}

.uc-badge-red {
  background: #fce8e6;
  color: #922e1f;
}

.uc-badge-blue {
  background: var(--km-blue-50);
  color: var(--km-blue-700);
}

.uc-badge-gray {
  background: #eceff2;
  color: var(--km-muted);
}

.uc-badge-yellow {
  background: #fff8e1;
  color: #7a5c00;
}

/* ── Avvisi inline ──────────────────────────────────────────────────────── */
.uc-alert {
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.uc-alert-info {
  background: var(--km-blue-50);
  color: var(--km-blue-700);
}

.uc-alert-success {
  background: #e6f4ea;
  color: #2a6a40;
  border: 1px solid #c2e7c9;
}

.uc-alert-warning {
  background: #fff8e1;
  color: #7a5c00;
  border: 1px solid #ffe89e;
}

.uc-alert-danger {
  background: #fce8e6;
  color: #922e1f;
  border: 1px solid #f5b7b0;
}

/* ── Notice / avviso grigio ─────────────────────────────────────────────── */
.uc-notice {
  background: #f3f5f7;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--km-muted);
  font-weight: 600;
}

/* ── Separatore sezione ─────────────────────────────────────────────────── */
.uc-divider {
  border: none;
  border-top: 1px solid var(--km-border);
  margin: 14px 0;
}

/* ── Dettaglio espandibile (seconda diagnosi, note extra…) ──────────────── */
.uc-expandable {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--km-border);
}

.uc-expandable>summary {
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--km-blue-600);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.uc-expandable>summary::-webkit-details-marker {
  display: none;
}

.uc-expandable .uc-chev {
  transition: transform .15s;
  flex: none;
}

.uc-expandable[open] .uc-chev {
  transform: rotate(90deg);
}

.uc-expandable-body {
  margin-top: 12px;
}

/* ── Coppia label + valore (info readonly) ──────────────────────────────── */
.uc-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 13px;
}

.uc-info-label {
  font-weight: 600;
  color: var(--km-muted);
  white-space: nowrap;
}

.uc-info-value {
  color: var(--km-ink);
}

/* ── Toolbar / barra azioni ─────────────────────────────────────────────── */
.uc-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ── Responsive 3 livelli per i controlli ───────────────────────────────── */
@media (max-width: 639px) {
  .uc-hide-mobile {
    display: none !important;
  }

  .uc-card {
    padding: 12px 14px;
  }

  .uc-btn {
    padding: 9px 12px;
    font-size: 13px;
  }
}

@media (min-width: 640px) {
  .uc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .uc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* ==========================================================================
   PP DESIGN SYSTEM — prescrivi_farmaci + prescrivi_farmacinssn condividono
   gli stili di prescrivi_prestazioni. Definiti qui per disponibilità globale.
   ========================================================================== */

/* ==========================================================================
   JQUERY UI AUTOCOMPLETE — override globale (caricato dopo jquery-ui.css)
   ========================================================================== */
ul.ui-autocomplete.ui-menu {
  list-style: none !important;
  list-style-type: none !important;
  margin: 4px 0 0 !important;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border: 1px solid #c8d0da !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(31, 36, 48, .18) !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 14px !important;
  z-index: 9999 !important;
}

ul.ui-autocomplete::-webkit-scrollbar {
  width: 5px;
}

ul.ui-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}

ul.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #c8d0da;
  border-radius: 3px;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item {
  list-style: none !important;
  list-style-type: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item+li.ui-menu-item {
  border-top: 1px solid #f0f2f5 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper,
ul.ui-autocomplete.ui-menu li.ui-menu-item a {
  display: block !important;
  padding: 10px 16px !important;
  color: #1f2430 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a:hover {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
}

ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-hover,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-active,
ul.ui-autocomplete.ui-menu li.ui-menu-item a.ui-state-focus {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.ui-autocomplete.ui-widget-content {
  border: none !important;
}

.pp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 4px;
}

@media (min-width:1024px) {
  .pp-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pp-full {
    grid-column: 1 / -1;
  }
}

.pp-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  margin-bottom: 0;
}

.pp-card h2 {
  font-size: 15px;
  font-weight: 700;
  color: #1f2430;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde2e7;
}

.pp-card h3 {
  font-size: 12px;
  font-weight: 700;
  color: #5b6472;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 14px 0 8px;
}

.pp-card h3:first-child {
  margin-top: 0;
}

.pp-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2430;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde2e7;
  display: block;
}

.pp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.pp-field:last-child {
  margin-bottom: 0;
}

.pp-field label,
.pp-field>span.pp-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6472;
  display: block;
}

.pp-field input[type=text],
.pp-field input[type=number] {
  padding: 8px 11px;
  border: 1px solid #dde2e7;
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
  background: #fff;
  color: #1f2430;
  box-sizing: border-box;
}

.pp-field input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #7fb7ff;
}

.pp-field input[readonly] {
  background: #f7f8fa;
}

.pp-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}

.pp-row .pp-field {
  flex: 1;
  min-width: 140px;
  margin-bottom: 0;
}

.pp-row .pp-field.pp-grow {
  flex: 2;
}

.pp-row .pp-field.pp-narrow {
  flex: none;
  width: 80px;
}

.pp-with-btn {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pp-with-btn input {
  flex: 1;
  min-width: 0;
}

.pp-btn {
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.pp-btn-primary {
  background: #3b74ad;
  color: #fff;
}

.pp-btn-primary:hover {
  background: #2c5c8f;
}

.pp-btn-danger {
  background: #b3402f;
  color: #fff;
}

.pp-btn-danger:hover {
  background: #922e1f;
}

.pp-btn-ghost {
  background: #eceff2;
  color: #5b6472;
}

.pp-btn-ghost:hover {
  background: #e2e6ea;
}

.pp-btn-icon {
  background: #eceff2;
  border: none;
  border-radius: 6px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  color: #5b6472;
  font-family: inherit;
}

.pp-btn-icon:hover {
  background: #dde2e7;
}

.pp-choice-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pp-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #dde2e7;
  border-radius: 20px;
  font-size: 13.5px;
  cursor: pointer;
  background: #fff;
  user-select: none;
  color: #1f2430;
  font-family: inherit;
}

.pp-choice input {
  accent-color: #3b74ad;
}

.pp-notice {
  background: #f3f5f7;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: #5b6472;
  font-weight: 600;
  margin-top: 8px;
}

.pp-cart-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #dde2e7;
}

.pp-cart-item:first-of-type {
  border-top: none;
  margin-top: 4px;
}

.pp-cart-main {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2430;
}

.pp-cart-sub {
  font-size: 12px;
  color: #5b6472;
  margin-top: 2px;
}

.pp-subtoggle {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dde2e7;
}

.pp-subtoggle summary {
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  color: #3b74ad;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.pp-subtoggle summary::-webkit-details-marker {
  display: none;
}

.pp-subtoggle .pp-chev {
  transition: transform .15s;
  flex: none;
}

.pp-subtoggle[open] .pp-chev {
  transform: rotate(90deg);
}

.pp-subtoggle-body {
  margin-top: 12px;
}

.pp-grid-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.pp-grid-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}

.pp-grid-wrap table thead tr th {
  background: #f3f5f7 !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #5b6472 !important;
  padding: 8px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  border-bottom: 1px solid #dde2e7 !important;
  border-right: none !important;
}

.pp-grid-wrap table thead tr th a,
.pp-grid-wrap table thead tr th a:visited {
  color: #5b6472 !important;
  text-decoration: none !important;
}

.pp-grid-wrap table thead tr th a:hover {
  color: #1f2430 !important;
}

.pp-grid-wrap table tbody tr td {
  padding: 10px 10px !important;
  font-size: 13.5px !important;
  border-top: 1px solid #dde2e7 !important;
  border-bottom: none !important;
  border-right: none !important;
  vertical-align: middle !important;
  background-color: transparent !important;
  background-image: none !important;
}

.pp-grid-wrap table tbody tr:hover td {
  background: #f8f9fa !important;
}

.pp-grid-wrap table tbody tr.AspNet-GridView-Alternate td {
  background-color: transparent !important;
  background-image: none !important;
}

.pp-cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dde2e7;
  padding-top: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.pp-num-prest {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2c5c8f;
}

.pp-num-prest input {
  width: 44px;
  text-align: center;
  padding: 5px 6px;
  border: 1px solid #dde2e7;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  background: #f7f8fa;
}

.pp-save-bar {
  margin-top: 6px;
}

.pp-btn-save {
  width: 100%;
  background: #2c5c8f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.pp-btn-save:hover {
  background: #3b74ad;
}

/* ── Mobile Responsive per Prescrivi Prestazioni / Farmaci (.pp-*) ── */
@media (max-width: 639px) {
  .pp-card {
    padding: 12px 14px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }
  .pp-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pp-row .pp-field,
  .pp-row .pp-field.pp-grow,
  .pp-row .pp-field.pp-narrow {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .pp-row .pp-btn,
  .pp-btn-primary,
  .pp-btn-danger {
    align-self: stretch !important;
    width: 100% !important;
    text-align: center;
  }
  .pp-with-btn {
    flex-wrap: wrap;
    align-items: center;
  }
  .pp-with-btn input {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .pp-choice {
    max-width: 100%;
    box-sizing: border-box;
  }
  .pp-cart-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pp-grid-wrap table {
    min-width: 0 !important;
  }

  /* Selezione Diagnosi mobile */
  .sd-wrap {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .sd-wrap input[type=text] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .sd-nd-label {
    flex: 1 !important;
  }
  .sd-nd-label label {
    width: 100% !important;
    text-align: center !important;
  }
  .uc-grid-wrap table,
  table.uc-grid {
    min-width: 0 !important;
  }
  .uc-grid-wrap table.km-table tbody tr td {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }
}

/* ── Cerca Farmaci (.cf-*) ────────────────────────────────────────── */
.cf-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  margin-bottom: 12px;
}
.cf-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2430;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde2e7;
  display: block;
}
.cf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde2e7;
}
.cf-card-head .cf-card-title {
  margin: 0;
  padding: 0;
  border: none;
}
.cf-card-head .cf-btn-ghost {
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid #dde2e7;
  flex-shrink: 0;
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.cf-field:last-child {
  margin-bottom: 0;
}
.cf-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6472;
}
.cf-input {
  padding: 8px 11px;
  border: 1px solid #dde2e7;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #1f2430;
  box-sizing: border-box;
  width: 100%;
}
.cf-input::placeholder {
  color: #94a3b8;
}
.cf-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #7fb7ff;
}
.cf-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}
.cf-row .cf-field {
  margin-bottom: 0;
}
.cf-row .cf-grow {
  flex: 1;
  min-width: 160px;
}
.cf-row .cf-auto {
  flex: none;
}
.cf-btn-ghost {
  background: #eceff2;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: #5b6472;
  white-space: nowrap;
}
.cf-btn-ghost:hover {
  background: #dde2e7;
}
.cf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid #dde2e7;
  border-radius: 20px;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  user-select: none;
  margin: 0;
  min-height: 38px;
  box-sizing: border-box;
  transition: background .15s, border-color .15s;
}
.cf-pill input[type=checkbox] {
  accent-color: #3b74ad;
  width: 16px;
  height: 16px;
  margin: 0;
}
.cf-pill label {
  cursor: pointer;
  margin: 0;
}
.cf-pill:hover {
  background: #f3f5f7;
}
.cf-pill:has(input:checked) {
  background: #eaf2ff;
  border-color: #7fb7ff;
  color: #1a4a80;
  font-weight: 600;
}
.cf-row .cf-motivo {
  flex: 1 1 220px;
  min-width: 180px;
}
.cf-row-one {
  align-items: flex-end;
  gap: 12px 14px;
}
.cf-ns-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 12px 14px;
  flex: 1 1 380px;
  min-width: 0;
}
@media (max-width: 480px) {
  .cf-ns-group {
    flex-wrap: wrap;
    width: 100%;
  }
}
.cf-nota-value {
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  color: #1f2430;
  min-width: 40px;
}

/* ── Selezione Data Control (.sd-date-*) ── */
.sd-date-picker {
  position: relative;
  width: 100%;
}
.sd-date-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
.sd-date-input-wrap .ui-input-text,
.sd-date-input-wrap div.ui-input-text {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
.sd-date-input-wrap .sd-date-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}
.sd-date-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  background: #eceff2 !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 6px !important;
  color: #5b6472 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all .15s ease !important;
  flex: 0 0 38px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.sd-date-btn:hover {
  background: #dde2e7 !important;
  color: #1f2430 !important;
}
/* Popover Calendario Moderno (.sd-dp-*) */
.sd-dp-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  width: 270px;
  background: #ffffff;
  border: 1px solid #dde2e7;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .08);
  padding: 12px;
  font-family: inherit;
  box-sizing: border-box;
  display: none;
}
.sd-dp-popover.open {
  display: block;
}
.sd-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.sd-dp-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f2430;
  text-transform: capitalize;
}
.sd-dp-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #dde2e7;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: all .15s;
}
.sd-dp-nav:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.sd-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  text-align: center;
}
.sd-dp-weekday {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  padding: 4px 0;
}
.sd-dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.sd-dp-day {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
}
.sd-dp-day:hover:not(.other-month) {
  background: #eaf2ff;
  color: #1a4a80;
  font-weight: 700;
}
.sd-dp-day.today {
  background: #f1f5f9;
  color: #2b6cb0;
  font-weight: 700;
}
.sd-dp-day.selected {
  background: #2b6cb0 !important;
  color: #ffffff !important;
  font-weight: 700;
}
.sd-dp-day.other-month {
  color: #cbd5e1;
}
.sd-dp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}
.sd-dp-btn-today, .sd-dp-btn-clear {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #2b6cb0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.sd-dp-btn-today:hover, .sd-dp-btn-clear:hover {
  background: #eaf2ff;
}

/* Isolamento pulsanti datepicker da jQM */
.sd-date-picker .ui-btn,
.sd-date-picker .ui-btn-inner,
.sd-date-picker .ui-btn-text {
  display: inline-flex !important;
  background: inherit !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

.km-cert-error:not(:empty) {
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b3402f;
  font-weight: 600;
  font-size: 13.5px;
}

.km-cert-info:not(:empty) {
  padding: 12px 16px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  color: #065f46;
  font-weight: 600;
  font-size: 13.5px;
}

/* Griglia campi certificato di malattia (mobile-first: stacking verticale) */
.cert-dates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (min-width: 768px) {
  .cert-dates-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cert-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: flex-end;
}
@media (min-width: 500px) {
  .cert-options-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 500px) and (max-width: 767px) {
  .cert-options-grid > .pp-field:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 768px) {
  .cert-options-grid {
    grid-template-columns: 1fr 1fr auto;
  }
}

.pp-rbl span {
  display: inline-block;
}

.pp-rbl table {
  border: none;
}

.pp-rbl td {
  padding: 4px 12px 4px 0;
  font-size: 13.5px;
  font-weight: normal;
}

.pp-rbl input[type=radio],
.pp-rbl input[type=checkbox] {
  accent-color: #3b74ad;
  margin-right: 5px;
}

.pp-error {
  color: #b3402f;
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 12px;
}




/* ==========================================================================
   KM-TABLE — stile tabella standard (replicato da pp-grid-wrap in prescrivi_prestazioni)
   Usato su tutti i GridView/table dell'applicazione: CssClass="km-table"
   ========================================================================== */

/* Wrapper con overflow per responsività */
.km-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  margin-top: 10px;
}

/* Tabella base */
.km-table,
.km-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 13.5px;
  background: #fff;
  min-width: 320px;
}

/* Header */
.km-table thead tr th,
.km-table th,
.km-table-wrap table thead tr th {
  background: #f3f5f7 !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #5b6472 !important;
  padding: 9px 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  border-bottom: 1px solid #dde2e7 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  white-space: nowrap !important;
}

.km-table thead tr th a,
.km-table thead tr th a:visited,
.km-table th a,
.km-table th a:visited {
  color: #5b6472 !important;
  text-decoration: none !important;
}

.km-table thead tr th a:hover,
.km-table th a:hover {
  color: #1f2430 !important;
}

/* Celle body */
.km-table tbody tr td,
.km-table td,
.km-table-wrap table tbody tr td {
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  color: #1f2430 !important;
  border-top: 1px solid #dde2e7 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: middle !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Hover row */
.km-table tbody tr:hover td,
.km-table tr:hover td,
.km-table-wrap table tbody tr:hover td {
  background: #f8f9fc !important;
}

/* Riga selezionata — coordinata con la palette dell'applicazione */
.km-table tbody tr.AspNet-GridView-Selected td,
.km-table tr.AspNet-GridView-Selected td,
.km-table-wrap table tbody tr.AspNet-GridView-Selected td,
.km-table tbody tr[aria-selected="true"] td,
.km-table tbody tr.selected td {
  background: #eaf2ff !important;
  background-image: none !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
}

.km-table tbody tr.AspNet-GridView-Selected:hover td,
.km-table tr.AspNet-GridView-Selected:hover td,
.km-table-wrap table tbody tr.AspNet-GridView-Selected:hover td {
  background: #dfeafb !important;
  color: #1a4a80 !important;
}

.km-table tbody tr.AspNet-GridView-Selected td a,
.km-table tr.AspNet-GridView-Selected td a {
  color: #1a4a80 !important;
}

/* Riga pari */
.km-table tbody tr:nth-child(even) td,
.km-table tr.AspNet-GridView-Alternate td {
  background: #fafbfc !important;
  background-image: none !important;
}

.km-table tbody tr:nth-child(even):hover td,
.km-table tr.AspNet-GridView-Alternate:hover td {
  background: #f0f4ff !important;
}

/* Celle per le azioni con icone */
.km-actions-cell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.km-actions-cell a img,
.km-action-icon img {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  border: none !important;
  transition: transform .15s !important;
}

.km-actions-cell a:hover img,
.km-action-icon:hover img {
  transform: scale(1.15) !important;
}

.km-action-btn-delete {
  width: 18px !important;
  height: 18px !important;
  background: url('../images/delete.gif') no-repeat center center !important;
  background-size: 18px 18px !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  transition: transform .15s !important;
}

.km-action-btn-delete:hover {
  transform: scale(1.15) !important;
}

/* Pager ASP.NET GridView (sia adapter che standard) */
.AspNet-GridView div.AspNet-GridView-Pagination:not(:has(a)),
.km-table-wrap .AspNet-GridView-Pagination:not(:has(a)),
.AspNet-GridView div.AspNet-GridView-Pagination:has(> span:only-child),
.km-table tr.km-pager:not(:has(a)),
.km-table .GridViewPager:not(:has(a)),
.km-table tfoot tr:not(:has(a)):has(span) {
  display: none !important;
}

.AspNet-GridView div.AspNet-GridView-Pagination,
.km-table-wrap .AspNet-GridView-Pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  border-radius: 0 0 8px 8px;
  background: #f8fafc !important;
  border-top: 1px solid #dde2e7 !important;
}

.AspNet-GridView div.AspNet-GridView-Pagination a,
.AspNet-GridView div.AspNet-GridView-Pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all .15s ease !important;
  user-select: none !important;
}

.AspNet-GridView div.AspNet-GridView-Pagination a {
  background: #ffffff !important;
  border: 1px solid #dde2e7 !important;
  color: #4a5568 !important;
}

.AspNet-GridView div.AspNet-GridView-Pagination a:hover {
  background: #eaf2ff !important;
  border-color: #7fb7ff !important;
  color: #1a4a80 !important;
  transform: translateY(-1px) !important;
}

.AspNet-GridView div.AspNet-GridView-Pagination span {
  background: #2b6cb0 !important;
  border: 1px solid #2b6cb0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(43, 108, 176, .3) !important;
  cursor: default !important;
}
.km-table tr.km-pager td,
.km-table .GridViewPager td,
.km-table tfoot tr td {
  background: #f3f5f7;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  border-top: 1px solid #dde2e7;
  color: #5b6472;
}

.km-table .GridViewPager a,
.km-table tfoot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #dde2e7;
  color: #3b74ad;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  margin: 0 2px;
}

.km-table .GridViewPager a:hover,
.km-table tfoot a:hover {
  background: #eaf2ff;
  border-color: #3b74ad;
}

.km-table .GridViewPager span {
  /* pagina corrente */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #3b74ad;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  margin: 0 2px;
}

/* Empty data row */
.km-table .GridViewEmpty td,
.km-table td[colspan] {
  text-align: center;
  color: #8b95a0;
  font-style: italic;
  padding: 20px;
}

/* Bottone azione nella cella (es. freccia seleziona) */
.km-table td input[type=image],
.km-table td img {
  vertical-align: middle;
}

.km-table td a.km-action-btn,
.km-table td input[type=image] {
  opacity: .75;
  transition: opacity .15s;
}

.km-table td a.km-action-btn:hover,
.km-table td input[type=image]:hover {
  opacity: 1;
}

/* Responsive: su mobile collassa le colonne meno importanti */
@media (max-width: 600px) {
  .km-table thead {
    display: none;
  }

  .km-table tr {
    display: block;
    border-bottom: 1px solid #dde2e7;
    padding: 8px 0;
  }

  .km-table td {
    display: block;
    border: none;
    padding: 4px 12px;
    font-size: 13px;
  }

  .km-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #5b6472;
    display: block;
    font-size: 11px;
  }
}

/* ==========================================================================
   Griglie Diario clinico / Visualizza prestazioni-farmaci / Modulo proposta
   Card mobile: etichette per posizione di colonna (indipendenti dal code-behind,
   che assegna data-label con indici non piu' allineati alle colonne).
   ========================================================================== */

/* Link di ordinamento nelle intestazioni: sempre scuri (GridView.css li rendeva chiari) */
.pp-grid-wrap table thead tr th a,
.pp-grid-wrap table thead tr th a:visited,
.km-table-wrap table thead tr th a,
.km-table-wrap table thead tr th a:visited {
  color: #5b6472 !important;
  text-decoration: none !important;
}

@media (max-width: 639px) {
  .km-cards-presc table.km-table,
  .km-cards-mp table.km-table,
  .km-cards-cert table.km-table,
  .km-cards-vacc table.km-table,
  .km-cards-visite table.km-table,
  .km-cards-allergie table.km-table,
  .km-cards-curve table.km-table {
    min-width: 0 !important;
  }

  .km-cards-presc table.km-table tbody tr td,
  .km-cards-mp table.km-table tbody tr td,
  .km-cards-cert table.km-table tbody tr td,
  .km-cards-vacc table.km-table tbody tr td,
  .km-cards-visite table.km-table tbody tr td,
  .km-cards-allergie table.km-table tbody tr td,
  .km-cards-curve table.km-table tbody tr td {
    width: auto !important;
    text-align: right !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .km-cards-presc table.km-table tbody tr td::before,
  .km-cards-mp table.km-table tbody tr td::before,
  .km-cards-cert table.km-table tbody tr td::before,
  .km-cards-vacc table.km-table tbody tr td::before,
  .km-cards-visite table.km-table tbody tr td::before,
  .km-cards-allergie table.km-table tbody tr td::before,
  .km-cards-curve table.km-table tbody tr td::before {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #5b6472 !important;
    text-align: left !important;
    flex: none;
  }

  /* curve auxologiche: Data | Lunghezza | Peso | C. Cranica | BMI | Addome | Tronco | Gamba | Torace | Pelvi | Eta */
  .km-cards-curve table.km-table tbody tr td:nth-child(1)::before { content: "Data" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(2)::before { content: "Lunghezza (cm)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(3)::before { content: "Peso (kg)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(4)::before { content: "C. Cranica (cm)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(5)::before { content: "BMI" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(6)::before { content: "Addome (cm)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(7)::before { content: "Tronco (cm)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(8)::before { content: "Gamba (cm)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(9)::before { content: "Torace (cm)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(10)::before { content: "Pelvi (cm)" !important; }
  .km-cards-curve table.km-table tbody tr td:nth-child(11)::before { content: "Età (mesi)" !important; }

  /* allergie.ascx: Principio Attivo | Codice | Avvertenze | Reaz. Immunologiche | Note / Varie | Azioni */
  .km-cards-allergie table.km-table tbody tr td:nth-child(1)::before { content: "Principio Attivo" !important; }
  .km-cards-allergie table.km-table tbody tr td:nth-child(2)::before { content: "Codice" !important; }
  .km-cards-allergie table.km-table tbody tr td:nth-child(3)::before { content: "Avvertenze" !important; }
  .km-cards-allergie table.km-table tbody tr td:nth-child(4)::before { content: "Reaz. Immunologiche" !important; }
  .km-cards-allergie table.km-table tbody tr td:nth-child(5)::before { content: "Note / Varie" !important; }
  .km-cards-allergie table.km-table tbody tr td:nth-child(6)::before { content: "Azioni" !important; }

  /* visite.ascx: Data | Descrizione */
  .km-cards-visite table.km-table tbody tr td:nth-child(1)::before { content: "Data" !important; }
  .km-cards-visite table.km-table tbody tr td:nth-child(2)::before { content: "Descrizione" !important; }

  /* prescrizioni.ascx: Data | Descrizione | Diagnosi | Esenzione | Qta | Azioni */
  .km-cards-presc table.km-table tbody tr td:nth-child(1)::before { content: "Data" !important; }
  .km-cards-presc table.km-table tbody tr td:nth-child(2)::before { content: "Descrizione" !important; }
  .km-cards-presc table.km-table tbody tr td:nth-child(3)::before { content: "Diagnosi" !important; }
  .km-cards-presc table.km-table tbody tr td:nth-child(4)::before { content: "Esenzione" !important; }
  .km-cards-presc table.km-table tbody tr td:nth-child(5)::before { content: "Q.t\00e0" !important; }
  .km-cards-presc table.km-table tbody tr td:nth-child(6)::before { content: "Azioni" !important; }

  /* moduloproposta.ascx: Data | Descrizione | Qta | Diagnosi | Esenzione | Ricetta | Azioni */
  .km-cards-mp table.km-table tbody tr td:nth-child(1)::before { content: "Data" !important; }
  .km-cards-mp table.km-table tbody tr td:nth-child(2)::before { content: "Descrizione" !important; }
  .km-cards-mp table.km-table tbody tr td:nth-child(3)::before { content: "Q.t\00e0" !important; }
  .km-cards-mp table.km-table tbody tr td:nth-child(4)::before { content: "Diagnosi" !important; }
  .km-cards-mp table.km-table tbody tr td:nth-child(5)::before { content: "Esenzione" !important; }
  .km-cards-mp table.km-table tbody tr td:nth-child(6)::before { content: "Ricetta" !important; }
  .km-cards-mp table.km-table tbody tr td:nth-child(7)::before { content: "Azioni" !important; }

  /* certificati.ascx: Rilascio | Inizio | Fine | Tipo | Diagnosi | Protocollo SAC | Visita | Azioni */
  .km-cards-cert table.km-table tbody tr td:nth-child(1)::before { content: "Rilascio" !important; }
  .km-cards-cert table.km-table tbody tr td:nth-child(2)::before { content: "Inizio" !important; }
  .km-cards-cert table.km-table tbody tr td:nth-child(3)::before { content: "Fine" !important; }
  .km-cards-cert table.km-table tbody tr td:nth-child(4)::before { content: "Tipo" !important; }
  .km-cards-cert table.km-table tbody tr td:nth-child(5)::before { content: "Diagnosi" !important; }
  .km-cards-cert table.km-table tbody tr td:nth-child(6)::before { content: "Protocollo SAC" !important; }
  .km-cards-cert table.km-table tbody tr td:nth-child(7)::before { content: "Visita" !important; }
  .km-cards-cert table.km-table tbody tr td:nth-child(8)::before { content: "Azioni" !important; }

  /* vaccinazioni.ascx: Vaccinazione | Farmaco | Data | Protocollo Invio | Azioni */
  .km-cards-vacc table.km-table tbody tr td:nth-child(1)::before { content: "Vaccinazione" !important; }
  .km-cards-vacc table.km-table tbody tr td:nth-child(2)::before { content: "Farmaco" !important; }
  .km-cards-vacc table.km-table tbody tr td:nth-child(3)::before { content: "Data" !important; }
  .km-cards-vacc table.km-table tbody tr td:nth-child(4)::before { content: "Protocollo Invio" !important; }
  .km-cards-vacc table.km-table tbody tr td:nth-child(5)::before { content: "Azioni" !important; }

  .km-cards-presc .km-actions-cell,
  .km-cards-mp .km-actions-cell,
  .km-cards-cert .km-actions-cell,
  .km-cards-vacc .km-actions-cell,
  .km-cards-visite .km-actions-cell,
  .km-cards-allergie .km-actions-cell {
    gap: 14px !important;
  }

  /* GridView rende la riga di intestazione come <tr><th> dentro <tbody> (non in <thead>):
     su mobile diventerebbe una "card" vuota con titoli invisibili -> la nascondiamo. */
  .km-cards-presc table.km-table tr:has(> th),
  .km-cards-mp table.km-table tr:has(> th),
  .km-cards-cert table.km-table tr:has(> th),
  .km-cards-vacc table.km-table tr:has(> th),
  .km-cards-visite table.km-table tr:has(> th),
  .km-cards-allergie table.km-table tr:has(> th),
  .km-cards-curve table.km-table tr:has(> th) {
    display: none !important;
  }
  .km-cards-presc table.km-table th,
  .km-cards-mp table.km-table th,
  .km-cards-cert table.km-table th,
  .km-cards-vacc table.km-table th,
  .km-cards-visite table.km-table th,
  .km-cards-allergie table.km-table th,
  .km-cards-curve table.km-table th {
    display: none !important;
  }

  /* Nessuna zebra e nessun hover grigio sulle card: tutte uguali */
  .km-cards-presc table.km-table tbody tr td,
  .km-cards-mp table.km-table tbody tr td,
  .km-cards-cert table.km-table tbody tr td,
  .km-cards-vacc table.km-table tbody tr td,
  .km-cards-visite table.km-table tbody tr td,
  .km-cards-allergie table.km-table tbody tr td,
  .km-cards-curve table.km-table tbody tr td,
  .km-cards-presc table.km-table tbody tr:nth-child(even) td,
  .km-cards-mp table.km-table tbody tr:nth-child(even) td,
  .km-cards-cert table.km-table tbody tr:nth-child(even) td,
  .km-cards-vacc table.km-table tbody tr:nth-child(even) td,
  .km-cards-visite table.km-table tbody tr:nth-child(even) td,
  .km-cards-allergie table.km-table tbody tr:nth-child(even) td,
  .km-cards-curve table.km-table tbody tr:nth-child(even) td {
    background: transparent !important;
    padding: 10px 0 !important;
    border-top: 1px solid #eef0f2 !important;
  }
  .km-cards-presc table.km-table tbody tr td:first-child,
  .km-cards-mp table.km-table tbody tr td:first-child,
  .km-cards-cert table.km-table tbody tr td:first-child,
  .km-cards-vacc table.km-table tbody tr td:first-child,
  .km-cards-visite table.km-table tbody tr td:first-child,
  .km-cards-allergie table.km-table tbody tr td:first-child,
  .km-cards-curve table.km-table tbody tr td:first-child {
    border-top: none !important;
  }

  /* Righe del pager (td colspan): niente etichetta */
  .km-cards-presc table.km-table tbody tr td[colspan]::before,
  .km-cards-mp table.km-table tbody tr td[colspan]::before,
  .km-cards-cert table.km-table tbody tr td[colspan]::before,
  .km-cards-vacc table.km-table tbody tr td[colspan]::before,
  .km-cards-visite table.km-table tbody tr td[colspan]::before,
  .km-cards-allergie table.km-table tbody tr td[colspan]::before,
  .km-cards-curve table.km-table tbody tr td[colspan]::before {
    content: none !important;
  }
}

/* ==========================================================================
   Titoli colonna (th e relativi link di ordinamento): SEMPRE scuri e leggibili.
   Specificita' alta + -webkit-text-fill-color per battere qualsiasi regola
   legacy che li renda chiari (bianco su bianco).
   ========================================================================== */
body .km-table th,
body .km-table th a,
body .km-table th a:link,
body .km-table th a:visited,
body .km-table th a:hover,
body .km-table th a:active,
body .km-table th span,
body .km-table-wrap table th,
body .km-table-wrap table th a,
body .km-table-wrap table th a:link,
body .km-table-wrap table th a:visited,
body .pp-grid-wrap table th,
body .pp-grid-wrap table th a,
body .pp-grid-wrap table th a:link,
body .pp-grid-wrap table th a:visited {
  color: #5b6472 !important;
  -webkit-text-fill-color: #5b6472 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
body .km-table th a:hover,
body .km-table-wrap table th a:hover,
body .pp-grid-wrap table th a:hover {
  color: #1f2430 !important;
  -webkit-text-fill-color: #1f2430 !important;
  text-decoration: underline !important;
}
/* Angoli: neutralizza bordo/raggio footable sulle km-table; il raggio lo gestisce il wrapper */
.km-table-wrap { overflow: hidden; overflow-x: auto; border: 1px solid #dde2e7; border-radius: 8px; }
body .km-table, body .km-table-wrap table, body .pp-grid-wrap table { border: 0 !important; border-radius: 0 !important; border-spacing: 0; }
body .km-table th, body .km-table td, body .km-table-wrap table th, body .km-table-wrap table td { border-radius: 0 !important; box-shadow: none !important; background-image: none; text-shadow: none !important; }
body .km-table th, body .km-table-wrap table th { background-color: #f3f5f7 !important; }


/* Area contenuto: occupa tutta la larghezza disponibile accanto alla sidebar (card a larghezza piena su mobile) */
.km-main > .km-content, .km-main .km-content { flex: 1 1 0%; min-width: 0; width: auto; box-sizing: border-box; }
@media (max-width: 639px) { .km-main > .km-content { width: 100%; max-width: 100%; } .km-cards-presc, .km-cards-mp, .km-cards-cert, .km-cards-vacc, .km-cards-visite, .km-cards-allergie, .km-cards-presc table.km-table, .km-cards-mp table.km-table, .km-cards-cert table.km-table, .km-cards-vacc table.km-table, .km-cards-visite table.km-table, .km-cards-allergie table.km-table { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } }


/* ==========================================================================
   ICONE AZIONI: set SVG (stile Lucide/Feather) incorporato nel CSS, senza gif.
   Le <img> gif restano nel markup (server tag invariati) ma vengono nascoste
   e sostituite dall'icona vettoriale scelta in base al nome del file.
   ========================================================================== */
body .km-actions-cell a img,
body .km-action-icon img {
  box-sizing: content-box !important;
  width: 0 !important; height: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  border-radius: 8px !important;
  transition: background-color .15s, transform .15s !important;
}
body .km-actions-cell a:hover img,
body .km-action-icon:hover img { transform: none !important; background-color: #eef1f4 !important; }

body .km-actions-cell img[src*="pdf.gif"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E") !important;
}
body .km-actions-cell img[src*="email.gif"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") !important;
}
body .km-actions-cell img[src*="clona.gif"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") !important;
}
body .km-actions-cell img[src*="delete.gif"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") !important;
}

/* Pulsante elimina (asp:Button / ImageButton resi come <input>) */
body .km-action-btn-delete {
  box-sizing: content-box !important;
  width: 20px !important; height: 20px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}
body .km-action-btn-delete:hover { transform: none !important; background-color: #fdecec !important; }

body .km-table input[type="image"][src*="delete.gif"] {
  box-sizing: content-box !important;
  width: 0 !important; height: 0 !important; padding: 12px !important;
  overflow: hidden !important; border-radius: 8px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
}
body .km-table input[type="image"][src*="delete.gif"]:hover { background-color: #fdecec !important; }

/* Etichetta "PDF" sotto l'icona documento */
body .km-actions-cell a:has(> img[src*="pdf.gif"]) {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
}
body .km-actions-cell a:has(> img[src*="pdf.gif"])::after {
  content: "PDF";
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .4px;
  color: #d64545;
  margin-top: -3px;
}

/* Micro legenda nell'intestazione AZIONI del diario clinico: icona clona = clona */
body .km-cards-presc table.km-table th:last-child::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") " = clona";
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #8b95a0;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════
   BILANCI DI SALUTE PEDIATRICI — Modernizzazione e Coerenza Grafica
   ══════════════════════════════════════════════════════════════════════════ */
.km-bilanci-select-card {
  max-width: 800px;
  margin-bottom: 20px;
}

.km-bilancio-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--km-card, #ffffff);
  border: 1px solid var(--km-border, #dde2e7);
  border-radius: var(--km-radius, 8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   BILANCI DI SALUTE PEDIATRICI - MODERN RESPONSIVE UI
   Design system coerente con prescrivi_farmaci e prescrivi_prestazioni
   ========================================================================== */

/* Barra di navigazione bilancio (Top Nav & Breadcrumb) */
.km-bilancio-nav-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.km-bilancio-nav-bar a,
.km-bilancio-nav-bar .uc-btn,
.km-bilancio-nav-bar .pp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #3b74ad !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all .15s ease !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

.km-bilancio-nav-bar a:hover,
.km-bilancio-nav-bar .uc-btn:hover,
.km-bilancio-nav-bar .pp-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e40af !important;
}

/* Titolo Bilancio Header (auto-style1) - Stile unificato con pp-card-title */
.auto-style1,
div.auto-style1,
.pp-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1f2430 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid #dde2e7 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Messaggio di notifica/errore (auto-style1MSG) */
.auto-style1MSG,
span.auto-style1MSG {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
  margin: 0 0 14px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

/* Struttura form card: Card pulita identica a prescrivi_farmaco (.pp-card) */
table.auto-style2 {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
}

.pp-card > table.auto-style2 {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

table.auto-style2 > tbody {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

table.auto-style2 > tbody > tr {
  display: block !important;
  width: 100% !important;
}

/* Nasconde righe e celle vuote o nascoste */
table.auto-style2 tr[hidden],
table.auto-style2 td[hidden],
table.auto-style2 tr:has(> td[style*="hidden"]),
table.auto-style2 tr:has(> td[hidden]),
table.auto-style2 tr:has(> td:empty),
table.auto-style2 tr:has(> td.auto-style3:empty) {
  display: none !important;
}

/* Ogni riga del bilancio: form row elegante coerente con pp-field */
table.auto-style2 td.auto-style3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  color: #5b6472 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Intestazioni di sezione clinica (CONCLUSIONI, EDUCAZIONE ALLA SALUTE) - Stile h3 di prescrivi_farmaco */
.km-bilancio-section-header,
table.auto-style2 td[style*="font-size:18px"],
table.auto-style2 td[style*="font-size: 18px"],
table.auto-style2 td[style*="CONCLUSIONI"],
table.auto-style2 td[style*="EDUCAZIONE"] {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #5b6472 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  padding: 14px 0 6px 0 !important;
  border-bottom: 1px solid #dde2e7 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  box-sizing: border-box !important;
}

/* Campi di input, tendine e textarea (stile pp-field di prescrivi_farmaco) */
table.auto-style2 input[type="text"],
table.auto-style2 select,
table.auto-style2 textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 11px !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #1f2430 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

table.auto-style2 textarea {
  min-height: 68px !important;
  resize: vertical !important;
  margin-top: 4px !important;
}

table.auto-style2 input[type="text"]:focus,
table.auto-style2 select:focus,
table.auto-style2 textarea:focus {
  outline: none !important;
  border-color: #7fb7ff !important;
  box-shadow: 0 0 0 2px #7fb7ff !important;
}

table.auto-style2 input[type="text"][disabled],
table.auto-style2 input[type="text"][readonly] {
  background: #f7f8fa !important;
  color: #5b6472 !important;
  cursor: not-allowed !important;
  border-color: #dde2e7 !important;
}

/* RadioButtonList nei Bilanci: look pill identico a .uc-rbl / .pp-rbl di prescrivi_farmaco */
table.auto-style2 table.auto-style4,
.km-bilancio-form table.auto-style4,
.km-check-item table.auto-style4 {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 4px 0 !important;
  padding: 0 !important;
  width: auto !important;
}

table.auto-style2 table.auto-style4 > tbody,
table.auto-style2 table.auto-style4 > tbody > tr,
.km-bilancio-form table.auto-style4 > tbody,
.km-bilancio-form table.auto-style4 > tbody > tr,
.km-check-item table.auto-style4 > tbody,
.km-check-item table.auto-style4 > tbody > tr {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border: none !important;
  background: transparent !important;
}

table.auto-style2 table.auto-style4 td,
.km-bilancio-form table.auto-style4 td,
.km-check-item table.auto-style4 td {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  position: relative !important;
}

/* Nasconde visivamente il radio nativo */
table.auto-style2 table.auto-style4 td input[type="radio"],
.km-bilancio-form table.auto-style4 td input[type="radio"],
.km-check-item table.auto-style4 td input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Label diventa la pillola interattiva - identica a .uc-rbl label */
table.auto-style2 table.auto-style4 td label,
.km-bilancio-form table.auto-style4 td label,
.km-check-item table.auto-style4 td label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 7px 14px !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #4a5568 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all .15s ease !important;
  line-height: 1.2 !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
}

/* Indicatore circolare interno alla pillola - identico a .uc-rbl label::before */
table.auto-style2 table.auto-style4 td label::before,
.km-bilancio-form table.auto-style4 td label::before,
.km-check-item table.auto-style4 td label::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 2px solid #b8c2cc !important;
  transition: all .15s ease !important;
  flex-shrink: 0 !important;
}

/* Hover pillola */
table.auto-style2 table.auto-style4 td label:hover,
.km-bilancio-form table.auto-style4 td label:hover,
.km-check-item table.auto-style4 td label:hover {
  background: #f7f9fa !important;
  border-color: #c8d0da !important;
  color: #1f2430 !important;
}

table.auto-style2 table.auto-style4 td label:hover::before,
.km-bilancio-form table.auto-style4 td label:hover::before,
.km-check-item table.auto-style4 td label:hover::before {
  border-color: #7fb7ff !important;
}

/* Pillola selezionata */
table.auto-style2 table.auto-style4 td input[type="radio"]:checked + label,
table.auto-style2 table.auto-style4 td:has(input[type="radio"]:checked) label,
.km-bilancio-form table.auto-style4 td input[type="radio"]:checked + label,
.km-bilancio-form table.auto-style4 td:has(input[type="radio"]:checked) label,
.km-check-item table.auto-style4 td input[type="radio"]:checked + label,
.km-check-item table.auto-style4 td:has(input[type="radio"]:checked) label {
  background: #eaf2ff !important;
  border-color: #7fb7ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(31, 74, 128, .12) !important;
}

table.auto-style2 table.auto-style4 td input[type="radio"]:checked + label::before,
table.auto-style2 table.auto-style4 td:has(input[type="radio"]:checked) label::before,
.km-bilancio-form table.auto-style4 td input[type="radio"]:checked + label::before,
.km-bilancio-form table.auto-style4 td:has(input[type="radio"]:checked) label::before,
.km-check-item table.auto-style4 td input[type="radio"]:checked + label::before,
.km-check-item table.auto-style4 td:has(input[type="radio"]:checked) label::before {
  background: #2b6cb0 !important;
  border-color: #2b6cb0 !important;
  box-shadow: 0 0 0 2px #eaf2ff !important;
}

/* Focus per accessibilità */
table.auto-style2 table.auto-style4 td input[type="radio"]:focus-visible + label,
.km-bilancio-form table.auto-style4 td input[type="radio"]:focus-visible + label,
.km-check-item table.auto-style4 td input[type="radio"]:focus-visible + label {
  outline: none !important;
  box-shadow: 0 0 0 2px #7fb7ff !important;
}

/* Checkbox nei Bilanci: look pill identico a .cf-pill / .pp-choice di prescrivi_farmaco */
table.auto-style2 span:has(> input[type="checkbox"]),
table.auto-style2 label:has(> input[type="checkbox"]),
table.auto-style2 td:has(> input[type="checkbox"][id*="chb"]),
.km-bilancio-form span:has(> input[type="checkbox"]),
.km-bilancio-form label:has(> input[type="checkbox"]),
.km-bilancio-form label.cf-pill,
.km-bilancio-form .cf-pill,
.km-bilancio-form .km-choice-pill,
.km-bambino-sano-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 20px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  background: #ffffff !important;
  color: #1f2430 !important;
  user-select: none !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  transition: all .15s ease !important;
  width: auto !important;
  line-height: 1.2 !important;
}

table.auto-style2 span:has(> input[type="checkbox"]):hover,
table.auto-style2 label:has(> input[type="checkbox"]):hover,
.km-bilancio-form span:has(> input[type="checkbox"]):hover,
.km-bilancio-form label:has(> input[type="checkbox"]):hover,
.km-bilancio-form label.cf-pill:hover,
.km-bilancio-form .cf-pill:hover,
.km-bilancio-form .km-choice-pill:hover,
.km-bambino-sano-pill:hover {
  background: #f7f9fa !important;
  border-color: #c8d0da !important;
}

table.auto-style2 span:has(> input[type="checkbox"]:checked),
table.auto-style2 label:has(> input[type="checkbox"]:checked),
.km-bilancio-form span:has(> input[type="checkbox"]:checked),
.km-bilancio-form label:has(> input[type="checkbox"]:checked),
.km-bilancio-form label.cf-pill:has(input:checked),
.km-bilancio-form .cf-pill:has(input:checked),
.km-bilancio-form span:has(> input[type="checkbox"][checked]),
.km-bilancio-form label:has(> input[type="checkbox"][checked]),
.km-bilancio-form label.cf-pill:has(input[checked]),
.km-bambino-sano-pill:has(input:checked),
.km-bambino-sano-pill:has(input[checked]) {
  background: #eaf2ff !important;
  border-color: #7fb7ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(31, 74, 128, .12) !important;
}

table.auto-style2 input[type="checkbox"],
.km-bilancio-form input[type="checkbox"] {
  accent-color: #3b74ad !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

table.auto-style2 input[type="checkbox"] + label,
table.auto-style2 label:has(+ input[type="checkbox"]),
.km-bilancio-form input[type="checkbox"] + label,
.km-bilancio-form label:has(+ input[type="checkbox"]),
.km-bilancio-form .cf-pill label,
.km-bambino-sano-pill label {
  cursor: pointer !important;
  margin: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  pointer-events: none !important;
}

/* Pulsante Calcola Percentili e badge risultati auxologici */
table.auto-style2 input[type="submit"][id*="btnPercentili"],
.km-bilancio-form input[type="submit"][id*="btnPercentili"] {
  display: inline-flex !important;
  align-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 7px 16px !important;
  background: #3b74ad !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(59, 116, 173, 0.2) !important;
  transition: all .15s ease !important;
  margin-top: 6px !important;
  width: auto !important;
  align-self: flex-start !important;
}

table.auto-style2 input[type="submit"][id*="btnPercentili"]:hover {
  background: #2c5c8f !important;
}

table.auto-style2 span[id*="lblPerc"],
.km-bilancio-form span[id*="lblPerc"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin: 4px 0 !important;
  align-self: flex-start !important;
}

/* Scheda finale comandi di azione (Salva ed Elimina) */
table.auto-style2 tr:last-child td.auto-style3 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 18px 0 0 0 !important;
  border-top: 1px solid #dde2e7 !important;
  border-bottom: none !important;
  margin-top: 14px !important;
}

table.auto-style2 input[type="submit"][id*="btnMemorizza"],
table.auto-style2 input[type="submit"][id*="btnInsert"],
.km-bilancio-form input[type="submit"][id*="btnMemorizza"],
.km-bilancio-form input[type="submit"][id*="btnInsert"],
.km-bilancio-actions input[type="submit"][id*="btnMemorizza"],
.km-bilancio-actions input[type="submit"][id*="btnInsert"],
table.auto-style2 .pp-btn-save,
.km-bilancio-form .pp-btn-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 9px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  background: #2c5c8f !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(44, 92, 143, 0.25) !important;
  transition: background .15s ease !important;
  width: auto !important;
}

table.auto-style2 input[type="submit"][id*="btnMemorizza"]:hover,
table.auto-style2 input[type="submit"][id*="btnInsert"]:hover,
.km-bilancio-form input[type="submit"][id*="btnMemorizza"]:hover,
.km-bilancio-form input[type="submit"][id*="btnInsert"]:hover,
.km-bilancio-actions input[type="submit"][id*="btnMemorizza"]:hover,
.km-bilancio-actions input[type="submit"][id*="btnInsert"]:hover,
table.auto-style2 .pp-btn-save:hover,
.km-bilancio-form .pp-btn-save:hover {
  background: #3b74ad !important;
}

table.auto-style2 input[type="submit"][id*="btnDelete"],
.km-bilancio-form input[type="submit"][id*="btnDelete"],
.km-bilancio-actions input[type="submit"][id*="btnDelete"],
table.auto-style2 .pp-btn-danger,
.km-bilancio-form .pp-btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #b3402f !important;
  border: 1px solid #fecaca !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  width: auto !important;
  margin-left: 0 !important;
}

table.auto-style2 input[type="submit"][id*="btnDelete"]:hover,
.km-bilancio-form input[type="submit"][id*="btnDelete"]:hover,
.km-bilancio-actions input[type="submit"][id*="btnDelete"]:hover,
table.auto-style2 .pp-btn-danger:hover,
.km-bilancio-form .pp-btn-danger:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
}

/* ==========================================================================
   BILANCI DI SALUTE - Sistema a Card e Colonne Responsive Coerenti
   ========================================================================== */

/* Contenitore a schede verticali/griglia */
.km-bilancio-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

/* Card del bilancio con look prescrivi_farmaco */
.km-bilancio-form .pp-card {
  background: #ffffff !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}

/* Titolo della card con icona o testo */
.km-bilancio-form .pp-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1f2430 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid #dde2e7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Box Auxologia con sfondo e calcolo percentili */
.km-aux-box {
  background: #f8fafc !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-top: 8px !important;
  box-sizing: border-box !important;
}

.km-aux-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-bottom: 12px !important;
}

.km-aux-fields {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

/* Griglia coerente a colonne per i check clinici e counseling */
.km-checks-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px 14px !important;
}

@media (min-width: 1024px) {
  .km-checks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Singola scheda domanda / check coerente */
.km-check-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition: all .15s ease !important;
  min-height: 52px !important;
  width: 100% !important;
}

.km-check-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Check item esteso a tutta larghezza (per note o campi ampi) */
.km-check-item.km-check-full {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 14px !important;
  padding: 12px 14px !important;
}

.km-check-item.km-check-full > .km-check-label {
  flex: 0 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.km-check-item.km-check-full > table.auto-style4 {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.km-check-item.km-check-full > .km-check-note {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
}

.km-check-item.km-check-full > textarea,
.km-check-item.km-check-full > input[type="text"],
.km-check-item.km-check-full > .km-vision-grid,
.km-check-item.km-check-full > .km-pubert-grid {
  width: 100% !important;
  flex: 1 1 100% !important;
  margin-top: 2px !important;
}

.km-check-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.35 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.km-check-item table.auto-style4 {
  margin-left: auto !important;
  flex-shrink: 0;
  max-width: 100% !important;
}

.km-aux-header > div {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.km-aux-header > div .km-check-label {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

.km-bilancio-form .pp-field > .km-check-label {
  flex: none !important;
  width: 100% !important;
  margin: 0 0 6px 0 !important;
}

.km-bilancio-form .pp-field > table.auto-style4 {
  margin: 0 0 6px 0 !important;
  width: auto !important;
}

.km-bilancio-form .pp-field > .km-check-note {
  margin-top: 4px !important;
  margin-bottom: 2px !important;
}

.km-check-note {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  width: 100% !important;
  margin-top: 4px !important;
}

/* Responsive Mobile & Narrow Viewports (< 860px) per i Bilanci di Salute */
@media (max-width: 860px) {
  /* 1. Header row Anamnesi: stack verticale a tutta larghezza */
  .pp-row,
  .km-bilancio-form .pp-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .pp-row .pp-field,
  .km-bilancio-form .pp-row .pp-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .km-bilancio-form .sd-date-picker {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2. Auxologia Box: stack standard percentili e pulsante */
  .km-aux-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .km-aux-header > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .km-aux-header > div table.auto-style4,
  .km-aux-header > div table.auto-style4 > tbody,
  .km-aux-header > div table.auto-style4 > tbody > tr {
    margin-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .km-aux-header > div table.auto-style4 td {
    flex: 1 1 auto !important;
  }

  .km-aux-header > div table.auto-style4 td label {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .km-aux-header .pp-btn,
  .km-aux-header input[type="submit"] {
    width: 100% !important;
    min-height: 40px !important;
    text-align: center !important;
  }

  .km-aux-fields {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 3. Tutti i Check Items: stack verticale completo di label e controlli */
  .km-check-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .km-check-item .km-check-label {
    width: 100% !important;
    flex: none !important;
  }

  .km-check-item table.auto-style4,
  .km-check-item.km-check-full > table.auto-style4,
  .km-check-item table.auto-style4 > tbody,
  .km-check-item table.auto-style4 > tbody > tr {
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .km-check-item table.auto-style4 td {
    flex: 1 1 auto !important;
  }

  .km-check-item table.auto-style4 td label {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .km-check-item select,
  .km-check-item .auto-style4 select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4. Controlli composti (ecografia anche, podoscopia, pressione arteriosa) */
  .km-ecoanche-wrap,
  .km-podoscopia-wrap {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .km-ecoanche-wrap select,
  .km-ecoanche-wrap .auto-style4 select,
  .km-podoscopia-wrap select,
  .km-podoscopia-wrap .auto-style4 select {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 4px !important;
  }

  .km-press-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .km-press-row input[type="text"] {
    flex: 1 1 70px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* 5. Griglie composte (Stadi puberali, screening vista, stato vaccinale) */
  .km-pubert-grid,
  .km-vision-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* 6. RadioButtonList in qualsiasi pp-field (es. Consulenze, Bambino Sano, Ricoveri) */
  .km-bilancio-form .pp-field table.auto-style4,
  .km-bilancio-form .pp-field table.auto-style4 > tbody,
  .km-bilancio-form .pp-field table.auto-style4 > tbody > tr {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .km-bilancio-form .pp-field table.auto-style4 td {
    flex: 1 1 auto !important;
  }

  .km-bilancio-form .pp-field table.auto-style4 td label {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 7. Barra comandi finale */
  .km-bilancio-actions {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .km-bilancio-actions .pp-btn-save,
  .km-bilancio-actions .pp-btn-danger,
  .km-bilancio-actions input[type="submit"] {
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* Helper flex container per controlli speciali su desktop */
.km-ecoanche-wrap,
.km-podoscopia-wrap,
.km-press-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
}

@media (max-width: 480px) {
  .km-press-row input[type="text"] {
    max-width: none !important;
    flex: 1 1 70px !important;
  }
  .sd-dp-popover {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* Input, select, textarea dentro km-bilancio-form */
.km-bilancio-form input[type="text"],
.km-bilancio-form select,
.km-bilancio-form textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 11px !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #1f2430 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.km-bilancio-form textarea {
  min-height: 56px !important;
  resize: vertical !important;
  margin-top: 4px !important;
}

.km-bilancio-form input[type="text"]:focus,
.km-bilancio-form select:focus,
.km-bilancio-form textarea:focus {
  outline: none !important;
  border-color: #7fb7ff !important;
  box-shadow: 0 0 0 2px #7fb7ff !important;
}

.km-bilancio-form input[type="text"][disabled],
.km-bilancio-form input[type="text"][readonly] {
  background: #f7f8fa !important;
  color: #5b6472 !important;
  cursor: not-allowed !important;
  border-color: #dde2e7 !important;
}

/* Barra comandi finali del bilancio */
.km-bilancio-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid #dde2e7 !important;
  margin-top: 14px !important;
}

/* Validatori ASP.NET - NON forzare display per rispettare la gestione client-side di ASP.NET WebForms */
.km-bilancio-form span[id*="REV"],
.km-bilancio-form span[id*="Rev"],
.km-bilancio-form span[id*="Req"],
.km-bilancio-form span[id*="RegularExpressionValidator"],
.km-bilancio-form span[id*="RequiredFieldValidator"],
table.auto-style2 span[id*="REV"],
table.auto-style2 span[id*="Rev"],
table.auto-style2 span[id*="Req"],
table.auto-style2 span[id*="RegularExpressionValidator"],
table.auto-style2 span[id*="RequiredFieldValidator"],
table.auto-style2 span.pp-error {
  color: #b3402f !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* Calendario ASP.NET */
table.auto-style2 table[id*="Calendar1"] {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #cbd5e1 !important;
  margin: 8px 0 !important;
  width: 100% !important;
  max-width: 280px !important;
  background: #ffffff !important;
}

table.auto-style2 table[id*="Calendar1"] td {
  padding: 4px !important;
  text-align: center !important;
}

/* Grid schede per selezione_bilancio.ascx */
.km-bilanci-select-card {
  margin-bottom: 20px !important;
}

.km-bilanci-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.km-bilancio-card-tile {
  background: #ffffff !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  user-select: none !important;
  position: relative !important;
}

.km-bilancio-card-tile:hover {
  border-color: #3b74ad !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(59, 116, 173, 0.15) !important;
  background: #fafcfe !important;
}

.km-bilancio-card-tile:active {
  transform: scale(0.99) !important;
}

.km-bilancio-card-tile .km-tile-badge {
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  align-self: flex-start !important;
}

.km-bilancio-card-tile .km-tile-date-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  align-self: flex-start !important;
}

.km-bilancio-card-tile.km-bilancio-compilato {
  border-left: 3px solid #16a34a !important;
}

.km-bilancio-card-tile .km-tile-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1f2430 !important;
}

.km-bilancio-card-tile .km-tile-desc {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}


/* Adattamento Mobile (< 640px) */
@media (max-width: 640px) {
  table.auto-style2 {
    padding: 14px 14px !important;
  }

  table.auto-style2 td.auto-style3 {
    padding: 10px 0 !important;
  }

  table.auto-style2 input[type="text"],
  table.auto-style2 select {
    font-size: 16px !important;
    min-height: 42px !important;
  }

  table.auto-style2 tr:last-child td.auto-style3 {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    padding-top: 14px !important;
  }
  
  table.auto-style2 input[type="submit"][id*="btnMemorizza"],
  table.auto-style2 input[type="submit"][id*="btnInsert"],
  table.auto-style2 input[type="submit"][id*="btnDelete"],
  table.auto-style2 .pp-btn-save,
  table.auto-style2 .pp-btn-danger {
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Layout pagine ConBack (Prontuario, Nomenclatore, Note, Storico, Dati Medico)
   ══════════════════════════════════════════════════════════════════════════ */
.km-interior-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--km-bg, #eef1f4);
}

.km-interior-wrap {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 40px;
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.km-interior-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid var(--km-border, #dde2e7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .km-interior-wrap {
    padding: 12px 12px 30px;
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .km-interior-card {
    padding: 14px 12px;
    border-radius: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dettaglio Farmaco Moderno (cerca_farmaco)
   ══════════════════════════════════════════════════════════════════════════ */
.km-farm-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.km-farm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 2px solid #eef2f6;
}

.km-farm-title-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 250px;
}

.km-btn-back-farmaco {
  background: var(--km-blue-600, #3b74ad) !important;
  color: #ffffff !important;
  border: 1px solid var(--km-blue-700, #2c5c8f) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 8px 16px !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 3px rgba(44, 92, 143, .25) !important;
  transition: all .15s ease !important;
}

.km-btn-back-farmaco:hover {
  background: var(--km-blue-700, #2c5c8f) !important;
  border-color: #1a426d !important;
  box-shadow: 0 2px 6px rgba(44, 92, 143, .35) !important;
  transform: translateY(-1px) !important;
}

.km-farm-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--km-blue-700, #2c5c8f);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.km-farm-patt {
  font-size: 14.5px;
  color: #475569;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.km-farm-grid-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.km-farm-prop {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s ease, background-color .15s ease;
}

.km-farm-prop:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.km-farm-prop-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  font-weight: 700;
}

.km-farm-prop-val {
  font-size: 14.5px;
  color: #0f172a;
  font-weight: 600;
  word-break: break-word;
}

.km-farm-section {
  background: #ffffff;
  border: 1px solid var(--km-border, #dde2e7);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.km-farm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.km-farm-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--km-ink, #1f2430);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.km-farm-badge-cuf {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

.km-farm-section-content {
  font-size: 14px;
  color: #334155;
  line-height: 1.65;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 8px;
}

.km-farm-section-content::-webkit-scrollbar {
  width: 6px;
}

.km-farm-section-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.km-farm-section-content strong {
  color: var(--km-blue-700, #2c5c8f);
  display: block;
  font-size: 13.5px;
  margin-top: 14px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.km-farm-section-content strong:first-child {
  margin-top: 0;
}

/* Pulsante selezione moderno rotondo per tabelle */
.km-action-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--km-blue-600, #3b74ad);
  border: 1px solid #bfdbfe;
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
}

.km-action-chevron:hover {
  background: var(--km-blue-600, #3b74ad);
  color: #ffffff;
  border-color: var(--km-blue-600, #3b74ad);
  transform: scale(1.08);
}

.km-action-chevron svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* ══════════════════════════════════════════════════════════════════════════
   Visualizzazione Card Mobile per Prontuario Farmaci (cerca_farmaco)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .km-cards-farmaco table.km-table {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  .km-cards-farmaco table.km-table thead,
  .km-cards-farmaco table.km-table tr:has(> th),
  .km-cards-farmaco table.km-table th {
    display: none !important;
  }

  .km-cards-farmaco table.km-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .km-cards-farmaco table.km-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid var(--km-border, #dde2e7) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    padding-right: 56px !important; /* Spazio per il pulsante chevron */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
    cursor: pointer !important;
    transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease !important;
  }

  .km-cards-farmaco table.km-table tbody tr:hover {
    border-color: var(--km-blue-600, #3b74ad) !important;
    box-shadow: 0 4px 12px rgba(44, 92, 143, .12) !important;
    transform: translateY(-1px) !important;
  }

  .km-cards-farmaco table.km-table tbody tr td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: none !important;
    padding: 3px 0 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    text-align: right !important;
    background: transparent !important;
  }

  /* Riga 1: Nome Commerciale (in evidenza) */
  .km-cards-farmaco table.km-table tbody tr td:nth-child(1) {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: var(--km-blue-700, #2c5c8f) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  .km-cards-farmaco table.km-table tbody tr td:nth-child(1)::before {
    content: none !important;
  }

  /* Riga 2: Nota CUF */
  .km-cards-farmaco table.km-table tbody tr td:nth-child(2)::before {
    content: "Nota CUF";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 3: Classe */
  .km-cards-farmaco table.km-table tbody tr td:nth-child(3)::before {
    content: "Classe";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 4: Prezzo */
  .km-cards-farmaco table.km-table tbody tr td:nth-child(4) {
    font-weight: 700 !important;
    color: #0f172a !important;
  }
  .km-cards-farmaco table.km-table tbody tr td:nth-child(4)::before {
    content: "Prezzo (€)";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 5: Azione Chevron (posizionato a destra verticalmente centrato) */
  .km-cards-farmaco table.km-table tbody tr td:nth-child(5) {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
  }
  .km-cards-farmaco table.km-table tbody tr td:nth-child(5)::before {
    content: none !important;
  }

  /* Pager */
  .km-cards-farmaco table.km-table tbody tr td[colspan] {
    position: static !important;
    transform: none !important;
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
  }
  .km-cards-farmaco table.km-table tbody tr:has(td[colspan]) {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Visualizzazione Card Mobile per Nomenclatore Prestazioni (cerca_prestazioni)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .km-cards-prestazioni table.km-table {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  .km-cards-prestazioni table.km-table thead,
  .km-cards-prestazioni table.km-table tr:has(> th),
  .km-cards-prestazioni table.km-table th {
    display: none !important;
  }

  .km-cards-prestazioni table.km-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .km-cards-prestazioni table.km-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid var(--km-border, #dde2e7) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
    transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease !important;
  }

  .km-cards-prestazioni table.km-table tbody tr:hover {
    border-color: var(--km-blue-600, #3b74ad) !important;
    box-shadow: 0 4px 12px rgba(44, 92, 143, .12) !important;
    transform: translateY(-1px) !important;
  }

  .km-cards-prestazioni table.km-table tbody tr td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: none !important;
    padding: 4px 0 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    text-align: right !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Colonna 2 (nel DOM viene ordinata al top o in evidenza): Descrizione prestazione */
  .km-cards-prestazioni table.km-table tbody tr td:nth-child(2) {
    order: 1 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--km-blue-700, #2c5c8f) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
  }
  .km-cards-prestazioni table.km-table tbody tr td:nth-child(2)::before {
    content: none !important;
  }

  /* Colonna 1: Codice */
  .km-cards-prestazioni table.km-table tbody tr td:nth-child(1) {
    order: 2 !important;
  }
  .km-cards-prestazioni table.km-table tbody tr td:nth-child(1)::before {
    content: "Codice";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }
  .km-cards-prestazioni table.km-table tbody tr td:nth-child(1) span {
    font-family: monospace;
    font-size: 13px;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 4px;
    color: #0f172a;
    font-weight: 600;
  }

  /* Colonna 3: Tariffa */
  .km-cards-prestazioni table.km-table tbody tr td:nth-child(3) {
    order: 3 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }
  .km-cards-prestazioni table.km-table tbody tr td:nth-child(3)::before {
    content: "Tariffa (€)";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Pager */
  .km-cards-prestazioni table.km-table tbody tr td[colspan] {
    order: 99 !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
  }
  .km-cards-prestazioni table.km-table tbody tr:has(td[colspan]) {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Visualizzazione Card Mobile per Prestazioni Aggiunte (prescrivi_prestazioni.ascx)
   Colonne: 1: Codice, 2: Descrizione, 3: Qtà, 4: Esenzione, 5: Elimina
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .km-cards-prescrivi-prest table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .km-cards-prescrivi-prest table thead,
  .km-cards-prescrivi-prest table tr:has(> th),
  .km-cards-prescrivi-prest table th {
    display: none !important;
  }

  .km-cards-prescrivi-prest table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .km-cards-prescrivi-prest table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid var(--km-border, #dde2e7) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .km-cards-prescrivi-prest table tbody tr td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 6px 0 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    text-align: right !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Colonna 2: Descrizione prestazione (titolo della card in evidenza) */
  .km-cards-prescrivi-prest table tbody tr td:nth-child(2) {
    order: 1 !important;
    border-top: none !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    padding-right: 36px !important; /* spazio per il pulsante elimina in alto a destra */
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--km-blue-700, #2c5c8f) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    line-height: 1.35 !important;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(2)::before {
    content: none !important;
  }

  /* Colonna 5: Elimina (posizionato come icona in alto a destra nella card) */
  .km-cards-prescrivi-prest table tbody tr td:nth-child(5) {
    order: 2 !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 2 !important;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(5)::before {
    content: none !important;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(5) input[type="image"] {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.85 !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(5) input[type="image"]:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
  }

  /* Colonna 1: Codice prestazione */
  .km-cards-prescrivi-prest table tbody tr td:nth-child(1) {
    order: 3 !important;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(1)::before {
    content: "Codice";
    font-weight: 600;
    color: #64748b;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(1) {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #0f172a;
    font-weight: 600;
  }

  /* Colonna 3: Quantità */
  .km-cards-prescrivi-prest table tbody tr td:nth-child(3) {
    order: 4 !important;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(3)::before {
    content: "Quantità";
    font-weight: 600;
    color: #64748b;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(3) {
    font-weight: 700;
    color: #0f172a;
  }

  /* Colonna 4: Esenzione */
  .km-cards-prescrivi-prest table tbody tr td:nth-child(4) {
    order: 5 !important;
  }
  .km-cards-prescrivi-prest table tbody tr td:nth-child(4)::before {
    content: "Esenzione";
    font-weight: 600;
    color: #64748b;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Visualizzazione Card Mobile per Storico Prescrizioni (storico.aspx)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .km-cards-storico-presc table.km-table {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  .km-cards-storico-presc table.km-table thead,
  .km-cards-storico-presc table.km-table tr:has(> th),
  .km-cards-storico-presc table.km-table th {
    display: none !important;
  }

  .km-cards-storico-presc table.km-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .km-cards-storico-presc table.km-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid var(--km-border, #dde2e7) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05) !important;
    transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease !important;
  }

  .km-cards-storico-presc table.km-table tbody tr:hover {
    border-color: var(--km-blue-600, #3b74ad) !important;
    box-shadow: 0 4px 12px rgba(44, 92, 143, .12) !important;
    transform: translateY(-1px) !important;
  }

  .km-cards-storico-presc table.km-table tbody tr td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: none !important;
    padding: 4px 0 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    text-align: right !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Riga 1: Farmaco / Prestazione (Descrizione, colonna 3 nel markup) */
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(3) {
    order: 1 !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: var(--km-blue-700, #2c5c8f) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(3)::before {
    content: none !important;
  }

  /* Riga 2: Paziente (colonna 2) */
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(2) {
    order: 2 !important;
    font-weight: 600 !important;
    color: #0f172a !important;
  }
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(2)::before {
    content: "Paziente";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 3: Data (colonna 1) */
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(1) {
    order: 3 !important;
  }
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(1)::before {
    content: "Data";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 4: Q.tà (colonna 4) */
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(4) {
    order: 4 !important;
    font-weight: 600 !important;
  }
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(4)::before {
    content: "Quantità";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 5: Diagnosi (colonna 5) */
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(5) {
    order: 5 !important;
  }
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(5)::before {
    content: "Diagnosi";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 6: Esenzione (colonna 6) */
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(6) {
    order: 6 !important;
  }
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(6)::before {
    content: "Esenzione";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Riga 7: Medico (colonna 7) */
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(7) {
    order: 7 !important;
    font-weight: 500 !important;
  }
  .km-cards-storico-presc table.km-table tbody tr td:nth-child(7)::before {
    content: "Prescrittore";
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
  }

  /* Pager */
  .km-cards-storico-presc table.km-table tbody tr td[colspan] {
    order: 99 !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
  }
  .km-cards-storico-presc table.km-table tbody tr:has(td[colspan]) {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Anagrafica Paziente (controls/anagrafica.ascx)
   ══════════════════════════════════════════════════════════════════════════ */
.km-anagrafica-card {
  max-width: 900px;
}

.km-anagrafica-wrap {
  width: 100%;
  overflow-x: auto;
}

/* Stili sia diretti su table/DetailsView che sull'adapter CSSFriendly */
.km-anagrafica-wrap table,
.km-anagrafica-wrap .AspNet-DetailsView-Data table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--km-border, #dde2e7) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.km-anagrafica-wrap tr,
.km-anagrafica-wrap .AspNet-DetailsView-Data tr {
  border-bottom: 1px solid #edf2f7 !important;
  transition: background-color .12s ease !important;
}

.km-anagrafica-wrap tr:last-child,
.km-anagrafica-wrap .AspNet-DetailsView-Data tr:last-child {
  border-bottom: none !important;
}

.km-anagrafica-wrap tr:hover,
.km-anagrafica-wrap .AspNet-DetailsView-Data tr:hover {
  background-color: #f8fafc !important;
}

/* Colonna etichetta (sinistra) */
.km-anagrafica-wrap td:first-child,
.km-anagrafica-wrap th:first-child,
.km-anagrafica-wrap td.AspNet-DetailsView-Name {
  width: 32% !important;
  min-width: 140px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-align: left !important;
  background: #f8fafc !important;
  border-right: 1px solid #edf2f7 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  vertical-align: middle !important;
}

/* Colonna valore (destra) */
.km-anagrafica-wrap td:last-child,
.km-anagrafica-wrap td.AspNet-DetailsView-Value {
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  text-align: left !important;
  border: none !important;
  vertical-align: middle !important;
}

@media (max-width: 639px) {
  .km-anagrafica-wrap table,
  .km-anagrafica-wrap .AspNet-DetailsView-Data table {
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .km-anagrafica-wrap tbody,
  .km-anagrafica-wrap .AspNet-DetailsView-Data tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .km-anagrafica-wrap tr,
  .km-anagrafica-wrap .AspNet-DetailsView-Data tr {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid var(--km-border, #dde2e7) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
  }

  .km-anagrafica-wrap td:first-child,
  .km-anagrafica-wrap td.AspNet-DetailsView-Name {
    width: 100% !important;
    background: transparent !important;
    padding: 0 0 4px 0 !important;
    border: none !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: #64748b !important;
  }

  .km-anagrafica-wrap td:last-child,
  .km-anagrafica-wrap td.AspNet-DetailsView-Value {
    width: 100% !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
  }
}

/* ==========================================================================
   PREVENT IOS / SAFARI / CAPACITOR AUTO-ZOOM ON INPUT FOCUS
   In iOS WebKit, tapping any input with font-size < 16px triggers an automatic zoom.
   Enforcing font-size: 16px on mobile/touch screens prevents this completely.
   ========================================================================== */
@media screen and (max-width: 1024px), (hover: none) and (pointer: coarse), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px) {
  input,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input:not([type]),
  select,
  textarea,
  .cf-input,
  .cf-motivo select,
  .cf-card select,
  .cf-card input,
  .km-input,
  .km-form-control,
  .km-search,
  .km-search-input,
  .km-sel-input,
  .km-uc-search input,
  .km-uc-search .km-search,
  .uc-input,
  .pp-field input,
  .pp-field input[type=text],
  .pp-field input[type=number],
  .pp-field input[type=text][readonly],
  .pp-with-btn input,
  .sd-wrap input,
  .sd-wrap input[type=text],
  .ui-input-text,
  .ui-input-text input,
  .ui-autocomplete,
  .ui-autocomplete .ui-menu-item,
  .ui-autocomplete .ui-menu-item-wrapper,
  .ui-autocomplete .ui-menu-item a {
    font-size: 16px !important;
  }

  /* Assicura che la topbar rispetti l'area di stato / notch / dynamic island di iOS */
  .km-topbar {
    padding-top: max(12px, env(safe-area-inset-top, 24px)) !important;
    min-height: calc(56px + max(0px, env(safe-area-inset-top, 20px))) !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   GLOBAL AUTOCOMPLETE TYPOGRAPHY OVERRIDE (Mobile & Desktop)
   Prevents oversized uppercase or default fonts in jQuery UI / Mobile autocomplete menus
   ========================================================================== */
.ui-autocomplete,
ul.ui-autocomplete,
ul.ui-autocomplete.ui-menu,
.ui-autocomplete.ui-menu {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13.5px !important;
  max-height: 280px !important;
  max-width: calc(100vw - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  border: 1px solid #c8d0da !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(31, 36, 48, 0.16) !important;
  z-index: 99999 !important;
  padding: 6px 0 !important;
  box-sizing: border-box !important;
}

.ui-autocomplete li,
.ui-autocomplete .ui-menu-item,
ul.ui-autocomplete li,
ul.ui-autocomplete .ui-menu-item {
  font-size: 13.5px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}

.ui-autocomplete li + li,
.ui-autocomplete .ui-menu-item + .ui-menu-item {
  border-top: 1px solid #f0f2f5 !important;
}

.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete li a,
.ui-autocomplete li div,
ul.ui-autocomplete .ui-menu-item-wrapper,
ul.ui-autocomplete .ui-menu-item a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 10px 14px !important;
  color: #1f2430 !important;
  display: block !important;
  cursor: pointer !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item a.ui-state-active,
.ui-autocomplete .ui-menu-item a.ui-state-focus,
ul.ui-autocomplete .ui-menu-item-wrapper:hover,
ul.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: #eaf2ff !important;
  color: #1a4a80 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   IN-APP PDF VIEWER MODAL (Capacitor / Mobile & Desktop)
   ========================================================================== */
.km-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.km-pdf-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.km-pdf-dialog {
  position: relative;
  z-index: 1;
  width: 94vw;
  max-width: 980px;
  height: 90vh;
  max-height: 900px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.km-pdf-header {
  height: 52px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.km-pdf-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-pdf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.km-pdf-btn-close {
  background: #f1f5f9;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.km-pdf-btn-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.km-pdf-body {
  position: relative;
  flex: 1;
  background: #525659;
  overflow: hidden;
}

.km-pdf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  z-index: 2;
}

.km-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #ffffff;
}

@media (max-width: 640px) {
  .km-pdf-dialog {
    width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .km-pdf-header {
    height: 48px;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(48px + env(safe-area-inset-top, 0px));
  }
}