/* ============================================================
   CoreCloud WHMCS Theme — css/theme.css
   Matches corecld.com: dark-first, Inter font, CoreCloud brand
   Hex values taken directly from tailwind.config.ts
   ============================================================ */

/* ── CSS variables (design tokens from tailwind.config.ts) ──── */
:root {
  /* Primary blue palette */
  --cc-blue-50:  #eff6ff;
  --cc-blue-100: #dbeafe;
  --cc-blue-200: #bfdbfe;
  --cc-blue-300: #93c5fd;
  --cc-blue-400: #60a5fa;
  --cc-blue-500: #3b82f6;
  --cc-blue-600: #2563eb;
  --cc-blue-700: #1d4ed8;
  --cc-blue-800: #1e40af;
  --cc-blue-900: #1e3a8a;
  --cc-blue-950: #172554;

  /* Accent green palette */
  --cc-green-300: #86efac;
  --cc-green-400: #4ade80;
  --cc-green-500: #22c55e;
  --cc-green-600: #16a34a;
  --cc-green-700: #15803d;

  /* Slate/dark palette (dark mode backgrounds) */
  --cc-slate-50:  #f8fafc;
  --cc-slate-100: #f1f5f9;
  --cc-slate-200: #e2e8f0;
  --cc-slate-300: #cbd5e1;
  --cc-slate-400: #94a3b8;
  --cc-slate-500: #64748b;
  --cc-slate-600: #475569;
  --cc-slate-700: #334155;
  --cc-slate-800: #1e293b;
  --cc-slate-900: #0f172a;
  --cc-slate-950: #020617;

  /* Semantic aliases */
  --cc-bg:        #0f172a;
  --cc-bg-alt:    rgba(15, 23, 42, 0.4);
  --cc-bg-card:   #1e293b;
  --cc-bg-card-60:rgba(30, 41, 59, 0.6);
  --cc-bg-nav:    rgba(15, 23, 42, 0.9);
  --cc-text:      #f8fafc;
  --cc-text-body: #cbd5e1;
  --cc-text-muted:#94a3b8;
  --cc-border:    #334155;

  /* Font */
  --cc-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Border-radius (from tailwind.config.ts) */
  --cc-radius-card:   12px;  /* rounded-xl */
  --cc-radius-btn:    8px;   /* rounded-lg */
  --cc-radius-full:   9999px;

  /* Shadows (from tailwind.config.ts boxShadow) */
  --cc-shadow-card:     0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --cc-shadow-card-hover:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --cc-shadow-lg:       0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);
  --cc-shadow-xl:       0 20px 25px -5px rgb(0 0 0 / .4), 0 8px 10px -6px rgb(0 0 0 / .3);

  /* Transition */
  --cc-transition: 0.15s ease;
}

/* ── Base ────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--cc-font) !important;
  background-color: var(--cc-bg) !important;
  color: var(--cc-text) !important;
  border-top: none !important;
  text-align: left !important;
  line-height: 1.6;
  padding-top: 64px;
  display: block !important;
}

*, *::before, *::after { box-sizing: border-box; }

a {
  color: var(--cc-blue-400);
  transition: color var(--cc-transition);
}
a:hover { color: var(--cc-blue-300); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cc-font) !important;
  color: var(--cc-text) !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

p, li, td, th, label, span, div {
  font-family: var(--cc-font) !important;
}

small, .small { font-size: 0.8125rem; color: var(--cc-text-muted); }
.text-muted { color: var(--cc-text-muted) !important; }
.text-primary { color: var(--cc-blue-400) !important; }
.text-success { color: var(--cc-green-400) !important; }
.text-danger  { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: #67e8f9 !important; }
.bg-light     { background-color: rgba(30,41,59,.5) !important; }
.bg-white     { background-color: var(--cc-bg-card) !important; }
.bg-primary   { background-color: var(--cc-blue-600) !important; }
.bg-success   { background-color: var(--cc-green-500) !important; }
.border       { border-color: var(--cc-border) !important; }
.border-top   { border-top-color: var(--cc-border) !important; }
.border-bottom{ border-bottom-color: var(--cc-border) !important; }
hr            { border-color: var(--cc-border) !important; opacity: .6; }
code, pre     { background-color: rgba(15,23,42,.8) !important; color: var(--cc-blue-300) !important; border-radius: 4px !important; }
pre           { border: 1px solid var(--cc-border) !important; padding: 1rem !important; }

::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: var(--cc-slate-900); }
::-webkit-scrollbar-thumb   { background: var(--cc-slate-700); border-radius: var(--cc-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--cc-slate-600); }
::selection { background-color: #1e40af; color: #fff; }

/* ── ===== HEADER / NAVBAR ===== ─────────────────────────────── */

#cc-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  height: 64px;
  background-color: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  transition: all 0.2s ease;
}
#cc-header.cc-scrolled {
  background-color: rgba(15, 23, 42, 0.97);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .4);
  border-bottom-color: rgba(51, 65, 85, 0.6);
}

.cc-nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width:640px) { .cc-nav { padding: 0 1.5rem; } }
@media (min-width:1024px){ .cc-nav { padding: 0 2rem;   } }

.cc-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none !important;
  margin-right: 0.5rem;
}
.cc-logo img { height: 32px; width: auto; }

/* Desktop nav links */
.cc-navlinks {
  display: none;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
  gap: 0.125rem;
}
@media (min-width:768px) { .cc-navlinks { display: flex; } }

.cc-navlink {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cc-slate-300) !important;
  border-radius: var(--cc-radius-btn);
  text-decoration: none !important;
  transition: all var(--cc-transition);
  white-space: nowrap;
}
.cc-navlink:hover { color: var(--cc-text) !important; background-color: rgba(255,255,255,.05); }
.cc-navlink.active { color: var(--cc-blue-400) !important; background-color: rgba(37,99,235,.1); }

/* Right actions */
.cc-nav-right {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
@media (min-width:768px) { .cc-nav-right { display: flex; } }

/* Cart button */
.cc-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cc-slate-300) !important;
  background: none;
  border: none;
  border-radius: var(--cc-radius-btn);
  text-decoration: none !important;
  transition: all var(--cc-transition);
  cursor: pointer;
}
.cc-cart-btn:hover { color: var(--cc-text) !important; background-color: rgba(255,255,255,.05); }

.cc-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background-color: var(--cc-blue-600);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--cc-radius-full);
  line-height: 1;
}

/* Primary CTA button */
.cc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600 !important;
  color: #fff !important;
  background-color: var(--cc-blue-600);
  border: 1px solid var(--cc-blue-600);
  border-radius: var(--cc-radius-btn);
  text-decoration: none !important;
  transition: all var(--cc-transition);
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .2);
}
.cc-btn-primary:hover { background-color: var(--cc-blue-700); border-color: var(--cc-blue-700); color: #fff !important; }

/* Outline / secondary button */
.cc-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cc-slate-300) !important;
  background: transparent;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-btn);
  text-decoration: none !important;
  transition: all var(--cc-transition);
  cursor: pointer;
}
.cc-btn-outline:hover { color: var(--cc-text) !important; background-color: rgba(255,255,255,.05); border-color: var(--cc-slate-600); }

