/* =========================================================================
   Skyblocks — Redesign Overlay
   ---------------------------------------------------------------------------
   Loaded AFTER black-dashboard.css. Re-skins the existing Bootstrap-based
   layout (.wrapper, .sidebar, .navbar, .main-panel, .card, .table, .btn,
   .form-control, .dropdown-menu) using the design tokens from
   skyblocks-tokens.css. Layout structure stays untouched.
   ========================================================================= */

/* ------------- Body & shell ------------- */
html, body {
  font-family: var(--font-sans) !important;
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  font-size: var(--fs-body);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

/* Restore Bootstrap .row grid behavior — prototype's helper .row would
   otherwise strip negative margins and wrapping. Inner views rely on BS grid. */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-right: -15px;
  margin-left: -15px;
  align-items: stretch !important;
  gap: 0 !important;
}
.row > [class^="col-"], .row > [class*=" col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

body.white-content {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
}

::selection { background: var(--accent-soft); color: var(--text-primary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

:focus-visible {
  outline: 2px solid var(--accent-ring) !important;
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.wrapper {
  background: var(--bg-base);
  min-height: 100vh;
}

/* We use .app class for prototype's [data-sidebar=...] selectors to work,
   but our layout is fixed-sidebar + margin-left main-panel, not CSS grid. */
.app, .wrapper.app {
  display: block !important;
  grid-template-columns: none !important;
}

/* ICONS MODE — labels truly hidden so icons can center cleanly */
html[data-sidebar="icons"] .sidebar { width: var(--sidebar-w-collapsed) !important; }
html[data-sidebar="icons"] .sidebar-brand-name,
html[data-sidebar="icons"] .sidebar-section-label,
html[data-sidebar="icons"] .nav-item-label,
html[data-sidebar="icons"] .nav-item-badge,
html[data-sidebar="icons"] .nav-item-caret,
html[data-sidebar="icons"] .sidebar-footer-text,
html[data-sidebar="icons"] .sidebar-brand .faint {
  display: none !important;
}
html[data-sidebar="icons"] .nav-subgroup { display: none !important; }

/* Sidebar collapse — replace prototype's grid-template-rows trick with a
   classic max-height animation. The grid trick relies on `grid-template-rows`
   interpolation which only landed in Chrome 99 / Firefox 102 / Safari 16 and
   even there can leave a subgroup visible at random. max-height transitions
   work in every browser since IE10 and reliably hide content via overflow. */
.nav-subgroup {
  display: block !important;
  overflow: hidden !important;
  max-height: 400px;                          /* covers the largest subgroup
                                                 (Logs ~9 items × 32px ≈ 290px) */
  grid-template-rows: none !important;        /* neutralize prototype's grid rule */
  transition: max-height var(--dur-slow) var(--ease-out) !important;
}
.nav-subgroup.collapsed {
  max-height: 0 !important;
  grid-template-rows: 0fr !important;       /* keep for any browser that
                                                does honor it — both rules
                                                lead to the same hidden state */
}
html[data-sidebar="icons"] .nav-item.active::before { display: none !important; }
html[data-sidebar="floating"] .nav-item.active::before { display: none !important; }

/* Sidebar `.nav-item` rendered as <button> (collapse-toggles like
   #sb-grp-generate / #sb-grp-multisend / #sb-grp-voip / #sb-grp-logs)
   gets the browser-default <button> border + background. Reset so it
   looks identical to <a class="nav-item"> items. */
button.nav-item,
.sidebar button.nav-item,
.sidebar .nav-item.sb-collapse-toggle {
  background: transparent !important;
  border: 0 !important;
  outline: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
          appearance: none;
  box-shadow: none !important;
  text-decoration: none;
}
button.nav-item:hover,
.sidebar button.nav-item:hover {
  background: var(--row-hover) !important;
  color: var(--text-primary) !important;
}
button.nav-item:focus-visible,
.sidebar button.nav-item:focus-visible {
  outline: 2px solid var(--accent-ring) !important;
  outline-offset: -2px;
}
/* When the subgroup is expanded, the toggle button stays subtly highlighted
   so the user knows which group is open — but still no border. */
.nav-item.sb-collapse-toggle.expanded {
  background: var(--row-hover) !important;
  color: var(--text-primary) !important;
}

/* Parent (collapse-toggle) of an active child — show accent-colored icon,
   stronger label color, but no full bg (which would feel too heavy). */
.nav-item.sb-collapse-toggle.has-active-child {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.nav-item.sb-collapse-toggle.has-active-child .nav-item-icon {
  color: var(--accent);
  opacity: 1;
}
.nav-item.sb-collapse-toggle.has-active-child:hover {
  background: var(--row-hover) !important;
}

/* Sub-group containing the active item — fine-tune indent visualization */
.nav-subgroup-inner {
  position: relative;
}
.nav-subgroup-inner::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border-subtle);
  opacity: 0.6;
}

/* Center icons in the 60px-wide rail */
html[data-sidebar="icons"] .sidebar-brand {
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}
html[data-sidebar="icons"] .sidebar-brand-mark { margin: 0 auto !important; }
html[data-sidebar="icons"] .sidebar-scroll { padding: 12px 6px !important; }
html[data-sidebar="icons"] .nav-item {
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
}
html[data-sidebar="icons"] .nav-item-icon { margin: 0 !important; }
html[data-sidebar="icons"] .sidebar-footer { padding: 10px 6px !important; }
html[data-sidebar="icons"] .sidebar-footer-user {
  padding: 6px !important;
  justify-content: center !important;
  gap: 0 !important;
}
html[data-sidebar="icons"] .sidebar-section-label { padding: 6px 0 !important; height: 0; overflow: hidden; }
html[data-sidebar="icons"] .main-panel {
  margin-left: var(--sidebar-w-collapsed) !important;
  width: calc(100% - var(--sidebar-w-collapsed)) !important;
}
html[data-sidebar="icons"] .navbar.fixed-top {
  left: var(--sidebar-w-collapsed) !important;
}

.main-panel {
  background: var(--bg-base) !important;
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  transition: margin-left var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}

.main-panel > .content {
  padding: var(--s-6) var(--s-6) var(--s-7);
  margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
  /* IMPORTANT: animation must NOT include `transform` — any `transform`
     applied to .content (even translateY(0) after a keyframe finishes
     with `animation-fill-mode: both`) creates a new stacking context.
     That stacking context would trap Bootstrap's `.modal-backdrop`
     (which BS JS appends to <body>) ABOVE the modal — modal becomes
     unclickable. Opacity-only fade is safe. */
  animation: sb-page-fade 260ms var(--ease-out) both;
}
@keyframes sb-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .main-panel > .content { animation: none; }
}

/* Compact sidebar */
[data-sidebar="icons"] .main-panel {
  margin-left: var(--sidebar-w-collapsed);
  width: calc(100% - var(--sidebar-w-collapsed));
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  background: var(--bg-canvas) !important;
  border-right: 1px solid var(--border-subtle) !important;
  width: var(--sidebar-w) !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10;
  transition: width var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sidebar::before,
.sidebar::after { display: none !important; }

[data-sidebar="icons"] .sidebar { width: var(--sidebar-w-collapsed) !important; }

/* Floating mode — detached glass panel inset 12px */
[data-sidebar="floating"] .sidebar {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  bottom: 12px !important;
  height: auto !important;
  width: var(--sidebar-w) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border-default) !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg) !important;
  z-index: var(--z-drawer);
  overflow: hidden;
}
[data-sidebar="floating"] .sidebar .sb-brand { border-bottom-color: transparent !important; }
[data-sidebar="floating"] .main-panel {
  margin-left: calc(var(--sidebar-w) + 24px) !important;
  width: calc(100% - var(--sidebar-w) - 24px) !important;
}
[data-sidebar="floating"] .navbar.fixed-top {
  left: calc(var(--sidebar-w) + 24px) !important;
}

.sidebar .sidebar-wrapper {
  background: transparent !important;
  padding: 0 !important;
  overflow-x: hidden;
  display: flex !important;
  flex-direction: column;
  height: 100vh;
}

/* Brand row — same height as topbar so the line between them aligns */
.sidebar .sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.sidebar .sb-brand-mark {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}
.sidebar .sb-brand-mark svg { width: 100%; height: 100%; }
.sidebar .sb-brand-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--dur) var(--ease-out);
}
.sidebar .sb-brand-version {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  margin-left: 4px;
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease-out);
}
[data-sidebar="icons"] .sb-brand-name,
[data-sidebar="icons"] .sb-brand-version { opacity: 0; pointer-events: none; }

