/* ============================================================
   jcrec-overrides.css
   JCRecreation-specific overrides for the imported BuyUSAFirst
   pro-admin shell. Loaded LAST in templates/element/layout/ops-shell.php
   so its rules win over ui-kit-*.css and merchant-*.css.

   Sections:
   1. JCRec brand color tokens (defined but not auto-remapped — see
      note below; flip the remap on when you are ready to swap blues)
   2. Header padding correction (extra .header-content wrapper in our
      markup vs ui-kit reference adds 8px on each side)
   3. Sidebar colors that match the ui-kit demo
      (rules normally provided by pro-admin-ui-kit.css which we don't
      load — the single-concern ui-kit-sidebar.css only carries the
      .dark-menu/.light-menu variants, not the base palette)
   ============================================================ */

/* -------- 1. Brand color tokens -------- */
/* JCRec brand colors are defined here but NOT auto-remapped over the
   --pa-* / --bu-* tokens. The ui-kit reference uses BUSAF's blue
   (#0075B2) and the user asked for sidebar colors that match the
   ui-kit demo — so we keep the imported palette. Future: when the
   marketing site finalizes its palette, uncomment the remap block
   below to push --jc-blue everywhere. */
.jcrec-admin {
  --jc-blue:        #0E4C92;
  --jc-blue-dark:   #0A3F7B;
  --jc-blue-light:  #2E6EBF;
  --jc-accent:      #C09A35;
  --jc-text:        #1F2937;
  --jc-muted:       #6B7280;
  --jc-bg:          #F4F6FA;
  --jc-border:      rgba(17, 24, 39, 0.10);

  /* When ready to switch admin shell to JCRec brand, uncomment:
  --bu-blue:        var(--jc-blue);
  --bu-blue-dark:   var(--jc-blue-dark);
  --bu-primary:     var(--jc-blue);
  --bu-primary-dark:var(--jc-blue-dark);
  --pa-primary:     var(--jc-blue);
  --pa-primary-dark:var(--jc-blue-dark);
  */
}

/* -------- 2. Header padding correction -------- */
/* In the ui-kit reference, .header-left is a direct child of .top-header,
   so .top-header { padding: 0 1.5rem } gives ~24px between the page edge
   and the hamburger button. Our ops-shell markup adds an extra wrapper
   <div class="header-content"> with merchant-header.css adding another
   0.5rem on each side, totalling ~32px. Zero out the inner padding to
   match ui-kit visually. */
.jcrec-admin .header-content {
  padding: 0 !important;
}

.jcrec-admin .top-header {
  padding: 0 1.5rem;
}

@media (max-width: 991px) {
  .jcrec-admin .top-header {
    padding: 0 1rem;
  }
}

/* -------- 3. Sidebar colors that match the ui-kit demo -------- */
/* These rules reproduce what pro-admin-ui-kit.css ships for the demo:
       .pro-admin .pa-sidebar      { background: var(--pa-card); border-right: 1px solid var(--pa-border); }
       .pro-admin .pa-menu-item    { color: var(--pa-muted); }
       .pro-admin .pa-menu-item:hover  { background: rgba(0,117,178,0.08); color: var(--pa-text); }
       .pro-admin .pa-menu-item.active { background: rgba(0,117,178,0.15); color: var(--pa-primary); font-weight: 600; }
   merchant-sidebar.css overrides the container with #fafafa and the
   section titles with a hard-coded #005A8B; we revert both here. */

.jcrec-admin .ops-sidebar,
.jcrec-admin .pa-sidebar {
  background: var(--pa-card);
  border-right: 1px solid var(--pa-border);
}

.jcrec-admin .ops-container {
  align-items: stretch;
}

.jcrec-admin .ops-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--bu-header-height, 44px));
}

.jcrec-admin #sidebar.ops-sidebar {
  align-self: stretch;
  height: auto !important;
  min-height: calc(100vh - var(--bu-header-height, 44px));
}

