@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================================================
 * CheckLight Admin — MODERN design system  (checklight-admin-v2)
 * ----------------------------------------------------------------------------
 * ONE source-of-truth tokens + component layer, loaded LAST so it overrides the
 * compiled Adminto theme (app.min.css) while leaving Bootstrap's grid and the
 * vendor widget CSS (daterangepicker / ion.rangeSlider / bootstrap4-toggle /
 * amCharts) intact.  Nothing here is page-specific — every admin page derives
 * its look from these tokens + components, so the whole app reads as one product.
 *
 * Sections:
 *   0  Tokens (colour / type / space / radius / shadow)
 *   1  Base & typography
 *   2  Shell — topbar / sidebar / footer / off-canvas
 *   3  Cards, stat-cards, section titles
 *   4  Buttons
 *   5  Badges, pills, score circles, vital-sign
 *   6  Tables
 *   7  Forms & inputs, toggles, sliders
 *   8  Tabs
 *   9  Dropdowns & menus
 *   10 Modals & the offers drawer
 *   11 Pagination
 *   12 Inbox widget / misc page bits
 *   13 Login
 *   14 Loading / empty states
 *   15 Responsive
 * ==========================================================================*/

/* ============================== 0 · TOKENS ============================== */
:root {
  /* surfaces */
  --bg: #eef1f6;
  /* app background */
  --surface: #ffffff;
  /* cards / panels */
  --surface-2: #f6f8fb;
  /* inset: table head, hover-neutral, subtle fills */
  --surface-3: #eef2f7;
  /* deeper inset */
  --border: #e4e8f0;
  /* hairline borders / dividers */
  --border-strong: #d3dae6;
  /* stronger divider when needed */

  /* text */
  --text: #16203a;
  /* primary */
  --text-2: #4a566e;
  /* secondary */
  --text-muted: #646d82;
  /* muted / captions (darkened to clear WCAG AA on light surfaces) */
  --text-on-dark: #ffffff;

  /* brand */
  --primary: #2f5fe0;
  --primary-hover: #2450c8;
  --primary-active: #1c3fa6;
  --primary-text: #2348bf;
  /* primary used as text on white (AA) */
  --primary-subtle: #eef3ff;
  --primary-tint: rgba(47, 95, 224, .10);
  --on-primary: #ffffff;

  /* semantic */
  --success: #16935a;
  --success-subtle: #e7f6ee;
  --success-text: #0f7a48;
  --danger: #df433d;
  --danger-subtle: #fdecec;
  --danger-text: #c1322c;
  --warning: #e8920c;
  --warning-subtle: #fdf3e2;
  --warning-text: #8a5a00;
  --info: #1683d4;
  --info-subtle: #e8f4fc;
  --info-text: #136aac;

  /* type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-stat: 30px;

  /* space (4/8) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* radius */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* elevation */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .07);
  --sh-md: 0 4px 14px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --sh-lg: 0 16px 40px rgba(16, 24, 40, .16), 0 4px 10px rgba(16, 24, 40, .06);
  --ring: 0 0 0 3px rgba(47, 95, 224, .22);

  /* layout */
  --side-w: 273px;
  --top-h: 70px;
  --content-max: 2400px;
  /* ultra-wide content cap (fits the widest data table) */
}

/* ============================ 1 · BASE ================================ */
body {
  font-family: var(--font) !important;
  font-size: var(--fs-base);
  color: var(--text);
  background-color: var(--bg) !important;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.admin,
.admin h1,
.admin h2,
.admin h3,
.admin h4,
.admin h5,
.admin h6,
.modal,
.dropdown-menu,
.daterangepicker,
.account-pages {
  font-family: var(--font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  font-weight: 600;
}

a {
  color: var(--primary-text);
}

a:hover {
  color: var(--primary-active);
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-primary {
  color: var(--primary-text) !important;
}

.text-success {
  color: var(--success-text) !important;
}

.text-danger {
  color: var(--danger-text) !important;
}

.text-warning {
  color: var(--warning-text) !important;
}

.text-info {
  color: var(--info-text) !important;
}

.red {
  color: var(--danger-text) !important;
}

hr {
  border-color: var(--border);
}

::-moz-selection {
  background: var(--primary-tint);
}

::selection {
  background: var(--primary-tint);
}

/* tabular numerals where figures matter */
.table,
.card-box h2,
.inbox-widget,
.pagination,
.score-circle,
.op-badge,
.rounded-circle {
  font-variant-numeric: tabular-nums;
}

/* keyboard focus */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* content gutter + ultra-wide cap.
 * Desktop target is 1080p → ultra-wide. Below the cap (≤~2400 content) the layout
 * is full-width as before; on ultra-wide monitors the content stops growing and
 * centres in the area beside the sidebar, so it never stretches sparse — while the
 * cap stays wide enough for the widest data tables to fully fit (no scroll). */
.admin.wrapper {
  padding-top: var(--top-h);
  padding-left: var(--side-w);
}

.admin.wrapper>.container-fluid {
  padding-left: 26px;
  padding-right: 26px;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ============================ 2 · SHELL ============================== */
/* ---- topbar ---- */
.admin.navbar-custom {
  height: var(--top-h);
  background-color: var(--surface);
  -webkit-box-shadow: none;
          box-shadow: none;
  border-bottom: 1px solid var(--border);
}

.admin.navbar-custom .admin.container-fluid {
  height: var(--top-h);
}

.admin .logo-box,
.admin.logo-box {
  height: var(--top-h);
  background: transparent !important;
}

/* CISO + CHECKLIGHT logos kept at their original, customer-required size */
.admin .cisologo {
  height: 80px !important;
}

.admin .logoCheck {
  height: 50px !important;
}

.admin .topnav-menu .nav-user {
  padding: 0 10px !important;
  height: var(--top-h);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  border-radius: var(--r-sm);
  color: var(--text-2) !important;
}

.admin .topnav-menu .nav-user:hover {
  background: var(--surface-2);
}

.admin .pro-user-name {
  font-weight: 600;
  color: var(--text) !important;
  font-size: var(--fs-sm);
}

.admin .topnav-menu .nav-user>i.fe-user {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--primary-subtle);
  color: var(--primary-text);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 15px;
}

/* hamburger (mobile) */
.cl-menu-toggle {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  font-size: 20px;
}

.cl-menu-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ---- sidebar ---- */
.left-side-menu {
  width: var(--side-w);
  background: var(--surface);
  -webkit-box-shadow: none;
          box-shadow: none;
  border-right: 1px solid var(--border);
  padding: 12px 0 16px;
  z-index: 1050;
}

.left-side-menu .container-fluid {
  padding-left: 14px;
  padding-right: 14px;
}

/* TRMC Console launcher — a gateway to the separate, advanced parent console.
   Styled as an app-launcher (icon tile + subtitle + external-link glyph) so it
   reads as "opens another, more powerful console", not as a nav item. */
.left-side-menu .cl-trmc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: background .15s, border-color .15s, -webkit-box-shadow .15s;
  transition: background .15s, border-color .15s, -webkit-box-shadow .15s;
  transition: background .15s, border-color .15s, box-shadow .15s;
  transition: background .15s, border-color .15s, box-shadow .15s, -webkit-box-shadow .15s;
}

.left-side-menu .cl-trmc:hover {
  background: var(--primary-subtle);
  border-color: var(--primary);
  -webkit-box-shadow: var(--sh-xs);
          box-shadow: var(--sh-xs);
}

.cl-trmc__icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-size: 18px;
  -webkit-transition: background .15s, color .15s;
  transition: background .15s, color .15s;
}

.left-side-menu .cl-trmc:hover .cl-trmc__icon {
  background: var(--primary);
  color: #fff;
}

.cl-trmc__text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1.2;
}

.cl-trmc__title {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
}

.cl-trmc__ext {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 16px;
  color: var(--text-muted);
}

.left-side-menu .cl-trmc:hover .cl-trmc__ext {
  color: var(--primary-text);
}

.left-side-menu .cl-external-link-li {
  margin-top: 14px;
}

.left-side-menu .cl-external-link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.left-side-menu .cl-external-link .cl-trmc__icon {
  background: var(--surface-3);
  color: var(--text-2);
}

.left-side-menu .cl-external-link .cl-trmc__text {
  min-width: 0;
  overflow: hidden;
}

.left-side-menu .cl-external-link .cl-trmc__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left-side-menu .cl-external-link .cl-trmc__ext {
  justify-self: end;
  width: 16px;
}

.left-side-menu .cl-external-link:hover .cl-trmc__icon {
  background: var(--primary);
  color: #fff;
}

/* MSSP context block */
/* MSSP context block — needs a selector specific enough to beat `.navigation-menu > li{margin:2px 0}` */
.left-side-menu .navigation-menu>li.nohover {
  width: 100%;
  margin-top: 14px;
  margin-bottom: 24px;
}

.left-side-menu .nohover h5.cl-mssp-context-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left !important;
  padding: 0 4px;
  margin: 0 0 8px;
}

/* trigger — reads like a (selected) menu item: icon + label + caret */
.left-side-menu .cl-mssp-trigger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  margin: 0;
  line-height: 1.2;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-transition: background .14s, border-color .14s;
  transition: background .14s, border-color .14s;
}

.left-side-menu .cl-mssp-trigger::after {
  display: none;
}

.left-side-menu .cl-mssp-trigger:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.left-side-menu .cl-mssp-trigger__icon {
  font-size: 18px;
  color: var(--primary);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.left-side-menu .cl-mssp-trigger__label {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left-side-menu .cl-mssp-trigger__caret {
  font-size: 18px;
  color: var(--text-muted);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

.left-side-menu .cl-mssp-trigger[aria-expanded="true"] {
  background: var(--primary-subtle);
  border-color: var(--primary);
}

.left-side-menu .cl-mssp-trigger[aria-expanded="true"] .cl-mssp-trigger__caret {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--primary);
}

/* nav items */
.admin.navigation-menu {
  padding: 0;
  margin-top: 4px;
}

/* Adminto floats the nav <li> (shrinks each to its text width) — make every
   item full-width so all buttons + their hover/active highlights are uniform */
.left-side-menu .navigation-menu li {
  list-style: none;
  float: none !important;
  width: 100% !important;
}

.admin.navigation-menu>li {
  margin: 2px 0;
}

.left-side-menu .navigation-menu>li>a,
.left-side-menu .navigation-menu a.subMenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-sm);
  line-height: 1.2;
  -webkit-transition: background .14s, color .14s;
  transition: background .14s, color .14s;
}

