/* ============================================================
   FRAMEWORK — framework.css
   CSS dei componenti riusabili del Framework (NON brand-specifico).
   Tutti i colori provengono dai token del Brand Book (style.css :root).
   Caricare PRIMA di style.css, così il Cliente può sovrascrivere.
   Componenti: CodeDescSelector, Autocomplete, RadialMenu, Ajax overlay/spinner, TextInput.
   ============================================================ */

/* ============================================================
   CODE / DESC SELECTOR  (.fw-codedesc)
   Input-group: [codice][lente][reset?][link?][descrizione]
   ============================================================ */

.fw-codedesc {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.fw-codedesc > input {
  height: 38px;
  border: 1.5px solid var(--ap-border);
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--ap-text);
  background: var(--ap-surface);
  outline: none;
}

/* Campo codice (sinistra, larghezza fissa via inline style) */
.fw-cd-code {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  border-right: none;
  text-align: center;
  padding: 0 8px;
  background: var(--ap-bg);
  font-family: var(--font-mono);
  color: var(--ap-primary);
}

/* Campo descrizione (destra, occupa lo spazio) */
.fw-cd-desc {
  flex: 1;
  min-width: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  border-left: none;
  padding: 0 12px;
}

.fw-codedesc.is-focus .fw-cd-code,
.fw-codedesc.is-focus .fw-cd-desc {
  border-color: var(--ap-primary);
}

/* Bottoni interni (lente / reset / link) */
.fw-cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--ap-border);
  border-left: none;
  border-right: none;
  background: var(--ap-surface);
  color: var(--ap-text-soft);
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.fw-cd-btn + .fw-cd-btn { border-left: 1px solid var(--ap-border); }

.fw-cd-search:hover { background: var(--ap-primary);  color: #fff; }
.fw-cd-reset:hover  { background: var(--ap-danger); color: #fff; }
.fw-cd-link:hover   { background: var(--ap-ink);  color: #fff; }

.fw-cd-btn:disabled,
.fw-cd-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Variante "solo descrizione" (DescSelector): il codice è nascosto, il primo
   bottone visibile assume il bordo sinistro arrotondato. */
.fw-codedesc--desconly .fw-cd-btn:first-of-type {
  border-left: 1.5px solid var(--ap-border);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* ============================================================
   SEARCH MODAL  (riusa .modal-overlay / .modal di style.css)
   ============================================================ */

.fw-search-field { margin-bottom: 14px; }

/* Altezza FISSA: la dialog non si allunga/accorcia con i risultati. */
.fw-search-results {
  height: 340px;
  overflow-y: auto;
  border: 1px solid var(--ap-border);
  border-radius: var(--r-md);
}

/* La tabella usa .ap-table del Brand Book; qui solo interazione + righe compatte
   (padding ridotto → almeno ~10 righe visibili nell'altezza fissa). */
.fw-search-results .ap-table thead th { padding: 6px 12px; }
.fw-search-results .ap-table tbody td { padding: 5px 12px; }
.fw-search-results .ap-table tbody tr { cursor: pointer; }
.fw-search-results .ap-table tbody tr.is-active td { background: #E3EEF8; }

.fw-search-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--ap-muted);
  font-size: 13px;
}

/* ============================================================
   AUTOCOMPLETE  (.fw-autocomplete)
   ============================================================ */

.fw-autocomplete { position: relative; }

.fw-ac-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-modal);
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.fw-ac-menu.is-open { display: block; }

.fw-ac-item {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ap-text);
  cursor: pointer;
  border-bottom: 1px solid var(--ap-border);
}

.fw-ac-item:last-child { border-bottom: none; }

.fw-ac-item:hover,
.fw-ac-item.is-active { background: var(--ap-bg); }

.fw-ac-item .fw-ac-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ap-primary);
  margin-right: 8px;
}

/* ============================================================
   AJAX — overlay + spinner + pannello errore
   ============================================================ */

.fw-ajax-overlay {
  position: fixed;
  inset: 0;
  background: rgba(247, 248, 250, 0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fw-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--ap-border);
  border-top-color: var(--ap-primary);
  border-radius: 50%;
  animation: fw-spin 0.7s linear infinite;
}

@keyframes fw-spin { to { transform: rotate(360deg); } }

/* Pannello errore/avviso Ajax — sopra ogni modale */
.fw-ajax-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 500001;
  background: var(--ap-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  border-left: 4px solid var(--ap-danger);
  padding: 20px 22px;
}

.fw-ajax-alert.is-warning { border-left-color: var(--ap-warning); }
.fw-ajax-alert.is-info    { border-left-color: var(--ap-primary); }