.jcrec-admin .page-content {
  flex: 1 1 auto;
}

.jcrec-admin .ops-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0.85rem 0;
  color: var(--pa-muted);
  border-top: 1px solid var(--pa-border);
  font-size: 0.75rem;
}

.jcrec-admin .ops-footer a {
  color: var(--pa-primary);
  font-weight: 600;
  text-decoration: none;
}

.jcrec-admin .ops-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .jcrec-admin #sidebar.ops-sidebar {
    align-self: auto;
    height: calc(100vh - var(--bu-header-height, 44px)) !important;
    min-height: 0;
  }

  .jcrec-admin .ops-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

.jcrec-admin .pa-menu-item {
  color: var(--pa-text);
  text-decoration: none;
}

.jcrec-admin .pa-menu-item:hover {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-text);
  font-weight: 600;
}

.jcrec-admin .pa-menu-item.active {
  background: rgba(0, 117, 178, 0.15);
  color: var(--pa-primary);
  font-weight: 600;
}

.jcrec-admin .pa-menu-section-title,
.jcrec-admin .nav-section-title {
  color: var(--pa-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  padding: 0.35rem 0.85rem 0.15rem;
}

/* Sidebar footer + user menu — match the muted palette from ui-kit */
.jcrec-admin .pa-sidebar-footer {
  border-top: 1px solid var(--pa-border);
  color: var(--pa-muted);
  background: var(--pa-card);
}

.jcrec-admin .sidebar-user-toggle {
  color: var(--pa-text);
  background: transparent;
  border: none;
}

.jcrec-admin .sidebar-user-toggle:hover {
  background: rgba(0, 117, 178, 0.08);
}

.jcrec-admin .sidebar-user-dropdown {
  background: var(--pa-card);
  border-top: 1px solid var(--pa-border);
}

.jcrec-admin .sidebar-user-dropdown-item {
  color: var(--pa-text);
}

.jcrec-admin .sidebar-user-dropdown-item:hover {
  background: rgba(0, 117, 178, 0.08);
}

.jcrec-admin .sidebar-user-dropdown-item i {
  color: var(--pa-muted);
}

.jcrec-admin .sidebar-user-dropdown-divider {
  background: var(--pa-border);
}

/* Scroll buttons — softer ui-kit-style tint instead of the merchant
   #f3f8fc / #005A8B / #bcd9ea palette. */
.jcrec-admin .sidebar-scroll-btn {
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-primary);
  border: 1px solid var(--pa-border);
}

.jcrec-admin .sidebar-scroll-btn:not(:disabled):hover,
.jcrec-admin .sidebar-scroll-btn.is-emphasis {
  background: rgba(0, 117, 178, 0.15);
  border-color: rgba(0, 117, 178, 0.30);
}

.jcrec-admin .sidebar-scroll-btn:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: 1px;
}

/* Active item badge — keep the danger-red dot/badge from ui-kit */
.jcrec-admin .pa-menu-item .pa-badge,
.jcrec-admin .pa-menu-item .pa-badge-danger {
  background: var(--pa-danger, #C94A4A);
  color: #fff;
}

/* -------- 4. Collapsible sidebar sections -------- */
/* Renders when a $section in the nav config has 'collapsible' => true.
   The active section auto-expands on render (server-side); other sections
   restore from localStorage via webroot/js/admin/sidebar-sections.js. */

.jcrec-admin .pa-menu-section--collapsible {
  margin-top: 0.15rem;
}

.jcrec-admin .pa-menu-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.45rem 0.85rem 0.18rem;
  color: var(--pa-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease;
}

.jcrec-admin .pa-menu-section-toggle:hover {
  color: var(--pa-text);
}

.jcrec-admin .pa-menu-section-toggle:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: -2px;
  border-radius: 3px;
}

.jcrec-admin .pa-menu-section-title-label {
  flex: 1 1 auto;
}

