/* SM360_CSS_DEDUPED_CANONICAL_BRAND_LAYER_V2
   Shared app polish lives in this file. Theme files should not carry copied brand blocks.
*/

/* ============================================================================
   Salix Monitor 360 — BRAND LAYER (opinionated, production-ready)
   - Loads AFTER Bootstrap + theme (light.css/dark.css)
   - Additive polish; no layout hacks
   - Light/Dark aware; respects reduced motion
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --smx-brand-radius: 14px;
  --smx-brand-radius-lg: 20px;
  --smx-brand-shadow-sm: 0 6px 18px rgba(15,23,42,.10);
  --smx-brand-shadow-md: 0 10px 28px rgba(15,23,42,.16);
  --smx-brand-shadow-lg: 0 18px 54px rgba(15,23,42,.22);
  --smx-anim-fast: 120ms cubic-bezier(.2,.8,.2,1);
  --smx-anim-med: 220ms cubic-bezier(.2,.8,.2,1);
  --smx-anim-slow: 420ms cubic-bezier(.2,.8,.2,1);
  --smx-blur: 10px;
}
html[data-bs-theme="light"]{
  --smx-nav-grad: linear-gradient(180deg, #020617, #020617);
  --smx-header-grad: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.02));
  --smx-card-bg: #fff;
  --smx-card-border: var(--smx-glass-border, rgba(15,23,42,.08));
  --smx-elev: var(--smx-brand-shadow-sm);
  --smx-ring: 0 0 0 .25rem rgba(13,110,253,.20);
}
html[data-bs-theme="dark"]{
  --smx-nav-grad: linear-gradient(180deg, rgba(16,22,34,.75), rgba(9,12,20,.72));
  --smx-header-grad: linear-gradient(180deg, rgba(56,189,248,.14), rgba(56,189,248,.06));
  --smx-card-border: rgba(255,255,255,.08);
  --smx-elev: 0 10px 28px rgba(0,0,0,.45);
  --smx-ring: 0 0 0 .25rem rgba(56,189,248,.22);
}

/* ---------- Global polish ---------- */
html[data-bs-theme] body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[data-bs-theme] h1, h2, h3, .h1, .h2, .h3{ letter-spacing:.01em; font-weight:700; }

/* ---------- Navbar ---------- */
html[data-bs-theme] .navbar{
  background: var(--smx-nav-grad) !important;
  backdrop-filter: blur(var(--smx-blur));
  border-bottom: 1px solid var(--smx-card-border);
  box-shadow: var(--smx-elev);
}
html[data-bs-theme="light"] .navbar .nav-link{ color:#e5edff !important; }
html[data-bs-theme="dark"]  .navbar .nav-link{ color:#e7eefc !important; }
html[data-bs-theme="light"] .navbar .navbar-brand{
  color:#e5edff !important;
}
html[data-bs-theme="light"] .navbar .navbar-brand:hover,
html[data-bs-theme="light"] .navbar .navbar-brand:focus{
  color:#f9fbff !important;
}
html[data-bs-theme] .navbar .nav-link{
  border-radius:10px;
  transition: background-color var(--smx-anim-fast), color var(--smx-anim-fast), transform var(--smx-anim-fast);
}
html[data-bs-theme] .navbar .nav-link:hover,
html[data-bs-theme] .navbar .nav-link:focus{
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  transform: translateY(-1px);
}
html[data-bs-theme] .navbar .nav-link.active{
  background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--bs-primary) 18%, transparent);
}
html[data-bs-theme="light"] .navbar .nav-link:hover,
html[data-bs-theme="light"] .navbar .nav-link:focus{
  color:#f9fbff !important;
}
html[data-bs-theme="light"] .navbar .nav-link.active{
  color:#f9fbff !important;
}

/* ---------- Cards ---------- */
html[data-bs-theme] .card{
  background: var(--smx-card-bg);
  border: 1px solid var(--smx-card-border);
  border-radius: var(--smx-brand-radius);
  box-shadow: var(--smx-brand-shadow-sm);
  transition: box-shadow var(--smx-anim-med), transform var(--smx-anim-med), border-color var(--smx-anim-med);
}
html[data-bs-theme] .card:hover{
  transform: translateY(-1px);
  box-shadow: var(--smx-brand-shadow-md);
  border-color: color-mix(in srgb, var(--bs-primary) 16%, var(--smx-card-border));
}
html[data-bs-theme] .card-header{
  border-top-left-radius: var(--smx-brand-radius);
  border-top-right-radius: var(--smx-brand-radius);
  background: var(--smx-header-grad);
  font-weight:600;
}
html[data-bs-theme] .card.glassy{
  backdrop-filter: blur(var(--smx-blur));
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}

/* ---------- Buttons ---------- */
html[data-bs-theme] .btn{
  border-radius:12px;
  position:relative;
  transition: transform var(--smx-anim-fast), box-shadow var(--smx-anim-fast), filter var(--smx-anim-fast);
  will-change: transform;
}
html[data-bs-theme] .btn:hover{ transform: translateY(-1px); }
html[data-bs-theme] .btn:active{ transform: translateY(0); }
html[data-bs-theme] .btn-primary:hover{ filter: saturate(1.05) brightness(1.02); }
html[data-bs-theme] .btn-outline-primary{ border-width:1.5px; }
html[data-bs-theme] .btn-outline-primary:hover{ background: color-mix(in srgb, var(--bs-primary) 12%, transparent); }

/* Glow for primary-ish buttons */
html[data-bs-theme] .btn-primary::after,
html[data-bs-theme] .btn-outline-primary::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  opacity:0; transition: opacity var(--smx-anim-med);
  background: radial-gradient(120px 120px at var(--x,50%) var(--y,50%), color-mix(in srgb, var(--bs-primary) 22%, transparent), transparent 60%);
}
html[data-bs-theme] .btn-primary:hover::after,
html[data-bs-theme] .btn-outline-primary:hover::after{ opacity:.9; }

/* ---------- Forms ---------- */
html[data-bs-theme] .form-control,
html[data-bs-theme] .form-select{
  border-radius:12px;
  transition: border-color var(--smx-anim-fast), box-shadow var(--smx-anim-fast), background-color var(--smx-anim-fast);
}
html[data-bs-theme] .form-control:focus,
html[data-bs-theme] .form-select:focus{
  box-shadow: var(--smx-ring);
  border-color: color-mix(in srgb, var(--bs-primary) 60%, var(--bs-border-color));
}
html[data-bs-theme] .input-group-text{ border-radius:10px; }
html[data-bs-theme] .form-check-input{ transition: box-shadow var(--smx-anim-fast), background-color var(--smx-anim-fast), border-color var(--smx-anim-fast); }
html[data-bs-theme] .form-check-input:focus{ box-shadow: var(--smx-ring); }