.sidebar .nav {
  padding: 12px 8px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  scrollbar-width: thin;
}

.sidebar .nav-section-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--s-4) var(--s-3) var(--s-2);
  transition: opacity var(--dur) var(--ease-out);
}
[data-sidebar="icons"] .nav-section-label { opacity: 0; height: var(--s-3); padding: var(--s-3) 0 0; pointer-events: none; }

.sidebar .nav li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar .nav li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: var(--r-sm);
  color: var(--text-secondary) !important;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  background: transparent !important;
  text-transform: none !important;
  opacity: 1 !important;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
[data-density="compact"] .sidebar .nav li > a { height: 28px; }

.sidebar .nav li > a::before {
  display: none !important;
}

.sidebar .nav li > a i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  margin-right: 0 !important;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.sidebar .nav li > a p,
.sidebar .nav li > a .nav-link-text {
  margin: 0 !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  color: inherit !important;
  text-transform: none !important;
  transition: opacity var(--dur) var(--ease-out);
}

[data-sidebar="icons"] .sidebar .nav li > a p,
[data-sidebar="icons"] .sidebar .nav li > a .nav-link-text,
[data-sidebar="icons"] .sidebar .nav li > a .caret { opacity: 0; pointer-events: none; }

.sidebar .nav li > a:hover {
  background: var(--row-hover) !important;
  color: var(--text-primary) !important;
}
.sidebar .nav li > a:hover i { color: var(--text-secondary); }

.sidebar .nav li.active > a,
.sidebar .nav li.active > a:focus,
.sidebar .nav li.active > a:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.sidebar .nav li.active > a i { color: var(--accent) !important; }

.sidebar .nav .caret {
  margin-left: auto !important;
  font-size: 9px !important;
  color: var(--text-tertiary);
  transition: transform var(--dur) var(--ease-out);
  border: none !important;
}
.sidebar .nav [aria-expanded="true"] .caret { transform: rotate(180deg); }

.sidebar .collapse .nav,
.sidebar .collapsing .nav {
  margin: 2px 0 4px 22px;
  padding-left: 8px !important;
  border-left: 1px solid var(--border-subtle);
}
.sidebar .collapse .nav li > a,
.sidebar .collapsing .nav li > a { font-size: var(--fs-sm); }

[data-sidebar="icons"] .sidebar .collapse,
[data-sidebar="icons"] .sidebar .collapsing { display: none !important; }

