:root {
  /* Global Design Tokens */
  --leos-base-color: #ffffff;

  --leos-surface-bg: #ffffff;
  --leos-app-bg: #f8f8f8;
  --leos-heading-color: #000000;
  --leos-body-color: #6e6b7b;
  --leos-muted-color: #b9b9c3;
  --leos-border-color: #ebe9f1;
  --leos-card-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  --leos-menu-bg: #ffffff;

  --leos-primary-color: #7367f0;
  --leos-bg-secondary: #82868b;
  --leos-bg-success: #28C76F;
  --leos-bg-warning: #FF9F43;
  --leos-bg-danger: #EA5455;
  --leos-bg-info: #00cfe8;
  --leos-bg-light: #f8f8f8;
  --leos-bg-dark: #283046;
  --leos-bg-pagination: #242b3d;
  --leos-other-dark: #4b4b4b;
  --leos-other-dark2: #000000;

  /* Bootstrap Alias Mapping */
  --bs-primary: var(--leos-primary-color);
  --bs-body-bg: var(--leos-app-bg);
  --bs-body-color: var(--leos-body-color);
}

.dark-layout {
    --leos-base-color: #ffffff;
    --leos-surface-bg: #283046;
    --leos-app-bg: #161d31;
    --leos-heading-color: #d0d2d6;
    --leos-body-color: #b4b7bd;
    --leos-muted-color: #676d7d;
    --leos-border-color: #3b4253;
    --leos-card-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.24);
    --leos-menu-bg: #283046;
    --leos-primary-color: #7367f0;
    --leos-bg-secondary: #82868b;
    --leos-bg-success: #28C76F;
    --leos-bg-warning: #FF9F43;
    --leos-bg-danger: #EA5455;
    --leos-bg-info: #00cfe8;
    --leos-bg-light: #f8f8f8;
    --leos-bg-dark: #262d40;
    --leos-bg-pagination: #242b3d;
    --leos-other-dark: #4b4b4b;
    --leos-other-dark2: #000000;
    --bs-primary: var(--leos-primary-color);
    --bs-body-bg: var(--leos-app-bg);
    --bs-body-color: var(--leos-body-color);
}


.bordered-layout {
  --leos-card-shadow: none;
  --leos-border-color: #ebe9f1;
}

/* Base Style Overrides using Central Tokens */
body {
  background-color: var(--leos-app-bg) !important;
  color: var(--leos-body-color);
}

.card {
  background-color: var(--leos-surface-bg) !important;
  border-color: var(--leos-border-color) !important;
  box-shadow: var(--leos-card-shadow) !important;
}

.header-navbar {
  background-color: var(--leos-surface-bg) !important;
}

.main-menu,
.main-menu.menu-light,
.main-menu.menu-dark,
.main-menu.menu-light .navigation,
.main-menu.menu-dark .navigation {
  background-color: var(--leos-menu-bg) !important;
  background: var(--leos-menu-bg) !important;
}

.table {
  color: var(--leos-body-color) !important;
  border-color: var(--leos-border-color) !important;
}

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

.btn-primary {
  background-color: var(--leos-primary-color) !important;
  border-color: var(--leos-primary-color) !important;
}

.bg-primary {
  background-color: var(--leos-primary-color) !important;
}

.bg-secondary {
  background-color: var(--leos-bg-secondary) !important;
}

.bg-success {
  background-color: var(--leos-bg-success) !important;
}

.bg-warning {
  background-color: var(--leos-bg-warning) !important;
}

.bg-danger {
  background-color: var(--leos-bg-danger) !important;
}

.bg-info {
  background-color: var(--leos-bg-info) !important;
}

.list-group-item.active {
  color: var(--leos-base-color);
  background-color: var(--leos-primary-color);
  border-color: var(--leos-primary-color);
}

.page-item.active .page-link {
  background-color: var(--leos-primary-color);
  color: var(--leos-base-color) !important;
}

#MesajBody {
  border: 1px solid var(--leos-border-color) !important;
  background-color: var(--leos-app-bg) !important;
}

.form-control {
  color: var(--leos-body-color) !important;
  background-color: var(--leos-surface-bg) !important;
  border: 1px solid var(--leos-border-color) !important;
}

.modul-plan-card .modul-plan-item {
  border: 1px solid var(--leos-border-color) !important;
  background-color: var(--leos-surface-bg) !important;
}

.modul-plan-rbl input[type="radio"]+label {
  border: 1px solid var(--leos-border-color) !important;
}