/* ---------- Tables ---------- */
html[data-bs-theme] .table{ border-color: color-mix(in srgb, var(--bs-border-color) 70%, transparent); }
html[data-bs-theme] .table thead th{
  font-weight:700; letter-spacing:.01em; vertical-align: middle;
  border-bottom:1px solid color-mix(in srgb, var(--bs-border-color) 85%, transparent);
}
html[data-bs-theme="light"] .table thead{ background: linear-gradient(180deg, #fafcff, #ffffff); }
html[data-bs-theme="dark"]  .table thead{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
html[data-bs-theme] .table-hover tbody tr:hover{ background: color-mix(in srgb, var(--bs-primary) 10%, transparent); }
html[data-bs-theme] .table .badge{ transform: translateY(-1px); }
/* compact density opt-in */
html[data-bs-theme] .table-compact > :not(caption) > * > *{ padding-top:.45rem; padding-bottom:.45rem; }

/* ---------- Badges ---------- */
html[data-bs-theme] .badge{ border-radius:999px; padding:.45em .65em; box-shadow:0 1px 0 rgba(0,0,0,.04); }

/* ---------- Dropdowns / Modals / Offcanvas ---------- */
html[data-bs-theme] .dropdown-menu,
html[data-bs-theme] .modal-content,
html[data-bs-theme] .offcanvas{
  border-radius:12px;
  box-shadow: var(--smx-brand-shadow-md);
  border:1px solid var(--smx-card-border);
}
html[data-bs-theme] .dropdown-item:hover{ background: color-mix(in srgb, var(--bs-primary) 12%, transparent); }

/* ---------- Pagination ---------- */
html[data-bs-theme] .pagination .page-link{
  border-radius:10px;
  transition: background-color var(--smx-anim-fast), color var(--smx-anim-fast), border-color var(--smx-anim-fast);
}
html[data-bs-theme] .pagination .page-item.active .page-link{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

/* ---------- Toasts / Popovers / Tooltips ---------- */
html[data-bs-theme] .toast,
html[data-bs-theme] .popover{ border-radius:12px; box-shadow: var(--smx-brand-shadow-md); border:1px solid var(--smx-card-border); }
html[data-bs-theme] .tooltip .tooltip-inner{ border-radius:8px; }

/* ---------- List group / Accordion ---------- */
html[data-bs-theme] .list-group-item{ border-color: color-mix(in srgb, var(--bs-border-color) 80%, transparent); transition: background-color var(--smx-anim-fast); }
html[data-bs-theme] .list-group-item-action:hover{ background: color-mix(in srgb, var(--bs-primary) 10%, transparent); }
html[data-bs-theme] .accordion-button{ border-radius:10px !important; transition: background-color var(--smx-anim-fast), box-shadow var(--smx-anim-fast); }
html[data-bs-theme] .accordion-button:not(.collapsed){ box-shadow: var(--smx-ring); }

/* ---------- Progress ---------- */
html[data-bs-theme] .progress{ height:.6rem; border-radius:999px; background: color-mix(in srgb, var(--bs-border-color) 60%, transparent); }
html[data-bs-theme] .progress-bar{ border-radius:999px; }

/* ---------- Tabs ---------- */
html[data-bs-theme] .smx-tabs .nav-link{
  border:0 !important; padding:.6rem 1rem; border-radius:.8rem !important;
  transition: background-color var(--smx-anim-fast), box-shadow var(--smx-anim-fast), color var(--smx-anim-fast);
}
html[data-bs-theme] .smx-tabs .nav-link:hover{ background: color-mix(in srgb, var(--bs-primary) 10%, transparent); }
html[data-bs-theme] .smx-tabs .nav-link.active{
  background: color-mix(in srgb, var(--bs-primary) 16%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bs-primary) 18%, transparent);
}

/* ---------- Avatar fallback ---------- */
html[data-bs-theme] .avatar-fallback{
  width:32px; height:32px; border-radius:50%;
  background: color-mix(in srgb, var(--bs-primary) 16%, #cbd5e1);
  color:#fff; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- Micro-helpers ---------- */
html[data-bs-theme] .shadow-xs{ box-shadow:0 1px 2px rgba(15,23,42,.06) !important; }
html[data-bs-theme] .shadow-md{ box-shadow: var(--smx-brand-shadow-md) !important; }
html[data-bs-theme] .rounded-2xl{ border-radius: var(--smx-brand-radius-lg) !important; }

/* ============================================================================
   Charts: tokens + wrappers (SVG & HTML tooltip friendly)
   ========================================================================== */
:root{
  --smx-chart-radius: 12px;
  --smx-chart-shadow: 0 10px 30px rgba(15,23,42,.16);
  --smx-chart-grid-w: 1px;
  --smx-chart-marker: 7px;
}
html[data-bs-theme="light"]{
  --smx-chart-bg:#fff;
  --smx-chart-border: var(--smx-glass-border, rgba(15,23,42,.08));
  --smx-chart-grid: color-mix(in srgb, var(--bs-border-color) 65%, transparent);
  --smx-chart-axis:#475569;
  --smx-chart-tooltip-bg:#0b1324;
  --smx-chart-tooltip-fg:#eaf2ff;
  --smx-c1:hsl(212 85% 45%); --smx-c2:#7c4dff; --smx-c3:#16a34a; --smx-c4:#d97706; --smx-c5:#e11d48; --smx-c6:#0284c7;
}
html[data-bs-theme="dark"]{
  --smx-chart-bg: var(--smx-surface-1, #0f1627);
  --smx-chart-border: rgba(255,255,255,.08);
  --smx-chart-grid: rgba(255,255,255,.08);
  --smx-chart-axis:#cbd5e1;
  --smx-chart-tooltip-bg:#0a0f1a;
  --smx-chart-tooltip-fg:#e6edf6;
  --smx-c1:hsl(212 85% 56%); --smx-c2:#a78bfa; --smx-c3:#22c55e; --smx-c4:#f59e0b; --smx-c5:#ef4444; --smx-c6:#38bdf8;
}
.chart-card{
  background: var(--smx-chart-bg);
  border: 1px solid var(--smx-chart-border);
  border-radius: var(--smx-chart-radius);
  box-shadow: var(--smx-brand-shadow-sm, var(--smx-chart-shadow));
  overflow:hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms;
}
.chart-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--smx-brand-shadow-md);
  border-color: color-mix(in srgb, var(--bs-primary) 16%, var(--smx-chart-border));
}
.chart-card .chart-head{
  padding:.85rem 1rem; border-bottom:1px solid var(--smx-chart-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bs-primary) 10%, transparent), transparent);
}
.chart-card .chart-body{ padding:.75rem .75rem 1rem; }
.kpi-chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px;
  font-weight:600; font-size:.85rem; background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  color: color-mix(in srgb, var(--bs-primary) 75%, var(--bs-body-color));
}
@keyframes smx-stroke-draw{ from{ stroke-dashoffset: var(--_len,600);} to{ stroke-dashoffset:0;} }
@keyframes smx-area-fade{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }
svg .smx-animate-line{ stroke-dasharray: var(--_len,600); stroke-dashoffset: var(--_len,600); animation: smx-stroke-draw 900ms cubic-bezier(.2,.8,.2,1) forwards; }
svg .smx-animate-area{ animation: smx-area-fade 600ms cubic-bezier(.2,.8,.2,1) both; }

.chart-legend{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin:.5rem .75rem .25rem; }
.chart-legend .item{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; color: var(--bs-body-color); }
.chart-legend .swatch{
  width:.9rem; height:.9rem; border-radius:3px; flex:0 0 auto;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--bs-body-bg) 60%, var(--smx-chart-border));
}
.chart-tooltip{
  position:absolute; z-index:1060; pointer-events:none; min-width:140px; padding:.5rem .6rem; border-radius:10px;
  background: var(--smx-chart-tooltip-bg); color: var(--smx-chart-tooltip-fg);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border:1px solid color-mix(in srgb, var(--smx-chart-tooltip-fg) 12%, transparent);
  transform: translate(-50%, calc(-100% - 8px)); opacity:0; transition: opacity 140ms ease;
}
.chart-tooltip.show{ opacity:1; }
.apexcharts-gridline, .apexcharts-xaxis line, .apexcharts-yaxis line{ stroke: var(--smx-chart-grid) !important; stroke-width: var(--smx-chart-grid-w) !important; }
.apexcharts-xaxis text, .apexcharts-yaxis text{ fill: var(--smx-chart-axis) !important; font-weight:500; }
.apexcharts-legend{ padding:.25rem .5rem !important; }
.apexcharts-tooltip.apexcharts-theme-light{
  background: var(--smx-chart-tooltip-bg) !important; color: var(--smx-chart-tooltip-fg) !important;
  border:1px solid color-mix(in srgb, var(--smx-chart-tooltip-fg) 12%, transparent) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
}
.apexcharts-tooltip-title{ background:transparent !important; color: var(--smx-chart-tooltip-fg) !important; opacity:.85; }
.apexcharts-marker{
  width: var(--smx-chart-marker) !important; height: var(--smx-chart-marker) !important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--bs-body-bg) 70%, transparent); border-radius:50% !important;
}
.echarts-tooltip,.echart-tooltip,.echarts-tooltip-container{
  position:absolute; z-index:1060; pointer-events:none;
  background: var(--smx-chart-tooltip-bg); color: var(--smx-chart-tooltip-fg);
  border:1px solid color-mix(in srgb, var(--smx-chart-tooltip-fg) 12%, transparent);
  border-radius:10px; padding:.5rem .6rem; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.sparkline{ display:inline-block; min-width:120px; min-height:28px; vertical-align:middle; }
.sparkline path.line{ stroke: var(--smx-c1); stroke-width:2; fill:none; }
.sparkline path.area{ fill: color-mix(in srgb, var(--smx-c1) 30%, transparent); }
.series-1{ --_series: var(--smx-c1);} .series-2{ --_series: var(--smx-c2);} .series-3{ --_series: var(--smx-c3);}
.series-4{ --_series: var(--smx-c4);} .series-5{ --_series: var(--smx-c5);} .series-6{ --_series: var(--smx-c6);}
.chart-legend .item.series-1 .swatch{ background: var(--smx-c1);}
.chart-legend .item.series-2 .swatch{ background: var(--smx-c2);}
.chart-legend .item.series-3 .swatch{ background: var(--smx-c3);}
.chart-legend .item.series-4 .swatch{ background: var(--smx-c4);}
.chart-legend .item.series-5 .swatch{ background: var(--smx-c5);}
.chart-legend .item.series-6 .swatch{ background: var(--smx-c6);}
.chart-empty{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:2.5rem 1rem;
  color: var(--bs-secondary-color);
  background: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--bs-border-color) 24%, transparent) 8px 16px);
  border-radius: var(--smx-chart-radius);
}

/* ============================================================================
   Vulnerability scan status widget
   ========================================================================== */
.spinner-hint{ display:inline-flex; vertical-align:middle; }
.scan-status{ display:inline-flex; align-items:center; gap:.35rem; }
.scan-status .spinner-border{ width:.9rem; height:.9rem; border-width:.15rem; }
.scan-status[data-status="queued"] .spinner-border{ color: var(--bs-secondary); }
.scan-status[data-status="queued"] .status-text{ color: var(--bs-secondary); }
.scan-status[data-status="running"] .spinner-border{ color: var(--bs-warning); }
.scan-status[data-status="running"] .status-text{ color: var(--bs-warning); }
.scan-status .status-icon{ display:none; font-size:1rem; line-height:1; }
.scan-status[data-status="finished"] .spinner-border,
.scan-status[data-status="failed"]   .spinner-border{ display:none; }
.scan-status[data-status="finished"] .status-icon.ok{ display:inline-block; color: var(--bs-success); }
.scan-status[data-status="finished"] .status-text{ color: var(--bs-success); }
.scan-status[data-status="failed"] .status-icon.fail{ display:inline-block; color: var(--bs-danger); }
.scan-status[data-status="failed"] .status-text{ color: var(--bs-danger); }

/* ============================================================================
   Page Header — subtle, professional, static (no animations)
   ========================================================================== */

.bsmx-page-header{
  position:relative;
  /* square top corners; rounded bottom corners only */
  border-radius: 0 0 16px 16px;
  padding:1rem 1.25rem;
  border:1px solid color-mix(in oklab, var(--bs-border-color) 70%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--bs-body-bg) 88%, transparent) 0%,
      color-mix(in oklab, var(--bs-body-bg) 94%, transparent) 100%);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--bs-white) 20%, transparent) inset,
    0 10px 24px -12px color-mix(in oklab, var(--bs-black) 30%, transparent);
  overflow:hidden; isolation:isolate;
  min-height: 112px;
}
@supports (backdrop-filter: blur(6px)){
  .bsmx-page-header{ backdrop-filter: blur(10px) saturate(1.03); -webkit-backdrop-filter: blur(10px) saturate(1.03); }
}
/* Content layer */
.bsmx-page-header > *{ position:relative; z-index:2; }

/* Static soft grid + subtle corner blooms */
.bsmx-page-header::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 0% 0%,
      color-mix(in oklab, var(--bs-primary) 16%, transparent) 0 35%, transparent 70%),
    radial-gradient(55% 40% at 100% 0%,
      color-mix(in oklab, var(--bs-info) 14%, transparent) 0 35%, transparent 70%),
    linear-gradient(to right, color-mix(in oklab, var(--bs-border-color) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bs-border-color) 12%, transparent) 1px, transparent 1px);
  background-size: 60% 60%, 60% 60%, 22px 22px, 22px 22px;
  background-position: -8% -12%, 108% -16%, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  opacity:.55; filter: saturate(1.02);
  mask-image: radial-gradient(140% 120% at 50% 10%, #000 52%, transparent 100%);
}

/* ---- Pointy bottom variant (ribbon/tag shape) ----
   Clipped element; no border (prevents a hard line); outline via box-shadow. */
.bsmx-page-header.bsmx-pointy{
  --smx-point-h: 22px;       /* height of the point */
  border: none;              /* remove hard border to avoid bottom line */
  overflow: visible;         /* allow the point to extend */
  /* Clip the whole header to a tag shape */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--smx-point-h)), 50% 100%, 0 calc(100% - var(--smx-point-h)));
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--smx-point-h)), 50% 100%, 0 calc(100% - var(--smx-point-h)));
  /* Outline that hugs the shape (theme-aware) */
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--bs-border-color) 70%, transparent),
    0 10px 24px -12px color-mix(in oklab, var(--bs-black) 30%, transparent);
}
/* Give the separator below some room so the point doesn’t overlap it */
.bsmx-page-header.bsmx-pointy + .bsmx-header-sep{
  margin-top: calc(var(--smx-point-h) - 4px);
}

/* Headings in header */
.bsmx-page-header h1,.bsmx-page-header .h1,.bsmx-page-header .h2,.bsmx-page-header .h3,.bsmx-page-header .h4{
  margin:0; color: var(--bs-emphasis-color); letter-spacing:.2px;
}

/* Gentle divider under headers */
.bsmx-header-sep{
  height:1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--bs-border-color) 70%, transparent), transparent);
  margin:.5rem 0 1rem;
}

