/*
 * iciem-theme.css
 * ICIEM Platform — Shared Design System
 * Provides design tokens, form components, buttons, cards,
 * and accessibility utilities for use across all pages.
 *
 * Class prefix: ic-
 * All CSS variables: --ic-*
 ******************************************************************************/


/* ══ 1. DESIGN TOKENS ════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --ic-brand:          #0F172A;
  --ic-brand-mid:      #1E293B;
  --ic-cta:            #0369A1;
  --ic-cta-hover:      #0284C7;
  --ic-accent:         #38BDF8;

  /* Surface */
  --ic-bg:             #F8FAFC;
  --ic-surface:        #FFFFFF;

  /* Text */
  --ic-text:           #020617;
  --ic-muted:          #334155;
  --ic-subtle:         #64748B;
  --ic-placeholder:    #94A3B8;

  /* Borders */
  --ic-border:         #E2E8F0;
  --ic-border-focus:   #0369A1;

  /* States */
  --ic-error:          #B91C1C;
  --ic-success:        #15803D;
  --ic-warning:        #B45309;

  /* Focus rings */
  --ic-ring:           0 0 0 3px rgba(3, 105, 161, 0.35);
  --ic-ring-err:       0 0 0 3px rgba(185, 28, 28, 0.25);

  /* Typography */
  --ic-font-head:      'Inter', system-ui, sans-serif;
  --ic-font-body:      'Inter', system-ui, sans-serif;

  /* Shape */
  --ic-radius:         4px;
  --ic-radius-lg:      6px;

  /* Touch target */
  --ic-touch:          44px;
}


/* ══ 2. ACCESSIBILITY ════════════════════════════════════════════════════════ */

/* Skip to main content — keyboard only */
.ic-skip {
  position: absolute;
  top: -999px;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1.25rem;
  background: var(--ic-cta);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 var(--ic-radius) var(--ic-radius);
  text-decoration: none;
}
.ic-skip:focus { top: 0; }


/* ══ 3. TYPOGRAPHY ═══════════════════════════════════════════════════════════ */

.ic-font-head { font-family: var(--ic-font-head); }
.ic-font-body { font-family: var(--ic-font-body); }

.ic-heading {
  font-family: var(--ic-font-head);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ic-text);
  line-height: 1.25;
}

.ic-subheading {
  font-size: 0.875rem;
  color: var(--ic-muted);
  line-height: 1.6;
}

.ic-label-caps {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ic-text);
}

/* Colour utilities */
.ic-text-brand  { color: var(--ic-brand)  !important; }
.ic-text-cta    { color: var(--ic-cta)    !important; }
.ic-text-muted  { color: var(--ic-muted)  !important; }
.ic-text-subtle { color: var(--ic-subtle) !important; }
.ic-text-error  { color: var(--ic-error)  !important; }


/* ══ 4. LAYOUT PRIMITIVES ════════════════════════════════════════════════════ */

.ic-divider {
  border: none;
  border-top: 1px solid var(--ic-border);
  margin-top: 0;
  margin-bottom: 0;
}

/* White surface card */
.ic-card {
  background: var(--ic-surface);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-radius-lg);
  padding: 2rem 2.25rem 1.75rem;
}

@media (max-width: 575.98px) {
  .ic-card {
    border: none;
    background: transparent;
    padding: 0;
  }
}


/* ══ 5. FORM COMPONENTS ══════════════════════════════════════════════════════ */

/* Field wrapper */
.ic-field { margin-bottom: 1.1rem; }

/* Label */
.ic-label {
  display: block;
  font-family: var(--ic-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ic-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* Input */
.ic-input {
  display: block;
  width: 100%;
  min-height: var(--ic-touch);
  padding: 0.55rem 0.875rem;
  font-family: var(--ic-font-body);
  font-size: 0.9rem;
  color: var(--ic-text);
  background: var(--ic-surface);
  border: 1.5px solid var(--ic-border);
  border-radius: var(--ic-radius);
  outline: none;
  line-height: 1.5;
}
.ic-input::placeholder          { color: var(--ic-placeholder); }
.ic-input:focus                  { border-color: var(--ic-border-focus); box-shadow: var(--ic-ring); }
.ic-input.is-invalid             { border-color: var(--ic-error); }
.ic-input.is-invalid:focus       { box-shadow: var(--ic-ring-err); }

/* Password visibility wrapper */
.ic-pw-wrap          { position: relative; }
.ic-pw-wrap .ic-input { padding-right: 2.75rem; }

.ic-pw-btn {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--ic-touch);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ic-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
}
.ic-pw-btn:hover         { color: var(--ic-muted); }
.ic-pw-btn:focus-visible { outline: none; box-shadow: var(--ic-ring); }

/* Inline error message (use role="alert") */
.ic-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-family: var(--ic-font-body);
  font-size: 0.775rem;
  color: var(--ic-error);
  margin-top: 0.35rem;
  line-height: 1.4;
}
.ic-field-error > svg { flex-shrink: 0; margin-top: 1px; }

