/*
 * CoPlanner Theme Foundation — layout chrome.
 *
 * Structural styles for the application shell. Every value below was
 * measured from the rendered dashboard using Playwright computed-style
 * inspection (test/visual/scripts/full_styles.py). No values were copied
 * from any third-party theme source file.
 *
 * Selectors use the cp-* namespace and are additive — they do not affect
 * existing pc-* markup.
 */

/* ==========================================================================
   Preloader
   ========================================================================== */
.cp-loader-bg {
  position: fixed;
  inset: 0;
  background-color: var(--cp-body-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.cp-loader-track {
  width: 100%;
  height: 4px;
  background-color: rgba(24, 144, 255, 0.12);
  overflow: hidden;
}

.cp-loader-fill {
  width: 100%;
  height: 100%;
  background-color: var(--cp-active-color);
  transform-origin: left center;
  animation: cp-loader-progress 1.2s ease-in-out infinite;
}

@keyframes cp-loader-progress {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.cp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cp-sidebar-width);
  background-color: var(--cp-sidebar-bg);
  box-shadow: var(--cp-sidebar-shadow);
  z-index: var(--cp-z-sidebar);
  transition: var(--cp-sidebar-transition);
  overflow: hidden;
  display: block;
}

.cp-sidebar .cp-navbar-wrapper {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 5;
  background: inherit;
}

.cp-sidebar .cp-m-header {
  height: var(--cp-sidebar-m-header-height);
  padding: var(--cp-sidebar-m-header-padding);
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 1;
}

.cp-sidebar .cp-brand {
  font-family: var(--cp-font-family-brand);
  font-size: var(--cp-brand-font-size);
  font-weight: var(--cp-brand-font-weight);
  line-height: var(--cp-brand-line-height);
  color: var(--cp-sidebar-text);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  margin-top: 8px;
}

.cp-sidebar .cp-navbar-content {
  position: relative;
  height: calc(100vh - var(--cp-sidebar-m-header-height));
  padding: 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox: hide scrollbar */
  -ms-overflow-style: none; /* IE/Edge: hide scrollbar */
}

/* WebKit: hide scrollbar while keeping scroll */
.cp-sidebar .cp-navbar-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Collapsed (hidden) state — measured: width 0, header/container/footer full-width */
.cp-sidebar.cp-sidebar-hide {
  width: var(--cp-sidebar-collapsed-width);
}

/* Mobile off-canvas state — measured: closed left:-260, opened left:0 */
@media (max-width: 1024px) {
  .cp-sidebar {
    left: calc(-1 * var(--cp-sidebar-width));
  }
  .cp-sidebar.cp-mob-active {
    left: 0;
  }
  .cp-sidebar.cp-mob-active .cp-menu-overlay {
    display: block;
  }
}

.cp-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Sidebar navigation
   ========================================================================== */
.cp-navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.cp-navbar .cp-item {
  display: list-item;
}

.cp-navbar .cp-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: var(--cp-sidebar-item-height);
  padding: var(--cp-sidebar-link-padding-y) var(--cp-sidebar-link-padding-x);
  color: var(--cp-sidebar-text);
  font-size: var(--cp-font-size-base);
  font-weight: 400;
  line-height: var(--cp-line-height-base);
  text-decoration: none;
  position: relative;
  transition: all 0.15s ease;
}

.cp-navbar .cp-link::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0.05;
  pointer-events: none;
}

.cp-navbar .cp-link:hover {
  text-decoration: none;
  color: var(--cp-sidebar-text);
}

.cp-navbar .cp-navbar > .cp-item:hover:not(.active) > .cp-link::before {
  background: var(--cp-sidebar-text);
}

.cp-navbar .cp-item.active > .cp-link {
  font-weight: 500;
  color: var(--cp-active-color);
}

.cp-navbar > .cp-item.active > .cp-link::before {
  opacity: 0.1;
  background: var(--cp-active-color);
}

.cp-navbar > .cp-item.active:not(.cp-hasmenu) > .cp-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: var(--cp-active-color);
}