/* Site background helper */
.bsmx-bg{
  position:relative; min-height:100%; isolation:isolate;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bs-body-bg) 96%, transparent) 0%, color-mix(in oklab, var(--bs-body-bg) 92%, transparent) 100%),
    radial-gradient(1200px 700px at -10% -20%, color-mix(in oklab, var(--bs-primary) 10%, transparent) 0%, transparent 65%),
    radial-gradient(1100px 650px at 110% -10%, color-mix(in oklab, var(--bs-info) 10%, transparent) 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 120%, color-mix(in oklab, var(--bs-success) 8%, transparent) 0%, transparent 70%);
}
.bsmx-bg::before,.bsmx-bg::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bsmx-bg::before{
  background:
    radial-gradient(150% 100% at 50% -20%, transparent 0 60%, color-mix(in oklab, var(--bs-body-bg) 20%, transparent) 100%),
    radial-gradient(140% 80% at 50% 120%, transparent 0 70%, color-mix(in oklab, var(--bs-body-bg) 25%, transparent) 100%);
}
.bsmx-bg::after{
  opacity:.35;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--bs-border-color) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bs-border-color) 8%, transparent) 1px, transparent 1px);
  background-size:24px 24px, 24px 24px;
  mask-image: radial-gradient(120% 120% at 50% 10%, #000 40%, transparent 100%);
}
@media (prefers-reduced-motion: reduce){ .bsmx-bg::after{ opacity:.18; } }
.bsmx-surface{
  border-radius:14px; background: color-mix(in oklab, var(--bs-body-bg) 88%, transparent);
  border:1px solid color-mix(in oklab, var(--bs-border-color) 70%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--bs-white) 30%, transparent) inset, 0 10px 24px -12px color-mix(in oklab, var(--bs-black) 30%, transparent);
}
@supports (backdrop-filter: blur(6px)){ .bsmx-surface{ backdrop-filter: blur(10px) saturate(1.03); -webkit-backdrop-filter: blur(10px) saturate(1.03);} }

/* ---------- Tiny green right triangle utility ---------- */
.smx-tri{ position:relative; padding-left:.8rem; }
.smx-tri::before{
  content:""; position:absolute; left:0; top:50%; transform: translateY(-46%);
  width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid var(--bs-success);
  filter: drop-shadow(0 0 .25px rgba(0,0,0,.2));
}

/* ---------- Header badges (theme-aware color chips) ---------- */
.bsmx-page-header .smx-tag{
  --_c: var(--bs-secondary);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid color-mix(in oklab, var(--_c) 55%, transparent);
  background: color-mix(in oklab, var(--_c) 18%, transparent);
  color: color-mix(in oklab, var(--_c) 85%, var(--bs-body-color));
  box-shadow: 0 1px 0 color-mix(in oklab, var(--bs-white) 12%, transparent) inset;
}
.bsmx-page-header .smx-tag-graphs   { --_c: var(--bs-info); }
.bsmx-page-header .smx-tag-stats    { --_c: var(--bs-primary); }
.bsmx-page-header .smx-tag-overview { --_c: var(--bs-success); }
@media (max-width: 576px){
  .bsmx-page-header .smx-tag{ padding: .3rem .5rem; font-weight: 600; }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:576px){
  .bsmx-page-header{ padding:.8rem .85rem; min-height:100px; }
  .bsmx-page-header h1.h4{ font-size:1.05rem; }
  .bsmx-page-header .gap-2{ gap:.35rem !important; }
}
@media (prefers-reduced-motion: reduce){
  .bsmx-page-header{ transition:none; }
}

/* Light-only header background override */


/* Dark-only header background override */
html[data-bs-theme="dark"] .bsmx-page-header{
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #1b2329 1px, #1d272f 2px);
}


/* Nav icon: inherit font size from heading/text (no fixed size) */
.navicon{
  font-size: inherit !important;
  vertical-align: -.1em;
  line-height: 1;
}

.bsmx-header-sep{display:none!important;visibility:hidden!important}

/* Zero gutters for ONLY container-fluid */
.container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Rows inside container-fluid: no horizontal/vertical gutter */
.container-fluid > .row{
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

/* Dark and Light theme end shinies - 06112025 */

html[data-bs-theme="dark"] .card-header {
  border-top-left-radius: var(--smx-brand-radius);
  border-top-right-radius: var(--smx-brand-radius);
  background: var(--smx-header-grad);
  font-weight: 600;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #1b2329 1px, #1d272f 2px);
}

html[data-bs-theme="light"] .card-header {
  border-top-left-radius: var(--smx-brand-radius);
  border-top-right-radius: var(--smx-brand-radius);
  background: var(--smx-header-grad);
  font-weight: 600;
  }

html[data-bs-theme="light"] .table thead th {
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 85%, transparent);
  }

html[data-bs-theme="dark"] .table thead th {
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 85%, transparent);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #1b2329 1px, #1d272f 2px);
}

/* Light (agents) */
html[data-bs-theme="light"] .term.win .term-title {
  background: #2563eb;
  }

html[data-bs-theme="light"] .term.nix .term-title {
  background: #16a34a;
  }

html[data-bs-theme="light"] .term.mac .term-title{
  background: rgb(17, 24, 39);
  }

/* Dark (agents) */
html[data-bs-theme="dark"] .term.win .term-title {
  background: #2563eb;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #1b2329 1px, #1d272f 2px);
}

html[data-bs-theme="dark"] .term.nix .term-title {
  background: #16a34a;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #1b2329 1px, #1d272f 2px);
}

html[data-bs-theme="dark"] .term.mac .term-title{
  background: rgb(17, 24, 39);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #1b2329 1px, #1d272f 2px);
}

/* ============================================================================
   Uber Pro Layer — micro UX helpers (focus, skeletons, scrollbars, badges)
   ========================================================================== */

/* Accessible focus ring helper */
html[data-bs-theme] .smx-focus-ring:focus-visible,
html[data-bs-theme] .smx-focus-ring:focus {
  outline: none !important;
  box-shadow: var(--smx-ring);
}

/* Section label helper (for small headings above cards/tables) */
html[data-bs-theme] .smx-section-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bs-secondary-color);
}
html[data-bs-theme] .smx-section-label::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-primary) 60%, transparent);
}

/* Status badges (OK / WARN / CRIT / MUTED) */
html[data-bs-theme] .badge-ok {
  background: color-mix(in srgb, var(--bs-success) 18%, transparent);
  color: color-mix(in srgb, var(--bs-success) 85%, var(--bs-body-color));
  border: 1px solid color-mix(in srgb, var(--bs-success) 55%, transparent);
}
html[data-bs-theme] .badge-warn {
  background: color-mix(in srgb, var(--bs-warning) 20%, transparent);
  color: color-mix(in srgb, var(--bs-warning) 70%, var(--bs-body-color));
  border: 1px solid color-mix(in srgb, var(--bs-warning) 55%, transparent);
}
html[data-bs-theme] .badge-crit {
  background: color-mix(in srgb, var(--bs-danger) 20%, transparent);
  color: color-mix(in srgb, var(--bs-danger) 80%, var(--bs-body-color));
  border: 1px solid color-mix(in srgb, var(--bs-danger) 55%, transparent);
}
html[data-bs-theme] .badge-muted {
  background: color-mix(in srgb, var(--bs-secondary) 16%, transparent);
  color: color-mix(in srgb, var(--bs-secondary) 80%, var(--bs-body-color));
  border: 1px solid color-mix(in srgb, var(--bs-secondary) 50%, transparent);
}

/* Skeleton loader (for async cards/tables) */
html[data-bs-theme] .smx-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bs-border-color) 14%, transparent);
}
html[data-bs-theme] .smx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--bs-border-color) 24%, transparent),
    transparent
  );
  animation: smx-skeleton-shimmer 1.2s infinite;
}
@keyframes smx-skeleton-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-bs-theme] .smx-skeleton::after {
    animation: none;
    opacity: .25;
    transform: none;
  }
}

/* Scrollable container helper with themed scrollbars */
html[data-bs-theme] .smx-scroll-y {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* WebKit scrollbars (Chrome/Edge/Safari) */
html[data-bs-theme] .smx-scroll-y::-webkit-scrollbar {
  width: 8px;
}
html[data-bs-theme] .smx-scroll-y::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
}
html[data-bs-theme] .smx-scroll-y::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-border-color) 80%, transparent);
}
html[data-bs-theme] .smx-scroll-y::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--bs-border-color) 95%, transparent);
}

/* Firefox scrollbars */
html[data-bs-theme] .smx-scroll-y {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--bs-border-color) 80%, transparent)
    color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
}

/* Card header: icon alignment + subtle text polish */
html[data-bs-theme] .card-header .bi,
html[data-bs-theme] .card-header .navicon {
  font-size: .95em;
  vertical-align: -.1em;
}
html[data-bs-theme] .card-header .smx-subtitle {
  font-size: .8rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
}

/* Micro "pill" for inline stats under titles */
html[data-bs-theme] .smx-micro-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  text-transform: none;
  background: color-mix(in srgb, var(--bs-border-color) 18%, transparent);
  color: var(--bs-secondary-color);
}

/* Navbar logout / outline buttons on dark header (light theme) */
html[data-bs-theme="light"] .navbar .btn-outline-primary {
  background: rgba(15, 23, 42, 0.65); /* subtle dark pill behind text */
  color: #e5edff !important;          /* light text */
  border-color: rgba(148, 163, 184, 0.85);
}

html[data-bs-theme="light"] .navbar .btn-outline-primary:hover,
html[data-bs-theme="light"] .navbar .btn-outline-primary:focus {
  background: rgba(37, 99, 235, 0.9); /* stronger blue on hover */
  color: #f9fbff !important;
  border-color: rgba(191, 219, 254, 0.95);
}

/* SM360_SAAS_SURFACE_POLISH_V1_BEGIN */
/*
   Salix Monitor 360 SaaS polish layer.
   Additive only: no page-specific layout rewrites, no hard-coded organisation branding.
   Uses Bootstrap/theme tokens so custom branding can still win where it should.
*/

:root{
  --smx-saas-radius-sm: .65rem;
  --smx-saas-radius: 1rem;
  --smx-saas-radius-lg: 1.25rem;
  --smx-saas-ring: 0 0 0 .22rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
  --smx-saas-speed: 140ms ease;
}

