/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAG-TEAM — Sneat theme overrides                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Rebrand primary color from Sneat default purple to MAG-TEAM corporate blue */
/* small polish tweaks that keep the Sneat feel but match our identity.      */
/* ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bs-primary:        #2563eb;
  --bs-primary-rgb:    37, 99, 235;
  --ir-brand:          #2563eb;
  --ir-brand-2:        #0ea5e9;
  --ir-brand-hover:    #1d4ed8;
  --ir-success:        #10b981;
  --ir-warning:        #d97706;
  --ir-danger:         #dc2626;
  --ir-info:           #0ea5e9;
  --ir-ink:            #0f172a;
  --ir-muted:          #64748b;
  --ir-surface:        #ffffff;
  --ir-background:     #f8fafc;
  --ir-border:         #e2e8f0;
  --ir-sidebar:        #1e293b;
}

/* Sneat's primary buttons */
.btn-primary,
.bg-primary { background-color: var(--ir-brand) !important; border-color: var(--ir-brand) !important; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-color: var(--ir-brand-hover) !important; border-color: var(--ir-brand-hover) !important; }
.btn-outline-primary { color: var(--ir-brand) !important; border-color: var(--ir-brand) !important; }
.btn-outline-primary:hover { background-color: var(--ir-brand) !important; color: #fff !important; border-color: var(--ir-brand) !important; }
.text-primary { color: var(--ir-brand) !important; }
.link-primary { color: var(--ir-brand); }
.bg-label-primary { background-color: rgba(37, 99, 235, 0.14) !important; color: var(--ir-brand) !important; }

/* Menu active item — corporate accent */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle):hover {
  background: rgba(37, 99, 235, 0.18) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--ir-brand-2), 0 8px 24px -18px rgba(14, 165, 233, 0.85);
}

/* Sneat KPI stat cards get a subtle top-border accent */
.card {
  transition: transform 200ms ease-out, box-shadow 240ms ease-out;
}
.card:hover {
  box-shadow: 0 6px 24px -8px rgba(15, 20, 34, 0.10);
}

/* Live clock badge tweak */
[data-server-clock] { min-width: 172px; text-align: center; }

/* Monospace helper */
.mono, .font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* Section titles (h1 in each view) */
.page-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.page-title h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-title p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 14px;
}

/* KPI value emphasized */
.kpi-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--bs-heading-color);
  line-height: 1;
}
.kpi-hero .kpi-value {
  font-size: 44px;
  color: var(--ir-success);
  text-shadow: 0 0 30px rgba(16, 185, 129, 0.20);
}

/* Empty state helper */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--bs-secondary-color);
}
.empty-state i {
  font-size: 40px;
  opacity: 0.45;
  margin-bottom: 12px;
}
.empty-state h5 {
  margin-bottom: 6px;
  color: var(--bs-heading-color);
  font-size: 15px;
}
.empty-state p {
  margin: 0;
  font-size: 13px;
}

/* Table hover cursor for clickable rows */
.table tbody tr[data-clickable] { cursor: pointer; }

/* Sub-tabs (nav-pills inside toolserver) */
.nav-pills .nav-link.active {
  background-color: var(--ir-brand) !important;
  color: #fff !important;
}

/* Dark theme */
[data-theme="dark"] {
  --bs-body-bg: #0f172a;
  --bs-body-color: #f1f5f9;
}