.fw-ajax-alert h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ap-ink);
  margin-bottom: 6px;
}

.fw-ajax-alert p { font-size: 13px; color: var(--ap-text-soft); line-height: 1.6; }

.fw-ajax-alert small {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ap-muted);
}

.fw-ajax-alert pre {
  background: #EEF1F8;
  border: 1px solid var(--ap-border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin-top: 4px;
  max-height: 150px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ap-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.fw-ajax-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}

/* ============================================================
   RADIAL MENU  (.rcs-menu-component)  — "Apple Watch style"
   Le variabili per-istanza (--rcs-*) sono emesse inline da RadialMenu::render().
   ============================================================ */

.rcs-menu-component {
  /* Default sovrascrivibili dal blocco inline di ogni istanza */
  --rcs-center-size: 54px;
  --rcs-ring-radius: 56px;
  --rcs-ring-thickness: 64px;
  --rcs-item-size: 42px;
  --rcs-anim-speed: 500ms;
  --rcs-center-bg: var(--ap-primary);
  --rcs-ring-bg: rgba(26, 43, 74, 0.08);

  position: relative;
  width: var(--rcs-center-size);
  height: var(--rcs-center-size);
  display: inline-block;
  vertical-align: middle;
}

.rcs-menu-component .rcs-ghiera-back {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rcs-ring-radius) * 2);
  height: calc(var(--rcs-ring-radius) * 2);
  border-radius: 50%;
  border: var(--rcs-ring-thickness) solid var(--rcs-ring-bg);
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: transform var(--rcs-anim-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity var(--rcs-anim-speed) ease;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 5;
}

.rcs-menu-component.rcs-state-open .rcs-ghiera-back {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.rcs-menu-component .rcs-trigger-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
  padding: 0;
}

/* In modalità circolare il colore è quello dell'istanza; in rettangolare lo
   decide la classe .btn-* passata a setRectMode() (es. btn btn-primary). */
.rcs-menu-component:not(.rcs-rect-mode) .rcs-trigger-btn {
  background: var(--rcs-center-bg);
}

.rcs-menu-component .rcs-trigger-btn:hover { transform: scale(1.1); }

/* ── Modalità rettangolare (ID + classe per specificità) ── */
.rcs-menu-component.rcs-rect-mode {
  width: auto;
  height: auto;
  display: block;
}

.rcs-menu-component.rcs-rect-mode .rcs-trigger-btn {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--r-sm);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.rcs-menu-component.rcs-rect-mode .rcs-trigger-btn:hover {
  transform: none;
  filter: brightness(0.94);
}

.rcs-menu-component.rcs-rect-mode.rcs-state-open { z-index: 1000; }

/* ── Layout inline ── */
.rcs-menu-component.rcs-inline-layout .rcs-ghiera-back { display: none; }

.rcs-menu-component.rcs-inline-layout .rcs-inline-row {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding-top: 3px;
  z-index: 100;
}

.rcs-menu-component.rcs-inline-layout .rcs-satellite-node {
  position: relative;
  left: auto;
  top: auto;
  flex: 1;
  width: auto;
  height: auto;
  min-height: 40px;
  border-radius: var(--r-sm);
  transform: translateX(-28px);
  opacity: 0;
  transition: transform var(--rcs-anim-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity calc(var(--rcs-anim-speed) * 0.7) ease;
  transition-delay: var(--rcs-delay);
}

.rcs-menu-component.rcs-inline-layout.rcs-state-open .rcs-satellite-node {
  transform: translateX(0);
  opacity: 1;
}

.rcs-menu-component.rcs-inline-layout .rcs-satellite-node:hover { background: var(--ap-ink-soft); }

/* ── Satelliti (modalità circolare) ── */
.rcs-menu-component .rcs-satellite-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--rcs-item-size);
  height: var(--rcs-item-size);
  border-radius: 50%;
  border: none;
  background: var(--ap-ink);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) translateY(calc(-1 * var(--rcs-ring-radius))) rotate(90deg) scale(0.3);
  transition: transform var(--rcs-anim-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity var(--rcs-anim-speed) ease;
  transition-delay: var(--rcs-delay);
  box-shadow: var(--shadow-modal);
  z-index: 20;
}

.rcs-menu-component .rcs-satellite-node:hover {
  background: var(--ap-ink-soft);
  z-index: 40;
}

.rcs-menu-component.rcs-state-open .rcs-satellite-node {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--rcs-angle)) translateY(calc(-1 * var(--rcs-ring-radius))) rotate(calc(-1 * var(--rcs-angle))) scale(1);
}

.rcs-menu-component .rcs-floating-tooltip {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ap-ink);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: none;
  pointer-events: none;
  box-shadow: var(--shadow-modal);
  z-index: 999;
}