html[data-bs-theme="light"]{
  --smx-saas-surface: rgba(255,255,255,.94);
  --smx-saas-surface-2: color-mix(in srgb, #ffffff 88%, var(--bs-primary) 3%);
  --smx-saas-header: linear-gradient(180deg, color-mix(in srgb, #ffffff 92%, var(--bs-primary) 5%), #ffffff);
  --smx-saas-border: color-mix(in srgb, var(--bs-border-color) 82%, transparent);
  --smx-saas-shadow: 0 10px 28px rgba(15,23,42,.075);
  --smx-saas-shadow-hover: 0 14px 34px rgba(15,23,42,.105);
  --smx-saas-soft: color-mix(in srgb, var(--bs-primary) 7%, #ffffff);
}

html[data-bs-theme="dark"]{
  --smx-saas-surface: color-mix(in srgb, var(--bs-body-bg) 74%, #ffffff 4%);
  --smx-saas-surface-2: color-mix(in srgb, var(--bs-body-bg) 84%, #ffffff 6%);
  --smx-saas-header: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  --smx-saas-border: color-mix(in srgb, var(--bs-border-color) 86%, transparent);
  --smx-saas-shadow: 0 14px 34px rgba(0,0,0,.26);
  --smx-saas-shadow-hover: 0 18px 42px rgba(0,0,0,.34);
  --smx-saas-soft: color-mix(in srgb, var(--bs-primary) 11%, transparent);
}

html[data-bs-theme] body{
  line-height: 1.52;
}

html[data-bs-theme] h1,
html[data-bs-theme] h2,
html[data-bs-theme] h3,
html[data-bs-theme] h4,
html[data-bs-theme] .h1,
html[data-bs-theme] .h2,
html[data-bs-theme] .h3,
html[data-bs-theme] .h4{
  line-height: 1.18;
  letter-spacing: -.015em;
}

html[data-bs-theme] .card,
html[data-bs-theme] .modal-content,
html[data-bs-theme] .offcanvas,
html[data-bs-theme] .toast,
html[data-bs-theme] .popover,
html[data-bs-theme] .list-group-item{
  border-color: var(--smx-saas-border);
}

html[data-bs-theme] .card{
  background: var(--smx-saas-surface);
  border-radius: var(--smx-saas-radius);
  box-shadow: var(--smx-saas-shadow);
  overflow: clip;
}

html[data-bs-theme] .card:hover{
  transform: none;
  box-shadow: var(--smx-saas-shadow-hover);
}

html[data-bs-theme] .card-header,
html[data-bs-theme] .card-footer,
html[data-bs-theme] .modal-header,
html[data-bs-theme] .modal-footer,
html[data-bs-theme] .offcanvas-header{
  background: var(--smx-saas-header);
  border-color: var(--smx-saas-border);
}

html[data-bs-theme] .card-header{
  padding-block: .85rem;
}

html[data-bs-theme] .card-title,
html[data-bs-theme] .modal-title,
html[data-bs-theme] .offcanvas-title{
  letter-spacing: -.01em;
}

html[data-bs-theme] .btn{
  border-radius: .78rem;
  font-weight: 650;
  letter-spacing: .005em;
}

html[data-bs-theme] .btn-sm{
  border-radius: .62rem;
  font-weight: 650;
}

html[data-bs-theme] .btn:hover{
  transform: none;
}

html[data-bs-theme] .btn:focus-visible,
html[data-bs-theme] .form-control:focus,
html[data-bs-theme] .form-select:focus,
html[data-bs-theme] .form-check-input:focus,
html[data-bs-theme] .page-link:focus,
html[data-bs-theme] .accordion-button:focus{
  box-shadow: var(--smx-saas-ring);
}

html[data-bs-theme] .form-control,
html[data-bs-theme] .form-select,
html[data-bs-theme] .input-group-text{
  border-color: var(--smx-saas-border);
  border-radius: .78rem;
}

html[data-bs-theme] .input-group > .form-control,
html[data-bs-theme] .input-group > .form-select,
html[data-bs-theme] .input-group > .input-group-text,
html[data-bs-theme] .input-group > .btn{
  border-radius: 0;
}

html[data-bs-theme] .input-group > :first-child{
  border-top-left-radius: .78rem;
  border-bottom-left-radius: .78rem;
}

html[data-bs-theme] .input-group > :last-child{
  border-top-right-radius: .78rem;
  border-bottom-right-radius: .78rem;
}

html[data-bs-theme] .form-text,
html[data-bs-theme] .small,
html[data-bs-theme] small{
  line-height: 1.45;
}

html[data-bs-theme] .table{
  --bs-table-border-color: var(--smx-saas-border);
  margin-bottom: 0;
}

html[data-bs-theme] .table thead th{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--bs-secondary-color);
  background: var(--smx-saas-header);
}

html[data-bs-theme] .table > :not(caption) > * > *{
  padding-block: .72rem;
}

html[data-bs-theme] .table-hover > tbody > tr:hover > *{
  background-color: color-mix(in srgb, var(--bs-primary) 7%, transparent);
}

html[data-bs-theme] .table-responsive{
  border-radius: var(--smx-saas-radius-sm);
}

html[data-bs-theme] .dropdown-menu{
  border-color: var(--smx-saas-border);
  border-radius: var(--smx-saas-radius-sm);
  box-shadow: var(--smx-saas-shadow);
  padding: .4rem;
}

html[data-bs-theme] .dropdown-item{
  border-radius: .55rem;
}

html[data-bs-theme] .dropdown-item:hover,
html[data-bs-theme] .dropdown-item:focus{
  background: var(--smx-saas-soft);
}

html[data-bs-theme] .alert{
  border-radius: var(--smx-saas-radius-sm);
  border-color: var(--smx-saas-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

html[data-bs-theme] .badge,
html[data-bs-theme] .smx-micro-pill{
  letter-spacing: .01em;
}

html[data-bs-theme] .text-bg-success,
html[data-bs-theme] .badge.bg-success,
html[data-bs-theme] .badge-ok{
  border: 1px solid color-mix(in srgb, var(--bs-success) 42%, transparent);
}

html[data-bs-theme] .text-bg-warning,
html[data-bs-theme] .badge.bg-warning,
html[data-bs-theme] .badge-warn{
  border: 1px solid color-mix(in srgb, var(--bs-warning) 45%, transparent);
}

html[data-bs-theme] .text-bg-danger,
html[data-bs-theme] .badge.bg-danger,
html[data-bs-theme] .badge-crit{
  border: 1px solid color-mix(in srgb, var(--bs-danger) 45%, transparent);
}

html[data-bs-theme] .nav-pills .nav-link{
  border-radius: .78rem;
  font-weight: 650;
}

html[data-bs-theme] .nav-pills .nav-link:not(.active):hover{
  background: var(--smx-saas-soft);
}

html[data-bs-theme] .accordion-item{
  border-color: var(--smx-saas-border);
  border-radius: var(--smx-saas-radius-sm);
  overflow: clip;
}

html[data-bs-theme] .accordion-button{
  background: var(--smx-saas-header);
}

html[data-bs-theme] .progress{
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-border-color) 38%, transparent);
  overflow: hidden;
}

html[data-bs-theme] code:not(pre code){
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 72%, transparent);
  border-radius: .45rem;
  padding: .08rem .32rem;
  background: color-mix(in srgb, var(--bs-border-color) 18%, transparent);
  color: color-mix(in srgb, var(--bs-body-color) 88%, var(--bs-primary));
}

html[data-bs-theme] .mm-code{
  border-radius: var(--smx-saas-radius-sm);
  border: 1px solid var(--smx-saas-border);
}

html[data-bs-theme] .page-link{
  border-color: var(--smx-saas-border);
}

html[data-bs-theme] .breadcrumb{
  font-size: .9rem;
}

@media (prefers-reduced-motion: reduce){
  html[data-bs-theme] *,
  html[data-bs-theme] *::before,
  html[data-bs-theme] *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* SM360_SAAS_SURFACE_POLISH_V1_END */

/* SM360_SAAS_PROFESSIONAL_SURFACE_V2_BEGIN */
/*
   Salix Monitor 360 professional surface layer.
   Canonical home: /assets/brand.css only.
   Keep this additive and token-based so organisation branding can still override colours.
*/

html[data-bs-theme]{
  --smx-pro-radius-xl: 20px;
  --smx-pro-radius-lg: 16px;
  --smx-pro-line: color-mix(in srgb, var(--bs-border-color) 78%, transparent);
  --smx-pro-line-strong: color-mix(in srgb, var(--bs-border-color) 92%, var(--bs-body-color) 8%);
  --smx-pro-card-glow: 0 18px 48px rgba(15,23,42,.08);
  --smx-pro-card-glow-hover: 0 22px 56px rgba(15,23,42,.12);
  --smx-pro-soft-wash: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-primary) 6%), var(--bs-body-bg));
}

html[data-bs-theme="dark"]{
  --smx-pro-card-glow: 0 20px 58px rgba(0,0,0,.32);
  --smx-pro-card-glow-hover: 0 26px 68px rgba(0,0,0,.42);
  --smx-pro-soft-wash: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-primary) 12%), var(--bs-body-bg));
}

html[data-bs-theme] main.smx-main{
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--bs-primary) 8%, transparent), transparent 34rem),
    radial-gradient(circle at top right, color-mix(in srgb, var(--bs-success) 6%, transparent), transparent 30rem),
    var(--bs-body-bg);
}

html[data-bs-theme] .card,
html[data-bs-theme] .modal-content,
html[data-bs-theme] .offcanvas,
html[data-bs-theme] .dropdown-menu{
  border-color: var(--smx-pro-line);
}

html[data-bs-theme] .card:not(.border-danger):not(.border-warning):not(.border-success):not(.border-primary){
  box-shadow: 0 1px 0 rgba(255,255,255,.04), var(--smx-pro-card-glow);
}

html[data-bs-theme] .card:hover:not(.smx-no-hover):not(.dropdown-raised){
  border-color: var(--smx-pro-line-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), var(--smx-pro-card-glow-hover);
}

html[data-bs-theme] .card-header,
html[data-bs-theme] .modal-header,
html[data-bs-theme] .offcanvas-header{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-primary) 6%), var(--bs-body-bg));
}

html[data-bs-theme] .card-header .fw-semibold,
html[data-bs-theme] .card-header strong,
html[data-bs-theme] .card-title{
  letter-spacing: -.006em;
}

html[data-bs-theme] .btn-primary{
  border-color: color-mix(in srgb, var(--bs-primary) 82%, #000 18%);
  box-shadow: 0 .55rem 1.15rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bs-primary) 86%, #fff 14%), var(--bs-primary));
}

html[data-bs-theme] .btn-primary:hover,
html[data-bs-theme] .btn-primary:focus-visible{
  box-shadow: 0 .72rem 1.35rem color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

html[data-bs-theme] .btn-outline-secondary,
html[data-bs-theme] .btn-outline-dark{
  background: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-secondary) 10%);
  border-color: var(--smx-pro-line-strong);
}

html[data-bs-theme] .btn-outline-secondary:hover,
html[data-bs-theme] .btn-outline-dark:hover{
  background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg));
}

html[data-bs-theme] .form-label{
  font-size: .82rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--bs-body-color) 88%, var(--bs-secondary) 12%);
  margin-bottom: .38rem;
}

html[data-bs-theme] .form-control,
html[data-bs-theme] .form-select,
html[data-bs-theme] .input-group-text{
  border-color: var(--smx-pro-line-strong);
}

html[data-bs-theme] .form-control::placeholder{
  color: color-mix(in srgb, var(--bs-secondary-color) 78%, transparent);
}

html[data-bs-theme] .table-responsive{
  border-radius: var(--smx-pro-radius-lg);
}

html[data-bs-theme] .table thead th{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-primary) 12%), var(--bs-body-bg));
  color: color-mix(in srgb, var(--bs-body-color) 88%, var(--bs-primary) 12%);
}

html[data-bs-theme] .table > :not(caption) > * > *{
  border-bottom-color: color-mix(in srgb, var(--bs-border-color) 72%, transparent);
}

