:root {
  --app-bg: #f4f7f6;
  --app-surface: #ffffff;
  --app-surface-soft: #eef4f2;
  --app-ink: #16201d;
  --app-muted: #61706b;
  --app-border: #d9e3df;
  --app-primary: #007f73;
  --app-primary-dark: #005f57;
  --app-accent: #d98c00;
  --app-success: #168653;
  --app-danger: #c83d4a;
  --app-sidebar: #132320;
  --app-sidebar-2: #19322d;
  --app-shadow: 0 18px 45px rgba(20, 37, 33, 0.12);
  --app-radius: 8px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body,
body.dark-mode,
body.login-page,
body.register-page {
  background:
    radial-gradient(circle at 15% -10%, rgba(0, 127, 115, 0.16), transparent 32rem),
    linear-gradient(135deg, #f7faf9 0%, var(--app-bg) 58%, #edf3f0 100%) !important;
  color: var(--app-ink) !important;
  font-family: "Source Sans Pro", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0;
}

a {
  color: var(--app-primary);
}

a:hover {
  color: var(--app-primary-dark);
}

.wrapper {
  background: transparent !important;
}

.content-wrapper {
  background: transparent !important;
  color: var(--app-ink) !important;
  padding-bottom: 24px;
}

.content-header {
  padding: 24px 1rem 12px;
}

.content-header h1,
.container h1,
.container h2,
.card-title,
.login-logo a,
.register-logo a {
  color: var(--app-ink) !important;
  letter-spacing: 0;
}

.content-header h1 {
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  font-weight: 800 !important;
}

.text-muted,
.form-text,
small {
  color: var(--app-muted) !important;
}

.text-primary {
  color: var(--app-primary) !important;
}

.text-light,
.text-white {
  color: var(--app-ink) !important;
}

.text-info {
  color: var(--app-primary) !important;
}

.text-secondary {
  color: var(--app-muted) !important;
}

.text-warning {
  color: var(--app-accent) !important;
}

.text-success {
  color: var(--app-success) !important;
}

.text-danger {
  color: var(--app-danger) !important;
}

.main-header.navbar,
.header {
  min-height: 68px;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(217, 227, 223, 0.9) !important;
  color: var(--app-ink) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(20, 37, 33, 0.07);
}

.main-header .nav-link,
.header-title,
.hamburger {
  color: var(--app-ink) !important;
}

.main-sidebar,
.sidebar-dark-primary,
.nav-bar {
  background:
    linear-gradient(180deg, var(--app-sidebar) 0%, var(--app-sidebar-2) 100%) !important;
  color: #f7fbf9 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 16px 0 42px rgba(19, 35, 32, 0.18);
}

.brand-link,
.sidebar .brand-link {
  min-height: 68px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.brand-text {
  color: #ffffff !important;
  font-size: 1.08rem;
  letter-spacing: 0;
}

.main-sidebar .nav-sidebar > .nav-item {
  margin: 2px 10px;
}

.main-sidebar .nav-sidebar .nav-link,
.nav-bar .nav-link {
  min-height: 42px;
  border-radius: var(--app-radius);
  color: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid transparent !important;
}

.main-sidebar .nav-sidebar .nav-link:hover,
.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.nav-bar .nav-link:hover,
.nav-bar .nav-link.active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 3px 0 0 #3dd6c6;
}

.main-sidebar .nav-treeview .nav-link {
  min-height: 36px;
  padding-left: 1rem;
  background: transparent !important;
  font-size: 0.94rem;
}

.nav-header {
  color: rgba(255, 255, 255, 0.46) !important;
  letter-spacing: 0;
}

.card,
.login-card,
.login-box .card,
.register-box .card,
.stat-card,
.result-box,
.stat-box,
table {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  color: var(--app-ink) !important;
  box-shadow: var(--app-shadow) !important;
}

.card {
  overflow: hidden;
}

.card-header {
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%) !important;
  border-bottom: 1px solid var(--app-border) !important;
  color: var(--app-ink) !important;
}

.card-outline.card-primary,
.card-outline.card-success {
  border-top: 4px solid var(--app-primary) !important;
}

.card-outline.card-success {
  border-top-color: var(--app-success) !important;
}

.card-body,
.login-card-body,
.register-card-body {
  background: transparent !important;
  color: var(--app-ink) !important;
}

.service-card {
  min-height: 214px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.service-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 127, 115, 0.42) !important;
  box-shadow: 0 24px 56px rgba(0, 127, 115, 0.18) !important;
}

