/**
 * d-aca admin shell (chrome + base components)
 *
 * Contract: docs/design/daca-css-architecture.md
 * Tokens:  daca/tokens.css (loaded by header and/or @import below)
 * Entry:   header loads montserrat → tokens → shell → page → dark legacy
 *
 * Ownership: header, sidebar, page-header, breadcrumb, type scale,
 *            panels/tables/forms/buttons/alerts base contracts.
 * Not here: page-only dashboard widget geometry (dashboard.css),
 *           extension skins (journal, seo-pack, …).
 *
 * Resilience: @import tokens so var(--*) never empty if header is stale (OCMOD).
 */
/* -------------------------------------------------------------------------
 * IMPORTANT WHITELIST POLICY (d-aca shell)
 * Every remaining !important must carry /* vendor: <OC|BS3|densify|...> */.
 * Do not add new !important without that tag. Prefer tokens + cascade first.
 * Surfaces (background/border/color): 0 !important — achieved via fine probes.
 * ------------------------------------------------------------------------- */

@import url('tokens.css');
/* ---- Base type (Montserrat OFL) ----
 *
 * Real weights: 400 body ┬À 500 UI chrome ┬À 600/700 titles.
 * font-synthesis: none ÔÇö never invent missing weights.
 *
 * -webkit-font-smoothing: largely a no-op on Chrome/Edge Windows (not in
 * Computed). macOS WebKit still benefits; we keep sensible values.
 */

html {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html, body {
  font-family: var(--font-brand);
  font-weight: 400; /* Montserrat Regular */
  font-size: 15px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--text-primary);
  background: var(--bg-page);
  font-size: 15px;
}

/* vendor: OC stylesheet.css #container/#header hex — tokens win by html+id */
html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #container,
body:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #container {
  background: var(--bg-page);
}

html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #header,
body:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #header {
  background: var(--header-bg);
}

html:not(:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon)) {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Never invent missing weights (pixelated faux-bold) */
body,
body * {
  font-synthesis: none;
}

/* Muted / secondary ÔÇö Regular, not a thin Light face */
.help-block,
.text-muted,
.form-text,
#content .text-muted,
#footer {
  font-family: var(--font-brand);
  font-weight: 400;
}

/* UI chrome: Medium (500) for controls; Bold only for true emphasis elsewhere */
#content label,
#content .control-label,
#content .btn,
#content .panel-title,
#content .nav-tabs > li > a,
#menu > li > a,
#header .nav > li > a {
  font-family: var(--font-brand);
  font-weight: 500;
}

/* KPI labels: Regular + slight tracking */
#content.dashboard-page .dashboard-kpi-label,
.dashboard-kpi-label {
  font-family: var(--font-brand);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Floor: content UI ~15px (KPI labels stay denser). Nav chrome densified below. */
#content,
#content .table,
#content .form-control,
#content label,
#content .control-label,
#content .btn,
#content .help-block,
#content .alert,
#content .nav-tabs > li > a,
#content .list-group-item,
#content .dropdown-menu {
  font-size: 15px;
  font-family: var(--font-brand);
  font-weight: 400;
}

/* Header bar icons/links — denser than body */
#header .nav > li > a {
  font-size: 13px !important;
  font-family: var(--font-brand);
  font-weight: 400;
}

#content .table thead td,
#content .table thead th {
  font-size: 13px; /* headers stay compact; body cells inherit 15px */
}

#content .table > tbody > tr > td {
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6,
.page-header h1,
.panel-title {
  font-family: var(--font-brand-bold);
  font-weight: 700;
}

.btn,
label,
.control-label,
.nav-tabs > li > a,
#menu > li > a {
  font-family: var(--font-brand-medium);
}

/* ---- Shell ---- */
/* vendor: OC #f6f6f6 / #fff — tokens own theme surfaces */
#container,
#content,
#footer {
  background: var(--bg-page);
  color: var(--text-primary);
}

#header {
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 0 none;
  box-shadow: none;
  box-sizing: border-box;
  height: var(--header-h, var(--admin-header-height, 60px));
  position: relative;
}
#header::after,
#header.navbar::after,
#header.navbar-static-top::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--header-fillet-h, 2px) !important;
  background: var(--filete) !important; /* vendor: OC navbar ::after */
  pointer-events: none !important;
  z-index: 5 !important;
  display: block !important;
  opacity: 1 !important;
}

/*
 * Chrome stacking SoT — ALL admin pages (contract §4.2):
 *   #header            var(--z-header) fixed
 *   #column-left open  var(--z-sidebar-open)
 * Owner: shell. Seller mirrors in seller-theme.css. dashboard.css only page layers below.
 */
#header,
#header.navbar,
#header.navbar-static-top {
  position: fixed !important; /* vendor: OC nav/header stacking */
  top: 0 !important; /* vendor: OC nav/header stacking */
  left: 0 !important; /* vendor: OC nav/header stacking */
  right: 0 !important; /* vendor: OC nav/header stacking */
  width: 100% !important; /* vendor: OC header chrome size */
  margin: 0 !important; /* vendor: OC header chrome size */
  z-index: var(--z-header, 10050) !important; /* vendor: OC nav/header stacking */
  isolation: isolate !important; /* vendor: OC nav/header stacking */
  transform: none !important; /* vendor: OC nav/header stacking */
  -webkit-transform: none !important; /* vendor: OC nav/header stacking */
  box-shadow:
    inset 0 calc(-1 * var(--header-fillet-h, 2px)) 0 var(--filete),
    0 4px 12px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

/* Fixed header out of flow — reserve exact header height (no 1px gap before breadcrumb) */
#container:has(> #header) {
  padding-top: var(--admin-header-offset, var(--header-h, var(--admin-header-height, 60px))) !important;
  box-sizing: border-box;
}

/* Flex row: [☰] [logo] …… [theme | user] — same as seller header */
#header .admin-header-inner.container-fluid,
#header .container-fluid.admin-header-inner {
  display: flex !important; /* vendor: OC header float to flex */
  align-items: stretch;
  flex-wrap: nowrap;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  height: var(--header-h, var(--admin-header-height, 60px)) !important; /* vendor: OC header chrome size */
  min-height: var(--header-h, var(--admin-header-height, 60px)) !important; /* vendor: OC header chrome size */
  max-height: var(--header-h, var(--admin-header-height, 60px)) !important; /* vendor: OC header chrome size */
  width: 100%;
  max-width: none;
  /* visible: user dropdown must paint below the 60px bar (was clipped) */
  overflow: visible !important; /* vendor: OC overflow clip */
}

/* Profile / store dropdown — never clip absolute .dropdown-menu */
#header,
#header .navbar-right,
#header .admin-header-inner .navbar-right,
#header .admin-header-inner.container-fluid,
#header .container-fluid.admin-header-inner {
  overflow: visible !important; /* vendor: OC overflow clip */
}
#header .navbar-right > li.dropdown,
#header .navbar-right > li.dropdown.open,
#header .navbar-right > li.admin-user-dropdown {
  overflow: visible !important; /* vendor: OC overflow clip */
  position: relative !important; /* vendor: OC nav/header stacking */
  z-index: var(--z-header, 10050) !important; /* vendor: OC nav/header stacking */
}

/* Menu width tracks the toggle (admin name), not min-width 160px Bootstrap default */
#header .navbar-right > li.admin-user-dropdown > .dropdown-menu,
#header .navbar-right > li.admin-user-dropdown.open > .dropdown-menu,
#header .navbar-right > li.dropdown > .dropdown-menu.admin-user-menu {
  display: none;
  position: absolute !important; /* vendor: OC nav/header stacking */
  top: 100% !important; /* vendor: OC nav/header stacking */
  right: 0 !important; /* vendor: OC nav/header stacking */
  left: auto !important; /* vendor: OC nav/header stacking */
  z-index: var(--z-header-dropdown, 10060) !important; /* vendor: OC nav/header stacking */
  float: none;
  min-width: 0 !important; /* vendor: OC header chrome size */
  width: 100% !important; /* vendor: OC header chrome size */
max-width: 100%;
  box-sizing: border-box;
  padding: 6px 0;
  margin: 0;
  /* Dark/light via tokens — never Bootstrap #fff */
  background: var(--bg-elevated);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
  color: var(--text-primary);
}

#header .navbar-right > li.admin-user-dropdown.open > .dropdown-menu,
#header .navbar-right > li.dropdown.open > .dropdown-menu.admin-user-menu {
  display: block !important; /* vendor: OC header float to flex */
}

#header .navbar-right > li.admin-user-dropdown > .dropdown-menu > li > a,
#header .admin-user-menu > li > a {
  color: var(--text-primary);
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden !important; /* vendor: OC overflow clip */
  text-overflow: ellipsis;
  max-width: 100%;
}

#header .navbar-right > li.admin-user-dropdown > .dropdown-menu > li > a:hover,
#header .navbar-right > li.admin-user-dropdown > .dropdown-menu > li > a:focus,
#header .admin-user-menu > li > a:hover,
#header .admin-user-menu > li > a:focus {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

#header .navbar-right > li.admin-user-dropdown > .dropdown-menu > .dropdown-header,
#header .admin-user-menu > .dropdown-header {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Beat Bootstrap mobile white panel */
@media (max-width: 767px) {
  #header .navbar-nav .open > .dropdown-menu.admin-user-menu,
  #header .navbar-right > li.admin-user-dropdown.open > .dropdown-menu {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    width: 100% !important; /* vendor: OC header chrome size */
    min-width: 0 !important; /* vendor: OC header chrome size */
  }
}
/* #container { overflow:hidden } must not hide header menus */
#container {
  overflow: visible !important; /* vendor: OC overflow clip */
}

@media (max-width: 991px) {
  #header,
  #header.navbar,
  #header.navbar-static-top {
    height: var(--header-h-compact, 56px) !important;
    min-height: var(--header-h-compact, 56px) !important;
    max-height: var(--header-h-compact, 56px) !important;
  }
  #header .admin-header-inner.container-fluid,
  #header .container-fluid.admin-header-inner {
    height: var(--header-h-compact, 56px) !important; /* vendor: OC header chrome size */
    min-height: var(--header-h-compact, 56px) !important; /* vendor: OC header chrome size */
    max-height: var(--header-h-compact, 56px) !important; /* vendor: OC header chrome size */
  }
  #container:has(> #header) {
    padding-top: var(--header-h-compact, 56px) !important;
  }
  html {
    --admin-header-offset: var(--header-h-compact, 56px);
  }
}

#header .admin-header-inner .navbar-right {
  margin-left: auto;
  float: none;
  display: flex !important; /* vendor: OC header float to flex */
  align-items: stretch;
  height: 100%;
}

#header #header-logo .admin-header-rail {
  border-right: 1px solid var(--header-hairline, var(--border-subtle));
}

#header .navbar-right > li {
  border-left: 1px solid var(--header-hairline, var(--border-subtle));
}

#header .navbar-header,
#button-menu {
  border-color: var(--header-hairline, var(--border-subtle));
}

/*
 * Header logo: rail | gold divider | brand slot
 * Align wordmark with breadcrumb home via flex + negative margin crop
 * (absolute left was unreliable; transparent pad made "D" sit too far right).
 *
 * Light: transparent + navy type (filter). Dark: cream mark.
 */
#header #header-logo.navbar-header,
#header .navbar-header {
  display: flex !important; /* vendor: OC header float to flex */
  flex-direction: row;
  align-items: stretch;
  float: left;
  width: auto !important; /* vendor: OC header chrome size */
  min-width: 0 !important; /* vendor: OC header chrome size */
max-width: none;
  height: var(--admin-header-height);
  padding: 0;
  margin: 0;
  overflow: hidden !important; /* vendor: OC overflow clip */
  border-right: none;
  position: relative;
  background: transparent;
}

/* Empty strip matching #column-left; divider on its right edge */
#header #header-logo .admin-header-rail {
  display: block;
  flex: 0 0 var(--admin-sidebar-width);
  width: var(--admin-sidebar-width);
  min-width: var(--admin-sidebar-width);
  max-width: var(--admin-sidebar-width);
  height: 100%;
  border-right: 1px solid var(--divider);
  box-sizing: border-box;
  background: transparent;
}

#header #header-logo .admin-header-rail {
  background: var(--sidebar-bg);
  border-right-color: var(--header-hairline, var(--sidebar-border));
}

/*
 * Brand slot: padding-left = --admin-content-gutter (same as breadcrumb home).
 * Img cropped so the first ink pixel of "D" sits exactly on that line.
 */
