/* Sicant · Bootstrap bridge (Phase 4d)
   Rebrand visivo delle classi Bootstrap usate nei contenuti interni, senza
   toccare HTML. Caricato DOPO sicant-shell.css per avere precedenza.
   Intenzionalmente esclusi: .modal*, .alert, .toast, .collapse, .navbar,
   .nav-tabs (restano Bootstrap stock). */


/* ---------- Card ---------- */
.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 2px;
  box-shadow: none;
}
.card-header {
  padding: 10px 14px;
  background: var(--app-surface-2);
  border-bottom: 1px solid var(--app-border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-fg);
}
.card-header h5,
.card-header .h5 {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}
.card-body { padding: 14px 16px; color: var(--app-fg); }
.card-footer {
  padding: 10px 14px;
  background: var(--app-surface-2);
  border-top: 1px solid var(--app-border);
  color: var(--app-fg-muted);
  font-size: 12px;
}


/* ---------- Tables ---------- */
.table {
  color: var(--app-fg);
  border-color: var(--app-border);
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--app-border);
  background-color: transparent;
  color: inherit;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-fg-muted);
  border-bottom: 1px solid var(--app-border-strong);
  padding: 8px 10px;
  white-space: nowrap;
}
.table tbody td,
.table tbody th {
  padding: 8px 10px;
  font-size: 12.5px;
  vertical-align: middle;
}
.table-sm thead th,
.table-sm tbody td,
.table-sm tbody th { padding: 6px 8px; }
.table tbody tr:hover {
  background: var(--app-row-hover, rgba(1,68,85,0.04));
}
[data-theme="dark"] .table tbody tr:hover {
  background: rgba(255,255,255,0.04);
}
.table-borderless > :not(caption) > * > * { border-bottom-color: transparent; }
.table-responsive { border: none; }