/* Sidebar footer */
.sidebar-foot {
  margin-top: auto;
  padding: var(--s-3) var(--s-2);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-foot-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.sidebar-foot-user:hover { background: var(--row-hover); }
.sidebar-foot-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.sidebar-foot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-foot-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  transition: opacity var(--dur) var(--ease-out);
  text-align: left;
  line-height: 1.25;
}
.sidebar-foot-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-foot-role {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-foot-tweaks {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sidebar-foot-tweaks:hover { background: var(--row-hover); color: var(--text-primary); }
[data-sidebar="icons"] .sidebar-foot-text,
[data-sidebar="icons"] .sidebar-foot-tweaks { opacity: 0; pointer-events: none; }

/* ============================================================
   Topbar (navbar.fixed-top)
   ============================================================ */
.navbar.navbar-inverse.fixed-top,
.main-panel > .navbar.fixed-top {
  position: fixed !important;
  top: 0;
  right: 0;
  left: var(--sidebar-w);
  width: auto !important;
  height: var(--topbar-h) !important;
  min-height: var(--topbar-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: var(--z-sticky);
  transition: left var(--dur) var(--ease-out);
}
/* Inner .topbar (prototype) carries the actual chrome */
.navbar.fixed-top > .topbar {
  width: 100%;
  height: 100%;
}
[data-sidebar="icons"] .navbar.fixed-top { left: var(--sidebar-w-collapsed); }

.navbar.fixed-top .container-fluid {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Hide ugly legacy brand image / logo + toggle inside topbar */
.navbar.fixed-top .navbar-wrapper { display: contents !important; }
.navbar.fixed-top .navbar-brand { display: none !important; }
.navbar.fixed-top .logo { display: none !important; }
.navbar.fixed-top .label_toggle { display: none !important; }
.navbar.fixed-top #darkmode-toggle { display: none !important; }
.navbar.fixed-top .navbar-toggle { display: none !important; }

/* New topbar slot elements */
.topbar-collapse {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  border: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topbar-collapse:hover { background: var(--row-hover); color: var(--text-primary); }

.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  min-width: 0;
  flex: 0 1 auto;
}
.topbar-breadcrumb .crumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-breadcrumb .crumb.last {
  color: var(--text-primary);
  font-weight: 500;
}
.topbar-breadcrumb .sep {
  color: var(--text-disabled);
  font-size: 10px;
}

.topbar-spacer { flex: 1 1 auto; }

.topbar-search {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-3);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  cursor: pointer;
  min-width: 220px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.topbar-search:hover { border-color: var(--border-default); color: var(--text-secondary); }
.topbar-search .kbd {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--text-tertiary);
}

.topbar-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: transparent;
  border: 0 !important;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topbar-icon-btn:hover { background: var(--row-hover); color: var(--text-primary); }
.topbar-icon-btn:focus, .topbar-icon-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.topbar-icon-btn .dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 6px; height: 6px;
  background: var(--accent);
  border: 1.5px solid var(--bg-canvas);
  border-radius: 50%;
}

/* Prototype's .icon-btn.has-dot uses border for the dot ring;
   replace with box-shadow so it works on glass/transparent topbar bg. */
.icon-btn.has-dot::after {
  content: "" !important;
  position: absolute;
  top: 7px !important;
  right: 7px !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--accent) !important;
  border: 0 !important;
  box-shadow: 0 0 0 2px var(--bg-canvas) !important;
  border-radius: 50% !important;
}

/* Default button reset for our scope (some pages load before tokens.css globals).
   IMPORTANT: include `border: 0` and `outline: 0` so native <button> rendering /
   black-dashboard.css's default button border doesn't leak through. */
button.icon-btn,
button.topbar-icon-btn,
a.icon-btn,
.icon-btn {
  background: transparent !important;
  border: 0 !important;
  outline: 0;
  padding: 0;
  font: inherit;
  color: var(--text-secondary) !important;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
          appearance: none;
}
/* Apply the prototype hover/active states with priority — otherwise
   .btn:hover from black-dashboard wins on raw <button>s. */
.icon-btn:hover,
button.icon-btn:hover,
a.icon-btn:hover {
  background: var(--row-hover) !important;
  color: var(--text-primary) !important;
  border: 0 !important;
}
.icon-btn:focus-visible {
  outline: 2px solid var(--accent-ring) !important;
  outline-offset: 1px;
}
.icon-btn:active { background: var(--bg-surface-3) !important; }

.topbar-ws {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-3);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.topbar-ws:hover { border-color: var(--border-default); background: var(--bg-surface-2); }
.topbar-ws .ws-region {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topbar-avatar {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* legacy nav fixes inside topbar */
.navbar.fixed-top .navbar-nav { flex-direction: row !important; align-items: center !important; gap: var(--s-2); margin: 0 !important; }
.navbar.fixed-top .navbar-nav .nav-link { padding: 0 !important; color: var(--text-primary) !important; }
.navbar.fixed-top .dropdown-toggle::after { display: none !important; }
.navbar.fixed-top .photo {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.navbar.fixed-top .photo img { width: 100%; height: 100%; object-fit: cover; }
.navbar.fixed-top .caret { display: none !important; }
.navbar.fixed-top .nav-item .separator { display: none !important; }

/* ============================================================
   Dropdowns (used in topbar + filter menus)
   ============================================================ */
.dropdown-menu {
  background: var(--bg-surface-3) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--s-2) !important;
  font-size: var(--fs-sm) !important;
  min-width: 180px;
}
.dropdown-menu::before,
.dropdown-menu::after { display: none !important; }
.dropdown-item,
.dropdown-menu .dropdown-item {
  color: var(--text-secondary) !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 10px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500;
  background: transparent !important;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
  background: var(--row-hover) !important;
  color: var(--text-primary) !important;
}
.dropdown-divider { border-top: 1px solid var(--border-subtle) !important; margin: var(--s-2) 0; }

/* ============================================================
   Buttons — neutral fallback for plain `.btn` with NO color modifier.
   The exclusion list MUST cover both naming schemes so that colored
   variants (.btn-primary / .btn.primary / .btn-danger / .btn.danger /
   .btn-outline-* / .btn-link) win their own rules. Without this, the
   7-class :not() specificity would beat single-class .btn-danger and
   turn ALL action buttons gray.
   ============================================================ */
.btn:not(.primary):not(.secondary):not(.ghost):not(.danger):not(.subtle):not(.icon-only):not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-success):not(.btn-outline-default) {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  height: var(--control-h) !important;
  padding: 0 var(--s-4) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:not(.primary):not(.secondary):not(.ghost):not(.danger):not(.subtle):not(.icon-only):not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-link):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-success):not(.btn-outline-default):hover {
  background: var(--bg-surface-3) !important;
  border-color: var(--border-default) !important;
  transform: none !important;
}
.btn:focus, .btn:active { box-shadow: 0 0 0 2px var(--accent-ring) !important; }

.btn-primary, .btn-info, .btn-success {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg) !important;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btn-danger, .btn-warning {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-warning:hover { filter: brightness(1.08); }

.btn-secondary {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
.btn-secondary:hover { background: var(--bg-surface-3) !important; }

.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}
.btn-link:hover { background: var(--accent-soft) !important; color: var(--accent-hover) !important; }

.btn-sm { height: var(--control-h-sm) !important; padding: 0 var(--s-3) !important; font-size: var(--fs-xs) !important; }
.btn-lg { height: var(--control-h-lg) !important; padding: 0 var(--s-5) !important; font-size: var(--fs-body) !important; }
.btn-block { width: 100%; }
.btn-round { border-radius: var(--r-full) !important; }

/* ============================================================
   Forms
   ============================================================ */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="date"].form-control {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-sm) !important;
  height: var(--control-h) !important;
  padding: 0 var(--s-3) !important;
  font-size: var(--fs-sm) !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea.form-control { height: auto !important; padding: var(--s-2) var(--s-3) !important; min-height: 80px; }
.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-tertiary); }

.form-control.is-invalid,
.has-danger .form-control {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

.input-group {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden;
  margin-bottom: var(--s-3);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input-group:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-ring) !important; }
.input-group .form-control {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.input-group .form-control:focus { box-shadow: none !important; }
.input-group-prepend,
.input-group-append { background: transparent; }
.input-group-text {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-tertiary) !important;
  padding: 0 var(--s-3) !important;
}

label,
.label_filter,
.form-label {
  font-size: var(--fs-xs) !important;
  font-weight: 500;
  color: var(--text-secondary) !important;
  margin-bottom: 4px !important;
  display: inline-block;
  letter-spacing: -0.005em;
}

/* Select2 inside cards */
.select2-container--default .select2-selection--single {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--r-sm) !important;
  height: var(--control-h) !important;
  padding: 0 var(--s-3) !important;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: var(--control-h) !important;
  padding: 0 !important;
}
.select2-dropdown {
  background: var(--bg-surface-3) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
.select2-results__option {
  color: var(--text-primary) !important;
  font-size: var(--fs-sm);
  padding: 6px 10px;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--accent-soft) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--s-4);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--s-4) var(--s-5) !important;
  color: var(--text-primary) !important;
}
.card-body { padding: var(--s-4) var(--s-5) !important; color: var(--text-primary) !important; }
.card-title { color: var(--text-primary) !important; font-weight: 600; font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.card-category, .card-subtitle, .text-muted {
  color: var(--text-tertiary) !important;
  font-size: var(--fs-xs);
}

/* ============================================================
   Tables
   ============================================================ */
.table {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0;
  margin-bottom: 0;
  font-size: var(--fs-sm);
}
.table thead th,
.table > thead > tr > th {
  background: var(--bg-surface-2) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-tertiary) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 12px !important;
  text-align: left !important;
  white-space: nowrap !important;
  user-select: none !important;
}
.table tbody td,
.table > tbody > tr > td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-color: var(--border-subtle) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 0 12px !important;
  vertical-align: middle !important;
  font-size: var(--fs-sm);
  height: var(--row-h);
}
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table-hover tbody tr:hover td {
  background: var(--row-hover) !important;
}
.table tbody tr:nth-child(even) td {
  background: var(--row-zebra);
}
.table tbody tr:nth-child(even):hover td {
  background: var(--row-hover) !important;
}

