/* ============================================================
   Master Admin — restyled to match the RepairMatrix theme used
   throughout the Repair POS app, so the two feel like one product
   family. Same color palette, shadows, and component patterns;
   class names below are kept as .ma-* (not renamed to .wp-*) so
   nothing in header.php/footer.php or any page had to change.
   ============================================================ */

:root {
  --ma-sidebar-width: 240px;
  --ma-sidebar-bg: #030625;
  --ma-sidebar-hover: color-mix(in srgb, #f42132 10%, #030625);
  --ma-sidebar-active: color-mix(in srgb, #f42132 22%, #030625);
  --ma-sidebar-text: #b9c6e0;
  --ma-sidebar-text-active: #ffffff;
  --ma-topbar-bg: #ffffff;
  --ma-bg: #f4f7fb;
  --ma-border: #dde4ee;
  --ma-accent: #f42132;
  --ma-on-accent: #ffffff;

  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow: 0 1px 3px rgba(16,24,40,0.07), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 10px 28px rgba(16,24,40,0.12);
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  background: var(--ma-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  color: #1d2327;
}

/* ---------- Layout shell ---------- */
.ma-wrap { display: flex; min-height: 100vh; }

.ma-sidebar {
  width: var(--ma-sidebar-width);
  background: var(--ma-sidebar-bg);
  color: var(--ma-sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: 2px 0 10px rgba(0,0,0,0.10);
}

.ma-sidebar-burger {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #030625;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color var(--transition);
}
.ma-sidebar-burger:hover { background: var(--ma-bg); }

.ma-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ma-sidebar-backdrop.show { display: block; opacity: 1; }

.ma-brand {
  padding: 18px 20px 4px;
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.ma-brand img { max-height: 48px; max-width: 200px; object-fit: contain; }

.ma-brand-sub {
  padding: 0 20px 16px;
  font-size: 0.72rem;
  color: #7d8bb0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.ma-nav { flex: 1; padding: 8px 0; }

.ma-nav-link {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 20px;
  color: var(--ma-sidebar-text);
  text-decoration: none;
  font-size: 0.92rem;
  transition: background-color var(--transition), color var(--transition), padding-left var(--transition);
}
.ma-nav-link::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ma-accent);
  transform: scaleY(0);
  transition: transform var(--transition);
}
.ma-nav-link:hover {
  background: var(--ma-sidebar-hover);
  color: var(--ma-sidebar-text-active);
  padding-left: 24px;
  text-decoration: none;
}
.ma-nav-link:hover::before { transform: scaleY(1); }
.ma-nav-link.active {
  background: var(--ma-sidebar-active);
  color: var(--ma-sidebar-text-active);
}
.ma-nav-link.active::before { transform: scaleY(1); }

.ma-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.ma-topbar {
  background: var(--ma-topbar-bg);
  border-bottom: 1px solid var(--ma-border);
  padding: 14px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ma-topbar-title { font-size: 1.15rem; font-weight: 700; color: #030625; }

.ma-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ma-topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ma-border);
  border-radius: 50%;
  background: none;
  color: #1d2327;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color var(--transition);
}
.ma-topbar-icon-btn:hover { background: #f4f5f7; }

.ma-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--ma-border);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  font-size: 0.88rem;
  color: #1d2327;
  cursor: pointer;
}
.ma-account-btn:hover { background: #f4f5f7; }
.ma-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ma-accent, #2271b1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

.ma-content { padding: 24px; flex: 1; animation: maFadeIn 0.25s var(--transition); }
@keyframes maFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.ma-footer {
  text-align: center;
  color: #8c8f94;
  padding: 14px;
  border-top: 1px solid var(--ma-border);
  background: #fff;
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--ma-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
a:hover > .card, a:hover .card {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ma-accent) 35%, var(--ma-border));
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 7px;
  font-weight: 500;
  transition: all var(--transition);
}
.btn:hover:not(:disabled):not(.btn-link) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }

.btn-primary {
  background-color: var(--ma-accent);
  border-color: var(--ma-accent);
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: color-mix(in srgb, var(--ma-accent) 85%, black);
  border-color: color-mix(in srgb, var(--ma-accent) 85%, black);
  color: var(--ma-on-accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ma-accent) 35%, transparent);
}
.btn-outline-primary {
  color: #030625;
  border-color: var(--ma-accent);
}
.btn-outline-primary:hover {
  background-color: var(--ma-accent);
  border-color: var(--ma-accent);
  color: var(--ma-on-accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ma-accent) 25%, transparent);
}
.btn-outline-secondary:hover { box-shadow: var(--shadow-sm); }
.btn-outline-danger:hover, .btn-danger:hover { box-shadow: 0 4px 12px rgba(220,53,69,0.25); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ma-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-accent) 18%, transparent);
}
.form-check-input:focus {
  border-color: var(--ma-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-accent) 18%, transparent);
}
.form-check-input:checked {
  background-color: color-mix(in srgb, var(--ma-accent) 80%, black);
  border-color: color-mix(in srgb, var(--ma-accent) 80%, black);
}

