/**
 * Spark — palette #9C9DE7 + #FF8B66
 * Scoped layout tweaks: body.harmony-app
 */

:root {
  --lc-green: #9c9de7;
  --lc-green-mid: #7b7dce;
  --lc-green-light: #b8b9f0;
  --lc-mint: #ff8b66;
  --lc-surface: #ffffff;
  --lc-surface-2: #f5f4fd;
  --lc-text: #0f172a;
  --lc-muted: #64748b;
  --lc-border: rgba(156, 157, 231, 0.28);
  --lc-shadow: 0 25px 50px -12px rgba(91, 93, 168, 0.2);
  --lc-radius: 16px;
}

/* App shell (logged-in layout) */
body.harmony-app {
  font-family: "Outfit", "Noto Sans", system-ui, sans-serif;
  background: linear-gradient(180deg, #ececf8 0%, #e4e3f5 100%);
  min-height: 100vh;
  text-transform: none;
}

/* Sidebar — deeper lavender so nav text stays readable */
body.harmony-app .sidebar-wrapper {
  background: linear-gradient(
    180deg,
    #3d3f72 0%,
    #5254a0 38%,
    #686ab8 100%
  );
  box-shadow: 4px 0 32px rgba(61, 63, 114, 0.35);
}

body.harmony-app .sidebar-wrapper .sidebar-header {
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.harmony-app .sidebar-wrapper .sidebar-nav {
  background: transparent;
}

body.harmony-app .sidebar-wrapper .sidebar-nav .metismenu ul {
  background-color: transparent;
}

body.harmony-app .sidebar-wrapper .sidebar-nav .metismenu a {
  color: rgba(255, 255, 255, 0.94) !important;
}

body.harmony-app .sidebar-wrapper .sidebar-nav .metismenu a:hover,
body.harmony-app .sidebar-wrapper .sidebar-nav .metismenu a:focus {
  background: rgba(255, 139, 102, 0.22) !important;
  color: #fff !important;
}

body.harmony-app .sidebar-wrapper .sidebar-nav .metismenu a:active {
  background: rgba(255, 139, 102, 0.32) !important;
  color: #fff !important;
}

body.harmony-app .sidebar-wrapper .sidebar-nav .metismenu .mm-active > a {
  background: rgba(156, 157, 231, 0.28) !important;
  color: #fff !important;
}

/* Top bar */
body.harmony-app .top-header .navbar {
  background: var(--lc-surface) !important;
  border-bottom: 1px solid var(--lc-border);
  box-shadow: 0 1px 0 rgba(156, 157, 231, 0.12);
}

body.harmony-app .top-header .btn-toggle a {
  color: var(--lc-green-mid) !important;
  border: 1px solid transparent;
}

body.harmony-app .top-header .btn-toggle a:hover,
body.harmony-app .top-header .btn-toggle a:focus {
  background-color: rgba(255, 139, 102, 0.14) !important;
  border-color: rgba(156, 157, 231, 0.25) !important;
  color: #4a4c86 !important;
}

body.harmony-app .top-header .nav-right-links .nav-link {
  color: var(--lc-muted) !important;
}

body.harmony-app .top-header .nav-right-links .nav-link:hover,
body.harmony-app .top-header .nav-right-links .nav-link:focus {
  background-color: rgba(156, 157, 231, 0.14) !important;
  color: #5b5da8 !important;
}

/* Main content area */
body.harmony-app .main-wrapper {
  background: transparent;
}

body.harmony-app .main-wrapper .main-content {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow);
}

/* Sidebar close (mobile) */
body.harmony-app .sidebar-wrapper .sidebar-header .sidebar-close {
  color: rgba(255, 255, 255, 0.88);
}

body.harmony-app .sidebar-wrapper .sidebar-header .sidebar-close:hover,
body.harmony-app .sidebar-wrapper .sidebar-header .sidebar-close:focus {
  background-color: rgba(255, 139, 102, 0.3);
}

/* Refined nav labels / dividers (care-sidenav-pro in sidebar.php) */
body.harmony-app .sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-section-label {
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 139, 102, 0.35);
}

body.harmony-app .sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-divider {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 139, 102, 0.45),
    transparent
  );
}

body.harmony-app .sidebar-wrapper .sidebar-nav.care-sidenav-pro #sidenav > li.mm-active > a {
  box-shadow:
    inset 0 0 0 1px rgba(255, 139, 102, 0.45),
    0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Bootstrap alignment inside admin shell */
body.harmony-app .btn-primary {
  --bs-btn-bg: #7b7dce;
  --bs-btn-border-color: #7b7dce;
  --bs-btn-hover-bg: #686ab8;
  --bs-btn-hover-border-color: #686ab8;
  --bs-btn-active-bg: #5b5da8;
  --bs-btn-active-border-color: #5b5da8;
  --bs-btn-focus-shadow-rgb: 156, 157, 231;
}

body.harmony-app a {
  color: #6b6dc9;
}

body.harmony-app a:hover {
  color: #ff8b66;
}

/* Bootstrap semantic colors → Spark palette (admin shell) */
body.harmony-app .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #7b7dce;
  --bs-btn-border-color: #7b7dce;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #686ab8;
  --bs-btn-hover-border-color: #686ab8;
  --bs-btn-focus-shadow-rgb: 123, 125, 206;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5b5da8;
  --bs-btn-active-border-color: #5b5da8;
}

body.harmony-app .btn-outline-success {
  --bs-btn-color: #7b7dce;
  --bs-btn-border-color: rgba(156, 157, 231, 0.65);
  --bs-btn-hover-bg: #7b7dce;
  --bs-btn-hover-border-color: #7b7dce;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #686ab8;
  --bs-btn-active-border-color: #686ab8;
  --bs-btn-active-color: #fff;
}

body.harmony-app .text-success {
  color: #6b6dc9 !important;
}

body.harmony-app .border-success {
  border-color: rgba(156, 157, 231, 0.45) !important;
}