/* numeric cells should be tabular */
.table td.mono, .table td.tabular,
.table td.text-right, .table td .mono {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.trans_header,
th.trans_header {
  background: var(--bg-surface-2) !important;
  color: var(--text-tertiary) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trans_body { color: var(--text-secondary); }

.copy-btn { color: var(--text-tertiary) !important; transition: color var(--dur-fast) var(--ease-out); }
.copy-btn:hover { color: var(--accent) !important; }

/* Pagination */
.pagination { gap: 2px; }
.pagination .page-item .page-link,
.pagination li a, .pagination li span {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--r-sm) !important;
  min-width: 32px;
  height: var(--control-h-sm);
  padding: 0 var(--s-2) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  margin: 0 1px;
}
.pagination .page-item.active .page-link,
.pagination .active a, .pagination .active span {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.pagination .page-item:not(.active) .page-link:hover,
.pagination li a:hover {
  background: var(--row-hover) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   Modals — restore Bootstrap behavior
   Prototype's .modal { display:flex; max-width:480px; ... } would turn
   BS's outer .modal (a fullscreen overlay) into a 480px card. We override
   prototype's rules so BS modals work and the visible card is .modal-content.
   ============================================================ */
.modal:not(.in):not(.show) { display: none; }
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  z-index: 1055 !important;          /* above everything (preloader 9999 is the only exception) */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  animation: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0;
  pointer-events: auto !important;
}
.modal.show, .modal.in { display: block !important; }
.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto !important;
  max-width: 500px;
  pointer-events: none;
}
.modal-dialog.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}
.modal-dialog.modal-lg { max-width: 800px; }
.modal-dialog.modal-sm { max-width: 300px; }
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
  outline: 0;
  overflow: hidden;
  animation: sb-modal-in 200ms var(--ease-out);
}
@keyframes sb-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 18px 20px 12px !important;
  border-bottom: 0 !important;
  gap: 12px;
}
.modal-body { padding: 4px 20px 18px !important; overflow-y: auto; }
.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 14px 20px !important;
  border-top: 1px solid var(--border-subtle) !important;
  gap: 8px !important;
}
.modal-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: var(--fs-h2) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}
.modal .close {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
}
.modal .close:hover { color: var(--text-primary); }

/* Bootstrap inserts .modal-backdrop dynamically */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  z-index: 1050 !important;        /* below modal (1055), above everything else */
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-backdrop.fade { opacity: 0 !important; }
.modal-backdrop.show, .modal-backdrop.in { opacity: 1 !important; }

body.modal-open { overflow: hidden; }

/* ============================================================
   Alerts / Toastr / status pills
   ============================================================ */
#toast-container .toast { box-shadow: var(--shadow-lg) !important; border-radius: var(--r-md) !important; }
#toast-container .toast-success { background-color: var(--success) !important; }
#toast-container .toast-error { background-color: var(--danger) !important; }
#toast-container .toast-warning { background-color: var(--warning) !important; }
#toast-container .toast-info { background-color: var(--info) !important; }

.badge {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: var(--r-full);
  text-transform: uppercase;
}
.badge.bg-success, .badge-success { background: var(--success-bg) !important; color: var(--success) !important; }
.badge.bg-warning, .badge-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.badge.bg-danger, .badge-danger { background: var(--danger-bg) !important; color: var(--danger) !important; }
.badge.bg-info, .badge-info { background: var(--info-bg) !important; color: var(--info) !important; }

/* ============================================================
   Preloader override — branded full-viewport
   ============================================================ */
.preloader {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: var(--bg-base) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  padding-top: 0 !important;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 320ms;
}
/* Hide preloader once the page is ready. We honor BOTH:
     - body.app-ready  (set by skyblocks-shell.js on window.load)
     - body.loaded     (legacy hook from layouts/app.blade.php)
   so a missed/blocked script (reCAPTCHA, etc.) never traps the user. */
body.app-ready .preloader,
body.loaded .preloader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 320ms !important;
}
.preloader::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 60%);
          mask-image: radial-gradient(ellipse at center, black 0%, transparent 60%);
  pointer-events: none;
}
.preloader::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16) 0%, transparent 60%);
  pointer-events: none;
  animation: sb-preloader-glow 2.2s ease-in-out infinite;
}
.preloader > svg { display: none !important; } /* hide legacy spinning logo */

.sb-preloader-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  z-index: 1;
}
.sb-preloader-mark {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-preloader-mark-inner {
  width: 56px;
  height: 56px;
  color: var(--text-primary);
  animation: sb-preloader-pulse 1.6s ease-in-out infinite;
}
.sb-preloader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--accent);
  border-right-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.4);
  animation: sb-preloader-spin 1.2s linear infinite;
}
.sb-preloader-ring.b {
  inset: -10px;
  border-width: 1px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.25);
  border-left-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.1);
  animation: sb-preloader-spin 2.4s linear infinite reverse;
}
.sb-preloader-name {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  text-align: center;
}
.sb-preloader-name strong {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.42em;
  margin-bottom: 6px;
  font-weight: 600;
}
.sb-preloader-bar {
  width: 200px;
  height: 2px;
  background: var(--bg-surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.sb-preloader-bar::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sb-preloader-bar 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes sb-preloader-spin { to { transform: rotate(360deg); } }
@keyframes sb-preloader-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes sb-preloader-glow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes sb-preloader-bar {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ============================================================
   Command palette (custom modal)
   ============================================================ */
.sb-cmdk-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  z-index: var(--z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: sb-fade-in 180ms var(--ease-out);
}
.sb-cmdk-backdrop.open { display: flex; }
.sb-cmdk-panel {
  width: 100%;
  max-width: 560px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: sb-scale-in 180ms var(--ease-out);
}
.sb-cmdk-input-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}
.sb-cmdk-input-row svg { color: var(--text-tertiary); width: 16px; height: 16px; flex-shrink: 0; }
.sb-cmdk-input {
  background: transparent;
  border: 0;
  width: 100%;
  font-size: var(--fs-body);
  color: var(--text-primary);
  outline: 0;
}
.sb-cmdk-input::placeholder { color: var(--text-tertiary); }
.sb-cmdk-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-2);
}
.sb-cmdk-group-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--s-3) var(--s-3) var(--s-2);
}
.sb-cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sb-cmdk-item:hover,
.sb-cmdk-item.is-active {
  background: var(--row-selected);
  color: var(--text-primary);
}
.sb-cmdk-item .i {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.sb-cmdk-item .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-cmdk-item .hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
}
.sb-cmdk-empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}
.sb-cmdk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  gap: var(--s-3);
}
.sb-cmdk-foot kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  color: var(--text-secondary);
}

@keyframes sb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-scale-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* keyboard badge */
.sb-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xs);
  color: var(--text-secondary);
  margin-left: 4px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Notifications drawer
   ============================================================ */
.sb-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-drawer);
  display: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.sb-drawer-backdrop.open { display: block; opacity: 1; }
.sb-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-drawer) + 1);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.sb-drawer.open { transform: translateX(0); }
.sb-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
}
.sb-drawer-head h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-primary);
}
.sb-drawer-close {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sb-drawer-close:hover { background: var(--row-hover); color: var(--text-primary); }
.sb-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}

/* ============================================================
   Tweaks panel (compact appearance settings)
   ============================================================ */