/* Force layout to work when JS menu hasn't loaded yet */
@media (min-width: 1200px) {
  .layout-menu-fixed .layout-menu { position: fixed; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Interior polish — page titles, cards, KPIs, empty states, sub-nav          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Page title — uniform section header across every view */
.page-title {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bs-border-color);
}
.page-title h4 {
  font-size: 24px;
  line-height: 1.15;
  color: var(--bs-heading-color);
  margin: 0 0 4px;
}
.page-title p {
  font-size: 13.5px;
  color: var(--bs-secondary-color);
  margin: 0;
}

/* Card header uniform spacing + subtle divider */
.card > .card-header {
  padding: 18px 22px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.card > .card-header .card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bs-heading-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card > .card-header .card-title i {
  color: var(--ir-brand);
  font-size: 18px;
}
.card > .card-body {
  padding: 22px;
}

/* KPI hero card centering + gradient wash */
.card:has(.kpi-hero) {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(14, 165, 233, 0.07), transparent 60%),
    radial-gradient(500px 260px at 0% 100%, rgba(37, 99, 235, 0.06), transparent 65%),
    var(--bs-card-bg);
}
.kpi-hero-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kpi-hero-wrap .unit {
  font-size: 22px;
  color: var(--bs-secondary-color);
  font-weight: 500;
}

/* Stat cards — colored top strip on hover */
.card.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 240ms ease-out;
}
.card.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ir-brand), var(--ir-brand-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card.stat-card:hover::before { transform: scaleX(1); }
.card.stat-card:hover { transform: translateY(-2px); }

/* Empty state polish */
.empty-state {
  padding: 48px 24px;
}
.empty-state i {
  font-size: 40px;
  color: var(--bs-secondary-color);
  opacity: 0.35;
  margin-bottom: 14px;
  display: block;
}
.empty-state h5 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.empty-state p {
  font-size: 13px;
  color: var(--bs-secondary-color);
  margin: 0;
}

/* Sub-nav (pills used in Tool Server) */
.nav-pills {
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  display: inline-flex;
}
.nav-pills .nav-link {
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bs-secondary-color);
  border-radius: 6px;
  transition: color 180ms, background 200ms;
}
.nav-pills .nav-link:hover:not(.active) {
  color: var(--bs-heading-color);
  background: rgba(0, 0, 0, 0.03);
}
.nav-pills .nav-link.active {
  color: #fff !important;
  background: linear-gradient(180deg, var(--ir-brand), var(--ir-brand-2)) !important;
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.34);
}

/* Tables — better spacing + header contrast */
.table {
  --bs-table-hover-bg: rgba(37, 99, 235, 0.04);
}
.table > thead > tr > th {
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--bs-border-color);
}
.table > tbody > tr > td {
  padding: 14px 18px;
  vertical-align: middle;
  font-size: 13.5px;
}

/* Badges — softer background variants + weight */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
}
.bg-label-success { background-color: rgba(16, 185, 129, 0.13) !important; color: var(--ir-success) !important; }
.bg-label-danger  { background-color: rgba(220, 38, 38, 0.11) !important; color: var(--ir-danger) !important; }
.bg-label-warning { background-color: rgba(217, 119, 6, 0.12)  !important; color: var(--ir-warning) !important; }
.bg-label-info    { background-color: rgba(14, 165, 233, 0.12) !important; color: var(--ir-info) !important; }
.bg-label-primary { background-color: rgba(37, 99, 235, 0.12) !important; color: var(--ir-brand) !important; }

/* Progress bars — subtle rounding + brand fill */
.progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--ir-brand), var(--ir-brand-2));
  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Form controls — brand focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--ir-brand);
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.14);
}
.form-check-input:checked {
  background-color: var(--ir-brand);
  border-color: var(--ir-brand);
}
.form-check-input:focus {
  border-color: var(--ir-brand);
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.14);
}

/* Sidebar brand — remove the ugly text-primary color on the mark background */
.app-brand-link .app-brand-logo > span {
  color: #fff !important;
}
.app-brand-text {
  color: var(--bs-heading-color) !important;
  font-size: 18px !important;
}

/* Hide the broken orange collapse-toggle circle — sidebar stays expanded.
   (Sneat's toggle renders as an empty orange circle because the FA icon
   doesn't pick up its block-size/inline-size sizing.) */
.menu .app-brand .layout-menu-toggle { display: none !important; }