.jcrec-admin .pa-menu-section-chevron {
  font-size: 0.55rem;
  flex: 0 0 auto;
  margin-left: 0.5rem;
  transition: transform 180ms ease;
}

.jcrec-admin .pa-menu-section[data-expanded="true"] .pa-menu-section-chevron {
  transform: rotate(90deg);
}

.jcrec-admin .pa-menu-section[data-expanded="false"] .pa-menu-section-items {
  display: none;
}

/* When the sidebar is fully collapsed (icon-only), the section toggle
   buttons are not useful (label + chevron disappear). Hide the toggles
   entirely and force-show the items so the icons remain reachable. */
html.sidebar-collapsed .jcrec-admin .pa-menu-section-toggle {
  display: none;
}

html.sidebar-collapsed .jcrec-admin .pa-menu-section--collapsible[data-expanded="false"] .pa-menu-section-items {
  display: block;
}

.jcrec-admin .grant-applications .grant-app-row:hover {
  cursor: pointer;
}

/* Larger, easier-to-click bulk-select checkboxes on the grant applications table.
   Targets both the header master checkbox and the per-row checkboxes. */
.jcrec-admin .grant-applications #grantBulkSelectAll,
.jcrec-admin .grant-applications .grant-row-check {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 2px solid #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.jcrec-admin .grant-applications #grantBulkSelectAll:hover,
.jcrec-admin .grant-applications .grant-row-check:hover {
  border-color: #0075b2;
}

.jcrec-admin .grant-applications #grantBulkSelectAll:focus,
.jcrec-admin .grant-applications .grant-row-check:focus {
  border-color: #0075b2;
  box-shadow: 0 0 0 3px rgba(0, 117, 178, .25);
  outline: 0;
}

.jcrec-admin .grant-applications #grantBulkSelectAll:checked,
.jcrec-admin .grant-applications #grantBulkSelectAll:indeterminate,
.jcrec-admin .grant-applications .grant-row-check:checked {
  background-color: #0075b2;
  border-color: #0075b2;
}

/* Make the surrounding cell a generous click target so near-misses still register. */
.jcrec-admin .grant-applications table thead th:first-child,
.jcrec-admin .grant-applications table tbody td:first-child {
  cursor: pointer;
  padding: .55rem .35rem;
  text-align: center;
  vertical-align: middle;
}

.jcrec-admin .grant-applications table tbody td:first-child {
  background-clip: padding-box;
}

.jcrec-admin .grant-applications .grant-app-row:hover td:first-child {
  background-color: rgba(0, 117, 178, .06);
}

.jcrec-admin .grant-applications .grant-app-row:has(.grant-row-check:checked) td:first-child {
  background-color: rgba(0, 117, 178, .12);
}

/* -------- 5. Simplified admin shell sidebar states -------- */
:root {
  --jcr-admin-sidebar-expanded-width: 272px;
  --jcr-admin-sidebar-collapsed-width: 72px;
  --jcr-admin-menu-font-size: 0.8rem;
  --jcr-admin-menu-icon-size: 0.92rem;
  --jcr-admin-menu-section-font-size: 0.63rem;
}

.jcrec-admin-shell {
  --jcr-admin-sidebar-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

/*
 * STICK-MENU LAYOUT
 * The header scrolls with the page (position: relative, not sticky/fixed).
 * The sidebar is position: fixed, but JS (pro-sidebar.js initScrollFollowHeader)
 * continuously adjusts its `top` so it rides flush against the header bottom
 * as the header scrolls up. Once the header exits the viewport, the sidebar
 * locks at top: 0 — "sticking" to the top of the screen. Scrolling back up
 * reverses this. The sidebar always fills from its current top to the viewport
 * bottom via `bottom: 0` + `height: auto`.
 */

/*
 * Header in normal block flow — overrides position: sticky from merchant-header.css
 * and position: fixed from ui-kit-header.css. !important needed to beat those rules.
 */
.jcrec-admin-shell .ops-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  flex-shrink: 0;
}

.jcrec-admin-shell .pa-layout {
  padding-top: 0 !important;
}

.jcrec-admin-shell .ops-container {
  display: flex;
  align-items: stretch;
  position: relative;
  min-height: calc(100vh - var(--bu-header-height, 44px));
}

/*
 * Pinned sidebar: fixed so it stays in the viewport while content scrolls.
 * `top` starts at header height; JS slides it toward 0 as the user scrolls
 * the header away. `bottom: 0` makes the sidebar always fill to the viewport
 * bottom regardless of how much of the header is showing.
 *
 * `top` and `height` carry !important here because pro-admin.css has
 * `.pa-sidebar { top: 44px !important; height: calc(100vh - 44px) !important }`.
 * Our selector has higher specificity (ID + 2 classes vs 1 class), so our
 * !important declarations win. `height: auto` lets top + bottom control the
 * height so it always fills from wherever the sidebar starts to the viewport
 * bottom. JS uses setProperty(..., 'important') so it can override these too.
 */
.jcrec-admin-shell #sidebar.ops-sidebar {
  position: fixed !important;
  top: var(--bu-header-height, 44px) !important;
  left: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: var(--jcr-admin-sidebar-expanded-width) !important;
  min-width: var(--jcr-admin-sidebar-expanded-width) !important;
  max-width: var(--jcr-admin-sidebar-expanded-width) !important;
  box-shadow: none;
  transition:
    width 180ms ease,
    min-width 180ms ease,
    max-width 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
  z-index: 1040;
}