/* User dropdown */
.cc-user-wrap { position: relative; }

.cc-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cc-slate-300) !important;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-btn);
  cursor: pointer;
  transition: all var(--cc-transition);
}
.cc-user-btn:hover, .cc-user-btn[aria-expanded="true"] {
  color: var(--cc-text) !important;
  background-color: rgba(255,255,255,.05);
  border-color: var(--cc-border);
}

.cc-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background-color: var(--cc-blue-600);
  border-radius: var(--cc-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cc-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background-color: var(--cc-bg-card);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-card);
  box-shadow: var(--cc-shadow-xl);
  padding: 0.375rem 0;
  z-index: 9999;
}

.cc-dropdown-hdr {
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cc-text-muted);
}
.cc-dropdown-div { border-top: 1px solid var(--cc-border); margin: 0.25rem 0; }

.cc-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 1rem;
  font-size: 0.875rem;
  color: var(--cc-text-body) !important;
  text-decoration: none !important;
  transition: background-color var(--cc-transition);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.cc-dropdown-item:hover { background-color: rgba(37,99,235,.08); color: var(--cc-text) !important; }
.cc-dropdown-item i { width: 16px; text-align: center; color: var(--cc-text-muted); font-size: 0.8125rem; }

/* Mobile toggle */
.cc-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: none;
  border: none;
  border-radius: var(--cc-radius-btn);
  color: var(--cc-slate-400);
  cursor: pointer;
  transition: all var(--cc-transition);
  margin-left: auto;
}
.cc-hamburger:hover { background-color: rgba(255,255,255,.05); color: var(--cc-text); }
@media (min-width:768px) { .cc-hamburger { display: none; } }

/* Mobile menu */
.cc-mobile-menu {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background-color: var(--cc-bg);
  z-index: 9998;
  overflow-y: auto;
  padding: 1rem 1rem 2rem;
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.cc-mobile-menu.is-open { display: block; }

.cc-mobile-link {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--cc-slate-200) !important;
  text-decoration: none !important;
  border-radius: 12px;
  transition: all var(--cc-transition);
  margin-bottom: 2px;
}
.cc-mobile-link:hover { color: var(--cc-text) !important; background-color: rgba(255,255,255,.05); }
.cc-mobile-divider { border-top: 1px solid var(--cc-border); margin: 1rem 0; }

/* Topbar (logged-in notifications) */
/* Topbar — merge seamlessly into page, no separate stripe visual.
   "Logged in as" is redundant (navbar already shows user avatar).
   Show only the notification bell, hidden on mobile to save space. */
/* Topbar hidden — clutters layout, notifications visible on home dashboard */
#cc-topbar, .topbar { display: none !important; }

/* ── ===== MAIN CONTENT AREA ===== ─────────────────────────── */

#main-body, section#main-body {
  min-height: calc(100vh - 320px);
  padding-top: 2rem;
  padding-bottom: 4rem;
  background-color: var(--cc-bg);
}

.master-breadcrumb {
  background-color: rgba(15, 23, 42, 0.5) !important;
  border-bottom: 1px solid rgba(51,65,85,.3);
}
.breadcrumb {
  background-color: transparent !important;
  padding: 0.75rem 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}
.breadcrumb-item a { color: var(--cc-blue-400) !important; font-size: 0.8125rem; }
.breadcrumb-item.active { color: var(--cc-text-muted) !important; font-size: 0.8125rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cc-slate-600) !important; }

/* ── ===== CARDS ===== ──────────────────────────────────────── */

.card {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-card) !important;
  color: var(--cc-text) !important;
}

.card-header {
  background-color: rgba(30,41,59,.8) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  padding: 1rem 1.25rem;
  border-radius: calc(var(--cc-radius-card) - 1px) calc(var(--cc-radius-card) - 1px) 0 0 !important;
}
.card-title { color: var(--cc-text) !important; font-size: 0.875rem !important; font-weight: 600 !important; margin: 0 !important; }
.card-body  { color: var(--cc-text-body) !important; padding: 1.25rem; }
.card-footer {
  background-color: rgba(15,23,42,.4) !important;
  border-top: 1px solid var(--cc-border) !important;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 calc(var(--cc-radius-card) - 1px) calc(var(--cc-radius-card) - 1px) !important;
  min-height: 0;
}
.card-footer:empty { display: none; }

/* Card accent colours — left border stripe */
.card-accent-blue         .card-header { border-left: 3px solid var(--cc-blue-600) !important; }
.card-accent-green        .card-header { border-left: 3px solid var(--cc-green-500) !important; }
.card-accent-teal         .card-header { border-left: 3px solid #06b6d4 !important; }
.card-accent-red          .card-header,
.card-accent-pomegranate  .card-header { border-left: 3px solid #ef4444 !important; }
.card-accent-gold         .card-header,
.card-accent-sun-flower   .card-header { border-left: 3px solid #f59e0b !important; }
.card-accent-midnight-blue .card-header { border-left: 3px solid var(--cc-blue-700) !important; }
.card-accent-asbestos     .card-header { border-left: 3px solid var(--cc-slate-500) !important; }

.card-sidebar {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
}
.card-minimise { cursor: pointer; transition: transform .2s; }

/* ── ===== LIST GROUP ===== ─────────────────────────────────── */

.list-group-item {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-text-body) !important;
  padding: 0.75rem 1.25rem;
  transition: background-color var(--cc-transition), color var(--cc-transition);
}
.list-group-item:last-child { border-bottom: none !important; }
.list-group-item:hover,
.list-group-item-action:hover { background-color: rgba(37,99,235,.07) !important; color: var(--cc-text) !important; }
.list-group-item.active,
.list-group-item.active:hover {
  background-color: rgba(37,99,235,.15) !important;
  border-color: transparent !important;
  color: var(--cc-blue-400) !important;
  font-weight: 600;
}
.list-group-flush .list-group-item { border-radius: 0; border-left: 0; border-right: 0; }

.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 0.625rem; width: 100%; }
.sidebar-menu-item-icon { color: var(--cc-text-muted); font-size: 0.875rem; }
.sidebar-menu-item-label { flex: 1; font-size: 0.875rem; }
.sidebar-menu-item-badge { margin-left: auto; }

/* ── ===== BUTTONS ===== ────────────────────────────────────── */

.btn {
  font-family: var(--cc-font) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-radius: var(--cc-radius-btn) !important;
  padding: 0.5rem 1.25rem !important;
  transition: all var(--cc-transition) !important;
  border-width: 1px !important;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-content: center;
}

.btn-primary, .btn-block.btn-primary {
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .2);
}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--cc-blue-700) !important;
  border-color: var(--cc-blue-700) !important;
  color: #fff !important;
}

.btn-default, .btn-secondary {
  background-color: transparent !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-body) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background-color: rgba(255,255,255,.05) !important;
  border-color: var(--cc-slate-600) !important;
  color: var(--cc-text) !important;
}

.btn-success {
  background-color: var(--cc-green-500) !important;
  border-color: var(--cc-green-500) !important;
  color: #fff !important;
}
.btn-success:hover { background-color: var(--cc-green-600) !important; border-color: var(--cc-green-600) !important; }