.left-side-menu .navigation-menu>li>a>i,
.left-side-menu .navigation-menu a.subMenu>i {
  font-size: 18px;
  width: 20px;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
  -webkit-transition: color .14s;
  transition: color .14s;
}

.left-side-menu .navigation-menu>li>a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.left-side-menu .navigation-menu>li>a:hover>i {
  color: var(--text-2);
}

/* active item — primary tint + left accent */
.left-side-menu .navigation-menu>li.mock-active>a,
.left-side-menu .navigation-menu a.subMenu.mock-active {
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-weight: 600;
  -webkit-box-shadow: inset 3px 0 0 var(--primary);
          box-shadow: inset 3px 0 0 var(--primary);
}

.left-side-menu .navigation-menu>li.mock-active>a>i,
.left-side-menu .navigation-menu a.subMenu.mock-active>i {
  color: var(--primary);
}

/* submenu group */
.left-side-menu .navigation-menu .collapse,
.left-side-menu .navigation-menu .collapsing {
  padding-left: 14px;
}

.left-side-menu .navigation-menu a.subMenu {
  font-size: var(--fs-sm);
  padding: 8px 12px;
}

/* expandable-group chevron (Adminto hides the default caret with content:none) */
.left-side-menu .navigation-menu>li>a.dropdown-toggle::after {
  display: none;
}

.left-side-menu .navigation-menu .menu-arrow {
  margin-left: auto !important;
  color: var(--text-muted);
  font-size: 18px;
  width: auto !important;
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
}

.left-side-menu .navigation-menu>li>a.dropdown-toggle:not(.collapsed) .menu-arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--primary);
}

/* MSSP context dropdown — wider, searchable, scrollable list of menu-like items */
.left-side-menu .cl-mssp-dropdown {
  position: relative;
}

.left-side-menu .nohover .cl-mssp-menu,
.left-side-menu .cl-mssp-menu {
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  left: 0 !important;
  right: auto !important;
  max-height: none !important;
  overflow: visible !important;
  /* only the list scrolls — no double scrollbar */
  border: 1px solid var(--border);
  border-radius: var(--r);
  -webkit-box-shadow: var(--sh-lg);
          box-shadow: var(--sh-lg);
  z-index: 1060;
}

.cl-mssp-search {
  position: relative;
  margin-bottom: 8px;
}

.cl-mssp-search>i.fas {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

.cl-mssp-search .form-control {
  padding-left: 34px;
  height: 40px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.cl-mssp-search .form-control:focus {
  border-color: var(--primary);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.cl-mssp-invalid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0 0 6px;
  padding: 0 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cl-mssp-invalid .form-check-input {
  position: static;
  margin: 0;
  width: 15px;
  height: 15px;
}

.cl-mssp-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px;
}

.cl-mssp-list::-webkit-scrollbar {
  width: 8px;
}

.cl-mssp-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid var(--surface);
}

.cl-mssp-list::-webkit-scrollbar-thumb:hover {
  background: #b9c2d2;
}

.cl-mssp-list::-webkit-scrollbar-track {
  background: transparent;
}

.left-side-menu .cl-mssp-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.left-side-menu .cl-mssp-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.left-side-menu .cl-mssp-item.active {
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-weight: 600;
}

.cl-mssp-item__name {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-mssp-item__check {
  color: var(--primary);
  opacity: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 16px;
}

.cl-mssp-item.active .cl-mssp-item__check {
  opacity: 1;
}

.cl-mssp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  background: var(--text-muted);
}

.cl-mssp-dot--valid {
  background: var(--success);
}

.cl-mssp-dot--trial {
  background: var(--warning);
}

.cl-mssp-dot--invalid {
  background: var(--danger);
}

.cl-mssp-empty {
  padding: 14px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* the 360px dropdown must escape the 248px sidebar — don't clip it */
.left-side-menu,
.left-side-menu .container-fluid,
.left-side-menu #navigation,
.left-side-menu .slimScrollDiv,
.left-side-menu .navigation-menu,
.left-side-menu .nohover,
.left-side-menu .cl-mssp-dropdown {
  overflow: visible !important;
}

/* ---- footer ---- */
.admin-footer {
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
  padding: 18px 26px;
  left: var(--side-w);
}

.admin-footer a {
  color: var(--text-2);
}

.admin-footer a:hover {
  color: var(--primary-text);
}

/* off-canvas backdrop element (added by shell.js) */
.cl-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
  z-index: 1040;
}

/* ===================== 3 · CARDS / STAT / TITLES ===================== */
.card-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  -webkit-box-shadow: var(--sh-sm);
          box-shadow: var(--sh-sm);
  padding: 22px 24px;
  margin-bottom: 24px;
}

.card-box.charts {
  padding-bottom: 14px;
}

.card .card-body,
.card {
  border-radius: var(--r);
}

.header-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

.header-title .fa-info-circle {
  color: var(--text-muted);
  font-size: 13px;
}

.page-title-box .page-title,
.page-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* stat cards */
.row>[class*="col-"]>.card-box>.row>.col-md-12>.float-right {
  width: 100%;
}

.card-box h2 {
  font-size: var(--fs-stat);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
}

.card-box h2.text-success {
  color: var(--success-text) !important;
}

.card-box h2.text-danger {
  color: var(--danger-text) !important;
}

.card-box h2.text-primary {
  color: var(--primary-text) !important;
}

.card-box h2+p,
.card-box .float-right p.text-muted {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted) !important;
  margin-top: 6px;
  margin-bottom: 0;
}

/* ============================ 4 · BUTTONS =========================== */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  line-height: 1.3;
  border: 1px solid transparent;
  -webkit-transition: background .15s, border-color .15s, color .15s, -webkit-box-shadow .15s;
  transition: background .15s, border-color .15s, color .15s, -webkit-box-shadow .15s;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, -webkit-box-shadow .15s;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn:focus,
.btn.focus {
  -webkit-box-shadow: var(--ring) !important;
          box-shadow: var(--ring) !important;
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--fs-xs);
  border-radius: 7px;
}

.btn-lg {
  padding: 12px 22px;
  font-size: var(--fs-md);
}

.btn i {
  vertical-align: -1px;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled).active {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-light {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-secondary:hover,
.btn-light:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle,
.show>.btn-light.dropdown-toggle {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.btn-success:hover {
  background: #127a4a !important;
  border-color: #127a4a !important;
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #c5362f !important;
  border-color: #c5362f !important;
}

.btn-info {
  background: var(--info);
  border-color: var(--info);
  color: #fff;
}

.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: #3b2a00;
}

/* outline / ghost */
.btn-outline-primary {
  color: var(--primary-text);
  border-color: var(--primary);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: #fff;
}

.btn-bordred-primary:not(.btn-menu) {
  background: var(--surface) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--primary) !important;
}

.btn-bordred-primary:not(.btn-menu):hover {
  background: var(--primary-subtle) !important;
}

.btn-link {
  color: var(--primary-text);
  font-weight: 600;
}

.btn[disabled],
.btn:disabled {
  opacity: .5;
}

/* ===================== 5 · BADGES / SCORE / VITAL ==================== */
.badge {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}

.badge-pill {
  border-radius: var(--r-pill);
}

.badge-success {
  background: var(--success-subtle);
  color: var(--success-text);
  border-color: rgba(22, 147, 90, .18);
}

.badge-danger {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-color: rgba(223, 67, 61, .18);
}

.badge-warning {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: rgba(232, 146, 12, .20);
}

.badge-info {
  background: var(--info-subtle);
  color: var(--info-text);
  border-color: rgba(22, 131, 212, .18);
}

.badge-primary {
  background: var(--primary-subtle);
  color: var(--primary-text);
  border-color: rgba(47, 95, 224, .18);
}

.badge-secondary,
.badge-light {
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--border);
}

.badge-dark {
  background: #2a3349;
  color: #fff;
}

/* threat score circle (solid, punchy) */
.rounded-circle.bg-danger,
.rounded-circle.bg-warning,
.rounded-circle.bg-success,
.score-circle {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 0 !important;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #fff !important;
  padding: 0 !important;
  -webkit-box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .16);
          box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .16);
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