#header #header-logo .navbar-brand,
#header .navbar-brand {
  display: flex !important; /* vendor: OC header float to flex */
  flex-direction: row;
  align-items: center; /* vertical center of mark */
  justify-content: flex-start;
  float: none;
  position: relative !important; /* vendor: OC nav/header stacking */
  width: calc(var(--admin-content-gutter) + var(--admin-logo-mark-width) + 12px) !important; /* vendor: OC header chrome size */
  min-width: 0 !important; /* vendor: OC header chrome size */
max-width: none;
  height: var(--admin-header-height) !important; /* vendor: OC header chrome size */
  min-height: var(--admin-header-height);
  max-height: var(--admin-header-height);
  padding: 0 0 0 var(--admin-content-gutter);
  margin: 0;
  line-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
}

@media (max-width: 767px) {
  #header #header-logo.navbar-header,
  #header .navbar-header,
  #header #header-logo .navbar-brand,
  #header .navbar-brand {
    height: auto !important; /* compact SoT: --header-h-compact, not OC 45px */
    min-height: 0;
    max-height: none;
  }
}

#header .navbar-right > li {
  border-left: 1px solid var(--divider);
}

#header .nav > li > a {
  color: var(--text-secondary);
}

#header .nav > li > a:hover,
#header .nav > li > a:focus {
  background: var(--bg-muted);
  color: var(--accent);
}

#button-menu {
  color: var(--text-secondary);
  border-right: 1px solid var(--divider);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Mobile/tablet nav (≤991) — ☰ stays leftmost; look matches desktop sidebar rail
 * (dark surface + cream/gold icon), not a solid navy chip.
 */
@media (max-width: 991px) {
  html:not(.wk-marketplace) #header #button-theme-toggle,
  html:not(.wk-marketplace) #button-theme-toggle,
  html:not(.wk-marketplace) #header #button-notifications,
  html:not(.wk-marketplace) #header a#button-notifications {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    margin: 0 6px;
  }

  html:not(.wk-marketplace) #header #button-theme-toggle #icon-theme-toggle,
  html:not(.wk-marketplace) #button-theme-toggle #icon-theme-toggle,
  html:not(.wk-marketplace) #header #button-notifications .fa {
    font-size: 16px;
  }

  #header .navbar-right {
    height: 100% !important; /* vendor: OC header chrome size */
    align-items: stretch;
  }

  #header .navbar-right > li {
    height: 100% !important; /* vendor: OC header chrome size */
  }

  /* ☰ leftmost (before logo). Size/color: corte 1 block below (html:not(.wk-marketplace)). */
  html:not(.wk-marketplace) #header #button-menu,
  html:not(.wk-marketplace) #button-menu,
  html:not(.wk-marketplace) #button-menu.hidden-md,
  html:not(.wk-marketplace) #button-menu.hidden-lg {
    display: flex !important;
    float: none;
    order: -1;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    width: 48px !important; /* vendor: OC header chrome size */
    min-width: 48px !important; /* vendor: OC header chrome size */
    max-width: 48px !important; /* vendor: OC header chrome size */
    height: 100% !important; /* vendor: OC header chrome size */
    min-height: 100% !important; /* vendor: OC header chrome size */
    max-height: none !important; /* vendor: OC header chrome size */
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--sidebar-border, var(--divider));
    border-radius: 0;
    /* Same surface as desktop #column-left / header rail */
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    font-size: 20px !important; /* vendor: OC menu icon size */
    line-height: 1;
    box-shadow: none;
    box-sizing: border-box;
  }



  #header #header-logo.navbar-header {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  #header #button-menu .fa,
  #button-menu .fa,
  #button-menu > span.fa {
    display: block;
    line-height: 1;
    font-size: 20px !important; /* vendor: OC menu icon size */
    color: inherit;
    text-shadow: none;
  }

  #header #button-menu:hover,
  #header #button-menu:focus,
  #button-menu:hover,
  #button-menu:focus {
    background: var(--sidebar-hover);
    color: var(--sidebar-active);
    outline: none;
  }



  /* Open state — gold active (desktop nav active feel) */
  body.admin-nav-open #header #button-menu,
  body.admin-nav-open #button-menu,
  #column-left.active ~ #header #button-menu,
  #header #button-menu[aria-expanded="true"],
  #button-menu[aria-expanded="true"] {
    background: var(--sidebar-bg);
    color: var(--sidebar-active);
    box-shadow: inset 0 -2px 0 0 var(--sidebar-active) !important; /* vendor: OC menu active */
  }

  @media (max-width: 767px) {
    #header #button-menu,
    #button-menu {
      height: var(--header-h-compact, 56px) !important; /* vendor: OC header chrome size */
      min-height: var(--header-h-compact, 56px) !important; /* vendor: OC header chrome size */
      max-height: var(--header-h-compact, 56px) !important; /* vendor: OC header chrome size */
    }
  }

  /* Free left edge for ☰ — hide desktop rail spacer */
  #header #header-logo .admin-header-rail {
    display: none !important; /* vendor: header dual logo/theme */
    width: 0 !important; /* vendor: OC header chrome size */
    min-width: 0 !important; /* vendor: OC header chrome size */
    max-width: 0 !important; /* vendor: OC header chrome size */
    border: 0;
  }

  #header #header-logo.navbar-header {
    flex: 1 1 auto;
    min-width: 0;
  }

  #header,
  #header.navbar,
  #header.navbar-static-top {
    /* Must stay above drawer (5000). Never drop to 1200. */
    position: fixed !important; /* vendor: OC nav/header stacking */
    top: 0 !important; /* vendor: OC nav/header stacking */
    z-index: var(--z-header, 10050) !important; /* vendor: OC nav/header stacking */
    isolation: isolate !important; /* vendor: OC nav/header stacking */
  }

  /* True off-canvas drawer (not a -59px peek) */
  #column-left,
  #column-left:not(.active) {
    position: fixed !important; /* vendor: OC nav/header stacking */
    top: 0 !important; /* vendor: OC nav/header stacking */
    bottom: 0 !important; /* vendor: OC nav/header stacking */
    left: calc(-1 * var(--admin-sidebar-expanded, 220px)) !important; /* vendor: OC nav/header stacking */
    width: var(--admin-sidebar-expanded, 220px) !important; /* vendor: OC sidebar chrome size */
    max-width: min(220px, 86vw) !important; /* vendor: OC sidebar chrome size */
    height: 100% !important; /* vendor: OC sidebar chrome size */
    min-height: 100% !important; /* vendor: OC sidebar chrome size */
    margin: 0;
    float: none;
    /* Match measured header (mobile ~46px); JS --admin-header-offset preferred */
    padding-top: var(--admin-header-offset, var(--admin-header-height, 60px));
    /* Above sticky title/panels; under #header (--z-header) */
    z-index: var(--z-sidebar-open, 5000) !important; /* vendor: OC nav/header stacking */
    box-shadow: none;
    transition: left 0.22s ease, box-shadow 0.22s ease;
    overflow-y: auto !important; /* vendor: OC overflow clip */
    overflow-x: hidden !important; /* vendor: OC overflow clip */
  }

  #column-left:hover,
  #column-left:focus-within {
    /* no hover-expand on touch */
    left: calc(-1 * var(--admin-sidebar-expanded, 220px)) !important; /* vendor: OC nav/header stacking */
    width: var(--admin-sidebar-expanded, 220px) !important; /* vendor: OC sidebar chrome size */
    box-shadow: none;
  }

  #column-left.active,
  #column-left.active:hover,
  #column-left.active:focus-within {
    left: 0 !important; /* vendor: OC nav/header stacking */
    width: var(--admin-sidebar-expanded, 220px) !important; /* vendor: OC sidebar chrome size */
    max-width: min(220px, 86vw) !important; /* vendor: OC sidebar chrome size */
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.35) !important; /* vendor: OC/BS3 override */
  }

  #column-left + #content,
  #column-left ~ #content,
  #content,
  #column-left.active + #content,
  #column-left.active ~ #content,
  #column-left + #content + #footer {
    margin-left: 0;
    left: 0 !important; /* vendor: OC nav/header stacking */
    width: auto !important; /* vendor: OC sidebar chrome size */
max-width: none;
  }

  /* Full labels in drawer (not icon-only rail) */
  #column-left #menu > li > a {
    font-size: 12px;
    line-height: 1.25;
    padding: 10px 14px;
    text-align: left !important; /* vendor: OC/BS3 override */
  }

  #column-left #menu > li > a > i {
    font-size: 13px;
    width: 16px !important; /* vendor: OC sidebar chrome size */
    margin-right: 8px;
    display: inline-block !important; /* vendor: OC sidebar display */
    float: none;
  }

  #column-left #menu > li > a.parent:after {
    display: inline-block !important; /* vendor: OC sidebar display */
  }

  #column-left #navigation {
    font-size: 10px;
    padding: 10px 14px;
    text-align: left !important; /* vendor: OC/BS3 override */
  }

  /*
   * Scrim / overlay — DOM #admin-nav-overlay (seller frontend parity).
   * Dim + blur; tap closes. Stack: overlay 1090 < drawer 1100 < header 1200.
   */
  #admin-nav-overlay {
    display: none;
    position: fixed !important; /* vendor: OC nav/header stacking */
    top: 0 !important; /* vendor: OC nav/header stacking */
    right: 0 !important; /* vendor: OC nav/header stacking */
    bottom: 0 !important; /* vendor: OC nav/header stacking */
    left: 0 !important; /* vendor: OC nav/header stacking */
    width: 100% !important; /* vendor: OC sidebar chrome size */
    height: 100% !important; /* vendor: OC sidebar chrome size */
    z-index: 1090 !important; /* vendor: OC nav/header stacking */
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 20, 30, 0.48);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }

  body.admin-nav-open #admin-nav-overlay,
  #admin-nav-overlay.is-open {
    display: block !important; /* vendor: OC sidebar display */
  }

  body.admin-nav-open {
    overflow: hidden !important; /* vendor: OC overflow clip */
  }
}

/* Desktop lead matches the phone: 8px inset, 44px ☰, 32px wordmark, centered on the fillet. */
@media (min-width: 992px) {
  html:not(.wk-marketplace) #header .admin-header-inner.container-fluid,
  html:not(.wk-marketplace) #header .container-fluid.admin-header-inner {
    padding: 0 8px var(--header-fillet-h, 2px);
    align-items: center;
    box-sizing: border-box;
  }

  html:not(.wk-marketplace) #header #button-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    float: none;
    order: -1;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    margin: 0 8px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
  }
}

/*
 * Theme toggle — must read as a control (not muted chrome).
 * Light: navy on soft cream chip; Dark: gold on elevated chip.
 * Vertical centering via parent li flex (no large margin that breaks 45px mobile bar).
 */
#header .navbar-right > li {
  display: flex !important; /* vendor: OC header float to flex */
  align-items: center;
  align-self: stretch;
  height: auto !important; /* vendor: OC header chrome size */
  min-height: 100%;
}

#header .navbar-right > li > a:not(#button-theme-toggle) {
  display: flex !important; /* vendor: OC header float to flex */
  align-items: center;
  height: 100% !important; /* vendor: OC header chrome size */
  box-sizing: border-box;
}

#header #button-theme-toggle,
#button-theme-toggle {
  display: inline-flex !important; /* vendor: OC header float to flex */
  align-items: center;
  justify-content: center;
  align-self: center;
  width: var(--title-bar-btn, 35px);
  height: var(--title-bar-btn, 35px);
  min-width: var(--title-bar-btn, 35px);
  max-height: calc(100% - 8px);
  margin: 0 12px;
  padding: 0;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  box-shadow: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Calle C8 / contrato geometría 36 — staff only; vendor keeps seller-theme. */
html:not(.wk-marketplace) #header #button-theme-toggle,
html:not(.wk-marketplace) #button-theme-toggle,
html:not(.wk-marketplace) #header #button-notifications,
html:not(.wk-marketplace) #header a#button-notifications {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  margin: 0 6px;
  box-sizing: border-box;
}

#header #button-theme-toggle #icon-theme-toggle,
#button-theme-toggle #icon-theme-toggle {
  font-size: 14px;
  line-height: 1;
  width: auto;
  color: inherit;
}

#header #button-theme-toggle:hover,
#header #button-theme-toggle:focus,
#button-theme-toggle:hover,
#button-theme-toggle:focus {
  color: inherit;
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Login vault — D-ACÁ Ops (tactical private gate)
   -------------------------------------------------------------------------- */