/* Remember / checkbox row */
.ic-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ic-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--ic-cta);
  border-radius: 2px;
}
.ic-check-label {
  font-family: var(--ic-font-body);
  font-size: 0.82rem;
  color: var(--ic-muted);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}


/* ══ 6. BUTTON ═══════════════════════════════════════════════════════════════ */

.ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--ic-touch);
  padding: 0.6rem 1.25rem;
  font-family: var(--ic-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--ic-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.ic-btn:focus-visible { outline: none; box-shadow: var(--ic-ring); }
.ic-btn:disabled      { opacity: 0.6; cursor: not-allowed; }

/* Filled — primary action */
.ic-btn-primary {
  background: var(--ic-cta);
  color: #ffffff;
  border-color: var(--ic-cta);
  width: 100%;
}
.ic-btn-primary:hover { background: var(--ic-cta-hover); border-color: var(--ic-cta-hover); color: #fff; }

/* Outline — secondary action */
.ic-btn-outline {
  background: transparent;
  color: var(--ic-cta);
  border-color: var(--ic-cta);
}
.ic-btn-outline:hover { background: var(--ic-cta); color: #fff; }

/* Ghost — tertiary / text-link action */
.ic-btn-ghost {
  background: transparent;
  color: var(--ic-cta);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  min-height: auto;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.ic-btn-ghost:hover { color: var(--ic-cta-hover); text-decoration: underline; }


/* ══ 7. TRUST / STATUS BADGE ═════════════════════════════════════════════════ */

.ic-trust-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.ic-trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--ic-radius);
}

.ic-trust-item--light {
  background: var(--ic-bg);
  border-color: var(--ic-border);
}

.ic-trust-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--ic-accent);
}

.ic-trust-item--light .ic-trust-icon { color: var(--ic-cta); }

.ic-trust-text {
  font-family: var(--ic-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.3;
}

.ic-trust-item--light .ic-trust-text { color: var(--ic-muted); }


/* ══ 8. SECURITY NOTE ════════════════════════════════════════════════════════ */

.ic-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--ic-font-body);
  font-size: 0.72rem;
  color: var(--ic-subtle);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.ic-security-note svg { flex-shrink: 0; color: var(--ic-subtle); }


/* ══ 9. INLINE ALERT BANNER ══════════════════════════════════════════════════ */

.ic-alert {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ic-radius);
  font-family: var(--ic-font-body);
  font-size: 0.84rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.ic-alert svg          { flex-shrink: 0; margin-top: 2px; }
.ic-alert-error        { background: #FEF2F2; border-color: #FECACA; color: var(--ic-error); }
.ic-alert-success      { background: #F0FDF4; border-color: #BBF7D0; color: var(--ic-success); }
.ic-alert-warning      { background: #FFFBEB; border-color: #FDE68A; color: var(--ic-warning); }
.ic-alert-info         { background: #F0F9FF; border-color: #BAE6FD; color: var(--ic-cta); }


/* ══ 10. REDUCED MOTION ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ══ 11. DASHBOARD — BOOTSTRAP OVERRIDES ═════════════════════════════════════
 * Scoped to .content-wrapper so the sidebar, navbar, and vendor UI are
 * unaffected. Every Bootstrap component inside the content area picks up
 * the ICIEM brand tokens automatically — no blade file changes required.
 ******************************************************************************/

/* ── Page header banner ─────────────────────────────── */
.ic-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ic-border);
}
.ic-page-header-left { flex: 1 1 0; min-width: 0; }
.ic-page-title {
  font-family: var(--ic-font-head);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ic-text);
  line-height: 1.25;
  margin: 0 0 0.2rem;
}
.ic-page-subtitle {
  font-size: 0.82rem;
  color: var(--ic-subtle);
  margin: 0;
  line-height: 1.5;
}
.ic-page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .ic-page-header { flex-direction: column; }
  .ic-page-header-actions { width: 100%; }
}

