/* ==========================================================================
   Brand theme — logo-derived color scheme
   --------------------------------------------------------------------------
   The logo uses two colors:
     #FFFFFF  — wordmark text
     #D9DB8F  — accent (the geometric "O" connector shape and the tagline)

   This file re-skins the sidebar and the login/auth pages to match. The
   sidebar gets a deep charcoal surface so the white wordmark and #D9DB8F
   accent sit on a dark ground that mirrors the logo's own dark-background
   context. The login page gets a matching split-panel treatment.

   Loading order: linked AFTER soft-ui-dashboard.css and blueprint.css in
   head.html (and base.jinja for auth pages). Both files are referenced there;
   this one slots in at the end.

   Nothing here touches .dashboard-shell content — only the sidenav and the
   auth-page classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand tokens
   -------------------------------------------------------------------------- */
:root {
  /* Logo accent — the #D9DB8F chartreuse/yellow-green from the SVG */
  --brand-accent:          #d9db8f;
  --brand-accent-dim:      #b8ba6a;   /* hover/pressed state, ~10 % darker */
  --brand-accent-subtle:   rgba(217, 219, 143, 0.12);  /* tinted fill on dark */
  --brand-accent-text:     #3a3c00;   /* text on the accent chip — dark enough for AA */

  /* Dark sidebar surface — deep charcoal, slightly warm */
  --brand-side-bg:         #1e2120;
  --brand-side-bg-hover:   #272d2b;
  --brand-side-active-bg:  #303630;   /* active item row fill */
  --brand-side-text:       #e2e5e4;   /* primary nav text */
  --brand-side-muted:      #8a9493;   /* group headers, secondary text */
  --brand-side-divider:    #2e3332;

  /* Footer support card inside the sidebar */
  --brand-side-card-bg:    #272d2b;
  --brand-side-card-border:#3a4140;

  /* Auth page */
  --brand-auth-panel-bg:   #1e2120;   /* left panel (dark) */
  --brand-auth-body-bg:    #f4f3f3;   /* right / full-page background */
  --brand-auth-card-bg:    #ffffff;
  --brand-auth-card-border:#e2e2e2;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

/* --- Surface --------------------------------------------------------------- */
#sidenav-main {
  background: var(--brand-side-bg) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dividers */
#sidenav-main hr.horizontal.dark {
  background-color: var(--brand-side-divider) !important;
  opacity: 1 !important;
}

/* --- Brand header ---------------------------------------------------------- */
#sidenav-main .sidenav-header .navbar-brand span {
  color: var(--brand-side-text) !important;
}

/* --- Group labels (bp-nav-group) ------------------------------------------ */
#sidenav-main .bp-nav-group {
  color: var(--brand-side-muted) !important;
  letter-spacing: 0.09em;
}

/* --- Nav links ------------------------------------------------------------- */
#sidenav-main .nav-link {
  color: var(--brand-side-text) !important;
}

#sidenav-main .nav-link:hover,
#sidenav-main .nav-item:hover > .nav-link {
  background-color: var(--brand-side-bg-hover) !important;
  color: #ffffff !important;
}

#sidenav-main .nav-link.active {
  background-color: var(--brand-side-active-bg) !important;
  color: #ffffff !important;
}

/* Accent stripe on the active item's left edge */
#sidenav-main .nav-item .nav-link.active {
  box-shadow: inset 3px 0 0 var(--brand-accent) !important;
}

/* --- Icon containers ------------------------------------------------------- */

/* Default: subtle dark border on dark ground */
#sidenav-main .icon {
  background-color: var(--brand-side-active-bg) !important;
  border-color: var(--brand-side-divider) !important;
  color: var(--brand-side-muted) !important;
  box-shadow: none !important;
}

/* Active item: accent-tinted icon box */
#sidenav-main .nav-link.active .icon {
  background-color: var(--brand-accent-subtle) !important;
  border-color: var(--brand-accent-dim) !important;
  color: var(--brand-accent) !important;
}

/* Make the SVG currentColor resolve to the accent on active */
#sidenav-main .nav-link.active .icon svg {
  color: var(--brand-accent) !important;
  fill: var(--brand-accent) !important;
}