.cp-navbar .cp-micon {
  width: var(--cp-sidebar-micon-width);
  margin-right: var(--cp-sidebar-micon-margin-right);
  height: 24px;
  display: flex;
  vertical-align: middle;
  text-align: center;
  flex-shrink: 1;
}

.cp-navbar .cp-micon i {
  font-size: 18px;
  vertical-align: middle;
}

.cp-navbar .cp-mtext {
  font-size: var(--cp-font-size-base);
  font-weight: 500;
}

.cp-navbar .cp-caption {
  display: block;
  padding: 24px 24px 12px;
  color: var(--cp-sidebar-caption-color);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.66;
  text-transform: capitalize;
  position: relative;
}

.cp-navbar .cp-caption i,
.cp-navbar .cp-caption svg {
  display: none;
}

.cp-navbar .cp-caption label {
  display: inline-block;
  color: var(--cp-sidebar-caption-color);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.66;
  text-transform: capitalize;
  margin-bottom: 0;
}

/* Submenu (used by cp-hasmenu items; preserved for future use) */
.cp-navbar .cp-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.cp-navbar .cp-hasmenu.cp-trigger > .cp-submenu {
  display: block;
}

/* ==========================================================================
   Header
   ========================================================================== */
.cp-header {
  position: fixed;
  top: 0;
  left: var(--cp-sidebar-width);
  width: calc(100% - var(--cp-sidebar-width));
  height: var(--cp-header-height);
  min-height: var(--cp-header-height);
  background-color: var(--cp-header-bg);
  color: var(--cp-header-color);
  box-shadow: var(--cp-header-shadow);
  z-index: var(--cp-z-header);
  display: flex;
  flex-direction: row;
  transition: left 0.15s, width 0.15s;
}

.cp-sidebar.cp-sidebar-hide ~ .cp-header {
  left: var(--cp-sidebar-collapsed-width);
  width: 100%;
}

.cp-header .cp-header-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 var(--cp-header-padding-x);
  display: flex;
  flex-direction: row;
  color: var(--cp-header-color);
}

.cp-header .cp-h-item {
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--cp-header-height);
  list-style: none;
}

.cp-header .cp-head-link {
  margin: 0 4px;
  position: relative;
  font-weight: 500;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cp-head-link-size);
  height: var(--cp-head-link-size);
  border-radius: var(--cp-head-link-border-radius);
  color: var(--cp-header-color);
  font-size: var(--cp-font-size-base);
  text-decoration: none;
}

/* Header link icons — vendor sets 20px font-size */
.cp-header .cp-head-link > i {
  font-size: 20px;
  color: var(--cp-header-color);
}

.cp-header .cp-head-link > img,
.cp-header .cp-head-link > span,
.cp-header .cp-head-link > svg,
.cp-header .cp-head-link > i {
  position: relative;
  z-index: 5;
}

.cp-header .cp-head-link:hover {
  text-decoration: none;
  color: var(--cp-header-color);
}

/* User profile link: auto width with padding to fit avatar + name */
.cp-header .header-user-profile .cp-head-link {
  width: auto;
  padding: 7px;
  background: transparent;
}

/* Notification badge — positioned at top-right of the head-link */
.cp-header .cp-head-link .cp-h-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: var(--cp-h-badge-size);
  height: var(--cp-h-badge-size);
  padding: var(--cp-h-badge-padding);
  background-color: var(--cp-badge-success-bg);
  color: #ffffff;
  font-size: var(--cp-h-badge-font-size);
  font-weight: 600;
  line-height: 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  overflow: visible;
}

.cp-header .cp-h-dropdown {
  padding: var(--cp-dropdown-padding-y) 0;
  border-radius: var(--cp-dropdown-border-radius);
  box-shadow: var(--cp-dropdown-shadow);
  z-index: var(--cp-z-dropdown);
  color: #212529;
  transform: none !important;
  top: 100% !important;
}

.cp-header .cp-h-dropdown.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}