/*
 * ops-main: margin-left shim for the fixed sidebar so content doesn't slide
 * under it. Padding-top is 0 — header is in flow, no offset needed.
 */
.jcrec-admin-shell .ops-main {
  margin-left: var(--jcr-admin-sidebar-expanded-width);
  flex: 1 1 auto;
  width: auto;
  padding-top: 0 !important;
}

html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell #sidebar.ops-sidebar {
  width: var(--jcr-admin-sidebar-collapsed-width) !important;
  min-width: var(--jcr-admin-sidebar-collapsed-width) !important;
  max-width: var(--jcr-admin-sidebar-collapsed-width) !important;
}

html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell .ops-main {
  margin-left: var(--jcr-admin-sidebar-collapsed-width);
}

/*
 * Unpinned: hidden off-screen, slides in as a full-viewport overlay.
 * top:0 so it covers the full viewport regardless of scroll position.
 */
html.sidebar-unpinned .jcrec-admin-shell #sidebar.ops-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--jcr-admin-sidebar-expanded-width) !important;
  min-width: var(--jcr-admin-sidebar-expanded-width) !important;
  max-width: var(--jcr-admin-sidebar-expanded-width) !important;
  transform: translateX(-110%);
  box-shadow: var(--jcr-admin-sidebar-shadow);
}

html.sidebar-unpinned .jcrec-admin-shell .ops-main {
  margin-left: 0;
}

html.sidebar-unpinned.sidebar-overlay-open .jcrec-admin-shell #sidebar.ops-sidebar {
  transform: translateX(0);
  z-index: 1200 !important;
}

html.sidebar-overlay-open body.jcrec-admin-shell::before {
  opacity: 0 !important;
  pointer-events: none !important;
}

.jcrec-admin-shell .sidebar-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  border: 0;
  background: rgba(15, 23, 42, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 1030;
}

/* Backdrop visible for mobile drawer only.
   Desktop unpinned/collapsed menu opens as a non-dimming overlay so clicking
   the menu does not gray out the entire work surface. Outside-click dismissal
   is still handled by pro-sidebar.js on the document click listener. */
html.sidebar-mobile-open .jcrec-admin-shell .sidebar-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.jcrec-admin-shell .flash-messages:empty {
  display: none;
}

