* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}

/* Login view */
.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.login-box {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  width: 320px;
  text-align: center;
}

.login-logo {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.login-box h1 {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #266e5a;
}

.login-box form {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.login-box label {
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 4px;
  color: #444;
}

.login-box input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.login-box button {
  margin-top: 20px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: #266e5a;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.login-box button:hover {
  background: #1d5847;
}

.login-error {
  margin-top: 10px;
  color: #c0392b;
  font-size: 13px;
}

/* App shell */
.app-view {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 160px;
  background: #1f2a6e;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.sidebar-nav button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #cfd8dc;
  text-align: left;
  padding: 12px 20px;
  font-size: 18px;
  cursor: pointer;
}

.sidebar-nav button:hover,
.sidebar-nav button.active {
  background: #266e5a;
  color: #fff;
  border-radius: 8px;
}

.nav-section-title {
  padding: 16px 20px 6px 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #78909c;
}

.sidebar-nav button.nav-item-sub {
  padding-left: calc(20px + 1em);
}

.main-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: 56px;
  background: #aae;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px;
  flex-shrink: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar button {
  padding: 8px 14px;
  border: none;
  border-radius: 1em;
  background: #265a8e;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #367aae;
  font-size: 18px;
}

.topbar button.danger {
  background: #c0392b;
}

.topbar button:disabled {
  opacity: 0.5;
  cursor: default;
}

.topbar button.scheduling-nav-btn {
  padding: 0;
  font-size: 24px;
  font-weight: bold;
}

.topbar-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1f2a6e;
}

.topbar-fallback-icon {
  width: 28px;
  height: 28px;
}

.topbar-fallback-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 1em;
}

.scheduling-header select {
  font-size: 16px;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

/* Topbar print button (Giorno/Settimana only, see loadView) - plain icon button,
   same footprint as the account menu button next to it. Styled via the #print-button
   ID (not just the .topbar-print-button class) because ".topbar button" combines an
   element + class selector and so is MORE specific than a single class alone - an ID
   selector is the simple way to reliably win regardless of that. */
#print-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #eef1f0;
  color: #333;
  border-radius: 4px;
  flex-shrink: 0;
}

#print-button:hover {
  background: #e0e5e3;
}

/* Account menu (top-right) */
.account-menu {
  position: relative;
}

.account-menu-button {
  background: #eef1f0;
  color: #333;
}

.account-menu-button::after {
  content: " \25BE";
}

.account-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 250px;
  z-index: 500;
  margin-top: 4px;
  margin-right: -10px;
  background-color: #265a8e;
  border-radius: 8px;
  padding: 12px 8px;
}

.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
}

.account-menu-item:hover {
  background: #367aae;
}

.account-menu-item.active-toggle {
  color: #beca26;
  font-weight: bold;
}

.account-menu-item.active-toggle::before {
  content: '✓ ';
}

.account-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 8px 4px;
}

/* Utenti: list */
.filter-input {
  width: 100%;
  max-width: 320px;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}

.data-table th {
  font-size: 12px;
  text-transform: uppercase;
  color: #78909c;
}

.data-table tbody tr {
  cursor: pointer;
}

.data-table tbody tr:hover {
  background: #f4f4f4;
}

.pacchetti-therapy-type-row {
  cursor: default;
  color: #666;
}

.data-table tbody tr.pacchetti-therapy-type-row:hover {
  background: none;
}

.data-table tr.removed-row {
  color: #999;
  font-style: italic;
}

/* Pazienti: filter box, sortable headers, pagination */
.patients-filter-wrap {
  position: relative;
  max-width: 380px;
  margin-bottom: 14px;
}

.patients-filter-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.patients-filter-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #78909c;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}

.patients-filter-clear:hover {
  color: #c0392b;
}

/* Pazienti: Stato column (patient-level therapy status) with its filter
   dropdown in the header cell. */
.patients-status-filter {
  margin-left: 6px;
  font-size: 12px;
  padding: 1px 4px;
}

.patients-status-cell {
  white-space: nowrap;
}

.patients-sort-header {
  cursor: pointer;
  user-select: none;
}

.patients-sort-header.sort-asc::after {
  content: ' \25B2';
}

.patients-sort-header.sort-desc::after {
  content: ' \25BC';
}

.patients-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.patients-page-info {
  font-size: 13px;
  color: #444;
}

/* Utenti: form */
.form-box {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  max-width: 98%;
}

.form-box.form-box-wide {
  max-width: 1400px;
}

.form-box.form-box-grid {
  overflow: auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  background: #fff;
  border-radius: 8px;
  max-width: 960px;
  margin: 1em;
}

.form-box.form-box-grid.form-box-wide {
  max-width: 1400px;
}

.form-box-full-row {
  grid-column: 1 / -1;
}

.form-box label {
  display: block;
  font-size: 13px;
  margin-top: 14px;
  margin-bottom: 4px;
  color: #444;
}

.form-box input,
.form-box select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-box input[type="color"] {
  padding: 1px;
}

.form-box .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.form-box .checkbox-row input {
  width: auto;
}

.readonly-banner {
  background: #fdf3d0;
  color: #7a5b00;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 13px;
}

.vacation-monthday-row {
  display: flex;
  gap: 10px;
}

.vacation-monthday-row select {
  width: auto;
  flex: 1;
}

/* Impostazioni: only the Valore cell is interactive, auto-saves on change */
.setting-value-input {
  width: 100px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
}

.save-success {
  border-color: #266e5a !important;
  box-shadow: 0 0 0 2px rgba(38, 110, 90, 0.25);
}

.save-error {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25);
}

.form-error {
  display: none;
  color: #c0392b;
  font-size: 13px;
  margin-top: 6px;
}

.field-wrap {
  position: relative;
}

.patient-document-wrap {
  margin: 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.patient-document-icon {
  width: 48px;
  height: 48px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px;
}

.patient-document-icon:hover {
  border-color: #266e5a;
}

.patient-document-link {
  cursor: pointer;
  color: #266e5a;
  font-weight: bold;
}

.patient-document-link:hover {
  text-decoration: underline;
}

/* Pazienti: Terapia section (summary display + inline Aggiungi/Modifica editor) */
.patient-therapy-section {
  margin-top: 14px;
}

.therapy-summary {
  background: #f4f4f4;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.therapy-summary-name {
  font-weight: bold;
  margin-bottom: 6px;
}

.therapy-parts-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
}