html[data-bs-theme] .alert{
  border-radius: var(--smx-pro-radius-lg);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

html[data-bs-theme] .alert-info,
html[data-bs-theme] .alert-primary{
  border-left: 4px solid color-mix(in srgb, var(--bs-primary) 78%, #fff 22%);
}

html[data-bs-theme] .alert-warning{
  border-left: 4px solid color-mix(in srgb, var(--bs-warning) 80%, #000 20%);
}

html[data-bs-theme] .alert-danger{
  border-left: 4px solid color-mix(in srgb, var(--bs-danger) 82%, #000 18%);
}

html[data-bs-theme] .alert-success{
  border-left: 4px solid color-mix(in srgb, var(--bs-success) 78%, #000 22%);
}

html[data-bs-theme] .badge,
html[data-bs-theme] .smx-micro-pill{
  letter-spacing: .01em;
}

html[data-bs-theme] .breadcrumb{
  border: 1px solid var(--smx-pro-line);
  border-radius: 999px;
  padding: .35rem .7rem;
  background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-primary) 12%);
}

html[data-bs-theme] .nav-pills .nav-link{
  border: 1px solid transparent;
}

html[data-bs-theme] .nav-pills .nav-link:not(.active):hover{
  border-color: var(--smx-pro-line);
}

html[data-bs-theme] .dropdown-menu{
  box-shadow: 0 18px 48px rgba(15,23,42,.14);
}

html[data-bs-theme="dark"] .dropdown-menu{
  box-shadow: 0 22px 58px rgba(0,0,0,.42);
}

html[data-bs-theme] hr{
  border-color: color-mix(in srgb, var(--bs-border-color) 65%, transparent);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  html[data-bs-theme] .card,
  html[data-bs-theme] .btn,
  html[data-bs-theme] .dropdown-item{
    transition: none !important;
  }
}
/* SM360_SAAS_PROFESSIONAL_SURFACE_V2_END */

/* SM360_PAID_SAAS_VISUAL_UPGRADE_V3_BEGIN */
/*
   Stronger paid-SaaS visual layer for Salix Monitor 360.
   Canonical home: /assets/brand.css only.
   This is intentionally more visible than v1/v2: better surfaces, richer cards,
   more confident tables/forms/buttons and sharper light/dark page treatment.
*/

html[data-bs-theme]{
  --smx-paid-radius-2xl: 24px;
  --smx-paid-radius-xl: 18px;
  --smx-paid-radius-lg: 14px;
  --smx-paid-radius-md: 11px;
  --smx-paid-border: color-mix(in srgb, var(--bs-border-color) 78%, transparent);
  --smx-paid-border-strong: color-mix(in srgb, var(--bs-border-color) 88%, var(--bs-body-color) 12%);
  --smx-paid-primary-soft: color-mix(in srgb, var(--bs-primary) 13%, transparent);
  --smx-paid-primary-line: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-border-color));
  --smx-paid-success-soft: rgba(16,185,129,.14);
  --smx-paid-warning-soft: rgba(245,158,11,.16);
  --smx-paid-danger-soft: rgba(239,68,68,.14);
  --smx-paid-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --smx-paid-shadow-sm: 0 8px 22px rgba(15,23,42,.08);
  --smx-paid-shadow-md: 0 18px 48px rgba(15,23,42,.11);
  --smx-paid-shadow-lg: 0 28px 76px rgba(15,23,42,.16);
  --smx-paid-ring: 0 0 0 .23rem color-mix(in srgb, var(--bs-primary) 19%, transparent);
  --smx-paid-ink-quiet: color-mix(in srgb, var(--bs-body-color) 68%, transparent);
  --smx-paid-anim: 170ms ease;
}

html[data-bs-theme="light"]{
  --bs-body-bg: #f3f7fc;
  --bs-body-color: #162033;
  --bs-border-color: #d9e3ef;
  --bs-tertiary-bg: #edf3fa;
  --smx-paid-app-bg:
    radial-gradient(circle at 8% -8%, rgba(20,184,166,.18), transparent 32rem),
    radial-gradient(circle at 88% -10%, rgba(37,99,235,.14), transparent 34rem),
    linear-gradient(180deg, #f7fbff 0%, #eef4fb 58%, #f6f9fd 100%);
  --smx-paid-card-bg: rgba(255,255,255,.88);
  --smx-paid-card-bg-solid: #ffffff;
  --smx-paid-card-header-bg: linear-gradient(180deg, rgba(248,251,255,.96), rgba(239,246,255,.86));
  --smx-paid-table-head-bg: linear-gradient(180deg, #eef6ff, #f8fbff);
  --smx-paid-nav-bg: linear-gradient(135deg, #071424 0%, #0b2852 48%, #0f766e 118%);
  --smx-paid-nav-border: rgba(255,255,255,.16);
  --smx-paid-hover-bg: color-mix(in srgb, var(--bs-primary) 8%, #ffffff);
}

html[data-bs-theme="dark"]{
  --bs-body-bg: #07111f;
  --bs-body-color: #e7eefc;
  --bs-border-color: rgba(148,163,184,.24);
  --bs-tertiary-bg: rgba(15,23,42,.82);
  --smx-paid-app-bg:
    radial-gradient(circle at 8% -8%, rgba(20,184,166,.22), transparent 32rem),
    radial-gradient(circle at 92% -14%, rgba(59,130,246,.18), transparent 36rem),
    linear-gradient(180deg, #07111f 0%, #091827 54%, #08111f 100%);
  --smx-paid-card-bg: rgba(15,23,42,.76);
  --smx-paid-card-bg-solid: #101b2d;
  --smx-paid-card-header-bg: linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.78));
  --smx-paid-table-head-bg: linear-gradient(180deg, rgba(59,130,246,.14), rgba(15,23,42,.80));
  --smx-paid-nav-bg: linear-gradient(135deg, #020817 0%, #08203f 48%, #064e3b 120%);
  --smx-paid-nav-border: rgba(148,163,184,.24);
  --smx-paid-hover-bg: color-mix(in srgb, var(--bs-primary) 16%, rgba(15,23,42,.82));
  --smx-paid-shadow-xs: 0 1px 2px rgba(0,0,0,.22);
  --smx-paid-shadow-sm: 0 10px 28px rgba(0,0,0,.28);
  --smx-paid-shadow-md: 0 22px 62px rgba(0,0,0,.36);
  --smx-paid-shadow-lg: 0 32px 84px rgba(0,0,0,.46);
}

html[data-bs-theme] body{
  background: var(--smx-paid-app-bg) !important;
  min-height:100vh;
}

html[data-bs-theme] main,
html[data-bs-theme] main.smx-main,
html[data-bs-theme] .smx-content,
html[data-bs-theme] .container-fluid-smx{
  position:relative;
}

html[data-bs-theme] .navbar,
html[data-bs-theme] .admin-navbar,
html[data-bs-theme] .user-navbar{
  background: var(--smx-paid-nav-bg) !important;
  border-bottom:1px solid var(--smx-paid-nav-border) !important;
  box-shadow:0 14px 38px rgba(2,8,23,.20);
  backdrop-filter: blur(16px) saturate(1.15);
}

html[data-bs-theme] .navbar .navbar-brand{
  letter-spacing:.01em;
  font-weight:800;
}

html[data-bs-theme] .navbar .nav-link{
  border-radius:999px;
  margin-inline:.05rem;
  padding:.46rem .78rem;
  transition:background-color var(--smx-paid-anim), color var(--smx-paid-anim), transform var(--smx-paid-anim), box-shadow var(--smx-paid-anim);
}

html[data-bs-theme] .navbar .nav-link:hover,
html[data-bs-theme] .navbar .nav-link:focus{
  background:rgba(255,255,255,.13) !important;
  transform:translateY(-1px);
}

html[data-bs-theme] .navbar .nav-link.active,
html[data-bs-theme] .navbar .show > .nav-link{
  background:rgba(255,255,255,.19) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20), 0 8px 20px rgba(2,8,23,.16);
}

html[data-bs-theme] .card,
html[data-bs-theme] .modal-content,
html[data-bs-theme] .offcanvas,
html[data-bs-theme] .toast,
html[data-bs-theme] .popover,
html[data-bs-theme] .list-group-item,
html[data-bs-theme] .dropdown-menu,
html[data-bs-theme] .accordion-item{
  background:var(--smx-paid-card-bg) !important;
  border:1px solid var(--smx-paid-border) !important;
  box-shadow:var(--smx-paid-shadow-sm);
  backdrop-filter:blur(14px) saturate(1.08);
}

html[data-bs-theme] .card,
html[data-bs-theme] .modal-content,
html[data-bs-theme] .offcanvas{
  border-radius:var(--smx-paid-radius-xl) !important;
}

html[data-bs-theme] .card{
  transition:transform var(--smx-paid-anim), box-shadow var(--smx-paid-anim), border-color var(--smx-paid-anim), background-color var(--smx-paid-anim);
}

html[data-bs-theme] .card:hover{
  border-color:var(--smx-paid-primary-line) !important;
  box-shadow:var(--smx-paid-shadow-md);
}

html[data-bs-theme] .card-header{
  border-radius:calc(var(--smx-paid-radius-xl) - 1px) calc(var(--smx-paid-radius-xl) - 1px) 0 0 !important;
  font-weight:750;
}

html[data-bs-theme] .card-body{
  color:var(--bs-body-color);
}

html[data-bs-theme] .shadow-sm,
html[data-bs-theme] .shadow{
  box-shadow:var(--smx-paid-shadow-sm) !important;
}

html[data-bs-theme] .rounded,
html[data-bs-theme] .rounded-3,
html[data-bs-theme] .border.rounded{
  border-radius:var(--smx-paid-radius-lg) !important;
}

html[data-bs-theme] .btn{
  border-radius:12px;
  font-weight:720;
  letter-spacing:.005em;
  transition:transform var(--smx-paid-anim), box-shadow var(--smx-paid-anim), background-color var(--smx-paid-anim), border-color var(--smx-paid-anim), color var(--smx-paid-anim), filter var(--smx-paid-anim);
}

html[data-bs-theme] .btn:hover{
  transform:translateY(-1px);
}

html[data-bs-theme] .btn:active{
  transform:translateY(0);
}

html[data-bs-theme] .btn-primary{
  background:linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 94%, #0f766e 6%), color-mix(in srgb, var(--bs-primary) 72%, #14b8a6 28%)) !important;
  border-color:color-mix(in srgb, var(--bs-primary) 84%, #14b8a6 16%) !important;
  box-shadow:0 10px 24px color-mix(in srgb, var(--bs-primary) 24%, transparent);
}

html[data-bs-theme] .btn-primary:hover,
html[data-bs-theme] .btn-primary:focus{
  box-shadow:0 14px 32px color-mix(in srgb, var(--bs-primary) 30%, transparent);
  filter:saturate(1.07) brightness(1.03);
}

html[data-bs-theme] .btn-outline-primary,
html[data-bs-theme] .btn-outline-secondary{
  background:color-mix(in srgb, var(--smx-paid-card-bg-solid) 72%, transparent);
  border-color:var(--smx-paid-border-strong);
}

html[data-bs-theme] .btn-outline-primary:hover,
html[data-bs-theme] .btn-outline-primary:focus,
html[data-bs-theme] .btn-outline-secondary:hover,
html[data-bs-theme] .btn-outline-secondary:focus{
  background:var(--smx-paid-hover-bg) !important;
  border-color:var(--smx-paid-primary-line) !important;
}

html[data-bs-theme] .btn-danger{
  box-shadow:0 10px 24px rgba(220,38,38,.18);
}

html[data-bs-theme] .form-label{
  font-weight:760;
  color:color-mix(in srgb, var(--bs-body-color) 82%, transparent);
}

html[data-bs-theme] .form-control,
html[data-bs-theme] .form-select,
html[data-bs-theme] textarea.form-control,
html[data-bs-theme] .input-group-text{
  border-radius:13px;
  border-color:var(--smx-paid-border-strong) !important;
  background-color:color-mix(in srgb, var(--smx-paid-card-bg-solid) 78%, transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--smx-paid-shadow-xs);
}

html[data-bs-theme] .form-control:focus,
html[data-bs-theme] .form-select:focus,
html[data-bs-theme] textarea.form-control:focus,
html[data-bs-theme] .form-check-input:focus,
html[data-bs-theme] .page-link:focus,
html[data-bs-theme] .accordion-button:focus{
  border-color:var(--smx-paid-primary-line) !important;
  box-shadow:var(--smx-paid-ring) !important;
}

html[data-bs-theme] .form-text,
html[data-bs-theme] .text-muted,
html[data-bs-theme] .small.text-muted,
html[data-bs-theme] small.text-muted{
  color:var(--smx-paid-ink-quiet) !important;
}

html[data-bs-theme] .table-responsive{
  border:1px solid var(--smx-paid-border);
  border-radius:var(--smx-paid-radius-xl);
  box-shadow:var(--smx-paid-shadow-sm);
  background:var(--smx-paid-card-bg);
}

html[data-bs-theme] .card .table-responsive,
html[data-bs-theme] .modal-content .table-responsive{
  box-shadow:none;
}

html[data-bs-theme] .table{
  --bs-table-bg: transparent;
  margin-bottom:0;
  border-color:var(--smx-paid-border) !important;
}

html[data-bs-theme] .table thead,
html[data-bs-theme] .table thead th,
html[data-bs-theme] .table-light,
html[data-bs-theme] .table-light th{
  background:var(--smx-paid-table-head-bg) !important;
  color:color-mix(in srgb, var(--bs-body-color) 92%, transparent) !important;
}

html[data-bs-theme] .table thead th{
  border-bottom:1px solid var(--smx-paid-border-strong) !important;
  font-size:.75rem;
  letter-spacing:.055em;
  text-transform:uppercase;
  font-weight:820;
}

html[data-bs-theme] .table > :not(caption) > * > *{
  padding:.72rem .82rem;
  border-color:color-mix(in srgb, var(--bs-border-color) 72%, transparent) !important;
}

html[data-bs-theme] .table-hover > tbody > tr:hover > *{
  background:var(--smx-paid-hover-bg) !important;
}

html[data-bs-theme] code:not(pre code){
  border:1px solid var(--smx-paid-border);
  background:color-mix(in srgb, var(--bs-primary) 9%, var(--smx-paid-card-bg-solid));
  color:color-mix(in srgb, var(--bs-primary) 75%, var(--bs-body-color));
  border-radius:.52rem;
  padding:.13rem .38rem;
}

html[data-bs-theme] .mm-code,
html[data-bs-theme] .smx-help-codeblock{
  border:1px solid rgba(148,163,184,.26) !important;
  border-radius:var(--smx-paid-radius-lg) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--smx-paid-shadow-xs);
}

html[data-bs-theme] .alert{
  border-radius:var(--smx-paid-radius-lg) !important;
  border:1px solid var(--smx-paid-border) !important;
  border-left-width:5px !important;
  box-shadow:var(--smx-paid-shadow-xs);
}

html[data-bs-theme] .alert-info,
html[data-bs-theme] .alert-primary,
html[data-bs-theme] .ur-help-box,
html[data-bs-theme] .smx-posture-guide-info{
  background:linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 13%, transparent), color-mix(in srgb, var(--smx-paid-card-bg-solid) 92%, transparent)) !important;
  border-left-color:var(--bs-primary) !important;
}

html[data-bs-theme] .alert-success{
  background:linear-gradient(135deg, var(--smx-paid-success-soft), color-mix(in srgb, var(--smx-paid-card-bg-solid) 92%, transparent)) !important;
  border-left-color:#10b981 !important;
}

html[data-bs-theme] .alert-warning{
  background:linear-gradient(135deg, var(--smx-paid-warning-soft), color-mix(in srgb, var(--smx-paid-card-bg-solid) 92%, transparent)) !important;
  border-left-color:#f59e0b !important;
}

html[data-bs-theme] .alert-danger{
  background:linear-gradient(135deg, var(--smx-paid-danger-soft), color-mix(in srgb, var(--smx-paid-card-bg-solid) 92%, transparent)) !important;
  border-left-color:#ef4444 !important;
}

html[data-bs-theme] .badge,
html[data-bs-theme] .smx-micro-pill,
html[data-bs-theme] .smx-tag{
  border-radius:999px;
  font-weight:780;
  letter-spacing:.025em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 1px 2px rgba(15,23,42,.08);
}

html[data-bs-theme] .badge-ok,
html[data-bs-theme] .text-bg-success,
html[data-bs-theme] .badge.bg-success{
  background:linear-gradient(135deg, #059669, #10b981) !important;
  color:#ecfdf5 !important;
}

html[data-bs-theme] .badge-warn,
html[data-bs-theme] .text-bg-warning,
html[data-bs-theme] .badge.bg-warning{
  background:linear-gradient(135deg, #d97706, #f59e0b) !important;
  color:#1f1300 !important;
}

html[data-bs-theme] .badge-crit,
html[data-bs-theme] .text-bg-danger,
html[data-bs-theme] .badge.bg-danger{
  background:linear-gradient(135deg, #dc2626, #f43f5e) !important;
  color:#fff1f2 !important;
}

html[data-bs-theme] .dropdown-menu{
  border-radius:var(--smx-paid-radius-lg) !important;
  padding:.45rem;
}

html[data-bs-theme] .dropdown-item{
  border-radius:10px;
  font-weight:620;
}

html[data-bs-theme] .dropdown-item:hover,
html[data-bs-theme] .dropdown-item:focus{
  background:var(--smx-paid-hover-bg) !important;
}

html[data-bs-theme] .nav-pills .nav-link,
html[data-bs-theme] .smx-tabs .nav-link{
  border-radius:999px;
  font-weight:730;
}

html[data-bs-theme] .nav-pills .nav-link:not(.active):hover,
html[data-bs-theme] .smx-tabs .nav-link:not(.active):hover{
  background:var(--smx-paid-hover-bg);
}

html[data-bs-theme] .nav-pills .nav-link.active,
html[data-bs-theme] .smx-tabs .nav-link.active{
  box-shadow:0 10px 24px color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

html[data-bs-theme] .pagination .page-link{
  border-radius:11px;
  margin-inline:.1rem;
  border-color:var(--smx-paid-border);
  box-shadow:var(--smx-paid-shadow-xs);
}

html[data-bs-theme] .progress{
  height:.68rem;
  border-radius:999px;
  background:color-mix(in srgb, var(--bs-border-color) 62%, transparent) !important;
  box-shadow:inset 0 1px 2px rgba(2,8,23,.12);
}

html[data-bs-theme] .progress-bar{
  border-radius:999px;
  background-image:linear-gradient(90deg, rgba(255,255,255,.20), transparent) !important;
}

html[data-bs-theme] .list-group{
  border-radius:var(--smx-paid-radius-xl);
}

html[data-bs-theme] .list-group-item-action:hover{
  background:var(--smx-paid-hover-bg) !important;
}

html[data-bs-theme] .accordion-button{
  border-radius:var(--smx-paid-radius-lg) !important;
  font-weight:760;
}

html[data-bs-theme] .accordion-button:not(.collapsed){
  background:var(--smx-paid-hover-bg) !important;
  color:var(--bs-body-color) !important;
}

html[data-bs-theme] .avatar-fallback,
html[data-bs-theme] .rounded-circle.bg-light,
html[data-bs-theme] .rounded-circle.bg-secondary{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), var(--smx-paid-shadow-xs);
}

html[data-bs-theme] .bg-light,
html[data-bs-theme] .bg-white,
html[data-bs-theme] .bg-body-tertiary,
html[data-bs-theme] .text-bg-light{
  background-color:color-mix(in srgb, var(--smx-paid-card-bg-solid) 80%, transparent) !important;
  border-color:var(--smx-paid-border) !important;
}

@media (prefers-reduced-motion: reduce){
  html[data-bs-theme] *,
  html[data-bs-theme] *::before,
  html[data-bs-theme] *::after{
    transition:none !important;
    animation:none !important;
  }
}
/* SM360_PAID_SAAS_VISUAL_UPGRADE_V3_END */

/* SM360_HEADER_MOBILE_THEME_UNIFORM_V2_BEGIN
   Shared page header policy, corrected again:
   - EVERY normal app page header using .bsmx-page-header or .smx-page-header spans full page width.
   - The visual header shape is kept: full-width edge, depth and bottom point/triangle.
   - Header background is not hard-forced here so organisation branding can colour it when enabled.
   - Content/cards remain controlled by .smx-content.
   - Organisation branding CSS loads later and can still override colours if branding is enabled.
*/
html[data-bs-theme]{
  --smx-header-uniform-bg: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--bs-secondary-bg) 82%, var(--bs-body-bg) 18%) 100%);
  --smx-header-uniform-fg: var(--bs-emphasis-color, var(--bs-body-color));
  --smx-header-uniform-muted: var(--bs-secondary-color);
  --smx-header-uniform-border: color-mix(in srgb, var(--bs-border-color) 76%, transparent);
  --smx-header-uniform-shadow: 0 14px 34px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .04);
}

html[data-bs-theme="dark"]{
  --smx-header-uniform-bg: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 86%, var(--bs-secondary-bg) 14%) 0%, color-mix(in srgb, var(--bs-body-bg) 96%, #000 4%) 100%);
  --smx-header-uniform-border: color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  --smx-header-uniform-shadow: 0 14px 34px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .18);
}