#content.admin-login-page {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 16px 24px;
  box-sizing: border-box;
}

.admin-login-stage {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.admin-login-panel {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
}

.admin-login-heading {
  padding: 28px 24px 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-login-logo {
  display: block;
  margin: 0 auto 16px;
  width: auto;
  height: 44px;
  max-width: min(200px, 100%);
  max-height: 44px;
  object-fit: contain;
  object-position: center;
}

.admin-login-logo-light {
  display: none !important; /* vendor: header dual logo/theme */
}

.admin-login-logo-dark {
  display: block !important; /* vendor: login dual logo */
}

html:not(:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon)) .admin-login-logo-dark {
  filter: brightness(0) saturate(100%) invert(16%) sepia(42%) saturate(1400%) hue-rotate(199deg) brightness(92%) contrast(92%);
}

html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) .admin-login-logo-dark {
  filter: none;
}

/* Brand mark — not a help sentence */
.admin-login-brand {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-primary);
}

.admin-login-kicker {
  margin: 6px 0 0;
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-secondary, #9a9ea2);
}

.admin-login-body {
  padding: 22px 24px 26px;
}

.admin-login-form .admin-login-field {
  margin-bottom: 16px;
}

.admin-login-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #9a9ea2);
  line-height: 1.2;
}

.admin-login-panel .form-control {
  height: 44px !important; /* vendor: OC geometry */
  min-height: 44px !important; /* vendor: OC geometry */
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  letter-spacing: 0.01em;
}

.admin-login-recover {
  margin-top: 8px;
  text-align: right;
}

.admin-login-recover a {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #9a9ea2);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.admin-login-recover a:hover,
.admin-login-recover a:focus {
  color: var(--link-hover);
  text-decoration: none;
}

.admin-login-submit.btn {
  margin-top: 8px;
  width: 100% !important; /* vendor: OC geometry */
  height: 46px !important; /* vendor: OC geometry */
  min-height: 46px !important; /* vendor: OC geometry */
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 8px;
  border: 0;
}

.admin-login-alert {
  margin-bottom: 14px;
  font-size: 13px;
  border-radius: 8px;
}

.admin-login-panel.panel-default {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
  color: var(--text-primary);
}

.admin-login-heading {
  background: var(--bg-surface);
  border-bottom-color: var(--border-subtle);
}

.admin-login-brand {
  color: var(--title-bar-fg);
}

.admin-login-kicker {
  color: var(--text-secondary);
}

.admin-login-body {
  background: var(--bg-surface);
}

.admin-login-panel .form-control {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-fg, var(--text-primary));
  box-shadow: none;
}

.admin-login-panel .form-control:focus {
  background-color: var(--bg-surface);
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.admin-login-submit.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.admin-login-submit.btn-primary:hover,
.admin-login-submit.btn-primary:focus {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-hover-fg);
}





@media (max-width: 480px) {
  #content.admin-login-page {
    padding: 20px 12px 16px;
    min-height: calc(100vh - 100px);
  }

  .admin-login-heading {
    padding: 22px 18px 14px;
  }

  .admin-login-body {
    padding: 18px 18px 22px;
  }

  .admin-login-brand {
    font-size: 20px;
    letter-spacing: 0.12em;
  }
}

#header .dropdown-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
}

#header .dropdown-menu > li > a {
  color: var(--text-primary);
}

#header .dropdown-menu > li > a:hover {
  background: var(--bg-muted);
  color: var(--accent);
}

#header .dropdown-header {
  color: var(--text-secondary);
}

#header .dropdown-menu .divider {
  background-color: var(--divider);
  margin: 6px 0;
  height: 1px;
  border: 0;
  opacity: 1;
}

/* ---- Sidebar rail ----
 * Light: navy + cream icons (readable on storefront cream pages).
 * Dark: black + gold (tokens) — do NOT keep navy locked in dark.
 */
#column-left {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  width: var(--admin-sidebar-width) !important; /* vendor: OC sidebar chrome size */
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.18s ease, box-shadow 0.18s ease;
  z-index: var(--z-sidebar, 20);
  color: var(--sidebar-text);
}

/*
 * Base off-canvas fallback (overridden by ≤991 drawer + ≥992 rail).
 * Drawer/rail media blocks own final left/width.
 */
#column-left:not(.active) {
  left: calc(-1 * var(--admin-sidebar-expanded, 220px)) !important; /* vendor: OC nav/header stacking */
}

#column-left.active {
  left: 0; /* vendor: OC #column-left.active left */
  width: var(--admin-sidebar-expanded);
}

/* Desktop ≥992: narrow icon rail. The ☰ sits left of the wordmark, so the rail spacer is not used. */
@media (min-width: 992px) {
  #column-left,
  #column-left:not(.active) {
    left: 0;
    width: var(--admin-sidebar-width);
  }

  #column-left:focus-within,
  #column-left.active,
  #column-left.active:hover,
  html:has(#content.dashboard-page) #column-left.active,
  body:has(#content.dashboard-page) #column-left.active {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    padding-top: 0;
    width: 240px;
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.22);
    /* Above #header (10050) so the lead replaces the header ☰ + logo. */
    z-index: 10070;
  }

  body:has(#column-left:focus-within) #admin-nav-overlay,
  body:has(#column-left.active) #admin-nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 10060;
    margin: 0;
    background: rgba(15, 20, 30, 0.48);
  }

  #column-left:focus-within .admin-guide-head,
  #column-left.active .admin-guide-head {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--header-h, 60px);
    padding: 0 8px var(--header-fillet-h, 2px);
    gap: 0;
    background: var(--header-bg);
    color: var(--header-fg);
  }

  #column-left:focus-within .admin-guide-head .admin-nav-close,
  #column-left.active .admin-guide-head .admin-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    align-self: center;
    width: 44px;
    height: 44px;
    margin: 0 8px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  #column-left:focus-within .admin-guide-head .daca-logo-mark,
  #column-left.active .admin-guide-head .daca-logo-mark {
    height: 32px;
    width: calc(32px * 378.5 / 107.3);
  }

  #column-left + #content,
  #column-left ~ #content,
  #column-left.active + #content,
  #column-left.active ~ #content,
  #column-left + #content + #footer,
  #column-left ~ #footer {
    left: 0;
    margin-left: var(--admin-sidebar-width);
  }

  #column-left ~ #footer {
    width: calc(100% - var(--admin-sidebar-width));
    box-sizing: border-box;
  }

  #header #header-logo .admin-header-rail {
    display: none;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    border: 0;
  }

  html:not(.wk-marketplace) #header #header-logo .navbar-brand,
  html:not(.wk-marketplace) #header .navbar-brand {
    padding-left: 0;
    width: auto;
  }
}

/*
 * #navigation label — same as seller front (seller-theme.css):
 * dark translucent strip on navy/black rail + cream muted type.
 * Do NOT use --bg-muted (cream in light) — breaks contrast on navy rail.
 */
/* The rail's own fa-bars row is gone. The ☰ lives in the header, and again in the guide lead when open. */
#column-left > #navigation {
  display: none !important;
}

#navigation {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.25);
  color: var(--sidebar-muted);
  border-bottom: 1px solid var(--sidebar-border);
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-brand);
  font-size: 10px !important; /* densify — beat stylesheet.css */
  font-weight: 500;
  line-height: 1.3;
  box-sizing: border-box;
}

#navigation .fa,
#navigation i {
  color: inherit;
  margin-right: 6px;
  font-size: 11px;
}

#navigation .nav-label,
#navigation small {
  display: inline-block;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  color: inherit;
  font-size: 10px;
  font-weight: 500;
}



#menu > li {
  border-bottom: 1px solid var(--sidebar-border);
}

/*
 * Sidebar nav type densify (expanded rail / mobile drawer):
 *   top + child labels 12px, icons 13px (was 14–16 / 15)
 * Collapsed rail still uses font-size:0 on labels (icons only).
 */
#column-left #menu > li > a,
#menu > li > a,
#menu > li > button.parent,
#menu > li > span.parent {
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px !important; /* densify — beat stylesheet.css 14px + cache */
  line-height: 1.25 !important;
  font-family: var(--font-brand);
  font-weight: 400;
}

#column-left #menu > li > a > i,
#column-left #menu > li > a .fa,
#menu > li > a > i,
#menu > li > a .fa,
#menu > li > button.parent > i,
#menu > li > span.parent > i {
  color: inherit; /* cream via --sidebar-text */
  flex: 0 0 16px;
  width: 16px;
  font-size: 13px !important; /* densify */
  text-align: center;
}

#column-left #menu li li a,
#menu li li a,
#menu li li button.parent {
  font-size: 12px !important; /* densify */
  line-height: 1.25 !important;
  font-family: var(--font-brand);
  font-weight: 400;
}

#column-left #menu li li a:before,
#menu li li a:before,
#menu li li button.parent:before {
  font-size: 11px !important;
}

#menu > li > a:hover,
#menu > li > button.parent:hover,
#menu > li > button.parent:focus {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-active);
}

#menu > li > a:hover > i,
#menu > li > a:hover .fa {
  color: inherit;
}

#menu > li.active > a,
#menu > li.open > a,
#menu > li.active > button.parent,
#menu > li.open > button.parent {
  color: var(--sidebar-active);
  background-color: rgba(0, 0, 0, 0.28);
}

#menu > li.active > a > i,
#menu > li.active > a .fa {
  color: inherit;
}

#menu > li > ul {
  background-color: rgba(0, 0, 0, 0.22);
}

#menu li li a,
#menu li li button.parent {
  color: var(--sidebar-muted);
  white-space: nowrap;
}

#menu li li a:hover,
#menu li li.active > a,
#menu li li button.parent:hover,
#menu li li button.parent:focus {
  color: var(--sidebar-active);
  background-color: var(--sidebar-hover);
}

/* Journal SVG on navy rail — cream/gold mark, no navy filter */
#menu #journal3-theme > a > i.journal3-icon,
#menu > li > a > i.journal3-icon {
  filter: none;
}

/* Collapsed rail: icons only (desktop default / non-hover) — centered in 59px rail */
@media (min-width: 992px) {
  #column-left:not(.active):not(:hover):not(:focus-within) #navigation {
    font-size: 0 !important; /* vendor: OC collapsed sidebar text hide */
    padding: 10px 0 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  /* fa-bars: kill expanded mr:6 so glyph sits on rail center */
  #column-left:not(.active):not(:hover):not(:focus-within) #navigation .fa,
  #column-left:not(.active):not(:hover):not(:focus-within) #navigation i {
    font-size: 13px !important;
    color: var(--sidebar-muted);
    margin: 0 auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    width: auto !important;
    float: none !important;
  }

  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > a,
  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > button.parent,
  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > span.parent {
    font-size: 0 !important; /* vendor: OC collapsed sidebar text hide */
    line-height: 0 !important;
    padding: 11px 0 !important;
    text-align: center !important;
    justify-content: center !important; /* flex L1 row → center icon */
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Beat densify 13px !important + flex:0 0 16px so icon is truly centered */
  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > a > i,
  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > a .fa {
    font-size: 14px !important;
    width: 16px !important; /* vendor: OC sidebar chrome size */
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
    float: none !important;
    vertical-align: middle;
    flex: 0 0 16px !important;
    order: 0 !important;
  }

  /* Journal3 uses a background SVG (not FA glyph) — keep box size or it collapses to 0 */
  #column-left:not(.active):not(:hover):not(:focus-within) #menu #journal3-theme > a > i.journal3-icon,
  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > a > i.journal3-icon {
    width: 16px !important; /* vendor: OC sidebar chrome size */
    min-width: 16px !important;
    height: 16px !important;
    font-size: 0 !important;
    background-size: 16px 16px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    float: none;
    margin: 0 auto !important;
    top: 0 !important;
    position: relative !important;
  }

  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > a.parent:after {
    display: none !important; /* vendor: OC collapsed sidebar */
    content: none !important;
  }

  /* Hide nested labels + order stats until expanded */
  #column-left:not(.active):not(:hover):not(:focus-within) #menu > li > ul,
  #column-left:not(.active):not(:hover):not(:focus-within) #stats {
    display: none !important; /* vendor: OC collapsed sidebar */
  }

  /* Open rail: names, not only icons. Same type as the old admin expand. */
  #column-left:is(:focus-within, .active) #menu > li > a,
  #column-left:is(:focus-within, .active) #menu > li > button.parent,
  #column-left:is(:focus-within, .active) #menu > li > span.parent,
  #column-left:is(:focus-within, .active) #menu li li a,
  #column-left:is(:focus-within, .active) #menu li li button.parent {
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 10px 14px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    display: flex !important;
    align-items: center !important;
    color: var(--sidebar-text);
  }

  #column-left:is(:focus-within, .active) #menu > li > a > i,
  #column-left:is(:focus-within, .active) #menu > li > a .fa {
    font-size: 13px !important;
    width: 16px !important;
    margin: 0 !important;
    flex: 0 0 16px !important;
  }

  #column-left:is(:focus-within, .active) #menu > li > a.parent:after {
    display: inline-block !important;
    content: "\f107" !important;
  }
}