.jcrec-admin-shell .page-content > :first-child {
  margin-top: 0 !important;
}

/* Sidebar toolbar icon buttons — collapse toggle + dock toggle.
   Rendered as .admin-sidebar-size-toggle and .admin-sidebar-dock-toggle
   in ops-shell.php. Wired via data-sidebar-collapse-toggle / data-sidebar-pin-toggle. */
.jcrec-admin-shell .admin-sidebar-size-toggle,
.jcrec-admin-shell .admin-sidebar-dock-toggle,
.jcrec-admin-shell .admin-sidebar-close-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--pa-border);
  border-radius: 999px;
  background: transparent;
  color: var(--pa-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.jcrec-admin-shell .admin-sidebar-size-toggle:hover,
.jcrec-admin-shell .admin-sidebar-dock-toggle:hover,
.jcrec-admin-shell .admin-sidebar-close-toggle:hover,
.jcrec-admin-shell .admin-sidebar-dock-toggle.is-pinned {
  color: var(--pa-primary);
  border-color: rgba(0, 117, 178, 0.28);
  background: rgba(0, 117, 178, 0.08);
}

.jcrec-admin-shell .admin-sidebar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem 0.4rem;
  border-bottom: 1px solid var(--pa-border);
  flex-shrink: 0;
}

.jcrec-admin-shell .admin-sidebar-toolbar-btns {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.jcrec-admin-shell .admin-sidebar-close-toggle {
  display: none;
}

html.sidebar-mobile-open .jcrec-admin-shell .admin-sidebar-close-toggle,
html.sidebar-overlay-open .jcrec-admin-shell .admin-sidebar-close-toggle {
  display: inline-flex;
}

html.sidebar-mobile-open .jcrec-admin-shell .admin-sidebar-size-toggle,
html.sidebar-overlay-open .jcrec-admin-shell .admin-sidebar-size-toggle {
  display: none;
}

.jcrec-admin-shell .admin-sidebar-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-muted);
  flex: 1 1 auto;
  min-width: 0;
}

.jcrec-admin-shell .pa-sidebar-nav {
  padding: 0.22rem 0.35rem 0.35rem;
}

.jcrec-admin-shell .sidebar-scroll {
  padding-top: 0.08rem;
  padding-bottom: 0.08rem;
}

.jcrec-admin-shell .pa-menu {
  gap: 0.02rem;
}

.jcrec-admin-shell .pa-menu-section,
.jcrec-admin-shell .pa-menu-section--collapsible {
  margin-top: 0.05rem;
}

.jcrec-admin-shell .pa-menu-section-title,
.jcrec-admin-shell .nav-section-title {
  padding: 0.2rem 0.4rem 0.08rem;
  font-size: var(--jcr-admin-menu-section-font-size);
  letter-spacing: 0.045em;
  color: var(--pa-primary);
}

.jcrec-admin-shell .pa-menu-section-toggle {
  padding: 0.28rem 0.4rem 0.12rem;
  font-size: var(--jcr-admin-menu-section-font-size);
  color: var(--pa-primary);
}

.jcrec-admin-shell .pa-menu-item {
  gap: 0.45rem;
  min-height: 26px;
  padding: 0.24rem 0.8rem;
  border-radius: 4px;
  font-size: var(--jcr-admin-menu-font-size);
  line-height: 1.1;
}

.jcrec-admin-shell .pa-menu-item i {
  width: 16px;
  min-width: 16px;
  font-size: var(--jcr-admin-menu-icon-size);
  margin-right: 0;
}

.jcrec-admin-shell .pa-menu-item .pa-badge,
.jcrec-admin-shell .pa-menu-item .pa-badge-danger {
  transform: scale(0.92);
  transform-origin: center right;
}

.jcrec-admin-shell .pa-sidebar-footer {
  padding: 0.35rem 0.45rem 0.45rem;
}

