/* --- COLOR PALETTE --- */
:root {
  --primary-orange: #fc4c02;
  --accent-gray: #f7f7f7;
  --medium-gray: #767676;
  --dark-gray: #1e1e1e;
  --white: #ffffff;
  --light-border: #e0e0e0;
}

/* --- GENERAL --- */
body {
  background-color: var(--accent-gray);
  color: var(--dark-gray);
  font-family: 'Helvetica Neue', sans-serif;
}

/* --- HEADER --- */
.navbar {
  background-color: var(--white);
  border-bottom: 1px solid var(--light-border);
}

.navbar-brand, .navbar-nav .nav-link {
  color: var(--dark-gray) !important;
}

/* --- BUTTONS --- */
.btn-primary {
  background-color: var(--primary-orange);
  border: none;
  color: var(--white);
}

.btn-primary:hover {
  background-color: #e64500;
}

.btn-outline-secondary {
  border-color: var(--primary-orange);
  color: var(--primary-orange);
}

.btn-outline-secondary:hover {
  background-color: var(--primary-orange);
  color: var(--white);
}

/* --- CARDS --- */
.card {
  background-color: var(--white);
  border: 1px solid var(--light-border);
  border-radius: 1px;
}

.card-title {
  color: var(--dark-gray);
}

.card-text {
  color: var(--medium-gray);
}

/* --- GOAL STATUSES --- */
.text-success {
  color: green;
}

.text-warning {
  color: #ff9800; /* amber-orange */
}

.text-danger {
  color: #e53935; /* bold red */
}

/* --- LIST ITEMS --- */
.list-group-item {
  background-color: var(--white);
  border-color: var(--light-border);
}

  .dashboard-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
  }

  .left-sidebar, .right-sidebar {
    width: 25%;
    max-height: 100vh;
    overflow-y: auto;
  }

  .center-feed {
    width: 50%;
    max-height: 100vh;
    overflow-y: scroll;
    padding: 0 1rem;
  }

  .left-sidebar::-webkit-scrollbar,
  .right-sidebar::-webkit-scrollbar {
    display: none;
  }

  .left-sidebar, .right-sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .activity-card {
    margin-bottom: 1rem;
  }

/* --- DARK MODE --- */
html[data-bs-theme="dark"] {
  --muzieka-dark-bg: #0b1118;
  --muzieka-dark-nav: #101821;
  --muzieka-dark-surface: #16212c;
  --muzieka-dark-surface-raised: #1b2834;
  --muzieka-dark-border: #304151;
  --muzieka-dark-text: #edf4f7;
  --muzieka-dark-muted: #9eafbc;
  --muzieka-dark-accent: #8293ff;
  --muzieka-dark-accent-hover: #9ba8ff;
  --muzieka-dark-teal: #67ccc5;
  --accent-gray: var(--muzieka-dark-bg);
  --medium-gray: var(--muzieka-dark-muted);
  --dark-gray: var(--muzieka-dark-text);
  --white: var(--muzieka-dark-surface);
  --light-border: var(--muzieka-dark-border);
  --bs-body-bg: var(--muzieka-dark-bg);
  --bs-body-color: var(--muzieka-dark-text);
  --bs-border-color: var(--muzieka-dark-border);
  --bs-secondary-bg: var(--muzieka-dark-surface);
  --bs-tertiary-bg: var(--muzieka-dark-surface-raised);
}

html[data-bs-theme="dark"] body {
  background-color: var(--muzieka-dark-bg);
  color: var(--muzieka-dark-text);
}

html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .navbar.bg-white,
html[data-bs-theme="dark"] footer.bg-white,
html[data-bs-theme="dark"] .bg-white {
  background-color: var(--muzieka-dark-nav) !important;
  border-color: #273746 !important;
}