html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header{
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 1.35rem !important;
  box-sizing: border-box !important;
  border-top: 1px solid var(--smx-header-uniform-border) !important;
  border-bottom: 1px solid var(--smx-header-uniform-border) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--smx-header-uniform-shadow) !important;
  overflow: visible !important;
  /* Background is intentionally not forced here; theme/org branding may set it later. */
  color: var(--smx-header-uniform-fg) !important;
  padding-left: max(1rem, calc((100vw - var(--smx-content-max, 1400px)) / 2 + 1rem)) !important;
  padding-right: max(1rem, calc((100vw - var(--smx-content-max, 1400px)) / 2 + 1rem)) !important;
}

html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header::before,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--bs-primary-rgb, 13, 110, 253), .10), transparent 34%),
    radial-gradient(circle at 88% 15%, rgba(var(--bs-info-rgb, 13, 202, 240), .08), transparent 32%);
  opacity: .9;
  z-index: 0;
}

html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header > *,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header > *{
  position: relative;
  z-index: 2;
}

html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header.bsmx-pointy,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header.bsmx-pointy{
  border-radius: 0 !important;
}

html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header.bsmx-pointy::after,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header.bsmx-pointy::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 44px;
  height: 16px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--bs-secondary-bg) 82%, var(--bs-body-bg) 18%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border: 0;
  filter: drop-shadow(0 5px 5px rgba(15, 23, 42, .10));
  z-index: 1;
}

html[data-bs-theme="dark"] body:not(.smx-admin-bigscreen-page) .bsmx-page-header.bsmx-pointy::after,
html[data-bs-theme="dark"] body:not(.smx-admin-bigscreen-page) .smx-page-header.bsmx-pointy::after{
  background: color-mix(in srgb, var(--bs-body-bg) 94%, #000 6%);
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .26));
}

html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header h1,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header .h1,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header .h2,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header .h3,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header .h4,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header h1,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header .h1,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header .h2,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header .h3,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header .h4{
  color: var(--smx-header-uniform-fg) !important;
}

html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header .smx-tri,
html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header .smx-tri{
  color: var(--smx-header-uniform-muted) !important;
  opacity: .92 !important;
}

@media (max-width: 767.98px){
  html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .bsmx-page-header,
  html[data-bs-theme] body:not(.smx-admin-bigscreen-page) .smx-page-header{
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-bottom: 1.25rem !important;
  }
}
/* SM360_HEADER_MOBILE_THEME_UNIFORM_V2_END */