/* AA: white on amber fails — score circles on warning use dark text */
.rounded-circle.bg-warning,
.score-circle.bg-warning {
  color: #2a1d00 !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

/* vital-sign pill */
.vital-sign {
  font-weight: 600;
}

/* ============================ 6 · TABLES ============================ */
.table {
  color: var(--text);
  margin-bottom: 0;
}

.table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-top: none;
  border-bottom: 1px solid var(--border);
  padding: 11px 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody td {
  padding: 13px 14px;
  vertical-align: middle;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.table tbody tr:first-child td {
  border-top: none;
}

.table tbody td strong,
.table tbody td b {
  color: var(--text);
  font-weight: 600;
}

.table-hover tbody tr {
  -webkit-transition: background .12s;
  transition: background .12s;
}

.table-hover tbody tr:hover {
  background: var(--surface-2);
}

.table-hover tbody tr:hover td {
  color: var(--text);
}

/* numeric / action alignment helpers used by the data tables */
.table td.text-center,
.table th.text-center {
  text-align: center;
}

.table td.text-right,
.table th.text-right {
  text-align: right;
}

/* filter controls living inside table headers */
.table thead th .form-control,
.table thead th .custom-select {
  margin-top: 7px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* expandable detail row */
tr.customerExpanded>td {
  background: var(--surface-2);
  padding: 0 !important;
  border-top: none;
}

tr.customerExpanded .card {
  margin: 14px;
  border: 1px solid var(--border);
  -webkit-box-shadow: var(--sh-xs);
          box-shadow: var(--sh-xs);
  border-radius: var(--r);
  overflow: hidden;
}

tr.customerExpanded .card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
}

/* expand tabs → segmented control (nicer than underline in-panel) */
tr.customerExpanded .card-header-tabs {
  margin: 0;
}

tr.customerExpanded .nav-tabs {
  border-bottom: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 2px;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  padding: 3px;
}

tr.customerExpanded .nav-tabs .nav-item {
  margin: 0;
}

tr.customerExpanded .nav-tabs .nav-link {
  border: none !important;
  border-radius: 6px;
  padding: 6px 14px;
  margin: 0;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
}

tr.customerExpanded .nav-tabs .nav-link:hover {
  color: var(--text);
  background: rgba(22, 32, 58, .05);
}

tr.customerExpanded .nav-tabs .nav-link.active {
  background: var(--surface);
  color: var(--primary-text);
  -webkit-box-shadow: var(--sh-sm);
          box-shadow: var(--sh-sm);
}

tr.customerExpanded .tab-content {
  padding: 22px;
}

/* demarcated sections inside an expand panel */
.cl-section {
  margin-bottom: 22px;
}

.cl-section:last-child {
  margin-bottom: 0;
}

.cl-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.cl-section__title i {
  color: var(--primary);
  font-size: 13px;
}

.cl-field {
  margin: 0;
  padding: 5px 0;
}

.cl-field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  padding-top: 4px;
  padding-bottom: 4px;
}

.cl-field .form-control-plaintext {
  color: var(--text);
  font-weight: 500;
}

/* expand panel: two top-level categories (Details vs Account Settings) */
.cl-detail-group__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.cl-detail-group--settings {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

/* inline-edit field: value + hover pencil; ✓ / ✗ icon buttons in edit mode */
.cl-inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  max-width: 100%;
  cursor: pointer;
}

.cl-inline__val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-inline__empty {
  color: var(--text-muted);
}

.cl-inline__edit {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  opacity: 0;
  color: var(--text-muted);
  font-size: 14px;
  -webkit-transition: opacity .12s, color .12s;
  transition: opacity .12s, color .12s;
}

.cl-inline:hover .cl-inline__edit {
  opacity: 1;
}

.cl-inline:hover .cl-inline__edit:hover {
  color: var(--primary-text);
}

.cl-inline__input {
  max-width: 200px;
  height: 32px;
  display: inline-block;
}

.cl-inline__btn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.cl-inline__btn i {
  font-size: 16px;
}

.cl-inline__btn--save {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.cl-inline__btn--save:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}

.cl-inline__btn--cancel {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-2);
}

.cl-inline__btn--cancel:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* expand sub-table (e.g. Users tab): heading row + clean inner table */
.cl-subhead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cl-subhead__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cl-subhead__title i {
  color: var(--primary);
  font-size: 13px;
}

.cl-count {
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
}

.cl-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.cl-dots {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: none;
  border: 0;
  color: var(--text-muted);
  border-radius: 8px;
}

.cl-dots:hover {
  background: var(--surface-3);
  color: var(--text);
}

.cl-dots:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.cl-dots:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  background: var(--surface-3);
  color: var(--text);
}

.cl-dots i {
  font-size: 18px;
  line-height: 1;
}

.cl-inner-table {
  margin: 0;
}

.cl-inner-table tbody tr:hover td {
  background: var(--surface-2);
}

/* user row cells (matches TRMC user-management) */
.cl-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
}

.cl-user__avatar {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.cl-user__name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.cl-mfa {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 9px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
}

.cl-mfa__on {
  color: var(--success);
}

.cl-mfa__off {
  color: var(--text-muted);
  opacity: .4;
}

.cl-row-muted td:not(:last-child) {
  opacity: .55;
}

.cl-actions-menu .dropdown-item i {
  width: 16px;
  margin-right: 8px;
  text-align: center;
  color: var(--text-muted);
}

.cl-actions-menu .dropdown-item:hover i {
  color: inherit;
}

/* LaunchPad — agent installer cards */
.cl-dl__intro {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0 0 18px;
  max-width: 75ch;
}

.cl-dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cl-dl-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  background: var(--surface);
}

.cl-dl-card__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cl-dl-card__icon {
  font-size: 26px;
  color: var(--text);
  width: 30px;
  text-align: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.cl-dl-card__name {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
}

.cl-dl-card__ver {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.cl-dl-card__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

.cl-dl-card__actions .dropdown {
  width: 100%;
}

/* compact inline search (e.g. Programs subhead) */
.cl-search-sm {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 240px;
          flex: 0 1 240px;
  min-width: 160px;
}

.cl-search-sm>i.fas {
  position: absolute;
  left: 11px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
}

.cl-search-sm .form-control {
  padding-left: 32px;
  height: 36px;
}

@media (max-width: 767.98px) {
  .cl-dl-grid {
    grid-template-columns: 1fr;
  }
}

.table-responsive {
  border-radius: var(--r);
}

/* ---- wide admin data tables: .table-wrapper = horizontal scroll + sticky cols ---- */
.table-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--r);
}

/* Adminto strips borders inside .table-wrapper — restore hairline dividers */
.table-wrapper thead th {
  border-bottom: 1px solid var(--border) !important;
}

.table-wrapper tbody td {
  border-top: 1px solid var(--border) !important;
}

.table-wrapper tbody tr:first-child td {
  border-top: none !important;
}

/* hover (this table has no .table-hover class) */
.table-wrapper tbody tr:hover td {
  background: var(--surface-2);
}

.table-wrapper tbody tr:hover td {
  color: var(--text);
}

/* pinned columns: keep surfaces consistent with header vs body + hover */
.table-wrapper thead .fixed-column {
  background: var(--surface-2) !important;
}

.table-wrapper tbody .fixed-column {
  background: var(--surface) !important;
}

.table-wrapper tbody tr:hover .fixed-column {
  background: var(--surface-2) !important;
}

/* scroll affordance: soft shadow on the inner edge of each pinned group */
.table-wrapper .fixed-column:nth-child(2) {
  -webkit-box-shadow: 7px 0 9px -7px rgba(16, 24, 40, .18);
          box-shadow: 7px 0 9px -7px rgba(16, 24, 40, .18);
}

.table-wrapper .fixed-column:last-child {
  -webkit-box-shadow: -7px 0 9px -7px rgba(16, 24, 40, .18);
          box-shadow: -7px 0 9px -7px rgba(16, 24, 40, .18);
}

/* modern thin scrollbar */
.table-wrapper::-webkit-scrollbar {
  height: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid var(--surface);
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #b9c2d2;
}

.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* header filter labels stay compact; their inputs are normal-case */
.table-wrapper thead th p {
  margin-bottom: 6px;
}

/* sortable header icon */
.table thead th [class*="mdi-sort"],
.table thead th .mdi-sort {
  cursor: pointer;
  color: var(--text-muted);
}

/* compact overview tables inside metric cards (dashboard etc.) */
.metric-table .table td,
.metric-table .table th {
  padding-left: 10px;
  padding-right: 10px;
}

.metric-table .table th:first-child,
.metric-table .table td:first-child {
  padding-left: 4px;
}

/* bound the name column so the overview table doesn't overflow (full name on hover) */
.metric-table .elipsisCustomer,
.metric-table .elipsisCustomerAdmin {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ===================== 7 · FORMS / INPUTS / TOGGLES ================= */
.form-control,
.custom-select {
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  min-height: 40px;
  padding: 8px 12px;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: border-color .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, box-shadow .15s;
  transition: border-color .15s, box-shadow .15s, -webkit-box-shadow .15s;
}

.form-control::-webkit-input-placeholder {
  color: var(--text-muted);
}

.form-control::-moz-placeholder {
  color: var(--text-muted);
}

.form-control:-ms-input-placeholder {
  color: var(--text-muted);
}

.form-control::-ms-input-placeholder {
  color: var(--text-muted);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--primary);
  -webkit-box-shadow: var(--ring);
          box-shadow: var(--ring);
  background: var(--surface);
}

.form-control.border {
  border: 1px solid var(--border-strong) !important;
}

.form-control-plaintext {
  color: var(--text);
  font-weight: 500;
  padding: 6px 0;
}

.form-group>label,
.form-horizontal label,
label.col-form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

.custom-select {
  background-position: right 12px center;
}

.input-icon,
.input-group-text {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--r-sm);
}

/* checkbox / radio */
.form-check-input {
  width: 16px;
  height: 16px;
}

.form-check-label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* date-range trigger button — unified filter-control look (icon · label · chevron) */
.date-picker-button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  white-space: nowrap;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: border-color .15s;
  transition: border-color .15s;
}

.date-picker-button:hover {
  border-color: #b9c2d2;
}

.date-picker-button .fa-calendar {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.date-picker-button>span {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.date-picker-button .fa-caret-down {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  color: var(--text-muted);
  margin-left: 2px;
  font-size: 12px;
}

/* ion.rangeSlider — recolour to brand */
.irs--round .irs-bar,
.irs-bar {
  background: var(--primary) !important;
}

.irs--round .irs-handle,
.irs-slider {
  border-color: var(--primary) !important;
}

.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single,
.irs-from,
.irs-to,
.irs-single {
  background: var(--primary) !important;
}

.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
  border-top-color: var(--primary) !important;
}

/* bootstrap4-toggle — brand "on" state */
.toggle.btn {
  border-radius: var(--r-pill) !important;
}

.toggle-on.btn {
  background: var(--primary) !important;
}

/* ============================== 8 · TABS =========================== */
.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 4px;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 11px 14px;
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--text);
  border-bottom-color: var(--border-strong);
}

.nav-tabs .nav-link.active {
  color: var(--primary-text);
  background: transparent;
  border-bottom: 2px solid var(--primary);
}

.nav-pills .nav-link {
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--text-2);
}

.nav-pills .nav-link.active {
  background: var(--primary);
  color: #fff;
}