.rcs-menu-component .rcs-satellite-node:hover .rcs-floating-tooltip { display: block; }

/* ============================================================
   TEXT INPUT  (.fw-textinput)
   Input con floating label: la label si sposta sopra al bordo
   quando il campo ha il focus o contiene un valore.
   Classe PHP: TextInput (Framework/Components/class.TextInput.php)
   ============================================================ */

.fw-textinput {
  position: relative;
}

.fw-textinput .fw-ti-input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1.5px solid var(--ap-border);
  border-radius: var(--r-md);
  background: var(--ap-surface);
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--ap-text);
  outline: none;
  transition: border-color 0.2s;
}

.fw-textinput .fw-ti-input:focus {
  border-color: var(--ap-primary);
}

.fw-textinput label {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--ap-muted);
  pointer-events: none;
  background: transparent;
  padding: 0;
  border-radius: var(--r-pill);
  line-height: 1;
  transition: top 0.25s, font-size 0.25s, color 0.2s, background-color 0.2s, padding 0.2s;
}

/* Floated: focus oppure campo non vuoto (:not(:placeholder-shown) richiede placeholder=" " sull'input) */
.fw-textinput .fw-ti-input:focus + label,
.fw-textinput .fw-ti-input:not(:placeholder-shown) + label,
.fw-textinput.has-value label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #fff;
  background-color: var(--ap-primary);
  padding: 2px 7px;
}

/* Disabled */
.fw-textinput .fw-ti-input:disabled {
  background: var(--ap-bg);
  color: var(--ap-muted);
  cursor: not-allowed;
}

.fw-textinput .fw-ti-input:disabled + label {
  color: var(--ap-muted);
}

/* Readonly */
.fw-textinput .fw-ti-input[readonly] {
  background: var(--ap-bg);
}

/* ============================================================
   LOG VIEWER (M19) — struttura riusabile, su token.
   I colori dei badge-chiave sono inline (data-driven) nella pagina.
   ============================================================ */