.service-img,
.icon-wrapper img {
  height: 64px !important;
  width: auto;
  max-width: 92px;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.02);
}

.btn,
.btn-sm,
button.btn,
a.btn {
  border-radius: var(--app-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  box-shadow: none !important;
}

.btn-primary,
.btn-info,
.btn-sm,
.action-btn {
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-sm:hover,
.action-btn:hover {
  background: var(--app-primary-dark) !important;
  border-color: var(--app-primary-dark) !important;
  color: #ffffff !important;
}

.btn-success,
.btn-on {
  background: var(--app-success) !important;
  border-color: var(--app-success) !important;
  color: #ffffff !important;
}

.btn-danger,
.btn-off {
  background: var(--app-danger) !important;
  border-color: var(--app-danger) !important;
  color: #ffffff !important;
}

.btn-outline-light {
  color: var(--app-ink) !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
}

.btn-outline-light:hover {
  background: var(--app-surface-soft) !important;
}

.form-control,
.custom-file-label,
input,
select,
textarea,
.input-group-text {
  background: #ffffff !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-ink) !important;
  border-radius: var(--app-radius) !important;
}

.input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group-append .input-group-text {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 127, 115, 0.14) !important;
}

label {
  color: var(--app-ink) !important;
  font-weight: 700;
}

.placeholder-box,
#initial-placeholder,
#processing-ui,
#success-ui {
  background: var(--app-surface-soft) !important;
  color: var(--app-muted) !important;
  border-color: rgba(0, 127, 115, 0.35) !important;
}

canvas {
  border: 1px solid var(--app-border) !important;
  box-shadow: 0 16px 34px rgba(20, 37, 33, 0.12) !important;
}

.progress {
  background: #dfe8e4 !important;
}

.progress-bar,
.custom-range::-webkit-slider-thumb {
  background-color: var(--app-primary) !important;
}

.alert {
  border-radius: var(--app-radius) !important;
  border: 1px solid transparent !important;
}

.alert-success {
  color: #0d4f33 !important;
  background: #dff3ea !important;
  border-color: #bde5d2 !important;
}

.alert-danger {
  color: #802631 !important;
  background: #fbe4e7 !important;
  border-color: #f4c4cb !important;
}

.user-avatar,
.avatar {
  background: var(--app-primary) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.dropdown-menu {
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-shadow) !important;
}

.main-footer,
footer {
  background: rgba(255, 255, 255, 0.78) !important;
  border-top: 1px solid var(--app-border) !important;
  color: var(--app-muted) !important;
}

.login-page,
.register-page {
  align-items: center;
}

.login-box,
.register-box {
  width: min(420px, calc(100% - 28px));
}

.login-logo,
.register-logo {
  margin-bottom: 18px;
}

.login-logo a,
.register-logo a {
  font-size: 2rem;
  font-weight: 800;
}

.login-box-msg {
  color: var(--app-muted) !important;
  font-weight: 600;
}

.container {
  color: var(--app-ink);
}

.stats-row {
  gap: 18px !important;
}

.stat-card .val,
.val {
  color: var(--app-primary) !important;
}

table {
  overflow: hidden;
}

th {
  background: var(--app-surface-soft) !important;
  color: var(--app-muted) !important;
}

td,
th {
  border-bottom: 1px solid var(--app-border) !important;
  color: var(--app-ink) !important;
}

.badge {
  border-radius: 999px !important;
  padding: 0.35rem 0.65rem !important;
}

.badge-wallet {
  background: rgba(0, 127, 115, 0.11) !important;
  color: var(--app-primary) !important;
}

.badge-active {
  background: rgba(22, 134, 83, 0.12) !important;
  color: var(--app-success) !important;
}

.badge-deactive {
  background: rgba(200, 61, 74, 0.12) !important;
  color: var(--app-danger) !important;
}

hr {
  border-color: var(--app-border) !important;
}

@media (max-width: 991.98px) {
  .content-header {
    padding-top: 18px;
  }

  .content-wrapper {
    padding-bottom: 12px;
  }
}

@media (max-width: 767.98px) {
  .content-header h1 {
    font-size: 1.5rem;
  }

  .card-body {
    padding: 1rem;
  }

  .service-card {
    min-height: 190px;
  }

  .nav-bar {
    box-shadow: 18px 0 48px rgba(19, 35, 32, 0.28);
  }
}