/* ── Card: consistent border, left accent, headings ──── */
.content-wrapper .card {
  border-color: var(--ic-border);
  border-radius: var(--ic-radius-lg);
}
.content-wrapper .card-header {
  background: var(--ic-surface);
  border-bottom-color: var(--ic-border);
  border-left: 3px solid var(--ic-cta);
  padding-left: calc(1.25rem - 3px);
}
.content-wrapper .card-footer {
  background: var(--ic-surface);
  border-top-color: var(--ic-border);
}
.content-wrapper .card-title,
.content-wrapper h5.card-title,
.content-wrapper h6.card-title,
.content-wrapper .card-header > h4,
.content-wrapper .card-header > h5,
.content-wrapper .card-header > h6 {
  font-family: var(--ic-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ic-text);
  letter-spacing: 0.01em;
}

/* Stat card numbers */
.content-wrapper .card-body > h4,
.content-wrapper .card-body > h5 {
  font-family: var(--ic-font-head);
  color: var(--ic-text);
}

/* ── Form labels ─────────────────────────────────────── */
.content-wrapper .form-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ic-text);
  margin-bottom: 0.4rem;
}

/* ── Form controls & selects ─────────────────────────── */
.content-wrapper .form-control,
.content-wrapper .form-select {
  border-color: var(--ic-border);
  color: var(--ic-text);
  min-height: var(--ic-touch);
  font-size: 0.9rem;
}
.content-wrapper .form-control::placeholder { color: var(--ic-placeholder); }
.content-wrapper .form-control:focus,
.content-wrapper .form-select:focus {
  border-color: var(--ic-border-focus);
  box-shadow: var(--ic-ring);
}
.content-wrapper .form-control.is-invalid:focus,
.content-wrapper .form-select.is-invalid:focus { box-shadow: var(--ic-ring-err); }

/* sm size variants stay compact */
.content-wrapper .form-control-sm,
.content-wrapper .form-select-sm { font-size: 0.85rem; min-height: 36px; }

/* ── Alerts ──────────────────────────────────────────── */
.content-wrapper .alert {
  border-radius: var(--ic-radius);
  font-size: 0.875rem;
  border-width: 1px;
}
.content-wrapper .alert-success {
  background: #F0FDF4; border-color: #BBF7D0; color: var(--ic-success);
}
.content-wrapper .alert-danger {
  background: #FEF2F2; border-color: #FECACA; color: var(--ic-error);
}
.content-wrapper .alert-warning {
  background: #FFFBEB; border-color: #FDE68A; color: var(--ic-warning);
}
.content-wrapper .alert-info {
  background: #F0F9FF; border-color: #BAE6FD; color: var(--ic-cta);
}

/* ── btn-primary ─────────────────────────────────────── */
.content-wrapper .btn-primary {
  background-color: var(--ic-cta) !important;
  border-color: var(--ic-cta) !important;
  color: #ffffff !important;
}
.content-wrapper .btn-primary:hover,
.content-wrapper .btn-primary:active {
  background-color: var(--ic-cta-hover) !important;
  border-color: var(--ic-cta-hover) !important;
}
.content-wrapper .btn-primary:focus-visible { box-shadow: var(--ic-ring) !important; }

/* ── btn-outline-primary ─────────────────────────────── */
.content-wrapper .btn-outline-primary {
  color: var(--ic-cta) !important;
  border-color: var(--ic-cta) !important;
}
.content-wrapper .btn-outline-primary:hover {
  background-color: var(--ic-cta) !important;
  color: #fff !important;
}

/* ── Icon buttons (edit/delete) ─────────────────────── */
.content-wrapper .btn-icon.text-primary { color: var(--ic-cta) !important; }