.therapy-buttons-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* One block per current therapy - more than one when a renewal ("Rinnova
   terapia") runs in parallel with the previous therapy. */
.therapy-block + .therapy-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}

.therapy-parts-editor {
  margin: 10px 0;
}

.therapy-part-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.therapy-part-row select {
  flex: 2;
}

.therapy-part-row input[type="number"] {
  flex: 1;
  width: auto;
}

.therapy-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.therapy-buttons-row button,
.therapy-actions-row button,
.therapy-foglio-firma-row button {
  padding: 8px 14px;
  border: none;
  border-radius: 1em;
  background: #265a8e;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.therapy-buttons-row button.danger,
.therapy-actions-row button.danger {
  background: #c0392b;
}

.therapy-buttons-row button:disabled,
.therapy-actions-row button:disabled {
  opacity: 0.5;
  cursor: default;
}

.required-marker::after {
  content: '*';
  color: #c0392b;
  position: absolute;
  top: 6px;
  right: -10px;
  font-size: 24px;
}

/* Utenti: therapist weekly availability grid */
.availability-section {
  max-width: none;
}

.availability-not-yet-note {
  color: #78909c;
  font-size: 13px;
  font-style: italic;
  margin-top: 6px;
}

.availability-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 6px;
  overflow-x: auto;
}

.availability-column {
  flex: 1 1 240px;
  min-width: 0;
  background: #f4f4f4;
  border-radius: 6px;
  padding: 10px;
}

.availability-column-header {
  font-size: 13px;
  font-weight: bold;
  color: #444;
  margin-bottom: 8px;
  text-align: center;
}

.availability-slot {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 6px;
  background: #fff;
  border-radius: 4px;
  padding: 6px;
}

.availability-slot-times {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.availability-time-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  min-width: 52px;
}

.availability-time-box:hover {
  border-color: #266e5a;
}

.time-picker-popup {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  max-height: 280px;
  overflow-y: auto;
  min-width: 70px;
}

.time-picker-row {
  padding: 6px 12px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

.time-picker-row:hover {
  background: #e8f0ee;
}

.time-picker-row.selected {
  background: #266e5a;
  color: #fff;
}

.availability-remove {
  border: none;
  background: #c0392b;
  color: #fff;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.availability-add-btn {
  width: 100%;
  border: none;
  background: #266e5a;
  color: #fff;
  border-radius: 4px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 14px;
}

/* Modal (confirmations, etc.): 2/3 width and height, centered, actions at bottom */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  width: 50vw;
  height: 66.6667vh;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-body {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.modal-body input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 10px;
}

.modal-error {
  color: #c0392b;
  margin-top: 8px;
  font-size: 13px;
}

.modal-actions {
  padding: 15px 20px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.modal-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #266e5a;
  color: #fff;
}

.modal-actions button.danger {
  background: #c0392b;
}

.modal-actions button.modal-btn-left {
  margin-right: auto;
}

/* Slot detail popup (Giorno/Settimana) - therapy name on a band colored from
   TherapyType.Color, then date/time, patient (bold), therapist/Reparto. */
.slot-detail-band {
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.slot-detail-therapy-name {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.slot-detail-datetime {
  color: #555;
  margin-bottom: 10px;
}

.slot-detail-patient-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.slot-detail-patient-link {
  font-weight: bold;
  font-size: 24px;
  text-decoration: underline;
  color: #266e5a;
  cursor: pointer;
}

.slot-detail-patient-link:hover {
  color: #1a4d40;
}

.slot-detail-ga-row {
  margin: 8px 0;
}

.patient-status-wrapper {
  padding: 20px;
  max-width: 700px;
}

.patient-status-phone {
  color: #555;
  margin-bottom: 16px;
}

.patient-status-list {
  margin: 0;
  padding-left: 20px;
}

/* Space above the phone and the therapist lines (CPU). */
.slot-detail-phone {
  color: #555;
  margin-top: 1em;
}

.slot-detail-therapist {
  color: #555;
  margin: 1em 0;
}

.slot-detail-document-btn {
  display: block;
  margin-top: 12px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background: #266e5a;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.slot-detail-document-btn:hover {
  background: #1a4d40;
}

/* "Cambia terapista" sub-popup - each therapist shown as a bordered, button-like
   row rather than a plain list line. */
.change-therapist-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.change-therapist-columns {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.change-therapist-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.change-therapist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}

.change-therapist-icon {
  font-weight: bold;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.change-therapist-icon-green {
  color: #266e5a;
}

.change-therapist-icon-yellow {
  color: #b8860b;
}

.change-therapist-icon-red {
  color: #c0392b;
}

.change-therapist-label {
  flex: 1;
}

.change-therapist-action {
  flex-shrink: 0;
}

.change-therapist-side-panel {
  width: 240px;
  flex-shrink: 0;
}

.slot-details-line {
  cursor: pointer;
  padding: 4px 0;
}

.slot-details-line:hover {
  background: #f0f4f8;
}

/* "Stato" line inside the slot detail popup - label + dropdown, applies the
   status change immediately on selection (no separate Apply button). */
.slot-detail-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.slot-detail-status-row label {
  font-weight: bold;
  color: #555;
}

.slot-detail-status-row select {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* Capacity debug popup (Giorno/Settimana, Admin only) */
.capacity-debug-rates {
  color: #777;
  font-size: 13px;
  margin-top: -4px;
}

.capacity-debug-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}

.capacity-debug-table th,
.capacity-debug-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid #eee;
}

.capacity-debug-counted {
  color: #1e7a3d;
}

.capacity-debug-excluded {
  color: #aaa;
}

/* Giorno / Settimana scheduling scaffolding */
.scheduling-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Wraps the therapist/Reparto select + patient autocomplete (buildEntitySelector) as
   a single flex item inside .scheduling-header, preserving the same 12px gap between
   them that a flat list of direct children would have had. */
.entity-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scheduling-therapist-select {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.pianificazione-showalso-label {
  font-size: 14px;
  color: #444;
  white-space: nowrap;
}

.scheduling-nav-btn {
  border: none;
  background: #266e5a;
  color: #fff;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
}

.scheduling-date-label {
  font-weight: bold;
  min-width: 90px;
  font-size: 16px;
  text-align: center;
}

.scheduling-empty {
  color: #78909c;
  font-style: italic;
  padding: 20px;
}

/* Stampa (print preview): the entity name + date/week that used to live in the normal
   Giorno/Settimana topbar header now lives here instead, inside #content, since the
   topbar itself is hidden entirely once actually printing (see @media print below). */
.stampa-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stampa-header {
  margin-bottom: 16px;
}

.stampa-header-entity {
  font-size: 20px;
  font-weight: bold;
  color: #1f2a6e;
}

.stampa-header-date {
  font-size: 15px;
  color: #555;
  margin-top: 2px;
}

/* Piano's own header (separate from .stampa-header above, see buildPianoHeader) -
   title on the left, Centro Minerva logo + caption on the right. */
.piano-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.piano-header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.piano-header-logo img {
  height: 60px;
  width: auto;
}

.piano-header-logo-caption {
  font-size: 12px;
  font-weight: bold;
  color: #1f2a6e;
  margin-top: 2px;
}

/* Piano (patient plan): a plain report table, not a time grid like Giorno/Settimana -
   no fixed row heights or fit-to-page sizing, it just reads/prints as an ordinary list. */
.piano-table {
  border-collapse: collapse;
  width: 100%;
}

.piano-table th,
.piano-table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: left;
  font-size: 14px;
}

.piano-table thead th {
  background: #f4f4f4;
  font-weight: bold;
}

.piano-table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* Avvisi: alert card grid */
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.alert-card {
  background: #fff;
  border-left: 5px solid #c0392b;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.alert-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.alert-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.alert-card-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.alert-card-title {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-card-line1,
.alert-card-line2 {
  color: #555;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-card-line2 {
  margin-bottom: 10px;
}

.alert-card-actions {
  display: flex;
  gap: 8px;
}

.alert-card-go-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 4px;
  background: #266e5a;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}

.alert-card-go-btn:hover {
  background: #1e5847;
}

.scheduling-grid {
  border-collapse: collapse;
  width: 100%;
}

.scheduling-grid th,
.scheduling-grid td {
  border: 1px solid #8da7f1;
  padding: 4px 8px;
  font-size: 12px;
  text-align: center;
}

.scheduling-grid thead th {
  background: #f4f4f4;
}

.scheduling-time-cell {
  background: #fafafa;
  font-weight: bold;
  white-space: nowrap;
  width: 10em;
}

.vacation-overlay {
  background: #eba3a3;
  color: #a13a3a;
  font-weight: bold;
  vertical-align: middle;
}

.availability-overlay {
  background: #edb2b2;
  vertical-align: middle;
}

/* Empty cell where the therapist has an active per-window override (not
   "Normale") on this time slot - Giorno/Settimana (CPU's call). Same style
   used in Pianifica for a category mismatch against the therapist's effective
   area at that moment. */
.operating-area-override-overlay {
  background-color: #ffeeb0;
  background-image: radial-gradient(#f91 30%, transparent 50%);
  background-size: 12px 10px;
  vertical-align: middle;
}

/* Pianificazione: week-view cell states */
.pianificazione-progress {
  font-size: 14px;
  color: #444;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #e2e4f4;
  padding: 8px 8px;
  font-weight: bold;
}

.conflict-warning {
  font-size: 24px;
  font-weight: bold;
  color: red;
}

.pianificazione-drop-highlight {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid #1976D2;
  pointer-events: none;
  z-index: 5;
}

/* Pianificazione: fixed equal-width columns, fixed row height, no cell padding -
   TDs are pure grid structure now; actual session content is drawn via absolutely
   positioned overlay divs injected into a session's starting row's <td> (which is
   why every td needs position:relative - the div anchors to its own specific cell
   but visually spans down over subsequent rows, since overflow is left visible). */
.pianificazione-grid {
  table-layout: fixed;
}

.pianificazione-grid th:first-child {
  width: 10em;
}

.pianificazione-grid th,
.pianificazione-grid td {
  box-sizing: border-box;
  padding: 0;
  height: 24px;
}

.pianificazione-grid td {
  position: relative;
}

.pianificazione-grid .scheduling-time-cell {
  padding: 0 8px;
}

.pianificazione-empty-cell {
  cursor: pointer;
}

.pianificazione-empty-cell:hover {
  background: #ebacd8;
}

.pianificazione-today-header {
  background: #fff59d !important;
}

.pianificazione-today-col {
  background: #fffde7;
}

.pianificazione-empty-cell.pianificazione-today-col:hover {
  background: #ebacd8;
}

.pianificazione-cell-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black;
}

/* One overlay div per session, anchored (position:absolute) within its starting
   row's <td>, height computed in JS as rows * 24px so it visually spans forward
   over subsequent rows regardless of how many the session's duration covers. */
.pianificazione-session-overlay {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 4px;
  padding: 1px 3px;
  font-size: 16px;
  z-index: 2;
  cursor: pointer;
  text-align: left;
  border: 1px solid #01a;
  border-left: 3px solid #517;
  /* JS sets --group-index/--group-count only - the gap itself lives here so
     N/L/P can vary or drop it independently (CPU: can't compute this in JS
     without knowing the active orientation). */
  --overlay-gap: 2em;
  left: calc((100% - var(--overlay-gap)) * var(--group-index, 0) / var(--group-count, 1));
  width: calc((100% - var(--overlay-gap)) / var(--group-count, 1));
}

/* Presenze + Giorno only (CPU's call - Settimana keeps its own separate, still-
   TBD rules and its old inline-pixel height). Replaces the old JS-computed
   `span * rowHeightPx - 1` inline height so N/L/P can each redefine it. Audit
   mode only ever applies in N (CPU's call), hence no L/P -audit variants. */
.pianificazione-session-overlay-span-1 { height: 31px; }
.pianificazione-session-overlay-span-2 { height: 63px; }
.pianificazione-session-overlay-span-3 { height: 95px; }
.pianificazione-session-overlay-span-4 { height: 127px; }

.pianificazione-session-overlay-span-1-audit { height: 63px; }
.pianificazione-session-overlay-span-2-audit { height: 127px; }
.pianificazione-session-overlay-span-3-audit { height: 191px; }
.pianificazione-session-overlay-span-4-audit { height: 255px; }

/* Shared fixed row height for Presenze + Giorno cells (CPU's call: 32px,
   replacing the old JS-computed inline height). Settimana is NOT covered by
   this class - it keeps its own separate rules. */
/* Settimana's own overlay heights (screen only - print keeps its dynamic inline
   value). Same 24px-per-slot math as before, just moved out of inline JS -
   still TBD per CPU, will get its own L/P rules separately. */
.pianificazione-session-overlay-settimana-span-1 { height: 23px; }
.pianificazione-session-overlay-settimana-span-2 { height: 47px; }
.pianificazione-session-overlay-settimana-span-3 { height: 71px; }
.pianificazione-session-overlay-settimana-span-4 { height: 95px; }

.pianificazione-grid td.presenze-giorno-cell {
  height: 32px;
}

/* Settimana's own row height (screen only - Stampa/print still passes an
   explicit dynamic value via inline style, since a fixed class can't vary per
   print job). Same 24px value as before, just moved out of inline JS - still
   TBD per CPU, will get its own L/P rules separately from Presenze/Giorno. */
.settimana-cell {
  height: 24px;
}

.pianificazione-occupied-other {
  background: #ffe0b2;
  color: #8a5a00;
}

.pianificazione-occupied-same {
  background: #b2ebf2;
  color: #00646d;
  border: 1px solid #01a;
  border-left: 3px solid #517;
}

.pianificazione-draft {
  background: #a5d6a7;
}

.pianificazione-ripianifica-draft {
  outline: 3px solid #1976D2;
  outline-offset: -3px;
  box-shadow: 0 0 8px rgba(25, 118, 210, 0.6);
  cursor: grab;
  z-index: 6;
}

.pianificazione-conflict {
  background: #ffb3b3;
  border: 2px dashed #c0392b;
}

.pianificazione-showalso {
  background: repeating-linear-gradient(
    45deg,
    #e0e0e0,
    #e0e0e0 6px,
    #ececec 6px,
    #ececec 12px
  );
  color: #555;
  border: 1px dashed #9e9e9e;
  cursor: default;
}

.pianificazione-draft .availability-remove,
.pianificazione-conflict .availability-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  font-size: 10px;
  z-index: 3;
}

.pianificazione-rimpiazza-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1f2a6e;
  font-size: 14px;
  cursor: pointer;
}

.pianificazione-rimpiazza-row.disabled {
  opacity: 0.5;
  cursor: default;
}

.pianificazione-week-fade {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pianificazione-week-fade.pianificazione-week-fade-in {
  opacity: 1;
}

/* Pianificazione Reparto: capacity background - white (no class) means plenty of
   room, yellow = near capacity (reuses the old "orange" bucket's color), red = hard
   block (no availability at all). */
.pianificazione-capacity-yellow {
  background: #ffcc80;
}

.pianificazione-capacity-red {
  background: #ef9a9a;
  cursor: not-allowed;
}

/* Reparto cell: a small always-visible count badge in the corner (clickable to open
   the detail popup), draft overlays are constrained to calc(100% - 2em) width in JS
   so they never overlap this badge's reserved corner. */
.pianificazione-reparto-count {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.6em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #265a8e;
  cursor: pointer;
  z-index: 3;
  border-left: 1px solid #ddd;
}

.pianificazione-reparto-count:hover {
  background: #dce7f5;
}

.giorno-settimana-cell {
  cursor: default;
}

/* Presenze "Reparto" column (CPU's call): one "Fatto Reparto" toggle per
   15-minute row, in its own column so session boxes never cover it. Purely a
   log, no capacity effect. Disabled only where an own session is Done. */
.presenze-reparto-col,
.presenze-reparto-toggle-cell {
  width: 110px;
  text-align: center;
}

.presenze-reparto-toggle-cell {
  padding: 0 4px;
}

.presenze-reparto-toggle {
  display: inline-block;
  width: 100%;
  font-size: 11px;
  color: #b8a9d6;
  border: 1px dashed #d1c4e9;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.presenze-reparto-toggle:hover {
  background: #ede7f6;
}

.presenze-reparto-toggle.active {
  background: #d1c4e9;
  color: #4a148c;
  font-weight: bold;
  border: 1px solid #5e35b1;
}

.presenze-reparto-toggle.disabled {
  visibility: hidden;
  cursor: default;
}

/* Presenze quick "Vedi specialistica" button, in the session box's corner. */
/* Full height of the session box and wide enough to hit easily on a tablet (CPU). */
.presenze-doc-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  width: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #888;
  border-radius: 3px;
  cursor: pointer;
}

/* Keep the patient name clear of the button (Presenze and Giorno). */
.presenze-overlay:has(.presenze-doc-btn),
.pianificazione-session-overlay.has-doc-btn {
  padding-right: 48px;
}

.giorno-settimana-cell-dragover {
  background: #d7e8f7 !important;
  outline: 2px solid #266e5a;
  outline-offset: -2px;
}

.pianificazione-reparto-cell {
  cursor: pointer;
}

.pianificazione-reparto-cell:hover {
  filter: brightness(0.97);
}

.pianificazione-capacity-red.pianificazione-reparto-cell {
  cursor: not-allowed;
}

.pianificazione-capacity-red.pianificazione-reparto-cell:hover {
  filter: none;
}

/* Pianificazione Mixed: Reparto capacity background stays purely informational
   (it never blocks Heavy placement) - a cell is only actually unclickable here
   when it falls outside the selected Palestra therapist's own availability. */
.pianificazione-mixed-unavailable {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Heavy vs Light overlay boxes are visually distinguished (light gets a dashed
   border) even though both use the same draft/conflict background colors. */
.pianificazione-mixed-light-overlay {
  border: 1px dashed rgba(0, 0, 0, 0.35);
}

.giorno-vacation-label {
  position: absolute;
  left: 4px;
  top: 2px;
  font-size: 28px;
  font-weight: bold;
  color: #a13a3a;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 2em);
}

/* Pianificazione: edge-of-content gradient overlay bars for drag-hover week
   navigation. Positioned dynamically via JS (getBoundingClientRect), invisible
   until a drag's pointer enters their region, pointer-events:none so a drop
   there passes straight through to the real grid cell underneath. */
.pianificazione-edge-overlay {
  position: fixed;
  width: 5em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1000;
}

.pianificazione-edge-overlay.pianificazione-edge-overlay-visible {
  opacity: 1;
}

.pianificazione-edge-overlay-left {
  background: linear-gradient(90deg, rgba(12, 68, 237, 1) 0%, rgba(7, 238, 242, 0.1) 100%);
}

.pianificazione-edge-overlay-right {
  background: linear-gradient(270deg, rgba(12, 68, 237, 1) 0%, rgba(7, 238, 242, 0.1) 100%);
}

/* Three responsive tiers (CPU's naming): N = normal/base rules (no media
   query, defined inline with each selector elsewhere in this file), L = max
   1300px landscape, P = portrait. Being rebuilt selector by selector as CPU
   confirms real values against the actual tablets - not yet complete.
   These blocks are placed at the very end of the file on purpose: several
   selectors here also have an unconditional base rule elsewhere with equal
   specificity - with equal specificity the LAST rule in source order wins
   regardless of the media query, so L/P have to stay last or the base rule
   silently overrides them even while the media condition is true. */

@media print {
  @page {
    margin: 0;
  }

  /* Fixed print sizes (CPU's call) - the dynamic per-print-job font-size
     computation that used to fight with this has been removed entirely, not
     just out-specificity'd - this is now the only thing setting these sizes. */
  .stampa-sized-grid .pianificazione-session-overlay,
  .stampa-sized-grid .pianificazione-cell-label {
    font-size: 24px;
  }

  .stampa-sized-grid .scheduling-grid th,
  .stampa-sized-grid .scheduling-grid td {
    font-size: 24px;
  }

  .stampa-sized-grid .pianificazione-reparto-count {
    font-size: 24px;
  }

  .sidebar,
  .topbar {
    display: none !important;
  }

  /* The app shell is a 100vh flex box on screen - printed as-is it clipped
     everything after the first page (Genera piano longer than one page showed
     only page 1). Let the whole chain grow to its content when printing. */
  .app-view,
  .main-page {
    display: block;
    height: auto;
    overflow: visible;
  }

  .main-page {
    margin: 0;
  }

  .content {
    padding: 1.2cm;
    overflow: visible;
    height: auto;
  }

  /* Strip every colored background from the grid - a printed copy should be plain
     black-on-white: borders, text and labels stay, fills go transparent/white. */
  .scheduling-grid thead th,
  .scheduling-time-cell,
  .pianificazione-capacity-yellow,
  .pianificazione-capacity-red,
  .vacation-overlay,
  .availability-overlay {
    background: none !important;
  }

  .vacation-overlay,
  .giorno-vacation-label,
  .pianificazione-reparto-count {
    color: #000 !important;
  }

  /* The Reparto-colored session boxes get their background/border set as an inline
     style by JS (buildScheduleGridTable) - only !important can override an inline
     style, same reasoning as the existing capacity-color/vacation-overlay cascade
     quirk documented elsewhere in this file. */
  .pianificazione-session-overlay {
    background: none !important;
    border: 2px solid #000 !important;
    color: #000 !important;
  }

  .scheduling-grid th,
  .scheduling-grid td {
    border-color: #000;
    border-width: 2px;
  }

  /* Piano's table only ever had light zebra-striping/header shading, not the same
     status colors as the Giorno/Settimana grid - stripped anyway for consistency
     with "no color at all" when printed. */
  .piano-table th,
  .piano-table td {
    border-color: #000;
  }

  .piano-table thead th,
  .piano-table tbody tr:nth-child(even) {
    background: none;
  }
}

/* Pacchetti */
.pacchetto-scope-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.pacchetto-scope-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.pacchetto-grid input,
.pacchetto-grid select {
  width: 100%;
  box-sizing: border-box;
}

.pacchetto-item-full-price,
.pacchetto-item-final-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pacchetto-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
}


/* Presenze */
.presenze-overlay {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.presenze-overlay .pianificazione-cell-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presenze-audit-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

.alert-popup-jump-btn {
  background: none;
  border: none;
  color: #1976D2;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
}

/* Mese */
.mese-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.mese-table th {
  text-align: center;
  border: 2px solid #888;
  padding: 6px;
}

.mese-cell {
  vertical-align: top;
  height: 110px;
  padding: 8px;
  border: 2px solid #888;
  cursor: pointer;
}

.mese-cell:hover {
  outline: 3px solid #266e5a;
  outline-offset: -3px;
}

.mese-cell-outside {
  background: #f7f7f7;
  cursor: default;
}

.mese-cell-outside:hover {
  outline: none;
}

.mese-cell-daynum {
  font-weight: bold;
  color: #333;
  font-size: 32px;
  margin-bottom: 6px;
}

.mese-cell-vacation-bg {
  background: #eba3a3;
}

.mese-cell-vacation {
  font-size: 16px;
  font-weight: bold;
  color: #a13a3a;
  margin-bottom: 6px;
}

.mese-cell-counts {
  font-size: 24px;
  color: #1a1a1a;
  font-weight: bold;
}

.form-box .PacketTypeRadio {
  width: 2em;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.pacchetto-confirm-costs {
  background: #f4f4f4;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.pacchetto-confirm-final-cost,
.pacchetto-final-cost {
  font-weight: bold;
  color: #1e5847;
}

.pacchetto-search-name-row {
  display: flex;
  gap: 10px;
}

.pacchetto-search-name-row input {
  flex: 1;
}

/* Gestisci assenza */
.gestisci-assenza-table {
  table-layout: auto;
  width: auto;
}

.gestisci-assenza-table th,
.gestisci-assenza-table td {
  white-space: nowrap;
  padding: 6px 14px 6px 0;
  border-bottom: 1px solid #eee;
}

.gestisci-assenza-therapist-row td {
  font-weight: bold;
  font-size: 16px;
  color: #266e5a;
  background: #f4f4f4;
  border-bottom: 2px solid #266e5a;
  padding-top: 12px;
}

.gestisci-assenza-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Welcome overlay - shown once per real page load, see showApp() */
.welcome-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.welcome-box {
  background: #fff;
  border-radius: 10px;
  padding: 40px 50px;
  text-align: center;
  max-width: 30vw;
}

.welcome-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
}

.welcome-title {
  margin: 0 0 4px;
  color: #266e5a;
}

/* Build date under the title (from app.js's ?v= stamp, see getBuildDateLabel). */
.welcome-build-date {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.welcome-greeting {
  font-size: 48px;
  font-weight: bold;
  text-transform: capitalize;
  color: #1a1a8a;
  margin-bottom: 2em;
  text-shadow: 3px 1px 4px #1a3afa;
}

.welcome-actions {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.HelloButtons {
  padding: 8px 14px;
  border: none;
  border-radius: 1em;
  background: #265a8e;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #367aae;
  font-size: 18px;
}

.scheduling-date-label-clickable {
  cursor: pointer;
  /* Same width for every date (CPU): fits the longest, "31 Gen - 6 Feb"
     (6em measured), with a small margin. */
  display: inline-block;
  width: 7em;
  white-space: nowrap;
}

.quick-date-picker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  font-weight: bold;
}

.quick-date-picker-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.quick-date-picker-cell {
  height: 40px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ccc;
}

.quick-date-picker-cell:hover {
  background: #f0f0f0;
}

.quick-date-picker-cell.mese-cell-outside {
  cursor: default;
}

.quick-date-picker-cell.mese-cell-outside:hover {
  background: none;
}

.alerts-grid-important {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #eee;
}

.alert-card-important {
  border-top: 1px solid red;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  border-left-width: 5px;
  border-left-style: solid;
}

.therapist-halfday-preview-docked {
  background: #fafafa;
  border: 1px solid #ccc;
  border-radius: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}

.therapist-halfday-preview-title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 6px;
  text-align: center;
}

.therapist-halfday-row {
  font-size: 11px;
  padding: 1px 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 14px;
}

.therapist-halfday-row-busy {
  background: #eee;
  color: #333;
  border-radius: 3px;
}

.therapist-halfday-row-original {
  background: #d0e8ff;
  font-weight: bold;
}

.therapist-halfday-row-free {
  cursor: pointer;
  color: #266e5a;
}

.therapist-halfday-row-free:hover {
  background: #e0f2ea;
  border-radius: 3px;
}

.therapist-halfday-row-outside {
  color: #ccc;
}

.foglio-firma-badges {
  display: inline;
  gap: 6px;
  float: right;
}

.foglio-firma-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: bold;
  white-space: nowrap;
}

.foglio-firma-badge-first {
  background: #d0e8ff;
  color: #1966E2;
}

.foglio-firma-badge-last {
  background: #ffe0b2;
  color: #b8860b;
}

.foglio-firma-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.foglio-firma-cell {
  position: relative;
  border: 1px solid #a0b0fd;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.foglio-firma-checkbox {
  position: absolute;
  top: 6px;
  right: 8px;
  cursor: pointer;
}

.foglio-firma-cell-fatto {
  opacity: 0.45;
}

.foglio-firma-tutto-fatto {
  font-size: 40px;
  color: #266e5a;
  text-align: center;
  margin: 20px 0;
}

.foglio-firma-cell:hover {
  background: #f4f4f4;
  border-color: #266e5a;
}

.foglio-firma-cell-name {
  font-weight: bold;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foglio-firma-cell-therapies,
.foglio-firma-cell-therapists,
.foglio-firma-cell-date {
  font-size: 12px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foglio-firma-cell-therapists {
  font-style: italic;
}

.therapy-foglio-firma-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1em;
  padding-top: 10px;
  border-top: 1px solid #eee;
  margin-bottom: 2em;
}

.therapy-foglio-firma-label {
  font-weight: 500;
}

.patients-miei-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 16px;
  font-size: 14px;
  cursor: pointer;
}


@media (max-width: 1300px) and (orientation: landscape) {
  .giorno-vacation-label {
    font-size: 42px;
  }

  .topbar {
    padding: 0;
  }

  .topbar-left {
    gap: 8px;
  }

  .scheduling-header {
    gap: 8px;
  }

  .topbar-fallback-icon {
    display: none;
  }

  .topbar-fallback-title {
    margin-left: 0.5em;
  }

  .topbar button {
    font-size: 14px;
  }

  .topbar button.scheduling-nav-btn {
    font-size: 20px;
  }

  .pianificazione-rimpiazza-row {
    font-size: 10px;
  }
}

/* "Fatto reparto" / "Specialistiche" checkboxes right after the user-name
   button (Presenze display options). Landscape: inline next to the button. */
.presenze-options {
  display: inline-flex;
  gap: 10px;
  margin-left: 10px;
  font-size: 14px;
  vertical-align: middle;
}

.presenze-cerca-btn {
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
}

.presenze-options label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: normal;
  white-space: nowrap;
  cursor: pointer;
}

@media (orientation: portrait) {
  /* Portrait: stacked under the user-name button, on the dark sidebar. */
  .presenze-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 0 4px;
    color: #fff;
  }

  .foglio-firma-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 20px;
  }

  .foglio-firma-cell-name {
    font-weight: bold;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .foglio-firma-cell-therapies,
  .foglio-firma-cell-therapists,
  .foglio-firma-cell-date {
    font-size: 12px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: right;
  }

  .pianificazione-reparto-count {
    display: none;
  }

  /* Bumps every un-styled modal element by ~10px via inheritance (default body
     text is ~16px) - the slot-detail-* classes and quick-date-picker already
     have their own explicit P overrides, so this doesn't touch those. CPU:
     "all items inside the modal body need a bigger font size... increase all
     by 10 unless already done." .therapist-halfday-row is deliberately left
     alone - it's a dense mini-schedule, and +10 there would make it unreadable/
     overflow rather than just bigger; flagging this as an exception rather than
     applying the rule mechanically. */
  #modal-body {
    font-size: 26px;
  }

  .modal-body input {
    font-size: 24px;
  }

  .modal-error {
    font-size: 23px;
  }

  .pianificazione-session-overlay {
    --overlay-gap: 0px;
  }

  .pianificazione-session-overlay-settimana-span-1 { height: 33px; }
  .pianificazione-session-overlay-settimana-span-2 { height: 70px; }
  .pianificazione-session-overlay-settimana-span-3 { height: 111px; }
  .pianificazione-session-overlay-settimana-span-4 { height: 148px; }

  .giorno-vacation-label {
    position: absolute;
    left: 4px;
    top: 2px;
    font-size: 42px;
    font-weight: bold;
    color: #a13a3a;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 2em);
  }

  .slot-detail-therapy-name {
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  .slot-detail-datetime {
    color: #555;
    margin-bottom: 10px;
    font-size: 30px;
  }

  .slot-detail-patient-link {
    display: block;
    font-weight: bold;
    font-size: 32px;
    text-decoration: underline;
    color: #266e5a;
    margin-bottom: 4px;
    cursor: pointer;
  }

  .slot-detail-phone {
    color: #555;
    font-size: 30px;
    margin-top: 1em;
  }

  .slot-detail-therapist {
    color: #555;
    font-size: 30px;
    margin: 1em 0;
  }

  .slot-detail-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 32px;
  }

  .slot-detail-status-row select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 32px;
  }

  .quick-date-picker-cell {
    height: 40px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    font-size: 24px;
  }

  .mese-table th {
    text-align: center;
    border: 2px solid #888;
    padding: 6px;
    font-size: 24px;
  }

  .quick-date-picker-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
    font-weight: bold;
    font-size: 32px;
  }

  .modal {
    width: 75vw;
    height: 66.6667vh;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #266e5a;
    color: #fff;
    font-size: 32px;
  }

  .pianificazione-grid td.presenze-giorno-cell {
    height: 32px;
  }

  .topbar-fallback-icon {
    display: none;
  }

  .topbar-fallback-title {
    margin-left: 0.5em;
  }

  .topbar button {
    font-size: 14px;
  }

  .topbar button.scheduling-nav-btn {
    font-size: 20px;
  }

  .sidebar-nav button {
    display: block;
    width: 100%;
    border: none;
    text-align: left;
    padding: 24px 10px;
    font-size: 20px;
    cursor: pointer;
  }

  .sidebar {
    width: 106px;
    background: #1f2a6e;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  .content {
    flex: 1;
    overflow: auto;
    padding: 20px 8px;
  }

  .topbar-fallback-title {
    display: none;
  }

  .account-menu {
    position: absolute;
    left: 2px;
    top: 22em;
  }

  .account-menu .topbar button {
    font-size: 20px;
  }

  button.account-menu-button {
    font-size: 18px;
  }

  .account-menu-dropdown {
    position: relative;
    top: 100%;
    right: 0;
    min-width: 250px;
    z-index: 500;
    margin-top: 4px;
    margin-left: 10px;
    background-color: #265a8e;
    border-radius: 8px;
    padding: 12px 8px;
  }

  .welcome-box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 50px;
    text-align: center;
    max-width: 75vw;
  }

  .HelloButtons {
    padding: 8px 14px;
    border: none;
    border-radius: 1em;
    background: #265a8e;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #367aae;
    font-size: 28px;
  }

  .scheduling-grid th,
  .scheduling-grid td {
    border: 1px solid #8da7f1;
    padding: 4px 8px;
    font-size: 20px;
    text-align: center;
  }

  .pianificazione-session-overlay {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
    padding: 1px 3px;
    font-size: 14px;
    z-index: 2;
    text-align: left;
    font-weight: bold;
  }

  .pianificazione-grid th,
  .pianificazione-grid td {
    box-sizing: border-box;
    padding: 0;
    height: 38px;
  }

  .pianificazione-grid th:first-child {
    width: 3em;
  }

  .pianificazione-grid .scheduling-time-cell {
    padding: 0 8px;
    font-size: 16px;
  }

  /* No "Cerca paziente" in portrait: it made the header wider than the screen,
     stretching the whole grid (CPU). */
  .schedule-search-input {
    display: none;
  }
}

/* Giorno/Settimana "Cerca paziente": matching sessions outlined, others dimmed. */
.schedule-search-input {
  margin-left: 12px;
  width: 180px;
}

.pianificazione-session-overlay.schedule-search-match {
  outline: 3px solid #ff9800;
  outline-offset: -1px;
  z-index: 4;
}

.pianificazione-session-overlay.schedule-search-dim {
  opacity: 0.3;
}

/* Presenze "Cerca" button (under the options checkboxes) while a highlight is on
   - pressing it clears it. */
.presenze-cerca-btn.presenze-cerca-active,
.gestisci-paziente-btn.presenze-cerca-active {
  background: #ff9800;
  border-color: #ff9800;
  color: #000;
}

/* Static UI text (captions, headers, buttons, menus, time column) can't be
   selected, so a click/drag near an input field doesn't start a text selection
   (CPU). Content text - patient names in tables, popups, inputs - stays
   selectable for copying. */
label,
th,
button,
.sidebar,
.topbar,
.account-menu,
.scheduling-header,
.scheduling-time-cell,
.pianificazione-session-overlay,
.presenze-reparto-toggle,
.alert-card-header,
.alert-card-actions,
.modal-actions {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select {
  -webkit-user-select: text;
  user-select: text;
}

/* Settimana: Reparto sessions shown only as "P n · A m" (passive / active) per
   row instead of boxes - wider than the plain count badge. */
.pianificazione-reparto-count.settimana-reparto-split-count {
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px;
  border-left: none;
  font-weight: normal;
  overflow: hidden;
  z-index: 1;
}

.settimana-reparto-split-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Terapie di <day>" popup: Reparto and Palestra in separate headed sections. */
.slot-details-section h4 {
  margin: 10px 0 4px;
  padding-bottom: 2px;
  border-bottom: 2px solid #265a8e;
}

.slot-details-section.slot-details-palestra h4 {
  border-bottom-color: #266e5a;
}

/* Patient page "Forza modifica" panel (remove/add parts of a running therapy). */
.force-edit-panel {
  border: 2px solid #c0392b;
  border-radius: 6px;
  padding: 12px 16px;
}

.force-edit-hint {
  font-size: 13px;
  color: #555;
}

.force-edit-existing,
.force-edit-new-parts {
  margin: 6px 0 12px;
}

.force-edit-part-row {
  display: block;
  font-weight: normal;
  margin: 4px 0;
}

.force-edit-buttons {
  margin-top: 14px;
}

.force-edit-delete-list {
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
}

/* Settimana "Gestisci paziente": pick list when several patients match. */
.gestisci-paziente-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.gestisci-paziente-choice {
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
}

/* Patient page per-therapy buttons: Foglio firma / Chiudi terapia in grey,
   Pagato green, Da pagare orange. */
.therapy-buttons-row button.secondary {
  background: #6c7a89;
}

.therapy-buttons-row button.therapy-pagato-btn {
  background: #e67e22;
}

.therapy-buttons-row button.therapy-pagato-btn.therapy-pagato-btn-paid {
  background: #266e5a;
}

.therapy-buttons-row .therapy-replan-part {
  width: auto;
  max-width: 140px;
  margin: 0;
  padding: 6px 4px;
}

.therapy-edit-hint {
  margin: 4px 0;
  font-size: 13px;
  color: #555;
}

/* Avvisi: type filter in the topbar. */
.avvisi-type-filter {
  max-width: 360px;
  font-size: 16px;
  padding: 6px 8px;
}

/* Gestisci assenza: "Rimuovi assenza" next to the therapist's name. */
.gestisci-assenza-therapist-row .gestisci-assenza-remove-btn {
  margin-left: 16px;
  padding: 3px 12px;
  border: none;
  border-radius: 1em;
  background: #c0392b;
  color: #fff;
  font-size: 13px;
  font-weight: normal;
  cursor: pointer;
}

/* Patient page: "Non rinnova" checkbox in the therapy button row. */
.therapy-buttons-row .therapy-non-rinnova {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
}

.therapy-buttons-row .therapy-non-rinnova input {
  width: auto;
  margin: 0;
}

/* Moved Assente session (CPU): semi-transparent, with an arrow. */
.slot-moved-absent {
  opacity: 0.45;
}

.moved-absent-icon {
  font-weight: bold;
}

/* Sposta sedute: Mon-Fri calendar of the patient's sessions. */
.sposta-patient {
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 16px;
}

.sposta-calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sposta-calendar th {
  padding: 2px;
  font-size: 13px;
  background: #e8eef5;
}

.sposta-day {
  vertical-align: top;
  /* Room for 8 sessions in a day (CPU). */
  height: 150px;
  padding: 2px;
  border: 1px solid #ccc;
  background: #fff;
}

.sposta-day-past {
  background: #f0f0f0;
}

.sposta-day-today {
  background: #fff7cc;
}

.sposta-day-dragover {
  outline: 2px solid #266e5a;
  outline-offset: -2px;
  background: #d7e8f7;
}

.sposta-day-label {
  font-size: 14px;
  color: #22a;
  font-weight: bold;
}

.sposta-chip {
  margin: 1px 0;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 15px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.sposta-chip.sposta-chip-draft {
  outline: 3px solid #e67e22;
  outline-offset: -1px;
  cursor: grab;
}

.sposta-day-other-month {
  background: #f6f6f6;
  color: #aaa;
}

.sposta-month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.sposta-month-label {
  display: inline-block;
  width: 9em;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

.sposta-month-btn {
  padding: 2px 12px;
  border: none;
  border-radius: 1em;
  background: #265a8e;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.sposta-popup-date {
  margin: 0 0 6px;
  font-weight: bold;
}

.sposta-popup-list {
  margin: 0;
  padding-left: 18px;
}

/* Small popup sized to its content (showModal option "compact"). */
.modal.modal-compact {
  width: auto;
  min-width: 280px;
  max-width: 90vw;
  height: auto;
  max-height: 80vh;
}

/* Budget label (CPU): fixed top right on the patient page and Fatturato. */
.budget-label {
  position: fixed;
  right: 2em;
  top: 4.2em;
  z-index: 50;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #266e5a;
  font-weight: bold;
  font-size: 20px;
  pointer-events: none;
}

.budget-label.budget-label-low {
  color: #c0392b;
}

/* Patient page: PR codes / pacchetto of a therapy. */
.therapy-pricing-line {
  margin-top: 2px;
  font-size: 13px;
  color: #555;
}

.therapy-pricing {
  margin: 8px 0;
}

.therapy-pricing select {
  display: block;
  margin-bottom: 6px;
}

/* Trova disponibilità popup. */
.trova-popup {
  max-width: 560px;
}

.trova-popup h3 {
  margin: 0 0 8px;
}

.trova-therapy-label {
  margin-bottom: 8px;
  color: #555;
}

.trova-group {
  margin: 8px 0;
}

.trova-group-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.trova-radio {
  display: inline-block;
  margin: 0 14px 4px 0;
  white-space: nowrap;
  font-weight: normal;
}

.trova-radio input {
  width: auto;
  margin: 0;
}

/* Fatturato page. */
.fatturato-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.fatturato-tab {
  padding: 6px 16px;
  border: 1px solid #265a8e;
  border-radius: 1em;
  background: #fff;
  color: #265a8e;
  font-size: 15px;
  cursor: pointer;
}

.fatturato-tab.fatturato-tab-active {
  background: #265a8e;
  color: #fff;
}

.fatturato-grid {
  border-collapse: separate;
  border-spacing: 8px;
  margin-bottom: 14px;
}

.fatturato-grid td {
  min-width: 190px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.fatturato-grid td.fatturato-cell-total {
  background: #eaf3ef;
}

.fatturato-grid .fatturato-row-total td {
  background: #e8eef5;
}

.fatturato-cell-label {
  font-size: 13px;
  color: #555;
}

.fatturato-cell-value {
  font-size: 22px;
  font-weight: bold;
}

.fatturato-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

.fatturato-month {
  padding: 6px 4px;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.fatturato-month.fatturato-month-current {
  outline: 2px solid #265a8e;
}

.fatturato-month-name {
  font-weight: bold;
  font-size: 13px;
}

.fatturato-month-value {
  font-size: 14px;
}

.fatturato-month-compare {
  font-size: 11px;
  color: #777;
}

.fatturato-month-compare.fatturato-month-up {
  color: #266e5a;
}

.fatturato-month-compare.fatturato-month-down {
  color: #c0392b;
}

.fatturato-pr-table .fatturato-pr-code {
  white-space: nowrap;
  font-weight: bold;
}

.fatturato-pr-cost {
  width: 110px;
}

.fatturato-pr-status {
  margin-left: 6px;
  color: #266e5a;
}