.sb-tweaks {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3);
  display: none;
  flex-direction: column;
  gap: var(--s-3);
  z-index: var(--z-tweaks);
  width: 240px;
}
.sb-tweaks.open { display: flex; }
.sb-tweaks-row { display: flex; align-items: center; gap: var(--s-3); justify-content: space-between; }
.sb-tweaks-row > span { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 500; }
.sb-tweaks-chips { display: inline-flex; gap: 4px; }
.sb-tweaks-chip {
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: var(--accent);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sb-tweaks-chip[data-accent="sky"]     { background: hsl(222 100% 64%); }
.sb-tweaks-chip[data-accent="cobalt"]  { background: hsl(218 88% 56%); }
.sb-tweaks-chip[data-accent="indigo"]  { background: hsl(244 76% 64%); }
.sb-tweaks-chip[data-accent="emerald"] { background: hsl(156 65% 46%); }
.sb-tweaks-chip:hover { transform: scale(1.1); }
.sb-tweaks-chip.is-active { border-color: var(--text-primary); }
.sb-tweaks-seg {
  display: inline-flex;
  background: var(--bg-surface-2);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 1px;
}
.sb-tweaks-seg button {
  padding: 3px 8px;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.sb-tweaks-seg button.is-active { background: var(--bg-surface); color: var(--text-primary); }

/* ============================================================
   Login page
   ============================================================ */
.login-page,
.full-page.login-page,
.wrapper-full-page {
  background: var(--bg-base) !important;
  min-height: 100vh;
}
/* hide legacy empty guest navbar on login */
body.login-page > .navbar.navbar-absolute,
.wrapper-full-page + .navbar,
.wrapper-full-page .navbar.navbar-absolute,
body.login-page .navbar.navbar-absolute,
body.register-page .navbar.navbar-absolute { display: none !important; }
.full-page::before, .full-page::after { display: none !important; }
/* On login: bypass Bootstrap container constraints so .auth fills viewport */
body.login-page,
body.register-page {
  background: var(--bg-base) !important;
}
body.login-page .wrapper-full-page,
body.login-page .full-page,
body.login-page .full-page > .content,
body.login-page .full-page > .content > .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
  display: block !important;
}
.login-page .auth, body.login-page .auth { min-height: 100vh; width: 100%; }
.sb-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-7);
  position: relative;
  overflow: hidden;
}
.sb-auth-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
}
.sb-auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.sb-auth-brand-mark {
  width: 36px; height: 36px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb-auth-brand h1 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.sb-auth-brand h1 small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 2px;
}
.sb-auth-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.10), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.06), transparent 70%);
}
.sb-auth-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 65%);
          mask-image: radial-gradient(ellipse at center, black 0%, transparent 65%);
}

/* ============================================================
   Filter bar wrapper (added markup-class for log screens)
   ============================================================ */
.sb-filter-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
}
.sb-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.sb-page-head h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.sb-page-head .sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  display: block;
}

/* table wrapper — match prototype's .table-wrap */
.sb-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sb-table-wrap .table { margin-bottom: 0; }
.sb-table-wrap .table thead th { background: var(--bg-surface-2) !important; }

/* ============================================================
   White-content (light) leftovers — neutralize black-dashboard rules
   ============================================================ */
.white-content .sidebar,
.white-content .navbar.fixed-top,
.white-content .main-panel,
.white-content .card,
.white-content .modal-content {
  /* values come from var(--*) which switch via [data-theme] */
  color: var(--text-primary) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Mobile card-list view for sb-table on small screens
   Each row becomes a card with key/value rows stacked.
   ============================================================ */
@media (max-width: 767.98px) {
  .sb-table-wrap { border-radius: 0; border-left: 0; border-right: 0; }
  .sb-table-wrap .sb-table,
  .sb-table-wrap .sb-table tbody,
  .sb-table-wrap .sb-table tr,
  .sb-table-wrap .sb-table td { display: block; width: 100%; }
  .sb-table-wrap .sb-table thead { display: none; }
  .sb-table-wrap .sb-table tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    margin-bottom: var(--s-3);
    padding: var(--s-3);
    background: var(--bg-surface);
  }
  .sb-table-wrap .sb-table td {
    border: 0 !important;
    padding: 4px 0 !important;
    text-align: left !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    height: auto !important;
  }
  .sb-table-wrap .sb-table td::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    flex-shrink: 0;
  }
  .sb-table-wrap .sb-table td:empty,
  .sb-table-wrap .sb-table td[data-label=""] { display: none; }
  .sb-table-wrap .sb-table tbody tr:hover td { background: transparent !important; }
  .sb-table-wrap .sb-table tbody tr:nth-child(even) td { background: transparent !important; }
}

/* ============================================================
   Responsive — 3 breakpoints matching prototype
     Desktop  ≥1024px  — full sidebar + topbar
     Tablet   <1024px  — sidebar becomes drawer
     Mobile   <640px   — search hides, workspace shrinks, more compact
   ============================================================ */

/* TABLET: <1024px — sidebar as drawer */
@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: calc(var(--z-drawer) + 2) !important;
    transition: transform var(--dur) var(--ease-out);
  }
  body.sb-sidebar-open .sidebar { transform: translateX(0); }
  .main-panel { margin-left: 0 !important; width: 100% !important; }
  .navbar.fixed-top { left: 0 !important; }
  html[data-sidebar="icons"] .main-panel,
  html[data-sidebar="icons"] .navbar.fixed-top { margin-left: 0 !important; left: 0 !important; width: 100% !important; }
  body.sb-sidebar-open::before {
    content: "";
    position: fixed; inset: 0;
    background: var(--bg-overlay);
    z-index: calc(var(--z-drawer) + 1);
  }
  .global-search { width: 180px !important; }
  .main-panel > .content { padding: 16px 16px 80px !important; }
}

/* MOBILE: <640px — hide global search, shrink WS switcher, hide non-current breadcrumbs */
@media (max-width: 639px) {
  .global-search { display: none !important; }
  .workspace-switcher { max-width: 140px !important; }
  .workspace-switcher > span:not(.workspace-avatar):not(.ws-region) {
    overflow: hidden; text-overflow: ellipsis;
  }
  .breadcrumbs .breadcrumb-item:not(.current) { display: none; }
  .breadcrumb-sep { display: none; }
  .page-header { flex-direction: column; align-items: stretch !important; gap: 12px; }
  .page-header > div:last-child { width: 100%; }
  .input-wrap { width: 100% !important; }
  .modal-dialog { margin: 0 !important; max-width: 100% !important; min-height: 100vh !important; }
  .modal-content { border-radius: 0 !important; min-height: 100vh; }
  .topbar { padding: 0 12px !important; }
  .topbar-actions { gap: 2px !important; }
  /* Topbar icon-btns smaller spacing on mobile */
  .topbar .icon-btn { width: 30px; height: 30px; }
}

/* =============================================================
   UNIFIED DESIGN PASS — re-skin remaining legacy Bootstrap bits
   ============================================================= */