/* ── Table headers ───────────────────────────────────── */
.content-wrapper .table > thead th,
.content-wrapper .table > thead > tr > th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ic-muted);
  border-bottom-color: var(--ic-border);
}
.content-wrapper .table-light,
.content-wrapper thead.table-light > tr > th {
  --bs-table-bg: var(--ic-bg);
  background-color: var(--ic-bg) !important;
}
.content-wrapper .table-hover > tbody > tr:hover > * {
  background-color: rgba(3, 105, 161, 0.04);
  color: inherit;
}

/* ── Pagination ──────────────────────────────────────── */
.content-wrapper .page-link {
  color: var(--ic-cta);
  border-color: var(--ic-border);
}
.content-wrapper .page-link:hover {
  background: var(--ic-bg);
  border-color: var(--ic-border-focus);
  color: var(--ic-cta-hover);
}
.content-wrapper .page-item.active .page-link {
  background-color: var(--ic-cta);
  border-color: var(--ic-cta);
  color: #fff;
}
.content-wrapper .page-item.disabled .page-link { color: var(--ic-subtle); }

/* ── Modal: keep card-header accent bar out of modals ── */
.modal .card-header { border-left: none !important; }

/* ── Section group headings (h6 used as dividers in forms) */
.content-wrapper .text-muted.mb-1,
.content-wrapper h6.text-muted {
  font-family: var(--ic-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ic-subtle) !important;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ic-border);
  margin-bottom: 0.75rem !important;
}

/* ── Badge bg-label-primary pull to brand colour ─────── */
.content-wrapper .bg-label-primary {
  background-color: rgba(3, 105, 161, 0.12) !important;
  color: var(--ic-cta) !important;
}


/* ══ 12. LIST PAGES — ICON BADGE, BREADCRUMB, STATS STRIP, PILLS, TABLE ══════ */

/* Page header icon badge */
.ic-page-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(3, 105, 161, 0.1);
  color: var(--ic-cta);
  font-size: 1.45rem;
}

/* Breadcrumb (page header, right side) */
.content-wrapper .breadcrumb { margin: 0; font-size: 0.8rem; }
.content-wrapper .breadcrumb-item a { color: var(--ic-subtle); text-decoration: none; }
.content-wrapper .breadcrumb-item a:hover { color: var(--ic-cta); }
.content-wrapper .breadcrumb-item.active { color: var(--ic-text); font-weight: 500; }