/* Notification dropdown — measured: 420px min-width */
.cp-header .dropdown-notification {
  min-width: 420px;
  max-width: 100%;
}

.cp-header .dropdown-notification .dropdown-header,
.cp-header .dropdown-notification .dropdown-body {
  padding: 16px 20px;
}

.cp-header .dropdown-notification .list-group-item-action:active,
.cp-header .dropdown-notification .list-group-item-action:hover,
.cp-header .dropdown-notification .list-group-item-action:focus {
  background: #e8f4ff;
}

.cp-header .dropdown-notification .badge {
  font-size: 0.8125rem;
  padding: 0.43em 1em;
}

/* User profile dropdown — measured: 290px wide */
.cp-header .dropdown-user-profile {
  min-width: 290px;
  max-width: 100%;
}

/* Nav tabs inside user dropdown */
.cp-header .dropdown-user-profile .drp-tabs {
  display: flex;
  margin-bottom: 10px;
}

.cp-header .dropdown-user-profile .drp-tabs .nav-item {
  margin-bottom: 0;
}

.cp-header .dropdown-user-profile .drp-tabs .nav-item .nav-link {
  position: relative;
  padding: 0.7rem;
  font-weight: 500;
  color: #212529;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Remove Bootstrap's default 3-sided tab border; use underline-only approach */
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
}

.cp-header .dropdown-user-profile .drp-tabs .nav-item .nav-link i {
  font-size: 18px;
  margin: 0 4px;
}

.cp-header .dropdown-user-profile .drp-tabs .nav-link:hover {
  border-color: transparent;
  border-bottom-color: rgba(24, 144, 255, 0.3);
  color: var(--cp-active-color);
  background-color: rgba(24, 144, 255, 0.05);
}

.cp-header .dropdown-user-profile .drp-tabs .nav-link.active {
  color: var(--cp-active-color);
  border-color: transparent;
  border-bottom-color: var(--cp-active-color);
  background-color: rgba(24, 144, 255, 0.05);
}

/* Mobile: header full-width, show mobile-collapse button, hide desktop collapse button */
@media (max-width: 1024px) {
  .cp-header {
    left: 0;
    width: 100%;
  }
  .cp-header .cp-sidebar-collapse {
    display: none;
  }
  .cp-header .cp-sidebar-popup {
    display: flex;
  }
}

@media (min-width: 1025px) {
  .cp-header .cp-sidebar-popup {
    display: none;
  }
}

/* ==========================================================================
   Page container + content
   ========================================================================== */
.cp-container {
  position: relative;
  margin-left: var(--cp-sidebar-width);
  min-height: calc(100vh - var(--cp-header-height));
  top: var(--cp-header-height);
  transition: margin-left 0.15s;
}

.cp-sidebar.cp-sidebar-hide ~ .cp-container {
  margin-left: var(--cp-sidebar-collapsed-width);
}

.cp-content {
  padding: var(--cp-content-padding-top) var(--cp-content-padding-x) 0;
}

@media (max-width: 1024px) {
  .cp-container {
    margin-left: 0;
    top: var(--cp-header-height);
  }
  .cp-content {
    padding: 15px;
  }
  .cp-container .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   Breadcrumb / page header
   ========================================================================== */
.cp-page-header {
  display: flex;
  align-items: center;
  top: var(--cp-header-height);
  left: var(--cp-sidebar-width);
  right: 0;
  z-index: var(--cp-z-page-header);
  min-height: 55px;
  padding: 13px 0;
  background: transparent;
  border-radius: 4px;
}

.cp-breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  font-size: var(--cp-breadcrumb-font-size);
  color: var(--cp-header-color);
  line-height: 19.5px;
}

.cp-breadcrumb .cp-breadcrumb-item {
  display: list-item;
  font-size: var(--cp-breadcrumb-font-size);
  color: var(--cp-header-color);
}

.cp-breadcrumb .cp-breadcrumb-item + .cp-breadcrumb-item::before {
  content: "/";
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--cp-sidebar-caption-color);
}