html[data-bs-theme="dark"] .navbar-brand,
html[data-bs-theme="dark"] .navbar-brand.text-dark,
html[data-bs-theme="dark"] .navbar-nav .nav-link,
html[data-bs-theme="dark"] .navbar .text-dark,
html[data-bs-theme="dark"] .offcanvas .text-dark {
  color: var(--muzieka-dark-text) !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .toast {
  color: var(--muzieka-dark-text);
  background-color: var(--muzieka-dark-surface);
  border-color: var(--muzieka-dark-border) !important;
}

html[data-bs-theme="dark"] .dropdown-item,
html[data-bs-theme="dark"] .offcanvas a,
html[data-bs-theme="dark"] .offcanvas button {
  color: #dce6ed !important;
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus,
html[data-bs-theme="dark"] .offcanvas-body .mobile-menu a:hover {
  color: #fff !important;
  background-color: #25313b !important;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .card-title {
  color: var(--muzieka-dark-text) !important;
}

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .card-text,
html[data-bs-theme="dark"] .menu-header {
  color: var(--muzieka-dark-muted) !important;
}

html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .alert-light {
  color: #dce6ed !important;
  background-color: var(--muzieka-dark-surface-raised) !important;
  border-color: #3a4c5c !important;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-check-input,
html[data-bs-theme="dark"] .input-group-text {
  color: var(--muzieka-dark-text);
  background-color: #101923;
  border-color: #3a4d5e;
}

html[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--muzieka-dark-accent);
  border-color: var(--muzieka-dark-accent);
}

html[data-bs-theme="dark"] .form-control::placeholder {
  color: #8494a0;
  opacity: 1;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .form-check-input:focus {
  color: #fff;
  background-color: #101923;
  border-color: var(--muzieka-dark-accent);
  box-shadow: 0 0 0 0.2rem rgba(130, 147, 255, 0.2);
}

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-light,
html[data-bs-theme="dark"] hr,
html[data-bs-theme="dark"] .dropdown-divider {
  border-color: var(--muzieka-dark-border) !important;
}

html[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

html[data-bs-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28237,244,247,0.88%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  filter: none;
}

html[data-bs-theme="dark"] a:not(.btn) {
  text-underline-offset: 0.18em;
}

html[data-bs-theme="dark"] .btn-primary {
  color: #fff;
  background-color: var(--muzieka-dark-accent);
  border-color: var(--muzieka-dark-accent);
}

html[data-bs-theme="dark"] .btn-primary:hover,
html[data-bs-theme="dark"] .btn-primary:focus {
  color: #fff;
  background-color: var(--muzieka-dark-accent-hover);
  border-color: var(--muzieka-dark-accent-hover);
}

html[data-bs-theme="dark"] .btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-secondary {
  color: #aab5ff;
  border-color: #6576d8;
}

html[data-bs-theme="dark"] .btn-outline-primary:hover,
html[data-bs-theme="dark"] .btn-outline-secondary:hover {
  color: #fff;
  background-color: #6576d8;
  border-color: #6576d8;
}

html[data-bs-theme="dark"] .btn-outline-success {
  color: #79d5cf;
  border-color: #4c8f8a;
}

html[data-bs-theme="dark"] .btn-outline-success:hover {
  color: #071513;
  background-color: #79d5cf;
  border-color: #79d5cf;
}

html[data-bs-theme="dark"] .btn-outline-info {
  color: #82cfea;
  border-color: #4e8fa7;
}

html[data-bs-theme="dark"] .btn-outline-info:hover {
  color: #081318;
  background-color: #82cfea;
  border-color: #82cfea;
}

html[data-bs-theme="dark"] .btn-outline-warning {
  color: #f0c979;
  border-color: #9d8245;
}

html[data-bs-theme="dark"] .btn-outline-warning:hover {
  color: #171104;
  background-color: #f0c979;
  border-color: #f0c979;
}

html[data-bs-theme="dark"] .btn-outline-danger {
  color: #ff929e;
  border-color: #a85d69;
}

html[data-bs-theme="dark"] .btn-outline-danger:hover {
  color: #fff;
  background-color: #a85d69;
  border-color: #a85d69;
}

html[data-bs-theme="dark"] .navbar-tuner-trigger {
  border-color: #35495b;
  background: linear-gradient(145deg, #1d2a36, #141f29);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

html[data-bs-theme="dark"] .navbar-tuner-trigger:hover {
  border-color: #6f80e7;
  box-shadow: 0 5px 16px rgba(91, 110, 221, 0.2);
}

html[data-bs-theme="dark"] .navbar-tuner-art span {
  background: linear-gradient(180deg, #9faaff 0%, #67ccc5 100%);
  box-shadow: 0 0 5px rgba(103, 204, 197, 0.18);
}