.tab-content {
  padding-top: 18px;
}

/* ======================= 9 · DROPDOWNS / MENUS ===================== */
.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--r);
  -webkit-box-shadow: var(--sh-md);
          box-shadow: var(--sh-md);
  padding: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
}

.dropdown-item {
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--text-2);
  font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-2);
  color: var(--text);
}

.dropdown-item.notify-item:hover {
  background: var(--primary-subtle);
  color: var(--primary-text);
}

.dropdown-divider {
  border-color: var(--border);
}

/* user/profile dropdown — Adminto pins it at 170px, which clips longer items
   (e.g. "Switch to Admin view"). Let it size to its content. */
.profile-dropdown {
  width: auto !important;
  min-width: 210px;
}

.profile-dropdown .dropdown-item,
.profile-dropdown .notify-item {
  white-space: nowrap;
}

/* ==================== 10 · MODALS / OFFERS DRAWER =================== */
.modal-content {
  border: none;
  border-radius: var(--r-lg);
  -webkit-box-shadow: var(--sh-lg);
          box-shadow: var(--sh-lg);
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 18px 22px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.modal-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--text);
}

.modal-body {
  padding: 22px;
  color: var(--text-2);
}

.modal-footer {
  border-top: 1px solid var(--border);
  padding: 14px 22px;
  gap: 8px;
}

.modal-footer>* {
  margin: 0;
}

.modal {
  z-index: 1052;
}

.modal .close {
  font-size: 22px;
  color: var(--text-muted);
  opacity: 1;
  text-shadow: none;
}

.modal .close:hover {
  color: var(--text);
}

.modal-backdrop {
  z-index: 1051;
}

.modal-backdrop.show {
  opacity: .45;
  background: #0b1120;
}

/* ---- offers / Programs (.op-*) — remap Adminto's old accents to tokens ---- */
.op-chip {
  background: var(--primary-subtle);
  color: var(--primary-text);
  border-radius: var(--r-pill);
}

.op-chip--type {
  background: var(--success-subtle);
  color: var(--success-text);
}

.op-program__logo-placeholder {
  color: var(--primary-text);
}

.op-program__logo,
.op-badge {
  border-color: var(--border);
  background: var(--surface-2);
}

.op-default-card__title,
.op-program__name {
  color: var(--text);
}

.op-default-card__desc,
.op-program__desc,
.op-filters__summary,
.op-badge__total,
.op-badge--zero {
  color: var(--text-muted);
}

.op-default-card__icon {
  background: var(--primary-subtle);
  color: var(--primary-text);
}

.op-filters__search .form-control:focus {
  border-color: var(--primary);
  -webkit-box-shadow: var(--ring);
          box-shadow: var(--ring);
}

.op-table-wrapper {
  border-color: var(--border);
  border-radius: var(--r);
  -webkit-box-shadow: var(--sh-sm);
          box-shadow: var(--sh-sm);
}

.op-table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  border-bottom-color: var(--border);
}

.op-table tbody td {
  border-bottom-color: var(--border);
}

.op-table tbody tr:hover {
  background: var(--surface-2);
}

.op-table tbody tr.op-row--active {
  background: var(--primary-subtle);
}

.op-delete-modal__icon {
  color: var(--danger);
  background: var(--danger-subtle);
}

/* MSSP-availability drawer (off-canvas) */
.op-drawer__panel {
  background: var(--surface);
  -webkit-box-shadow: var(--sh-lg);
          box-shadow: var(--sh-lg);
}

.op-drawer__backdrop {
  background: rgba(16, 24, 40, .45);
}

.op-mssp-row:hover {
  background: var(--surface-2);
}

.op-drawer__search .form-control:focus {
  border-color: var(--primary);
  -webkit-box-shadow: var(--ring);
          box-shadow: var(--ring);
}

/* ============================ 11 · PAGINATION ====================== */
.pagination {
  gap: 4px;
}

.pagination .page-link,
.pagination a,
.pagination button {
  border: 1px solid var(--border);
  border-radius: var(--r-sm) !important;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--surface);
}

.pagination .page-link:hover,
.pagination a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.pagination .active .page-link,
.pagination .page-item.active a {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.pagination .disabled .page-link,
.pagination [disabled] {
  opacity: .45;
}

/* ===================== 12 · INBOX WIDGET / MISC ==================== */
.inbox-widget .inbox-item {
  border-bottom: 1px solid var(--border);
  padding: 12px 4px;
  -webkit-transition: background .12s;
  transition: background .12s;
  border-radius: 6px;
}

.inbox-widget .inbox-item:last-child {
  border-bottom: none;
}

.inbox-widget .inbox-item:hover {
  background: var(--surface-2);
}

.inbox-item-author,
.inbox-item .inbox-item-author {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 3px;
  display: block;
}

.inbox-item-author .elipsisCustomerAdmin {
  display: block;
  white-space: normal;
  overflow: visible;
  max-width: none;
  color: var(--text);
}

.inbox-item-text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}

/* alerts */
.alert {
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
}

.alert-warning {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: rgba(232, 146, 12, .25);
}

.alert-danger {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-color: rgba(223, 67, 61, .22);
}

.alert-success {
  background: var(--success-subtle);
  color: var(--success-text);
  border-color: rgba(22, 147, 90, .22);
}

.alert-info {
  background: var(--info-subtle);
  color: var(--info-text);
  border-color: rgba(22, 131, 212, .22);
}

/* ============================== 13 · LOGIN ========================= */
.account-pages {
  background: var(--bg);
}

.account-pages .card,
.loginPage .card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  -webkit-box-shadow: var(--sh-md);
          box-shadow: var(--sh-md);
}

/* ====================== 14 · LOADING / EMPTY ======================= */
#section-loading-spinner.admin-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 50vh;
}

.text-muted.no-data,
.no-data {
  color: var(--text-muted);
}

/* ============== 14b · PAGE PATTERNS (header / toolbar / rich cells) ============== */
/* page header: title + subtitle + primary action */
.page-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 22px;
}

.page-head__text {
  min-width: 0;
}

.page-head .page-title {
  margin: 0;
}

.page-subtitle {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 80ch;
}

.page-head .btn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.page-head__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* toolbar — filters/search above a table */
.cl-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 18px;
}

.cl-toolbar__search {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 260px;
          flex: 1 1 260px;
  max-width: 420px;
  min-width: 200px;
}