/* ---------- Badges (.badge.bg-*) ---------- */
.badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 2px;
  vertical-align: middle;
}
.badge.bg-success { background: #E3F2EA !important; color: #1F7A4D !important; }
.badge.bg-warning { background: #FBF1DD !important; color: #8A5500 !important; }
.badge.bg-danger  { background: #FBE6E6 !important; color: #990000 !important; }
.badge.bg-info    { background: var(--teal-50) !important; color: var(--teal-700) !important; }
.badge.bg-primary { background: var(--teal-600) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--mist) !important; color: var(--steel-500) !important; }

[data-theme="dark"] .badge.bg-success { background: rgba(31,122,77,0.18) !important; color: #76C293 !important; }
[data-theme="dark"] .badge.bg-warning { background: rgba(198,122,0,0.18) !important; color: #E6B76A !important; }
[data-theme="dark"] .badge.bg-danger  { background: rgba(212,0,0,0.18) !important; color: #E25151 !important; }
[data-theme="dark"] .badge.bg-info    { background: rgba(1,68,85,0.35) !important; color: #9AB5BF !important; }
[data-theme="dark"] .badge.bg-secondary { background: rgba(255,255,255,0.06) !important; color: #A6AFB6 !important; }


/* ---------- Outline buttons (.btn-outline-*) ---------- */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info {
  border: 1px solid var(--app-border-strong);
  background: transparent;
  color: var(--app-fg);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 500;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.btn-outline-primary:hover,
.btn-outline-info:hover,
.btn-outline-success:hover {
  border-color: var(--teal-500);
  color: var(--teal-700);
  background: transparent;
}
.btn-outline-warning:hover { border-color: #C67A00; color: #8A5500; background: transparent; }
.btn-outline-secondary:hover { border-color: var(--app-fg-muted); color: var(--app-fg); background: transparent; }

.btn-outline-danger {
  border: 1px solid var(--red-400);
  background: transparent;
  color: var(--red-500);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 500;
}
.btn-outline-danger:hover {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-500);
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-info {
  color: var(--app-fg);
  border-color: var(--app-border-strong);
}
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-info:hover,
[data-theme="dark"] .btn-outline-success:hover {
  border-color: var(--teal-400);
  color: #C2D3DA;
}


/* ---------- Button sizes ---------- */
.btn-sm { font-size: 11.5px; padding: 3px 9px; }
.btn-group-sm > .btn, .btn-group-sm .btn { font-size: 11.5px; padding: 3px 9px; }


/* ---------- Form controls ---------- */
.form-control,
.form-select {
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: 2px;
  color: var(--app-fg);
  font-size: 13px;
  padding: 6px 10px;
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 2px rgba(1,68,85,0.18);
  background: var(--app-surface);
  color: var(--app-fg);
}
.form-control::placeholder { color: var(--app-fg-subtle); }
.form-control-sm, .form-select-sm { font-size: 12px; padding: 4px 8px; }

.form-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-fg-muted);
  margin-bottom: 4px;
}
.form-text { color: var(--app-fg-subtle); font-size: 11px; }

.form-check-input {
  border-color: var(--app-border-strong);
}
.form-check-input:checked {
  background-color: var(--teal-600);
  border-color: var(--teal-600);
}
.form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(1,68,85,0.18);
  border-color: var(--teal-500);
}


/* ---------- Utility text colors usate nei template ---------- */
.text-muted { color: var(--app-fg-muted) !important; }
.text-danger { color: var(--red-500) !important; }
.text-success { color: #1F7A4D !important; }
.text-warning { color: #8A5500 !important; }

[data-theme="dark"] .text-muted { color: var(--app-fg-muted) !important; }
[data-theme="dark"] .text-success { color: #76C293 !important; }
[data-theme="dark"] .text-warning { color: #E6B76A !important; }


/* ---------- List group (usato raramente ma presente in alcune pagine) ---------- */
.list-group-item {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-fg);
  font-size: 13px;
}


/* ---------- Dropdown (.dropdown-menu, .dropdown-item) ----------
   Bootstrap 5 dropdown rebrand. Stile architectural Sicant: superficie
   piatta, radius 2px, no link blu, hover teal, focus ring rosso. */
.dropdown-menu {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(1, 68, 85, 0.10), 0 2px 6px rgba(1, 68, 85, 0.06);
  padding: 4px 0;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--app-fg);
  min-width: 200px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--app-fg);
  background: transparent;
  border-radius: 0;
  text-decoration: none;
  border-bottom: 0;
  transition: background 120ms ease, color 120ms ease;
}
.dropdown-item i {
  color: var(--app-fg-subtle);
  font-size: 11px;
  width: 14px;
  text-align: center;
  margin-right: 0;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--app-row-hover);
  color: var(--teal-700);
}
.dropdown-item:hover i,
.dropdown-item:focus i {
  color: var(--teal-600);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--teal-600);
  color: #fff;
}
.dropdown-item.active i,
.dropdown-item:active i {
  color: #fff;
}
.dropdown-divider {
  height: 0;
  margin: 4px 0;
  border-top: 1px solid var(--app-border);
  overflow: hidden;
}
.dropdown-header {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-fg-muted);
  padding: 6px 14px 4px;
}

[data-theme="dark"] .dropdown-menu {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: rgba(255,255,255,0.06);
  color: #C2D3DA;
}
[data-theme="dark"] .dropdown-item:hover i,
[data-theme="dark"] .dropdown-item:focus i {
  color: var(--teal-300);
}


/* ---------- Trigger del dropdown: forza focus ring Sicant (rosso) ----------
   Bootstrap mette .show + focus blu sul .btn quando il dropdown è aperto. */
.btn.show,
.btn-primary:focus,
.btn-primary.show,
.btn-secondary:focus,
.btn-secondary.show,
.btn-outline:focus,
.btn-outline.show,
.btn-ghost:focus,
.btn-ghost.show {
  box-shadow: 0 0 0 2px rgba(212,0,0,0.25) !important;
  outline: none;
}