/* Sidebar menu items — subtle icon color, sharper active */
.menu-vertical .menu-item .menu-link {
  padding: 10px 14px;
  border-radius: 8px;
  margin: 2px 6px;
  font-size: 14px;
}
.menu-vertical .menu-item .menu-link .menu-icon {
  font-size: 18px;
  margin-right: 10px;
  color: var(--bs-secondary-color);
}
.menu-vertical .menu-item.active .menu-link .menu-icon { color: #fff; }

/* Topbar clock + logout — tighten spacing */
[data-server-clock] {
  min-width: 172px;
  text-align: center;
  padding: 7px 14px !important;
}

/* Alerts (flash messages) */
.alert {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13.5px;
}
.alert i.icon-base { font-size: 18px; flex-shrink: 0; }

/* Toast improvements (Bootstrap 5 toast component we emit from JS) */
.toast {
  min-width: 320px;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.toast-body { padding: 14px 16px; font-size: 13.5px; }
.toast-header {
  padding: 10px 14px;
  font-weight: 600;
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color);
}
.toast.bg-danger  .toast-body,
.toast.bg-danger  .toast-header,
.toast.bg-success .toast-body,
.toast.bg-success .toast-header,
.toast.bg-primary .toast-body,
.toast.bg-primary .toast-header,
.toast.bg-warning .toast-body,
.toast.bg-warning .toast-header { color: #fff; }
.toast.bg-warning .toast-body,
.toast.bg-warning .toast-header { color: #1a1500; }

/* Buttons — better sizing rhythm */
.btn { font-weight: 500; }
.btn-primary,
.btn-danger,
.btn-success,
.btn-info,
.btn-warning { font-weight: 600; }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-group > .btn + .btn { margin-left: 4px; }

/* Container padding rhythm */
.content-wrapper > .container-xxl { padding-top: 28px; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SMOOTH MOTION — modals, page transitions, hovers                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ─── MODAL: gentle rise + fade instead of the abrupt -100px/scale(0.8) jump ─── */
.modal.fade .modal-dialog {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease-out;
  transform: translateY(18px) scale(0.97);
  opacity: 0;
}
.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-backdrop.fade      { transition: opacity 0.28s ease-out; }
.modal-backdrop.show      { opacity: 0.5; }
.modal-content {
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(15, 20, 34, 0.35), 0 0 0 1px rgba(15,20,34,0.04);
}

/* ─── MODAL CLOSE (X): clean circular button INSIDE the header ─── */
.modal-header {
  padding: 20px 22px;
  border-bottom: 1px solid var(--bs-border-color);
  align-items: center;
}
.modal-header .modal-title {
  font-size: 16px;
  font-weight: 600;
}
.modal-header .btn-close {
  margin: 0;                       /* kill Sneat's negative margins that detach it */
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: transparent;
  background-size: 0.75em;
  opacity: 0.6;
  transition: background-color 160ms ease-out, opacity 160ms ease-out, transform 160ms ease-out;
}
.modal-header .btn-close:hover {
  background-color: rgba(244, 82, 107, 0.12);
  opacity: 1;
  transform: rotate(90deg);
}
.modal-header .btn-close:focus { box-shadow: none; }
.modal-body   { padding: 22px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--bs-border-color); }

/* ─── PAGE CONTENT: subtle fade+rise on every server-rendered tab load ─── */
@keyframes ir-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-wrapper > .container-xxl {
  animation: ir-page-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger cards slightly so a grid doesn't pop in all at once */
@keyframes ir-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-wrapper .card {
  animation: ir-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.content-wrapper .row > [class*="col-"]:nth-child(1) .card { animation-delay: 0.02s; }
.content-wrapper .row > [class*="col-"]:nth-child(2) .card { animation-delay: 0.06s; }
.content-wrapper .row > [class*="col-"]:nth-child(3) .card { animation-delay: 0.10s; }
.content-wrapper .row > [class*="col-"]:nth-child(4) .card { animation-delay: 0.14s; }
.content-wrapper .row > [class*="col-"]:nth-child(5) .card { animation-delay: 0.18s; }
.content-wrapper .row > [class*="col-"]:nth-child(6) .card { animation-delay: 0.22s; }

/* ─── SIDEBAR menu items: smooth hover slide ─── */
.menu-vertical .menu-item .menu-link {
  transition: background-color 200ms ease-out, color 200ms ease-out, padding-inline-start 180ms ease-out;
}
.menu-vertical .menu-item:not(.active) .menu-link:hover {
  padding-inline-start: 18px;
}

/* ─── NAV PILLS: animated active fill ─── */
.nav-pills .nav-link {
  transition: color 180ms ease-out, background-color 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease-out;
}

/* ─── TABLE ROWS: gentle hover ─── */
.table > tbody > tr {
  transition: background-color 160ms ease-out;
}

/* ─── BUTTONS: unified smooth press ─── */
.btn {
  transition: background-color 180ms ease-out, border-color 180ms ease-out,
              color 180ms ease-out, box-shadow 200ms ease-out, transform 120ms ease-out;
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* ─── TOASTS: slide in from the right smoothly ─── */
@keyframes ir-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.bs-toast-stack .toast.show {
  animation: ir-toast-in 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── ALERTS: gentle drop-in ─── */
.content-wrapper > .container-xxl > .alert {
  animation: ir-page-in 0.3s ease-out both;
}

/* ─── SEGMENTED CONTROL (Operations filter) — clean, single-accent ─── */
.ops-segment {
  display: inline-flex;
  padding: 3px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  gap: 2px;
}
.ops-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 160ms ease-out, background-color 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease-out;
}
.ops-seg-btn:hover { color: var(--bs-heading-color); }
.ops-seg-btn.active {
  color: #fff;
  background: linear-gradient(180deg, var(--ir-brand), var(--ir-brand-2));
  box-shadow: 0 3px 8px -3px rgba(37, 99, 235, 0.45);
}

/* ─── DEVICE THUMBNAIL (Models table) ─── */
.ir-device-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}
.ir-device-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}
.ir-device-thumb__fallback {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--bs-secondary-color);
  font-size: 16px;
}
.ir-device-thumb__fallback { display: inline-flex; }

/* ─── ICON BUTTONS: cohesive hover feedback across the panel ─── */
.btn-icon {
  transition: background-color 160ms ease-out, border-color 160ms ease-out,
              color 160ms ease-out, transform 140ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 180ms ease-out;
}
.btn-icon:hover { transform: translateY(-1px) scale(1.05); }
.btn-icon:active { transform: translateY(0) scale(0.96); }

/* Action button groups in tables get a touch of breathing room */
.btn-group-sm > .btn-icon + .btn-icon { margin-left: 4px; }

/* Outline buttons: fill smoothly on hover instead of a hard swap */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-secondary {
  transition: background-color 200ms ease-out, border-color 200ms ease-out,
              color 200ms ease-out, box-shadow 200ms ease-out, transform 120ms ease-out;
}

/* KPI numbers count-up feel: subtle scale-in */
@keyframes ir-kpi-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.kpi-value { animation: ir-kpi-in 0.45s cubic-bezier(0.16,1,0.3,1) both; }

/* Badges: gentle appear */
.badge { transition: background-color 180ms ease-out, color 180ms ease-out; }

/* Modal-lg for the versions detail */
@media (min-width: 992px) {
  .modal-lg { --bs-modal-width: 640px; }
}

/* Input-group text (search icon, $) neutral border blend */
.input-group-text {
  background: rgba(0,0,0,0.02);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}

/* ─── STICKY TABLE HEADERS on tall tables (>12 rows worth) ─── */
.table-responsive { max-height: 620px; }
.table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* ─── LIVE BADGE PULSE (active/online states) ─── */
.badge-live::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: ir-badge-pulse 1.8s ease-out infinite;
  vertical-align: middle;
}
@keyframes ir-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(113,221,55,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(113,221,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(113,221,55,0); }
}

/* ─── PROGRESS BARS: animate fill width from 0 on first paint ─── */
@keyframes ir-progress-fill { from { width: 0 !important; } }
.content-wrapper .progress-bar { animation: ir-progress-fill 0.9s cubic-bezier(0.16,1,0.3,1) both; }

/* ─── STAT-CARD icon tile hover wiggle ─── */
.stat-card .card-body > span:first-child { transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
.stat-card:hover .card-body > span:first-child { transform: scale(1.08) rotate(-4deg); }

/* ─── CHART cards: gentle reveal ─── */
#chartActivity, #chartModels { animation: ir-page-in 0.5s cubic-bezier(0.16,1,0.3,1) both; }

/* ─── FOCUS-VISIBLE consistency (a11y) ─── */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.menu-link:focus-visible,
.ops-seg-btn:focus-visible {
  outline: 2px solid var(--ir-brand);
  outline-offset: 2px;
}

/* ─── BUTTON BUSY STATE (submit spinner without innerHTML swap) ─── */
/* .is-busy is added on submit by mag-admin.js. It fades the label + centers
   a small spinner over the button.
   Critical: Bootstrap's :disabled state OVERRIDES the button's color/bg/border
   via --bs-btn-disabled-* vars — that's why outline buttons looked filled with
   a dark "layer" during processing. We re-assert the original visual state
   here by pointing those vars back to the live theme vars. */
.btn.is-busy {
  position: relative;
  pointer-events: none;
  cursor: wait;
  color: transparent !important;
  /* Re-assert live styling so :disabled doesn't paint a dark overlay */
  --bs-btn-disabled-color:        var(--bs-btn-color);
  --bs-btn-disabled-bg:           var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
  --bs-btn-disabled-opacity:      1;
  opacity: 1 !important;
}
.btn.is-busy > * { opacity: 0; }   /* fully hide label/icons while spinner shows */
.btn.is-busy::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 1;
  color: inherit;
  animation: ir-btn-spin 0.7s linear infinite;
}
/* Filled buttons — spinner uses the fill's foreground (typically white) */
.btn.is-busy.btn-primary,
.btn.is-busy.btn-success,
.btn.is-busy.btn-danger,
.btn.is-busy.btn-warning,
.btn.is-busy.btn-info,
.btn.is-busy.btn-dark {
  /* Force the SAME filled colors as normal state — no dimming */
  background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg)) !important;
  border-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color)) !important;
}
.btn.is-busy.btn-primary::after,
.btn.is-busy.btn-success::after,
.btn.is-busy.btn-danger::after,
.btn.is-busy.btn-warning::after,
.btn.is-busy.btn-info::after,
.btn.is-busy.btn-dark::after {
  border-color: #fff;
  border-right-color: transparent;
}
/* Outline buttons — keep transparent bg, border stays the theme color */
.btn.is-busy[class*="btn-outline-"] {
  background-color: transparent !important;
}
@keyframes ir-btn-spin { to { transform: rotate(360deg); } }