/* ---------- Tables ---------- */
.table thead { background-color: #f6f7fb; }
.table-hover > tbody > tr { transition: background-color 120ms ease; }
.table > :not(caption) > * > * { vertical-align: middle; }

/* ---------- Badges, alerts, modals, dropdowns ---------- */
.badge { border-radius: 5px; font-weight: 600; letter-spacing: 0.2px; }

.alert { border-radius: 8px; border: none; box-shadow: var(--shadow-sm); }

.modal-content { border-radius: 12px; border: none; box-shadow: var(--shadow-lg); }

.dropdown-menu {
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ma-border);
  padding: 6px;
}
.dropdown-item { border-radius: 6px; transition: background-color var(--transition), color var(--transition); }

/* ---------- Stat cards ---------- */
.stat-card { transition: box-shadow var(--transition), transform var(--transition); }
.stat-card h2, .stat-card h3, .stat-card h4 { color: #030625; font-weight: 700; }

.module-matrix th, .module-matrix td { text-align: center; vertical-align: middle; }
.module-matrix td:first-child, .module-matrix th:first-child { text-align: left; }

/* ============================================================
   Auth pages (login) — same split-panel layout as Repair POS,
   with a distinct "ADMIN PANEL" marker so the two are never
   confused for each other even side by side.
   ============================================================ */
body.auth-body {
  margin: 0;
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f8f9fb;
}
/* Fluid sizing throughout both panels below: every font-size, margin,
   and padding that could plausibly cause overflow on a short or narrow
   viewport uses clamp() tied to vh/vw, so it shrinks continuously as
   the window shrinks instead of staying fixed until a breakpoint hits
   and then jumping. overflow-y: auto stays on each panel purely as a
   safety net for truly extreme cases - normal resizing should never
   actually trigger it. Matches the same approach in Repair POS. */
.auth-panel-brand {
  flex: 1 1 46%;
  background: linear-gradient(160deg, #000000 0%, #030625 50%, #150410 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 5vh, 56px) clamp(24px, 5vw, 56px);
  position: relative;
  overflow-y: auto;
  max-height: 100vh;
  max-height: 100dvh;
}
.auth-panel-brand::before, .auth-panel-brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,33,50,0.22) 0%, rgba(244,33,50,0) 70%);
  pointer-events: none;
}
.auth-panel-brand::before { width: 460px; height: 460px; top: -180px; right: -160px; }
.auth-panel-brand::after { width: 320px; height: 320px; bottom: -140px; left: -90px; }
.auth-brand-top { position: relative; z-index: 1; margin: auto 0; }

.auth-admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,33,50,0.18);
  border: 1px solid rgba(244,33,50,0.45);
  color: #ff8a94;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: clamp(12px, 3vh, 24px);
}

