/* ==========================================================================
   msare brand layer
   Re-skins the Vuexy admin from its stock purple (#7367f0) to the msare
   azure/cyan identity taken from the logo:
     deep azure  #0078B4  (primary)
     bright cyan #00AEF0  (accent)
   Loaded last so it overrides the compiled template CSS. Colors reasoned in
   OKLCH, emitted as hex for broad browser support.
   ========================================================================== */

:root {
  --ms-azure-700: #015C8C;   /* pressed / deep            oklch(.45 .10 240) */
  --ms-azure-600: #0078B4;   /* primary                   oklch(.56 .12 241) */
  --ms-azure-500: #0090D4;   /* hover                     oklch(.63 .13 237) */
  --ms-cyan-400:  #00AEF0;   /* bright accent             oklch(.72 .14 232) */
  --ms-cyan-300:  #4CC6F5;   /* light accent              oklch(.80 .10 230) */

  --ms-ink:       #0b2230;   /* near-black, tinted toward brand, never #000 */
  --ms-focus:     rgba(0, 120, 180, .25);
}

/* ==========================================================================
   1. Primary accent — buttons, links, badges, text
   ========================================================================== */

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--ms-azure-600) !important;
  border-color: var(--ms-azure-600) !important;
  box-shadow: 0 4px 12px -2px rgba(0, 120, 180, .45) !important;
}
.btn-primary:hover {
  background-color: var(--ms-azure-500) !important;
  border-color: var(--ms-azure-500) !important;
}
.btn-primary:active,
.btn-primary.active {
  background-color: var(--ms-azure-700) !important;
  border-color: var(--ms-azure-700) !important;
}

.btn-outline-primary {
  color: var(--ms-azure-600) !important;
  border-color: var(--ms-azure-600) !important;
}
.btn-outline-primary:hover,
.btn-flat-primary:hover,
.btn-flat-primary:active {
  background-color: var(--ms-azure-600) !important;
  color: #fff !important;
}
.btn-flat-primary,
.btn-relief-primary {
  color: var(--ms-azure-600) !important;
}
.btn-relief-primary {
  background-color: var(--ms-azure-600) !important;
  color: #fff !important;
}

.bg-primary,
.bg-gradient-primary,
.badge-primary {
  background-color: var(--ms-azure-600) !important;
}
.bg-gradient-primary {
  background-image: linear-gradient(47deg, var(--ms-azure-600), var(--ms-cyan-400)) !important;
}
.badge-light-primary {
  background-color: rgba(0, 120, 180, .12) !important;
  color: var(--ms-azure-600) !important;
}

.text-primary { color: var(--ms-azure-600) !important; }
a { color: var(--ms-azure-600); }
a:hover { color: var(--ms-azure-500); }

/* table action icons reuse text-primary/text-success/text-danger — keep those
   semantic, but make the generic primary links brand-blue */
.action-edit a, .action-edit { color: var(--ms-azure-600) !important; }

/* ==========================================================================
   2. Forms — focus rings, switches, checkboxes, radios, select2
   ========================================================================== */

.form-control:focus,
.custom-select:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  border-color: var(--ms-cyan-400) !important;
  box-shadow: 0 0 0 3px var(--ms-focus) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ms-azure-600) !important;
  border-color: var(--ms-azure-600) !important;
  box-shadow: none !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--ms-focus) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--ms-azure-600) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(0, 120, 180, .12) !important;
  border-color: rgba(0, 120, 180, .25) !important;
  color: var(--ms-azure-700) !important;
}

/* ==========================================================================
   3. Pagination, tabs, progress, spinners
   ========================================================================== */

.page-item.active .page-link {
  background-color: var(--ms-azure-600) !important;
  border-color: var(--ms-azure-600) !important;
  box-shadow: 0 4px 10px -3px rgba(0, 120, 180, .5);
}
.page-link { color: var(--ms-azure-600); }
.page-link:hover { color: var(--ms-azure-500); }

.nav-tabs .nav-link.active { color: var(--ms-azure-600) !important; }
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link:hover::after {
  background: linear-gradient(30deg, var(--ms-azure-600), var(--ms-cyan-400)) !important;
}
.nav-pills .nav-link.active {
  background-color: var(--ms-azure-600) !important;
  box-shadow: 0 4px 12px -3px rgba(0, 120, 180, .5) !important;
}

.progress-bar { background-color: var(--ms-azure-600); }

.spinner-border, .text-primary .feather, .feather.icon-refresh-cw.text-primary {
  color: var(--ms-azure-600);
}
.table_loader { color: var(--ms-azure-600) !important; font-weight: 700; }

