:root {
  --main-bg: #AA22D1;
  --main-bg-dark: #8B1AAF;
  --sidebar-bg: #AA22D1;
  --sidebar-hover: #8B1AAF;
  --navbar-bg: #AA22D1;
  --navbar-color: #ffffff;
  --button-primary: #732287;
  --button-primary-hover: #5a116d;
  --button-danger: #FF6B81;
  --button-info: #44BFC8;
  --button-warning: #FFC75F;
  --button-default: #f4f4f4;
  --content-bg: #FAF5FF;
  --text-default: #333;
}

/* Navbar */
.main-header .navbar {
  background-color: var(--navbar-bg) !important;
  color: var(--navbar-color);
}
.main-header .logo {
  background-color: var(--text-default) !important;
  color: var(--navbar-color);
}

/* Sidebar */
.main-sidebar, .left-side {
  background-color: var(--sidebar-bg) !important;
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
  background-color: var(--sidebar-hover) !important;
}

/* Content background */
.content-wrapper {
  background-color: var(--content-bg);
}

/* Buttons */
.btn-primary {
  background-color: var(--button-primary);
  border-color: var(--button-primary-hover);
}
.btn-primary:hover {
  background-color: var(--button-primary-hover);
}

.btn-danger {
  background-color: var(--button-danger);
  border-color: darkred;
}

.btn-info {
  background-color: var(--button-info);
}

.btn-warning {
  background-color: var(--button-warning);
}

.btn-default {
  background-color: var(--button-default);
  color: var(--text-default);
}

/* Box header */
.box-primary {
  border-top-color: var(--main-bg);
}
.box.box-primary > .box-header {
  background-color: var(--main-bg);
  color: white;
}

/* ======================== TOMBOL ======================== */
/* PRIMARY */
.btn-primary {
  background-color: var(--button-primary);
  border-color: var(--button-primary-hover);
  color: #fff;
  border: 1px solid #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--button-primary-hover);
  border: 1px solid #fff;
}

/* DANGER */
.btn-danger {
  background-color: var(--button-danger);
  border-color: darken(var(--button-danger), 10%);
  color: #fff;
}

/* INFO */
.btn-info {
  background-color: var(--button-info);
  border-color: var(--button-info);
  color: #fff;
}

/* WARNING */
.btn-warning {
  background-color: var(--button-warning);
  border-color: var(--button-warning);
  color: #fff;
}

/* DEFAULT */
.btn-default {
  background-color: var(--button-default);
  border-color: #ddd;
  color: var(--text-default);
}
.btn-default:hover {
  background-color: #eaeaea;
}

/* ======================== CSS LOGIN PAGE ===================== */
/* Login box wrapper */
.login-box {
  border: 3px solid var(--main-bg);
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 5px solid var(--main-bg);
}

/* Login logo title */
.login-logo b {
  color: var(--main-bg);
  font-size: 24pt;
}
.login-logo p {
  font-size: 10pt;
  margin-top: -10px;
  color: var(--text-default);
}

/* Tombol Login */
.btn-primary {
  background-color: var(--button-primary);
  border-color: var(--button-primary-hover);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
}

/* Tombol Default (link bawah) */
.btn-default {
  background-color: var(--button-default);
  color: var(--text-default);
}

/* Fokus input: ungu */
.form-control:focus {
  border-color: var(--main-bg);
  box-shadow: 0 0 6px var(--main-bg);
}