/* Journal3 icon — always preserve SVG box (menu.css uses float + fixed size) */
#menu #journal3-theme .journal3-icon,
#menu > li > a > i.journal3-icon {
  display: inline-block !important; /* vendor: OC sidebar display */
  width: 16px !important; /* densify with nav type */
  min-width: 16px !important;
  height: 16px !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
}

#menu #journal3-theme > a > i.journal3-icon::before {
  display: none !important; /* vendor: OC collapsed sidebar */
  content: none !important; /* vendor: OC pseudo content */
}

/* ---- Content ---- */
#content {
  color: var(--text-primary);
}

/* Titles ÔÇö denser admin hierarchy (layout/order owned by breadcrumb block below) */
.page-header h1 {
  color: var(--title-bar-fg);
  text-shadow: none;
  font-weight: 700;
  font-size: var(--title-bar-title-size, 15px) !important;
  line-height: 1.25;
}



#content h1:not(.page-header h1) {
  font-size: 18px !important; /* vendor: OC page title scale */
  line-height: 1.3;
}

#content h2,
.panel-title,
.panel-heading h3,
.modal-title {
  font-size: 15px !important; /* vendor: OC heading scale */
  line-height: 1.3;
  font-weight: 700;
}

#content h3 {
  font-size: 14px !important; /* vendor: OC heading scale */
  line-height: 1.35;
}

#content h4,
#content h5,
#content h6 {
  font-size: 12px !important; /* vendor: OC heading scale */
  line-height: 1.35;
}

/* ============================================================
 * Breadcrumbs ÔÇö full-width bar IMMEDIATELY under #header
 * Flush to #column-left (no gap). Home icon X = logo wordmark X.
 *
 * Layout (flex order, not DOM order):
 *   [=========== breadcrumb bar =========]
 *   [ h1 ...................... actions ]  equal air above/below
 *   [ page body ]
 *
 * Shared rhythm (parity with seller shell):
 *   --admin-page-gutter   horizontal inset title + body (10px)
 *   --admin-header-gap    breadcrumbÔåötitle AND titleÔåöbody (10px)
 *   --admin-title-btn-h   title/actions row height (34px)
 * ============================================================ */

/* Layout rhythm tokens: daca/tokens.css (--admin-page-gutter, --admin-header-gap, --admin-title-btn-h) */

.page-header {
  border: none;
  border-bottom: none;
  margin: 0 0 var(--admin-header-gap, 10px) 0;
  padding: 0;
  margin-top: 0;
  overflow: visible !important; /* vendor: OC overflow clip */
  background: transparent;
  width: 100% !important; /* vendor: OC header chrome size */
max-width: none;
}

/*
 * Kill Bootstrap .container-fluid gutters on the page-header shell
 * so the breadcrumb can sit edge-to-edge against the sidebar.
 */
.page-header .container-fluid {
  display: flex !important; /* vendor: OC header float to flex */
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--admin-header-gap, 10px);
  column-gap: 0;
  gap: var(--admin-header-gap, 10px) 0;
  padding: 0;
  margin: 0;
  width: 100% !important; /* vendor: OC header chrome size */
  max-width: none;
}
/* vendor: BS3 clearfix ::before/::after become flex items and add 8px above crumbs */
.page-header .container-fluid::before,
.page-header .container-fluid::after {
  display: none !important;
  content: none !important;
}

/* Title + actions = second row (no vertical pad ÔÇö gaps via row-gap + page-header margin) */
.page-header h1 {
  order: 2;
  flex: 1 1 auto;
  display: flex !important; /* vendor: OC header float to flex */
  align-items: center;
  float: none;
  vertical-align: middle;
  margin: 0;
  padding: 0 var(--admin-page-gutter, 10px) 0 var(--admin-page-gutter, 10px);
  min-width: 0;
  height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  min-height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  max-height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  line-height: 1;
  box-sizing: border-box;
}

.page-header .pull-right {
  order: 3;
  float: none;
  margin: 0 0 0 auto;
  padding: 0 var(--admin-page-gutter, 10px) 0 0;
  display: flex !important; /* vendor: OC header float to flex */
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  min-height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  box-sizing: border-box;
}

.page-header .pull-right .btn {
  display: inline-flex !important; /* vendor: OC header float to flex */
  align-items: center;
  justify-content: center;
  height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  min-height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  max-height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  padding: 0 12px;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
}

/*
 * Seller mini-admin title-row variant (P1.1 ownership in shell).
 * Markup: .seller-page-title-row > .seller-page-title-main (h1 + subtitle)
 *                       + .seller-page-actions.pull-right
 * Gutters live on the row (not on h1/.pull-right) so we do not double-inset vs admin flat flex.
 */
.page-header .seller-page-title-row,
.page-header .admin-page-title-row {
  order: 2;
  display: flex !important; /* vendor: OC header float to flex */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  box-sizing: border-box;
  width: calc(100% - 2 * var(--admin-page-gutter, 8px)) !important;
  max-width: none;
  margin: 0 var(--admin-page-gutter, 8px);
  padding: var(--title-bar-pad-y, 5px) var(--title-bar-pad-x, 10px);
  min-height: var(--title-bar-h, 45px) !important;
  height: var(--title-bar-h, 45px) !important;
  max-height: var(--title-bar-h, 45px) !important;
  background: var(--bg-surface) !important; /* vendor: OC page-header */
  border: 1px solid var(--border-subtle) !important; /* vendor: OC page-header */
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow);
}

.page-header .seller-page-title-row .seller-page-title-main,
.page-header .admin-page-title-row .admin-page-title-main {
  display: flex !important; /* vendor: densify layout */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0 !important;
}

.page-header .seller-page-title-row .seller-page-title-main > h1,
.page-header .seller-page-title-row > h1,
.page-header .seller-page-title-row h1,
.page-header .admin-page-title-row .admin-page-title-main > h1,
.page-header .admin-page-title-row > h1,
.page-header .admin-page-title-row h1 {
  order: 0;
  flex: 0 1 auto;
  float: none;
  margin: 0 !important; /* vendor: densify layout */
  padding: 0 !important; /* vendor: densify layout — gutters on title-row */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  font-size: var(--title-bar-title-size, 15px) !important;
  font-weight: 700;
  line-height: 1.2 !important;
  box-sizing: border-box;
}

.page-header .seller-page-title-row .seller-page-subtitle,
.page-header .admin-page-title-row .admin-page-subtitle {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--title-bar-subtitle-size, 14px);
  font-weight: 400;
  align-self: center;
  color: var(--text-secondary, #6E7275);
}
.page-header .seller-page-title-row .seller-page-subtitle::before,
.page-header .admin-page-title-row .admin-page-subtitle::before {
  content: "\00b7";
  margin-right: 6px;
  opacity: 0.75;
}

.page-header .seller-page-title-row .seller-page-actions,
.page-header .seller-page-title-row .pull-right,
.page-header .admin-page-title-row .admin-page-actions,
.page-header .admin-page-title-row .pull-right {
  order: 3;
  float: none !important; /* vendor: OC header float to flex */
  margin: 0 0 0 auto !important; /* vendor: densify layout */
  padding: 0 !important; /* vendor: densify layout — gutters on title-row */
  display: flex !important; /* vendor: OC header float to flex */
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: auto !important; /* vendor: densify layout — never 100% (admin mobile wrap rule) */
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

.page-header .seller-page-title-row .seller-page-actions .btn:not(.seller-profile-save-btn),
.page-header .seller-page-title-row .pull-right .btn:not(.seller-profile-save-btn),
.page-header .admin-page-title-row .admin-page-actions .btn,
.page-header .admin-page-title-row .pull-right .btn {
  display: inline-flex !important; /* vendor: OC header float to flex */
  align-items: center;
  justify-content: center;
  width: var(--title-bar-btn, 35px) !important;
  min-width: var(--title-bar-btn, 35px) !important;
  max-width: var(--title-bar-btn, 35px) !important;
  height: var(--title-bar-btn, 35px) !important;
  min-height: var(--title-bar-btn, 35px) !important;
  max-height: var(--title-bar-btn, 35px) !important;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  font-size: var(--title-bar-icon-size, 15px) !important;
  border-radius: var(--title-bar-btn-radius, 6px) !important;
  box-sizing: border-box;
}
.page-header .seller-page-title-row .seller-page-actions .btn:not(.seller-profile-save-btn) .fa,
.page-header .seller-page-title-row .pull-right .btn:not(.seller-profile-save-btn) .fa,
.page-header .admin-page-title-row .admin-page-actions .btn .fa,
.page-header .admin-page-title-row .pull-right .btn .fa {
  font-size: var(--title-bar-icon-size, 15px) !important;
  line-height: 1;
  margin: 0;
}

.page-header .seller-page-title-row .btn-default,
.page-header .admin-page-title-row .btn-default,
.page-header .pull-right .btn-default,
.page-header .seller-page-title-row .btn-default .fa,
.page-header .admin-page-title-row .btn-default .fa,
.page-header .pull-right .btn-default .fa {
  color: var(--title-bar-icon);
}

/* Full-width bar ÔÇö shared surface styles */
.page-header .breadcrumb,
#content > .container-fluid > .breadcrumb,
#content .breadcrumb,
.breadcrumb {
  display: flex !important; /* vendor: OC page-header float to flex */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  float: none;
  clear: both;
  list-style: none;
  background: var(--breadcrumb-bg);
  background-color: var(--breadcrumb-bg);
  border: none;
  border-top: none;
  border-bottom: 1px solid var(--breadcrumb-border);
  border-radius: 0;
  min-height: 35px !important; /* vendor: OC geometry */
  height: auto !important; /* vendor: OC geometry */
  /* Home icon starts at --admin-content-gutter (same as logo "D"); right matches page gutter */
  padding: 0 var(--admin-page-gutter, 10px) 0 var(--admin-content-gutter);
  text-shadow: none;
  box-sizing: border-box;
  line-height: 1.3;
  gap: 0;
}

/*
 * Site-wide: breadcrumbs desktop-only (≥992). Mobile-first hide so later
 * display:flex !important cannot bring the bar back on phone/tablet.
 * Contract: docs/design/daca-css-architecture.md §4.6
 */
@media (max-width: 991px) {
  .page-header .breadcrumb,
  #content > .container-fluid > .breadcrumb,
  #content .breadcrumb,
  #content .page-header .breadcrumb,
  #content.dashboard-page .dashboard-page-header-shell > .breadcrumb,
  #container > .breadcrumbs,
  #content .breadcrumbs,
  .breadcrumbs,
  .breadcrumbs .breadcrumb,
  .breadcrumb {
    display: none !important; /* touch shell: title names the page */
    height: 0 !important; /* vendor: OC geometry */
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important; /* vendor: OC geometry */
    overflow: hidden !important; /* vendor: OC overflow clip */
    visibility: hidden;
  }

  /* Drop empty page-header chrome when it only wrapped the breadcrumb */
  #content .page-header:not(:has(h1)):not(:has(.dashboard-page-header-inner)) {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  #content.dashboard-page .page-header.dashboard-page-header,
  #content.dashboard-page .dashboard-page-header-shell {
    display: none !important; /* vendor: hide OC list chrome */
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  /* Crumbs gone: title-row still needs --page-header-gap under #header */
  .page-header .admin-page-title-row,
  .page-header .seller-page-title-row {
    margin-top: var(--admin-header-gap, 8px);
  }
}

/* FIRST row: true full-bleed of #content (flush to sidebar) */
.page-header .breadcrumb {
  order: 1;
  flex: 1 0 100%;
  margin: 0;
  width: 100% !important; /* vendor: OC header chrome size */
max-width: none;
  align-self: stretch;
}

/* Standalone breadcrumbs (rare) */
#content > .container-fluid > .breadcrumb {
  margin: 0 0 14px 0;
  width: 100% !important; /* vendor: OC geometry */
}