/* SM360_SUPER_ADMIN_VISUAL_UNIFY_V3_BEGIN
   Shared super-admin KPI colour layer.
   Scoped to .smx-super-page so user pages, org-admin pages and organisation branding are not changed.
   Keep this block in brand.css; pages opt in by adding .smx-super-page and KPI card classes.
*/
html[data-bs-theme]{
  --smx-super-kpi-radius: 1rem;
  --smx-super-kpi-border: color-mix(in srgb, var(--bs-border-color) 72%, transparent);
  --smx-super-kpi-bg: color-mix(in srgb, var(--smx-paid-card-bg-solid, var(--bs-body-bg)) 88%, transparent);
  --smx-super-kpi-shadow: 0 .55rem 1.55rem rgba(15,23,42,.085);
  --smx-super-kpi-shadow-hover: 0 .85rem 2.1rem rgba(15,23,42,.13);
  --smx-super-accent-1: var(--bs-primary);
  --smx-super-accent-2: var(--bs-success);
  --smx-super-accent-3: var(--bs-info);
  --smx-super-accent-4: var(--bs-warning);
  --smx-super-accent-5: var(--bs-danger);
  --smx-super-accent-6: #7c3aed;
}
html[data-bs-theme="dark"]{
  --smx-super-kpi-shadow: 0 .65rem 1.7rem rgba(0,0,0,.30);
  --smx-super-kpi-shadow-hover: 0 1rem 2.35rem rgba(0,0,0,.40);
}
html[data-bs-theme] .smx-super-page{
  --smx-kpi-accent: var(--smx-super-accent-1);
}
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(1),
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(1) > .card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(1) > .soc-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(1) > .smx-kpi-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(1) > .su-card,
html[data-bs-theme] .smx-super-page .smx-super-metric-1{ --smx-kpi-accent: var(--smx-super-accent-1) !important; }
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(2),
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(2) > .card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(2) > .soc-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(2) > .smx-kpi-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(2) > .su-card,
html[data-bs-theme] .smx-super-page .smx-super-metric-2{ --smx-kpi-accent: var(--smx-super-accent-2) !important; }
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(3),
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(3) > .card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(3) > .soc-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(3) > .smx-kpi-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(3) > .su-card,
html[data-bs-theme] .smx-super-page .smx-super-metric-3{ --smx-kpi-accent: var(--smx-super-accent-3) !important; }
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(4),
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(4) > .card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(4) > .soc-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(4) > .smx-kpi-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(4) > .su-card,
html[data-bs-theme] .smx-super-page .smx-super-metric-4{ --smx-kpi-accent: var(--smx-super-accent-4) !important; }
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(5),
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(5) > .card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(5) > .soc-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(5) > .smx-kpi-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(5) > .su-card,
html[data-bs-theme] .smx-super-page .smx-super-metric-5{ --smx-kpi-accent: var(--smx-super-accent-5) !important; }
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(6),
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(6) > .card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(6) > .soc-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(6) > .smx-kpi-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"]:nth-child(6) > .su-card,
html[data-bs-theme] .smx-super-page .smx-super-metric-6{ --smx-kpi-accent: var(--smx-super-accent-6) !important; }

html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .soc-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .smx-kpi-card,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .su-card,
html[data-bs-theme] .smx-super-page .smx-super-metric-card,
html[data-bs-theme] .smx-super-page .super-stat-card,
html[data-bs-theme] .smx-super-page .super-org-stat,
html[data-bs-theme] .smx-super-page .soc-card.soc-kpi,
html[data-bs-theme] .smx-super-page .smx-kpi-card,
html[data-bs-theme] .smx-super-page .su-card.smx-super-metric-card{
  position: relative;
  overflow: hidden;
  min-height: 5.75rem;
  border: 1px solid color-mix(in srgb, var(--smx-kpi-accent) 34%, var(--smx-super-kpi-border)) !important;
  border-radius: var(--smx-super-kpi-radius) !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--smx-kpi-accent) 24%, transparent), transparent 58%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--smx-kpi-accent) 13%, var(--smx-super-kpi-bg)) 0%,
      color-mix(in srgb, var(--smx-kpi-accent) 5%, var(--smx-super-kpi-bg)) 100%) !important;
  box-shadow: var(--smx-super-kpi-shadow) !important;
}
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .card:hover,
html[data-bs-theme] .smx-super-page .smx-super-metric-card:hover,
html[data-bs-theme] .smx-super-page .super-stat-card:hover,
html[data-bs-theme] .smx-super-page .super-org-stat:hover,
html[data-bs-theme] .smx-super-page .soc-card.soc-kpi:hover,
html[data-bs-theme] .smx-super-page .smx-kpi-card:hover{
  border-color: color-mix(in srgb, var(--smx-kpi-accent) 52%, var(--smx-super-kpi-border)) !important;
  box-shadow: var(--smx-super-kpi-shadow-hover) !important;
}
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .card::before,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .soc-card::before,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .smx-kpi-card::before,
html[data-bs-theme] .smx-super-page .smx-super-kpi-grid > [class*="col-"] > .su-card::before,
html[data-bs-theme] .smx-super-page .smx-super-metric-card::before,
html[data-bs-theme] .smx-super-page .super-stat-card::before,
html[data-bs-theme] .smx-super-page .super-org-stat::before,
html[data-bs-theme] .smx-super-page .soc-card.soc-kpi::before,
html[data-bs-theme] .smx-super-page .smx-kpi-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .32rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--smx-kpi-accent) 96%, #fff 4%), color-mix(in srgb, var(--smx-kpi-accent) 62%, transparent));
}
html[data-bs-theme] .smx-super-page .smx-super-kpi-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .25rem;
}
html[data-bs-theme] .smx-super-page .smx-super-kpi-icon,
html[data-bs-theme] .smx-super-page .super-stat-card .card-body > .d-flex:first-child > .bi,
html[data-bs-theme] .smx-super-page .super-stat-card .card-body > .d-flex:first-child > .ri,
html[data-bs-theme] .smx-super-page .super-org-stat .card-body > .d-flex:first-child > .bi,
html[data-bs-theme] .smx-super-page .super-org-stat .card-body > .d-flex:first-child > .ri{
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .85rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--smx-kpi-accent) 88%, var(--bs-body-color)) !important;
  background: color-mix(in srgb, var(--smx-kpi-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--smx-kpi-accent) 34%, transparent);
  box-shadow: 0 .42rem 1rem color-mix(in srgb, var(--smx-kpi-accent) 16%, transparent);
  font-size: 1.08rem;
  line-height: 1;
}
html[data-bs-theme] .smx-super-page .smx-super-kpi-icon .bi,
html[data-bs-theme] .smx-super-page .smx-super-kpi-icon .ri{
  color: inherit !important;
  font-size: 1.08rem;
  line-height: 1;
}
html[data-bs-theme] .smx-super-page .super-stat-card .h3,
html[data-bs-theme] .smx-super-page .super-stat-card .h4,
html[data-bs-theme] .smx-super-page .super-stat-card .h5,
html[data-bs-theme] .smx-super-page .super-org-stat .h3,
html[data-bs-theme] .smx-super-page .super-org-stat .h4,
html[data-bs-theme] .smx-super-page .super-org-stat .h5,
html[data-bs-theme] .smx-super-page .soc-kpi .h3,
html[data-bs-theme] .smx-super-page .soc-kpi .h4,
html[data-bs-theme] .smx-super-page .soc-kpi .h5,
html[data-bs-theme] .smx-super-page .smx-kpi-card .h3,
html[data-bs-theme] .smx-super-page .smx-kpi-card .h4,
html[data-bs-theme] .smx-super-page .smx-kpi-card .h5,
html[data-bs-theme] .smx-super-page .smx-kpi-card .smx-kpi-num,
html[data-bs-theme] .smx-super-page .su-card.smx-super-metric-card .h4,
html[data-bs-theme] .smx-super-page .smx-super-metric-card .h3,
html[data-bs-theme] .smx-super-page .smx-super-metric-card .h4,
html[data-bs-theme] .smx-super-page .smx-super-metric-card .h5,
html[data-bs-theme] .smx-super-page .smx-super-metric-card .h6{
  color: color-mix(in srgb, var(--smx-kpi-accent) 82%, var(--bs-body-color)) !important;
  font-weight: 820;
  letter-spacing: -.025em;
}
html[data-bs-theme] .smx-super-page .super-stat-card .bi,
html[data-bs-theme] .smx-super-page .super-stat-card .ri,
html[data-bs-theme] .smx-super-page .super-org-stat .bi,
html[data-bs-theme] .smx-super-page .super-org-stat .ri,
html[data-bs-theme] .smx-super-page .smx-kpi-card .bi,
html[data-bs-theme] .smx-super-page .smx-kpi-card .ri,
html[data-bs-theme] .smx-super-page .soc-kpi .bi,
html[data-bs-theme] .smx-super-page .soc-kpi .ri{
  color: color-mix(in srgb, var(--smx-kpi-accent) 88%, var(--bs-body-color)) !important;
  filter: drop-shadow(0 .18rem .45rem color-mix(in srgb, var(--smx-kpi-accent) 20%, transparent));
}
html[data-bs-theme] .smx-super-page .soc-card,
html[data-bs-theme] .smx-super-page .su-card:not(.smx-super-metric-card){
  border: 1px solid var(--smx-super-kpi-border);
  border-radius: 1rem;
  background: var(--smx-super-kpi-bg);
  box-shadow: var(--smx-super-kpi-shadow);
}
html[data-bs-theme] .smx-super-page .soc-soft,
html[data-bs-theme] .smx-super-page .su-soft{
  background: color-mix(in srgb, var(--bs-secondary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-secondary) 18%, transparent);
  border-radius: .85rem;
}
html[data-bs-theme] .smx-super-page .soc-tree-root{ border-left: .28rem solid color-mix(in srgb, var(--bs-primary) 62%, transparent); }
html[data-bs-theme] .smx-super-page .soc-tree-child{ border-left: .28rem solid color-mix(in srgb, var(--bs-warning) 72%, transparent); margin-left: 1.25rem; }
html[data-bs-theme] .smx-super-page .soc-muted{ color: var(--bs-secondary-color); }
html[data-bs-theme] .smx-super-page .soc-danger,
html[data-bs-theme] .smx-super-page .su-danger-zone{
  border-color: color-mix(in srgb, var(--bs-danger) 32%, transparent);
  background: color-mix(in srgb, var(--bs-danger) 7%, transparent);
}
html[data-bs-theme] .smx-worker-card{ --smx-kpi-accent: var(--bs-info) !important; }
html[data-bs-theme] .smx-worker-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem;
}
html[data-bs-theme] .smx-worker-title{
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-weight: 750;
  color: color-mix(in srgb, var(--smx-kpi-accent) 78%, var(--bs-body-color));
}
html[data-bs-theme] .smx-worker-updated{ display: block; margin-top: .1rem; }
html[data-bs-theme] .smx-worker-actions{ display: inline-flex; align-items: center; gap: .35rem; }
html[data-bs-theme] .smx-worker-list{ display: grid; gap: .5rem; }
html[data-bs-theme] .smx-worker-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .58rem .65rem;
  border: 1px solid color-mix(in srgb, var(--smx-kpi-accent) 24%, var(--bs-border-color));
  border-radius: .78rem;
  background: color-mix(in srgb, var(--smx-kpi-accent) 9%, transparent);
}
html[data-bs-theme] .smx-worker-name{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 720;
}
html[data-bs-theme] .smx-worker-name .bi{ color: color-mix(in srgb, var(--smx-kpi-accent) 86%, var(--bs-body-color)) !important; }
html[data-bs-theme] .smx-worker-time{
  display: block;
  margin-top: .12rem;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
html[data-bs-theme] .smx-worker-row .badge{ flex: 0 0 auto; }
html[data-bs-theme] .smx-worker-buttons{ display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
html[data-bs-theme] .hb-pulse{ animation: hbPulse .35s ease-in-out; }
@keyframes hbPulse{ 0%{transform:scale(1);} 50%{transform:scale(1.01);} 100%{transform:scale(1);} }
@media (max-width: 575.98px){
  html[data-bs-theme] .smx-worker-header,
  html[data-bs-theme] .smx-worker-row{ align-items: stretch; flex-direction: column; }
  html[data-bs-theme] .smx-worker-row .badge{ align-self: flex-start; }
}
/* SM360_SUPER_ADMIN_VISUAL_UNIFY_V3_END */


/* SM360_SUPER_QUICK_NAV_V1_BEGIN
   Super-admin quick links. Scoped to super-admin page wrappers only.
*/
html[data-bs-theme] .smx-super-page .smx-super-quick-nav{
  padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 76%, transparent);
  border-radius: var(--smx-paid-radius-lg, 14px);
  background:
    radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--bs-primary) 9%, transparent), transparent 52%),
    color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-primary) 5%);
  box-shadow: var(--smx-paid-shadow-xs, 0 1px 2px rgba(15,23,42,.06));
}
html[data-bs-theme] .smx-super-page .smx-super-quick-nav .btn{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  white-space:nowrap;
}
html[data-bs-theme] .smx-super-page .smx-super-quick-nav .btn-primary .navicon{
  color: currentColor !important;
}
html[data-bs-theme] .smx-super-page .smx-super-quick-nav .btn-outline-secondary .navicon{
  color: color-mix(in srgb, var(--bs-primary) 72%, var(--bs-body-color)) !important;
}
@media (max-width: 575.98px){
  html[data-bs-theme] .smx-super-page .smx-super-quick-nav{
    padding: .65rem;
  }
  html[data-bs-theme] .smx-super-page .smx-super-quick-nav .btn{
    flex: 1 1 auto;
    justify-content:center;
  }
}
/* SM360_SUPER_QUICK_NAV_V1_END */