/* ---- Outline buttons (used in /generated_contents, listings) ---- */
.btn-outline-primary,
.btn-outline-info,
.btn-outline-success {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.btn-outline-primary:hover,
.btn-outline-info:hover,
.btn-outline-success:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn-outline-secondary,
.btn-outline-default {
  background: transparent !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
.btn-outline-secondary:hover,
.btn-outline-default:hover {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
.btn-outline-danger,
.btn-outline-warning {
  background: transparent !important;
  border: 1px solid var(--danger) !important;
  color: var(--danger) !important;
  box-shadow: none !important;
}
.btn-outline-danger:hover,
.btn-outline-warning:hover {
  background: var(--danger-soft) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* ---- rounded-pill: keep softly rounded, not a full pill (matches restrained design) ---- */
.btn.rounded-pill,
.rounded-pill {
  border-radius: var(--r-full) !important;
}
.btn.rounded-pill.btn-sm { padding-left: var(--s-3) !important; padding-right: var(--s-3) !important; }

/* ---- FA icons inside buttons: predictable sizing, no jitter ---- */
.btn > i,
.btn > svg,
.btn-sm > i,
.btn-sm > svg {
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}
.btn > i + *,
.btn > svg + *,
.btn > .mr-1 + * { margin-left: 2px; }
/* Tighten legacy `mr-1` / `me-1` between icon and label so it doesn't push apart */
.btn .fa, .btn .fas, .btn .fab, .btn .far,
.btn .fa-solid, .btn .fa-regular, .btn .fa-brands,
.btn .tim-icons { font-size: 11px; line-height: 1; }

/* ---- Modal close button (`<button class="close">×</button>`) ---- */
.modal .close,
button.close,
.close {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-tertiary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal .close:hover,
button.close:hover,
.close:hover {
  background: var(--row-hover) !important;
  color: var(--text-primary) !important;
}
.modal .close i,
button.close i,
.close i { font-size: 12px; line-height: 1; }
.modal .close > span[aria-hidden] { font-size: 18px; font-weight: 400; line-height: 1; }

/* ---- Btn-group consistency (Bootstrap btn-group with dropdown-toggle) ---- */
.btn-group {
  display: inline-flex !important;
  gap: 0;
  align-items: stretch;
  position: relative;
  vertical-align: middle;
}
.btn-group > .btn {
  position: relative;
  border-radius: 0 !important;
  margin-left: -1px;
}
.btn-group > .btn:first-child {
  margin-left: 0;
  border-top-left-radius: var(--r-sm) !important;
  border-bottom-left-radius: var(--r-sm) !important;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle:last-child {
  border-top-right-radius: var(--r-sm) !important;
  border-bottom-right-radius: var(--r-sm) !important;
}
.btn-group > .btn:hover,
.btn-group > .btn.active,
.btn-group > .btn:focus { z-index: 1; }
.btn-group > .btn.dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 6px;
  vertical-align: 1px;
  content: "" !important;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  opacity: 0.6;
}
.btn-group.show > .btn.dropdown-toggle::after { transform: rotate(180deg); }

/* ---- Dropdown-menu-right alignment + animation ---- */
.dropdown-menu-right { right: 0 !important; left: auto !important; }
.dropdown-menu.show,
.dropdown-menu[style*="display: block"] {
  animation: sb-menu-in 160ms var(--ease-out);
}
@keyframes sb-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Bootstrap nav-tabs / nav-pills inside dropdowns and pages ---- */
.nav-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle) !important;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
}
.nav-tabs .nav-item { list-style: none; margin: 0; }
.nav-tabs .nav-link {
  position: relative;
  padding: 8px 12px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-strong) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--accent) !important;
}
.nav-pills .nav-link {
  border-radius: var(--r-sm) !important;
  padding: 6px 10px !important;
  font-size: var(--fs-sm) !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 0 !important;
}
.nav-pills .nav-link:hover { background: var(--row-hover) !important; color: var(--text-primary) !important; }
.nav-pills .nav-link.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* tab-content / tab-pane animation defaults */
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show.active { display: block; animation: sb-fade-in 180ms var(--ease-out); }

/* ---- Alerts ---- */
.alert {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  padding: var(--s-3) var(--s-4) !important;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--bg-surface) !important;
  box-shadow: none !important;
  margin-bottom: var(--s-4);
}
.alert-success { background: var(--success-bg) !important; border-color: var(--success-border) !important; color: var(--success) !important; }
.alert-danger,
.alert-error  { background: var(--danger-bg) !important; border-color: var(--danger-border) !important; color: var(--danger) !important; }
.alert-warning { background: var(--warning-bg) !important; border-color: var(--warning-border) !important; color: var(--warning) !important; }
.alert-info,
.alert-primary { background: var(--info-bg) !important; border-color: var(--info-border) !important; color: var(--info) !important; }
.alert .close { color: inherit !important; }

/* ---- Bootstrap collapse used inside forms / cards (NOT sidebar — its `[data-sidebar="icons"]` rule already kills it) ---- */
.content .collapse:not(.show) { display: none; }
.content .collapsing {
  height: 0;
  overflow: hidden;
  transition: height var(--dur) var(--ease-out);
}

/* ---- Input-group enhancements: prepend/append button inside an input-group ---- */
.input-group .btn,
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn {
  height: var(--control-h) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.input-group > .input-group-prepend:first-child > .btn,
.input-group > .input-group-prepend:first-child > .input-group-text {
  border-top-left-radius: var(--r-sm) !important;
  border-bottom-left-radius: var(--r-sm) !important;
}
.input-group > .input-group-append:last-child > .btn,
.input-group > .input-group-append:last-child > .input-group-text {
  border-top-right-radius: var(--r-sm) !important;
  border-bottom-right-radius: var(--r-sm) !important;
}

/* ---- Custom controls (checkbox/radio) — when Blade uses .custom-control ---- */
.custom-control-input { accent-color: var(--accent); }
.custom-control-label,
.form-check-label { color: var(--text-primary); font-size: var(--fs-sm); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }

/* ---- Plain Bootstrap tooltip ---- */
.tooltip { font-family: var(--font-sans); font-size: var(--fs-xs); }
.tooltip .tooltip-inner,
.tooltip-inner {
  background: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-pop);
}
.tooltip .arrow::before { border-top-color: var(--bg-surface-3) !important; }

/* ---- Bootstrap badge: when `badge-pill`, treat as standard pill (already handled by base .badge) ---- */
.badge-pill { border-radius: var(--r-full) !important; }

/* ---- Status pill helper: views often use bg-success / bg-warning / bg-danger / bg-info on spans
        as a state indicator. Make sure such inline pills look like our badges. ---- */
.badge.bg-success { background: var(--success-bg) !important; color: var(--success) !important; }
.badge.bg-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.badge.bg-danger  { background: var(--danger-bg)  !important; color: var(--danger)  !important; }
.badge.bg-info    { background: var(--info-bg)    !important; color: var(--info)    !important; }

/* ---- Sidebar collapse (Bootstrap-driven submenus) animation polish ---- */
.sidebar .collapse { display: none; }
.sidebar .collapse.show { display: block; }
.sidebar .collapsing {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height var(--dur) var(--ease-out);
}

/* ---- Forms: legacy form-group spacing ---- */
.form-group { margin-bottom: var(--s-4); }
.form-group:last-child { margin-bottom: 0; }

/* ---- Disabled state across controls ---- */
.btn:disabled,
.btn.disabled,
.form-control:disabled,
.form-control[readonly] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ---- Bootstrap `<small>` and helper texts inside cards ---- */
.card small,
.card .text-muted,
small.text-muted {
  color: var(--text-tertiary) !important;
  font-size: var(--fs-xs);
}

/* ---- Page-level: keep h1..h6 from Bootstrap's default sizes ---- */
.content h1, .card h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.content h2, .card h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.content h3, .card h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--text-primary); }
.content h4, .card h4 { font-size: var(--fs-h3); font-weight: 600; color: var(--text-primary); }
.content h5, .card h5 { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.content h6, .card h6 { font-size: var(--fs-sm);  font-weight: 600; color: var(--text-primary); }

/* =============================================================
   MODAL CLICKABILITY + STACKING FIX
   The Bootstrap default `.modal-dialog { pointer-events: none }`
   together with backdrop-filter and `display:flex` from prototype.css
   was leaving the dialog area effectively non-interactive on some
   browsers. Force pointer-events auto throughout the modal subtree
   and ensure content sits sharply above the (blurred) backdrop.
   ============================================================= */
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.modal-content * {
  pointer-events: auto !important;
}
/* Strip any inherited filter/transform that could blur the content */
.modal-content {
  filter: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  transform: none;
  position: relative;
  z-index: 1;        /* sit above .modal-dialog children */
}
/* Lock the modal stack ABOVE everything (preloader is 9999 but hidden via opacity) */
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1055 !important; }
/* Reduce backdrop blur a touch so the page text behind reads as background, not as mist */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.62) !important;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
/* If a preloader was left visible (slow asset, stuck network), don't trap the user under it */
.preloader { pointer-events: none !important; }
body.app-ready .preloader,
body.loaded .preloader { display: none !important; }