.btn-danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}
.btn-danger:hover { background-color: #dc2626 !important; border-color: #dc2626 !important; }

.btn-warning { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }
.btn-warning:hover { background-color: #d97706 !important; border-color: #d97706 !important; }

.btn-info { background-color: var(--cc-blue-600) !important; border-color: var(--cc-blue-600) !important; color: #fff !important; }
.btn-info:hover { background-color: var(--cc-blue-700) !important; border-color: var(--cc-blue-700) !important; }

.btn-link { color: var(--cc-blue-400) !important; font-weight: 500 !important; padding-left: 0 !important; padding-right: 0 !important; }
.btn-link:hover { color: var(--cc-blue-300) !important; text-decoration: none !important; }

.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--cc-blue-600) !important;
  color: var(--cc-blue-400) !important;
}
.btn-outline-primary:hover { background-color: var(--cc-blue-600) !important; color: #fff !important; }

.btn-xs { padding: 0.25rem 0.625rem !important; font-size: 0.75rem !important; }
.btn-sm { padding: 0.375rem 0.875rem !important; font-size: 0.8125rem !important; }
.btn-lg { padding: 0.75rem 1.75rem !important; font-size: 1rem !important; }
.btn-block { width: 100%; display: flex; }

/* ── ===== FORMS ===== ──────────────────────────────────────── */

.form-control {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-btn) !important;
  color: var(--cc-text) !important;
  font-family: var(--cc-font) !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color var(--cc-transition), box-shadow var(--cc-transition) !important;
}
.form-control:focus {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: var(--cc-blue-600) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2) !important;
  color: var(--cc-text) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--cc-slate-500) !important; }
.form-control:disabled, .form-control[readonly] {
  background-color: rgba(51,65,85,.3) !important;
  color: var(--cc-text-muted) !important;
  cursor: not-allowed;
}

.form-control-label, .col-form-label, label {
  color: var(--cc-text-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.375rem !important;
}
.form-group { margin-bottom: 1.25rem; }
.form-text { color: var(--cc-text-muted) !important; font-size: 0.8125rem !important; }

.input-group-text {
  background-color: rgba(51,65,85,.5) !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
  border-radius: var(--cc-radius-btn) 0 0 var(--cc-radius-btn) !important;
  font-size: 0.875rem !important;
}
.input-group-merge .input-group-prepend .input-group-text { border-right: 0 !important; }
.input-group-merge .input-group-append .input-group-text { border-left: 0 !important; border-radius: 0 var(--cc-radius-btn) var(--cc-radius-btn) 0 !important; }
.input-group-merge .input-group-prepend + .form-control { border-left: 0 !important; border-radius: 0 var(--cc-radius-btn) var(--cc-radius-btn) 0 !important; }
.input-group-merge .form-control.appended-form-control { border-right: 0 !important; border-radius: var(--cc-radius-btn) 0 0 var(--cc-radius-btn) !important; }

.custom-select {
  background-color: rgba(15,23,42,.8) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-btn) !important;
  color: var(--cc-text) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 2rem 0.5rem 0.875rem !important;
}
.custom-select:focus { border-color: var(--cc-blue-600) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.2) !important; }

.custom-control-label { color: var(--cc-text-body) !important; cursor: pointer; }
.custom-control-label::before { background-color: rgba(51,65,85,.5) !important; border-color: var(--cc-border) !important; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cc-blue-600) !important; border-color: var(--cc-blue-600) !important; }