/* Ensure #content itself doesn't inset the bar */
#content {
  padding-left: 0;
  padding-right: 0;
}

.breadcrumb > li {
  display: inline-flex !important; /* vendor: OC page-header float to flex */
  flex-direction: row;
  align-items: center;
  float: none;
  margin: 0;
  padding: 0;
  color: var(--breadcrumb-active);
  font-size: 13px;
  line-height: 1.3;
  text-shadow: none;
  vertical-align: middle;
}

.breadcrumb > li > a {
  display: inline-flex !important; /* vendor: OC page-header float to flex */
  align-items: center;
  font-family: var(--font-brand);
  /* Densify SoT 13px (theme-plan / dashboard parity) — was 14 */
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--breadcrumb-link);
  text-decoration: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.breadcrumb > li > a:hover,
.breadcrumb > li > a:focus {
  color: var(--link-hover);
  text-decoration: none;
  box-shadow: none;
  background: transparent;
}

/* Current crumb ÔÇö SemiBold */
.breadcrumb > li:last-child,
.breadcrumb > li:last-child > a,
.breadcrumb > li.active,
.breadcrumb > li.active > a {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--breadcrumb-active);
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* Separator "/" ÔÇö gold, same UI face */
.breadcrumb > li + li:before,
.breadcrumb > li + li::before {
  content: '/' !important; /* vendor: OC pseudo content */
  display: inline-block !important; /* vendor: OC page-header float to flex */
  float: none;
  position: static !important; /* vendor: OC nav/header stacking */
  font-family: var(--font-brand);
  font-size: 14px; /* densify with 13px crumb text */
  line-height: 1.3;
  color: var(--breadcrumb-sep);
  padding: 0 6px; /* storefront exact */
  margin: 0;
  opacity: 1;
  font-weight: 400;
  vertical-align: middle;
}

/* Kill Bootstrap chevrons / OC arrows (vendor float crumbs) */
.breadcrumb > li:after,
.breadcrumb > li::after {
  display: none !important; /* vendor: BS3 chevron */
  content: none !important; /* vendor: OC pseudo content */
  width: 0 !important; /* vendor: OC geometry */
  height: 0 !important; /* vendor: OC geometry */
  margin: 0;
  padding: 0;
  border: 0;
}

.breadcrumb > li:first-child:before,
.breadcrumb > li:first-child::before {
  content: none !important;
  display: none !important;
}

/*
 * Home crumb — markup: common/breadcrumb.twig (.breadcrumb-home + fa-home).
 * No font-size:0 / ::before text-hide. Colours from tokens only.
 */
.breadcrumb > li > a.breadcrumb-home {
  font-size: 15px;
  line-height: 1;
  color: var(--breadcrumb-link);
}

.breadcrumb > li > a.breadcrumb-home .fa {
  font-size: 15px;
  line-height: 1;
  width: 15px;
  text-align: center;
}

.breadcrumb > li > a.breadcrumb-home:hover,
.breadcrumb > li > a.breadcrumb-home:focus {
  color: var(--link-hover);
}

.breadcrumb > li:first-child:last-child > a.breadcrumb-home,
.breadcrumb > li.active > a.breadcrumb-home {
  color: var(--breadcrumb-active);
  pointer-events: none;
  cursor: default;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
}

.text-muted {
  color: var(--text-secondary);
}

hr {
  border-top: 1px solid var(--divider);
  opacity: 1;
}

/* Soften harsh Bootstrap white dividers / borders (all admin tabs) */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  border-top-color: var(--divider);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--border-subtle);
}

.panel,
.panel-default,
.panel-primary,
.well,
.modal-content,
.list-group-item,
.form-control,
.input-group-addon,
.nav-tabs,
.dropdown-menu {
  border-color: var(--border-subtle);
}

/* Tabs / panels / header ÔÇö thin gold hairlines */
.nav-tabs {
  border-bottom: 1px solid var(--divider);
}

.nav-tabs > li > a {
  border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-color: var(--divider) var(--divider) transparent;
  background-color: var(--bg-surface); /* vendor: BS3 white active tab */
  color: var(--filete);
}

.nav-tabs > li > a:hover {
  background-color: var(--bg-elevated);
  border-color: transparent;
  color: var(--link-hover);
}

.panel:not(.admin-login-panel),
.panel-default:not(.admin-login-panel),
.panel-primary {
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}

.panel-default:not(.admin-login-panel) > .panel-heading {
  border-bottom: 1px solid var(--divider);
}

.panel-footer,
.modal-header,
.modal-footer {
  border-color: var(--divider);
}

/* Header bottom + chrome edges: color from #header --divider (navy in light) */
#header {
  border-bottom: 1px solid var(--divider);
}

#header .navbar-header,
#header .navbar-right > li,
#button-menu,
#menu > li,
#navigation {
  border-color: var(--divider);
}

/* 1px hairline look (avoids chunky 2ÔÇô3px borders) */
hr {
  border: 0;
  border-top: 1px solid var(--divider);
  height: 0;
  opacity: 1;
}

.table > thead > tr > th,
.table > thead > tr > td {
  border-bottom: 1px solid var(--divider);
}

/* Breadcrumb bar owns the top edge; do not re-draw a divider under the whole header */
.page-header {
  border-bottom: none;
}

/*
 * B2 — List / form page chrome densify (shell-owned, no page CSS)
 * Applies to sale/order, catalog/product, customer, etc.
 * Toolbar: title + action buttons on one rhythm; tables denser.
 *
 * NOT dashboard: .dashboard-page-header only wraps the breadcrumb bar.
 * Extra pad/gap there opened a ~16px brecha under #header (contract: card gap = 8px).
 */
.page-header:not(.dashboard-page-header) .container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-top: 0 !important;
  padding-bottom: 8px;
}
.page-header:not(.dashboard-page-header) .container-fluid::before,
.page-header:not(.dashboard-page-header) .container-fluid::after {
  display: none !important; /* vendor: BS3 clearfix flex item */
  content: none !important;
}

.page-header h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0; /* vendor: OC h1 margins */
}

.page-header .pull-right {
  float: none; /* vendor: BS3 float fights flex toolbar */
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.page-header .pull-right > .btn,
.page-header .pull-right > a.btn,
.page-header .pull-right > .btn-group > .btn {
  min-height: var(--title-bar-btn, var(--admin-title-btn-h, 35px));
}

/* Dense data tables inside content panels */
#content .panel .table {
  margin-bottom: 0;
}

#content .panel .table > thead > tr > th,
#content .panel .table > thead > tr > td {
  padding: 8px 10px !important; /* vendor: BS3 table cell padding */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.25;
  vertical-align: middle;
}

#content .panel .table > tbody > tr > th,
#content .panel .table > tbody > tr > td {
  padding: 8px 10px !important; /* vendor: BS3 table cell padding */
  font-size: 13px;
  line-height: 1.3;
  vertical-align: middle;
}

#content .panel > .panel-heading {
  padding: 8px 12px !important; /* vendor: BS3 panel-heading */
  min-height: 0;
}

#content .panel > .panel-heading .panel-title {
  font-size: 13px !important; /* vendor: OC heading scale */
  line-height: 1.25;
  margin: 0;
  color: var(--title-bar-fg);
}

#content .panel > .panel-body {
  padding: 10px 12px !important; /* vendor: BS3 panel-body 15px */
}

/* Filter side panels: tighter form rhythm */
#content .panel .form-group {
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}

#content .panel .form-group + .form-group {
  border-top: none;
  padding-top: 0;
}

#content .panel .form-group > label,
#content .panel .control-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

@media (max-width: 767px) {
  .page-header .container-fluid {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /*
   * Admin flat toolbar: h1 + .pull-right are siblings under .container-fluid.
   * On narrow viewports wrap actions to a full second row.
   * Do NOT apply to seller .seller-page-title-row .pull-right — width:100%
   * there crushes .seller-page-title-main (h1 → 0 width).
   */
  .page-header .container-fluid > .pull-right {
    width: 100%;
    justify-content: flex-start;
  }

  .page-header .seller-page-title-row .seller-page-actions,
  .page-header .seller-page-title-row .pull-right,
  .page-header .admin-page-title-row .admin-page-actions,
  .page-header .admin-page-title-row .pull-right {
    width: auto !important; /* vendor: densify layout — keep title+actions one row */
    max-width: none;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .page-header .seller-page-title-row .seller-page-title-main,
  .page-header .admin-page-title-row .admin-page-title-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Same title-bar rhythm on touch — do not inflate to 44. */
  .page-header .admin-page-title-row,
  .page-header .seller-page-title-row {
    min-height: var(--title-bar-h, 45px) !important;
    height: var(--title-bar-h, 45px) !important;
    max-height: var(--title-bar-h, 45px) !important;
    align-items: center;
  }

  .page-header .admin-page-title-row .admin-page-title-main,
  .page-header .seller-page-title-row .seller-page-title-main {
    min-height: 0 !important;
  }

  .page-header .admin-page-title-row .admin-page-actions,
  .page-header .admin-page-title-row .pull-right,
  .page-header .seller-page-title-row .seller-page-actions,
  .page-header .seller-page-title-row .pull-right {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .page-header .admin-page-title-row .admin-page-actions .btn,
  .page-header .admin-page-title-row .pull-right .btn,
  .page-header .seller-page-title-row .seller-page-actions .btn:not(.seller-profile-save-btn),
  .page-header .seller-page-title-row .pull-right .btn:not(.seller-profile-save-btn) {
    min-width: var(--title-bar-btn, 35px) !important;
    min-height: var(--title-bar-btn, 35px) !important;
    width: var(--title-bar-btn, 35px) !important;
    height: var(--title-bar-btn, 35px) !important;
    max-height: var(--title-bar-btn, 35px) !important;
  }

  .page-header .admin-page-title-row .admin-page-title-main > h1,
  .page-header .admin-page-title-row h1,
  .page-header .seller-page-title-row .seller-page-title-main > h1,
  .page-header .seller-page-title-row h1 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
  }

  #content .panel .table > thead > tr > th,
  #content .panel .table > thead > tr > td,
  #content .panel .table > tbody > tr > th,
  #content .panel .table > tbody > tr > td {
    padding: 7px 8px;
  }
}

/* ---- Panels (tokens; !important only vs BS3 white surfaces) ---- */
/* Login card excluded — owns elevation/contrast in .admin-login-panel block */
.panel:not(.admin-login-panel),
.panel-default:not(.admin-login-panel),
.panel-primary {
  background-color: var(--bg-surface); /* vendor: BS3 #fff */
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
  color: var(--text-primary);
}

.panel-default:not(.admin-login-panel) > .panel-heading,
.panel:not(.admin-login-panel) > .panel-heading {
  background: var(--panel-heading); /* vendor: BS3 gradient */
  border-bottom: 1px solid var(--divider);
  color: var(--title-bar-fg);
}

.panel-primary {
  border-color: rgba(35, 55, 105, 0.35);
}

.panel-primary > .panel-heading {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--brand-cream);
}

.panel-heading h3,
.panel-title {
  color: inherit;
  font-weight: 600;
}

.panel-footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--divider);
  color: var(--text-secondary);
}

.panel-body {
  background-color: transparent;
  color: var(--text-primary);
}

/* ---- Tables ---- */
.table {
  color: var(--text-primary);
  background: transparent;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  border-color: var(--divider);
  color: var(--text-primary);
}

.table thead td,
.table thead th {
  background: var(--bg-elevated); /* vendor: BS3 thead */
  color: var(--text-secondary);
  border-bottom: 1px solid var(--divider);
}

.table-hover > tbody > tr:hover {
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ---- Forms (tokens; !important only vs BS3 white inputs) ---- */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime"],
input[type="time"],
input[type="url"],
input[type="tel"],
select,
textarea {
  background-color: var(--input-bg); /* vendor: BS3 #fff */
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  box-shadow: none;
  font-family: var(--font-brand);
}

.form-control:hover,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--input-focus-border);
  background-color: var(--input-bg);
  color: var(--text-primary);
  box-shadow: var(--focus-ring);
}

.has-error .form-control,
.has-error input,
.has-error select,
.has-error textarea,
.form-group.has-error .form-control {
  border-color: var(--input-invalid-border);
}