.jcrec-admin-shell .sidebar-user-toggle {
  padding: 0.3rem 0.45rem;
  min-height: 34px;
}

.jcrec-admin-shell .sidebar-theme-toggle {
  padding: 0.26rem 0.45rem;
  min-height: 30px;
  font-size: 0.72rem;
}

.jcrec-admin-shell .sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -7px;
  width: 14px;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.001);
  cursor: col-resize !important;
  touch-action: none;
  z-index: 20;
}

.jcrec-admin-shell .sidebar-resize-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 2px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0, 117, 178, 0.16);
  transition: background 140ms ease;
}

.jcrec-admin-shell .sidebar-resize-handle:hover::before,
.is-resizing-sidebar .jcrec-admin-shell .sidebar-resize-handle::before {
  background: rgba(0, 117, 178, 0.42);
}

.jcrec-admin-shell .sidebar-resize-handle.is-hidden {
  display: none;
}

/* merchant-sidebar.css has `:root.sidebar-ready #sidebar { transition: width 200ms !important }`.
   That !important strips min-width, max-width, transform, and box-shadow from the transition,
   causing jerky resize animation. Our selector has higher specificity (ID + 2 classes) so our
   !important wins and restores the full transition list. */
:root.sidebar-ready .jcrec-admin-shell #sidebar.ops-sidebar {
  transition:
    width 180ms ease,
    min-width 180ms ease,
    max-width 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease !important;
}

.is-resizing-sidebar,
.is-resizing-sidebar * {
  cursor: col-resize !important;
  user-select: none !important;
}

html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell .admin-sidebar-toolbar {
  justify-content: center;
  padding-inline: 0;
  gap: 0;
}

html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell .admin-sidebar-title {
  display: none;
}

html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell .admin-sidebar-toolbar-btns {
  gap: 0.2rem;
}

html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell .admin-sidebar-size-toggle,
html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell .admin-sidebar-dock-toggle {
  width: 1.75rem;
  height: 1.75rem;
}

html.sidebar-pinned.sidebar-collapsed .jcrec-admin-shell {
  --jcr-admin-menu-font-size: 0.68rem;
  --jcr-admin-menu-icon-size: 0.78rem;
  --jcr-admin-menu-section-font-size: 0.56rem;
}

html.sidebar-unpinned .jcrec-admin-shell #sidebar.ops-sidebar,
html.sidebar-unpinned .jcrec-admin-shell #sidebar.ops-sidebar .sidebar-scroll,
html.sidebar-unpinned .jcrec-admin-shell #sidebar.ops-sidebar .pa-sidebar-scroll-wrap {
  overflow-x: hidden;
}

