:root {
  --ak-body-bg: #ffffff;
  --ak-card-bg: #ffffff;
  --ak-sidebar-bg: #231f20;
  --ak-sidebar-hover: #1a1718;
  --ak-sidebar-active: #3992cf;
  --ak-topbar-bg: #ffffff;
  --ak-text: #231f20;
  --ak-muted: #5e5a5b;
  --ak-border: #d9d9d9;
  --ak-primary: #3992cf;
  --ak-success: #3992cf;
  --ak-warning: #ee2924;
  --ak-danger: #ee2924;
  --ak-info: #3992cf;
  --ak-radius: 0.5rem;
  --ak-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 0.35rem 0.75rem rgba(58, 79, 120, 0.08);
}

body.app-theme {
  background: var(--ak-body-bg);
  color: var(--ak-text);
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.navbar.fixed-top {
  background: var(--ak-topbar-bg);
  border-bottom: 1px solid var(--ak-border);
  box-shadow: 0 1px 4px rgba(35, 31, 32, 0.08);
}

.navbar .nav-link,
.navbar .navbar-brand-wrapper .nav-link {
  color: var(--ak-text) !important;
}

.sidebar {
  background: var(--ak-sidebar-bg) !important;
}

.sidebar .nav .nav-item .nav-link {
  color: rgba(233, 239, 250, 0.86) !important;
  border-radius: 0.35rem;
  margin: 0.12rem 0.55rem;
}

.sidebar .nav .nav-item .nav-link:hover {
  background: var(--ak-sidebar-hover) !important;
  color: #fff !important;
}

.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link.active {
  background: var(--ak-sidebar-active) !important;
  color: #fff !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
  padding-left: 1rem;
  color: rgba(233, 239, 250, 0.8) !important;
}

.main-panel .content-wrapper {
  background: var(--ak-body-bg);
}

.card {
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
}

.card .card-title {
  color: var(--ak-text);
  font-weight: 600;
}

.text-muted,
.card-description {
  color: var(--ak-muted) !important;
}

.btn {
  border-radius: 0.38rem !important;
  font-weight: 500;
}

.btn-primary,
.btn-outline-primary:hover {
  background-color: var(--ak-primary) !important;
  border-color: var(--ak-primary) !important;
}

.btn-success,
.btn-outline-success:hover {
  background-color: var(--ak-success) !important;
  border-color: var(--ak-success) !important;
}

.btn-warning,
.btn-outline-warning:hover {
  background-color: var(--ak-warning) !important;
  border-color: var(--ak-warning) !important;
  color: #1d2430 !important;
}

.btn-danger,
.btn-outline-danger:hover {
  background-color: var(--ak-danger) !important;
  border-color: var(--ak-danger) !important;
}

.btn-info,
.btn-outline-info:hover {
  background-color: var(--ak-info) !important;
  border-color: var(--ak-info) !important;
}

.form-control,
.typeahead,
select.form-control {
  border: 1px solid #d9e2ef;
  border-radius: 0.35rem !important;
  box-shadow: none !important;
  color: var(--ak-text);
}

.form-control:focus,
.typeahead:focus,
select.form-control:focus {
  border-color: #3992cf;
  box-shadow: 0 0 0 0.12rem rgba(57, 146, 207, 0.2) !important;
}

.table {
  color: var(--ak-text);
}

.table thead th {
  border-bottom: 1px solid var(--ak-border);
  background: #f7fbfe;
  font-weight: 600;
  color: #231f20;
}

.table-bordered td,
.table-bordered th {
  border-color: var(--ak-border) !important;
}

.alert {
  border: 0;
  border-radius: 0.45rem;
}

.badge {
  border-radius: 0.3rem;
  font-weight: 600;
}

.footer {
  background: #fff;
  border-top: 1px solid var(--ak-border);
}

.card.card-dark-blue,
.card.card-tale,
.card.card-light-blue,
.card.card-light-danger {
  color: #fff;
  border: 0;
}

.card.card-dark-blue { background: linear-gradient(135deg, #231f20, #3a3436); }
.card.card-tale { background: linear-gradient(135deg, #3992cf, #2f7db2); }
.card.card-light-blue { background: linear-gradient(135deg, #58a7de, #3992cf); }
.card.card-light-danger { background: linear-gradient(135deg, #ee2924, #c7221e); }

.jbms-command-box {
  border: 1px solid var(--ak-border);
  border-radius: 0.5rem;
  box-shadow: var(--ak-shadow);
}

.jbms-command-item {
  display: block;
  padding: 0.55rem 0.75rem;
  color: var(--ak-text);
  border-bottom: 1px solid var(--ak-border);
}

.jbms-command-item:hover {
  background: #f2f8fc;
  text-decoration: none;
}