.cp-breadcrumb .cp-breadcrumb-item.active {
  color: var(--cp-sidebar-caption-color);
}

/* ==========================================================================
   Page header banner
   ========================================================================== */
/* Shared "index page header" treatment: a flush band (no .card/.card-body
   wrapper) with a soft diagonal gradient wash, a solid left accent border,
   a large colored icon, and a bold title — replacing the old plain
   `<h2><i>...</i> Title</h2>` inside a `.card > .card-body`. Originated on
   the Planboard toolbar and the Reports index page (both hardcoded their
   own copy independently); promoted here so every index-style page header
   shares one class/token pair instead of re-declaring the same rules per
   page. Colours come from theme_foundation tokens so dark_theme.css only
   has to re-declare the variables. Pages needing extra page-specific
   control theming on top of this shell (e.g. the planboard toolbar's
   blue-tinted buttons) layer a second, page-scoped class alongside this
   one — see planner.css's `.planboard-controls`. */
.cp-header-banner {
  background-color: var(--cp-surface-bg);
  background-image: linear-gradient(
    135deg,
    rgba(var(--cp-header-accent-rgb), 0.12) 0%,
    rgba(var(--cp-header-accent-rgb), 0.03) 100%
  );
  border: 1px solid var(--cp-surface-border);
  border-left: 4px solid var(--cp-header-accent);
  border-radius: var(--cp-surface-radius);
  padding: 1.1rem 1.5rem;
  box-shadow: var(--cp-surface-shadow);
}

/* Tight band — no dangling bottom margin from the last content row. */
.cp-header-banner > *:last-child {
  margin-bottom: 0 !important;
}

/* Icon floats left; title + subtitle stack in a column to its right. Every
   header now carries a subtitle (see .cp-header-title-stack), so the icon is
   sized (in em, relative to the title's own font-size) to visually span the
   combined height of both lines rather than just the title — increase the
   icon's em multiplier here, not the title's font-size, if the two ever
   drift out of balance again. */
