:root {
  --brand: #1f7a55;
  --brand-2: #0f3d2e;
  --bg: #f7f7f5;
  --panel: #ffffff;
  --text: #1d2329;
  --muted: #667085;
  --border: #e6e8eb;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
}

body {
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.content-wrapper {
  background: var(--bg);
}

.main-header .logo,
.main-header .navbar,
.main-sidebar {
  background: #111827;
}

.main-header .logo,
.main-header .navbar .sidebar-toggle,
.main-header .navbar .nav > li > a {
  color: #f9fafb;
}

.main-sidebar .user-panel > .info,
.main-sidebar .user-panel > .info > a,
.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
  color: #d0d5dd;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li > a:hover,
.sidebar-menu .treeview-menu > li > a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.navbar-custom-menu > .navbar-nav > li > a {
  color: #f9fafb;
}

.login-page {
  background: linear-gradient(180deg, #f7f7f5 0%, #eef2f0 100%);
}

.login-box {
  width: 420px;
}

.login-box-body {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 32px;
}

.login-logo a {
  color: var(--brand);
  font-weight: 700;
}

.login-title {
  color: var(--brand);
  margin-top: 8px;
}

.form-control {
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn {
  border-radius: 10px;
}

.btn-success {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-success:hover,
.btn-success:focus {
  background: #176445;
  border-color: #176445;
}

.btn-warning {
  background: #f3b62b;
  border-color: #f3b62b;
}

.small-box {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.small-box .icon {
  color: var(--brand);
  opacity: 0.2;
}

.small-box.bg-red { border-left-color: #d92d20; }
.small-box.bg-green { border-left-color: #12b76a; }
.small-box.bg-yellow { border-left-color: #f79009; }
.small-box.bg-aqua { border-left-color: #2e90fa; }

.small-box .small-box-footer {
  color: var(--muted);
  background: transparent;
}

.box,
.info-box,
.nav-tabs-custom,
.box-primary {
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.content-header > h1 {
  font-weight: 700;
  color: var(--text);
}

.breadcrumb > li > a {
  color: var(--muted);
}

.main-footer {
  background: var(--panel);
  border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
  .login-box {
    width: 90%;
    margin: 7% auto;
  }
}