/* dark-mode.css
   Custom dark theme for Seawise (Sneat-based)
   - Scoped under html.dark-layout so it never affects light theme
   - Adds smooth transitions and subtle sidebar / navbar effects
*/

/* ----------------- Base tokens ----------------- */
html.dark-layout {
  /* Override Sneat / Bootstrap vars */
  --bs-body-bg:        #0f172a !important; /* main page background */
  --bs-body-color:     #e5e7eb !important; /* default text */
  --bs-card-bg:        #111827 !important; /* cards & panels */
  --bs-navbar-bg:      #020617 !important; /* top navbar */
  --bs-navbar-color:   #e5e7eb !important;
  --bs-menu-bg:        #020617 !important; /* sidebar background */
  --bs-menu-color:     #cbd5f5 !important;
  --bs-border-subtle:  rgba(148, 163, 184, 0.35) !important;
  --accent-primary:    #6366f1;            /* purple accent */
  --accent-primary-soft: rgba(99,102,241,0.12);
}

/* Smooth theme animation when toggling */
html.dark-layout body,
html.dark-layout .layout-navbar,
html.dark-layout .layout-menu,
html.dark-layout .card,
html.dark-layout .content-wrapper,
html.dark-layout .layout-page {
  transition:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease,
    box-shadow       0.25s ease;
}

/* ----------------- Body & content ----------------- */
html.dark-layout body {
  background-color: var(--bs-body-bg) !important;
  color:            var(--bs-body-color) !important;
}

/* Wrapper + cards */
html.dark-layout .layout-page,
html.dark-layout .content-wrapper {
  background-color: transparent !important;
}

html.dark-layout .card {
  background-color: var(--bs-card-bg) !important;
  border-color:     var(--bs-border-subtle) !important;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.65) !important;
}

/* Card headers slightly darker for separation */
html.dark-layout .card-header {
  background-color: rgba(15, 23, 42, 0.9) !important;
  border-bottom-color: var(--bs-border-subtle) !important;
}

/* Tables inside cards */
html.dark-layout .table {
  color: var(--bs-body-color) !important;
}
html.dark-layout .table thead th {
  border-bottom-color: var(--bs-border-subtle) !important;
}
html.dark-layout .table tbody tr {
  border-color: var(--bs-border-subtle) !important;
}

/* Form controls */
html.dark-layout .form-control,
html.dark-layout .form-select {
  background-color: #020617 !important;
  border-color:     var(--bs-border-subtle) !important;
  color:            var(--bs-body-color) !important;
}
html.dark-layout .form-control:focus,
html.dark-layout .form-select:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.35) !important;
}

/* ----------------- Navbar ----------------- */
html.dark-layout .layout-navbar,
html.dark-layout .navbar {
  background-color: var(--bs-navbar-bg) !important;
  color:            var(--bs-navbar-color) !important;
  border-bottom:    1px solid rgba(15, 23, 42, 0.85) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.7) !important;
}

html.dark-layout .layout-navbar .nav-link,
html.dark-layout .navbar .navbar-brand {
  color: var(--bs-navbar-color) !important;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

html.dark-layout .layout-navbar .nav-link:hover {
  color: #ffffff !important;
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ----------------- Sidebar ----------------- */
html.dark-layout .layout-menu,
html.dark-layout .layout-menu.menu-vertical {
  background-color: var(--bs-menu-bg) !important;
}

/* Sidebar links */
html.dark-layout .layout-menu .menu-link {
  color: var(--bs-menu-color) !important;
  position: relative;
  transition:
    background-color 0.18s ease,
    color            0.18s ease,
    transform        0.15s ease,
    box-shadow       0.18s ease;
}

/* Hover effect: soft slide + glow */
html.dark-layout .layout-menu .menu-link:hover {
  background-color: rgba(148, 163, 184, 0.18) !important;
  transform: translateX(2px);
}

/* Active menu item: left accent bar + stronger background */
html.dark-layout .layout-menu .menu-item.active > .menu-link {
  background-color: var(--accent-primary-soft) !important;
  color: #ffffff !important;
  box-shadow: inset 2px 0 0 var(--accent-primary);
}

/* Small animated bar for active / hover (only on dark) */
html.dark-layout .layout-menu .menu-item > .menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 0;
  background: linear-gradient(
    180deg,
    rgba(129, 140, 248, 1),
    rgba(244, 114, 182, 1)
  );
  border-radius: 0 999px 999px 0;
  transition: width 0.18s ease;
}

html.dark-layout .layout-menu .menu-item.active > .menu-link::before,
html.dark-layout .layout-menu .menu-item > .menu-link:hover::before {
  width: 3px;
}

/* Icons in sidebar a bit softer */
html.dark-layout .layout-menu .menu-icon {
  color: rgba(148, 163, 184, 0.9) !important;
}

/* ----------------- Badges, buttons, misc ----------------- */

/* Make default badges + buttons pop a bit more on dark */
html.dark-layout .badge {
  border-radius: 999px;
}

/* Primary button glow */
html.dark-layout .btn-primary {
  box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.0);
  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease;
}
html.dark-layout .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.6);
}

/* Outline buttons a bit brighter on hover */
html.dark-layout .btn-outline-primary:hover,
html.dark-layout .btn-outline-danger:hover {
  color: #ffffff !important;
}

/* Scrollbar (WebKit only) */
html.dark-layout ::-webkit-scrollbar {
  width: 8px;
}
html.dark-layout ::-webkit-scrollbar-track {
  background: #020617;
}
html.dark-layout ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
}
html.dark-layout ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}