/* ==========================================================================
   4. Sidebar — flat white
   ========================================================================== */

.main-menu.menu-light {
  background: #fff !important;
  box-shadow: none !important;
  border-right: 1px solid rgba(11, 34, 48, .08);
}
.main-menu.menu-light .navigation {
  background: transparent !important;
}

/* logo card — same plain white card, now flush with the sidebar itself */
.main-menu .navbar-header {
  background: transparent !important;
  padding: 1rem .9rem .5rem !important;
}
.main-menu .navbar-header .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: .65rem .9rem;
  background: #fff;
  border-radius: 8px;
}
.main-menu .navbar-header .brand-logo,
.main-menu .navbar-header .img-logo {
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
}

/* no decorative fade under the logo */
.main-menu .shadow-bottom { background: transparent !important; box-shadow: none !important; }

/* menu items — flat, evenly spaced */
.menu-light .navigation > li > a,
.menu-light .navigation li a {
  color: var(--ms-ink) !important;
  opacity: .72;
  border-radius: 6px;
}
.menu-light .navigation li a i,
.menu-light .navigation li a .menu-title { color: inherit !important; }

.menu-light .navigation > li > a:hover,
.menu-light .navigation li a:hover {
  background: rgba(11, 34, 48, .05) !important;
  color: var(--ms-ink) !important;
  opacity: 1;
}

/* section headers */
.menu-light .navigation > li.navigation-header,
.menu-light .navigation > li.navigation-header span {
  color: rgba(11, 34, 48, .45) !important;
  font-weight: 700;
  letter-spacing: .04em;
}

/* active item — single flat highlight, no gradient, no glow */
.menu-light .navigation li.active > a {
  background: rgba(0, 120, 180, .1) !important;
  box-shadow: none !important;
  color: var(--ms-azure-600) !important;
  opacity: 1;
  font-weight: 700;
}
.menu-light .navigation li.active > a i { color: var(--ms-azure-600) !important; }

/* open groups and submenus stay flat (no nested shading), but the group
   header still picks up the primary color while it contains the active
   page — same accent as the active leaf below it */
.menu-light .navigation li.has-sub.open:not(.menu-item-closing) > a,
.menu-light .navigation li.sidebar-group-active > a {
  background: transparent !important;
  color: var(--ms-azure-600) !important;
  opacity: 1;
}
.menu-light .navigation .menu-content,
.menu-light .navigation li.open > ul {
  background: transparent !important;
}

/* submenu items */
.menu-light .navigation li ul li a { color: var(--ms-ink) !important; opacity: .68; }
.menu-light .navigation li ul li a:hover { opacity: 1; }

/* stock Vuexy theme paints the active submenu <li> itself with a purple
   gradient + glow (components.css `.navigation > li ul .active`) — this
   selector has to match its class count (4) to win, since it loads after
   but isn't otherwise more specific. Flatten it to the same azure tint
   used for the top-level active item instead. */
.main-menu.menu-light .navigation li ul li.active {
  background: rgba(0, 120, 180, .08) !important;
  box-shadow: none !important;
  border-radius: 4px;
}
.menu-light .navigation li ul li.active a { color: var(--ms-azure-600) !important; opacity: 1; font-weight: 600; }
.menu-light .navigation li ul .has-sub li > a::before,
.menu-light .navigation li > ul li > a::before {
  background-color: rgba(11, 34, 48, .35) !important;
}

/* collapsed sidebar: keep the logo card compact */
.menu-collapsed .main-menu:not(:hover) .navbar-header .navbar-brand {
  padding: .45rem;
}

/* ==========================================================================
   5. Top navbar / header
   ========================================================================== */

.header-navbar.floating-nav {
  background: #fff !important;
  border: 1px solid rgba(11, 34, 48, .06);
  box-shadow: 0 6px 20px -12px rgba(11, 34, 48, .25) !important;
  border-radius: 12px;
}

/* nav icons: muted by default, brand on hover */
.header-navbar .nav-link .ficon {
  color: #5b6b77;
  transition: color .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
.header-navbar .nav-item > .nav-link:hover .ficon { color: var(--ms-azure-600); transform: translateY(-1px); }

/* breadcrumb */
.header-navbar .breadcrumb-text a .user-name { color: #5b6b77; transition: color .2s; }
.header-navbar .breadcrumb-text a:hover .user-name,
.header-navbar .breadcrumb-text a:first-child .user-name { color: var(--ms-azure-600); }
.header-navbar .breadcrumb-text .hint-slash { color: #c2ccd4; }

/* user block */
.header-navbar .dropdown-user-link .user-status { color: var(--ms-azure-600) !important; font-weight: 600; }
.header-navbar .dropdown-user .dropdown-item:hover { color: var(--ms-azure-600); }

/* initials avatar (fallback when no photo) */
.ms-avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ms-azure-600), var(--ms-cyan-400));
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px -4px rgba(0, 120, 180, .6);
}