html.sidebar-unpinned .jcrec-admin-shell .nav-section-title {
  display: block;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-section-title,
html.sidebar-unpinned .jcrec-admin-shell .pa-menu-section-toggle {
  display: flex;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  font-size: var(--jcr-admin-menu-section-font-size);
  padding: 0.26rem 0.4rem 0.12rem;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-section-toggle {
  align-items: center;
  justify-content: space-between;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-section-title-label {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  font-size: inherit !important;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-section--collapsible[data-expanded="false"] .pa-menu-section-items {
  display: none;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  width: 100%;
  min-height: 26px;
  padding: 0.24rem 0.8rem !important;
  color: var(--pa-text) !important;
  font-size: var(--jcr-admin-menu-font-size) !important;
  line-height: 1.1;
  text-indent: 0;
  white-space: nowrap;
  overflow: hidden;
  background: transparent;
  margin: 0 !important;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-item i {
  width: 16px;
  min-width: 16px;
  margin: 0 !important;
  color: var(--pa-muted) !important;
  font-size: var(--jcr-admin-menu-icon-size) !important;
  text-align: center;
  flex-shrink: 0;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-item > *:not(i) {
  opacity: 1 !important;
  visibility: visible !important;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-item::before {
  display: none;
}

html.sidebar-unpinned .jcrec-admin-shell .pa-menu-item .pa-badge {
  margin-left: auto;
  flex: 0 0 auto;
}

html.sidebar-unpinned .jcrec-admin-shell .sidebar-scroll {
  padding-right: 0;
}

html.sidebar-unpinned .jcrec-admin-shell .ops-sidebar .pa-menu,
html.sidebar-unpinned .jcrec-admin-shell .ops-sidebar .pa-sidebar-nav {
  width: 100%;
}

@media (max-width: 991.98px) {
  /* Hide the dock (pin) button on mobile — pinning is always-on */
  .jcrec-admin-shell .admin-sidebar-dock-toggle {
    display: none;
  }

  /* Mobile: always a fixed full-height drawer, slides in from the left.
     top:0 + bottom:0 + height:auto fills the full viewport; no hard-coded height needed. */
  .jcrec-admin-shell #sidebar.ops-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: min(88vw, 320px) !important;
    min-width: min(88vw, 320px) !important;
    max-width: min(88vw, 320px) !important;
    transform: translateX(-110%);
    /* Keep the mobile drawer above all mobile backdrops. */
    z-index: 1200 !important;
  }

  /* This shell has its own clickable .sidebar-backdrop. Disable the inherited
     pro-admin body::before backdrop so it cannot sit above the drawer and
     intercept menu taps on mobile. */
  html.sidebar-mobile-open body.jcrec-admin-shell::before,
  html.sidebar-overlay-open body.jcrec-admin-shell::before {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.sidebar-mobile-open .jcrec-admin-shell #sidebar.ops-sidebar {
    transform: translateX(0);
  }

  .jcrec-admin-shell .ops-main {
    margin-left: 0 !important;
  }

  .jcrec-admin-shell .admin-sidebar-toolbar {
    padding-inline: 0.7rem;
  }
}

/* ── Focus mode (full browser window) ──────────────────────────────────────
 * Hides the header and sidebar so content fills the full browser viewport.
 * Does NOT use the Fullscreen API — the browser's own chrome stays visible.
 * Toggled by adding/removing 'focus-mode' on <html> via focus-mode.js.
 * All rules use !important to beat the pinned/unpinned/collapsed variants
 * above without needing to repeat every combination.
 * ──────────────────────────────────────────────────────────────────────── */
html.focus-mode .jcrec-admin-shell .ops-header {
  display: none !important;
}

html.focus-mode .jcrec-admin-shell #sidebar.ops-sidebar {
  transform: translateX(-110%) !important;
  box-shadow: none !important;
}

html.focus-mode .jcrec-admin-shell .ops-main {
  margin-left: 0 !important;
}

html.focus-mode .jcrec-admin-shell .sidebar-backdrop {
  display: none !important;
}

/* Small screens: remove fullscreen/full-window controls but keep account access. */
@media (max-width: 991.98px) {
  .jcrec-admin-shell [data-fullscreen-toggle],
  .jcrec-admin-shell [data-native-fullscreen-toggle] {
    display: none !important;
  }

  .jcrec-admin-shell .header-user-menu,
  .jcrec-admin-shell .header-user-btn {
    display: flex !important;
  }
}

/* Small screens: avoid the half-visible/ghost company switcher in the header. */
@media (max-width: 991.98px) {
  .jcrec-admin-shell .header-company-switcher {
    display: none !important;
  }
}

/* ── Mobile company switching lives in the header user menu ───────────────
   The dashboard's own "Switch Company" card button (#companyDropdown) crams
   against the company name on narrow screens, reading as an overlap. On mobile
   we hide it and expose switching inside the header user dropdown instead. */
.user-dropdown-company-label {
  padding: 0.3rem 0.85rem 0.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pa-muted, #6c757d);
}
@media (max-width: 991.98px) {
  #companyDropdown {
    display: none !important;
  }
}