.auth-brand-logo-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(12px, 3vh, 24px); }
.auth-brand-logo-wrap img { max-height: clamp(28px, 4vh, 40px); max-width: 200px; object-fit: contain; }
.auth-tagline { font-size: clamp(1.25rem, 1rem + 1.6vh, 2rem); font-weight: 700; line-height: 1.25; max-width: 420px; margin-bottom: clamp(8px, 2vh, 20px); }
.auth-subtext { font-size: clamp(0.82rem, 0.7rem + 0.5vh, 1rem); opacity: 0.85; max-width: 400px; line-height: 1.55; }
.auth-feature-list { list-style: none; padding: 0; margin: clamp(14px, 3vh, 28px) 0 0; position: relative; z-index: 1; }
.auth-feature-list li { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(5px, 1.4vh, 13px); font-size: clamp(0.75rem, 0.68rem + 0.35vh, 0.92rem); opacity: 0.95; }
.auth-feature-list i {
  font-size: clamp(0.8rem, 1vh + 0.3rem, 1rem);
  background: rgba(244,33,50,0.20);
  color: #f42132;
  border-radius: 50%;
  width: clamp(20px, 3vh, 28px); height: clamp(20px, 3vh, 28px);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-brand-footer { position: relative; z-index: 1; font-size: 0.8rem; opacity: 0.7; margin-top: clamp(10px, 2vh, 20px); flex-shrink: 0; }

.auth-panel-form {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 32px) clamp(16px, 3vw, 24px);
  overflow-y: auto;
  max-height: 100vh;
  max-height: 100dvh;
}
.auth-form-box { width: 100%; max-width: 400px; animation: maFadeIn 0.3s var(--transition); margin: auto 0; }
.auth-form-box .card { border: none; box-shadow: 0 8px 30px rgba(0,0,0,0.07); border-radius: 14px; padding: clamp(20px, 4vh, 48px) !important; }
.auth-mobile-logo { display: none; text-align: center; margin-bottom: clamp(10px, 2.5vh, 24px); }
.auth-mobile-logo img { max-height: clamp(36px, 6vh, 48px); max-width: 220px; }
.auth-mobile-tag { display: none; text-align: center; margin-bottom: 10px; }

.auth-welcome-title { font-size: clamp(1.2rem, 1rem + 0.6vh, 1.5rem); font-weight: 700; margin-bottom: 4px; }
.auth-welcome-sub { color: #6b7280; font-size: 0.92rem; margin-bottom: clamp(12px, 3vh, 24px); }

.auth-input-group { position: relative; }
.auth-input-group > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #9ca3af; font-size: 0.95rem; pointer-events: none;
}
.auth-input-group .form-control { padding-left: 40px; }
.auth-input-group:has(.toggle-password-text) .form-control { padding-right: 52px; }
.auth-input-group .toggle-password-text {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ma-accent, #2271b1);
  font-size: 0.82rem; font-weight: 600; padding: 4px 2px; cursor: pointer;
}
.auth-input-group .toggle-password-text:hover { text-decoration: underline; }

/* ============================================================
   Responsive: main app layout (sidebar, topbar, content).
   Mirrors the same approach already proven in Repair POS - a
   fixed off-canvas sidebar below 991px, toggled by a burger
   button, with a tap-to-close backdrop.
   ============================================================ */
@media (max-width: 991px) {
  .ma-sidebar {
    position: fixed;
    left: calc(-1 * var(--ma-sidebar-width) - 20px);
    top: 0;
    height: 100vh;
    z-index: 1050;
    transition: left 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }
  .ma-sidebar.open { left: 0; }
  .ma-sidebar-burger { display: flex; align-items: center; justify-content: center; }

  body.ma-scroll-locked { overflow: hidden; }

  .ma-topbar { padding: 10px 14px; gap: 10px; }
  .ma-topbar-title { font-size: 1rem; }
  .ma-content { padding: 14px; }
  .ma-footer { padding: 12px 14px !important; }

  /* Page header rows (title + action buttons) wrap instead of
     overflowing or squeezing buttons unreadably thin */
  .ma-content > .d-flex.justify-content-between {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .ma-content > .d-flex.justify-content-between > h3 {
    width: 100%;
  }

  /* Card padding: still comfortable, not oversized on a small screen */
  .card.p-4 { padding: 1.1rem !important; }
  .card.p-5 { padding: 1.25rem !important; }

  /* Touch targets */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }

  /* Stat-card / summary rows: force to a stacked single column below
     tablet width for anywhere still using bare .row > .col-md-* (some
     of this app's cards were built without a matching sm/xs class) */
  .row.g-3 > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 575px) {
  .ma-content { padding: 10px; }
  .auth-tagline { font-size: 1.5rem; }
}

