/**
 * Sleepers admin — app palette (#6981C5, #9BB4E5)
 * Scoped layout tweaks: body.harmony-app
 */

:root {
  --lc-primary: #6981C5;
  --lc-primary-dark: #4E64A8;
  --lc-primary-deep: #3A4C8A;
  --lc-primary-light: #9BB4E5;
  --lc-accent: #B8C9EE;
  /* Legacy token names — mapped to the Sleepers blues */
  --lc-green: #4E64A8;
  --lc-green-mid: #6981C5;
  --lc-green-light: #9BB4E5;
  --lc-mint: #B8C9EE;
  --lc-surface: #ffffff;
  --lc-surface-2: #f3f6fc;
  --lc-text: #1b2437;
  --lc-muted: #64708b;
  --lc-border: rgba(105, 129, 197, 0.16);
  --lc-shadow: 0 25px 50px -12px rgba(58, 76, 138, 0.16);
  --lc-radius: 16px;
}

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

/* Sidebar — same blue story as login left panel */
body.harmony-app .sidebar-wrapper {
  background: linear-gradient(
    180deg,
    #2a3766 0%,
    var(--lc-primary-deep) 32%,
    var(--lc-primary) 68%,
    #5569b0 100%
  );
  box-shadow: 4px 0 32px rgba(42, 55, 102, 0.28);
}

body.harmony-app .sidebar-wrapper .sidebar-header {
  background: rgba(0, 0, 0, 0.22);
  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.92) !important;
}

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

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

body.harmony-app .sidebar-wrapper .sidebar-nav .metismenu .mm-active > a {
  background: rgba(255, 255, 255, 0.18) !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(105, 129, 197, 0.08);
}

body.harmony-app .top-header .btn-toggle a {
  color: var(--lc-primary) !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(155, 180, 229, 0.32) !important;
  border-color: rgba(105, 129, 197, 0.22) !important;
  color: var(--lc-primary-dark) !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(155, 180, 229, 0.28) !important;
  color: var(--lc-primary) !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.85);
}

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

/* 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.52);
  border-bottom-color: rgba(155, 180, 229, 0.28);
}

body.harmony-app .sidebar-wrapper .sidebar-nav.care-sidenav-pro .care-nav-divider {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(155, 180, 229, 0.4),
    transparent
  );
}

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

/* Bootstrap accents inside the admin shell */
body.harmony-app .btn-primary {
  background-color: var(--lc-primary);
  border-color: var(--lc-primary);
}
body.harmony-app .btn-primary:hover,
body.harmony-app .btn-primary:focus {
  background-color: var(--lc-primary-dark);
  border-color: var(--lc-primary-dark);
}
body.harmony-app .text-success {
  color: var(--lc-primary) !important;
}
body.harmony-app .badge.bg-success-subtle,
body.harmony-app .bg-success-subtle {
  background-color: rgba(105, 129, 197, 0.16) !important;
  color: var(--lc-primary-dark) !important;
}
body.harmony-app .border-success-subtle {
  border-color: rgba(105, 129, 197, 0.28) !important;
}
body.harmony-app .form-check-input:checked {
  background-color: var(--lc-primary);
  border-color: var(--lc-primary);
}
body.harmony-app .form-control:focus,
body.harmony-app .form-select:focus {
  border-color: var(--lc-primary-light);
  box-shadow: 0 0 0 0.25rem rgba(105, 129, 197, 0.2);
}