/* notification badge stays semantic red, just refined */
.header-navbar .badge-up { box-shadow: 0 0 0 2px #fff; }

/* ==========================================================================
   6. Misc brand touches
   ========================================================================== */

/* sweetalert / toastr primary confirm buttons */
.swal2-confirm.btn-primary,
.swal2-styled.swal2-confirm {
  background-color: var(--ms-azure-600) !important;
}

/* scrollbar accent inside the menu */
.main-menu .ps__thumb-y { background-color: rgba(255, 255, 255, .35) !important; }

/* ==========================================================================
   7. Login page
   ========================================================================== */

.ms-login-brand {
  background: linear-gradient(160deg, rgba(0, 174, 240, .08) 0%, rgba(0, 120, 180, .14) 100%);
  border-radius: 12px;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
.ms-login-logo { max-width: 320px; margin: 0 auto; }

/* Vuexy "vs-checkbox" component used on the login remember box */
.vs-checkbox-primary input:checked + .vs-checkbox {
  border-color: var(--ms-azure-600) !important;
  background: var(--ms-azure-600) !important;
}
.vs-checkbox-primary input:checked + .vs-checkbox .vs-checkbox--check {
  background: var(--ms-azure-600) !important;
}

.submit_button, .login-btn { letter-spacing: .02em; }

/* ==========================================================================
   8. List pages — page header, toolbar, filters, data table
   Scoped to the shared list markup so it only affects index/list screens.
   ========================================================================== */

/* ---- reusable slim page header ------------------------------------------- */
.ms-list-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: .25rem 0 1.4rem;
}
.ms-list-head-ic {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--ms-azure-600), var(--ms-cyan-400));
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(0, 120, 180, .6);
}
.ms-list-head-ic i { font-size: 1.35rem; }
.ms-list-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ms-ink, #0b2230);
  line-height: 1.2;
}
.ms-list-head p { margin: .2rem 0 0; color: #7b8a98; font-weight: 600; font-size: .85rem; }

/* ---- toolbar -------------------------------------------------------------- */
.table_buttons .btn { border-radius: 9px; font-weight: 700; }
.table_buttons .ms-total-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 120, 180, .09) !important;
  color: var(--ms-azure-700, #015C8C) !important;
  border: 1px solid rgba(0, 120, 180, .18);
  border-radius: 9px;
  font-weight: 700;
}
.table_buttons .ms-total-pill b {
  background: var(--ms-azure-600);
  color: #fff;
  padding: .05rem .5rem;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* ---- filter inputs -------------------------------------------------------- */
.row .controls.border {
  border: 1px solid rgba(11, 34, 48, .12) !important;
  border-radius: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.row .controls.border:focus-within {
  border-color: var(--ms-cyan-400) !important;
  box-shadow: 0 0 0 3px var(--ms-focus);
}
.row .controls.border .form-control,
.row .controls.border .search-input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}
.row .controls.border .clean-input {
  padding: 0 .7rem;
  color: #b3bdc6;
  cursor: pointer;
  transition: color .2s;
}
.row .controls.border .clean-input:hover { color: #ea5455; }
.content-body label[for="first-name-column"] {
  font-weight: 700;
  font-size: .8rem;
  color: #6a7884;
  margin-bottom: .35rem;
}

/* ---- data table ----------------------------------------------------------- */
.table_content_append { position: relative; }
.table_content_append .table {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 34, 48, .04);
  border: 1px solid rgba(11, 34, 48, .07);
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}
.table_content_append .table thead th {
  background: rgba(0, 120, 180, .05);
  color: #51616d;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .01em;
  border: 0;
  border-bottom: 1px solid rgba(11, 34, 48, .08);
  padding: .95rem 1rem;
  white-space: nowrap;
  vertical-align: middle;
}
.table_content_append .table tbody td {
  border: 0;
  border-bottom: 1px solid rgba(11, 34, 48, .055);
  padding: .85rem 1rem;
  vertical-align: middle;
  color: #3f4d59;
}
.table_content_append .table tbody tr { transition: background .18s; }
.table_content_append .table tbody tr:hover { background: rgba(0, 120, 180, .035); }
.table_content_append .table tbody tr:last-child td { border-bottom: 0; }

/* ban-status pills */
.table_content_append .block_user {
  border-radius: 999px;
  font-weight: 700;
  font-size: .76rem;
  padding: .3rem .8rem;
}

/* row action icons */
.product-action, .job-action { white-space: nowrap; }
.product-action > span, .job-action > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  margin: 0 .1rem;
  transition: background .18s, transform .18s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
}
.product-action > span:hover, .job-action > span:hover { transform: translateY(-1px); }
.product-action .action-edit:hover, .job-action .action-edit:hover { background: rgba(0, 120, 180, .12); }
.product-action .delete-row:hover, .job-action .delete-row:hover { background: rgba(234, 84, 85, .12); }
.product-action .notify:hover { background: rgba(0, 174, 240, .12); }
.product-action a, .job-action a { color: inherit; }

