@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --sl-bg-1: #08111f;
  --sl-bg-2: #0b1a33;
  --sl-bg-3: #0e2445;
  --sl-shell: rgba(9, 20, 36, 0.88);
  --sl-card: rgba(13, 27, 49, 0.86);
  --sl-border: rgba(114, 168, 255, 0.24);
  --sl-text: #edf4ff;
  --sl-muted: #95adcb;
  --sl-accent: #2f8bff;
  --sl-accent-2: #18c2ff;
  --sl-success: #1fd4b4;
  --sl-shadow: 0 20px 56px rgba(2, 8, 20, 0.46);
}

body[data-theme='light'],
body.light-mode,
html[data-theme='light'] body {
  --sl-bg-1: #f4f8ff;
  --sl-bg-2: #ecf3ff;
  --sl-bg-3: #fbfdff;
  --sl-shell: rgba(255, 255, 255, 0.94);
  --sl-card: rgba(255, 255, 255, 0.94);
  --sl-border: rgba(57, 106, 181, 0.2);
  --sl-text: #122742;
  --sl-muted: #5f7898;
  --sl-shadow: 0 14px 38px rgba(28, 65, 117, 0.16);
}

html,
body {
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-text,
.sidebar-brand,
.sidebar-brand a,
.auth-navbar .brand {
  font-family: 'Outfit', sans-serif !important;
}

body {
  background:
    radial-gradient(920px 440px at -14% -14%, rgba(47, 139, 255, 0.26), transparent 62%),
    radial-gradient(1020px 480px at 112% 0%, rgba(24, 194, 255, 0.18), transparent 64%),
    linear-gradient(145deg, var(--sl-bg-1) 0%, var(--sl-bg-2) 52%, var(--sl-bg-3) 100%) !important;
  color: var(--sl-text) !important;
}

.public-topbar,
.top-bar,
.top-nav,
.auth-navbar {
  background: var(--sl-shell) !important;
  border-bottom: 1px solid var(--sl-border) !important;
  backdrop-filter: blur(14px) saturate(120%);
}

.sidebar,
.card,
.auth-card,
.section-shell,
.stat-card,
.public-mobile-bottom-nav,
.auth-mobile-bottom-nav,
.mobile-bottom-nav,
.offcanvas,
.accordion-item,
.table,
.table-responsive,
footer {
  background: var(--sl-card) !important;
  border-color: var(--sl-border) !important;
  box-shadow: var(--sl-shadow);
}

footer {
  background: linear-gradient(180deg, rgba(9, 22, 40, 0.9), rgba(12, 29, 51, 0.92)) !important;
}

body[data-theme='light'] footer,
body.light-mode footer,
html[data-theme='light'] body footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 246, 255, 0.98)) !important;
}

.brand-wrap,
.sidebar-brand a,
.auth-navbar .brand {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-mark,
.sidebar-brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(47, 139, 255, 0.3);
  background: linear-gradient(140deg, rgba(47, 139, 255, 0.2), rgba(24, 194, 255, 0.14)) !important;
}

.brand-mark img,
.sidebar-brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-text,
.sidebar-brand__wordmark {
  color: var(--sl-text) !important;
  fill: var(--sl-text) !important;
}

.btn-cta,
.btn-accent,
.btn-primary,
button.btn-primary,
button.btn-accent {
  background: linear-gradient(135deg, var(--sl-accent), var(--sl-accent-2)) !important;
  border-color: transparent !important;
  color: #f6fbff !important;
  font-weight: 700 !important;
}

.btn-ghost,
.btn-outline-primary,
.icon-pill,
.auth-theme-btn,
#themeToggle,
#adminThemeToggle,
#public-theme-toggle {
  border-color: var(--sl-border) !important;
  color: var(--sl-text) !important;
  background: rgba(9, 29, 54, 0.35) !important;
}

body[data-theme='light'] .btn-ghost,
body[data-theme='light'] .btn-outline-primary,
body.light-mode .btn-ghost,
body.light-mode .btn-outline-primary,
html[data-theme='light'] body .btn-ghost,
html[data-theme='light'] body .btn-outline-primary,
body[data-theme='light'] .icon-pill,
body.light-mode .icon-pill,
html[data-theme='light'] body .icon-pill {
  background: rgba(231, 239, 255, 0.72) !important;
}

.nav-link.active,
.sidebar .nav-link.active,
.sidebar .nav-link:hover,
.public-nav-links a:hover,
.public-nav-links a.is-active {
  background: linear-gradient(90deg, rgba(47, 139, 255, 0.22), rgba(24, 194, 255, 0.12)) !important;
  border-left: 0 !important;
  color: var(--sl-text) !important;
}

.form-control,
.form-select,
.input-group-text,
textarea {
  background: rgba(10, 30, 55, 0.62) !important;
  border-color: var(--sl-border) !important;
  color: var(--sl-text) !important;
}

body[data-theme='light'] .form-control,
body[data-theme='light'] .form-select,
body[data-theme='light'] .input-group-text,
body[data-theme='light'] textarea,
body.light-mode .form-control,
body.light-mode .form-select,
body.light-mode .input-group-text,
body.light-mode textarea,
html[data-theme='light'] body .form-control,
html[data-theme='light'] body .form-select,
html[data-theme='light'] body .input-group-text,
html[data-theme='light'] body textarea {
  background: rgba(248, 251, 255, 0.95) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--sl-accent) !important;
  box-shadow: 0 0 0 0.18rem rgba(47, 139, 255, 0.24) !important;
}

.text-muted,
small,
.form-text,
.sidebar .nav-section__title,
.public-utc-strip,
.footer-title {
  color: var(--sl-muted) !important;
}

.wa-support-prompt {
  border: 1px solid var(--sl-border) !important;
  background: linear-gradient(150deg, rgba(11, 30, 54, 0.96), rgba(15, 39, 71, 0.92)) !important;
}

.wa-support-prompt__badge,
.badge,
.badge-status-active,
.badge-status-pending,
.badge-status-completed {
  border: 1px solid rgba(47, 139, 255, 0.34) !important;
  background: rgba(47, 139, 255, 0.18) !important;
  color: #dcebff !important;
}

.table {
  color: var(--sl-text) !important;
}

@media (max-width: 768px) {
  .brand-text {
    font-size: 0.92rem !important;
  }

  .card,
  .auth-card,
  .section-shell,
  .stat-card {
    border-radius: 14px !important;
  }
}