:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #475569;
  --border: #e2e8f0;
  --primary: #0ea5e9;
  --primary-strong: #0284c7;
  --accent: #f97316;
  --accent-strong: #ea580c;
}

body {
  background-color: var(--bg);
  color: var(--text);
}

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

a:hover,
a:focus {
  color: #0369a1;
}

.content-wrapper,
.right-side {
  background: var(--bg);
  color: var(--text);
}

/* Header */
.skin-blue .main-header .logo {
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
}

.skin-blue .main-header .logo:hover {
  background: var(--primary);
  color: #ffffff;
}

.skin-blue .main-header .navbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: var(--muted);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background: rgba(14, 165, 233, 0.12);
  color: var(--text);
}

.navbar-custom-menu > .navbar-nav > li > a {
  color: var(--muted);
}

.navbar-custom-menu > .navbar-nav > li > a:hover,
.navbar-custom-menu > .navbar-nav > li.open > a {
  background: rgba(14, 165, 233, 0.12);
  color: var(--text);
}

.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

.navbar-custom-menu > .navbar-nav > .user-menu > .dropdown-menu > li.user-body a {
  background: var(--primary);
  border: none;
  color: #ffffff;
}

/* Sidebar */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: #eef2f7;
}

.skin-blue .sidebar a {
  color: var(--muted);
}

.skin-blue .sidebar-menu > li > a:hover {
  background: rgba(14, 165, 233, 0.12);
  color: var(--text);
}

.skin-blue .sidebar-menu > li.active > a {
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
}

.skin-blue .sidebar-menu > li.active > a .fa,
.skin-blue .sidebar-menu > li.active > a .ion {
  color: #ffffff;
}

.skin-blue .sidebar-menu > li:hover > a .fa,
.skin-blue .sidebar-menu > li:hover > a .ion {
  color: var(--primary);
}

.skin-blue .treeview-menu {
  background: #f8fafc;
  border-left: 1px solid var(--border);
}

.skin-blue .treeview-menu > li > a {
  color: var(--muted);
}

.skin-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a {
  background: rgba(14, 165, 233, 0.12);
  color: var(--text);
}

/* Boxes and tables */
.box {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.box.box-primary {
  border-top-color: var(--primary);
}

.box-header .box-title {
  color: var(--text);
}

.table > thead > tr > th {
  color: var(--muted);
  border-bottom-color: var(--border);
  background: #f8fafc;
}

.table > tbody > tr > td {
  border-top-color: var(--border);
  color: var(--text);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(14, 165, 233, 0.04);
}

.label-primary,
.badge-primary {
  background: var(--primary);
}

.label-success,
.badge-success {
  background: var(--accent);
}

/* Forms */
.form-control {
  background: #f8fafc;
  border-color: var(--border);
  color: var(--text);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.35);
}

.input-group-addon {
  background: #e2e8f0;
  border-color: var(--border);
  color: var(--muted);
}

/* Buttons */
.btn-primary,
.btn-info {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

.btn-default {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: var(--text);
}

.btn-warning {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
  background: #ffffff;
  border-color: var(--border);
  color: var(--muted);
}

.pagination > li > a:hover,
.pagination > li.active > a,
.pagination > li.active > span {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* Login */
.login-page,
.register-page {
  background: radial-gradient(140% 140% at 10% 10%, #e2f3ff 0, #f5f7fb 45%, #eef2f7 100%);
  color: var(--text);
}

.login-page #back {
  filter: saturate(1) brightness(1);
  background-blend-mode: screen;
  opacity: 0.15;
}

.login-box .login-box-body,
.register-box .register-box-body {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.login-box-msg,
.register-box-msg {
  color: var(--muted);
}

.login-box-body .form-control,
.register-box-body .form-control {
  background: #f8fafc;
  border-color: var(--border);
  color: var(--text);
}

.login-box-body .form-control:focus,
.register-box-body .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.35);
}

.login-box-body .btn-primary,
.register-box-body .btn-primary {
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.25);
}