/* ─── TIMELINE (device history / process log) ─── */
.ir-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; max-height: 40vh; overflow-y: auto; }
.ir-tl {
  position: relative;
  padding: 0 0 16px 22px;
  border-left: 2px solid var(--bs-border-color);
}
.ir-tl:last-child { border-left-color: transparent; padding-bottom: 4px; }
.ir-tl::before {
  content: "";
  position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bs-secondary-color);
  box-shadow: 0 0 0 3px var(--bs-card-bg);
}
.ir-tl--ok::before  { background: var(--ir-success); }
.ir-tl--bad::before { background: var(--ir-danger); }
.ir-tl--info::before{ background: var(--ir-info); }
.ir-tl__time { font-size: 11px; color: var(--bs-secondary-color); margin-bottom: 2px; }
.ir-tl__body { font-size: 13.5px; }

/* ─── Respect reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .kpi-value, .btn-icon, .content-wrapper .progress-bar,
  #chartActivity, #chartModels, .badge-live::before { animation: none !important; }
  .content-wrapper > .container-xxl,
  .content-wrapper .card,
  .bs-toast-stack .toast.show,
  .modal.fade .modal-dialog {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* MAG-TEAM hub modules */
.mag-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--ir-brand), var(--ir-brand-2));
  box-shadow: 0 8px 18px -8px rgba(37,99,235,.65);
}
.page-title {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--ir-brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.hub-health {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 999px;
  color: #047857;
  background: rgba(16,185,129,.08);
  font-size: 12px;
  white-space: nowrap;
}
.hub-health i { font-size: 7px; }
.avatar-initial { min-width: 46px; text-align: center; }
.flow-card { background: linear-gradient(135deg, rgba(37,99,235,.07), transparent 55%), var(--bs-card-bg); }
.hub-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.hub-flow > div { position: relative; min-width: 0; padding: 18px 10px; border: 1px solid var(--bs-border-color); border-radius: 12px; text-align: center; background: var(--bs-card-bg); }
.hub-flow > div > span { position: absolute; top: 7px; right: 8px; color: var(--bs-secondary-color); font-size: 10px; }
.hub-flow > div > i { display: block; margin: 4px auto 11px; color: var(--ir-brand); font-size: 22px; }
.hub-flow strong,.hub-flow small { display: block; }
.hub-flow strong { font-size: 12px; }
.hub-flow small { margin-top: 4px; color: var(--bs-secondary-color); font-size: 10px; }
.hub-flow > i { color: var(--ir-brand); opacity: .55; }
.financial-row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--bs-border-color); }
.financial-row:last-child { border: 0; }
.secret-box { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px 14px; padding: 14px; border: 1px solid rgba(16,185,129,.32); border-radius: 10px; background: rgba(16,185,129,.07); }
.secret-box code { overflow-wrap: anywhere; user-select: all; }
.provider-card { border-top: 3px solid var(--ir-brand); }
.provider-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; color: var(--ir-brand); background: rgba(37,99,235,.1); font-size: 22px; }
.provider-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.provider-meta > div { padding: 12px; border: 1px solid var(--bs-border-color); border-radius: 9px; }
.provider-meta span,.provider-meta strong { display:block; }
.provider-meta span { margin-bottom: 5px; color: var(--bs-secondary-color); font-size: 11px; }
.provider-meta strong { font-size: 12px; overflow-wrap: anywhere; }
.endpoint-line { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.api-code { margin: 0; padding: 18px; overflow: auto; border-radius: 10px; color: #d7e2ee; background: #111827; font: 12px/1.7 'JetBrains Mono',Consolas,monospace; }
.endpoint-list > div { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--bs-border-color); }
.endpoint-list > div:last-child { border: 0; }
.endpoint-list small { grid-column: 2; color: var(--bs-secondary-color); }
.security-list { margin: 0; padding-left: 0; list-style: none; }
.security-list li { position: relative; padding: 8px 0 8px 26px; }
.security-list li::before { content: '\f00c'; position: absolute; left: 0; color: var(--ir-success); font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.audit-json { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-card { border-left: 3px solid var(--ir-warning); }
.table code { font-size: 11px; }

@media (max-width: 991.98px) {
  .hub-flow { grid-template-columns: 1fr 1fr; }
  .hub-flow > i { display: none; }
}
@media (max-width: 575.98px) {
  .page-title { align-items: flex-start; flex-direction: column; }
  .hub-flow,.provider-meta { grid-template-columns: 1fr; }
  .secret-box { grid-template-columns: 1fr; }
  [data-server-clock] { display: none; }
}

/* Wompi — control administrativo y trazabilidad de recargas */
.payment-gateway-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}
.payment-gateway-tab {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--ir-border);
  border-radius: 14px;
  color: var(--ir-ink);
  background: #fff;
  box-shadow: 0 12px 28px -25px rgba(15, 23, 42, .7);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.payment-gateway-tab:hover { transform: translateY(-1px); border-color: #afbbc9; box-shadow: 0 18px 34px -27px rgba(15, 23, 42, .75); }
.payment-gateway-tab:disabled,
.payment-gateway-tab.is-disabled { opacity: 1; color: #64748b; border-color: #d8e0ea; background: #f8fafc; transform: none; box-shadow: none; cursor: not-allowed; }
.payment-gateway-tab:disabled:hover,
.payment-gateway-tab.is-disabled:hover { border-color: #d8e0ea; background: #f8fafc; transform: none; box-shadow: none; }
.payment-gateway-tab:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.payment-gateway-tab.active.payment-gateway-tab-wompi { border-color: rgba(0,130,90,.62); background: linear-gradient(135deg, rgba(176,242,174,.22), #fff 56%); box-shadow: 0 16px 34px -27px rgba(0,130,90,.8); }
.payment-gateway-tab.active.payment-gateway-tab-binance { border-color: rgba(240,185,11,.75); background: linear-gradient(135deg, rgba(240,185,11,.16), #fff 56%); box-shadow: 0 16px 34px -27px rgba(190,143,0,.85); }
.payment-gateway-tab-logo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #b0f2ae;
}
.payment-gateway-tab-binance .payment-gateway-tab-logo { background: #f0b90b; }
.payment-gateway-tab-logo img { display: block; width: 32px; height: 32px; object-fit: contain; }
.payment-gateway-tab-copy { min-width: 0; }
.payment-gateway-tab-copy strong,
.payment-gateway-tab-copy small { display: block; }
.payment-gateway-tab-copy strong { color: var(--bs-heading-color); font-size: .95rem; }
.payment-gateway-tab-copy small { margin-top: 3px; color: var(--ir-muted, #64748b); font-size: .78rem; }
.payment-gateway-tab-state { display: inline-flex; align-items: center; gap: 6px; color: #78869a; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.payment-gateway-tab-state i { font-size: .45rem; }
.payment-gateway-tab-state.is-active { color: #07845f; }
.payment-gateway-panes > .tab-pane { outline: none; }
.payment-card-title-logo { width: 22px; height: 22px; margin-right: 7px; object-fit: contain; vertical-align: -5px; }
.wompi-status-card { overflow: hidden; background: linear-gradient(145deg, rgba(37,99,235,.08), transparent 48%), var(--bs-card-bg); }
.binance-status-card { overflow: hidden; background: linear-gradient(145deg, rgba(240,185,11,.12), transparent 48%), var(--bs-card-bg); }
.payment-gateway-brand { display: flex; align-items: center; gap: 14px; }
.payment-gateway-brand > span { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--ir-brand), var(--ir-brand-2)); box-shadow: 0 10px 24px rgba(37,99,235,.24); }
.payment-gateway-brand > span.is-wompi { background: #b0f2ae; box-shadow: 0 10px 24px rgba(0,130,90,.17); }
.payment-gateway-brand > span img { display: block; width: 30px; height: 30px; object-fit: contain; }
.payment-gateway-brand strong,.payment-gateway-brand small { display: block; }
.payment-gateway-brand strong { color: var(--bs-heading-color); font-size: 1rem; }
.payment-gateway-brand small { margin-top: 3px; color: var(--bs-secondary-color); }
.payment-gateway-brand.payment-gateway-brand-binance > span { color: #181a20; background: linear-gradient(135deg, #f8d33a, #f0b90b); box-shadow: 0 10px 24px rgba(240,185,11,.28); }
.btn-binance { color: #181a20; border-color: #f0b90b; background: #f0b90b; font-weight: 700; }
.btn-binance:hover,.btn-binance:focus { color: #181a20; border-color: #dca900; background: #dca900; }
.payment-gateway-brand-c2c > span { color: #fff; background: #0b3a91; }
.btn-c2c { color: #fff; border-color: #0b3a91; background: #0b3a91; font-weight: 700; }
.btn-c2c:hover,.btn-c2c:focus { color: #fff; border-color: #082c70; background: #082c70; }
.payment-switch { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: rgba(255,255,255,.65); }
.payment-switch .form-check-input { width: 3.25rem; height: 1.7rem; margin: 0; flex: 0 0 auto; cursor: pointer; }
.payment-switch .form-check-label { display: grid; gap: 2px; cursor: pointer; }
.payment-switch .form-check-label small { color: var(--bs-secondary-color); font-weight: 400; }
.gateway-checks { display: grid; gap: 12px; }
.gateway-checks > div { display: flex; align-items: center; gap: 11px; color: var(--ir-danger); }
.gateway-checks > div.is-ready { color: var(--ir-success); }
.gateway-checks span strong,.gateway-checks span small { display: block; }
.gateway-checks span strong { color: var(--bs-heading-color); font-size: .875rem; }
.gateway-checks span small { color: var(--bs-secondary-color); font-size: .78rem; }
.wompi-endpoint { overflow: hidden; }
.wompi-endpoint code { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .payment-gateway-tabs { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  .payment-gateway-tab { grid-template-columns: 46px minmax(0, 1fr); padding: 12px 13px; }
  .payment-gateway-tab-logo { width: 46px; height: 46px; border-radius: 12px; }
  .payment-gateway-tab-logo img { width: 28px; height: 28px; }
  .payment-gateway-tab-state { grid-column: 2; margin-top: -7px; }
  .payment-switch { align-items: flex-start; padding: 15px; }
}

/* Corporate blue visual system */
body,
.content-wrapper {
  color: var(--ir-ink);
  background-color: var(--ir-background);
}

.layout-menu.bg-menu-theme {
  --bs-menu-color: #94a3b8;
  --bs-menu-hover-color: #f8fafc;
  --bs-menu-hover-bg: rgba(56, 189, 248, .11);
  color: #f1f5f9;
  background: var(--ir-sidebar) !important;
  box-shadow: 14px 0 38px -34px rgba(15, 23, 42, 0.9);
}
.layout-menu .app-brand-text,
.layout-menu .app-brand-link,
.layout-menu .menu-header-text {
  color: #f8fafc !important;
}
.layout-menu .menu-header-text { opacity: .62; }
.layout-menu .menu-inner-shadow { background: linear-gradient(var(--ir-sidebar) 41%, rgba(30, 41, 59, .1) 95%, transparent); }
.layout-menu .menu-vertical .menu-item .menu-link,
.layout-menu.menu-vertical .menu-item .menu-link {
  color: #94a3b8;
}
.layout-menu .menu-vertical .menu-item .menu-link .menu-icon,
.layout-menu.menu-vertical .menu-item .menu-link .menu-icon {
  color: #64748b;
}
.layout-menu.menu-vertical .menu-inner > .menu-item:not(.active):not(.open) > .menu-link:hover,
.layout-menu.menu-vertical .menu-inner > .menu-item:not(.active):not(.open) > .menu-link:focus,
.layout-menu .menu-item:not(.active) > .menu-link:hover,
.layout-menu .menu-item:not(.active) > .menu-link:focus {
  color: #f8fafc !important;
  background: rgba(56, 189, 248, .11) !important;
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, .45);
}
.layout-menu.menu-vertical .menu-inner > .menu-item:not(.active):not(.open) > .menu-link:hover .menu-icon,
.layout-menu.menu-vertical .menu-inner > .menu-item:not(.active):not(.open) > .menu-link:focus .menu-icon,
.layout-menu .menu-item:not(.active) > .menu-link:hover .menu-icon,
.layout-menu .menu-item:not(.active) > .menu-link:focus .menu-icon {
  color: #7dd3fc !important;
}
.layout-menu .menu-item.active > .menu-link:not(.menu-toggle),
.layout-menu .menu-item.active > .menu-link:not(.menu-toggle):hover {
  color: #fff !important;
  background: rgba(37, 99, 235, .20) !important;
  box-shadow: inset 3px 0 0 var(--ir-brand-2), 0 8px 22px -18px rgba(14, 165, 233, .95);
}
.layout-menu .menu-item.active > .menu-link .menu-icon { color: #38bdf8 !important; }

.layout-navbar,
.card,
.modal-content,
.dropdown-menu {
  border-color: var(--ir-border) !important;
}
.layout-navbar { box-shadow: 0 6px 28px -24px rgba(15, 23, 42, .55) !important; }
.card {
  border: 1px solid var(--ir-border);
  border-radius: 12px;
  box-shadow: 0 8px 28px -24px rgba(15, 23, 42, .5);
}
.card:hover { border-color: rgba(14, 165, 233, .38); }
.table > thead > tr > th { color: var(--ir-muted); background: #f8fafc; }
.page-title h4,
.card-title,
.kpi-value { color: var(--ir-ink); }
.page-title p,
.text-muted { color: var(--ir-muted) !important; }

.mag-logo,
.payment-gateway-brand > span {
  background: linear-gradient(135deg, var(--ir-brand), var(--ir-brand-2));
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .55);
}
.flow-card { background: linear-gradient(135deg, rgba(37, 99, 235, .065), transparent 58%), var(--bs-card-bg); }
.provider-icon { background: rgba(37, 99, 235, .10); }
.wompi-status-card { background: linear-gradient(145deg, rgba(37, 99, 235, .075), transparent 48%), var(--bs-card-bg); }
.payment-switch { background: rgba(248, 250, 252, .82); }

.hub-health {
  color: #047857;
  border-color: rgba(16, 185, 129, .28);
  background: rgba(16, 185, 129, .08);
}
.secret-box {
  border-color: rgba(16, 185, 129, .28);
  background: rgba(16, 185, 129, .07);
}
.security-list li::before,
.gateway-checks > div.is-ready { color: var(--ir-success); }
.gateway-checks > div { color: var(--ir-danger); }
.pending-card { border-left-color: var(--ir-warning); }