/* loader + empty state */
.table_content_append .table_loader {
  color: var(--ms-azure-600) !important;
  font-weight: 700;
}
.table_content_append img[src*="404"] { max-width: 220px; opacity: .9; }

/* ==========================================================================
   9. Purple sweep — catch every remaining Vuexy #7367F0 surface
   The template bakes purple into many `*-primary` utility and component
   classes; remap them all to the msare azure/cyan so no purple ever renders.
   ========================================================================== */

/* text selection highlight */
::selection      { background: rgba(0, 120, 180, .22); }
::-moz-selection { background: rgba(0, 120, 180, .22); }

/* text + icon + border + bullet utilities */
.text-primary, .text-primary i, .font-icon.text-primary { color: var(--ms-azure-600) !important; }
.border-primary { border-color: var(--ms-azure-600) !important; }
.bullet.bullet-primary, .bullet-primary { background-color: var(--ms-azure-600) !important; }
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after { border-color: rgba(0, 120, 180, .35) !important; }

/* soft / translucent primary backgrounds and chips */
.bg-rgba-primary,
.bg-light-primary,
.avatar.bg-rgba-primary,
.avatar.bg-light-primary { background: rgba(0, 120, 180, .12) !important; color: var(--ms-azure-700) !important; }
.avatar.bg-primary { background: var(--ms-azure-600) !important; }
.alert-primary {
  background-color: rgba(0, 120, 180, .12) !important;
  color: var(--ms-azure-700) !important;
  border-color: rgba(0, 120, 180, .2) !important;
}

/* gradient button glow (was a purple halo) */
.btn.bg-gradient-primary,
.bg-gradient-primary.btn { box-shadow: 0 6px 16px -6px rgba(0, 120, 180, .55) !important; }

/* active / selected component states that used the purple gradient + glow */
.list-group-item.active,
.dropdown-item.active, .dropdown-item:active,
.swiper-pagination-bullet-active,
.ps__thumb-y:hover, .ps__thumb-x:hover {
  background-color: var(--ms-azure-600) !important;
  border-color: var(--ms-azure-600) !important;
}

/* switches (Vuexy custom-switch + switchery) */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.switchery-checked, .switchery--checked { background-color: var(--ms-azure-600) !important; border-color: var(--ms-azure-600) !important; }

/* progress + range */
.progress-bar { background-color: var(--ms-azure-600) !important; }
input[type="range"]::-webkit-slider-thumb { background: var(--ms-azure-600) !important; }
.noUi-connect { background: var(--ms-azure-600) !important; }

/* spinners / loaders that inherit primary */
.spinner-border.text-primary, .text-primary .spinner-border { color: var(--ms-azure-600) !important; }

/* Vuexy gives EVERY .bg-gradient-* a `background:#640064` (purple) base, which
   bleeds through the semi-transparent gradients. Replace each base with the
   button's own hue so no purple shows on info/warning/danger/success buttons. */