.cp-header-banner h1,
.cp-header-banner h2,
.cp-header-banner h3 {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.cp-header-banner h1 > i,
.cp-header-banner h1 > img,
.cp-header-banner h2 > i,
.cp-header-banner h2 > img,
.cp-header-banner h3 > i,
.cp-header-banner h3 > img {
  color: var(--cp-header-accent);
  font-size: 2.1em;
  line-height: 1;
  flex-shrink: 0;
}

.cp-header-banner img {
  border-radius: 50%;
}

.cp-header-title-stack {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.25;
}

.cp-header-banner h1 small,
.cp-header-banner h2 small,
.cp-header-banner h3 small {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

/* ── Per-module accent modifiers ────────────────────────────────────────
   Second class, applied alongside `.cp-header-banner` on a page's header
   div (e.g. `cp-header-banner cp-accent-crm`). Each one locally reassigns
   --cp-header-accent(-rgb) to that sidebar caption group's token pair (see
   the --cp-accent-* definitions in tokens.css / dark_theme.css) — every
   rule keyed off --cp-header-accent (the gradient/border/icon rules above,
   plus the button theming below) re-colors automatically, so no page needs
   its own copy of the banner or button CSS. Planboard and any page without
   a caption group wear `.cp-header-banner` alone and keep the root blue
   default. */
.cp-accent-duty {
  --cp-header-accent: var(--cp-accent-duty);
  --cp-header-accent-rgb: var(--cp-accent-duty-rgb);
}

.cp-accent-crm {
  --cp-header-accent: var(--cp-accent-crm);
  --cp-header-accent-rgb: var(--cp-accent-crm-rgb);
}

.cp-accent-pm {
  --cp-header-accent: var(--cp-accent-pm);
  --cp-header-accent-rgb: var(--cp-accent-pm-rgb);
}

.cp-accent-resources {
  --cp-header-accent: var(--cp-accent-resources);
  --cp-header-accent-rgb: var(--cp-accent-resources-rgb);
}

.cp-accent-reports {
  --cp-header-accent: var(--cp-accent-reports);
  --cp-header-accent-rgb: var(--cp-accent-reports-rgb);
}

.cp-accent-admin {
  --cp-header-accent: var(--cp-accent-admin);
  --cp-header-accent-rgb: var(--cp-accent-admin-rgb);
}

/* ── Cronos TIA integration accent modifiers ─────────────────────────────
   Item 2 follow-up (dev request) — one modifier per TIA integration card,
   each a subtle variant of the core module it feeds (see the token comment
   in tokens.css for the derivation): tia-sync reads close to Timesheets'
   accent, tia-holidays reads close to Planboard's own colour. Applied on
   .cp-integration-module-card alongside the compact-card layout treatment,
   same mechanism as the .cp-accent-* modifiers above. */
.cp-accent-tia-sync {
  --cp-header-accent: var(--cp-accent-tia-sync);
  --cp-header-accent-rgb: var(--cp-accent-tia-sync-rgb);
}

.cp-accent-tia-holidays {
  --cp-header-accent: var(--cp-accent-tia-holidays);
  --cp-header-accent-rgb: var(--cp-accent-tia-holidays-rgb);
}

/* ── Cronos TIA integration icon-glyph accents (WCAG 1.4.11 fix) ─────────
   The border modifiers above intentionally stay wired to --cp-header-accent
   (kept subtle, unchanged). The icon GLYPH gets its own, separately-tuned
   colour so legibility and border subtlety stop competing — see the token
   comments in tokens.css / dark_theme.css for the contrast rationale and
   measured ratios. Higher specificity than the base
   `.cp-integration-module-card-icon i` rule (two classes vs one) lets this
   win without touching that rule. */
.cp-accent-tia-sync .cp-integration-module-card-icon i {
  color: var(--cp-accent-tia-sync-icon);
}

.cp-accent-tia-holidays .cp-integration-module-card-icon i {
  color: var(--cp-accent-tia-holidays-icon);
}

/* ── Module summary cards (Organization > Modules) ──────────────────────
   Same --cp-header-accent(-rgb) system as the header banner above, applied
   to the "Modules" card grid on the Organization page so each card visually
   matches the accent of the pages it toggles (e.g. `cp-module-card
   cp-accent-crm` for the CRM card). A card with no `.cp-accent-*` modifier
   (Planning & Budget, whose flagship page is Planboard) keeps the root blue
   default, same as `.cp-header-banner` alone. */
.cp-module-card {
  border-top: 3px solid var(--cp-header-accent);
}

.cp-module-card .card-header {
  background-color: rgba(var(--cp-header-accent-rgb), 0.08);
}

.cp-module-card-icon {
  background-color: rgba(var(--cp-header-accent-rgb), 0.1);
}

.cp-module-card-icon i {
  color: var(--cp-header-accent);
}

.cp-module-card .card-footer a {
  color: var(--cp-header-accent);
  border-radius: var(--cp-surface-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cp-module-card .card-footer a:hover,
.cp-module-card .card-footer a:focus-visible {
  color: var(--cp-header-accent);
  background-color: rgba(var(--cp-header-accent-rgb), 0.12);
  text-decoration: underline;
}

/* ── Integration cards (Organization > Integrations) ─────────────────────
   Item 2 (dev request) — Cronos TIA tracks are integrations tied to the
   Cronos-enabled subscription, not full tool modules: they get a deliberately
   smaller, single-row card (icon + label + badge + toggle) instead of the
   header/body/footer layout of .cp-module-card, plus their own card
   container (.cp-integrations-card) so the section reads as visually
   separate from the Modules grid above it. */
.cp-integrations-card {
  border-top: 3px solid var(--cp-accent-admin);
}

.cp-integration-module-card {
  border-left: 3px solid var(--cp-header-accent);
}

.cp-integration-module-card-icon {
  width: 2rem;
  height: 2rem;
  background-color: rgba(var(--cp-header-accent-rgb), 0.1);
}

.cp-integration-module-card-icon i {
  color: var(--cp-header-accent);
  font-size: 0.9rem;
}

.cp-integration-module-card-description {
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Item 2 follow-up (dev request) — always-visible "what it does / where it
   feeds" line, distinct from .cp-integration-module-card-description above
   (which stays 1-line-clamped). Rendered once per integration card, never
   clipped, so the integration's purpose doesn't rely on a title= hover to
   be discoverable. */
.cp-integration-module-card-summary {
  font-size: 0.75rem;
  font-weight: 500;
}

.cp-integration-badge {
  background-color: rgba(var(--cp-accent-admin-rgb), 0.15);
  color: var(--cp-accent-admin);
  font-weight: 500;
}

.min-width-0 {
  min-width: 0;
}

/* ── Header-row search inputs ────────────────────────────────────────────
   Standardizes the header-row search box width app-wide to match Planboard's
   (`input-group input-group-sm` + this class, replacing a one-off inline
   `style="min-width: 350px;"` repeated per page). */
.cp-header-search {
  min-width: 350px;
}

/* ── Header-row button theming ───────────────────────────────────────────
   White-bg / accent-colored-icon / hover-fills-whole-button treatment for
   `.btn-outline-secondary` controls that live inside a `.cp-header-banner`
   header row (mobile-collapse toggle, New/Add/Edit CTAs, search-toggle,
   etc.) — originated on the Planboard toolbar (planner.css'
   `.planboard-controls`) and generalized here so every `.cp-header-banner`
   page gets it, keyed off the LOCAL --cp-header-accent so it re-colors per
   module via the `.cp-accent-*` modifiers above with zero per-page CSS.
   Background/border/text stay on the neutral --cp-control-* tokens (a
   plain white/dark control surface); only the icon and the hover wash pull
   from --cp-header-accent. Bootstrap 5.3 button CSS variables — no
   !important, no markup churn. */
.cp-header-banner .btn-outline-secondary {
  --bs-btn-color: var(--cp-control-color);
  --bs-btn-bg: var(--cp-control-bg);
  --bs-btn-border-color: var(--cp-control-border);
  --bs-btn-hover-color: var(--cp-header-accent);
  --bs-btn-hover-bg: rgba(var(--cp-header-accent-rgb), 0.12);
  --bs-btn-hover-border-color: var(--cp-header-accent);
  --bs-btn-active-color: var(--cp-header-accent);
  --bs-btn-active-bg: rgba(var(--cp-header-accent-rgb), 0.12);
  --bs-btn-active-border-color: var(--cp-header-accent);
  --bs-btn-disabled-color: var(--cp-control-muted-color);
  --bs-btn-disabled-border-color: var(--cp-control-border);
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cp-header-banner .btn-outline-secondary > i,
.cp-header-banner .btn-outline-secondary > .bi {
  color: var(--cp-header-accent);
}

.cp-header-banner .btn-outline-secondary:hover > i,
.cp-header-banner .btn-outline-secondary:hover > .bi,
.cp-header-banner .btn-outline-secondary:focus-visible > i,
.cp-header-banner .btn-outline-secondary:focus-visible > .bi {
  color: inherit;
}

.cp-header-banner .btn-outline-secondary:focus-visible {
  border-color: var(--cp-header-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--cp-header-accent-rgb), 0.3);
  outline: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.cp-footer {
  padding: var(--cp-footer-padding-y) 0;
  margin-top: var(--cp-footer-margin-top);
  margin-left: var(--cp-sidebar-width);
  position: relative;
  z-index: var(--cp-z-footer);
  transition: margin-left 0.15s;
}

.cp-sidebar.cp-sidebar-hide ~ .cp-footer {
  margin-left: var(--cp-sidebar-collapsed-width);
}

.cp-footer .cp-footer-wrapper {
  padding: 0 var(--cp-footer-wrapper-padding-x);
}

@media (max-width: 1024px) {
  .cp-footer {
    margin-left: 0;
  }
}