/* ============================================================
   Spacing fixes: several page layouts had elements sitting flush
   against each other (cards immediately touching, table filter rows
   with no breathing room below the page title). Consistent vertical
   rhythm applied here rather than patched per-page, so it holds for
   any new page built with these same standard classes.
   ============================================================ */
.ma-content > .card + .card { margin-top: 1rem; }
.ma-content > .d-flex.justify-content-between:first-child { margin-bottom: 1.25rem; }
.card.p-3.mb-3 + .card,
.card.p-4 + .card { margin-top: 1rem; }
.table-responsive { margin-bottom: 0; }
.card .table-responsive + * { margin-top: 0.75rem; }

@media (max-width: 900px) {
  .auth-panel-brand { display: none; }
  .auth-panel-form { flex: 1 1 100%; max-width: 100%; }
  .auth-mobile-logo { display: block; }
  .auth-mobile-tag { display: block; }
}

/* Extreme-case safety net only - fluid sizing above already handles
   the vast majority of narrow/short combinations smoothly. */
@media (max-height: 420px) {
  .auth-feature-list li:nth-child(n+5) { display: none; }
  .auth-brand-footer { display: none; }
}

/* ============================================================
   Plan "poster" cards - taller, with the full included-module
   list shown rather than just a count.
   ============================================================ */