.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--cc-green-500) !important; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #ef4444 !important; }
.invalid-feedback { color: #f87171 !important; font-size: 0.8125rem; }
.valid-feedback   { color: var(--cc-green-400) !important; font-size: 0.8125rem; }

/* ── ===== ALERTS ===== ─────────────────────────────────────── */

.alert {
  border-radius: var(--cc-radius-btn) !important;
  border: 0 !important;
  font-size: 0.875rem;
  padding: 0.875rem 1rem;
}
.alert-info    { background-color: rgba(37,99,235,.15) !important;   color: var(--cc-blue-300) !important;    border-left: 3px solid var(--cc-blue-600) !important; }
.alert-success { background-color: rgba(34,197,94,.15) !important;   color: #86efac !important;               border-left: 3px solid var(--cc-green-500) !important; }
.alert-warning { background-color: rgba(245,158,11,.15) !important;  color: #fde68a !important;               border-left: 3px solid #f59e0b !important; }
.alert-danger  { background-color: rgba(239,68,68,.15) !important;   color: #fca5a5 !important;               border-left: 3px solid #ef4444 !important; }
.alert-dismissible .close { color: inherit !important; opacity: .7; text-shadow: none !important; }

/* ── ===== BADGES ===== ─────────────────────────────────────── */

.badge {
  border-radius: var(--cc-radius-full) !important;
  font-family: var(--cc-font) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 0.25em 0.625em !important;
}
.badge-primary, .badge-info { background-color: var(--cc-blue-600) !important; color: #fff !important; }
.badge-success  { background-color: var(--cc-green-500) !important; color: #fff !important; }
.badge-warning  { background-color: #f59e0b !important; color: #fff !important; }
.badge-danger   { background-color: #ef4444 !important; color: #fff !important; }
.badge-secondary{ background-color: var(--cc-slate-700) !important; color: var(--cc-slate-300) !important; }
.badge-dark     { background-color: var(--cc-slate-800) !important; color: var(--cc-slate-300) !important; }

/* ── ===== TABLES ===== ─────────────────────────────────────── */

.table { color: var(--cc-text-body) !important; border-color: var(--cc-border) !important; }
.table th {
  color: var(--cc-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--cc-border) !important;
  background-color: rgba(30,41,59,.5) !important;
  padding: 0.875rem 1rem !important;
}
.table td { border-color: var(--cc-border) !important; padding: 0.875rem 1rem !important; vertical-align: middle !important; }
/* All tbody rows dark — Bootstrap default is transparent which inherits white from body */
.table tbody tr,
.table > tbody > tr,
table.dataTable tbody tr,
.dataTables_wrapper table tbody tr { background-color: var(--cc-bg-card) !important; }

.table tbody tr td,
.table > tbody > tr > td,
table.dataTable tbody tr td,
.dataTables_wrapper table tbody tr td { background-color: transparent !important; color: var(--cc-text-body) !important; }

.table-striped tbody tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd,
.dataTables_wrapper table.stripe tbody tr.odd { background-color: rgba(15,23,42,.4) !important; }

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover { background-color: rgba(37,99,235,.07) !important; color: var(--cc-text) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--cc-border) !important; }
thead.thead-light th { background-color: rgba(30,41,59,.7) !important; color: var(--cc-text-muted) !important; border-color: var(--cc-border) !important; }
thead.thead-dark  th { background-color: rgba(2,6,23,.7) !important; color: var(--cc-text) !important; border-color: var(--cc-border) !important; }

/* ── ===== PAGINATION ===== ─────────────────────────────────── */

.page-link { background-color: var(--cc-bg-card) !important; border-color: var(--cc-border) !important; color: var(--cc-text-body) !important; }
.page-link:hover { background-color: rgba(37,99,235,.1) !important; color: var(--cc-blue-400) !important; border-color: var(--cc-border) !important; }
.page-item.active .page-link { background-color: var(--cc-blue-600) !important; border-color: var(--cc-blue-600) !important; color: #fff !important; }
.page-item.disabled .page-link { background-color: rgba(30,41,59,.4) !important; color: var(--cc-slate-600) !important; }

/* ── ===== MODALS ===== ─────────────────────────────────────── */

.modal-content {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--cc-shadow-xl) !important;
  color: var(--cc-text) !important;
}
.modal-header { border-bottom: 1px solid var(--cc-border) !important; padding: 1.25rem 1.5rem !important; }
.modal-title  { font-weight: 700; font-size: 1rem; color: var(--cc-text) !important; }
.modal-body   { padding: 1.5rem !important; color: var(--cc-text-body) !important; }
.modal-footer { border-top: 1px solid var(--cc-border) !important; padding: 1rem 1.5rem !important; }
.modal-backdrop { background-color: #000 !important; opacity: .65 !important; }
.close { color: var(--cc-text-muted) !important; opacity: 1 !important; text-shadow: none !important; font-size: 1.25rem !important; }
.close:hover { color: var(--cc-text) !important; opacity: 1 !important; }

/* ── ===== TABS ===== ─────────────────────────────────────────── */

.nav-tabs { border-bottom: 1px solid var(--cc-border) !important; }
.nav-tabs .nav-link { color: var(--cc-text-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; margin-bottom: -1px; border-radius: 0 !important; }
.nav-tabs .nav-link:hover { color: var(--cc-text) !important; border-bottom-color: var(--cc-border) !important; background: none !important; }
.nav-tabs .nav-link.active { color: var(--cc-blue-400) !important; border-bottom-color: var(--cc-blue-600) !important; background-color: transparent !important; }
.tab-content { padding-top: 1.25rem; }

/* ── ===== DROPDOWNS ===== ─────────────────────────────────── */

.dropdown-menu {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: var(--cc-shadow-xl) !important;
  padding: 0.375rem 0 !important;
}
.dropdown-item { color: var(--cc-text-body) !important; padding: 0.5rem 1rem !important; font-size: 0.875rem !important; transition: all 0.1s ease; }
.dropdown-item:hover { background-color: rgba(37,99,235,.08) !important; color: var(--cc-text) !important; }
.dropdown-divider { border-color: var(--cc-border) !important; }
.dropdown-header { color: var(--cc-text-muted) !important; font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 1rem 0.25rem !important; }

/* ── ===== DASHBOARD TILES ===== ──────────────────────────── */

.tiles { margin-bottom: 1.5rem; }
.tiles .row { border-radius: var(--cc-radius-card); overflow: hidden; border: 1px solid var(--cc-border); }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
  background-color: var(--cc-bg-card);
  color: var(--cc-text) !important;
  text-decoration: none !important;
  border-right: 1px solid var(--cc-border);
  position: relative;
  overflow: hidden;
  transition: background-color var(--cc-transition);
}
.tile:last-child { border-right: 0; }
.tile:hover { background-color: rgba(37,99,235,.05); color: var(--cc-text) !important; }
.tile i { font-size: 1.5rem; color: var(--cc-text-muted); margin-bottom: 0.5rem; }
.tile .stat { font-size: 2rem; font-weight: 800; color: var(--cc-text); line-height: 1; letter-spacing: -0.03em; }
.tile .title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-text-muted); margin-top: 0.375rem; }
.tile .highlight { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
.bg-color-blue  { background-color: var(--cc-blue-600); }
.bg-color-green { background-color: var(--cc-green-500); }
.bg-color-red   { background-color: #ef4444; }
.bg-color-gold  { background-color: #f59e0b; }

/* ── ===== QUICK-ACTION ICON BUTTONS (homepage) ===== ──────── */

.action-icon-btns .col-6 > a,
.action-icon-btns .col-md-4 > a,
.action-icon-btns .col-lg > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background-color: var(--cc-bg-card);
  border: 1px solid var(--cc-slate-600);
  border-radius: var(--cc-radius-card);
  color: var(--cc-text-body) !important;
  text-decoration: none !important;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-bottom: 1rem;
  gap: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.action-icon-btns a:hover {
  background-color: rgba(37,99,235,.08);
  border-color: var(--cc-blue-600);
  color: var(--cc-text) !important;
  transform: translateY(-2px);
  box-shadow: var(--cc-shadow-card);
}
.action-icon-btns .ico-container {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(37,99,235,.1);
  border-radius: 12px;
  margin: 0;
}
.action-icon-btns i { font-size: 1.25rem; color: var(--cc-blue-400); }
.card-accent-teal       .ico-container { background-color: rgba(6,182,212,.1); }
.card-accent-teal       i { color: #22d3ee; }
.card-accent-pomegranate .ico-container { background-color: rgba(239,68,68,.1); }
.card-accent-pomegranate i { color: #f87171; }
.card-accent-sun-flower .ico-container { background-color: rgba(245,158,11,.1); }
.card-accent-sun-flower i { color: #fbbf24; }
.card-accent-asbestos   .ico-container { background-color: rgba(100,116,139,.1); }
.card-accent-asbestos   i { color: #94a3b8; }
.card-accent-green      .ico-container { background-color: rgba(34,197,94,.1); }
.card-accent-green      i { color: #4ade80; }

/* ── ===== AUTH PAGES (login / register) ===== ──────────────── */

.cc-auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: var(--cc-bg);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.08) 0%, transparent 60%);
}
/* Register page: form is tall so top-align rather than center, more vertical padding */
.cc-auth-wrap--register {
  align-items: flex-start;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.cc-auth-card {
  width: 100%;
  max-width: 480px;
  background-color: var(--cc-bg-card);
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  box-shadow: var(--cc-shadow-xl);
  overflow: hidden;
}
/* Register form is wider than login — more billing/address fields */
.cc-auth-card--wide { max-width: 680px; }
.cc-auth-header {
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--cc-border);
}
.cc-auth-logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.cc-auth-logo img { height: 36px; }
.cc-auth-title   { font-size: 1.375rem !important; font-weight: 700 !important; color: var(--cc-text) !important; margin-bottom: 0.25rem !important; letter-spacing: -0.02em; }
.cc-auth-subtitle { font-size: 0.875rem; color: var(--cc-text-muted); margin-bottom: 0; }
.cc-auth-body   { padding: 1.75rem 2rem; }
.cc-auth-footer {
  padding: 1.25rem 2rem;
  background-color: rgba(15,23,42,.4);
  border-top: 1px solid var(--cc-border);
  text-align: center;
  font-size: 0.875rem;
  color: var(--cc-text-muted);
}
.cc-auth-footer a { color: var(--cc-blue-400) !important; font-weight: 600; }
.cc-auth-footer a:hover { color: var(--cc-blue-300) !important; }

/* WHMCS mw-540 class (login card width) */
.mw-540 { max-width: 100% !important; }

/* Section heading inside auth/register forms */
.cc-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cc-blue-400);
    margin-bottom: 1rem;
}

/* ── ===== FOOTER ===== ──────────────────────────────────────── */

#cc-footer {
  background-color: var(--cc-slate-900) !important;
  border-top: 1px solid var(--cc-border) !important;
  color: var(--cc-text-body);
}
.cc-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 1rem;
}
@media (min-width:640px)  { .cc-footer-inner { padding: 3rem 1.5rem; } }
@media (min-width:1024px) { .cc-footer-inner { padding: 4rem 2rem; } }

.cc-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width:1024px) { .cc-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.cc-footer-brand { grid-column: span 2; }
@media (min-width:1024px) { .cc-footer-brand { grid-column: span 1; } }

.cc-footer-logo img { height: 28px; width: auto; margin-bottom: 1rem; }
.cc-footer-desc { font-size: 0.875rem; color: var(--cc-text-muted); line-height: 1.7; max-width: 280px; }

.cc-status-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--cc-text-muted);
  text-decoration: none !important;
  transition: color var(--cc-transition);
}
.cc-status-link:hover { color: var(--cc-text) !important; }
.cc-status-dot { position: relative; width: 8px; height: 8px; flex-shrink: 0; display: inline-block; }
.cc-status-dot-inner { position: absolute; inset: 0; border-radius: var(--cc-radius-full); background-color: var(--cc-green-500); }
.cc-status-dot-ping  { position: absolute; inset: 0; border-radius: var(--cc-radius-full); background-color: var(--cc-green-500); opacity: .75; animation: cc-ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
@keyframes cc-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

.cc-footer-col h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-text-muted); margin-bottom: 1rem; }
.cc-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.cc-footer-col li a {
  font-size: 0.875rem;
  color: var(--cc-text-muted) !important;
  text-decoration: none !important;
  transition: color var(--cc-transition);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cc-footer-col li a:hover { color: var(--cc-text) !important; }

.cc-footer-bottom { border-top: 1px solid var(--cc-border); }
.cc-footer-bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width:640px) {
  .cc-footer-bottom-inner { flex-direction: row; justify-content: space-between; padding: 1.25rem 1.5rem; }
}
@media (min-width:1024px) { .cc-footer-bottom-inner { padding: 1.25rem 2rem; } }
.cc-footer-copy { font-size: 0.75rem; color: var(--cc-slate-500); }
.cc-footer-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; color: var(--cc-slate-600); }
.cc-footer-sep  { width: 1px; height: 12px; background-color: var(--cc-slate-700); }

/* ── ===== STATUS COLOURS ===== ──────────────────────────────── */

.status-active, .status-active a { color: var(--cc-green-400) !important; }
.status-terminated, .status-suspended, .status-cancelled, .status-fraud { color: #f87171 !important; }
.status-pending { color: #fbbf24 !important; }

/* ── ===== MISC OVERRIDES ===== ─────────────────────────────── */

.well { background-color: rgba(30,41,59,.5) !important; border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius-card) !important; }
.panel { background-color: var(--cc-bg-card) !important; border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius-card) !important; }
.panel-heading { background-color: rgba(30,41,59,.8) !important; border-bottom: 1px solid var(--cc-border) !important; color: var(--cc-text) !important; border-radius: calc(var(--cc-radius-card) - 1px) calc(var(--cc-radius-card) - 1px) 0 0 !important; }

#fullpage-overlay { background-color: rgba(2,6,23,.85) !important; }

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

/* ── ===== ANIMATIONS ===== ─────────────────────────────────── */

@keyframes cc-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-fade-up { animation: cc-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── ===== ANNOUNCEMENTS ===== ───────────────────────────────── */

.announcements .announcement article {
  background-color: rgba(30,41,59,.6) !important;
  border-left: 3px solid var(--cc-blue-600) !important;
  border-radius: 0 var(--cc-radius-btn) var(--cc-radius-btn) 0 !important;
  color: var(--cc-text-body) !important;
  padding: 1rem 1.25rem !important;
}
.announcements .announcement article p { color: var(--cc-text-body) !important; }
.announcements .announcement h2 a,
.announcements .announcement h2,
.announcements .announcement h3 { color: var(--cc-text) !important; }

/* ── ===== STORE / PRODUCT LISTING ===== ─────────────────────── */

.product {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  color: var(--cc-text) !important;
}
.product .price      { color: var(--cc-blue-400) !important; }
.product .price-note { color: var(--cc-text-muted) !important; }
.product h2, .product h3 { color: var(--cc-text) !important; }
.product p { color: var(--cc-text-muted) !important; }
.product .btn-order-now,
.product .btn-success,
.product a.btn {
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
}
.product .btn-order-now:hover,
.product .btn-success:hover { background-color: var(--cc-blue-700) !important; }

/* Product listing container */
.products { background-color: transparent !important; }
.product-listing { background-color: transparent !important; }

/* ── ===== ORDER FORM — PRODUCT CARDS ===== ──────────────────── */

/* Grid layout: replace two-column Bootstrap row with CSS grid */
#order-standard_cart .products > .row.row-eq-height {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 1.25rem !important;
  margin: 0 !important;
}
#order-standard_cart .products > .row.row-eq-height > .col-md-6 {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* Card as flex column */
#order-standard_cart .product.clearfix {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 1.5rem !important;
  gap: .75rem !important;
  float: none !important;
  overflow: visible !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
#order-standard_cart .product.clearfix:hover {
  border-color: var(--cc-blue-600) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.18) !important;
}

/* Card header */
#order-standard_cart .product header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--cc-border) !important;
  border-radius: 0 !important;
  padding: 0 0 .875rem 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#order-standard_cart .product header span:first-child {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--cc-text) !important;
}
#order-standard_cart .product header .qty {
  font-size: .75rem !important;
  color: var(--cc-text-muted) !important;
}

