/**
 * Luxury Botanical & Earth Spa Global Theme (LUANG)
 */

:root {
  /* Brand Theme Colors */
  --theme-default: #0d3826 !important;
  --theme-secondary: #c5ab80 !important;
  --primary-color: #0d3826 !important;
  --secondary-color: #c5ab80 !important;
  --rgb-primary: 13, 56, 38 !important;
  --primary-70: rgba(13, 56, 38, 0.7) !important;
  --light-shade-primary: #edf4ee !important;

  /* Global Spa Surfaces & Text */
  --spa-bg: #f5f2ea;
  --spa-card-bg: #FAF7F0;
  --spa-border: #ede7dc;
  --spa-sidebar-bg: #082c1e;
  --spa-sidebar-active: #134430;
  --spa-sidebar-sub: #052015;
  --spa-text-dark: #12221a;
  --spa-text-muted: #6b7a70;
  --spa-primary: #0d3826;
  --spa-primary-hover: #1b5e3f;
  --spa-gold: #c5ab80;
}

/* Base Body & App Wrapper */
body {
  background-color: var(--spa-bg) !important;
  color: var(--spa-text-dark) !important;
  font-family: 'Rubik', sans-serif !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper {
  background-color: var(--spa-bg) !important;
}

.page-body {
  background-color: var(--spa-bg) !important;
}

/* Page Header / Navbar */
.page-header {
  background-color: var(--spa-bg) !important;
  border-bottom: 1px solid var(--spa-border) !important;
  box-shadow: 0 1px 3px rgba(13, 56, 38, 0.03) !important;
}

.page-header .header-wrapper {
  background-color: var(--spa-bg) !important;
}

.header-search input {
  background-color: #ffffff !important;
  border: 1px solid var(--spa-border) !important;
  color: var(--spa-text-dark) !important;
}

/* Footer Styling */
footer,
footer.footer,
.footer,
body .footer,
.page-wrapper .footer,
.page-body-wrapper .footer,
.page-wrapper.compact-wrapper .page-body-wrapper footer,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ footer,
.page-wrapper.compact-sidebar .page-body-wrapper .footer,
.page-wrapper.compact-sidebar .page-body-wrapper div.sidebar-wrapper.close_icon ~ .footer,
.page-wrapper.compact-small .page-body-wrapper .footer,
.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper.close_icon ~ .footer,
.page-wrapper.horizontal-wrapper .footer,
.page-wrapper.modern-type .page-body-wrapper .footer {
  background-color: #FAF7F0 !important;
  border-top: 1px solid var(--spa-border) !important;
  box-shadow: none !important;
  color: var(--spa-text-muted) !important;
}

.footer .container-fluid,
.footer .row,
.footer [class*="col-"],
.footer .footer-copyright,
.footer p,
.footer span {
  background-color: transparent !important;
  color: var(--spa-text-muted) !important;
}

/* Sidebar Styling - Deep Forest Botanical Green */
.sidebar-wrapper {
  background-color: var(--spa-sidebar-bg) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.sidebar-wrapper .logo-wrapper,
.sidebar-wrapper .logo-icon-wrapper {
  background-color: var(--spa-sidebar-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar-wrapper nav.sidebar-main {
  background-color: var(--spa-sidebar-bg) !important;
}

.sidebar-wrapper:not(.close_icon) .sidebar-links .sidebar-list,
.sidebar-wrapper.close_icon:hover .sidebar-links .sidebar-list {
  margin: 3px 12px !important;
}

.sidebar-wrapper:not(.close_icon) .sidebar-links .sidebar-list a.sidebar-link,
.sidebar-wrapper.close_icon:hover .sidebar-links .sidebar-list a.sidebar-link {
  color: #c7d8ce !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  transition: all 0.25s ease !important;
}

/* Collapsed sidebar (tidak sedang di-hover): icon rata tengah */
.sidebar-wrapper.close_icon:not(:hover) .sidebar-links .sidebar-list {
  margin: 4px auto !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 80px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.sidebar-wrapper.close_icon:not(:hover) .sidebar-links .sidebar-list a.sidebar-link {
  color: #c7d8ce !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.sidebar-wrapper.close_icon:not(:hover) .sidebar-links .sidebar-list a.sidebar-link svg.stroke-icon {
  margin: 0 auto !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.sidebar-wrapper .sidebar-links .sidebar-list a.sidebar-link svg.fill-icon,
.sidebar-wrapper svg.fill-icon {
  display: none !important;
}



.sidebar-links .sidebar-list a.sidebar-link span {
  color: #d8e5de !important;
  font-weight: 500 !important;
}

.sidebar-links .sidebar-list a.sidebar-link i,
.sidebar-links .sidebar-list a.sidebar-link svg {
  color: #9cb5a5 !important;
  stroke: #9cb5a5 !important;
}

.sidebar-links .sidebar-list a.sidebar-link:hover,
.sidebar-links .sidebar-list.active a.sidebar-link,
.sidebar-links .sidebar-list a.sidebar-link.active {
  background-color: var(--spa-sidebar-active) !important;
  color: #ffffff !important;
}

.sidebar-links .sidebar-list a.sidebar-link:hover span,
.sidebar-links .sidebar-list.active a.sidebar-link span,
.sidebar-links .sidebar-list a.sidebar-link.active span {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.sidebar-links .sidebar-list a.sidebar-link:hover i,
.sidebar-links .sidebar-list a.sidebar-link:hover svg,
.sidebar-links .sidebar-list.active a.sidebar-link i,
.sidebar-links .sidebar-list.active a.sidebar-link svg,
.sidebar-links .sidebar-list a.sidebar-link.active i,
.sidebar-links .sidebar-list a.sidebar-link.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Sidebar Submenu */
.sidebar-submenu {
  background-color: var(--spa-sidebar-sub) !important;
  border-radius: 8px !important;
  margin: 4px 0 !important;
  padding: 6px 0 !important;
}

.sidebar-submenu li a {
  color: #a8bfb1 !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.sidebar-submenu li a:hover,
.sidebar-submenu li a.active {
  color: #ffffff !important;
  padding-left: 22px !important;
  font-weight: 600 !important;
}

/* Cards & Panels */
.card {
  background-color: var(--spa-card-bg) !important;
  border: 1px solid var(--spa-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(13, 56, 38, 0.02) !important;
}

.card .card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--spa-border) !important;
}

.card .card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--spa-border) !important;
}

/* Page Titles & Breadcrumbs */
.page-title {
  background-color: var(--spa-card-bg) !important;
  border: 1px solid var(--spa-border) !important;
  border-radius: 14px !important;
  padding: 16px 22px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.page-title h3 {
  color: var(--spa-text-dark) !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
}

.page-title .breadcrumb {
  margin-bottom: 0 !important;
}

.breadcrumb-item a {
  color: var(--spa-text-muted) !important;
}

.breadcrumb-item.active {
  color: var(--spa-primary) !important;
  font-weight: 600 !important;
}

/* Buttons */
.btn-primary,
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active {
  background-color: var(--spa-primary) !important;
  border-color: var(--spa-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--spa-primary-hover) !important;
  border-color: var(--spa-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(13, 56, 38, 0.2) !important;
}

.btn-outline-primary {
  color: var(--spa-primary) !important;
  border-color: var(--spa-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--spa-primary) !important;
  border-color: var(--spa-primary) !important;
  color: #ffffff !important;
}

.btn-secondary {
  background-color: var(--spa-gold) !important;
  border-color: var(--spa-gold) !important;
  color: var(--spa-text-dark) !important;
  font-weight: 600 !important;
}

.btn-secondary:hover {
  background-color: #b59b70 !important;
  border-color: #b59b70 !important;
  color: var(--spa-text-dark) !important;
}

/* Badges */
.badge-primary,
.bg-primary {
  background-color: var(--spa-primary) !important;
  color: #ffffff !important;
}

.badge-secondary,
.bg-secondary {
  background-color: var(--spa-gold) !important;
  color: var(--spa-text-dark) !important;
}

.badge-light-primary {
  background-color: #edf4ee !important;
  color: var(--spa-primary) !important;
}

/* Form Controls */
.form-control,
.form-select {
  border: 1px solid var(--spa-border) !important;
  color: var(--spa-text-dark) !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--spa-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 56, 38, 0.12) !important;
}

/* DataTables & Tables */
.table {
  color: var(--spa-text-dark) !important;
  border-color: var(--spa-border) !important;
}

.table th {
  color: var(--spa-text-muted) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--spa-border) !important;
  font-weight: 600 !important;
}

.table td {
  border-color: #f1ede6 !important;
  vertical-align: middle !important;
}

.page-item.active .page-link {
  background-color: var(--spa-primary) !important;
  border-color: var(--spa-primary) !important;
  color: #ffffff !important;
}

.page-link {
  color: var(--spa-primary) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--spa-bg);
}

::-webkit-scrollbar-thumb {
  background: #cbd5ce;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9bb5a3;
}

/* Auth / Login Page Styling */
.login-card {
  background: var(--spa-bg) !important;
  background-color: var(--spa-bg) !important;
}

.login-card .login-main {
  background-color: var(--spa-card-bg) !important;
  border: 1px solid var(--spa-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(13, 56, 38, 0.06) !important;
}

.login-card .login-main .theme-form h4 {
  color: var(--spa-text-dark) !important;
  font-weight: 700 !important;
}

.login-card .login-main .theme-form p {
  color: var(--spa-text-muted) !important;
}

.login-card .login-main .theme-form label {
  color: var(--spa-text-dark) !important;
  font-weight: 500 !important;
}

.login-card .login-main .theme-form input {
  background-color: #ffffff !important;
  border: 1px solid var(--spa-border) !important;
  color: var(--spa-text-dark) !important;
  border-radius: 8px !important;
}

.login-card .login-main .theme-form input:focus {
  border-color: var(--spa-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 56, 38, 0.12) !important;
}

.login-card .login-main .theme-form .show-hide span {
  color: var(--spa-text-muted) !important;
}