.logview-head { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.logview-oldest { margin-left:auto; background:var(--ap-bg); border:1px solid var(--ap-border); border-radius:var(--r-sm); padding:4px 10px; font-size:12px; color:var(--ap-primary); font-weight:600; white-space:nowrap; }

.logview-tabs { display:flex; gap:var(--sp-1); border-bottom:1px solid var(--ap-border); margin-bottom:var(--sp-4); }
.logview-tab { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; font-size:14px; font-weight:600; color:var(--ap-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.logview-tab:hover { color:var(--ap-primary); }
.logview-tab.active { color:var(--ap-ink); border-bottom-color:var(--ap-primary); }

.logview-filters { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end; background:var(--ap-surface); border:1px solid var(--ap-border); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3); box-shadow:var(--shadow-card); }
.logview-field { display:flex; flex-direction:column; gap:4px; }
.logview-field > label { font-size:11px; font-weight:600; color:var(--ap-muted); }
.logview-field input[type=text], .logview-field input[type=date], .logview-field select { height:34px; padding:0 10px; border:1px solid var(--ap-border); border-radius:var(--r-sm); background:var(--ap-surface); font:inherit; font-size:13px; color:var(--ap-text); }
.logview-field input:focus, .logview-field select:focus { outline:none; border-color:var(--ap-primary); }
.logview-check { flex-direction:row; align-items:center; gap:6px; height:34px; font-size:13px; color:var(--ap-text-soft); cursor:pointer; }
.logview-actions > div { display:flex; gap:6px; }

.logview-toolbar { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2); flex-wrap:wrap; }
.logview-count { background:var(--ap-bg); border:1px solid var(--ap-border); border-radius:var(--r-sm); padding:4px 10px; font-size:12px; color:var(--ap-primary); font-weight:600; white-space:nowrap; }
.logview-quick { flex:1; min-width:200px; max-width:340px; height:32px; padding:0 12px; border:1px solid var(--ap-border); border-radius:var(--r-sm); font:inherit; font-size:13px; }
.logview-quick:focus { outline:none; border-color:var(--ap-primary); }

.logview-tablewrap { overflow:auto; border:1px solid var(--ap-border); border-radius:var(--r-md); background:var(--ap-surface); }
.logview-table { width:100%; border-collapse:collapse; font-size:13px; }
.logview-table thead th { position:sticky; top:0; z-index:2; background:var(--ap-bg); color:var(--ap-ink); font-weight:700; text-align:left; padding:9px 12px; border-bottom:2px solid var(--ap-border); white-space:nowrap; -webkit-user-select:none; user-select:none; }
.logview-sortable:hover { background:var(--ap-primary-light); color:#fff; cursor:pointer; }
.logview-table tbody tr { border-bottom:1px solid var(--ap-border); }
.logview-table tbody tr:hover { background:var(--ap-bg); }
.logview-table td { padding:8px 12px; color:var(--ap-text); vertical-align:top; }
.logview-id { color:var(--ap-muted); font-size:11px; }
.logview-dt, .logview-ip, .logview-user { white-space:nowrap; font-size:12px; }
.logview-sec { color:var(--ap-muted); font-size:11px; }
.logview-note { max-width:360px; white-space:pre-wrap; word-break:break-word; color:var(--ap-text-soft); }
.logview-badge { display:inline-block; padding:2px 8px; border-radius:var(--r-pill); font-size:11px; font-weight:700; white-space:nowrap; }
.logview-mode { display:inline-block; padding:1px 6px; border-radius:var(--r-sm); font-size:11px; font-weight:600; background:var(--ap-bg); color:var(--ap-primary); }
.logview-json { font-family:var(--font-mono); font-size:11px; max-width:320px; max-height:38px; overflow:hidden; color:var(--ap-text-soft); white-space:pre-wrap; word-break:break-all; cursor:zoom-in; }
.logview-json.open { max-height:none; cursor:zoom-out; }
.logview-empty { text-align:center; padding:40px; color:var(--ap-muted); }
.logview-empty i { font-size:32px; }

/* ============================================================
   DATATABLE  (.fw-datatable) — controllo tabellare riusabile
   La tabella usa .ap-table del Brand Book; qui solo toolbar,
   stato di ordinamento, paginatore e stato di caricamento.
   ============================================================ */

.fw-datatable { position: relative; }

/* — Toolbar — */
.fw-dt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.fw-dt-search {
  position: relative; flex: 1 1 280px; min-width: 220px;
}
.fw-dt-search > i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ap-muted); font-size: 16px; pointer-events: none;
}
.fw-dt-search .fw-dt-q {
  width: 100%; height: 40px; padding: 0 12px 0 36px;
  border: 1.5px solid var(--ap-border); border-radius: var(--r-md);
  background: var(--ap-surface); color: var(--ap-text); font: inherit;
}
.fw-dt-search .fw-dt-q:focus {
  outline: none; border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px rgba(46,109,164,.12);
}
.fw-dt-extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fw-dt-extra select,
.fw-dt-extra input {
  height: 40px; padding: 0 10px; border: 1.5px solid var(--ap-border);
  border-radius: var(--r-md); background: var(--ap-surface); color: var(--ap-text); font: inherit;
}
.fw-dt-extra select:focus,
.fw-dt-extra input:focus {
  outline: none; border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px rgba(46,109,164,.12);
}
.fw-dt-tools { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.fw-dt-pagesize { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; color: var(--ap-muted); }
.fw-dt-pagesize select {
  height: 34px; padding: 0 8px; border: 1.5px solid var(--ap-border);
  border-radius: var(--r-sm); background: var(--ap-surface); color: var(--ap-text); font: inherit;
}

/* — Card/scroll — */
.fw-dt-card { padding: 0; overflow: hidden; }
.fw-dt-scroll { overflow-x: auto; }

/* — Intestazioni ordinabili — */
.fw-dt-table thead th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.fw-dt-table thead th.sortable:hover { color: var(--ap-primary); }
.fw-dt-table thead th.sortable.is-sorted { color: var(--ap-primary); }
.fw-dt-caret { margin-left: 4px; font-size: 14px; opacity: .55; vertical-align: middle; }
.fw-dt-table thead th.is-sorted .fw-dt-caret { opacity: 1; }

.fw-dt-placeholder { text-align: center; color: var(--ap-muted); padding: 28px !important; }
.fw-dt-placeholder i { font-size: 22px; vertical-align: middle; margin-right: 4px; }

/* — Stato di caricamento — */
.fw-datatable.is-loading .fw-dt-scroll { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* — Footer: meta + paginatore — */
.fw-dt-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.fw-dt-meta { font-size: 13px; color: var(--ap-muted); }
.fw-dt-pager { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fw-dt-pg {
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--ap-border); border-radius: var(--r-sm);
  background: var(--ap-surface); color: var(--ap-text);
  font: inherit; font-size: 13px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.fw-dt-pg:hover:not(.is-disabled):not(.is-active) { border-color: var(--ap-primary); color: var(--ap-primary); }
.fw-dt-pg.is-active { background: var(--ap-primary); border-color: var(--ap-primary); color: #fff; font-weight: 700; cursor: default; }
.fw-dt-pg.is-disabled { opacity: .4; cursor: not-allowed; }