.cl-toolbar__search>i.fas {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

.cl-toolbar__search .form-control {
  padding-left: 34px;
}

.cl-toolbar__search--sm {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 170px;
          flex: 0 1 170px;
  min-width: 140px;
  max-width: 190px;
}

.cl-toolbar__search--md {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 230px;
          flex: 1 1 230px;
  min-width: 210px;
  max-width: 300px;
}

.cl-toolbar__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.cl-toolbar__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.cl-toolbar__field .custom-select {
  width: auto;
  min-width: 140px;
}

.cl-toolbar__field .date-picker-button {
  margin: 0;
}

.cl-toolbar__summary {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.cl-toolbar__summary strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cl-toolbar__date {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* unified select filter control: leading icon + native select (custom arrow) + chevron */
.cl-filter {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cl-filter__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  height: 40px;
  min-width: 190px;
  width: 100%;
  padding: 0 30px 0 32px;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  -webkit-transition: border-color .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, box-shadow .15s;
  transition: border-color .15s, box-shadow .15s, -webkit-box-shadow .15s;
}

.cl-filter__select:hover {
  border-color: #b9c2d2;
}

.cl-filter__select:focus {
  border-color: var(--primary);
  -webkit-box-shadow: var(--ring);
          box-shadow: var(--ring);
  outline: none;
}

.cl-filter__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.cl-filter__chev {
  position: absolute;
  right: 9px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 16px;
  pointer-events: none;
}

/* fixed column widths for data tables */
.w-120px {
  width: 120px;
  min-width: 120px;
}

.w-80px {
  width: 80px;
  min-width: 80px;
}

.w-140px {
  width: 140px;
  min-width: 140px;
}

.w-160px {
  width: 160px;
  min-width: 160px;
}

.w-200px {
  width: 200px;
  min-width: 200px;
}

.w-300px {
  width: 300px;
  min-width: 300px;
}

/* table card — table + pager footer fused into one bordered block */
.cl-table-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.cl-table-card>.table-wrapper {
  border: none;
  border-radius: 0;
}

.cl-table-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.cl-table-foot:empty {
  display: none;
}

.cl-pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.cl-pager__info {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cl-pager__info strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cl-pager .pagination {
  margin: 0;
}

.cl-pager__pages .page-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-2) !important;
  opacity: 1 !important;
  font-weight: 600;
  cursor: default;
}

/* rich table cells: org (avatar + name + location) */
.cl-org {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.cl-org__logo {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-weight: 700;
  font-size: var(--fs-md);
}

.cl-org__text {
  min-width: 0;
}

.cl-org__name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-org__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* utilization bar (e.g. license allocation) */
.cl-util {
  width: 100%;
  max-width: 180px;
  margin: 0;
}

.cl-util__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.cl-util__nums {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cl-util__pct {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cl-util__track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.cl-util__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.cl-util.is-warning .cl-util__fill {
  background: var(--warning);
}

.cl-util.is-danger .cl-util__fill {
  background: var(--danger);
}

.cl-util.is-danger .cl-util__pct {
  color: var(--danger-text);
  font-weight: 600;
}

/* count pill + names (e.g. available programs) */
.cl-progs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.cl-progs__count {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--primary-subtle);
  color: var(--primary-text);
  font-weight: 700;
  font-size: var(--fs-xs);
}

.cl-progs__names {
  min-width: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.cl-stack {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3px;
}

.cl-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ============================ 15 · RESPONSIVE ====================== */
/* progressive column priority (higher number = lower importance, hidden first) */
@media (max-width: 1399.98px) {
  .table [data-priority="6"] {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .table [data-priority="5"] {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .table [data-priority="4"] {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .table [data-priority="3"] {
    display: none;
  }

  .table [data-priority="2"] {
    display: none;
  }
}

/* < lg : sidebar becomes an off-canvas drawer */
@media (max-width: 991.98px) {

  /* topbar → flex so the hamburger / logo / user-menu order is predictable */
  .admin.navbar-custom .admin.container-fluid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
  }

  .cl-menu-toggle {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    margin: 0 2px 0 0;
  }

  .admin .logo-box,
  .admin.logo-box {
    float: none !important;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding-left: 4px;
  }

  /* below the off-canvas breakpoint the logos share the bar with the hamburger +
     user menu, so scale them to a medium size (kept on one line, never wrapping) */
  .admin .cisologo {
    height: 52px !important;
    margin-top: 0 !important;
  }

  .admin .logoCheck {
    height: 32px !important;
    margin-top: 0 !important;
  }

  .admin .topnav-menu.float-right {
    float: none !important;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-left: auto !important;
  }

  .admin.wrapper {
    padding-left: 0 !important;
  }

  .left-side-menu {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: -webkit-transform .26s cubic-bezier(.4, 0, .2, 1);
    transition: -webkit-transform .26s cubic-bezier(.4, 0, .2, 1);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1), -webkit-transform .26s cubic-bezier(.4, 0, .2, 1);
    z-index: 1045;
    top: 0;
    padding-top: 16px;
    -webkit-box-shadow: var(--sh-lg);
            box-shadow: var(--sh-lg);
  }

  body.cl-nav-open .left-side-menu {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  body.cl-nav-open .cl-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Adminto hides the admin nav below lg — re-show it as a vertical drawer list */
  .left-side-menu #navigation {
    display: block !important;
    position: static !important;
    overflow: visible !important;
  }

  .left-side-menu .navigation-menu {
    float: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .left-side-menu .navigation-menu>li {
    float: none !important;
    width: 100% !important;
  }

  .admin-footer {
    left: 0;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* tablet & down: comfortable card padding, modal full-bleed */
@media (max-width: 767.98px) {
  .admin.wrapper>.container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .card-box {
    padding: 18px;
  }

  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100%;
  }

  .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }

  .page-title-box .page-title,
  .page-title {
    font-size: var(--fs-xl);
  }

  .btn {
    padding: 10px 14px;
  }

  /* keep ≥40px touch height */
}

/* small phones */
@media (max-width: 575.98px) {
  .card-box h2 {
    font-size: 26px;
  }

  .admin .pro-user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* scale the (otherwise wide) logos down so they fit beside the hamburger + user menu */
  .admin .cisologo {
    height: 42px !important;
    margin-top: 0 !important;
  }

  .admin .logoCheck {
    height: 26px !important;
    margin-top: 0 !important;
  }
}

/* ===================== 16 · THREATS / ALERTS ======================= *
 * A simplified, light reworking of the TRMC alerts page: a severity
 * overview that doubles as a quick-filter, plus an alert-style list
 * (score + severity · reason + detection engine · indicator/endpoint/
 * customer · status · time-ago) instead of a plain data table.
 * ------------------------------------------------------------------ */

/* severity overview — summary tiles that also filter the list */
.cl-sevbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.cl-sevtile {
  position: relative;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  -webkit-box-shadow: var(--sh-sm);
          box-shadow: var(--sh-sm);
  padding: 16px 18px;
  -webkit-transition: border-color .15s, -webkit-box-shadow .15s, -webkit-transform .05s;
  transition: border-color .15s, -webkit-box-shadow .15s, -webkit-transform .05s;
  transition: border-color .15s, box-shadow .15s, transform .05s;
  transition: border-color .15s, box-shadow .15s, transform .05s, -webkit-box-shadow .15s, -webkit-transform .05s;
}

.cl-sevtile:hover {
  -webkit-box-shadow: var(--sh-md);
          box-shadow: var(--sh-md);
}

.cl-sevtile:active {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.cl-sevtile:focus-visible {
  outline: none;
  -webkit-box-shadow: var(--ring);
          box-shadow: var(--ring);
}

/* left accent rail keyed to severity */
.cl-sevtile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border-strong);
}

.cl-sevtile--all::before {
  background: var(--primary);
}

.cl-sevtile--high::before {
  background: var(--danger);
}

.cl-sevtile--medium::before {
  background: var(--warning);
}

.cl-sevtile--low::before {
  background: var(--success);
}

.cl-sevtile.is-active {
  border-color: var(--primary);
  -webkit-box-shadow: var(--ring);
          box-shadow: var(--ring);
}

.cl-sevtile__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}

.cl-sevtile__count {
  display: block;
  font-size: var(--fs-stat);
  font-weight: 750;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cl-sevtile__label {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.cl-sevtile__chip {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 16px;
  background: var(--surface-3);
  color: var(--text-muted);
}

.cl-sevtile--all .cl-sevtile__chip {
  background: var(--primary-subtle);
  color: var(--primary-text);
}

.cl-sevtile--high .cl-sevtile__chip {
  background: var(--danger-subtle);
  color: var(--danger-text);
}

.cl-sevtile--medium .cl-sevtile__chip {
  background: var(--warning-subtle);
  color: var(--warning-text);
}

.cl-sevtile--low .cl-sevtile__chip {
  background: var(--success-subtle);
  color: var(--success-text);
}

/* the alert list (lives inside .cl-table-card) */
.cl-alert-list {
  background: var(--surface);
}

.cl-alert {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 20px;
  border-top: 1px solid var(--border);
  -webkit-transition: background .12s;
  transition: background .12s;
}

.cl-alert:first-child {
  border-top: none;
}

.cl-alert:hover {
  background: var(--surface-2);
}

/* severity accent stripe on the row */
.cl-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}

.cl-alert--high::before {
  background: var(--danger);
}

.cl-alert--medium::before {
  background: var(--warning);
}

.cl-alert--low::before {
  background: var(--success);
}

/* prevented rows recede until hovered */
.cl-alert--resolved,
.cl-alert--prevented {
  background: var(--surface);
}

.cl-alert--resolved .cl-alert__title,
.cl-alert--prevented .cl-alert__title {
  color: var(--text-2);
  font-weight: 600;
}

.cl-alert--resolved .cl-alert__score,
.cl-alert--prevented .cl-alert__score {
  opacity: .72;
}

/* left: score circle + severity word */
.cl-alert__score {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  width: 48px;
}

.cl-alert__sevlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cl-alert__sevlabel--high {
  color: var(--danger-text);
}

.cl-alert__sevlabel--medium {
  color: var(--warning-text);
}

.cl-alert__sevlabel--low {
  color: var(--success-text);
}

/* middle: reason + engine, then indicator / endpoint / customer */
.cl-alert__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.cl-alert__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 6px;
}

.cl-alert__title {
  font-weight: 650;
  color: var(--text);
  font-size: var(--fs-md);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.cl-alert__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px 18px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.cl-alert__meta>span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  min-width: 0;
}

.cl-alert__meta i {
  font-size: 13px;
  color: var(--text-muted);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.cl-alert__ind code {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 12px;
  color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cl-alert__ep,
.cl-alert__co {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

/* detection-engine badge */
.cl-engine {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cl-engine i {
  font-size: 11px;
}

.cl-engine--cloud {
  background: var(--info-subtle);
  color: var(--info-text);
  border-color: rgba(22, 131, 212, .20);
}

.cl-engine--ml {
  background: #f1ecfe;
  color: #6d28d9;
  border-color: rgba(109, 40, 217, .18);
}

.cl-engine--behavioral {
  background: #e2f6f2;
  color: #0c6f60;
  border-color: rgba(12, 111, 96, .22);
}

.cl-engine--yara {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: rgba(232, 146, 12, .20);
}

.cl-engine--signature {
  background: var(--success-subtle);
  color: var(--success-text);
  border-color: rgba(22, 147, 90, .20);
}

.cl-engine--ransomware {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-color: rgba(223, 67, 61, .20);
}

.cl-engine--unknown {
  background: var(--surface-3);
  color: var(--text-2);
  border-color: var(--border);
}

.cl-trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}

.cl-trigger i {
  font-size: 11px;
  color: currentColor;
}

.cl-trigger--initial {
  background: var(--info-subtle);
  color: var(--info-text);
  border-color: rgba(22, 131, 212, .20);
}

.cl-trigger--user {
  background: var(--primary-subtle);
  color: var(--primary-text);
  border-color: rgba(47, 95, 224, .20);
}

.cl-trigger--policy {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: rgba(232, 146, 12, .20);
}

.cl-trigger--write {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-color: rgba(223, 67, 61, .20);
}

/* right: status + time + actions */
.cl-alert__aside {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

.cl-alert__time {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 96px;
}

.cl-alert__time i {
  font-size: 13px;
}

/* status pill (active / prevented / whitelisted) */
.cl-st {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  min-width: 92px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.cl-st i {
  font-size: 11px;
}

.cl-st__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.cl-st--open {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-color: rgba(223, 67, 61, .18);
}

.cl-st--open .cl-st__dot {
  background: var(--danger);
}

.cl-st--active {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-color: rgba(223, 67, 61, .18);
}

.cl-st--active .cl-st__dot {
  background: var(--danger);
}

.cl-st--resolved,
.cl-st--prevented {
  background: var(--success-subtle);
  color: var(--success-text);
  border-color: rgba(22, 147, 90, .18);
}

/* empty state for the list */
.cl-empty {
  text-align: center;
  padding: 60px 20px;
}

.cl-empty>i {
  font-size: 30px;
  color: var(--border-strong);
}

.cl-empty__title {
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--text-2);
  margin-top: 14px;
}

.cl-empty__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 4px;
}

/* responsive: stack tiles, then wrap the alert aside under the content */
@media (max-width: 1199.98px) {
  .cl-sevbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991.98px) {
  .cl-alert {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .cl-alert__aside {
    width: 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 64px;
    gap: 14px;
  }
}

@media (max-width: 575.98px) {
  .cl-alert__aside {
    padding-left: 0;
  }

  .cl-alert__ep,
  .cl-alert__co {
    max-width: 180px;
  }
}

/* ===================== 17 · ENDPOINT SCANS ========================= *
 * Modern scans table with an expandable row that lists the threats the
 * scan turned up (adapted from TRMC's endpoint-scans expand).
 * ------------------------------------------------------------------ */
/* threats-count cell badge in the main scan row */
.sc-threats-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}

/* expand chevron */
.sc-expand-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sc-expand {
  color: var(--text-muted);
  -webkit-transition: color .15s, -webkit-transform .2s;
  transition: color .15s, -webkit-transform .2s;
  transition: color .15s, transform .2s;
  transition: color .15s, transform .2s, -webkit-transform .2s;
}

.sc-expand:hover {
  color: var(--primary);
}

.sc-expand.is-open {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--primary);
}

/* expand header: title + scan meta */
.sc-found-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sc-found-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}

.sc-found-title i {
  color: var(--primary);
  font-size: 14px;
}

.sc-scanmeta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.sc-scanmeta span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}

.sc-scanmeta i {
  font-size: 13px;
}

.sc-scanmeta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-2);
}

/* found-threats inner table */
.sc-found-table {
  margin: 0;
}

.sc-found-table thead th {
  background: var(--surface-2);
}

.sc-found-table .score-circle {
  width: 30px;
  height: 30px;
  font-size: 12px;
  -webkit-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .16);
          box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .16);
}

.sc-file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
  min-width: 0;
}