.form-control[disabled],
.form-control[readonly] {
  background-color: var(--bg-muted);
  color: var(--text-secondary);
}

label,
.control-label {
  color: var(--text-secondary);
  font-weight: 600;
}

.input-group-addon {
  background: var(--bg-elevated); /* vendor: BS3 #eee */
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
}

/* ---- Buttons (tokens; !important only vs BS3 gradients) ---- */
.btn {
  font-family: var(--font-brand-bold);
  font-weight: 700;
  text-shadow: none; /* vendor: BS3 text-shadow */
  background-image: none !important; /* vendor: BS3 gradient */
}

.btn-default {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-default:hover,
.btn-default:focus {
  background: var(--btn-default-hover-bg);
  border-color: var(--btn-default-hover-border);
  color: var(--btn-default-hover-fg);
}

.btn-primary,
a.btn-primary,
.btn-info {
  background: var(--btn-primary-bg) !important; /* vendor: BS3 */
  background-image: none !important; /* vendor: BS3 gradient */
  border-color: var(--btn-primary-bg) !important; /* vendor: BS3 */
  color: var(--btn-primary-fg) !important; /* vendor: BS3 */
  text-shadow: none !important; /* vendor: BS3 */
}

.btn-primary .fa,
.btn-primary i,
a.btn-primary .fa,
.btn-info .fa,
.btn-info i {
  color: var(--btn-primary-fg) !important; /* vendor: BS3 */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
a.btn-primary:hover,
.btn-info:hover,
.btn-info:focus,
.btn-info:focus-visible {
  background: var(--btn-primary-hover) !important; /* vendor: BS3 */
  border-color: var(--btn-primary-hover-border) !important; /* vendor: BS3 */
  color: var(--btn-primary-hover-fg) !important; /* vendor: BS3 */
}

.btn-primary:hover .fa,
.btn-info:hover .fa {
  color: var(--btn-primary-hover-fg) !important; /* vendor: BS3 */
}

/* Pagination active chip = same gold primary */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--btn-primary-bg) !important; /* vendor: BS3 */
  border-color: var(--btn-primary-bg) !important; /* vendor: BS3 */
  color: var(--btn-primary-fg) !important; /* vendor: BS3 */
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-inverse);
}

.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--ink);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-inverse);
}

.btn-link {
  color: var(--link);
}

/* ---- Alerts / wells / chrome leftovers ---- */
.well,
.well.filter {
  background-color: var(--bg-elevated); /* vendor: BS3 well */
  border-color: var(--border-subtle);
  color: var(--text-primary);
  box-shadow: none;
}

.modal-content {
  background-color: var(--modal-bg);
  border-color: var(--modal-border);
  color: var(--modal-fg);
  box-shadow: var(--modal-shadow);
}

.modal-header,
.modal-footer {
  background-color: var(--modal-header-bg);
  border-color: var(--divider);
  color: var(--modal-fg);
}

.dropdown-menu {
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.list-group-item {
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.alert-success {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
  color: var(--success);
}

.alert-info {
  background: var(--alert-info-bg);
  border-color: var(--alert-info-border);
  color: var(--alert-info-text);
}

.alert-warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--warning);
}

.alert-danger {
  background: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
  color: var(--danger);
}

/* OC dashboard tiles */
.tile,
.tile-body,
.tile-footer {
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.tile-footer {
  background-color: var(--panel-heading);
  border-color: var(--divider);
}

/* ---- Tabs ---- */
.nav-tabs {
  border-bottom: 1px solid var(--divider);
}

.nav-tabs > li > a {
  color: var(--text-secondary);
}

.nav-tabs > li > a:hover {
  background: var(--bg-muted);
  border-color: var(--border-subtle) var(--border-subtle) transparent;
  color: var(--accent);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: var(--bg-surface);
  border-color: var(--border-subtle) var(--border-subtle) transparent;
  color: var(--filete);
  font-weight: 600;
}

/* ---- Dropdowns / list groups ---- */
.dropdown-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: var(--shadow);
}

.dropdown-menu > li > a {
  color: var(--text-primary);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.list-group-item {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.list-group-item.active,
.list-group-item.active:hover {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

/* ---- Modals ---- */
/* vendor: BS3 .modal 1050 / .modal-backdrop 1040 sit under --z-header 10050 */
.modal-backdrop {
  z-index: var(--z-modal);
  background-color: var(--modal-overlay);
}
.modal-backdrop.in {
  opacity: 1;
  filter: none;
}
.modal {
  z-index: calc(var(--z-modal) + 10);
}

.modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  color: var(--modal-fg);
  box-shadow: var(--modal-shadow);
}

.modal-header,
.modal-footer {
  border-color: var(--divider);
  background: var(--modal-header-bg);
  color: var(--modal-fg);
}

.modal-header .close {
  color: var(--text-secondary);
  text-shadow: none;
  opacity: 0.85;
}

/* ---- Pagination (vs BS3 white) ---- */
.pagination > li > a,
.pagination > li > span {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.pagination > li > a:hover {
  background: var(--bg-muted);
  color: var(--link-hover);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

/*
 * Mobile: drop list pagination chrome.
 * OC3 list footers: .row > .col-sm-6 (links) + .col-sm-6.text-right (Mostrando…).
 * Desktop keeps full pager for multi-page lists.
 */
@media (max-width: 767px) {
  #content ul.pagination,
  #content .pagination {
    display: none !important; /* vendor: hide OC list chrome */
  }

  /* hide the standard list footer row (pagination + results) */
  #content .panel-body > .row:has(> .col-sm-6.text-left):has(> .col-sm-6.text-right) {
    display: none !important; /* vendor: hide OC list chrome */
  }

  /*
   * Fallbacks (empty pager, :has gaps, sibling-only):
   * hide left col when empty/has pager, and the adjacent results col.
   */
  #content .panel-body > .row > .col-sm-6.text-left:has(.pagination),
  #content .panel-body > .row > .col-sm-6.text-left:empty,
  #content .panel-body > .row > .col-sm-6.text-left:has(.pagination) + .col-sm-6.text-right,
  #content .panel-body > .row > .col-sm-6.text-left:empty + .col-sm-6.text-right {
    display: none !important; /* vendor: hide OC list chrome */
  }
}

/* ---- Tiles (legacy OC tiles) ---- */
.tile {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.tile-footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--divider);
  color: var(--text-secondary);
}

/* ---- Dashboard page (brand-aware) ---- */
#content.dashboard-page {
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-muted) 220px);
}

#content.dashboard-page .dashboard-page-header-inner {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

/* Geometry of title toolbar: dashboard.css (H-A). Tokens only here. */
#content.dashboard-page .dashboard-title-block h1 {
  color: var(--title-bar-fg);
}

#content.dashboard-page .dashboard-subtitle {
  color: var(--text-secondary);
}

/* Outer + inner cards: tokens only (geometry lives in dashboard.css) */
#content.dashboard-page .dashboard-analytics-panel,
#content.dashboard-page .panel.dashboard-analytics-panel,
#content.dashboard-page .dashboard-map-panel,
#content.dashboard-page .panel.dashboard-map-panel,
#content.dashboard-page .dashboard-widgets-row .panel {
  border-color: var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--shadow);
}

/* Dashboard panel heading color is owned by dashboard.css — do not re-paint here. */

#content.dashboard-page .dashboard-analytics-panel > .panel-heading .dropdown-toggle {
  color: var(--text-secondary);
}

#content.dashboard-page .dashboard-analytics-panel > .panel-heading .dropdown-toggle:hover {
  background: var(--bg-muted);
  color: var(--accent);
}

#content.dashboard-page .dashboard-analytics-panel > .panel-body,
#content.dashboard-page .dashboard-map-panel > .panel-body {
  background: var(--bg-surface);
}

#content.dashboard-page .dashboard-kpi-card,
#content.dashboard-page #commission-totals .commission-total-box {
  border-color: var(--border-subtle);
  background: var(--bg-elevated);
}

#content.dashboard-page .dashboard-kpi-card:hover,
#content.dashboard-page #commission-totals .commission-total-box:hover {
  border-color: color-mix(in srgb, var(--filete) 45%, transparent);
  background: var(--bg-surface);
  box-shadow: 0 2px 10px rgba(35, 55, 105, 0.08);
}

#content.dashboard-page .dashboard-kpi-label {
  color: var(--text-secondary);
}

#content.dashboard-page .dashboard-kpi-value {
  color: var(--title-bar-fg);
  font-weight: 700;
}

#content.dashboard-page .dashboard-kpi-orders .dashboard-kpi-value,
#content.dashboard-page .dashboard-kpi-sales .dashboard-kpi-value,
#content.dashboard-page .dashboard-kpi-commission .dashboard-kpi-value,
#content.dashboard-page .dashboard-kpi-average .dashboard-kpi-value {
  color: var(--accent);
}

#content.dashboard-page .dashboard-kpi-customers .dashboard-kpi-value,
#content.dashboard-page .dashboard-kpi-active-sellers .dashboard-kpi-value {
  color: var(--success);
}

#content.dashboard-page .dashboard-kpi-link {
  color: var(--link);
}

#content.dashboard-page .dashboard-period-custom-panel .dashboard-period-custom-inner {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--divider);
}

#content.dashboard-page .dashboard-top-sellers-table > thead > tr > td {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--divider);
}

#content.dashboard-page .dashboard-top-sellers-name {
  color: var(--text-primary);
}

#content.dashboard-page .dashboard-top-sellers-sales {
  color: var(--accent);
  font-weight: 700;
}

#commission-totals .commission-total-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

#commission-totals .commission-total-label {
  color: var(--text-secondary);
}

#commission-totals .commission-total-sale .commission-total-value {
  color: var(--accent);
}

#commission-totals .commission-total-commission .commission-total-value {
  color: var(--success);
}

/* Datepicker */
.bootstrap-datetimepicker-widget {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  color: var(--text-primary);
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td span:hover {
  background: color-mix(in srgb, var(--filete) 20%, transparent);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon),
body:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) ::-webkit-scrollbar,
body:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) ::-webkit-scrollbar,
html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #column-left::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) ::-webkit-scrollbar-track,
body:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) ::-webkit-scrollbar-track,
html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #column-left::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) ::-webkit-scrollbar-thumb,
body:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) ::-webkit-scrollbar-thumb,
html:is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #column-left::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
}

#footer {
  color: var(--text-secondary);
}

/* Kill pure-white separators that feel harsh in both themes */
:is(body.admin-theme-dark, html.daca-theme-neon) hr,
:is(body.admin-theme-dark, html.daca-theme-neon) .panel,
:is(body.admin-theme-dark, html.daca-theme-neon) .table,
:is(body.admin-theme-dark, html.daca-theme-neon) .modal-header,
:is(body.admin-theme-dark, html.daca-theme-neon) .modal-footer,
:is(body.admin-theme-dark, html.daca-theme-neon) .page-header,
:is(body.admin-theme-dark, html.daca-theme-neon) #header {
  border-color: var(--divider);
}

/* Override Open Sans from OpenCart stylesheet.css */
html body {
  font-family: var(--font-brand);
  font-weight: 400;
}

body h1, body h2, body h3, body h4, body h5, body h6,
.page-header h1,
.panel-title {
  font-family: var(--font-brand);
  font-weight: 700; /* Montserrat Bold file @ 700 */
}

/* ============================================================
 * Pass 1 polish ÔÇö focus, controls, density (feature/admin-theme)
 * ============================================================ */

/* Text selection */
::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-primary);
}

/* Soft radii on brand surfaces */
.panel,
.well,
.well.filter,
.modal-content,
.dropdown-menu,
.alert,
.btn,
.form-control,
.input-group-addon,
.pagination > li > a,
.pagination > li > span {
  border-radius: var(--radius-md);
}

.panel > .panel-heading:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

/* Keyboard focus ÔÇö gold ring, no browser default blue */
a:focus,
.btn:focus,
.btn:active:focus,
.form-control:focus,
button:focus,
select:focus,
textarea:focus,
input:focus,
#button-theme-toggle:focus,
#menu > li > a:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary:focus,
.btn-info:focus {
  border-color: var(--btn-primary-hover-border);
}

/* Page header actions ÔÇö denser, matches --admin-title-btn-h (see breadcrumb block) */
.page-header .pull-right .btn {
  margin-left: 0;
  margin-right: 0;
  min-height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
  height: var(--admin-title-btn-h, 34px) !important; /* vendor: OC header chrome size */
}