/* Hover icon */
#sidenav-main .nav-link:hover .icon {
  background-color: var(--brand-side-bg-hover) !important;
  border-color: #3a4140 !important;
  color: var(--brand-side-text) !important;
}

/* --- Nav link text --------------------------------------------------------- */
#sidenav-main .nav-link-text {
  color: inherit !important;
}

/* --- Collapse sub-menus --------------------------------------------------- */
#sidenav-main .collapse .nav-link {
  color: var(--brand-side-muted) !important;
}

#sidenav-main .collapse .nav-link:hover {
  color: #ffffff !important;
}

#sidenav-main .collapse .nav-link.active {
  color: var(--brand-accent) !important;
  font-weight: 600;
}

#sidenav-main .sidenav-mini-icon,
#sidenav-main .sidenav-normal {
  color: var(--brand-side-muted) !important;
}

/* --- Footer support card inside the sidebar ------------------------------- */
#sidenavCard {
  background: linear-gradient(135deg, var(--brand-side-card-bg) 0%, #2a3130 100%) !important;
  border: 1px solid var(--brand-side-card-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

#sidenavCard::before,
#sidenavCard::after {
  display: none !important;
}

#sidenavCard .icon-shape {
  background-color: var(--brand-accent-subtle) !important;
  border: 1px solid var(--brand-side-card-border) !important;
  box-shadow: none !important;
}

#sidenavCard .icon-shape svg {
  color: var(--brand-accent) !important;
  fill: var(--brand-accent) !important;
}

/* Support ticket button inside the card */
#sidenavCard .btn-white {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: var(--brand-accent-text) !important;
  font-weight: 700;
}

#sidenavCard .btn-white:hover {
  background-color: var(--brand-accent-dim) !important;
  border-color: var(--brand-accent-dim) !important;
}

/* --- Scrollbar (Quart scrollbar plugin) ----------------------------------- */
#sidenav-scrollbar .simplebar-scrollbar::before {
  background: var(--brand-side-divider) !important;
}


/* ==========================================================================
   LOGIN / AUTH PAGES
   ========================================================================== */

/* Full-page body */
body.auth-page {
  background-color: var(--brand-auth-body-bg) !important;
  background-image:
    linear-gradient(rgba(191, 200, 200, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 200, 200, 0.14) 1px, transparent 1px),
    radial-gradient(rgba(191, 200, 200, 0.28) 1px, transparent 1.5px) !important;
  background-size: 40px 40px, 40px 40px, 10px 10px !important;
}

/* Card */
.auth-card {
  background-color: var(--brand-auth-card-bg) !important;
  border: 1px solid var(--brand-auth-card-border) !important;
  border-top: 3px solid var(--brand-accent) !important;  /* accent top-border */
  box-shadow: 0 2px 8px rgba(30, 33, 32, 0.08) !important;
}

/* Title */
.auth-title {
  color: #1a1c1c !important;
}

/* Kicker mono labels */
.auth-kicker {
  color: #737877 !important;
}

/* Label */
.auth-label {
  color: #434847 !important;
}

/* Input */
.auth-input {
  background-color: #ffffff !important;
  border-color: #c3c7c6 !important;
  color: #1a1c1c !important;
}

.auth-input:focus {
  outline: 2px solid rgba(217, 219, 143, 0.45) !important;
  border-color: var(--brand-accent-dim) !important;
}

/* Primary action button — accent fill */
.auth-btn {
  background-color: var(--brand-accent-dim) !important;
  border-color: var(--brand-accent-dim) !important;
  color: var(--brand-accent-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

.auth-btn:hover {
  background-color: #a8aa52 !important;  /* another step darker */
  border-color: #a8aa52 !important;
  color: var(--brand-accent-text) !important;
}

/* Links */
.auth-link {
  color: #3e400a !important;
  font-weight: 600;
}

.auth-link:hover {
  color: #5a5c12 !important;
  text-decoration: underline;
}

/* Muted text */
.auth-muted {
  color: #737877 !important;
}