.plan-poster-card {
  min-height: 640px;
}
.plan-module-list-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--ma-border, #dde4ee);
  padding-top: 10px;
  margin-bottom: 6px;
}
.plan-module-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.84rem;
  max-height: 400px;
  overflow-y: auto;
}
.plan-module-list li {
  padding: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan-module-list li i {
  color: #16a34a;
  flex-shrink: 0;
}

/* ============================================================
   Dark mode - a personal, per-browser preference toggled from the
   topbar (cookie-based, see maThemeToggle JS), separate from any
   shop's own branding. The sidebar is already dark by design in both
   modes, so only the topbar/content/cards/tables/forms need
   overriding here - same split as Repair POS's own dark mode.

   Contrast kept deliberately high throughout: body text on dark
   backgrounds targets #e8eaed on #1a1d21 (~13:1, well past the 4.5:1
   AA minimum for normal text), and muted/secondary text uses #a8adb5
   rather than a dimmer gray, since secondary text is exactly the
   content most likely to become unreadable first if pushed too dark.
   ============================================================ */
body.ma-theme-dark {
  background-color: #14171a;
  color: #e8eaed;
}
body.ma-theme-dark .ma-topbar {
  background: #1c2024;
  border-color: #33383d;
}
body.ma-theme-dark .ma-topbar-title { color: #e8eaed; }
body.ma-theme-dark .ma-sidebar-burger,
body.ma-theme-dark .ma-topbar-icon-btn { color: #e8eaed; border-color: #43494f; }
body.ma-theme-dark .ma-topbar-icon-btn:hover,
body.ma-theme-dark .ma-account-btn:hover { background: #262b30; }
body.ma-theme-dark .ma-account-btn { color: #e8eaed; border-color: #43494f; }

body.ma-theme-dark .ma-content { background: transparent; }

body.ma-theme-dark .card {
  background-color: #1c2024;
  border-color: #33383d;
  color: #e8eaed;
}
body.ma-theme-dark .text-muted { color: #a8adb5 !important; }
body.ma-theme-dark h1, body.ma-theme-dark h2, body.ma-theme-dark h3,
body.ma-theme-dark h4, body.ma-theme-dark h5, body.ma-theme-dark h6 { color: #f1f2f4; }
body.ma-theme-dark p, body.ma-theme-dark label, body.ma-theme-dark span,
body.ma-theme-dark div { color: inherit; }

body.ma-theme-dark .table { color: #e8eaed; border-color: #33383d; }
body.ma-theme-dark .table > :not(caption) > * > * {
  background-color: #1c2024;
  color: #e8eaed;
  border-bottom-color: #33383d;
  box-shadow: none;
}
body.ma-theme-dark .table-hover > tbody > tr:hover > * { background-color: #262b30; }
body.ma-theme-dark .table thead th { background-color: #22262b; color: #f1f2f4; }
body.ma-theme-dark .table-responsive { border-color: #33383d; }

body.ma-theme-dark .form-control,
body.ma-theme-dark .form-select {
  background-color: #22262b;
  border-color: #43494f;
  color: #e8eaed;
}
body.ma-theme-dark .form-control:focus,
body.ma-theme-dark .form-select:focus {
  background-color: #22262b;
  color: #e8eaed;
  border-color: var(--ma-accent, #2271b1);
}
body.ma-theme-dark .form-control::placeholder { color: #7d8590; }
body.ma-theme-dark .form-control:disabled,
body.ma-theme-dark .form-select:disabled { background-color: #1a1d21; color: #7d8590; }
body.ma-theme-dark .form-label { color: #d5d8dc; }
body.ma-theme-dark .form-text { color: #a8adb5; }
body.ma-theme-dark .form-check-label { color: #d5d8dc; }
body.ma-theme-dark .input-group-text { background-color: #262b30; border-color: #43494f; color: #d5d8dc; }

body.ma-theme-dark .btn-outline-secondary { color: #d5d8dc; border-color: #5a6068; }
body.ma-theme-dark .btn-outline-secondary:hover { background-color: #33383d; color: #f1f2f4; }
body.ma-theme-dark .btn-light { background-color: #262b30; border-color: #43494f; color: #e8eaed; }
body.ma-theme-dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

body.ma-theme-dark .dropdown-menu {
  background-color: #22262b;
  border-color: #43494f;
}
body.ma-theme-dark .dropdown-item { color: #e8eaed; }
body.ma-theme-dark .dropdown-item:hover,
body.ma-theme-dark .dropdown-item:focus { background-color: #2c3136; color: #f1f2f4; }
body.ma-theme-dark .dropdown-item-text { color: #a8adb5; }
body.ma-theme-dark .dropdown-divider { border-color: #43494f; }

body.ma-theme-dark .modal-content {
  background-color: #1c2024;
  color: #e8eaed;
}
body.ma-theme-dark .modal-header,
body.ma-theme-dark .modal-footer { border-color: #33383d; }

body.ma-theme-dark .alert-info { background-color: #14313f; border-color: #1c4a5e; color: #b6e3f5; }
body.ma-theme-dark .alert-warning { background-color: #3d3212; border-color: #5c4a1a; color: #f5dfa3; }
body.ma-theme-dark .alert-danger { background-color: #3d1616; border-color: #5c1f1f; color: #f5a3a3; }
body.ma-theme-dark .alert-success { background-color: #123d1e; border-color: #1a5c2c; color: #a3f5b8; }

body.ma-theme-dark .badge.bg-light { background-color: #33383d !important; color: #e8eaed !important; }
body.ma-theme-dark .border { border-color: #33383d !important; }
body.ma-theme-dark hr { border-color: #33383d; opacity: 1; }
body.ma-theme-dark a:not(.btn):not(.ma-nav-link):not(.dropdown-item) { color: #6fb3e0; }
body.ma-theme-dark code { color: #f5a3d0; background-color: #262b30; }

body.ma-theme-dark .auth-form-box .card { background-color: #1c2024; }

body.ma-theme-dark .ma-footer {
  background: #1c2024;
  color: #a8adb5;
  border-color: #33383d;
}

/* .btn-outline-primary hardcodes near-black text (#030625, the brand
   navy) for contrast on a light background - invisible against a
   dark card. Kept the accent-colored border, just fixed the text. */
body.ma-theme-dark .btn-outline-primary { color: #e8eaed; }
body.ma-theme-dark .btn-outline-primary:hover { color: var(--ma-on-accent); }
body.ma-theme-dark .stat-card h2,
body.ma-theme-dark .stat-card h3,
body.ma-theme-dark .stat-card h4 { color: #f1f2f4; }