/* Filter wells (product list, order list, etc.) */
.well.filter {
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
}

.well.filter .form-group {
  margin-bottom: 10px;
}

.well.filter .control-label {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Tables: header weight + sticky-friendly look */
.table thead td,
.table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.table > tbody > tr > td {
  vertical-align: middle;
}

/* Checkbox / radio alignment in dense lists */
.table input[type="checkbox"],
.table input[type="radio"] {
  margin: 0;
  vertical-align: middle;
}



/* Alerts: slightly larger radius + icon spacing */
.alert {
  border-radius: var(--radius-md);
  border-left-width: 3px;
}

.alert .fa {
  margin-right: 6px;
}

/* Help blocks under fields */
.help-block {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Status labels (OpenCart order/product status pills) */
.label {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Navbar user menu density */
#header .navbar-right > li > a {
  transition: color 0.15s ease, background 0.15s ease;
}

/* Sidebar parent open state */
#menu > li.open > a,
#menu > li > a.collapsed[aria-expanded="true"] {
  color: var(--sidebar-active);
}

/*
 * Body under page-header: no extra top pad (gap is page-header margin-bottom).
 * Horizontal inset matches title row (--admin-page-gutter).
 * Dashboard keeps its own .dashboard-main tokens.
 */
#content > .container-fluid {
  padding-top: 0;
  padding-bottom: var(--admin-page-gutter, 10px);
  padding-left: var(--admin-page-gutter, 10px);
  padding-right: var(--admin-page-gutter, 10px);
}

/*
 * Dashboard main frame — OWNED HERE (E2 ownership).
 * dashboard.css must not re-declare padding on .dashboard-main.
 * Uses --admin-page-gutter (tokens: 8px).
 */
#content.dashboard-page > .container-fluid.dashboard-main {
  padding: var(--admin-page-gutter, 8px);
}

/* ============================================================
 * Plugin / vendor chrome — tokens + vendor !important (H3 residual)
 * Select2, Summernote, datetimepicker, popovers, form dividers.
 * ============================================================ */

/* OC form row hairlines (#ededed) */
.form-group + .form-group {
  border-top-color: var(--divider);
}

/* Popovers / tooltips / thumbnails */
.thumbnail,
.img-thumbnail,
.popover,
.popover-title,
.popover-content,
.tooltip-inner,
.jumbotron,
.card {
  background-color: var(--bg-surface);
  background-image: none !important; /* vendor: BS3 gradient kill */
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.popover-title {
  background-color: var(--panel-heading);
  border-color: var(--divider);
}

/* Code */
pre,
code {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-navy);
  color: var(--brand-cream);
}

/* Summernote */
.note-editor.note-frame,
.note-editor .note-editing-area .note-editable,
.note-toolbar {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

/* Datepicker — strengthen existing rules vs widget white */
.bootstrap-datetimepicker-widget {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  color: var(--text-primary);
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td span:hover {
  background: var(--bg-elevated);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}


/* Semantic buttons vs BS3 gradients */
.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-inverse);
  background-image: none !important;
  text-shadow: none;
}

.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--ink);
  background-image: none !important;
  text-shadow: none;
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-inverse);
  background-image: none !important;
  text-shadow: none;
}

/* ==========================================================================
   C3 — Shell owns sticky header + sticky page footer (admin + seller)
   Footer credit "Desarrollado por…" pins under short pages; after content when long.
   Do NOT redeclare this layout in seller-theme / page CSS.
   ========================================================================== */
html {
  height: 100%;
}
body {
  min-height: 100%;
}
#container {
  min-height: 100vh;
  display: flex !important; /* vendor: OC float layout → column chrome */
  flex-direction: column !important; /* vendor: OC float layout → column chrome */
  box-sizing: border-box;
  /* sticky #header needs visible overflow on the scroll container ancestor */
  overflow: visible;
}

/*
 * Header chrome (flex layout block) — same SoT as top of file §4.2.
 * Do NOT reintroduce sticky/1000: open rail is --z-sidebar-open.
 */
#header,
#header.navbar,
#header.navbar-static-top {
  position: fixed !important; /* vendor: OC nav/header stacking */
  top: 0 !important; /* vendor: OC nav/header stacking */
  left: 0 !important; /* vendor: OC nav/header stacking */
  right: 0 !important; /* vendor: OC nav/header stacking */
  width: 100% !important; /* vendor: OC header chrome size */
  z-index: var(--z-header, 10050) !important; /* vendor: OC nav/header stacking */
  isolation: isolate !important; /* vendor: OC nav/header stacking */
  flex-shrink: 0 !important; /* vendor: OC flex chrome */
}

/* content grows to push footer down — pad matches OC stylesheet.css (40px) */
#content {
  flex: 1 0 auto !important;
  min-height: 0; /* never min-height:100vh here — that causes double Y-scroll */
  padding-bottom: 40px;
  box-sizing: border-box;
}

#footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 16px 12px 20px;
  position: relative;
  clear: both;
  /* same canvas as page — no muted strip */
  background: var(--bg-page) !important; /* vendor: OC/dark-mode footer strip */
  background-image: none !important; /* vendor: OC/dark-mode footer strip */
  border: 0 none transparent !important; /* vendor: OC/dark-mode footer strip */
  border-top: 0 none transparent !important; /* vendor: OC/dark-mode footer strip */
  box-shadow: none !important; /* vendor: OC/dark-mode footer strip */
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  font-family: var(--font-brand);
}

#footer a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
  background: transparent;
}

#footer a:hover,
#footer a:focus {
  color: var(--title-bar-fg);
  text-decoration: underline;
}

/* ---- Panel phone tabbar (same piece as storefront .daca-tabbar) ---- */
.daca-tabbar {
  display: none;
}
@media (max-width: 991px) {
  .daca-tabbar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: var(--header-bg, var(--bg-surface));
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
  }
  .daca-tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px 2px;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }
  .daca-tab .fa {
    font-size: 18px;
    line-height: 1;
  }
  .daca-tab.is-active {
    color: var(--sidebar-active);
  }
  .daca-tab-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--sidebar-active);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
  }
  .daca-tab-badge[data-count="0"] {
    display: none;
  }
  body:has(.daca-tabbar) #container:has(> #header),
  html:has(.daca-tabbar) #container:has(> #header) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
 * 390 YouTube-style staff admin guide (corte 1) — html:not(.wk-marketplace).
 * Desk ≥992: rail 59 / ☰+tabbar+lead hidden (unchanged). Vendor untouched.
 * ========================================================================== */
html:not(.wk-marketplace) .daca-more-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
  pointer-events: none;
}
html:not(.wk-marketplace) .daca-more-bars span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 0;
}

html:not(.wk-marketplace) .admin-guide-head {
  display: none;
}

@media (min-width: 992px) {
  html:not(.wk-marketplace) .admin-guide-head {
    display: none !important;
  }
}