/* Feature list */
#order-standard_cart .product .product-desc {
  flex: 1 !important;
  float: none !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#order-standard_cart .product .product-desc > p {
  color: var(--cc-text-muted) !important;
  font-size: .875rem !important;
  margin-bottom: .75rem !important;
}
#order-standard_cart .product .product-desc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .4rem !important;
}
#order-standard_cart .product .product-desc ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: .5rem !important;
  font-size: .875rem !important;
  color: var(--cc-text-muted) !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
#order-standard_cart .product .product-desc ul li::before {
  content: "\2713" !important;
  color: var(--cc-blue-400) !important;
  font-weight: 700 !important;
  font-size: .875rem !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}
#order-standard_cart .product .product-desc ul li .feature-value {
  font-weight: 600 !important;
  color: var(--cc-text) !important;
}

/* Card footer: pricing + button */
#order-standard_cart .product footer {
  display: flex !important;
  float: none !important;
  width: 100% !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: .875rem 0 0 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  border-top: 1px solid var(--cc-border) !important;
}

/* Large price display */
#order-standard_cart .product .product-pricing {
  flex: 1 !important;
  min-width: 0 !important;
}
#order-standard_cart .product .product-pricing .price {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  line-height: 1.1 !important;
  display: block !important;
}
#order-standard_cart .product .product-pricing small {
  display: block !important;
  color: var(--cc-text-muted) !important;
  font-size: .75rem !important;
  margin-top: .125rem !important;
}
#order-standard_cart .product .product-pricing br { display: none !important; }

/* Order now button */
#order-standard_cart .product .btn-order-now,
#order-standard_cart .product .btn-success {
  border-radius: var(--cc-radius-btn) !important;
  padding: .5rem 1.25rem !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── ===== ORDER FORM — CONFIGURE PRODUCT ===== ──────────────── */

#order-standard_cart .product-info {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  color: var(--cc-text) !important;
}
#order-standard_cart .product-info h2,
#order-standard_cart .product-info h3,
#order-standard_cart .product-info h4 { color: var(--cc-text) !important; }
#order-standard_cart .product-info p,
#order-standard_cart .product-info label { color: var(--cc-text-body) !important; }
#order-standard_cart .product-addons,
#order-standard_cart .section-addons {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
}

/* Order summary sidebar */
#order-standard_cart .order-summary {
  background-color: rgba(37,99,235,.1) !important;
  border: 1px solid var(--cc-border) !important;
  border-bottom: none !important;
  border-radius: var(--cc-radius-card) var(--cc-radius-card) 0 0 !important;
  color: var(--cc-text) !important;
}
#order-standard_cart .summary-container {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--cc-radius-card) var(--cc-radius-card) !important;
  color: var(--cc-text) !important;
}
#order-standard_cart .summary-container .summary-totals td {
  color: var(--cc-text-body) !important;
  border-color: var(--cc-border) !important;
}
#order-standard_cart .summary-container .summary-totals tr.total td {
  color: var(--cc-text) !important;
  font-weight: 700 !important;
}

/* ── ===== ORDER FORM — CART & CHECKOUT ===== ─────────────────── */

#order-standard_cart .cart-items {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
}
#order-standard_cart .cart-items .item {
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
}
#order-standard_cart .cart-items .item:last-child { border-bottom: none !important; }
#order-standard_cart .cart-items .item .item-name {
  color: var(--cc-text) !important;
  font-weight: 600 !important;
}
#order-standard_cart .cart-items .item .item-price {
  color: var(--cc-blue-400) !important;
  font-weight: 600 !important;
}
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-proceed {
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
  border-radius: var(--cc-radius-btn) !important;
  font-weight: 600 !important;
}
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-proceed:hover {
  background-color: var(--cc-blue-700) !important;
  border-color: var(--cc-blue-700) !important;
}

/* Order form nav tabs */
#order-standard_cart .nav-tabs {
  border-bottom-color: var(--cc-border) !important;
}
#order-standard_cart .nav-tabs .nav-link {
  color: var(--cc-text-muted) !important;
  border-color: transparent !important;
}
#order-standard_cart .nav-tabs .nav-link.active {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) var(--cc-border) var(--cc-bg-card) !important;
  color: var(--cc-text) !important;
}

/* Cart: promo code / tax estimate tab — matching all.min.css specificity */
#order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--cc-radius-btn) var(--cc-radius-btn) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) var(--cc-border) var(--cc-bg-card) !important;
  color: var(--cc-text) !important;
}
#order-standard_cart .btn-default {
  background-color: rgba(51,65,85,.3) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}
#order-standard_cart .btn-default:hover {
  background-color: rgba(51,65,85,.55) !important;
  color: var(--cc-text) !important;
}

/* Generic white panel backgrounds inside order form */
#order-standard_cart .panel,
#order-standard_cart .panel-body,
#order-standard_cart .well {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
}
#order-standard_cart .panel-heading {
  background-color: rgba(37,99,235,.1) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
}
#order-standard_cart table {
  color: var(--cc-text) !important;
}
#order-standard_cart table td,
#order-standard_cart table th {
  border-color: var(--cc-border) !important;
  color: var(--cc-text-body) !important;
}
#order-standard_cart .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(51,65,85,.3) !important;
}

/* ── ===== KNOWLEDGEBASE ===== ────────────────────────────────── */

.kbarticle-content,
.kbarticle-content p { color: var(--cc-text-body) !important; }
.kbarticle-content pre,
.kbarticle-content code { background-color: rgba(15,23,42,.8) !important; color: var(--cc-blue-300) !important; }
.kbarticle-content blockquote {
  background-color: rgba(37,99,235,.08) !important;
  border-left: 3px solid var(--cc-blue-600) !important;
  color: var(--cc-text-body) !important;
}

/* ── ===== INVOICES / BILLING ===== ──────────────────────────── */

.invoice-summary { background-color: var(--cc-bg-card) !important; border: 1px solid var(--cc-border) !important; }
.invoice-due { color: #f87171 !important; }

/* ── ===== TICKET PAGES ===== ─────────────────────────────────── */

.ticket-reply { background-color: var(--cc-bg-card) !important; border: 1px solid var(--cc-border) !important; border-radius: var(--cc-radius-card) !important; }
.ticket-reply.client { background-color: rgba(37,99,235,.08) !important; border-color: rgba(37,99,235,.2) !important; }
.ticket-reply .reply-body { color: var(--cc-text-body) !important; }

/* ── ===== DOMAIN SEARCH ===== ────────────────────────────────── */

.domaincheck-result { background-color: var(--cc-bg-card) !important; border: 1px solid var(--cc-border) !important; }
.domaincheck-result.available { border-color: var(--cc-green-600) !important; }
.domaincheck-result.unavailable { border-color: #ef4444 !important; opacity: .6; }

/* ── ===== twenty-one LIGHT THEME LEFTOVERS ===== ─────────────── */

/* Catch-all for white backgrounds that theme.min.css sets */
.bg-white,
.panel-body { background-color: var(--cc-bg-card) !important; color: var(--cc-text) !important; }
.text-body   { color: var(--cc-text-body) !important; }
.text-dark   { color: var(--cc-text) !important; }
.text-black-50 { color: var(--cc-text-muted) !important; }
.border-secondary { border-color: var(--cc-border) !important; }
.bg-secondary { background-color: var(--cc-slate-700) !important; }

/* Override twenty-one header/nav light styles */
.navbar { background-color: transparent !important; }
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link { color: var(--cc-text) !important; }
.header-lined { background-color: transparent !important; border-bottom: 1px solid var(--cc-border) !important; }
.header-lined h1, .header-lined p { color: var(--cc-text) !important; }

/* Select dropdowns dark */
select, .custom-select {
  background-color: rgba(15,23,42,.8) !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  border-radius: var(--cc-radius-btn) !important;
}

/* ── intl-tel-input v12 (old API — used on register form) ────── */
.intl-tel-input { width: 100% !important; }
.intl-tel-input .flag-container { z-index: 10 !important; }
.intl-tel-input .selected-flag {
  background-color: rgba(51,65,85,.4) !important;
  border-right: 1px solid var(--cc-border) !important;
}
.intl-tel-input .selected-flag:hover,
.intl-tel-input .flag-container:hover .selected-flag {
  background-color: rgba(51,65,85,.65) !important;
}
.intl-tel-input .selected-dial-code {
  color: var(--cc-text-muted) !important;
  padding-left: 3px !important;
}
.intl-tel-input .iti-arrow {
  border-top-color: var(--cc-text-muted) !important;
}
.intl-tel-input .iti-arrow.up {
  border-bottom-color: var(--cc-text-muted) !important;
}

/* ── intl-tel-input v17+ (new API) ───────────────────────────── */
.iti { width: 100% !important; }

.iti__flag-container { z-index: 10 !important; }

.iti__selected-flag {
  background-color: rgba(51,65,85,.4) !important;
  border-right: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-btn) 0 0 var(--cc-radius-btn) !important;
}

.iti__selected-flag:hover { background-color: rgba(51,65,85,.6) !important; }
.iti__selected-dial-code { color: var(--cc-text-muted) !important; }
.iti__arrow { border-top-color: var(--cc-text-muted) !important; }

.iti__dropdown-content {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-btn) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
}

.iti__search-input {
  background-color: rgba(15,23,42,.9) !important;
  border: none !important;
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  padding: .5rem .75rem !important;
  font-family: var(--cc-font) !important;
  width: 100% !important;
}

.iti__search-input::placeholder { color: var(--cc-slate-500) !important; }

.iti__country-list {
  background-color: var(--cc-bg-card) !important;
  border: none !important;
  max-height: 260px !important;
}

.iti__country {
  padding: .4375rem .75rem !important;
  color: var(--cc-text-muted) !important;
}

.iti__country:hover, .iti__country.iti__highlight {
  background-color: rgba(37,99,235,.1) !important;
  color: var(--cc-text) !important;
}

.iti__country-name { color: var(--cc-text-muted) !important; }
.iti__dial-code { color: var(--cc-slate-500) !important; }
.iti__divider { border-bottom-color: var(--cc-border) !important; }

/* Legacy intl-tel-input class names */
.country-list {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
}

.country-list .country { color: var(--cc-text-muted) !important; }
.country-list .country:hover,
.country-list .country.highlight { background-color: rgba(37,99,235,.1) !important; color: var(--cc-text) !important; }
.country-list .country-name { color: var(--cc-text-muted) !important; }
.country-list .dial-code { color: var(--cc-slate-500) !important; }

/* ── ===== MOBILE RESPONSIVE ===== ──────────────────────────── */

/* theme.min.css sets .container { min-width: 992px !important } which locks the
   layout at desktop width on every screen. Override it for viewports below lg. */
@media (max-width: 991px) {
  .container { min-width: 0 !important; width: 100% !important; }

  /* The col-lg-4 sidebar (Already Registered?, KB Categories, Announcements By Month)
     stacks above the main content at <lg viewports, which buries the page content.
     Hide it — the main content area has equivalent controls, and the register auth
     card already has an "Already have an account?" link at the bottom. */
  .col-lg-4.col-xl-3 { display: none !important; }
}

/* "Already Registered?" sidebar on register.php is redundant on ALL viewports —
   the auth card footer already has "Already have an account? Login".
   Uses :has() to target only the col that contains this specific sidebar card,
   leaving KB/Announcements sidebars untouched on desktop. */
.col-lg-4.col-xl-3:has([menuitemname="Already Registered"]) { display: none !important; }
.col-lg-4.col-xl-3:has([menuitemname="Already Registered"]) + .col-lg-8.col-xl-9 {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Prevent horizontal scroll on all pages. */
html, body { overflow-x: hidden; }
#main-body, .primary-content { overflow-x: hidden; }

/* Bootstrap .row inside auth card: neutralize negative margins. */
.cc-auth-body .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cc-auth-body .row [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Images never overflow their container (covers captcha image etc.) */
.cc-auth-card img { max-width: 100% !important; height: auto !important; }

@media (max-width: 767px) {
  /* Auth card: tighter side padding on small phones */
  .cc-auth-body   { padding: 1.5rem 1rem !important; }
  .cc-auth-header { padding: 1.5rem 1rem 0 !important; }
  .cc-auth-footer { padding: 1rem 1rem 1.5rem !important; }

  /* Remove forced full-viewport min-height — it creates huge blank space on mobile
     since the auth card is short and the footer still renders below. */
  .cc-auth-wrap { min-height: 0; }

  /* #main-body min-height is calc(100vh - 320px) = 524px on mobile, calibrated for
     desktop footer height. On mobile the footer is ~540px, so the gap formula is wrong
     and creates blank space below short pages (knowledgebase, announcements, etc.). */
  #main-body, section#main-body { min-height: 0; }

  /* Inputs must not overflow on mobile */
  .form-control { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Phone input */
  .intl-tel-input { max-width: 100% !important; width: 100% !important; }

  /* Select dropdowns */
  select, .custom-select { max-width: 100% !important; box-sizing: border-box !important; }
}
select option { background-color: var(--cc-slate-800); color: var(--cc-text); }

/* Footer: on small screens the brand spans 2 cols, leaving support alone in row 3
   (brand+empty, company+legal, support+empty = 3 tall rows). Drop brand to span 1
   so the 4 cols fill a clean 2×2 grid, hide the long description text that wraps
   heavily in the narrow column, and reduce padding to save vertical space. */
@media (max-width: 639px) {
  .cc-footer-brand { grid-column: span 1; }
  .cc-footer-desc  { display: none; }
  .cc-footer-inner { padding: 2rem 1rem; }
}

/* ── ===== UTILITY CLASSES ===== ─────────────────────────────── */

/* Form section divider — replaces inline <hr style="border-color:..."> */
.cc-form-divider {
  border: 0;
  border-top: 1px solid var(--cc-border);
  margin: 1.5rem 0;
  opacity: 1;
}

/* Optional field label hint */
.cc-label-optional {
  color: var(--cc-slate-500);
  font-weight: 400;
}

/* Mobile nav icon — consistent icon sizing in hamburger menu */
.cc-mobile-icon {
  width: 20px;
  text-align: center;
  color: var(--cc-blue-400);
  flex-shrink: 0;
}

/* Mobile nav destructive link (e.g. logout) */
.cc-mobile-link--danger { color: #f87171 !important; }
.cc-mobile-link--danger:hover { color: #fca5a5 !important; }

/* Mobile nav section label (e.g. "CLIENT AREA" subheading) */
.cc-mobile-section-label {
  padding: 0 .75rem .25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cc-slate-500);
}

/* Chevron icon inside user dropdown toggle */
.cc-user-chevron {
  font-size: .7rem;
  transition: transform var(--cc-transition);
}
/* Rotate chevron when dropdown is open */
.cc-user-btn[aria-expanded="true"] .cc-user-chevron { transform: rotate(180deg); }

/* ── ===== ACCESSIBILITY ===== ────────────────────────────────── */

/* Keyboard-only focus ring — visible to keyboard users, hidden on mouse click */
:focus-visible {
  outline: 2px solid var(--cc-blue-400);
  outline-offset: 2px;
}
/* Remove default outline when :focus-visible is supported */
:focus:not(:focus-visible) { outline: none; }

/* Respect prefers-reduced-motion — disable animations for users who opt out */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── ===== CLIENT AREA — DARK THEME FIXES ===== ─────────────────────────────
   Fixes white/light elements that Bootstrap 3 defaults override.
   Covers: DataTables, TinyMCE, panels, home dashboard, sidebar.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. DataTables ──────────────────────────────────────────────────────────
   WHMCS uses DataTables for invoices, services, tickets tables.
   The search input and "Show X entries" select default to Bootstrap white.  */

.dataTables_filter input,
.dataTables_filter input[type="search"],
.dataTables_length select,
.dataTables_wrapper .dataTables_filter .form-control,
.dataTables_wrapper .dataTables_length .form-control {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  border-radius: var(--cc-radius-btn) !important;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: var(--cc-blue-600) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.2) !important;
}

.dataTables_info,
.dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--cc-text-muted) !important;
}

.dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(37,99,235,.1) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
}

/* ── 2. Bootstrap Panels → dark cards ──────────────────────────────────────
   WHMCS uses .panel.panel-default extensively for content cards.
   Bootstrap 3 defaults these to #fff background.                            */

.panel {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius-card) !important;
  box-shadow: none !important;
}

.panel-default > .panel-heading {
  background-color: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  border-radius: calc(var(--cc-radius-card) - 1px) calc(var(--cc-radius-card) - 1px) 0 0 !important;
}

.panel-heading .panel-title,
.panel-heading h3,
.panel-heading a {
  color: var(--cc-text) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.panel-body {
  background-color: transparent !important;
  color: var(--cc-text-body) !important;
}

.panel-footer {
  background-color: rgba(255,255,255,.02) !important;
  border-top: 1px solid var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}

/* List groups inside panels */
.list-group-item {
  background-color: transparent !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-body) !important;
}

.list-group-item:hover,
.list-group-item:focus {
  background-color: rgba(37,99,235,.06) !important;
  color: var(--cc-text) !important;
}

.list-group-item.active,
.list-group-item.active:hover {
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
  color: #fff !important;
}

/* ── 3. Home dashboard — stat tiles ─────────────────────────────────────────
   Force dark background so Bootstrap doesn't win over our .tile CSS.        */

.tile {
  background-color: var(--cc-bg-card) !important;
}

.tile:hover {
  background-color: rgba(37,99,235,.08) !important;
}

.tiles .row {
  background-color: var(--cc-bg-card) !important;
}

/* ── 4. Home dashboard — action icon links ──────────────────────────────────
   The Services/Quotes/Tickets/Invoices icon boxes on clientareahome.        */

.client-area-icon-link,
.icon-link,
.quick-action,
.shortcuts-widget a {
  background-color: var(--cc-bg-card) !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text-body) !important;
  border-radius: var(--cc-radius-card) !important;
}

/* ── 5. Sidebar widgets (Your Info, Contacts, Shortcuts) ────────────────────
   Make them cleaner and less prominent.                                      */

.sidebar .panel-heading {
  padding: .6rem 1rem !important;
}

.sidebar .panel-title {
  font-size: .7rem !important;
}

.sidebar .panel-body {
  padding: .875rem 1rem !important;
  font-size: .8rem !important;
}

/* "Your Info" user details */
.sidebar .panel-body p {
  margin-bottom: .25rem !important;
  color: var(--cc-text-body) !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
}

/* Sidebar update/action buttons */
.sidebar .btn-default,
.sidebar .btn-success {
  font-size: .75rem !important;
  padding: .35rem .75rem !important;
}

/* ── 6. "Your Active Products/Services" section home ───────────────────────
   The active services icon on home page.                                     */

.client-service-icon-wrap,
#clientservices .service-icon,
.service-icon-wrap {
  background-color: rgba(37,99,235,.12) !important;
  border-radius: 10px !important;
}

/* "Place an order" / "View More" links on home */
.home-content a.pull-right,
#clientservices .pull-right a,
.panel-heading .pull-right a {
  font-size: .75rem !important;
  color: var(--cc-blue-400) !important;
}

/* ── 7. Notification bar ────────────────────────────────────────────────────
   The "Notifications" bar below header.                                      */

#notification-bar,
.notification-bar {
  background-color: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.2) !important;
}

/* ── 8. TinyMCE 4 (mce-) — dark theme ──────────────────────────────────────
   WHMCS uses TinyMCE v4 (majorVersion:"4"). Class prefix is mce-, not tox-.
   The iframe textarea background is handled via JS hook injection.           */

/* Outer wrapper */
.mce-tinymce, .mce-container, .mce-panel {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
}

/* Toolbar area */
.mce-toolbar-grp,
.mce-top-part,
.mce-toolbar,
.mce-toolbar .mce-container-body {
  background-color: var(--cc-bg) !important;
  border-color: var(--cc-border) !important;
}

/* Toolbar buttons */
.mce-btn,
.mce-btn button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--cc-text-muted) !important;
  box-shadow: none !important;
}

.mce-btn:hover,
.mce-btn.mce-active,
.mce-btn.mce-active:hover {
  background-color: rgba(255,255,255,.08) !important;
  border-color: var(--cc-border) !important;
}

.mce-btn.mce-active { background-color: rgba(37,99,235,.2) !important; }

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

/* Separator between button groups */
.mce-toolbar .mce-separator { border-color: var(--cc-border) !important; }

/* Edit area wrapper (not the iframe itself) */
.mce-edit-area { border-color: var(--cc-border) !important; }

/* Status bar */
.mce-statusbar {
  background-color: var(--cc-bg) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}

.mce-path, .mce-path .mce-item { color: var(--cc-text-muted) !important; }
.mce-wordcount { color: var(--cc-text-muted) !important; }

/* Dropdown menus */
.mce-menu, .mce-menu-item {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-body) !important;
}

.mce-menu-item:hover,
.mce-menu-item.mce-selected {
  background-color: var(--cc-blue-600) !important;
  color: #fff !important;
}

/* Font select / format select in toolbar */
.mce-btn-group .mce-btn .mce-txt { color: var(--cc-text-muted) !important; }
.mce-listbox button { background: transparent !important; color: var(--cc-text-muted) !important; }

/* ── 9. Support ticket list — status badges ─────────────────────────────────*/

.badge-open   { background-color: var(--cc-blue-600) !important; }
.badge-closed { background-color: var(--cc-slate-600) !important; }

/* ── 10. Pay All / primary action buttons on invoices ───────────────────────
   Keep green for payment actions (semantically correct for "pay/confirm").
   Override only layout. Make more consistent with design system.             */

.btn-pay-all,
a[href*="mass-pay"],
.invoices-pay-all .btn-success {
  background-color: var(--cc-blue-600) !important;
  border-color: var(--cc-blue-600) !important;
}

.btn-pay-all:hover,
a[href*="mass-pay"]:hover,
.invoices-pay-all .btn-success:hover {
  background-color: var(--cc-blue-700) !important;
  border-color: var(--cc-blue-700) !important;
}

/* ── 11. Misc white backgrounds ─────────────────────────────────────────────*/

/* Input group addons */
.input-group-addon {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-muted) !important;
}

/* Select2 dropdowns (WHMCS uses these in some forms) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--cc-text) !important;
}

.select2-dropdown {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
}

.select2-container--default .select2-results__option {
  color: var(--cc-text-body) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: var(--cc-blue-600) !important;
  color: #fff !important;
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--cc-bg) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
}

/* Well/pre elements (used in knowledgebase and ticket views) */
.well {
  background-color: var(--cc-bg-card) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-body) !important;
}

/* Code blocks in tickets */
pre, code {
  background-color: var(--cc-bg) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-text-body) !important;
}

/* Breadcrumb */
.breadcrumb {
  background-color: transparent !important;
}

.breadcrumb > li + li::before {
  color: var(--cc-text-muted) !important;
}