/* Design tokens e componenti dell'interfaccia RO Simulator, portati dal
   mockup statico (SCA061 Bando MASE/01 RO simulator/.../mockup-ui/_shared.css) -
   stessa fonte di verita' visiva, qui applicati alle pagine Blazor reali. */
:root {
  --color-base-white: #FFFFFF;
  --color-base-black: #000000;

  --color-brand-50: #FFF8F8;
  --color-brand-100: #FFE8E7;
  --color-brand-200: #FFD0CE;
  --color-brand-300: #FFB0AC;
  --color-brand-400: #FF8C87;
  --color-brand-500: #FF7870;
  --color-brand-600: #FF665E;
  --color-brand-700: #D94840;
  --color-brand-800: #A83028;
  --color-brand-900: #841D18;

  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;

  --color-green-50: #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;

  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;

  --color-yellow-50: #FEFCE8;
  --color-yellow-100: #FEF9C3;
  --color-yellow-700: #A16207;

  --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.05);

  /* Bootstrap overrides */
  --bs-primary: var(--color-brand-600);
  --bs-primary-rgb: 255,102,94;
  --bs-link-color: var(--color-brand-600);
  --bs-link-hover-color: var(--color-brand-700);
  --bs-body-font-family: var(--font-family-base);
  --bs-body-color: var(--color-neutral-700);
  --bs-body-bg: var(--color-neutral-50);
  --bs-border-color: var(--color-neutral-200);
}

body { font-family: var(--font-family-base); background: var(--color-brand-600); color: var(--color-neutral-700); font-size: 13.5px; }

h1, h2, h3, h4, h5, .ro-title { color: var(--color-neutral-900); font-weight: 600; }

a { color: var(--color-brand-600); }

.ro-icon { flex-shrink: 0; }

/* ---------- Topbar + sidebar (shell applicativo, condiviso da tutte le pagine) ---------- */
.ro-topbar {
  position: fixed; top:0; left:0; right:0; height:6px; z-index:1040;
  background: var(--color-brand-600);
}
.ro-sidebar {
  position: fixed; top:6px; left:0; bottom:0; width:68px;
  background: var(--color-brand-600);
  display:flex; flex-direction:column; align-items:center;
  padding: 14px 0 16px; gap: 14px; z-index: 1030;
}
.ro-sidebar-logo {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 26px; text-decoration:none;
}
.ro-sidebar .ro-nav-link {
  width:40px; height:40px; border-radius: var(--radius-full); display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.75); text-decoration:none; position:relative;
}
.ro-sidebar .ro-nav-link:hover { background: rgba(255,255,255,.14); color:#fff; }
.ro-sidebar .ro-nav-link.active { background: rgba(255,255,255,.22); color:#fff; }
.ro-sidebar .ro-bottom { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:8px; }
.ro-avatar {
  width:32px; height:32px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:none; padding:0; cursor:pointer;
}

.ro-content {
  margin-left: 68px; margin-top: 6px; padding: 18px 24px 40px;
  background: var(--color-neutral-50); border-top-left-radius: 20px;
  min-height: calc(100vh - 6px);
}

.ro-page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; }
.ro-page-header p { color: var(--color-neutral-500); margin-bottom:0; font-size:.8rem; }
.ro-page-header h1 { font-size: 1.15rem; }

/* ---------- Cards ---------- */
.ro-card { background:#fff; border:1px solid var(--color-neutral-200); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.ro-card-header { padding: 10px 14px; border-bottom:1px solid var(--color-neutral-200); display:flex; align-items:center; justify-content:space-between; }
.ro-card-header h2, .ro-card-header h3 { font-size:.8rem; margin:0; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color: var(--color-neutral-600); display:flex; align-items:center; gap:6px; }
.ro-card-body { padding: 14px; }

/* ---------- Badges ---------- */
.ro-badge { display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius: var(--radius-sm); font-size:.7rem; font-weight:500; border:1px solid; white-space:nowrap; }
.ro-badge-gray { background: var(--color-neutral-100); color: var(--color-neutral-700); border-color: var(--color-neutral-200); }
.ro-badge-green { background: var(--color-green-50); color: var(--color-green-700); border-color: var(--color-green-200); }
.ro-badge-red { background: var(--color-red-50); color: var(--color-red-700); border-color: var(--color-red-200); }
.ro-badge-yellow { background: var(--color-yellow-50); color: var(--color-yellow-700); border-color: var(--color-yellow-100); }

/* ---------- Buttons ---------- */
.btn-brand { background: var(--color-brand-600); border-color: var(--color-brand-600); color:#fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--color-brand-700); border-color: var(--color-brand-700); color:#fff; }
.btn-outline-brand { border-color: var(--color-neutral-300); color: var(--color-neutral-700); background:#fff; }
.btn-outline-brand:hover { background: var(--color-neutral-50); color: var(--color-neutral-900); }
/* Azione distruttiva finale (conferma) - piena, non lascia dubbi. */
.btn-danger-ro { background: var(--color-red-600); border-color: var(--color-red-600); color:#fff; }
.btn-danger-ro:hover, .btn-danger-ro:focus { background: var(--color-red-700); border-color: var(--color-red-700); color:#fff; }
/* Azione che AVVIA un flusso distruttivo (apre la conferma) - segnala
   attenzione senza il peso visivo del rosso pieno, riservato alla conferma
   vera e propria sopra. */
.btn-warning-ro { background: var(--color-yellow-50); border-color: var(--color-yellow-100); color: var(--color-yellow-700); }
.btn-warning-ro:hover, .btn-warning-ro:focus { background: var(--color-yellow-100); border-color: var(--color-yellow-100); color: var(--color-yellow-700); }
.btn, .form-control, .form-select { border-radius: var(--radius-md); }

/* ---------- Table ---------- */
.ro-table { margin-bottom:0; }
.ro-table thead th { font-size:.68rem; color: var(--color-neutral-600); font-weight:600; text-transform:uppercase; letter-spacing:.02em; border-bottom:1px solid var(--color-neutral-200); padding: 7px 14px; background:#fff; }
.ro-table td { padding: 8px 14px; vertical-align: middle; border-bottom:1px solid var(--color-neutral-200); font-size:.8rem; }
.ro-table tr:last-child td { border-bottom:none; }
.ro-table .ro-cell-sub { color: var(--color-neutral-500); font-size:.72rem; }

/* Intestazioni ordinabili (CirList/Users) - stessa th, solo cursore e icona
   direzione aggiunta via markup (non ::after, serve poter mostrare/nascondere
   in base alla colonna attiva senza duplicare regole per colonna). */
.ro-table th.ro-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.ro-table th.ro-sortable:hover { color: var(--color-neutral-900); }
.ro-table th.ro-sortable .ro-sort-icon { display:inline-block; width:1em; opacity:.4; }
.ro-table th.ro-sortable.ro-sort-active .ro-sort-icon { opacity:1; color: var(--color-brand-600); }

/* Sotto i 576px (stessa soglia di .ro-time-inline sopra): le tabelle marcate
   .ro-table-responsive passano da riga tabellare a "card" - ogni <td> diventa
   una riga a due colonne (etichetta : valore) invece di andare in scroll
   orizzontale. L'etichetta viene dall'attributo data-label sul <td> stesso;
   un <td> senza data-label (tipicamente la colonna azioni/icone) occupa
   l'intera larghezza senza etichetta. */
@media (max-width: 575.98px) {
  .ro-table-responsive thead { display:none; }
  .ro-table-responsive, .ro-table-responsive tbody, .ro-table-responsive tr, .ro-table-responsive td {
    display:block;
    width:100%;
  }
  .ro-table-responsive tr {
    padding:10px 14px;
    border-bottom:1px solid var(--color-neutral-200);
  }
  .ro-table-responsive tr:last-child { border-bottom:none; }
  .ro-table-responsive td {
    padding:3px 0;
    border-bottom:none;
    display:grid;
    grid-template-columns: 40% 1fr;
    column-gap:10px;
    align-items:center;
  }
  .ro-table-responsive td:not([data-label]) { grid-template-columns: 1fr; padding-top:6px; }
  .ro-table-responsive td[data-label]::before {
    content: attr(data-label);
    font-size:.68rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.02em;
    color: var(--color-neutral-600);
  }
}

/* Evidenzia il comando che l'Allegato X (regola di arbitraggio tra comandi
   concorrenti, dopo §X.7.1.1.2) si aspetta vinca - vedi Cirs/CirDetail.razor,
   card "Power limit"/"Suspension" quando ci sono due comandi accettati non
   ancora scaduti per la stessa famiglia. */
.ro-border-expected { border: 1px solid var(--color-brand-600) !important; }

/* Righe di una lista non tabellare (es. AssignedUsersButton) - separazione
   chiara tra voci senza il peso visivo di una card per ognuna. */
.ro-list-row { padding: 10px 0; border-bottom: 1px solid var(--color-neutral-100); text-align: left; }
.ro-list-row:last-child { border-bottom: none; }
.ro-table-group-row td { background: var(--color-neutral-100); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color: var(--color-neutral-600); padding: 6px 14px; }
.ro-table-group-row .ro-cell-sub { text-transform:none; font-weight:400; letter-spacing:normal; font-size:.68rem; }

.ro-cell-sub { color: var(--color-neutral-500); font-size:.72rem; }
.ro-cell-title { font-weight:500; color: var(--color-neutral-900); }
.ro-icon-tile { width:28px; height:28px; border-radius: var(--radius-sm); background: var(--color-brand-50); color: var(--color-brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- Pagine pubbliche (login, activate-password) - nessuna sidebar,
   card centrata su sfondo brand pieno, vedi PublicLayout.razor. ---------- */
.ro-public-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.ro-auth-card { width:100%; max-width:380px; }
.ro-auth-mark { width:56px; height:56px; border-radius:var(--radius-md); background:var(--color-brand-600); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }

/* ---------- MQTT log ---------- */
.ro-log-row { font-family: "Cascadia Code", "Consolas", monospace; font-size:.72rem; }
.ro-log-row .ro-log-topic { color: var(--color-neutral-700); }
.ro-log-row .ro-log-payload { color: var(--color-neutral-600); white-space: pre-wrap; word-break: break-all; }
.ro-log-payload-pre { margin:0; font-family:inherit; font-size:inherit; color:inherit; white-space:pre-wrap; word-break: break-all; }
.ro-dir-rx { color: var(--color-green-700); background: var(--color-green-50); border:1px solid var(--color-green-200); }
.ro-dir-tx { color: var(--color-brand-700); background: var(--color-brand-50); border:1px solid var(--color-brand-200); }

/* Le icone nei badge restano piu' piccole di quelle usate altrove (header,
   bottoni) - stessa proporzione del mockup statico. */
.ro-badge .ro-icon { width:12px !important; height:12px !important; }

/* Convenzione orari UTC/local/epoch fuori dalle tabelle: affiancati quando
   c'e' spazio, separati da un punto; sotto i 576px vanno a capo. Aggiungere
   .ro-time-inline-end per allinearli a destra. */
.ro-time-inline { display:flex; flex-direction:column; }
.ro-time-inline > span { white-space:nowrap; }
.ro-time-inline .ro-time-sep { display:none; }
@media (min-width: 576px) {
  .ro-time-inline { flex-direction:row; flex-wrap:wrap; column-gap:8px; row-gap:2px; align-items:baseline; }
  .ro-time-inline .ro-time-sep { display:inline; color: var(--color-neutral-400); }
  .ro-time-inline-end { justify-content:flex-end; }
}

/* Bootstrap compila i colori di switch/checkbox come esadecimali fissi, non
   legge --bs-primary a runtime per questi componenti - serve un override
   esplicito per il rosso brand invece del blu di default. Non solo
   .form-switch: le checkbox semplici (es. "Assigned CIRs" in Users.razor)
   usano lo stesso .form-check-input e andavano a finire blu senza questa
   riga, l'unico posto rimasto col colore di default Bootstrap. */
.form-check-input:checked {
  background-color: var(--color-brand-600);
  border-color: var(--color-brand-600);
}
.form-check-input:focus {
  border-color: var(--color-brand-400);
  box-shadow: 0 0 0 .25rem rgba(255,102,94,.25);
}