/*
* Tema MGMP - Warna Biru Muda
* File ini berisi override CSS untuk mengubah tema dari hijau ke biru muda
*/

/* Warna utama MGMP */
:root {
  --mgmp-primary: #4A90E2;
  --mgmp-secondary: #7BB3F0;
  --mgmp-accent: #FFC107;
  --mgmp-light: #F8FBFF;
  --mgmp-dark: #2C5AA0;
  --mgmp-text: #FFFFFF;
  --mgmp-text-dark: #333333;
}

/* Override untuk navbar */
.skin-dark .main-header .navbar {
  background-color: var(--mgmp-primary) !important;
}

/* Override untuk sidebar */
.skin-dark .wrapper,
.skin-dark .main-sidebar,
.skin-dark .left-side {
  background-color: var(--mgmp-dark) !important;
}

/* Override untuk logo */
.skin-dark .main-header .logo {
  background-color: var(--mgmp-dark) !important;
}

.skin-dark .main-header .logo:hover {
  background-color: var(--mgmp-dark) !important;
}

/* Override untuk menu aktif */
.skin-dark .sidebar-menu > li:hover > a,
.skin-dark .sidebar-menu > li.active > a {
  background: var(--mgmp-primary) !important;
  border-left-color: var(--mgmp-accent) !important;
}

/* Override untuk dropdown menu */
.skin-dark .sidebar-menu > li > .treeview-menu {
  background: #1E4A7A !important;
}

.skin-dark .sidebar-menu > li.header {
  background: #1E4A7A !important;
}

/* Override untuk content wrapper */
.content-wrapper, .right-side {
  background-color: var(--mgmp-light) !important;
}

/* Override untuk modal header */
.modal-header {
  background-color: var(--mgmp-primary) !important;
}

/* Override untuk icon header */
.skin-dark .content-header .header-icon {
  color: var(--mgmp-primary) !important;
}

/* Override untuk body background */
body {
  background-color: var(--mgmp-light) !important;
}

/* Override untuk tombol primary */
.btn-primary {
  background-color: var(--mgmp-primary) !important;
  border-color: var(--mgmp-primary) !important;
}

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

/* Override untuk link */
a {
  color: var(--mgmp-primary);
}

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

/* Override untuk card header */
.card-header {
  background-color: var(--mgmp-primary) !important;
  color: var(--mgmp-text) !important;
}

/* Override untuk alert info */
.alert-info {
  background-color: var(--mgmp-light) !important;
  border-color: var(--mgmp-primary) !important;
  color: var(--mgmp-text-dark) !important;
}

/* Override untuk badge */
.badge-primary {
  background-color: var(--mgmp-primary) !important;
}

/* Override untuk progress bar */
.progress-bar {
  background-color: var(--mgmp-primary) !important;
}

/* Override untuk pagination */
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--mgmp-primary) !important;
  border-color: var(--mgmp-primary) !important;
}

/* Override untuk table header */
.table > thead > tr > th {
  background-color: var(--mgmp-light) !important;
  border-color: var(--mgmp-primary) !important;
}

/* Override untuk form focus */
.form-control:focus {
  border-color: var(--mgmp-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25) !important;
}

/* Override untuk select2 */
.select2-container--default .select2-selection--single:focus {
  border-color: var(--mgmp-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--mgmp-primary) !important;
}

/* Override untuk checkbox dan radio */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--mgmp-primary);
}

/* Override untuk loading spinner */
.loading {
  border-color: var(--mgmp-primary) !important;
  border-top-color: transparent !important;
}

/* Override untuk toast notifications */
.toast-info {
  background-color: var(--mgmp-primary) !important;
}

/* Override untuk tooltip */
.tooltip-inner {
  background-color: var(--mgmp-primary) !important;
}

.tooltip.top .tooltip-arrow {
  border-top-color: var(--mgmp-primary) !important;
}

/* Override untuk popover */
.popover-header {
  background-color: var(--mgmp-primary) !important;
  color: var(--mgmp-text) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .skin-dark .main-header .navbar .dropdown-menu li a:hover {
    background: var(--mgmp-primary) !important;
  }
}