/* =============================================================
   UNIFIED ACTION-BUTTON COLORS (delete / edit / create)
   Targets the existing markup patterns used across all blade
   views — no view changes needed.

   Markup variants this rule covers:
   - <button class="icon-btn" aria-label="Delete ...">
       <i class="fa-solid fa-trash"></i>
     </button>
   - <button class="topbar-icon-btn" aria-label="Delete ...">
       <i class="fa fa-trash"></i>
     </button>
   - inline-styled  style="color:var(--danger);"  on the same buttons
   ============================================================= */

/* ---- DELETE: red foreground + soft red hover background ---- */
.icon-btn:has(.fa-trash),
.icon-btn:has(.fa-trash-can),
.icon-btn:has(.fa-trash-alt),
.topbar-icon-btn:has(.fa-trash),
.topbar-icon-btn:has(.fa-trash-can),
.topbar-icon-btn:has(.fa-trash-alt),
button[aria-label*="Delete" i].icon-btn,
button[aria-label*="Delete" i].topbar-icon-btn,
button[aria-label*="Remove" i].icon-btn,
button[aria-label*="Remove" i].topbar-icon-btn,
a.icon-btn[aria-label*="Delete" i] {
  color: var(--danger) !important;
}
.icon-btn:has(.fa-trash):hover,
.icon-btn:has(.fa-trash-can):hover,
.icon-btn:has(.fa-trash-alt):hover,
.topbar-icon-btn:has(.fa-trash):hover,
.topbar-icon-btn:has(.fa-trash-can):hover,
.topbar-icon-btn:has(.fa-trash-alt):hover,
button[aria-label*="Delete" i].icon-btn:hover,
button[aria-label*="Delete" i].topbar-icon-btn:hover,
button[aria-label*="Remove" i].icon-btn:hover,
button[aria-label*="Remove" i].topbar-icon-btn:hover {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-color: var(--danger-border) !important;
}
.icon-btn:has(.fa-trash) i,
.icon-btn:has(.fa-trash-can) i,
.topbar-icon-btn:has(.fa-trash) i,
.topbar-icon-btn:has(.fa-trash-can) i,
button[aria-label*="Delete" i] i,
button[aria-label*="Remove" i] i {
  color: inherit !important;
}

/* ---- EDIT: accent foreground + soft accent hover background ---- */
.icon-btn:has(.fa-pen),
.icon-btn:has(.fa-pen-to-square),
.icon-btn:has(.fa-pencil),
.icon-btn:has(.fa-edit),
.topbar-icon-btn:has(.fa-pen),
.topbar-icon-btn:has(.fa-pen-to-square),
.topbar-icon-btn:has(.fa-pencil),
.topbar-icon-btn:has(.fa-edit),
a.icon-btn[aria-label*="Edit" i],
button[aria-label*="Edit" i].icon-btn,
button[aria-label*="Edit" i].topbar-icon-btn {
  color: var(--accent) !important;
}
.icon-btn:has(.fa-pen):hover,
.icon-btn:has(.fa-pen-to-square):hover,
.icon-btn:has(.fa-pencil):hover,
.icon-btn:has(.fa-edit):hover,
.topbar-icon-btn:has(.fa-pen):hover,
.topbar-icon-btn:has(.fa-pen-to-square):hover,
.topbar-icon-btn:has(.fa-edit):hover,
a.icon-btn[aria-label*="Edit" i]:hover,
button[aria-label*="Edit" i].icon-btn:hover,
button[aria-label*="Edit" i].topbar-icon-btn:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ---- INLINE-STYLED buttons (style="color:var(--danger)" / accent):
        we already inherit the foreground; just provide the matching
        hover bg so they don't look flat. */
.icon-btn[style*="--danger"]:hover,
.topbar-icon-btn[style*="--danger"]:hover {
  background: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
}
.icon-btn[style*="--accent"]:hover,
.topbar-icon-btn[style*="--accent"]:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

/* ---- MODAL FOOTER buttons: ensure consistent semantics ----
   The three canonical actions in a modal footer:
   - btn-primary       → create / save / confirm   (accent)
   - btn-danger        → destructive (delete)      (red)
   - btn-secondary     → cancel / dismiss          (neutral)
   These are already themed above, but enforce inside .modal-footer
   regardless of source-order/inline overrides. */
.modal-footer .btn-primary,
.modal-footer .btn-info,
.modal-footer .btn-success {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg) !important;
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-info:hover,
.modal-footer .btn-success:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.modal-footer .btn-danger,
.modal-footer .btn-warning {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}
.modal-footer .btn-danger:hover,
.modal-footer .btn-warning:hover { filter: brightness(1.08); }
.modal-footer .btn-secondary {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
.modal-footer .btn-secondary:hover {
  background: var(--bg-surface-3) !important;
  border-color: var(--border-strong) !important;
}

/* ---- "Add / Create new" trigger buttons in page headers:
   commonly `<button class="btn btn-primary" data-toggle="modal">`.
   Already covered by .btn-primary theme; this rule adds a subtle
   icon-color hint so the leading + glyph is bright. */
.btn.btn-primary > svg,
.btn.btn-primary > i,
.btn.btn-info > svg,
.btn.btn-info > i,
.btn.btn-success > svg,
.btn.btn-success > i { color: var(--accent-fg) !important; }
.btn.btn-danger > svg,
.btn.btn-danger > i,
.btn.btn-warning > svg,
.btn.btn-warning > i { color: #fff !important; }

/* =============================================================
   UNIFIED MODAL BUTTONS — final pass
   -------------------------------------------------------------
   Two parallel naming schemes coexist across views:
     A. Bootstrap-style:  class="btn btn-primary | btn-secondary | btn-danger"
     B. Prototype-style:  class="btn primary | secondary | danger"
   Close icon comes in 5 variants:
     1. <i class="fa-solid fa-xmark">
     2. <i class="fa fa-times">
     3. inline <svg> X path
     4. <span>&times;</span>
     5. class="close text-white" (legacy dark-bg subjects modal)

   This block normalizes ALL of them to the same visual.
   Selectors target existing markup — no Blade changes needed.
   ============================================================= */

/* ---------- Modal header layout ---------- */
.modal-header {
  padding: 18px 20px 12px !important;
  border-bottom: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.modal-header .modal-title {
  font-size: var(--fs-h3) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.005em;
}
.modal-body { padding: 4px 20px 18px !important; color: var(--text-primary); }

/* ---------- Modal close (×) button: one look, every variant ---------- */
.modal-header .close,
.modal-header button.close,
.modal .close {
  position: relative;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: auto;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-tertiary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  cursor: pointer;
  float: none !important;
  outline: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-header .close:hover,
.modal-header button.close:hover,
.modal .close:hover {
  background: var(--row-hover) !important;
  color: var(--text-primary) !important;
}
.modal-header .close:focus-visible,
.modal .close:focus-visible {
  outline: 2px solid var(--accent-ring) !important;
  outline-offset: 1px;
}

/* Normalize all five icon variants to the same 14px line glyph */
.modal .close i,
.modal .close .fa,
.modal .close .fa-solid,
.modal .close .fa-regular,
.modal .close .fas {
  font-size: 14px !important;
  line-height: 1 !important;
  color: inherit !important;
}
.modal .close svg {
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none;
}
.modal .close span[aria-hidden],
.modal .close > span {
  font-size: 20px !important;
  font-weight: 400;
  line-height: 1;
  color: inherit !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal .close.text-white { color: var(--text-tertiary) !important; }
.modal .close.text-white:hover { color: var(--text-primary) !important; }
.modal .close[style*="--text-secondary"] { color: var(--text-tertiary) !important; }
.modal .close[style*="--text-secondary"]:hover { color: var(--text-primary) !important; }

/* ---------- Footer buttons: BOTH naming schemes converge to one style ---------- */

/* PRIMARY (Create / Save / Confirm / Yes-resend / Execute / Generate / Add) */
.modal-footer .btn-primary,
.modal-footer .btn-info,
.modal-footer .btn-success,
.modal-footer .btn.primary,
.modal-footer button.primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-fg) !important;
  height: var(--control-h) !important;
  padding: 0 var(--s-4) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: -0.005em !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  box-shadow: none !important;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-info:hover,
.modal-footer .btn-success:hover,
.modal-footer .btn.primary:hover,
.modal-footer button.primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-fg) !important;
}

/* DANGER (Delete / destructive Yes) */
.modal-footer .btn-danger,
.modal-footer .btn-warning,
.modal-footer .btn.danger,
.modal-footer button.danger {
  background: var(--danger) !important;
  border: 1px solid var(--danger) !important;
  color: #ffffff !important;
  height: var(--control-h) !important;
  padding: 0 var(--s-4) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: -0.005em !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  box-shadow: none !important;
  transition: filter var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.modal-footer .btn-danger:hover,
.modal-footer .btn-warning:hover,
.modal-footer .btn.danger:hover,
.modal-footer button.danger:hover {
  filter: brightness(1.08);
  background: var(--danger) !important;
  border-color: var(--danger) !important;
}

/* SECONDARY (Cancel / Close / No) */
.modal-footer .btn-secondary,
.modal-footer .btn.secondary,
.modal-footer button.secondary {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  height: var(--control-h) !important;
  padding: 0 var(--s-4) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500 !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: -0.005em !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  box-shadow: none !important;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.modal-footer .btn-secondary:hover,
.modal-footer .btn.secondary:hover,
.modal-footer button.secondary:hover {
  background: var(--bg-surface-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* SVG/FA icons inside footer buttons inherit correct contrast */
.modal-footer .btn-primary > svg, .modal-footer .btn-primary > i,
.modal-footer .btn-info > svg,    .modal-footer .btn-info > i,
.modal-footer .btn-success > svg, .modal-footer .btn-success > i,
.modal-footer .btn.primary > svg, .modal-footer .btn.primary > i { color: var(--accent-fg) !important; }
.modal-footer .btn-danger > svg,  .modal-footer .btn-danger > i,
.modal-footer .btn-warning > svg, .modal-footer .btn-warning > i,
.modal-footer .btn.danger > svg,  .modal-footer .btn.danger > i { color: #fff !important; }
.modal-footer .btn-secondary > svg, .modal-footer .btn-secondary > i,
.modal-footer .btn.secondary > svg, .modal-footer .btn.secondary > i { color: var(--text-primary) !important; }

/* Footer layout: same gap and alignment every modal */
.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--s-2) !important;
  padding: 14px 20px !important;
  border-top: 1px solid var(--border-subtle) !important;
}
.modal-footer > * { margin: 0 !important; }

/* ---------- Body action-buttons (e.g. multisend send_execute, importgl
   per-row start-import) match footer primary look so they don't look
   foreign when sitting in .modal-body. ---------- */
.modal-body .btn-primary,
.modal-body .btn-info,
.modal-body .btn-success,
.modal-body .btn.primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-fg) !important;
}
.modal-body .btn-primary:hover,
.modal-body .btn-info:hover,
.modal-body .btn-success:hover,
.modal-body .btn.primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.modal-body .btn-danger,
.modal-body .btn-warning,
.modal-body .btn.danger {
  background: var(--danger) !important;
  border: 1px solid var(--danger) !important;
  color: #fff !important;
}
.modal-body .btn-secondary,
.modal-body .btn.secondary {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* ---------- Legacy `modal-content.bg-dark` + `.border-0` (rss/subjects).
   Force them onto system tokens so dark-modal looks identical to the rest. */
.modal-content.bg-dark {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--r-lg) !important;
}
.modal-content.bg-dark .modal-header,
.modal-content.bg-dark .modal-footer,
.modal-header.border-0,
.modal-footer.border-0 { border-color: var(--border-subtle) !important; }
.modal-content.bg-dark .modal-title,
.modal-content.bg-dark .modal-body { color: var(--text-primary) !important; }

/* ============================================================
   Toastr — colored solid-ish toasts with text (no icon strip).
   ------------------------------------------------------------
   We use the design-system success/danger/warning/info colors at
   ~94% alpha — clearly visible (not washed out) yet with a touch of
   transparency so they don't look heavy on the dashboard. Drops the
   legacy PNG icon strip (so the original 50px left padding can be
   reclaimed for the message text) and locks opacity:1 on the wrapper
   to kill the "settle" frame jQuery fadeIn would otherwise leave.
   ============================================================ */
#toast-container > div {
  opacity: 1 !important;
  filter: none !important;
  -ms-filter: none !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 12px 16px !important;
  width: 320px !important;
  font-family: var(--font-sans, inherit) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.45 !important;
}
#toast-container > div:hover {
  opacity: 1 !important;
  filter: none !important;
  box-shadow: var(--shadow-xl, var(--shadow-lg)) !important;
}
#toast-container > .toast-success { background: color-mix(in srgb, var(--success) 94%, transparent) !important; }
#toast-container > .toast-error   { background: color-mix(in srgb, var(--danger)  94%, transparent) !important; }
#toast-container > .toast-warning { background: color-mix(in srgb, var(--warning) 94%, transparent) !important; }
#toast-container > .toast-info    { background: color-mix(in srgb, var(--info)    94%, transparent) !important; }

.toast-title   { font-weight: 600; color: #ffffff !important; margin-bottom: 2px; }
.toast-message { word-wrap: break-word; color: #ffffff !important; }

/* ============================================================
   Shared "Data" cell (long JSON / payload preview) used by
   log_crmtransaction, log_leads, log_kyc, log_ai_calls, log_ai_tags,
   log_ai_tags_report, log_margin_all, voip_webhooks_logs,
   voip_payloads_logs. Rendered via components/data-cell.blade.php.
   ============================================================ */
.sb-data-cell {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 360px;
}
.sb-data-preview {
  flex: 1;
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--bg-surface-2, var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  text-align: left;
}
.sb-data-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.sb-data-pre {
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-canvas, var(--bg-base));
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}