/* Stats strip — row of key counts above a list table */
.ic-stat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
@media (min-width: 1200px) {
  .ic-stats-strip > [class*="col"] + [class*="col"] .ic-stat {
    border-left: 1px solid var(--ic-border);
    padding-left: 1.5rem;
  }
}
.ic-stat-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.ic-stat-icon--primary { background: rgba(3, 105, 161, 0.12);  color: var(--ic-cta); }
.ic-stat-icon--success { background: rgba(21, 128, 61, 0.12);  color: var(--ic-success); }
.ic-stat-icon--warning { background: rgba(180, 83, 9, 0.12);   color: var(--ic-warning); }
.ic-stat-icon--purple  { background: rgba(109, 40, 217, 0.12); color: #6D28D9; }
.ic-stat-icon--secondary { background: var(--ic-bg); color: var(--ic-subtle); }
.ic-stat-icon--danger  { background: rgba(220, 38, 38, 0.12);  color: var(--ic-error); }

.ic-stat-label { font-size: 0.75rem; color: var(--ic-subtle); line-height: 1.3; }
.ic-stat-value {
  font-family: var(--ic-font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ic-text);
  line-height: 1.25;
}
.ic-stat-sub { font-size: 0.72rem; color: var(--ic-subtle); line-height: 1.3; }
.ic-stat-pct--success { color: var(--ic-success); font-weight: 600; }
.ic-stat-pct--warning { color: var(--ic-warning); font-weight: 600; }
.ic-stat-pct--purple  { color: #6D28D9; font-weight: 600; }

/* Status pills — dot + label */
.ic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 50rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.ic-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ic-pill--success   { background: #F0FDF4; color: var(--ic-success); }
.ic-pill--warning   { background: #FFFBEB; color: var(--ic-warning); }
.ic-pill--danger    { background: #FEF2F2; color: var(--ic-error); }
.ic-pill--secondary { background: var(--ic-bg); color: var(--ic-subtle); }
.ic-pill--primary   { background: #EFF6FF; color: var(--ic-cta); }
.ic-pill--info      { background: #ECFEFF; color: #0E7490; }

/* DataTables footer — "Showing X to Y of Z" + per-page select + pager */
.content-wrapper .ic-dt-footer { border-top: 1px solid var(--ic-border); }
.content-wrapper .dataTables_info {
  padding: 0 !important;
  font-size: 0.8rem;
  color: var(--ic-subtle);
}
.content-wrapper .dataTables_length label { margin: 0; }
.content-wrapper .dataTables_length .form-select,
.content-wrapper .dataTables_length select {
  min-height: 36px;
  font-size: 0.85rem;
  width: auto;
  padding-right: 2rem;
}
.content-wrapper .dataTables_paginate .pagination { margin: 0; }
.content-wrapper .dataTables_paginate .page-link { font-size: 0.82rem; }

/* =============================================================
   Sidebar theme — deep ICPC blue (matches reference dashboard)
   ============================================================= */
:root {
  --ic-sidebar-bg:        #06477B;
  --ic-sidebar-active:    #1145B7;
  --ic-sidebar-text:      rgba(255, 255, 255, 0.85);
  --ic-sidebar-text-dim:  rgba(255, 255, 255, 0.55);
  --ic-sidebar-hover:     rgba(255, 255, 255, 0.08);
}

#layout-menu.bg-menu-theme {
  background-color: var(--ic-sidebar-bg) !important;
  color: var(--ic-sidebar-text);
}

#layout-menu.bg-menu-theme .menu-divider {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#layout-menu.bg-menu-theme .app-brand-text {
  color: #fff !important;
}

#layout-menu.bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(var(--ic-sidebar-bg) 41%, rgba(6, 71, 123, 0.11) 95%, rgba(6, 71, 123, 0)) !important;
}

/* Section headers — bright, bold, uppercase */
#layout-menu.bg-menu-theme .menu-inner > .menu-header {
  color: rgba(255, 255, 255, 0.92);
}
#layout-menu.bg-menu-theme .menu-inner > .menu-header .menu-header-text {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  letter-spacing: 0.06em;
}
#layout-menu.bg-menu-theme .menu-inner > .menu-header::before {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Links + icons */
#layout-menu.bg-menu-theme .menu-link,
#layout-menu.bg-menu-theme .menu-horizontal-prev,
#layout-menu.bg-menu-theme .menu-horizontal-next {
  color: var(--ic-sidebar-text) !important;
}
#layout-menu.bg-menu-theme .menu-link .menu-icon,
#layout-menu.bg-menu-theme .menu-item > .menu-link i {
  color: var(--ic-sidebar-text) !important;
}

/* Hover / focus */
#layout-menu.bg-menu-theme .menu-item .menu-link:hover,
#layout-menu.bg-menu-theme .menu-item .menu-link:focus,
#layout-menu.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle {
  background-color: var(--ic-sidebar-hover) !important;
  color: #fff !important;
}
#layout-menu.bg-menu-theme .menu-item .menu-link:hover i,
#layout-menu.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle i {
  color: #fff !important;
}

/* Active item — solid bright blue pill */
#layout-menu.bg-menu-theme .menu-item.active > .menu-link {
  background: var(--ic-sidebar-active) !important;
  box-shadow: none !important;
  color: #fff !important;
}
#layout-menu.bg-menu-theme .menu-item.active > .menu-link i {
  color: #fff !important;
}

/* Submenu */
#layout-menu.bg-menu-theme .menu-sub .menu-link {
  color: var(--ic-sidebar-text) !important;
  background: transparent !important;
}
#layout-menu.bg-menu-theme .menu-sub .menu-link::before {
  color: var(--ic-sidebar-text-dim) !important;
}
#layout-menu.bg-menu-theme .menu-sub .menu-item.active > .menu-link {
  background: var(--ic-sidebar-active) !important;
  color: #fff !important;
}
#layout-menu.bg-menu-theme .menu-sub .menu-item.active > .menu-link::before {
  color: #fff !important;
}

/* Collapse / toggle chrome */
#layout-menu.bg-menu-theme .layout-menu-toggle {
  color: #fff !important;
}
#layout-menu.bg-menu-theme .menu-toggle::after {
  color: var(--ic-sidebar-text) !important;
}

/* Scrollbar */
#layout-menu.bg-menu-theme .ps__thumb-y {
  background-color: rgba(255, 255, 255, 0.35) !important;
}