@media (max-width: 991px) {
  html:not(.wk-marketplace) #header .admin-header-inner.container-fluid,
  html:not(.wk-marketplace) #header .container-fluid.admin-header-inner {
    padding: 0 8px var(--header-fillet-h, 2px) !important;
    gap: 0 !important;
    align-items: center !important;
    box-sizing: border-box;
  }


  html:not(.wk-marketplace).daca-theme-neon #header,
  html:not(.wk-marketplace).daca-theme-neon #header.navbar,
  html:not(.wk-marketplace).daca-theme-neon #header.navbar-static-top,
  html:not(.wk-marketplace).daca-theme-neon:has(#content.dashboard-page) #header,
  html:not(.wk-marketplace).daca-theme-neon:has(#content.dashboard-page) #header.navbar,
  html:not(.wk-marketplace).daca-theme-neon:has(#content.dashboard-page) #header.navbar-static-top,
  html:not(.wk-marketplace).daca-theme-neon body:has(#content.dashboard-page) #header {
    background: var(--ink, #08090C) !important;
    background-image: none !important;
    color: var(--accent, #E6FF2A) !important;
  }
  html:not(.wk-marketplace).daca-theme-neon #header::after {
    background: var(--accent-soft, var(--filete)) !important;
  }
  html:not(.wk-marketplace) #header .navbar-right > li > a,
  html:not(.wk-marketplace) #header .nav > li > a {
    color: inherit;
  }

  /* Navy techo: --accent is navy. Paint the skin pill with techo ink (cream/gold/fósforo). */
  html:not(.wk-marketplace) #header #button-theme-toggle,
  html:not(.wk-marketplace) #header a#button-theme-toggle,
  html:not(.wk-marketplace) #button-theme-toggle,
  html:not(.wk-marketplace) #header #button-notifications,
  html:not(.wk-marketplace) #header a#button-notifications {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    margin: 0 6px;
    box-sizing: border-box;
    color: inherit !important;
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important;
    box-shadow: none !important;
  }
  html:not(.wk-marketplace) #header #button-theme-toggle #icon-theme-toggle,
  html:not(.wk-marketplace) #header #button-theme-toggle .fa,
  html:not(.wk-marketplace) #button-theme-toggle #icon-theme-toggle,
  html:not(.wk-marketplace) #button-theme-toggle .fa,
  html:not(.wk-marketplace) #header #button-notifications .fa {
    color: inherit !important;
  }
  html:not(.wk-marketplace) #header #button-theme-toggle:hover,
  html:not(.wk-marketplace) #header #button-theme-toggle:focus,
  html:not(.wk-marketplace) #button-theme-toggle:hover,
  html:not(.wk-marketplace) #button-theme-toggle:focus,
  html:not(.wk-marketplace) #header #button-notifications:hover,
  html:not(.wk-marketplace) #header #button-notifications:focus {
    color: inherit !important;
    background: color-mix(in srgb, currentColor 22%, transparent) !important;
    border-color: color-mix(in srgb, currentColor 40%, transparent) !important;
    box-shadow: none !important;
  }

  html:not(.wk-marketplace) #header #button-menu,
  html:not(.wk-marketplace) #header #button-menu.hidden-md,
  html:not(.wk-marketplace) #header #button-menu.hidden-lg,
  html:not(.wk-marketplace) #button-menu,
  html:not(.wk-marketplace) #button-menu.hidden-md,
  html:not(.wk-marketplace) #button-menu.hidden-lg {
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    float: none;
    order: -1;
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0;
  }

  html:not(.wk-marketplace) #header #button-menu:hover,
  html:not(.wk-marketplace) #header #button-menu:focus,
  html:not(.wk-marketplace) #button-menu:hover,
  html:not(.wk-marketplace) #button-menu:focus,
  html:not(.wk-marketplace) body.admin-nav-open #header #button-menu,
  html:not(.wk-marketplace) body.admin-nav-open #button-menu,
  html:not(.wk-marketplace) #column-left.active ~ #header #button-menu,
  html:not(.wk-marketplace) #header #button-menu[aria-expanded="true"],
  html:not(.wk-marketplace) #button-menu[aria-expanded="true"] {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    outline: none;
  }

  /* Beat dashboard.css `html:has(#content.dashboard-page) #column-left.active` → 5000 */
  html:not(.wk-marketplace) #container #column-left,
  html:not(.wk-marketplace) #container #column-left:not(.active),
  html:not(.wk-marketplace) #container #column-left.active,
  html:not(.wk-marketplace) #container #column-left.active:hover,
  html:not(.wk-marketplace) #container #column-left.active:focus-within,
  html:not(.wk-marketplace):has(#content.dashboard-page) #container #column-left,
  html:not(.wk-marketplace):has(#content.dashboard-page) #container #column-left.active {
    z-index: 10060 !important;
  }

  html:not(.wk-marketplace) #column-left,
  html:not(.wk-marketplace) #column-left:not(.active),
  html:not(.wk-marketplace) #column-left.active,
  html:not(.wk-marketplace) #column-left.active:hover,
  html:not(.wk-marketplace) #column-left.active:focus-within {
    position: fixed !important;
    top: 0 !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    width: 240px !important;
    max-width: 240px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    float: none !important;
    padding-top: 0 !important;
    z-index: 10060 !important;
    box-shadow: none !important;
    pointer-events: auto;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  html:not(.wk-marketplace) #column-left,
  html:not(.wk-marketplace) #column-left:not(.active) {
    left: -240px !important;
  }

  html:not(.wk-marketplace) #column-left:hover,
  html:not(.wk-marketplace) #column-left:focus-within {
    width: 240px !important;
    left: -240px !important;
    box-shadow: none !important;
  }

  html:not(.wk-marketplace) #column-left.active,
  html:not(.wk-marketplace) #column-left.active:hover,
  html:not(.wk-marketplace) #column-left.active:focus-within {
    left: 0 !important;
    width: 240px !important;
    max-width: 240px !important;
    box-shadow: none !important;
  }

  html:not(.wk-marketplace):not(.admin-theme-dark):not(.daca-theme-neon) #column-left,
  html:not(.wk-marketplace):not(.admin-theme-dark):not(.daca-theme-neon) #column-left.active {
    background: var(--brand-navy, #233769) !important;
    color: var(--brand-cream, #E9DDC8) !important;
  }
  html:not(.wk-marketplace).daca-theme-neon #column-left,
  html:not(.wk-marketplace).daca-theme-neon #column-left.active,
  html:not(.wk-marketplace).daca-theme-neon #container #column-left {
    background: var(--ink, #08090C) !important;
    color: var(--accent, #E6FF2A) !important;
  }

  html:not(.wk-marketplace) #column-left #menu {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html:not(.wk-marketplace) #column-left,
  html:not(.wk-marketplace) #column-left.active,
  html:not(.wk-marketplace) #column-left #menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html:not(.wk-marketplace) #column-left::-webkit-scrollbar,
  html:not(.wk-marketplace) #column-left.active::-webkit-scrollbar,
  html:not(.wk-marketplace) #column-left #menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  html:not(.wk-marketplace) #column-left #menu a,
  html:not(.wk-marketplace) #column-left #menu i,
  html:not(.wk-marketplace) #column-left #menu .fa {
    color: inherit;
  }

  html:not(.wk-marketplace) #column-left #navigation,
  html:not(.wk-marketplace) #column-left.active #navigation {
    display: none !important;
  }

  html:not(.wk-marketplace) #admin-nav-overlay {
    top: 0 !important;
    right: 0 !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 240px !important;
    width: auto !important;
    height: auto !important;
    z-index: 10055 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html:not(.wk-marketplace) .admin-guide-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0;
    border: 0;
    background: inherit;
    color: inherit;
  }
  html:not(.wk-marketplace) .admin-guide-head .admin-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
  }
  html:not(.wk-marketplace) .admin-guide-head .admin-guide-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: inherit;
    text-decoration: none;
  }

  html:not(.wk-marketplace) .daca-tabbar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: var(--brand-navy, #233769);
    border-top: 0;
    color: color-mix(in srgb, var(--brand-cream, #E9DDC8) 65%, transparent);
  }
  html:not(.wk-marketplace).admin-theme-dark .daca-tabbar {
    background: #000;
    color: color-mix(in srgb, var(--brand-gold, #C8AA78) 65%, transparent);
  }
  html:not(.wk-marketplace).daca-theme-neon .daca-tabbar {
    background: var(--ink, #08090C);
    color: color-mix(in srgb, var(--accent, #E6FF2A) 65%, transparent);
  }
  html:not(.wk-marketplace) .daca-tabbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--header-fillet-h, 2px);
    background: var(--filete);
    pointer-events: none;
  }
  html:not(.wk-marketplace).daca-theme-neon .daca-tabbar::before {
    background: var(--accent-soft, var(--filete));
  }
  html:not(.wk-marketplace) .daca-tabbar .daca-tab {
    min-height: 32px;
    color: inherit;
  }
  html:not(.wk-marketplace) .daca-tabbar .daca-tab.is-active {
    color: var(--brand-cream, #E9DDC8);
    font-weight: 700;
  }
  html:not(.wk-marketplace).admin-theme-dark .daca-tabbar .daca-tab.is-active {
    color: var(--filete);
  }
  html:not(.wk-marketplace).daca-theme-neon .daca-tabbar .daca-tab.is-active {
    color: var(--accent);
  }

  @media (prefers-reduced-motion: reduce) {
    html:not(.wk-marketplace) #column-left,
    html:not(.wk-marketplace) #column-left:not(.active),
    html:not(.wk-marketplace) #column-left.active {
      transition: none;
    }
  }

  /* 390 C7: hide viewport rail, keep page scroll. Desk ≥992 unchanged. */
  html:not(.wk-marketplace),
  html:not(.wk-marketplace) body {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-gutter: auto;
  }
  html:not(.wk-marketplace)::-webkit-scrollbar,
  html:not(.wk-marketplace) body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  html:not(.wk-marketplace).admin-nav-open,
  html:not(.wk-marketplace).admin-nav-open body,
  html:not(.wk-marketplace) body.admin-nav-open {
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html:not(.wk-marketplace).admin-nav-open::-webkit-scrollbar,
  html:not(.wk-marketplace).admin-nav-open body::-webkit-scrollbar,
  html:not(.wk-marketplace) body.admin-nav-open::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Beat unscoped dark/neon 10px custom rail inside 390 only */
  html:not(.wk-marketplace):is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) ::-webkit-scrollbar,
  html:not(.wk-marketplace):is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon)::-webkit-scrollbar,
  html:not(.wk-marketplace):is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) body::-webkit-scrollbar,
  html:not(.wk-marketplace):is(.admin-theme-dark, .seller-theme-dark, .daca-theme-dark, .daca-theme-neon) #column-left::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  html:not(.wk-marketplace) #header #header-logo .navbar-brand,
  html:not(.wk-marketplace) #header .navbar-brand {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    color: inherit;
    align-self: center;
    display: flex !important;
    align-items: center;
  }
  html:not(.wk-marketplace) #header #header-logo.navbar-header,
  html:not(.wk-marketplace) #header .navbar-header {
    overflow: visible !important;
    height: auto;
    min-height: 0;
    max-height: none;
    align-self: stretch;
    display: flex !important;
    align-items: center;
  }
  html:not(.wk-marketplace) #header .daca-logo-mark,
  html:not(.wk-marketplace) .admin-guide-head .daca-logo-mark {
    height: 32px;
    width: calc(32px * 378.5 / 107.3);
  }
}

/* ==========================================================================
 * Corte 2: D-ACÁ SVG wordmark (currentColor). No PNG swap in chrome.
 * ========================================================================== */
html:not(.wk-marketplace) .daca-logo-mark {
  display: block;
  height: 32px;
  width: calc(32px * 378.5 / 107.3);
  flex: 0 0 auto;
  color: inherit;
  overflow: visible;
  filter: none;
}
html:not(.wk-marketplace) #header #header-logo.navbar-header,
html:not(.wk-marketplace) #header .navbar-header {
  overflow: visible !important;
}
html:not(.wk-marketplace) #header #header-logo .navbar-brand,
html:not(.wk-marketplace) #header .navbar-brand,
html:not(.wk-marketplace) .admin-guide-head .admin-guide-brand {
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
  color: inherit;
  filter: none;
}
html:not(.wk-marketplace) #header .navbar-brand .daca-logo-mark,
html:not(.wk-marketplace) .admin-guide-head .daca-logo-mark {
  display: block;
  filter: none;
}

@media (min-width: 992px) {
  html:not(.wk-marketplace) #header .daca-logo-mark,
  html:not(.wk-marketplace) .admin-guide-head .daca-logo-mark {
    height: 38px;
    width: calc(38px * 378.5 / 107.3);
  }
}

html:not(.wk-marketplace) .admin-guide-head {
  background: var(--header-bg);
  color: var(--header-fg);
}

/* ==========================================================================
 * Corte trail: 🔔 + píldora + menú cuenta (staff only)
 * ========================================================================== */
html:not(.wk-marketplace) #header .navbar-right,
html:not(.wk-marketplace) #header .admin-header-inner .navbar-right {
  align-items: center;
  gap: 8px;
  padding-right: 8px;
}

html:not(.wk-marketplace) #header .navbar-right > li,
html:not(.wk-marketplace) #header .navbar-right > li.admin-trail-notify,
html:not(.wk-marketplace) #header .navbar-right > li#wk-notify,
html:not(.wk-marketplace) #header .navbar-right > li.admin-user-dropdown {
  border-left: none;
  height: auto !important;
  min-height: 0;
  align-self: center;
}

html:not(.wk-marketplace) #header #button-theme-toggle,
html:not(.wk-marketplace) #header #button-notifications,
html:not(.wk-marketplace) #header a#button-notifications {
  margin: 0 !important;
}

html:not(.wk-marketplace) #header #button-notifications,
html:not(.wk-marketplace) #header a#button-notifications {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 36px;
  height: 36px !important;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  padding: 0;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: none;
  box-sizing: border-box;
  text-decoration: none;
}

html:not(.wk-marketplace) #header #button-notifications .fa {
  font-size: 16px;
  line-height: 1;
  color: inherit;
}

html:not(.wk-marketplace) #header #button-notifications:hover,
html:not(.wk-marketplace) #header #button-notifications:focus {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: none;
}

html:not(.wk-marketplace) #header .admin-notify-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--brand-navy, #233769);
  background: var(--filete, #C8AA78);
  border: 1px solid var(--filete, #C8AA78);
  box-sizing: border-box;
}

html:not(.wk-marketplace).admin-theme-dark #header .admin-notify-badge,
html:not(.wk-marketplace).daca-theme-neon #header .admin-notify-badge {
  background: var(--brand-cream, #E9DDC8);
  border-color: var(--brand-cream, #E9DDC8);
  color: var(--brand-navy, #233769);
}

html:not(.wk-marketplace) #header .admin-user-dropdown > a.dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 36px !important;
  min-height: 36px;
  max-height: 36px;
  padding: 0 4px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html:not(.wk-marketplace) #header .admin-user-dropdown > a.dropdown-toggle:hover,
html:not(.wk-marketplace) #header .admin-user-dropdown > a.dropdown-toggle:focus {
  background: transparent;
  color: inherit;
}

html:not(.wk-marketplace) #header #user-profile {
  width: 36px;
  height: 36px;
  max-width: 36px !important;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

html:not(.wk-marketplace) #header .admin-user-name {
  display: none !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

html:not(.wk-marketplace) #header .admin-user-dropdown .fa-caret-down {
  display: none;
}

html:not(.wk-marketplace) #header .navbar-right > li.admin-user-dropdown > .dropdown-menu,
html:not(.wk-marketplace) #header .navbar-right > li.admin-user-dropdown.open > .dropdown-menu,
html:not(.wk-marketplace) #header .navbar-right > li.dropdown > .dropdown-menu.admin-user-menu {
  width: 260px !important;
  min-width: 240px !important;
  max-width: 280px !important;
  background: var(--bg-surface);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow);
}

html:not(.wk-marketplace) #header .admin-user-menu > .admin-user-menu-id {
  cursor: default;
  pointer-events: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  padding: 10px 14px 8px;
  white-space: normal;
}

html:not(.wk-marketplace) #header .admin-user-menu-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  text-transform: none;
}

html:not(.wk-marketplace) #header .admin-user-menu-group {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-secondary);
  text-transform: none;
}

html:not(.wk-marketplace) #header .admin-user-menu > li > a {
  color: var(--text-primary);
}

html:not(.wk-marketplace) #header .admin-user-menu > li > a:hover,
html:not(.wk-marketplace) #header .admin-user-menu > li > a:focus {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-primary);
}

html:not(.wk-marketplace) #header .admin-user-menu .divider {
  height: 1px;
  margin: 6px 0;
  overflow: hidden;
  background-color: var(--border-subtle);
}

html:not(.wk-marketplace) #header .navbar-right > li.admin-user-dropdown > .dropdown-menu a.admin-user-logout {
  color: var(--danger);
}

html:not(.wk-marketplace) #header .navbar-right > li.admin-user-dropdown > .dropdown-menu a.admin-user-logout:hover,
html:not(.wk-marketplace) #header .navbar-right > li.admin-user-dropdown > .dropdown-menu a.admin-user-logout:focus {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

@media (min-width: 992px) {
  html:not(.wk-marketplace) #header .admin-user-name {
    display: inline !important;
  }
}

@media (max-width: 767px) {
  html:not(.wk-marketplace) #header .navbar-nav .open > .dropdown-menu.admin-user-menu,
  html:not(.wk-marketplace) #header .navbar-right > li.admin-user-dropdown.open > .dropdown-menu {
    width: 260px !important;
    min-width: 240px !important;
    max-width: 280px !important;
    background-color: var(--bg-surface);
  }
}

@media (max-width: 991px) {
  html:not(.wk-marketplace) #header #button-notifications,
  html:not(.wk-marketplace) #header a#button-notifications {
    color: inherit !important;
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important;
    box-shadow: none !important;
  }
}