.sc-file>i {
  color: var(--text-muted);
  font-size: 14px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.sc-file__text {
  min-width: 0;
}

.sc-file__path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text);
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-file__ind {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: block;
}

/* expanded parent row reads as active and connects to its panel */
.table-wrapper tbody tr.cl-row-open>td {
  background: var(--primary-subtle);
}

.table-wrapper tbody tr.cl-row-open .fixed-column {
  background: var(--primary-subtle) !important;
}

/* customer-name ellipsis outside the dashboard metric tables */
.table-wrapper .elipsisCustomer {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ===================== 18 · DASHBOARD (tabs + KPI cards) ============ *
 * Overview / Security tabs; KPI cards = the evolved stat-card (icon tile +
 * number + label + sub/trend), which can later roll out to the other pages.
 * ------------------------------------------------------------------ */
.dash-tabs {
  margin-bottom: 4px;
}

.dash-tabs .nav-link i {
  font-size: 16px;
  vertical-align: -2px;
}

.dash-tabs .nav-link .badge {
  margin-left: 6px;
}

/* Adminto caps .card-box.metric-table at max-height:650px with no overflow handling,
   so the taller latest-enrolled rows spilled below the card. Let these cards size to
   their content instead. */
.card-box.metric-table {
  min-height: 0;
  max-height: none;
}

.dash-kpi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 14px;
}

.dash-kpi__icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 20px;
  background: var(--primary-subtle);
  color: var(--primary-text);
}

.dash-kpi__icon--success {
  background: var(--success-subtle);
  color: var(--success-text);
}

.dash-kpi__icon--warning {
  background: var(--warning-subtle);
  color: var(--warning-text);
}

.dash-kpi__icon--danger {
  background: var(--danger-subtle);
  color: var(--danger-text);
}

.dash-kpi__icon--info {
  background: var(--info-subtle);
  color: var(--info-text);
}

.dash-kpi__body {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.dash-kpi__num {
  font-size: var(--fs-stat);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.dash-kpi__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  margin: 4px 0 0;
}

.dash-kpi__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 3px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}

.dash-kpi__sub i {
  font-size: 11px;
}

.dash-kpi__sub--up {
  color: var(--success-text);
  font-weight: 600;
}

.dash-kpi__sub--warn {
  color: var(--warning-text);
  font-weight: 600;
}

.dash-kpi__bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 9px;
}

.dash-kpi__bar>span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.dash-kpi__bar.is-warning>span {
  background: var(--warning);
}

.dash-kpi__bar.is-danger>span {
  background: var(--danger);
}

/* deployment status pill in the latest-enrolled table */
.dash-dep {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
}

.dash-dep__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dash-dep--ok {
  background: var(--success-subtle);
  color: var(--success-text);
  border-color: rgba(22, 147, 90, .18);
}

.dash-dep--wait {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: rgba(232, 146, 12, .20);
}

.dash-dep--wait .dash-dep__dot {
  background: var(--warning);
}

/* ---- ops panels (awaiting / renewals / mssp-watch / coverage / mfa) ---- */
.dash-panel__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dash-panel__head .header-title {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.dash-panel__head .header-title>i {
  color: var(--primary);
  font-size: 16px;
}

.dash-info {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  cursor: help;
}

.dash-info:hover {
  color: var(--primary-text) !important;
}

.dash-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-text);
  white-space: nowrap;
}

.dash-link:hover {
  color: var(--primary-active);
}

.dash-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.dash-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.dash-list__item:first-child {
  border-top: none;
}

.dash-list__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.dash-list__title {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-list__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-list__aside {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.dash-list .cl-org,
.dash-list .cl-user {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.dash-list .cl-util {
  max-width: none;
  margin-top: 6px;
}

/* coverage-gap rows: icon · label · count */
.dash-gap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.dash-gap:first-child {
  border-top: none;
}

.dash-gap__icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 17px;
  background: var(--surface-3);
  color: var(--text-muted);
}

.dash-gap__icon--danger {
  background: var(--danger-subtle);
  color: var(--danger-text);
}

.dash-gap__icon--warning {
  background: var(--warning-subtle);
  color: var(--warning-text);
}

.dash-gap__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.dash-gap__title {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
}

.dash-gap__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.dash-gap__count {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: var(--fs-xl);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.dash-gap__count.is-zero {
  color: var(--text-muted);
}

.dash-gap__count.is-danger {
  color: var(--danger-text);
}

.dash-gap__count.is-warning {
  color: var(--warning-text);
}

/* positive empty state */
.dash-clear {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  padding: 26px 12px;
  color: var(--success-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.dash-clear i {
  font-size: 16px;
}

/* equal-height cards within a dashboard row: the col is flex-stretched by the row,
   so let the card fill it (min-width:0 keeps inner tables/overflow shrinkable) */
#tab-overview .row>[class*="col-"],
#tab-security .row>[class*="col-"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#tab-overview .row>[class*="col-"]>.card-box,
#tab-security .row>[class*="col-"]>.card-box {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* licence plan mix (replaces the admins-without-MFA panel) */
.dash-mix__bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);
  margin: 2px 0 16px;
}

.dash-mix__seg {
  height: 100%;
}

.dash-mix__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.dash-mix__row:first-child {
  border-top: none;
}

.dash-mix__dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.dash-mix__name {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
}

.dash-mix__count {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dash-mix__pct {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-chart-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 7px 12px;
  margin-top: 10px;
}

.dash-chart-legend__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-chart-legend__item i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.dash-threat-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.dash-threat-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.dash-threat-row:first-child {
  border-top: 0;
}

.dash-threat-row:hover {
  background: var(--surface-2);
}

.dash-threat-row__score {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.dash-threat-row__score.is-high {
  background: var(--danger);
}

.dash-threat-row__score.is-medium {
  background: var(--warning);
}

.dash-threat-row__score.is-low {
  background: var(--success);
}

.dash-threat-row__main {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.dash-threat-row__title {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-threat-row__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.dash-threat-row__meta>span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}

.dash-threat-row__trigger {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-weight: 650;
  color: var(--text-2);
}

.dash-threat-row__trigger.is-initial {
  background: var(--info-subtle);
  color: var(--info-text);
  border-color: rgba(22, 131, 212, .20);
}

.dash-threat-row__trigger.is-user {
  background: var(--primary-subtle);
  color: var(--primary-text);
  border-color: rgba(47, 95, 224, .20);
}

.dash-threat-row__trigger.is-policy {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: rgba(232, 146, 12, .20);
}

/* ===================== 19 · CUSTOMER SHELL (centered icon menu) ===== *
 * The end-customer portal keeps its distinct DARK centered icon menu; the
 * topbar + all content adopt the light modern system. Scoped under
 * body.center-menu so none of this touches the admin shell.
 * ------------------------------------------------------------------ */
/* content gutter + ultra-wide cap (customer .wrapper isn't `.admin`) */
.center-menu>.wrapper {
  padding-left: 0;
  padding-right: 0;
  padding-top: 172px;
}

.center-menu .wrapper>.container-fluid {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 26px;
  padding-right: 26px;
}

/* white modern topbar (same classes as admin, minus the `.admin` scope) */
.center-menu #topnav {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.center-menu .navbar-custom {
  background: var(--surface) !important;
  height: var(--top-h);
  -webkit-box-shadow: none;
          box-shadow: none;
  border-bottom: 1px solid var(--border);
}

.center-menu .logo-box {
  height: var(--top-h);
  background: transparent !important;
}

.center-menu .cisologo {
  height: 80px !important;
}

.center-menu .logoCheck {
  height: 50px !important;
}

.center-menu .topnav-menu .nav-user {
  padding: 0 10px !important;
  height: var(--top-h);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  border-radius: var(--r-sm);
  color: var(--text-2) !important;
}

.center-menu .topnav-menu .nav-user:hover {
  background: var(--surface-2);
}

.center-menu .pro-user-name {
  font-weight: 600;
  color: var(--text) !important;
  font-size: var(--fs-sm);
}

.center-menu .topnav-menu .nav-user>i.fe-user {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--primary-subtle);
  color: var(--primary-text);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 15px;
}

.center-menu .navbar-custom .container-fluid {
  position: relative;
}

.center-menu .cl-cust-topbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 18px;
}

.center-menu .cl-cust-brand {
  position: static;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: auto;
  min-width: 0;
  float: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.center-menu .cl-cust-brand .logo {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}

.center-menu .cl-cust-header-center {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.center-menu .cl-cust-header-center .cl-topbar-action {
  pointer-events: auto;
}

.center-menu .cl-cust-actions {
  float: none !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 8px;
  height: 100%;
  margin-left: auto;
  position: relative;
  z-index: 2;
}

.center-menu .cl-cust-actions>li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.center-menu .cl-topbar-action,
.center-menu .cl-user-split__identity {
  min-height: 42px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2) !important;
  font-size: var(--fs-sm);
  font-weight: 650;
  padding: 8px 12px;
  -webkit-transition: background .15s, border-color .15s, color .15s, -webkit-box-shadow .15s;
  transition: background .15s, border-color .15s, color .15s, -webkit-box-shadow .15s;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, -webkit-box-shadow .15s;
}

.center-menu .cl-topbar-action:hover,
.center-menu .cl-topbar-action:focus,
.center-menu .cl-user-split:hover .cl-user-split__identity,
.center-menu .cl-user-split:focus-within .cl-user-split__identity {
  background: var(--primary-subtle);
  border-color: rgba(47, 95, 224, .32);
  color: var(--primary-text) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(47, 95, 224, .08);
          box-shadow: 0 0 0 3px rgba(47, 95, 224, .08);
  text-decoration: none;
}

.center-menu .cl-topbar-action i {
  color: var(--primary);
  font-size: 15px;
  line-height: 1;
}

.center-menu .cl-user-split {
  height: 54px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  -webkit-transition: border-color .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, box-shadow .15s;
  transition: border-color .15s, box-shadow .15s, -webkit-box-shadow .15s;
}

.center-menu .cl-user-split:hover,
.center-menu .cl-user-split:focus-within {
  border-color: rgba(47, 95, 224, .32);
  -webkit-box-shadow: 0 0 0 3px rgba(47, 95, 224, .08);
          box-shadow: 0 0 0 3px rgba(47, 95, 224, .08);
}

.center-menu .cl-user-split__identity {
  height: 100%;
  padding: 7px 10px !important;
  max-width: 300px;
  border: 0;
  border-radius: 0;
}

.center-menu .cl-user-split:hover .cl-user-split__identity,
.center-menu .cl-user-split:focus-within .cl-user-split__identity {
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: transparent;
}

.center-menu .cl-user-split__identity>i.fe-user {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--primary-subtle);
  color: var(--primary-text);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 15px;
}

.center-menu .cl-user-menu-text {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  line-height: 1.15;
}

.center-menu .cl-user-menu-name {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.center-menu .cl-user-menu-company {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.center-menu .cl-user-split__logout {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 7px;
  min-width: 96px;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  -webkit-transition: background .15s, color .15s, border-color .15s;
  transition: background .15s, color .15s, border-color .15s;
}

.center-menu .cl-user-split__logout:hover,
.center-menu .cl-user-split__logout:focus {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-left-color: rgba(223, 67, 61, .24);
  outline: none;
}

.center-menu .cl-user-split__logout:hover i,
.center-menu .cl-user-split__logout:focus i {
  color: var(--danger-text);
}

/* dark centered icon menu — kept dark, refined. Scoped under #topnav to beat
   Adminto's ID-specificity rules (which otherwise force tall 20px-padded links). */
.center-menu #topnav .topbar-menu {
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.center-menu #topnav .navigation-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0;
  margin: 0;
}

.center-menu #topnav .navigation-menu>li {
  float: none;
  margin: 0;
  list-style: none;
}

.center-menu #topnav .navigation-menu>li>a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 12px 24px;
  margin: 0;
  border-radius: var(--r-sm);
  line-height: 1.1;
  color: rgba(255, 255, 255, .72) !important;
  font-size: var(--fs-xs);
  font-weight: 600;
  -webkit-transition: background .15s, color .15s;
  transition: background .15s, color .15s;
}

.center-menu #topnav .navigation-menu>li>a img {
  width: 35px;
  height: 35px;
  opacity: .92;
}

.center-menu #topnav .navigation-menu>li>a:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff !important;
}

.center-menu #topnav .navigation-menu>li>a:hover img {
  opacity: 1;
}

.center-menu #topnav .navigation-menu>li.mock-active>a {
  background: rgba(255, 255, 255, .10);
  color: #fff !important;
  -webkit-box-shadow: inset 0 -2px 0 var(--primary);
          box-shadow: inset 0 -2px 0 var(--primary);
}

.center-menu #topnav .navigation-menu>li.mock-active>a img {
  opacity: 1;
}

/* customer footer sits on the light content background */
.center-menu .footer {
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
  padding: 18px 26px;
}

.center-menu .footer a {
  color: var(--text-2);
}

.center-menu .footer a:hover {
  color: var(--primary-text);
}

/* customer dashboard alert banner → modern (replaces solid bg-danger/bg-success block) */
.cl-cust-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  border-radius: var(--r);
  padding: 16px 22px;
  margin: 8px 0 22px;
  border: 1px solid transparent;
  font-weight: 700;
  -webkit-box-shadow: var(--sh-sm);
          box-shadow: var(--sh-sm);
}

.cl-cust-banner__icon {
  font-size: 22px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.cl-cust-banner__msg {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  min-width: 0;
  font-size: var(--fs-lg);
  text-align: center;
}

.cl-cust-banner__link {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-weight: 700;
  margin-left: 6px;
}

.cl-cust-banner--danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.cl-cust-banner--danger .cl-cust-banner__link {
  color: #fff;
  text-decoration: underline;
}

.cl-cust-banner--ok {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

.cl-cust-banner--ok .cl-cust-banner__link {
  color: #fff;
  text-decoration: underline;
}

/* equal-height cards — ONLY for top-level content rows (direct children of the
   page container). Must NOT use a descendant `.row` selector, or it flexes the
   nested rows inside the device cards and breaks their internal layout. */
body.center-menu .wrapper>.container-fluid>.row>[class*="col-"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body.center-menu .wrapper>.container-fluid>.row>[class*="col-"]>.card-box {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* ===================== 20 · CUSTOMER THREATS ======================= *
 * Admin .cl-alert rows + an expandable forensic-detail panel. */
.cl-st--warn {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: rgba(232, 146, 12, .20);
}

.cl-st--warn .cl-st__dot {
  background: var(--warning);
}

.cl-engine--ransomware {
  background: var(--danger-subtle);
  color: var(--danger-text);
  border-color: rgba(223, 67, 61, .20);
}

/* device/org cell with an icon (rather than an initial) */
.cl-org__logo i {
  font-size: 18px;
  line-height: 1;
}

.cl-alert--expandable {
  cursor: pointer;
}

.cl-alert__chev {
  color: var(--text-muted);
  font-size: 20px;
  -webkit-transition: color .15s, -webkit-transform .2s;
  transition: color .15s, -webkit-transform .2s;
  transition: transform .2s, color .15s;
  transition: transform .2s, color .15s, -webkit-transform .2s;
}

.cl-alert--open {
  background: var(--surface-2);
}

.cl-alert--open .cl-alert__chev {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--primary);
}

.cl-alert-detail {
  background: var(--surface-2);
  border-top: 1px dashed var(--border);
  padding: 16px 20px 18px 78px;
}

.cl-thd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
}

.cl-thd__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 2px;
}

.cl-thd__val {
  font-size: var(--fs-sm);
  color: var(--text);
  word-break: break-word;
}

.cl-thd__val a {
  color: var(--primary-text);
}

.cl-thd--full {
  grid-column: 1 / -1;
}

.cl-thd__code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  word-break: break-all;
  margin-top: 2px;
}

@media (max-width: 767.98px) {
  .cl-thd-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cl-alert-detail {
    padding-left: 20px;
  }
}

/* vulnerability expand detail: badges + colored remediation context */
.cl-vuln-detail {
  padding-top: 18px;
}

.cl-vuln-detail__hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 14px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 13px 14px;
  margin-bottom: 12px;
}

.cl-vuln-detail__hero--high {
  border-left-color: var(--danger);
  background: var(--danger-subtle);
}

.cl-vuln-detail__hero--medium {
  border-left-color: var(--warning);
  background: var(--warning-subtle);
}

.cl-vuln-detail__hero--low {
  border-left-color: var(--success);
  background: var(--success-subtle);
}

.cl-vuln-detail__eyebrow {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.cl-vuln-detail__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.cl-vuln-detail__badges {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 7px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.cl-vuln-chipbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 14px;
}

.cl-vuln-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 650;
}

.cl-vuln-chip i {
  color: var(--text-muted);
  font-size: 12px;
}

.cl-vuln-chip a {
  color: var(--primary-text);
}

.cl-vuln-chip--cve {
  background: var(--primary-subtle);
  border-color: rgba(47, 95, 224, .18);
  color: var(--primary-text);
}

.cl-vuln-chip--fix {
  background: var(--success-subtle);
  border-color: rgba(22, 147, 90, .18);
  color: var(--success-text);
}

.cl-vuln-grid {
  margin-top: 2px;
}

.cl-vuln-callout {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 11px 12px;
}

.cl-vuln-callout--desc {
  background: var(--surface);
}

.cl-vuln-callout--remediate {
  background: var(--success-subtle);
  border-color: rgba(22, 147, 90, .18);
}

.cl-vuln-callout--remediate .cl-thd__label,
.cl-vuln-callout--remediate .cl-thd__val {
  color: var(--success-text);
}

@media (max-width: 575.98px) {

  .cl-vuln-detail__badges,
  .cl-vuln-chipbar {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .cl-vuln-chip {
    white-space: normal;
    border-radius: var(--r-sm);
  }
}

/* ===================== 21 · CUSTOMER REPORTS ======================= *
 * Report preview rendered as one clean document with flat sections. */
.cl-report {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  -webkit-box-shadow: var(--sh-sm);
          box-shadow: var(--sh-sm);
  padding: 10px 14px 18px;
}

.cl-report .card-box,
.cl-report .card {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  margin-bottom: 0;
}

.cl-report .card-box {
  padding: 14px 18px;
}

.cl-report .card.card-body {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm);
  padding: 14px 18px;
}

.cl-report .borderReportDevice {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 8px;
  display: inline-block;
}

.cl-report .borderReportType {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  color: var(--text-2) !important;
}

.cl-report .reportLogoCiso {
  height: 60px;
}

.cl-report .reportLogo {
  height: 38px;
}

.cl-report .reportChart {
  width: 100%;
}

.cl-report .reportTimeline td {
  padding: 8px 14px;
}

/* ===================== 22 · CUSTOMER QUARANTINE ==================== *
 * Modern table; click a row to expand the file's threat-detail grid. */
.cl-row-click {
  cursor: pointer;
}

tr.cl-row-open>td {
  background: var(--primary-subtle);
}

tr.cl-row-click .mdi-chevron-down {
  color: var(--text-muted);
  -webkit-transition: color .15s, -webkit-transform .2s;
  transition: color .15s, -webkit-transform .2s;
  transition: transform .2s, color .15s;
  transition: transform .2s, color .15s, -webkit-transform .2s;
  display: inline-block;
}

tr.cl-row-open .mdi-chevron-down {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--primary);
}

.cl-qexp {
  padding: 16px 20px;
}

.cl-qexp__date {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-left: 8px;
}

.cl-qexp__title {
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--text);
  margin: 8px 0 2px;
}

.cl-qexp__desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin: 0 0 14px;
}

/* ===================== 23 · CUSTOMER SETTINGS ===================== */
/* notification toggle rows */
.cl-setting-group__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.cl-setting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-top: 1px solid var(--border);
}

.cl-setting:first-of-type {
  border-top: none;
}

.cl-setting__label {
  font-size: var(--fs-sm);
  color: var(--text);
}

.cl-setting__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 3px 0 0;
  max-width: 660px;
}

.cl-settings-engine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}

.cl-setting--engine {
  min-height: 68px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.cust-settings-v2 .cl-user__name {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cust-settings-v2 .cl-table-card .table td {
  vertical-align: middle;
}

/* detection-mode option cards */
.detection {
  border: 1px solid var(--border) !important;
  border-radius: var(--r);
  padding: 22px 16px;
  cursor: pointer;
  background: var(--surface);
  -webkit-transition: border-color .15s, background .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, background .15s, -webkit-box-shadow .15s;
  transition: border-color .15s, box-shadow .15s, background .15s;
  transition: border-color .15s, box-shadow .15s, background .15s, -webkit-box-shadow .15s;
}

.detection:hover {
  border-color: var(--border-strong) !important;
  -webkit-box-shadow: var(--sh-sm);
          box-shadow: var(--sh-sm);
}

.detection.detection-selected {
  border-color: var(--primary) !important;
  background: var(--primary-subtle);
  -webkit-box-shadow: var(--ring);
          box-shadow: var(--ring);
}

.detection img {
  height: 60px;
  margin-top: 6px;
}

.detection p strong {
  color: var(--text);
}

.detection .selected {
  color: var(--primary);
}

/* applied program cards */
.cl-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.cl-prog-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  background: var(--surface);
}

.cl-prog-card__logo {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--primary-subtle);
  color: var(--primary-text);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 700;
  font-size: var(--fs-md);
}

.cl-prog-card__img {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 3px;
}

.cl-prog-card__name {
  font-weight: 700;
  color: var(--text);
}

.cl-prog-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 2px 0 0;
}

@media (max-width: 991.98px) {
  .cl-settings-engine-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .cust-settings-v2 .cl-subhead {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .cust-settings-v2 .cl-user__name {
    max-width: 220px;
  }
}

/* ===================== 24 · ENDPOINT DETAIL ====================== */
/* vital-sign checklist */
.cl-vitals .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.cl-vitals .item:first-child {
  border-top: none;
}

.cl-vitals .item>i {
  font-size: 16px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.cl-vitals .item p {
  font-size: var(--fs-sm);
  color: var(--text);
  margin: 0;
}

/* key-value rows (tamper / agent summary) */
.cl-kv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.cl-kv:first-child {
  border-top: none;
}

.cl-kv__k {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 600;
}

.cl-kv__v {
  font-size: var(--fs-sm);
  color: var(--text);
  text-align: right;
}

/* modern vertical activity timeline */
.cl-tl {
  position: relative;
  padding-left: 26px;
}

.cl-tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.cl-tl__date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 20px 0 10px;
}

.cl-tl__date:first-child {
  margin-top: 0;
}

.cl-tl__item {
  position: relative;
  padding: 5px 0;
}

.cl-tl__dot {
  position: absolute;
  left: -26px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  -webkit-box-shadow: 0 0 0 2px var(--primary-tint);
          box-shadow: 0 0 0 2px var(--primary-tint);
}

.cl-tl__dot--threat {
  background: var(--danger);
  -webkit-box-shadow: 0 0 0 2px var(--danger-subtle);
          box-shadow: 0 0 0 2px var(--danger-subtle);
}

.cl-tl__time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cl-tl__label {
  font-size: var(--fs-sm);
  color: var(--text);
}

.cl-tl__item--threat .cl-tl__label {
  color: var(--danger-text);
  font-weight: 600;
}

/* ===================== 25 · REVIEW FIXES ========================= */
/* settings detection-card description — tokenized size + AA on the tinted selected card */
.cl-detection-desc {
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin: 0;
}

/* keyboard-accessible chevron toggle for expandable rows (real <button>) */
.cl-chev-btn {
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 6px;
}

.cl-chev-btn:hover {
  color: var(--primary);
}

.cl-chev-btn:focus {
  outline: none;
}

.cl-chev-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  color: var(--primary);
}

/* detection-mode option cards as a keyboard radiogroup */
.detection:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* reports: define the dead `mw-15` utility + let the report card fill its column */
.mw-15 {
  max-width: 15%;
}

body.center-menu .wrapper>.container-fluid>.row>[class*="col-"]>.card.cl-report {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* quarantine expand header (was an orphan class) */
.cl-qexp__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}

.cl-qexp__head .cl-qexp__title,
.cl-qexp__head .cl-qexp__desc {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

/* customer shell below the desktop target: keep the dark icon menu reachable + scale logos
   (a dedicated mobile build is separate; this just prevents total nav loss on a narrow window) */
@media (max-width: 991.98px) {
  .center-menu #topnav #navigation {
    display: block !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .center-menu #topnav .navigation-menu {
    float: none !important;
  }

  .center-menu>.wrapper {
    padding-top: 150px;
  }

  .center-menu .cisologo {
    height: 52px !important;
  }

  .center-menu .logoCheck {
    height: 32px !important;
  }
}

@media (max-width: 575.98px) {
  .center-menu .cisologo {
    height: 42px !important;
  }

  .center-menu .logoCheck {
    height: 26px !important;
  }
}

/* ===================== 26 · ADD ENDPOINT (installer flow) ======== */
/* this page stacks a stepper + wizard in one column — opt out of the card equal-height flex row */
body.center-menu .wrapper>.container-fluid>.row>.cl-add-col {
  display: block;
}

/* step indicator */
.cl-stepper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 6px 0 26px;
}

.cl-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.cl-step__num {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  border: 2px solid var(--border-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.cl-step__label {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.cl-step--active .cl-step__num {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.cl-step--active .cl-step__label {
  color: var(--text);
}

.cl-step--done .cl-step__num {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

.cl-step--done .cl-step__label {
  color: var(--text-2);
}

.cl-step__bar {
  width: 90px;
  height: 2px;
  background: var(--border-strong);
  margin: 0 18px;
  border-radius: 2px;
  -webkit-transition: background .2s;
  transition: background .2s;
}

.cl-step__bar--done {
  background: var(--success);
}

/* platform download cards */
.cl-dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cl-dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 20px;
  -webkit-transition: border-color .15s, -webkit-box-shadow .15s, -webkit-transform .15s;
  transition: border-color .15s, -webkit-box-shadow .15s, -webkit-transform .15s;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  transition: border-color .15s, box-shadow .15s, transform .15s, -webkit-box-shadow .15s, -webkit-transform .15s;
}

.cl-dl:hover {
  border-color: var(--border-strong);
  -webkit-box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .25);
          box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .25);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.cl-dl__icon {
  font-size: 46px;
  line-height: 1;
  color: var(--text-2);
  margin-bottom: 12px;
}

.cl-dl__name {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
  margin-bottom: 3px;
}

.cl-dl__meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 18px;
  min-height: 34px;
}

.cl-dl__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}

.cl-dl__btns .btn {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* per-OS download / generate-link dropdowns — full-width, identical across every card */
.cl-dl__dd {
  width: 100%;
}

.cl-dl__dd>.btn {
  width: 100%;
}

.cl-dl__dd .dropdown-menu {
  width: 100%;
  min-width: 0;
}

.cl-dl__dd .dropdown-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cl-dl__dd .dropdown-item>i {
  color: var(--text-muted);
  width: 16px;
}

.cl-dl__dd .dropdown-item:hover>i,
.cl-dl__dd .dropdown-item:focus>i {
  color: var(--primary);
}

/* install flow (step 2) */
.cl-done-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--success-subtle);
  color: var(--success-text);
  font-size: 26px;
}

.cl-install-flow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 26px 0 22px;
}

.cl-install-step {
  text-align: center;
  padding: 12px 18px;
  min-width: 130px;
}

.cl-install-step__icon {
  font-size: 44px;
  line-height: 1;
}

.cl-install-step__label {
  font-weight: 600;
  color: var(--text);
  margin-top: 8px;
}

.cl-install-arrow {
  color: var(--border-strong);
  font-size: 30px;
}

/* helpful-resources list */
.cl-help {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cl-help li {
  border-top: 1px solid var(--border);
}

.cl-help li:first-child {
  border-top: 0;
}

.cl-help a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 11px;
  padding: 13px 4px;
  color: var(--text-2);
  font-weight: 500;
}

.cl-help a:hover {
  color: var(--primary);
}

.cl-help a>i {
  color: var(--text-muted);
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.cl-help a:hover>i {
  color: var(--primary);
}

@media (max-width: 991.98px) {
  .cl-dl-grid {
    grid-template-columns: 1fr;
  }

  .cl-step__bar {
    width: 48px;
    margin: 0 10px;
  }
}