.bg-gradient-primary   { background-color: var(--ms-azure-600) !important; }
.bg-gradient-info      { background-color: #00B6D4 !important; }
.bg-gradient-success   { background-color: #28C76F !important; }
.bg-gradient-warning   { background-color: #FF9F43 !important; }
.bg-gradient-danger    { background-color: #EA5455 !important; }
.bg-gradient-secondary { background-color: #82868B !important; }
.bg-gradient-dark      { background-color: #4B4B4B !important; }

/* ==========================================================================
   10. Empty state
   ========================================================================== */

.ms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1rem 3rem;
}
.ms-empty-art {
  width: 200px;
  max-width: 60%;
  margin-bottom: 1.1rem;
  animation: ms-empty-float 5.5s ease-in-out infinite;
}
.ms-empty-art svg { width: 100%; height: auto; display: block; }
.ms-empty-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ms-ink, #0b2230);
}
.ms-empty-text {
  margin: .45rem 0 0;
  max-width: 38ch;
  color: #8593a0;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.6;
}
@keyframes ms-empty-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-empty-art { animation: none; }
}

/* ==========================================================================
   11. Dark mode  (Vuexy toggles `.dark-layout` on <body id="content_body">)
   Flip only the custom surfaces + text; the azure/cyan accents carry over.
   ========================================================================== */

.dark-layout {
  --ms-surface:   #10163A;   /* card / panel              */
  --ms-surface-2: #1A2050;   /* elevated / header / hover */
  --ms-d-text:    #d0d2d6;   /* headings                  */
  --ms-d-muted:   #8a93a8;   /* secondary text            */
  --ms-d-border:  rgba(255, 255, 255, .09);
}

/* surfaces */
.dark-layout .ms-kpi,
.dark-layout .ms-quick,
.dark-layout .ms-chart-card,
.dark-layout .table_content_append .table,
.dark-layout .header-navbar.floating-nav {
  background: var(--ms-surface) !important;
  border-color: var(--ms-d-border) !important;
}
.dark-layout .ms-kpi:hover { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }

/* headings / strong text */
.dark-layout .ms-greet,
.dark-layout .ms-list-head h2,
.dark-layout .ms-kpi-num,
.dark-layout .ms-empty-title,
.dark-layout .ms-chart-head h4,
.dark-layout .header-navbar .dropdown-user-link .user-name { color: var(--ms-d-text) !important; }

/* muted text */
.dark-layout .ms-sub,
.dark-layout .ms-list-head p,
.dark-layout .ms-kpi-label,
.dark-layout .ms-quick,
.dark-layout .ms-empty-text,
.dark-layout .ms-legend,
.dark-layout .table_content_append .table tbody td { color: var(--ms-d-muted) !important; }
.dark-layout .ms-eyebrow { color: #6f7c8a !important; }

/* icon chips + count badges */
.dark-layout .ms-kpi-ic,
.dark-layout .ms-quick > i {
  background: rgba(0, 174, 240, .15) !important;
  color: var(--ms-cyan-300) !important;
}
.dark-layout .ms-quick-count { background: rgba(255, 255, 255, .08) !important; color: #b4b7bd !important; }
.dark-layout .ms-quick:hover {
  background: var(--ms-surface-2) !important;
  border-color: rgba(0, 174, 240, .4) !important;
  color: var(--ms-cyan-300) !important;
}
.dark-layout .ms-quick:hover .ms-quick-count { background: var(--ms-azure-600) !important; color: #fff !important; }

/* data table */
.dark-layout .table_content_append .table thead th {
  background: var(--ms-surface-2) !important;
  color: #9aa7b2 !important;
  border-bottom-color: var(--ms-d-border) !important;
}
.dark-layout .table_content_append .table tbody td { border-bottom-color: var(--ms-d-border) !important; }
.dark-layout .table_content_append .table tbody tr:hover { background: rgba(0, 174, 240, .06) !important; }

/* toolbar total pill */
.dark-layout .table_buttons .ms-total-pill {
  background: rgba(0, 174, 240, .12) !important;
  color: var(--ms-cyan-300) !important;
  border-color: rgba(0, 174, 240, .25) !important;
}

/* filter inputs */
.dark-layout .row .controls.border {
  background: var(--ms-surface) !important;
  border-color: var(--ms-d-border) !important;
}
.dark-layout .row .controls.border .form-control,
.dark-layout .row .controls.border .search-input { color: var(--ms-d-text) !important; }
.dark-layout .content-body label[for="first-name-column"] { color: #9aa7b2 !important; }

/* navbar */
.dark-layout .header-navbar .nav-link .ficon,
.dark-layout .header-navbar .breadcrumb-text a .user-name { color: #b4b7bd; }
.dark-layout .header-navbar .breadcrumb-text a:first-child .user-name { color: var(--ms-cyan-300); }

/* badges / soft chips read better lighter on dark */
.dark-layout .badge-light-primary {
  background-color: rgba(0, 174, 240, .16) !important;
  color: var(--ms-cyan-300) !important;
}

/* the sidebar stays azure in both modes (its !important rules already win);
   keep its active/hover legible against the dark page */
.dark-layout .main-menu.menu-light { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }