:root {
  --cm-bg: #f3f6fb;
  --cm-card: #ffffff;
  --cm-ink: #122033;
  --cm-mute: #5b6b80;
  --cm-line: #d7e0ec;
  --cm-blue: #2563eb;
  --cm-blue-2: #1d4ed8;
  --cm-mint: #0f9f6e;
}

html, body {
  background: var(--cm-bg) !important;
  color: var(--cm-ink);
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
}

#layout-wrapper,
.main-content,
.page-content,
.container-fluid {
  background: transparent !important;
}

.navbar-header,
.navbar-brand-box,
#page-topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--cm-line) !important;
  box-shadow: none !important;
}

.vertical-menu {
  background: #fff !important;
  border-right: 1px solid var(--cm-line) !important;
}

#sidebar-menu ul li a {
  color: #334155 !important;
  border-radius: 10px;
  margin: 2px 10px;
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li a.active {
  background: #e8f0ff !important;
  color: var(--cm-blue) !important;
}

.card {
  background: var(--cm-card) !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(18, 32, 51, .06) !important;
}

.card-title, h1, h2, h3, h4, h5, .page-title {
  color: var(--cm-ink) !important;
}

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

.btn-primary,
.btn-primary:focus {
  background: var(--cm-blue) !important;
  border-color: var(--cm-blue) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.btn-primary:hover { background: var(--cm-blue-2) !important; }

.btn {
  border-radius: 999px !important;
}

.form-control, .form-select, select.form-control {
  background: #fff !important;
  border: 1px solid #c9d6e5 !important;
  border-radius: 12px !important;
  color: var(--cm-ink) !important;
}

.form-control:focus {
  border-color: var(--cm-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}

.table {
  color: var(--cm-ink) !important;
}

.table thead th {
  background: #eef3fa !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--cm-line) !important;
}

.badge.bg-warning { background: #f59e0b !important; color: #1f1300 !important; }
.badge.bg-primary { background: var(--cm-blue) !important; }

.dropzone {
  background: #f8fbff !important;
  border: 2px dashed #93c5fd !important;
  border-radius: 16px !important;
  color: var(--cm-mute) !important;
}

/* Login */
.auth-page,
.auth-full-page-content {
  background: linear-gradient(180deg, #eef4ff 0%, #f7f9fc 55%, #ffffff 100%) !important;
}

.auth-full-page-content {
  box-shadow: 0 16px 40px rgba(18,32,51,.08);
}

.auth-logo .logo-txt,
.logo-txt {
  color: var(--cm-ink) !important;
  font-weight: 700;
}

.auth-content h5 {
  font-size: 1.45rem !important;
  color: var(--cm-ink) !important;
}

footer, .footer {
  background: transparent !important;
  color: var(--cm-mute) !important;
}

.cm-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: #2563eb; color: #fff; font-weight: 800; font-size: 14px;
  margin-right: 8px; vertical-align: middle;
}
.logo-txt { font-weight: 700; letter-spacing: .02em; color: #122033 !important; }