/* SM360_ORG_ADMIN_SHARED_NAV_V1_BEGIN
   Shared org-admin subnav styling. Kept in the brand layer so route files do not carry repeated inline CSS.
   Token-based and scoped to the org-admin subnav class so organisation custom branding can still override it when enabled.
*/
html[data-bs-theme] .smx-org-subnav-compact .nav-link{
  font-size:.76rem;
  line-height:1.15;
  padding:.25rem .45rem;
  white-space:normal;
  text-align:center;
}
html[data-bs-theme] .smx-org-subnav-compact .nav-item{margin-bottom:.15rem;}
@media (max-width:1199.98px){
  html[data-bs-theme] .smx-org-subnav-compact .nav-link{font-size:.74rem;padding:.23rem .4rem;}
}
/* SM360_ORG_ADMIN_SHARED_NAV_V1_END */


/* SM360_PAYPAL_BILLING_UI_BATCH5_V1_BEGIN
   Payments, Financials and Webhooks presentation. Behaviour remains in route files.
*/
html[data-bs-theme] .smx-super-payments-page .smx-payments-actions{align-items:center}
html[data-bs-theme] .smx-super-payments-page .smx-payments-actions form{margin-bottom:0}
html[data-bs-theme] .smx-super-payments-page .smx-payments-compact-table,
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-table{font-size:.76rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-compact-table th,
html[data-bs-theme] .smx-super-payments-page .smx-payments-compact-table td,
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-table th,
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-table td{padding:.38rem .48rem;vertical-align:top}
html[data-bs-theme] .smx-super-payments-page .smx-payments-dashboard{font-size:.88rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-dashboard .card-body{padding:.85rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-dashboard .h3{font-size:1.45rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-recent-events{font-size:.78rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-recent-events .list-group-item{padding-top:.45rem;padding-bottom:.45rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-wrap,
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-wrap{overflow-wrap:anywhere;word-break:break-word}
html[data-bs-theme] .smx-super-payments-page .smx-payments-code{font-size:.7rem;white-space:normal;overflow-wrap:anywhere}
html[data-bs-theme] .smx-super-payments-page .smx-payments-event-title,
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-event{line-height:1.15}
html[data-bs-theme] .smx-super-payments-page .smx-payments-event-code,
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-code{font-size:.68rem;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.15}
html[data-bs-theme] .smx-super-payments-page .smx-payments-details pre,
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-payload pre{font-size:.75rem;max-height:18rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
html[data-bs-theme] .smx-super-payments-page .smx-payments-card-heading{min-width:16rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-reference-col,
html[data-bs-theme] .smx-super-payments-page .smx-payments-min-zero{min-width:0}
html[data-bs-theme] .smx-super-payments-page .smx-payments-reference-col,
html[data-bs-theme] .smx-super-payments-page .smx-payments-reference-code,
html[data-bs-theme] .smx-super-payments-page .smx-payments-note{overflow-wrap:anywhere;word-break:break-word}
html[data-bs-theme] .smx-super-payments-page .smx-payments-reference-code{white-space:normal}
html[data-bs-theme] .smx-super-payments-page .smx-payments-note{white-space:pre-wrap}
html[data-bs-theme] .smx-super-payments-page .smx-payments-confirm-input{max-width:190px}
html[data-bs-theme] .smx-super-page .smx-details-summary{cursor:pointer}
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-actions{min-width:11rem;max-width:18rem}
html[data-bs-theme] .smx-super-webhooks-page .smx-webhook-actions .form-control-sm{max-width:6.5rem}
html[data-bs-theme] .smx-super-page .smx-billing-health-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
html[data-bs-theme] .smx-super-page .smx-billing-health-item{display:flex;align-items:flex-start;gap:.65rem;min-width:0;padding:.75rem .8rem;border:1px solid color-mix(in srgb,var(--bs-border-color) 76%,transparent);border-radius:.85rem;background:color-mix(in srgb,var(--bs-body-bg) 92%,var(--bs-primary) 3%)}
html[data-bs-theme] .smx-super-page .smx-billing-health-item > i{flex:0 0 auto;margin-top:.1rem;font-size:1rem;color:color-mix(in srgb,var(--bs-primary) 78%,var(--bs-body-color))}
html[data-bs-theme] .smx-super-page .smx-billing-health-value{font-weight:750;line-height:1.15}
html[data-bs-theme] .smx-super-page .smx-billing-health-label{font-size:.75rem;color:var(--bs-secondary-color);line-height:1.25}
html[data-bs-theme] .smx-super-page .smx-billing-health-item.is-warning{border-color:color-mix(in srgb,var(--bs-warning) 46%,var(--bs-border-color));background:color-mix(in srgb,var(--bs-warning) 9%,var(--bs-body-bg))}
html[data-bs-theme] .smx-super-page .smx-billing-health-item.is-danger{border-color:color-mix(in srgb,var(--bs-danger) 42%,var(--bs-border-color));background:color-mix(in srgb,var(--bs-danger) 8%,var(--bs-body-bg))}
html[data-bs-theme] .smx-super-page .smx-billing-filter-card{border-color:color-mix(in srgb,var(--bs-primary) 20%,var(--bs-border-color));background:color-mix(in srgb,var(--bs-body-bg) 96%,var(--bs-primary) 2%)}
html[data-bs-theme] .smx-super-page .smx-billing-action-group{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
html[data-bs-theme] .smx-super-page .smx-billing-action-group form{margin:0}
html[data-bs-theme] .smx-super-page .smx-billing-empty-state{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:5rem;padding:1rem;border:1px dashed color-mix(in srgb,var(--bs-border-color) 82%,transparent);border-radius:.8rem;color:var(--bs-secondary-color);background:color-mix(in srgb,var(--bs-body-bg) 96%,var(--bs-secondary-bg) 4%);text-align:center}
html[data-bs-theme] .smx-super-page .smx-billing-id{display:inline-block;max-width:22rem;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
html[data-bs-theme] .smx-super-page .smx-billing-table{min-width:860px}
html[data-bs-theme] .smx-super-page .smx-billing-table th{white-space:nowrap}
html[data-bs-theme] .smx-super-page .smx-billing-table td{vertical-align:top}
html[data-bs-theme] .smx-super-page .smx-billing-table details summary{cursor:pointer}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table{min-width:1040px;font-size:.72rem;line-height:1.18}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table th,
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table td{padding:.28rem .34rem}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table thead th{font-size:.66rem;letter-spacing:.025em}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table .small{font-size:.67rem;line-height:1.17}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table .badge{font-size:.63rem;line-height:1.12;white-space:normal;text-align:left}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table code{font-size:.66rem;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscriptions-table .btn-sm{font-size:.67rem;line-height:1.15;padding:.2rem .38rem}
@media(max-width:1199.98px){html[data-bs-theme] .smx-super-page .smx-billing-health-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){
  html[data-bs-theme] .smx-super-page .smx-billing-health-strip{grid-template-columns:1fr}
  html[data-bs-theme] .smx-super-page .smx-billing-action-group{align-items:stretch;flex-direction:column}
  html[data-bs-theme] .smx-super-page .smx-billing-action-group .btn,
  html[data-bs-theme] .smx-super-page .smx-billing-action-group form{width:100%}
  html[data-bs-theme] .smx-super-page .smx-billing-action-group form .btn{width:100%}
  html[data-bs-theme] .smx-super-payments-page .smx-payments-confirm-input{max-width:none}
}
/* SM360_PAYPAL_BILLING_UI_BATCH5_V1_END */


/* SM360_PAYPAL_REFUND_REAUDIT_V1_BEGIN
   One-location PayPal refund workflow in Payments > Subscriptions.
*/
html[data-bs-theme] .smx-super-payments-page .smx-billing-filter-card > .row{width:auto}
html[data-bs-theme] .smx-super-payments-page .smx-payments-subscription-controls{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;min-width:11rem}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-panel{width:100%;max-width:30rem}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-panel > summary{display:inline-flex;justify-content:center;list-style:none;float:right}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-panel > summary::-webkit-details-marker{display:none}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-panel[open] > summary{margin-bottom:.45rem}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-form{clear:both;display:grid;gap:.5rem;padding:.75rem;border:1px solid color-mix(in srgb,var(--bs-danger) 30%,var(--bs-border-color));border-radius:.75rem;background:color-mix(in srgb,var(--bs-body-bg) 96%,var(--bs-danger) 2%);box-shadow:0 .2rem .65rem rgba(15,23,42,.08);text-align:left}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-form .form-check{display:flex;align-items:flex-start;gap:.35rem;margin:0;padding-left:0}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-form .form-check-input{position:static;float:none;flex:0 0 auto;margin:.12rem 0 0}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-form .form-check-label{min-width:0;overflow-wrap:anywhere}
html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-form code{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:767.98px){
  html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-panel{max-width:24rem}
  html[data-bs-theme] .smx-super-payments-page .smx-paypal-refund-form{min-width:20rem}
}
/* SM360_PAYPAL_REFUND_REAUDIT_V1_END */