/* =========================================================================
   Poshesh admin design system
   -------------------------------------------------------------------------
   Layered on top of the vendored RTL subset. The vendored files carry
   the brand primary (#0b6280, taken from the Poshesh logo) so every stock
   Bootstrap component is already on-brand; this file owns the shell
   (sidebar, topbar, page chrome), the surface language (radius, border,
   shadow) and the Poshesh-specific components.
   ========================================================================= */

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-300.woff2") format("woff2");
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-400.woff2") format("woff2");
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-500.woff2") format("woff2");
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-600.woff2") format("woff2");
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-700.woff2") format("woff2");
}

/* =========================================================================
   1. Brand tokens
   ========================================================================= */
:root {
  --vz-font-sans-serif: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
  /* Straight from the logo: the petrol wordmark and the turquoise swoosh. */
  --poshesh-brand: #0b6280;
  --poshesh-brand-rgb: 11, 98, 128;
  --poshesh-brand-600: #0a5670;
  --poshesh-brand-700: #084a60;
  --poshesh-brand-800: #063a4c;
  --poshesh-brand-900: #052c3a;
  --poshesh-brand-400: #2c86a5;
  --poshesh-brand-300: #6aa9bf;
  --poshesh-brand-100: #dceaf0;
  --poshesh-brand-50: #eff6f9;
  --poshesh-accent: #019c9d;
  --poshesh-accent-rgb: 1, 156, 157;
  --poshesh-accent-400: #16b8b7;
  --poshesh-accent-300: #3fe0d8;
  --poshesh-accent-100: #d5f2f2;
  /* Semantic colours inherited from the Velzon palette. */
  --poshesh-ui-primary: var(--poshesh-brand);
  --poshesh-ui-primary-dark: var(--poshesh-brand-700);
  --poshesh-ui-primary-soft: var(--poshesh-brand-50);
  --poshesh-ui-success: #12a17d;
  --poshesh-ui-danger: #e0525f;
  --poshesh-ui-warning: #e39b2b;
  --poshesh-ui-info: #2b9bd4;
  /* Surfaces — redefined under [data-bs-theme=dark] further down. */
  --poshesh-ui-ink: #0f2c3a;
  --poshesh-ui-ink-soft: #34505d;
  --poshesh-ui-muted: #718b98;
  --poshesh-ui-surface: #fff;
  --poshesh-ui-surface-2: #f5f9fb;
  --poshesh-ui-surface-3: #eef4f7;
  --poshesh-ui-border: #e2eaef;
  --poshesh-ui-border-soft: rgba(11, 98, 128, .08);
  --poshesh-ui-page-bg: #f1f5f8;
  --poshesh-ui-radius-xs: .55rem;
  --poshesh-ui-radius-sm: .7rem;
  --poshesh-ui-radius: 1rem;
  --poshesh-ui-radius-lg: 1.35rem;
  --poshesh-ui-radius-xl: 1.75rem;
  --poshesh-ui-control-height: 3.15rem;
  --poshesh-ui-shadow-xs: 0 1px 2px rgba(9, 45, 60, .05);
  --poshesh-ui-shadow-sm: 0 1px 2px rgba(9, 45, 60, .05), 0 6px 16px -12px rgba(9, 45, 60, .4);
  --poshesh-ui-shadow-card: 0 1px 2px rgba(9, 45, 60, .05), 0 18px 34px -26px rgba(9, 45, 60, .55);
  --poshesh-ui-shadow-lift: 0 2px 4px rgba(9, 45, 60, .06), 0 26px 44px -28px rgba(9, 45, 60, .5);
  --poshesh-ui-shadow-pop: 0 1.5rem 3rem -1rem rgba(6, 42, 56, .28);
  --poshesh-ui-shadow-focus: 0 0 0 .22rem rgba(var(--poshesh-brand-rgb), .16);
  /* Velzon plumbing --------------------------------------------------- */
  --vz-primary: var(--poshesh-brand);
  --vz-primary-rgb: var(--poshesh-brand-rgb);
  --vz-body-bg: var(--poshesh-ui-page-bg);
  --vz-heading-color: var(--poshesh-ui-ink);
  --vz-border-color: var(--poshesh-ui-border);
  --vz-card-bg: var(--poshesh-ui-surface);
  --vz-header-bg: rgba(255, 255, 255, .82);
  --vz-header-border: rgba(11, 98, 128, .09);
  --vz-header-item-color: #486a79;
  --vz-vertical-menu-bg: transparent;
  --vz-vertical-menu-item-color: rgba(232, 244, 248, .68);
  --vz-vertical-menu-item-hover-color: #fff;
  --vz-vertical-menu-item-active-color: #fff;
  --vz-vertical-menu-item-active-bg: transparent;
  --vz-vertical-menu-sub-item-color: rgba(226, 240, 245, .58);
  --vz-vertical-menu-sub-item-hover-color: #fff;
  --vz-vertical-menu-sub-item-active-color: #fff;
  --vz-vertical-menu-title-color: rgba(180, 214, 226, .5);
  --vz-footer-bg: transparent;
  --vz-footer-color: var(--poshesh-ui-muted);
}

body {
  font-family: var(--vz-font-sans-serif);
  letter-spacing: -0.002em;
}

  /* =========================================================================
   2. Shell
   ========================================================================= */
  body[data-poshesh-panel] {
    background-color: var(--poshesh-ui-page-bg);
    background-image: radial-gradient(58rem 30rem at 100% -6rem, rgba(var(--poshesh-accent-rgb), .07), transparent 70%), radial-gradient(50rem 28rem at -8% 4rem, rgba(var(--poshesh-brand-rgb), .07), transparent 70%);
    background-attachment: fixed;
    color: var(--poshesh-ui-ink-soft);
  }

    body[data-poshesh-panel] .page-content {
      padding-bottom: 3.5rem;
    }

    body[data-poshesh-panel] h1,
    body[data-poshesh-panel] h2,
    body[data-poshesh-panel] h3,
    body[data-poshesh-panel] h4,
    body[data-poshesh-panel] h5,
    body[data-poshesh-panel] h6 {
      color: var(--poshesh-ui-ink);
      font-weight: 700;
      letter-spacing: -0.012em;
    }

    body[data-poshesh-panel] a {
      text-decoration: none;
    }

    body[data-poshesh-panel] .text-muted {
      color: var(--poshesh-ui-muted) !important;
    }

    /* =========================================================================
   3. Sidebar
   ========================================================================= */
    body[data-poshesh-panel] .app-menu.navbar-menu {
      background: linear-gradient(197deg, #0e5068 0%, #0a3a4c 46%, #06222e 100%);
      border-inline-start: 0;
      box-shadow: -1px 0 0 rgba(255, 255, 255, .04) inset, 0 0 3rem rgba(4, 26, 35, .35);
      /* A column of [brand box | scrolling menu] instead of Velzon's fixed bottom padding: the
         menu then owns exactly the space left over, at any viewport height. */
      display: flex;
      flex-direction: column;
      padding: 0;
      position: fixed;
    }

      body[data-poshesh-panel] .app-menu.navbar-menu::before {
        background: radial-gradient(20rem 13rem at 88% -2rem, rgba(var(--poshesh-accent-rgb), .16), transparent 70%), radial-gradient(18rem 20rem at 0% 100%, rgba(var(--poshesh-accent-rgb), .07), transparent 72%);
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
      }

    body[data-poshesh-panel] .app-menu .navbar-brand-box {
      align-items: center;
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      flex: 0 0 auto;
      height: 70px;
      justify-content: center;
      padding-inline: 1.35rem;
      position: relative;
      z-index: 1;
    }

      body[data-poshesh-panel] .app-menu .navbar-brand-box .logo {
        align-items: center;
        display: inline-flex;
      }

.poshesh-sidebar-pin {
  align-items: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .55rem;
  color: rgba(232, 244, 248, .72);
  display: none;
  height: 2rem;
  inset-inline-end: .7rem;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  width: 2rem;
}

  .poshesh-sidebar-pin:hover,
  .poshesh-sidebar-pin:focus-visible {
    background: rgba(var(--poshesh-accent-rgb), .18);
    border-color: rgba(var(--poshesh-accent-rgb), .38);
    color: var(--poshesh-accent-300);
    outline: 0;
  }

.poshesh-brand-logo {
  display: block;
  height: 2.15rem;
  width: auto;
}

.poshesh-brand-mark {
  display: block;
  height: 1.95rem;
  width: auto;
}

/* The menu is the only scrolling region of the sidebar; the brand box stays put. */
body[data-poshesh-panel] #scrollbar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  scrollbar-color: rgba(214, 238, 244, .22) transparent;
  /* Reserve the scrollbar lane before a branch expands. Without a stable gutter, opening a long
     menu steals a few pixels from every row and makes the sidebar visibly jump and reflow. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  z-index: 1;
}

  body[data-poshesh-panel] #scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  body[data-poshesh-panel] #scrollbar::-webkit-scrollbar-thumb {
    background: rgba(214, 238, 244, .22);
    border-radius: 1rem;
  }

  body[data-poshesh-panel] #scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

/* Which site am I administering — and one click to go look at it. */
.poshesh-site-chip {
  align-items: center;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--poshesh-ui-radius-sm);
  color: rgba(232, 244, 248, .78);
  display: flex;
  gap: .6rem;
  margin: .8rem .7rem .35rem;
  padding: .55rem .7rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}

  .poshesh-site-chip:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(var(--poshesh-accent-rgb), .3);
    color: #fff;
  }

  .poshesh-site-chip > i {
    color: rgba(214, 238, 244, .45);
    font-size: .92rem;
  }

/* "The site is up" indicator: a steady core with a ring breathing out of it. Two layers so the
   dot itself never changes size — a pulsing dot next to text reads as a layout wobble. */
.poshesh-site-chip-dot {
  background: var(--poshesh-accent-300);
  border-radius: 50%;
  flex: 0 0 auto;
  height: .5rem;
  position: relative;
  width: .5rem;
}

  .poshesh-site-chip-dot::before,
  .poshesh-site-chip-dot::after {
    animation: poshesh-dot-pulse 2.6s cubic-bezier(.25, .6, .35, 1) infinite;
    border: 1px solid var(--poshesh-accent-300);
    border-radius: 50%;
    content: "";
    inset: 0;
    position: absolute;
  }

  /* The second ring is the same animation half a cycle later, which reads as a continuous
     emission rather than a repeating blip. */
  .poshesh-site-chip-dot::after {
    animation-delay: 1.3s;
  }

@keyframes poshesh-dot-pulse {
  0% {
    opacity: .75;
    transform: scale(1);
  }

  70% {
    opacity: 0;
    transform: scale(3.1);
  }

  100% {
    opacity: 0;
    transform: scale(3.1);
  }
}

.poshesh-site-chip-body {
  flex: 1 1 auto;
  min-width: 0;
}

.poshesh-site-chip-name {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poshesh-site-chip-hint {
  color: rgba(214, 238, 244, .45);
  display: block;
  font-size: .64rem;
}

[data-sidebar-size="sm"] .poshesh-site-chip {
  display: none;
}

body[data-poshesh-panel] #navbar-nav {
  padding: .2rem .7rem 1.5rem;
}

  body[data-poshesh-panel] #navbar-nav > .nav-item {
    margin-bottom: .12rem;
  }

  body[data-poshesh-panel] #navbar-nav .nav-link.menu-link {
    align-items: center;
    border-radius: var(--poshesh-ui-radius-xs);
    color: rgba(232, 244, 248, .74);
    display: flex;
    font-size: .905rem;
    font-weight: 500;
    gap: .68rem;
    padding: .66rem .8rem;
    position: relative;
    transition: background-color 160ms ease, color 160ms ease;
  }

    body[data-poshesh-panel] #navbar-nav button.nav-link {
      appearance: none;
      background: transparent;
      border: 0;
      text-align: start;
      width: 100%;
    }

    body[data-poshesh-panel] #navbar-nav .nav-link:focus-visible {
      background: rgba(255, 255, 255, .09);
      box-shadow: inset 0 0 0 2px rgba(var(--poshesh-accent-rgb), .72);
      color: #fff;
      outline: 0;
    }

    body[data-poshesh-panel] #navbar-nav .nav-link.menu-link > i {
      color: rgba(214, 238, 244, .58);
      font-size: 1.15rem;
      line-height: 1;
      margin: 0;
      transition: color 160ms ease;
      width: 1.25rem;
    }

    body[data-poshesh-panel] #navbar-nav .nav-link.menu-link > span:not(.poshesh-menu-branch-indicator) {
      flex: 1 1 auto;
    }

    /* A light chevron distinguishes branches without turning every parent into a second button. */
    body[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle::after {
      display: none !important;
    }

    body[data-poshesh-panel] #navbar-nav .poshesh-menu-branch-indicator {
      align-items: center;
      color: rgba(214, 238, 244, .46);
      display: inline-flex;
      flex: 0 0 auto;
      height: 1.25rem;
      justify-content: center;
      margin-inline-start: auto;
      transition: color 160ms ease;
      width: 1.25rem;
    }

      body[data-poshesh-panel] #navbar-nav .poshesh-menu-branch-indicator > i {
        font-size: 1.05rem;
        line-height: 1;
        transition: transform 180ms ease;
      }

    body[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle:hover .poshesh-menu-branch-indicator,
    body[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle:focus-visible .poshesh-menu-branch-indicator {
      color: var(--poshesh-accent-300);
    }

    body[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle[aria-expanded="true"] .poshesh-menu-branch-indicator {
      color: var(--poshesh-accent-300);
    }

      body[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle[aria-expanded="true"] .poshesh-menu-branch-indicator > i {
        transform: rotate(-90deg);
      }

    body[data-poshesh-panel] #navbar-nav .nav-sm .poshesh-menu-branch-indicator {
      height: 1.1rem;
      width: 1.1rem;
    }

      body[data-poshesh-panel] #navbar-nav .nav-sm .poshesh-menu-branch-indicator > i {
        font-size: .9rem;
      }

    body[data-poshesh-panel] #navbar-nav .nav-link.menu-link:hover {
      background: rgba(255, 255, 255, .075);
      color: #fff;
    }

      body[data-poshesh-panel] #navbar-nav .nav-link.menu-link:hover > i {
        color: var(--poshesh-accent-300);
      }

    body[data-poshesh-panel] #navbar-nav .nav-link.menu-link.active {
      background: linear-gradient(275deg, rgba(var(--poshesh-accent-rgb), .3), rgba(var(--poshesh-accent-rgb), .07) 72%, transparent);
      color: #fff;
      font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(var(--poshesh-accent-rgb), .16);
    }

      /* The marker sits on the start edge — the same side the accent gradient starts from, and
         under RTL that is the sidebar's outer edge. inset-inline-end put it on the far side of
         the row, opposite everything it was meant to mark. */
      body[data-poshesh-panel] #navbar-nav .nav-link.menu-link.active::before {
        background: linear-gradient(180deg, var(--poshesh-accent-300), var(--poshesh-accent));
        border-radius: 1rem;
        bottom: .42rem;
        box-shadow: 0 0 .85rem rgba(var(--poshesh-accent-rgb), .75);
        content: "";
        inset-inline-start: -.7rem;
        position: absolute;
        top: .42rem;
        width: 3px;
      }

      body[data-poshesh-panel] #navbar-nav .nav-link.menu-link.active > i {
        color: var(--poshesh-accent-300);
      }

  /* Sub menus ---------------------------------------------------------- */
  /* Children form a quiet indented branch: one guide rail and small nodes, never a second row of
     full-size feature icons competing with the root navigation.
     Two rules here are load-bearing and easy to undo by accident:
     • Velzon declares `padding: .55rem 1.5rem !important` on `.navbar-menu .navbar-nav .nav-sm
       .nav-link`, so a plain `padding-inline` below is discarded no matter how specific it is. Every
       padding in this block is therefore `!important` — without it a level's labels stay at Velzon's
       fixed offset while its rail moves, which is exactly how a third level used to print its guide
       line and nodes on top of its own Persian labels.
     • Depth is expressed with a MARGIN on each nested list, never padding. The rail is positioned
       against its list's padding box, so padding would move the labels and leave the rail behind;
       margin carries rail, nodes and labels together and keeps the geometry self-similar at any
       depth a plugin cares to contribute. */
  body[data-poshesh-panel] #navbar-nav {
    --poshesh-menu-indent: 1.85rem;
    --poshesh-menu-rail: .7rem;
    --poshesh-menu-step: 1.15rem;
  }

  body[data-poshesh-panel] #navbar-nav .menu-dropdown {
    position: relative;
  }

  body[data-poshesh-panel] #navbar-nav .nav-sm {
    margin: .28rem 0 .52rem;
    padding: 0 !important;
    position: relative;
  }

    body[data-poshesh-panel] #navbar-nav .nav-sm::before {
      background: linear-gradient(180deg, rgba(var(--poshesh-accent-rgb), .58), rgba(255, 255, 255, .1));
      border-radius: 1rem;
      bottom: .4rem;
      content: "";
      /* In RTL, inline-start is the right edge. Keep the rail beside the panel edge and reserve a
         separate text indent so neither the nodes nor the line can overlap Persian labels. */
      inset-inline-start: var(--poshesh-menu-rail);
      position: absolute;
      top: .4rem;
      width: 1px;
    }

    body[data-poshesh-panel] #navbar-nav .nav-sm > .nav-item + .nav-item {
      margin-top: .1rem;
    }

    body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link {
      align-items: center;
      border-radius: var(--poshesh-ui-radius-xs);
      color: rgba(226, 240, 245, .62);
      display: flex;
      font-size: .85rem;
      gap: .35rem;
      min-height: 2.25rem;
      padding-block: .46rem !important;
      padding-inline: var(--poshesh-menu-indent) .6rem !important;
      position: relative;
      transition: background-color 150ms ease, color 150ms ease;
    }

      /* One line, always. A long Persian label truncates inside its own indent instead of wrapping
         or spilling past the panel edge; the full text stays available as a tooltip. */
      body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link > span:not(.poshesh-menu-branch-indicator) {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link::before {
        background: #477887;
        border: 1px solid #0a3a4c;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(214, 238, 244, .16);
        content: "";
        height: .38rem;
        inset-inline-start: calc(var(--poshesh-menu-rail) - .19rem);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
        width: .38rem;
      }

      body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link > i:first-child {
        display: none;
      }

      body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link:hover {
        background: rgba(255, 255, 255, .06);
        color: #fff;
      }

        body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link:hover::before {
          background: var(--poshesh-accent-300);
          border-color: #0a3a4c;
          box-shadow: 0 0 .55rem rgba(var(--poshesh-accent-rgb), .55);
        }

      body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link.active {
        background: rgba(255, 255, 255, .085);
        color: #fff;
        font-weight: 600;
      }

        body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link.active::before {
          background: var(--poshesh-accent-300);
          border-color: #0a3a4c;
          box-shadow: 0 0 .7rem rgba(var(--poshesh-accent-rgb), .9);
          transform: translateY(-50%) scale(1.12);
        }

      /* An open branch keeps its own label lit, so the row a sub-list belongs to stays readable
         while the eye is inside the sub-list. */
      body[data-poshesh-panel] #navbar-nav .nav-sm .poshesh-menu-toggle[aria-expanded="true"] {
        color: rgba(240, 250, 253, .9);
      }

    /* One extra step of indentation per nesting level. The margin moves the list itself, so the
       rail and the nodes stay at their fixed offset inside it and the pattern repeats at any depth
       instead of being written out level by level. */
    body[data-poshesh-panel] #navbar-nav .nav-sm .nav-sm {
      margin-block: .2rem .34rem;
      margin-inline-start: var(--poshesh-menu-step);
    }

      /* No node or row styling per depth, on purpose. A deeper level is identical to the one above
         it — same height, same type, same filled node — and only its indent says how deep it is.
         An earlier attempt made deep nodes smaller and hollow: the transparent fill let the guide
         rail draw straight through the middle of every circle, which at 6px reads as a rendering
         artefact rather than as hierarchy. The filled node is exactly what hides the rail behind it.
         Anything added here must also be repeated for :hover and .active — those base rules carry
         the same specificity and appear earlier, so a plain override silently wins over both. */

/* Collapsed sidebar ----------------------------------------------------
   The compact state is an owned Poshesh interaction, not Velzon's legacy horizontal fly-out.
   The 70px rail stays docked, while a temporary full-width panel opens over the page on hover,
   focus or tap. Keeping the existing menu tree inside the panel means nested Bootstrap collapses
   retain their state and the native vertical scroller never has to leak content horizontally. */
@media (min-width: 768px) {
  html[data-layout="vertical"][data-sidebar-size="sm"] {
    /* Velzon gives its small sidebar a template-demo min-height of 1400px. The real panel follows
       its document content and viewport instead, otherwise compact mode creates a phantom page. */
    min-height: 100%;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] .app-menu.navbar-menu {
    overflow: visible;
    padding-top: 0;
    transition: width 190ms cubic-bezier(.2, .72, .25, 1), box-shadow 190ms ease;
    width: var(--vz-vertical-menu-width-sm) !important;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] .app-menu .navbar-brand-box {
    padding-inline: 0;
    width: 100%;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] .app-menu .logo span.logo-lg,
  [data-sidebar-size="sm"] body[data-poshesh-panel] .poshesh-site-chip {
    display: none;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] .app-menu .logo span.logo-sm {
    display: inline-flex;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav {
    padding: .35rem .55rem 1.25rem;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item {
    margin-bottom: .18rem;
    position: relative;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item > .nav-link.menu-link,
  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item:hover > .nav-link.menu-link {
    border-radius: .7rem;
    gap: 0;
    justify-content: center;
    min-height: 2.9rem;
    overflow: hidden;
    padding: .55rem;
    transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
    width: 100% !important;
  }

    [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item > .nav-link.menu-link > i {
      flex: 0 0 auto;
      font-size: 1.34rem;
      width: auto;
    }

    [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item > .nav-link.menu-link > span:not(.poshesh-menu-branch-indicator),
    [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item > .nav-link.menu-link::after {
      display: none !important;
    }

    [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item > .poshesh-menu-toggle .poshesh-menu-branch-indicator {
      /* A second glyph below the root icon reads as a separate menu item in the narrow rail.
         Branch affordance returns beside the label as soon as the peek panel opens. */
      display: none !important;
    }

    [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav .nav-link.menu-link.active::before {
      display: block !important;
      inset-inline-start: -.55rem;
    }

  /* Neutralise every legacy Velzon hover fly-out. The submenu is deliberately invisible in the
     rail and resumes normal document flow only inside the expanded peek panel below. */
  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav .menu-dropdown,
  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav .nav-item:hover > .menu-dropdown {
    background: transparent;
    box-shadow: none;
    display: none !important;
    height: auto !important;
    inset: auto !important;
    padding: 0;
    position: relative !important;
    width: auto !important;
  }

  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav .nav-sm::before,
  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link::before {
    display: none;
  }

  /* Temporary expanded panel. Its width overlays the page; the root layout remains `sm`, so the
     topbar, content and footer never jump when the user explores the navigation. */
  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] .app-menu.navbar-menu {
    box-shadow: -1px 0 0 rgba(255, 255, 255, .07) inset, -1.1rem 0 2.8rem -1.3rem rgba(3, 23, 31, .82);
    width: var(--vz-vertical-menu-width) !important;
    z-index: 1004;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] .app-menu .navbar-brand-box {
    padding-inline: 1.35rem;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] .app-menu .logo span.logo-sm {
    display: none !important;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] .app-menu .logo span.logo-lg {
    display: inline-flex !important;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] .poshesh-sidebar-pin {
    display: inline-flex;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] .poshesh-site-chip {
    display: flex;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav {
    padding: .2rem .7rem 1.5rem;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav > .nav-item {
    margin-bottom: .12rem;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav > .nav-item > .nav-link.menu-link,
  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav > .nav-item:hover > .nav-link.menu-link {
    gap: .68rem;
    justify-content: flex-start;
    min-height: 0;
    overflow: visible;
    padding: .66rem .8rem;
  }

    [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav > .nav-item > .nav-link.menu-link > i {
      font-size: 1.15rem;
      width: 1.25rem;
    }

    [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav > .nav-item > .nav-link.menu-link > span:not(.poshesh-menu-branch-indicator) {
      display: block !important;
    }

    [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav > .nav-item > .poshesh-menu-toggle .poshesh-menu-branch-indicator {
      background: transparent;
      border: 0;
      border-radius: 0;
      bottom: auto;
      box-shadow: none;
      color: rgba(214, 238, 244, .46);
      display: inline-flex !important;
      height: 1.25rem;
      inset-inline-end: auto;
      left: auto;
      margin-inline-start: auto;
      position: static;
      transform: none;
      width: 1.25rem;
    }

      [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav > .nav-item > .poshesh-menu-toggle .poshesh-menu-branch-indicator > i {
        font-size: 1.05rem;
        transform: none;
      }

    [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle:hover .poshesh-menu-branch-indicator,
    [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle:focus-visible .poshesh-menu-branch-indicator {
      background: transparent;
      border-color: transparent;
      color: var(--poshesh-accent-300);
    }

    [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle[aria-expanded="true"] .poshesh-menu-branch-indicator {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      color: var(--poshesh-accent-300);
    }

      [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .poshesh-menu-toggle[aria-expanded="true"] .poshesh-menu-branch-indicator > i {
        transform: rotate(-90deg);
      }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .menu-dropdown,
  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .nav-item:hover > .menu-dropdown {
    background: transparent;
    box-shadow: none;
    height: auto !important;
    inset: auto !important;
    padding: 0;
    position: relative !important;
    width: auto !important;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .menu-dropdown:not(.show),
  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .nav-item:hover > .menu-dropdown:not(.show) {
    display: none !important;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .menu-dropdown.show,
  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .nav-item:hover > .menu-dropdown.show {
    display: block !important;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .nav-link > span:not(.poshesh-menu-branch-indicator) {
    display: block !important;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .nav-sm::before,
  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] #navbar-nav .nav-sm .nav-link::before {
    display: block !important;
  }

  [data-sidebar-size="sm"] body.poshesh-sidebar-peek-open[data-poshesh-panel] .vertical-overlay {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background-color: rgba(4, 26, 35, .22);
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sidebar-size="sm"] body[data-poshesh-panel] .app-menu.navbar-menu {
    transition: none;
  }
}

body[data-poshesh-panel] .app-menu .sidebar-background {
  display: none;
}

/* =========================================================================
   4. Topbar
   ========================================================================= */
body[data-poshesh-panel] #page-topbar {
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background-color: rgba(255, 255, 255, .82);
  border-bottom: 1px solid rgba(11, 98, 128, .09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 .55rem 1.6rem -1.2rem rgba(6, 42, 56, .55);
}

body[data-poshesh-panel] .navbar-header {
  gap: .35rem;
  height: 70px;
  padding-inline: 1.1rem;
}

/* One rhythm for everything on the trailing side, so the icon buttons, any module chip and the
   user control read as a single group instead of three differently-spaced islands. */
.poshesh-topbar-actions {
  align-items: center;
  display: flex;
  gap: .3rem;
}

  .poshesh-topbar-actions > .header-item {
    display: flex;
  }

body[data-poshesh-panel] .topnav-hamburger {
  align-items: center;
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-ui-ink-soft);
  display: inline-flex;
  height: 2.4rem;
  justify-content: center;
  padding: 0 !important;
  transition: background-color 150ms ease, color 150ms ease;
  width: 2.4rem;
}

  body[data-poshesh-panel] .topnav-hamburger:hover {
    background: var(--poshesh-brand-50);
    color: var(--poshesh-brand);
  }

  body[data-poshesh-panel] .topnav-hamburger .hamburger-icon span {
    background-color: currentColor;
  }

/* Icon buttons --------------------------------------------------------
   Squircles rather than circles: the same corner language as the user control, the cards and the
   inputs, so the header stops looking like a different design system from the page under it. */
body[data-poshesh-panel] .btn-topbar {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--poshesh-ui-radius-xs);
  color: #4a6b7a;
  display: inline-flex;
  height: 2.4rem;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  width: 2.4rem;
}

  body[data-poshesh-panel] .btn-topbar > i {
    font-size: 1.2rem;
    line-height: 1;
  }

  body[data-poshesh-panel] .btn-topbar:hover,
  body[data-poshesh-panel] .btn-topbar:focus-visible,
  body[data-poshesh-panel] .btn-topbar.show {
    background: var(--poshesh-brand-50);
    border-color: rgba(var(--poshesh-brand-rgb), .12);
    color: var(--poshesh-brand);
    transform: translateY(-1px);
  }

body[data-poshesh-panel] .header-item {
  height: auto;
}

/* Maintenance chip ----------------------------------------------------
   A site that is holding its visitors out is the one piece of state an administrator must never
   overlook, so while it is on the control stops being an icon and becomes a coloured, labelled
   chip with its own off switch. The pulse is the part that catches an eye scanning past it. */
.poshesh-maintenance-chip {
  align-items: center;
  background: var(--poshesh-warning-50, #fff7e6);
  border: 1px solid var(--poshesh-warning-200, #ffd98a);
  border-radius: var(--poshesh-ui-radius-xs);
  color: #8a5a00;
  display: inline-flex;
  gap: .15rem;
  height: 2.4rem;
  padding-inline: .5rem;
}

  .poshesh-maintenance-chip-label {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 600;
    gap: .4rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .poshesh-maintenance-chip-label:hover {
    color: inherit;
    text-decoration: underline;
  }

  .poshesh-maintenance-dot {
    background: #e08600;
    border-radius: 50%;
    display: inline-block;
    height: .5rem;
    width: .5rem;
    animation: poshesh-maintenance-pulse 1.8s ease-in-out infinite;
  }

  .poshesh-maintenance-chip-off {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--poshesh-ui-radius-xs);
    color: inherit;
    display: inline-flex;
    height: 1.7rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.7rem;
  }

  .poshesh-maintenance-chip-off:hover,
  .poshesh-maintenance-chip-off:focus-visible {
    background: rgba(224, 134, 0, .16);
  }

@keyframes poshesh-maintenance-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Anyone who asked for less motion gets a static dot; the colour already carries the meaning. */
@media (prefers-reduced-motion: reduce) {
  .poshesh-maintenance-dot { animation: none; }
}

[data-bs-theme="dark"] .poshesh-maintenance-chip {
  background: rgba(224, 134, 0, .16);
  border-color: rgba(224, 134, 0, .35);
  color: #ffc866;
}

/* Topbar search / command palette ------------------------------------ */
.poshesh-topbar-search {
  margin-inline-start: .85rem;
  position: relative;
  width: min(23rem, 34vw);
}

  .poshesh-topbar-search .form-control {
    background-color: rgba(var(--poshesh-brand-rgb), .05);
    border: 1px solid rgba(var(--poshesh-brand-rgb), .09);
    border-radius: 2rem;
    color: var(--poshesh-ui-ink);
    font-size: .8rem;
    height: 2.55rem;
    padding-inline: 2.6rem 2.5rem;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }

    .poshesh-topbar-search .form-control::placeholder {
      color: #8ba4b0;
    }

    .poshesh-topbar-search .form-control:focus {
      background-color: #fff;
      border-color: rgba(var(--poshesh-brand-rgb), .35);
      box-shadow: var(--poshesh-ui-shadow-focus);
    }

.poshesh-topbar-search-icon {
  color: #7d99a6;
  font-size: 1.05rem;
  inset-inline-start: .9rem;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.poshesh-topbar-search-hint {
  background: rgba(var(--poshesh-brand-rgb), .07);
  border: 1px solid rgba(var(--poshesh-brand-rgb), .1);
  border-radius: .4rem;
  color: #6c8b99;
  font-size: .62rem;
  font-weight: 600;
  inset-inline-end: .55rem;
  letter-spacing: .02em;
  padding: .1rem .4rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.poshesh-search-results {
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  box-shadow: var(--poshesh-ui-shadow-pop);
  inset-inline-start: 0;
  margin-top: .5rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: .45rem;
  width: 100%;
}

  .poshesh-search-results .dropdown-header {
    color: var(--poshesh-ui-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .5rem .6rem .35rem;
    text-transform: uppercase;
  }

.poshesh-search-item {
  align-items: center;
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-ui-ink-soft);
  display: flex;
  gap: .6rem;
  font-size: .82rem;
  padding: .5rem .6rem;
  white-space: normal;
}

  .poshesh-search-item > i {
    color: var(--poshesh-brand-400);
    flex: 0 0 auto;
    font-size: 1rem;
  }

  .poshesh-search-item .poshesh-search-path {
    color: var(--poshesh-ui-muted);
    font-size: .68rem;
    margin-inline-start: auto;
    white-space: nowrap;
  }

  .poshesh-search-item:hover,
  .poshesh-search-item:focus,
  .poshesh-search-item.is-active {
    background: var(--poshesh-brand-50);
    color: var(--poshesh-brand);
  }

.poshesh-search-empty {
  color: var(--poshesh-ui-muted);
  font-size: .78rem;
  padding: 1.15rem .6rem;
  text-align: center;
}

/* Quick access grid inside the topbar dropdown ------------------------ */
.poshesh-quick-menu {
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  box-shadow: var(--poshesh-ui-shadow-pop);
  padding: 0;
  width: 20rem;
}

.poshesh-quick-menu-head {
  align-items: center;
  border-bottom: 1px dashed var(--poshesh-ui-border);
  display: flex;
  justify-content: space-between;
  padding: .85rem 1rem;
}

  .poshesh-quick-menu-head h6 {
    font-size: .84rem;
    margin: 0;
  }

.poshesh-quick-menu-grid {
  display: grid;
  gap: .35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: .7rem;
}

.poshesh-quick-tile {
  align-items: center;
  border-radius: var(--poshesh-ui-radius-sm);
  color: var(--poshesh-ui-ink-soft);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .8rem .35rem;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

  .poshesh-quick-tile > i {
    color: var(--poshesh-brand);
    font-size: 1.25rem;
  }

  .poshesh-quick-tile > span {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.5;
  }

  .poshesh-quick-tile:hover {
    background: var(--poshesh-brand-50);
    color: var(--poshesh-brand);
    transform: translateY(-2px);
  }

/* Topbar user control -------------------------------------------------
   The pill shape made this the one round-cornered element in a header of squircles. It now shares
   the icon buttons' radius, so "view site" and "account" read as the same family of control. */
/* The same 2.4rem box as the icon buttons beside it. Padding-driven height made this control
   taller than everything else on the row, which is what left it looking like a stray panel. */
body[data-poshesh-panel] .topbar-user > .btn {
  align-items: center;
  border: 1px solid rgba(var(--poshesh-brand-rgb), .1);
  border-radius: var(--poshesh-ui-radius-xs);
  background: rgba(var(--poshesh-brand-rgb), .045);
  display: inline-flex;
  gap: .45rem;
  height: 2.4rem;
  margin-inline-start: .25rem;
  padding-block: 0;
  padding-inline: .3rem .45rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}

  body[data-poshesh-panel] .topbar-user > .btn:hover,
  body[data-poshesh-panel] .topbar-user > .btn.show {
    background: rgba(var(--poshesh-brand-rgb), .09);
    border-color: rgba(var(--poshesh-brand-rgb), .2);
  }

.poshesh-user-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--poshesh-accent) 0%, var(--poshesh-brand) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: .55rem;
  box-shadow: 0 0 0 1px rgba(var(--poshesh-brand-rgb), .12), 0 .35rem .9rem rgba(var(--poshesh-brand-rgb), .24);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 700;
  height: 1.8rem;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  width: 1.8rem;
}

  .poshesh-user-avatar > img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }

.poshesh-user-identity {
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  min-width: 0;
  text-align: start;
}

.poshesh-user-name {
  color: var(--poshesh-ui-ink);
  display: block;
  font-size: .795rem;
  font-weight: 600;
  line-height: 1.25;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poshesh-user-role {
  color: var(--poshesh-ui-muted);
  display: block;
  font-size: .655rem;
  line-height: 1.25;
}

.poshesh-user-caret {
  color: #9db4be;
  flex: 0 0 auto;
  font-size: .95rem;
  line-height: 1;
  transition: transform 180ms ease;
}

body[data-poshesh-panel] .topbar-user > .btn.show .poshesh-user-caret {
  transform: rotate(180deg);
}

.poshesh-user-menu {
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  box-shadow: var(--poshesh-ui-shadow-pop);
  list-style: none;
  margin: 0;
  min-width: 15.5rem;
  padding: .45rem;
}

  .poshesh-user-menu > li {
    list-style: none;
  }

  .poshesh-user-menu .dropdown-item {
    align-items: center;
    display: flex;
    gap: .55rem;
    width: 100%;
  }

    .poshesh-user-menu .dropdown-item > i {
      font-size: 1rem;
      line-height: 1;
    }

.poshesh-user-menu-head {
  align-items: center;
  border-radius: var(--poshesh-ui-radius-sm);
  background: var(--poshesh-brand-50);
  display: flex;
  gap: .65rem;
  margin-bottom: .35rem;
  padding: .7rem .75rem;
}

  /* Scoped to the text block: a bare `span` descendant selector also matched the avatar, forcing
     it to display:block, which killed its flex centring and greyed the initial out. */
  .poshesh-user-menu-head .poshesh-user-menu-identity {
    min-width: 0;
  }

    .poshesh-user-menu-head .poshesh-user-menu-identity strong {
      color: var(--poshesh-ui-ink);
      display: block;
      font-size: .84rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .poshesh-user-menu-head .poshesh-user-menu-identity span {
      color: var(--poshesh-ui-muted);
      display: block;
      font-size: .68rem;
    }

  .poshesh-user-menu-head .poshesh-user-avatar {
    border-radius: var(--poshesh-ui-radius-sm);
    font-size: .95rem;
    height: 2.4rem;
    width: 2.4rem;
  }

/* =========================================================================
   5. Dropdowns, page head, footer
   ========================================================================= */
body[data-poshesh-panel] .dropdown-menu {
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-sm);
  box-shadow: var(--poshesh-ui-shadow-pop);
  padding: .4rem;
}

body[data-poshesh-panel] .dropdown-item {
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-ui-ink-soft);
  font-size: .82rem;
  padding: .5rem .65rem;
}

  body[data-poshesh-panel] .dropdown-item:hover,
  body[data-poshesh-panel] .dropdown-item:focus {
    background: var(--poshesh-brand-50);
    color: var(--poshesh-brand);
  }

body[data-poshesh-panel] .dropdown-divider {
  border-color: var(--poshesh-ui-border);
  margin: .35rem .2rem;
  opacity: 1;
}

body[data-poshesh-panel] .dropdown-header {
  color: var(--poshesh-ui-muted);
  font-size: .7rem;
  font-weight: 700;
}

/* Page header ---------------------------------------------------------
   Trail above, title below, actions at the trailing edge. Previously the title and the trail
   shared one baseline at opposite ends of a full-width row, which read as two unrelated fragments
   and left the heading pinned to the top of the viewport. */
/* The 70px is the fixed topbar's own height — Velzon builds it into this padding, so overriding
   padding-top with a bare value slides the page header up underneath the header bar. */
body[data-poshesh-panel] .page-content {
  padding-top: calc(70px + 1.75rem);
}

body[data-poshesh-panel] .page-title-box {
  align-items: flex-end;
  border-bottom: 1px solid var(--poshesh-ui-border-soft);
  column-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.15rem;
  row-gap: .65rem;
}

.page-title-main {
  min-width: 0;
}

.page-title-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

  .page-title-actions:empty {
    display: none;
  }

body[data-poshesh-panel] h1.page-title {
  color: var(--poshesh-ui-ink);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.5;
  margin: 0;
  padding-inline-start: .75rem;
  position: relative;
}

  body[data-poshesh-panel] h1.page-title::before {
    background: linear-gradient(180deg, var(--poshesh-accent-400), var(--poshesh-brand));
    border-radius: 1rem;
    content: "";
    height: .95em;
    inset-inline-start: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
  }

body[data-poshesh-panel] .breadcrumb {
  background: transparent;
  font-size: .755rem;
  /* Velzon ships the LTR chevron (mdi-chevron-right), which under RTL points back the way the
     reader came from. \f0141 is its mirror. */
  --vz-breadcrumb-divider: "\f0141";
  --vz-breadcrumb-item-padding-x: 0.4rem;
}

body[data-poshesh-panel] .page-title-box .breadcrumb {
  margin: 0 0 .4rem;
  padding-inline-start: .75rem;
}

body[data-poshesh-panel] .breadcrumb-item + .breadcrumb-item::before {
  color: #a9c1cb;
  font-size: 14px;
}

body[data-poshesh-panel] .breadcrumb-item > a {
  border-radius: .35rem;
  color: var(--poshesh-ui-muted);
  transition: color 150ms ease;
}

  body[data-poshesh-panel] .breadcrumb-item > a:hover {
    color: var(--poshesh-brand);
    text-decoration: underline;
    text-underline-offset: .2em;
  }

body[data-poshesh-panel] .breadcrumb-item.active {
  color: var(--poshesh-ui-ink-soft);
  font-weight: 600;
}

body[data-poshesh-panel] .footer {
  background: transparent;
  border-top: 1px solid var(--poshesh-ui-border-soft);
  color: var(--poshesh-ui-muted);
  font-size: .74rem;
  height: 60px;
  padding: .65rem .75rem;
}

.poshesh-admin-footer-inner {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 100%;
}

  .poshesh-admin-footer-inner > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poshesh-powered-by {
  align-items: center;
  border-radius: .45rem;
  color: var(--poshesh-ui-muted);
  display: inline-flex;
  font-size: .68rem;
  gap: .3rem;
  padding: .25rem .4rem;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.poshesh-powered-logo {
  align-items: center;
  display: inline-flex;
}

  .poshesh-powered-logo img {
    height: .9rem;
    max-width: 4.1rem;
    object-fit: contain;
    width: auto;
  }

  .poshesh-powered-logo .is-light {
    display: none;
  }

[data-bs-theme="dark"] .poshesh-powered-logo .is-default {
  display: none;
}

[data-bs-theme="dark"] .poshesh-powered-logo .is-light {
  display: block;
}

  .poshesh-powered-by strong {
    color: var(--poshesh-ui-ink-soft);
    font-weight: 700;
  }

  .poshesh-powered-by:hover {
    background: var(--poshesh-brand-50);
    color: var(--poshesh-brand);
  }

    .poshesh-powered-by:hover strong {
      color: var(--poshesh-brand);
    }

/* =========================================================================
   6. Cards & surfaces
   ========================================================================= */
body[data-poshesh-panel] .card {
  background-color: var(--poshesh-ui-surface);
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  box-shadow: var(--poshesh-ui-shadow-card);
  margin-bottom: 1.25rem;
}

body[data-poshesh-panel] .card-header {
  background: transparent;
  border-bottom: 1px solid var(--poshesh-ui-border);
  padding: 1.05rem 1.25rem;
}

  body[data-poshesh-panel] .card-header .card-title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
  }

body[data-poshesh-panel] .card-body {
  padding: 1.25rem;
}

body[data-poshesh-panel] .card-footer {
  background: var(--poshesh-ui-surface-2);
  border-top: 1px solid var(--poshesh-ui-border);
}

body[data-poshesh-panel] .modal-content,
body[data-poshesh-panel] .offcanvas {
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  box-shadow: var(--poshesh-ui-shadow-pop);
}

body[data-poshesh-panel] .accordion-item {
  border-color: var(--poshesh-ui-border);
}

body[data-poshesh-panel] hr {
  border-color: var(--poshesh-ui-border);
  opacity: 1;
}

/* =========================================================================
   7. Buttons
   ========================================================================= */
body[data-poshesh-panel] .btn {
  border-radius: var(--poshesh-ui-radius-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease;
}

  body[data-poshesh-panel] .btn:active {
    transform: translateY(0);
  }

body[data-poshesh-panel] .btn-primary {
  background-image: linear-gradient(135deg, #10708f 0%, var(--poshesh-brand) 55%, #0a5670 100%);
  border-color: transparent;
  box-shadow: 0 .35rem .9rem -.35rem rgba(var(--poshesh-brand-rgb), .6);
}

  body[data-poshesh-panel] .btn-primary:hover,
  body[data-poshesh-panel] .btn-primary:focus-visible {
    background-image: linear-gradient(135deg, #12809f 0%, #0c6b8b 55%, #0a5670 100%);
    box-shadow: 0 .6rem 1.4rem -.45rem rgba(var(--poshesh-brand-rgb), .7);
    transform: translateY(-1px);
  }

body[data-poshesh-panel] .btn-success {
  background-image: linear-gradient(135deg, #16b58c 0%, #12a17d 100%);
  border-color: transparent;
  box-shadow: 0 .35rem .9rem -.35rem rgba(18, 161, 125, .6);
}

body[data-poshesh-panel] .btn-danger {
  background-image: linear-gradient(135deg, #ee6a6f 0%, #e0525f 100%);
  border-color: transparent;
  box-shadow: 0 .35rem .9rem -.35rem rgba(224, 82, 95, .55);
}

  body[data-poshesh-panel] .btn-success:hover,
  body[data-poshesh-panel] .btn-danger:hover {
    transform: translateY(-1px);
  }

body[data-poshesh-panel] .btn-outline-primary {
  border-color: rgba(var(--poshesh-brand-rgb), .3);
  color: var(--poshesh-brand);
}

  body[data-poshesh-panel] .btn-outline-primary:hover {
    background: var(--poshesh-brand);
    border-color: var(--poshesh-brand);
    color: #fff;
  }

body[data-poshesh-panel] .btn-light {
  background: var(--poshesh-ui-surface-2);
  border-color: var(--poshesh-ui-border);
  color: var(--poshesh-ui-ink-soft);
}

  body[data-poshesh-panel] .btn-light:hover {
    background: var(--poshesh-ui-surface-3);
    border-color: rgba(var(--poshesh-brand-rgb), .18);
    color: var(--poshesh-brand);
  }

body[data-poshesh-panel] .btn-soft-primary {
  background: var(--poshesh-brand-50);
  color: var(--poshesh-brand);
}

  body[data-poshesh-panel] .btn-soft-primary:hover {
    background: var(--poshesh-brand);
    color: #fff;
  }

/* =========================================================================
   8. Forms
   ========================================================================= */
body[data-poshesh-panel] .form-label {
  color: var(--poshesh-ui-ink);
  font-size: .81rem;
  font-weight: 600;
  margin-bottom: .4rem;
}

body[data-poshesh-panel] .form-control,
body[data-poshesh-panel] .form-select {
  background-color: var(--poshesh-ui-surface);
  border-color: var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-ui-ink);
  font-size: .855rem;
  min-height: 2.7rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

  body[data-poshesh-panel] .form-control:hover,
  body[data-poshesh-panel] .form-select:hover {
    border-color: rgba(var(--poshesh-brand-rgb), .25);
  }

  body[data-poshesh-panel] .form-control:focus,
  body[data-poshesh-panel] .form-select:focus {
    border-color: var(--poshesh-brand);
    box-shadow: var(--poshesh-ui-shadow-focus);
  }

/* Primary actions at the bottom of admin forms. In an RTL flex row, flex-start is the physical
   right edge; using Bootstrap's "end" utility sends the save button to the left. The page variant
   keeps the button slightly inset from the content edge and gives it breathing room below the last
   card, while card footers retain the same action alignment inside their own surface. */
body[data-poshesh-panel] .poshesh-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-start;
}

body[data-poshesh-panel] .poshesh-form-actions--page {
  margin-top: .25rem;
  padding: .25rem 1rem .75rem;
}

body[data-poshesh-panel] .card-footer.poshesh-form-actions {
  padding: 1rem 1.25rem;
}

/* Selection controls --------------------------------------------------
   One definition for every checkbox, radio and switch in the panel and on the auth pages, so a
   table's select-all, a settings toggle and the sign-in "remember me" are visibly the same
   control. Deliberately unscoped: the auth layout has no data-poshesh-panel body.
   Sized in rem, not Bootstrap's em, so a check never shrinks with its label's font size. */
.form-check-input {
  --poshesh-check-size: 1.2rem;
  --vz-form-check-bg: var(--poshesh-ui-surface);
  background-color: var(--poshesh-ui-surface);
  background-size: 68%;
  border: 1.5px solid #bcd0da;
  border-radius: .42rem;
  box-shadow: inset 0 1px 1px rgba(9, 45, 60, .04);
  cursor: pointer;
  height: var(--poshesh-check-size);
  margin-top: .14rem;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  width: var(--poshesh-check-size);
}

  .form-check-input[type="radio"] {
    border-radius: 50%;
  }

  .form-check-input:hover:not(:disabled) {
    border-color: var(--poshesh-brand-400);
  }

  .form-check-input:checked,
  .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--poshesh-brand);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='M5.5 10.5l3 3l6-6.5'/%3e%3c/svg%3e");
    border-color: var(--poshesh-brand);
    box-shadow: 0 .25rem .6rem -.25rem rgba(var(--poshesh-brand-rgb), .65);
  }

  .form-check-input[type="checkbox"]:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3.2' d='M5.5 10h9'/%3e%3c/svg%3e");
  }

  .form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.1' fill='%23fff'/%3e%3c/svg%3e");
    background-size: 100%;
  }

  /* A press that visibly gives before the state flips; the SVG then swaps under it. */
  .form-check-input:active:not(:disabled) {
    transform: scale(.9);
  }

  .form-check-input:focus {
    border-color: var(--poshesh-brand);
    box-shadow: var(--poshesh-ui-shadow-focus);
    outline: 0;
  }

  .form-check-input:checked:focus {
    box-shadow: var(--poshesh-ui-shadow-focus), 0 .25rem .6rem -.25rem rgba(var(--poshesh-brand-rgb), .65);
  }

  .form-check-input:disabled {
    background-color: var(--poshesh-ui-surface-3);
    border-color: var(--poshesh-ui-border);
    cursor: not-allowed;
    opacity: .65;
  }

/* Bootstrap's gutter is 1.6em of the label's font size; a fixed gutter keeps the label a fixed
   distance from the box whatever size the surrounding text happens to be. */
.form-check {
  margin-bottom: .3rem;
  min-height: 1.5rem;
  padding-inline-start: 1.85rem;
}

  .form-check .form-check-input {
    margin-inline-start: -1.85rem;
  }

.form-check-label {
  color: var(--poshesh-ui-ink-soft);
  cursor: pointer;
  font-size: .845rem;
  line-height: 1.6;
}

/* Switches ------------------------------------------------------------ */
.form-switch {
  padding-inline-start: 3.1rem;
}

  .form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right .12rem top 50%;
    background-size: 1.02rem;
    border-radius: 2rem;
    box-shadow: inset 0 1px 2px rgba(9, 45, 60, .12);
    height: 1.4rem;
    margin-inline-start: -3.1rem;
    margin-top: .06rem;
    transition: background-color 200ms ease, background-position 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms ease, box-shadow 200ms ease;
    width: 2.55rem;
  }

    .form-switch .form-check-input:not(:checked) {
      background-color: #dbe6ec;
      border-color: #cbdae2;
    }

    .form-switch .form-check-input:checked {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
      background-position: left .12rem top 50%;
      background-color: var(--poshesh-brand);
      border-color: var(--poshesh-brand);
    }

    /* The thumb is painted by the background image, so scaling the track would smear it. */
    .form-switch .form-check-input:active:not(:disabled) {
      transform: none;
    }

.form-switch.form-switch-lg {
  padding-inline-start: 4rem;
}

  .form-switch.form-switch-lg .form-check-input {
    background-size: 1.35rem;
    height: 1.8rem;
    margin-inline-start: -4rem;
    width: 3.35rem;
  }

body[data-poshesh-panel] .input-group-text {
  background: var(--poshesh-ui-surface-2);
  border-color: var(--poshesh-ui-border);
  color: var(--poshesh-ui-muted);
}

/* =========================================================================
   9. Tables
   ========================================================================= */
body[data-poshesh-panel] .table {
  --vz-table-border-color: var(--poshesh-ui-border);
  color: var(--poshesh-ui-ink-soft);
  margin-bottom: 0;
}

  body[data-poshesh-panel] .table > thead {
    border-bottom: 1px solid var(--poshesh-ui-border);
  }

    body[data-poshesh-panel] .table > thead th {
      background: var(--poshesh-ui-surface-2);
      border-bottom: 0;
      color: var(--poshesh-ui-muted);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .02em;
      padding: .78rem 1rem;
      text-transform: uppercase;
      white-space: nowrap;
    }

      body[data-poshesh-panel] .table > thead th:first-child {
        border-start-start-radius: var(--poshesh-ui-radius-xs);
        border-end-start-radius: var(--poshesh-ui-radius-xs);
      }

      body[data-poshesh-panel] .table > thead th:last-child {
        border-start-end-radius: var(--poshesh-ui-radius-xs);
        border-end-end-radius: var(--poshesh-ui-radius-xs);
      }

  body[data-poshesh-panel] .table > tbody > tr > td {
    border-color: var(--poshesh-ui-border);
    font-size: .845rem;
    padding: .82rem 1rem;
    vertical-align: middle;
  }

  body[data-poshesh-panel] .table > tbody > tr {
    transition: background-color 130ms ease;
  }

    body[data-poshesh-panel] .table > tbody > tr:hover {
      background-color: rgba(var(--poshesh-brand-rgb), .035);
    }

body[data-poshesh-panel] .table-responsive {
  border-radius: var(--poshesh-ui-radius-sm);
}

/* =========================================================================
   10. Badges, tabs, pagination, alerts
   ========================================================================= */
body[data-poshesh-panel] .badge {
  border-radius: 2rem;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: .32rem .62rem;
}

body[data-poshesh-panel] .nav-tabs {
  border-bottom: 1px solid var(--poshesh-ui-border);
  gap: .2rem;
}

  body[data-poshesh-panel] .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--poshesh-ui-muted);
    font-size: .84rem;
    font-weight: 600;
    padding: .65rem .95rem;
    transition: color 150ms ease, border-color 150ms ease;
  }

    body[data-poshesh-panel] .nav-tabs .nav-link:hover {
      color: var(--poshesh-brand);
    }

    body[data-poshesh-panel] .nav-tabs .nav-link.active {
      background: transparent;
      border-bottom-color: var(--poshesh-brand);
      color: var(--poshesh-brand);
    }

body[data-poshesh-panel] .nav-pills .nav-link {
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-ui-muted);
  font-size: .82rem;
  font-weight: 600;
}

  body[data-poshesh-panel] .nav-pills .nav-link.active {
    background: var(--poshesh-brand);
    color: #fff;
  }

body[data-poshesh-panel] .pagination {
  gap: .25rem;
}

body[data-poshesh-panel] .page-link {
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-xs) !important;
  color: var(--poshesh-ui-ink-soft);
  font-size: .8rem;
  min-width: 2.2rem;
  text-align: center;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

  body[data-poshesh-panel] .page-link:hover {
    background: var(--poshesh-brand-50);
    border-color: rgba(var(--poshesh-brand-rgb), .2);
    color: var(--poshesh-brand);
  }

body[data-poshesh-panel] .page-item.active .page-link {
  background: var(--poshesh-brand);
  border-color: var(--poshesh-brand);
  box-shadow: 0 .3rem .8rem -.3rem rgba(var(--poshesh-brand-rgb), .7);
  color: #fff;
}

body[data-poshesh-panel] .alert {
  border-radius: var(--poshesh-ui-radius-sm);
  border-width: 1px;
  font-size: .84rem;
}

  /* asp-validation-summary still renders its container (holding a hidden <ul>) when the model is
     valid, which left an empty coloured bar at the top of several admin forms. */
  body[data-poshesh-panel] .alert.validation-summary-valid {
    display: none;
  }

body[data-poshesh-panel] .toast {
  border-radius: var(--poshesh-ui-radius-sm);
  box-shadow: var(--poshesh-ui-shadow-pop);
}

/* =========================================================================
   11. Dashboard components
   ========================================================================= */
.poshesh-hero {
  background: linear-gradient(115deg, #0b6280 0%, #0a4a61 45%, #062b39 100%);
  border-radius: var(--poshesh-ui-radius-lg);
  box-shadow: 0 1.4rem 2.8rem -1.4rem rgba(6, 42, 56, .75);
  color: #fff;
  margin-bottom: 1.4rem;
  overflow: hidden;
  position: relative;
}

  .poshesh-hero::before {
    background: radial-gradient(26rem 18rem at 12% 120%, rgba(var(--poshesh-accent-rgb), .45), transparent 70%);
    content: "";
    inset: 0;
    position: absolute;
  }

  .poshesh-hero::after {
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    content: "";
    height: 26rem;
    inset-inline-start: -6rem;
    position: absolute;
    top: -11rem;
    width: 26rem;
  }

.poshesh-hero-inner {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.85rem 2rem;
  position: relative;
  z-index: 1;
}

.poshesh-hero-kicker {
  align-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 2rem;
  color: var(--poshesh-accent-300);
  display: inline-flex;
  font-size: .68rem;
  font-weight: 700;
  gap: .35rem;
  margin-bottom: .7rem;
  padding: .25rem .7rem;
}

/* Beats body[data-poshesh-panel] h1..h6, which would otherwise paint the
   heading in the dark ink colour on top of the dark hero. */
body[data-poshesh-panel] .poshesh-hero h2 {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 .4rem;
}

.poshesh-hero p {
  color: rgba(226, 240, 245, .74);
  font-size: .84rem;
  line-height: 1.9;
  margin: 0;
  max-width: 42rem;
}

.poshesh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.05rem;
}

.poshesh-hero-btn {
  align-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--poshesh-ui-radius-xs);
  color: #fff;
  display: inline-flex;
  font-size: .79rem;
  font-weight: 600;
  gap: .4rem;
  padding: .52rem .95rem;
  transition: background-color 160ms ease, transform 160ms ease, border-color 160ms ease;
}

  .poshesh-hero-btn:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    transform: translateY(-1px);
  }

  .poshesh-hero-btn.is-accent {
    background: linear-gradient(135deg, var(--poshesh-accent-400), var(--poshesh-accent));
    border-color: transparent;
    box-shadow: 0 .5rem 1.2rem -.4rem rgba(var(--poshesh-accent-rgb), .9);
  }

    .poshesh-hero-btn.is-accent:hover {
      background: linear-gradient(135deg, #1ecac6, var(--poshesh-accent-400));
    }

.poshesh-hero-art {
  flex: 0 0 auto;
}

  /* A configured site logo is an arbitrary image, so it is bounded on both axes rather than
     scaled by height alone — a wide banner would otherwise push the copy out of the hero. */
  .poshesh-hero-art img {
    height: 3.1rem;
    max-width: 14rem;
    object-fit: contain;
    opacity: .95;
    width: auto;
  }

/* Section heading ------------------------------------------------------ */
.poshesh-section-head {
  align-items: center;
  display: flex;
  gap: .6rem;
  margin: 0 0 .9rem;
}

  .poshesh-section-head h5 {
    font-size: .95rem;
    margin: 0;
  }

  .poshesh-section-head .poshesh-section-rule {
    background: linear-gradient(90deg, var(--poshesh-ui-border), transparent);
    flex: 1 1 auto;
    height: 1px;
  }

  .poshesh-section-head .poshesh-section-count {
    background: var(--poshesh-brand-50);
    border-radius: 2rem;
    color: var(--poshesh-brand);
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .55rem;
  }

/* Quick access cards --------------------------------------------------- */
.poshesh-quick-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.poshesh-quick-card {
  align-items: center;
  background: var(--poshesh-ui-surface);
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  box-shadow: var(--poshesh-ui-shadow-sm);
  color: var(--poshesh-ui-ink);
  display: flex;
  gap: .85rem;
  overflow: hidden;
  padding: .95rem 1.05rem;
  position: relative;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

  .poshesh-quick-card::before {
    background: linear-gradient(180deg, var(--poshesh-accent-400), var(--poshesh-brand));
    content: "";
    inset-block: 0;
    inset-inline-end: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 180ms ease;
    width: 3px;
  }

  .poshesh-quick-card:hover {
    border-color: rgba(var(--poshesh-brand-rgb), .22);
    box-shadow: var(--poshesh-ui-shadow-lift);
    color: var(--poshesh-ui-ink);
    transform: translateY(-3px);
  }

    .poshesh-quick-card:hover::before {
      opacity: 1;
    }

.poshesh-quick-card-icon {
  align-items: center;
  background: var(--poshesh-brand-50);
  border: 1px solid rgba(var(--poshesh-brand-rgb), .1);
  border-radius: var(--poshesh-ui-radius-sm);
  color: var(--poshesh-brand);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.2rem;
  height: 2.85rem;
  justify-content: center;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
  width: 2.85rem;
}

.poshesh-quick-card:hover .poshesh-quick-card-icon {
  background: linear-gradient(135deg, var(--poshesh-accent), var(--poshesh-brand));
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
}

/* A little colour variety across the grid, still inside the brand range. */
.poshesh-quick-card:nth-child(4n+2) .poshesh-quick-card-icon {
  background: var(--poshesh-accent-100);
  border-color: rgba(var(--poshesh-accent-rgb), .14);
  color: #078b8c;
}

.poshesh-quick-card:nth-child(4n+3) .poshesh-quick-card-icon {
  background: #eaf2fb;
  border-color: rgba(43, 155, 212, .14);
  color: #2b7fb4;
}

.poshesh-quick-card:nth-child(4n+4) .poshesh-quick-card-icon {
  background: #edf6f2;
  border-color: rgba(18, 161, 125, .14);
  color: #12a17d;
}

.poshesh-quick-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.poshesh-quick-card-title {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poshesh-quick-card-hint {
  color: var(--poshesh-ui-muted);
  display: block;
  font-size: .68rem;
}

.poshesh-quick-card-arrow {
  color: #a9c1cb;
  flex: 0 0 auto;
  font-size: 1.05rem;
  transition: color 180ms ease, transform 180ms ease;
}

.poshesh-quick-card:hover .poshesh-quick-card-arrow {
  color: var(--poshesh-brand);
  transform: translateX(.2rem);
}

.poshesh-empty-state {
  background: var(--poshesh-ui-surface);
  border: 1px dashed var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  color: var(--poshesh-ui-muted);
  font-size: .85rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

/* =========================================================================
   12. Shared AJAX feedback
   ========================================================================= */
.toast-container[data-poshesh-toast-container] {
  z-index: 1300;
}

.poshesh-ajax-toast {
  min-width: min(360px, calc(100vw - 2rem));
  box-shadow: var(--poshesh-ui-shadow-pop);
}

.is-ajax-submitting {
  position: relative;
}

.is-ajax-loading {
  position: relative;
  z-index: 1295;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: wait;
  box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.22), 0 0.75rem 1.75rem rgba(0, 0, 0, 0.35);
}

  .is-ajax-loading > i {
    display: none;
  }

.poshesh-ajax-button-spinner {
  flex: 0 0 auto;
  opacity: 1;
}

.poshesh-ajax-overlay {
  position: fixed;
  inset: 0;
  z-index: 1290;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(6, 31, 43, 0.72);
  backdrop-filter: blur(3px);
  transition: opacity 140ms ease, visibility 140ms ease;
}

  .poshesh-ajax-overlay.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
  }

.poshesh-ajax-overlay-panel {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 180px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--poshesh-ui-radius-sm);
  color: #fff;
  background: rgba(6, 31, 43, 0.96);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.5);
  font-weight: 600;
}

.poshesh-ajax-overlay-spinner {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border: 0.17rem solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--poshesh-accent-300);
  border-radius: 50%;
  animation: poshesh-ajax-spin 650ms linear infinite;
}

body.poshesh-ajax-blocked {
  cursor: wait;
}

[data-ajax-validation-summary][hidden] {
  display: none !important;
}

[data-ajax-validation-summary].validation-summary-valid {
  display: none;
}

@keyframes poshesh-ajax-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================================
   13. SEO editor
   ========================================================================= */
.poshesh-seo-editor .seo-editor-summary {
  align-items: center;
  background: linear-gradient(135deg, rgba(var(--poshesh-brand-rgb), .08), rgba(var(--poshesh-accent-rgb), .08));
  border: 1px solid rgba(var(--poshesh-brand-rgb), .14);
  border-radius: var(--poshesh-ui-radius-sm);
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.poshesh-seo-editor .seo-score {
  align-items: center;
  background: var(--poshesh-ui-surface);
  border: 3px solid var(--poshesh-ui-warning);
  border-radius: 50%;
  display: flex;
  flex: 0 0 76px;
  flex-direction: column;
  height: 76px;
  justify-content: center;
}

.poshesh-seo-editor[data-seo-state="good"] .seo-score {
  border-color: var(--poshesh-ui-success);
}

.poshesh-seo-editor[data-seo-state="poor"] .seo-score {
  border-color: var(--poshesh-ui-danger);
}

.poshesh-seo-editor .seo-score strong {
  font-size: 1.25rem;
  line-height: 1;
}

.poshesh-seo-editor .seo-score span {
  color: var(--poshesh-ui-muted);
  font-size: .68rem;
  margin-top: .25rem;
}

.seo-serp-preview {
  background: var(--poshesh-ui-surface);
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-sm);
  direction: rtl;
  padding: 1rem 1.25rem;
}

.seo-serp-site {
  color: #4d5156;
  font-size: .75rem;
}

.seo-serp-title {
  color: #1a0dab;
  font-size: 1.15rem;
  margin-top: .35rem;
}

.seo-serp-url {
  color: #202124;
  font-size: .78rem;
  margin-top: .15rem;
  text-align: right;
}

.seo-serp-description {
  color: #4d5156;
  font-size: .84rem;
  line-height: 1.8;
  margin-top: .35rem;
}

.seo-field-counter {
  color: var(--poshesh-ui-muted);
  font-size: .72rem;
  margin-top: .25rem;
}

.seo-analysis {
  background: var(--poshesh-ui-surface-2);
  border-radius: var(--poshesh-ui-radius-xs);
  padding: 1rem;
}

  .seo-analysis li {
    align-items: flex-start;
    display: flex;
    font-size: .8rem;
    gap: .5rem;
    margin-top: .5rem;
  }

    .seo-analysis li.is-good i {
      color: var(--poshesh-ui-success);
    }

    .seo-analysis li.is-warning i {
      color: var(--poshesh-ui-warning);
    }

/* =========================================================================
   14. Poshesh form kit (shared by admin and auth screens)
   ========================================================================= */
.poshesh-field {
  margin-bottom: 1rem;
}

.poshesh-field-label {
  color: var(--poshesh-ui-ink);
  font-size: .84rem;
  font-weight: 650;
  margin-bottom: .48rem;
}

.poshesh-required-marker {
  color: var(--poshesh-ui-danger);
  display: inline-block;
  font-weight: 800;
  margin-inline-start: .22rem;
}

.poshesh-control-wrap {
  position: relative;
}

.poshesh-control.form-control {
  background-color: #f8fbfc;
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-sm);
  color: var(--poshesh-ui-ink);
  font-size: .9rem;
  min-height: var(--poshesh-ui-control-height);
  padding-inline: 1rem;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

  .poshesh-control.form-control:hover {
    border-color: #c6dae2;
  }

  .poshesh-control.form-control:focus {
    background-color: #fff;
    border-color: var(--poshesh-brand);
    box-shadow: var(--poshesh-ui-shadow-focus);
  }

.poshesh-control-with-icon.form-control {
  padding-left: 1rem;
  padding-right: 3rem;
}

.poshesh-control-icon {
  align-items: center;
  color: #8ba4b0;
  display: inline-flex;
  font-size: 1.12rem;
  height: 100%;
  left: auto;
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 0;
  z-index: 2;
}

.poshesh-field-hint {
  color: var(--poshesh-ui-muted);
  line-height: 1.7;
}

.poshesh-field-validation {
  display: block;
  font-size: .74rem;
  margin-top: .35rem;
}

  .poshesh-field-validation:empty,
  .poshesh-validation-summary.validation-summary-valid {
    display: none;
  }

.poshesh-password-input.form-control {
  padding-left: 3rem;
  padding-right: 3rem;
}

.poshesh-password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: .5rem;
  color: #8ba4b0;
  display: inline-flex;
  font-size: 1.15rem;
  height: 2.25rem;
  justify-content: center;
  left: .48rem;
  position: absolute;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  z-index: 3;
}

  .poshesh-password-toggle:hover,
  .poshesh-password-toggle:focus-visible {
    background: var(--poshesh-brand-50);
    color: var(--poshesh-brand);
    outline: none;
  }

.poshesh-btn {
  align-items: center;
  background-image: linear-gradient(135deg, #10708f 0%, var(--poshesh-brand) 55%, #0a5670 100%);
  border-radius: var(--poshesh-ui-radius-sm);
  box-shadow: 0 .45rem 1.1rem -.45rem rgba(var(--poshesh-brand-rgb), .75);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 3.15rem;
  padding-inline: 1.35rem;
  transition: box-shadow 170ms ease, transform 170ms ease, background-image 170ms ease;
}

  .poshesh-btn:hover {
    background-image: linear-gradient(135deg, #12809f 0%, #0c6b8b 55%, #0a5670 100%);
    box-shadow: 0 .85rem 1.9rem -.6rem rgba(var(--poshesh-brand-rgb), .8);
    transform: translateY(-1px);
  }

.poshesh-btn-label {
  align-items: center;
  display: inline-flex;
  gap: .55rem;
  justify-content: center;
}

.poshesh-btn[disabled] {
  cursor: wait;
  opacity: .78;
  transform: none;
}

/* =========================================================================
   15. Authentication experience
   ========================================================================= */
.poshesh-auth-body {
  background: #eef4f7;
  color: var(--poshesh-ui-ink);
  min-width: 320px;
}

.poshesh-auth-page {
  align-items: center;
  background: radial-gradient(circle at 8% 6%, rgba(var(--poshesh-accent-rgb), .16), transparent 26rem), radial-gradient(circle at 94% 94%, rgba(var(--poshesh-brand-rgb), .16), transparent 28rem), linear-gradient(140deg, #eef5f8 0%, #f2f7f9 52%, #e9f2f6 100%);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding: clamp(.85rem, 2.5vw, 2rem);
  position: relative;
}

/* Plain "center" makes an over-tall card overflow past the top of the scroll
     container, so the heading becomes unreachable on short viewports. */
@supports (align-items: safe center) {
  .poshesh-auth-page {
    align-items: safe center;
  }
}

.poshesh-auth-page::before {
  background-image: radial-gradient(rgba(var(--poshesh-brand-rgb), .16) 1px, transparent 1px);
  background-size: 22px 22px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(115deg, #000, transparent 35%, transparent 70%, #000);
  -webkit-mask-image: linear-gradient(115deg, #000, transparent 35%, transparent 70%, #000);
  opacity: .3;
  pointer-events: none;
  position: absolute;
}

.poshesh-auth-shell {
  background: var(--poshesh-ui-surface);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: var(--poshesh-ui-radius-lg);
  box-shadow: 0 1.6rem 4.25rem -1.25rem rgba(6, 42, 56, .32);
  direction: ltr;
  display: grid;
  /* Height follows the content: the form pane is what decides, so a short
     screen never leaves dead space and a long one never scrolls internally. */
  grid-template-columns: minmax(300px, .82fr) minmax(430px, 1.18fr);
  max-width: 1010px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 2;
}

.poshesh-auth-cover {
  background: linear-gradient(165deg, #0d6a8a 0%, #0a4256 52%, #051d27 100%);
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

.poshesh-auth-cover-image {
  filter: saturate(.6);
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

/* Duotone: takes hue and saturation from the brand wash and luminance from the
     artwork, so any cover image an operator uploads still reads as Poshesh. */
.poshesh-auth-cover::after {
  /* background: linear-gradient(175deg, #0b6280 0%, #078d8e 52%, #0b6280 100%); */
  content: "";
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
  position: absolute;
}

.poshesh-auth-cover-scrim {
  background: linear-gradient(180deg, rgba(5, 29, 39, .12) 0%, rgba(5, 29, 39, .55) 85%, rgba(5, 29, 39, .9) 100%);
  inset: 0;
  position: absolute;
}

.poshesh-auth-cover-content {
  bottom: 0;
  color: #fff;
  direction: rtl;
  padding: 2rem 1.85rem;
  position: absolute;
  inset-inline: 0;
}

  .poshesh-auth-cover-content img {
    height: 2.1rem;
    margin-bottom: 1.1rem;
    width: auto;
  }

  .poshesh-auth-cover-content h2 {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.9;
    margin: 0 0 .45rem;
  }

  .poshesh-auth-cover-content p {
    color: rgba(226, 240, 245, .76);
    font-size: .76rem;
    line-height: 1.9;
    margin: 0;
  }

.poshesh-auth-cover-points {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

  .poshesh-auth-cover-points li {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 2rem;
    display: inline-flex;
    font-size: .66rem;
    gap: .3rem;
    padding: .22rem .6rem;
  }

    .poshesh-auth-cover-points li i {
      color: var(--poshesh-accent-300);
    }

.poshesh-auth-brand-link {
  align-items: center;
  color: var(--poshesh-ui-ink);
  display: inline-flex;
  gap: .7rem;
  text-decoration: none;
  width: fit-content;
}

  .poshesh-auth-brand-link:hover {
    color: var(--poshesh-ui-ink);
  }

.poshesh-auth-brand-logo {
  height: 1.85rem;
  width: auto;
}

.poshesh-auth-form-pane {
  background: var(--poshesh-ui-surface);
  direction: rtl;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.poshesh-auth-mobile-brand {
  display: none;
  padding: 1.35rem 1.5rem .25rem;
}

.poshesh-auth-form-scroll {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.poshesh-auth-form-content {
  margin: auto;
  max-width: 100%;
  padding: 2.35rem 2.2rem 1.9rem;
  width: 100%;
}

.poshesh-auth-form-logo {
  display: block;
  height: 2rem;
  margin-bottom: 1.35rem;
  width: auto;
}

.poshesh-auth-heading {
  margin-bottom: 1.35rem;
}

.poshesh-auth-heading-compact {
  margin-bottom: 1.1rem;
}

.poshesh-auth-kicker {
  align-items: center;
  background: var(--poshesh-brand-50);
  border: 1px solid rgba(var(--poshesh-brand-rgb), .1);
  border-radius: 2rem;
  color: var(--poshesh-brand);
  display: inline-flex;
  font-size: .66rem;
  font-weight: 700;
  gap: .3rem;
  margin-bottom: .6rem;
  padding: .2rem .6rem;
}

.poshesh-auth-heading h1 {
  color: var(--poshesh-ui-ink);
  font-size: clamp(1.34rem, 1.8vw, 1.58rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.55;
  margin: 0 0 .35rem;
}

.poshesh-auth-heading p {
  color: var(--poshesh-ui-muted);
  font-size: .76rem;
  line-height: 1.8;
  margin: 0;
}

  .poshesh-auth-heading p strong {
    color: var(--poshesh-ui-ink);
  }

.poshesh-auth-form .poshesh-field {
  margin-bottom: .8rem;
}

.poshesh-auth-form .poshesh-field-label {
  font-size: .76rem;
  margin-bottom: .38rem;
}

.poshesh-auth-form .poshesh-control.form-control {
  font-size: .82rem;
  min-height: 2.95rem;
}

.poshesh-auth-form .poshesh-btn {
  font-size: .82rem;
  min-height: 2.95rem;
}

.poshesh-auth-form .poshesh-field:last-of-type {
  margin-bottom: .85rem;
}

.poshesh-auth-notice {
  border-radius: var(--poshesh-ui-radius-sm);
  font-size: .78rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  padding: .75rem .9rem;
}

  .poshesh-auth-notice-error {
    background: rgba(224, 82, 95, .08);
    border: 1px solid rgba(224, 82, 95, .18);
    color: #bb3546;
  }

  .poshesh-auth-notice-success {
    background: rgba(10, 179, 156, .08);
    border: 1px solid rgba(10, 179, 156, .2);
    color: #0a8f7f;
  }

.poshesh-validation-summary {
  background: rgba(224, 82, 95, .08);
  border: 1px solid rgba(224, 82, 95, .18);
  border-radius: var(--poshesh-ui-radius-sm);
  color: #bb3546;
  font-size: .78rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  padding: .75rem .9rem;
}

  .poshesh-validation-summary:empty,
  .poshesh-validation-summary ul:empty {
    display: none;
  }

  .poshesh-validation-summary ul {
    margin: 0;
    padding-inline-start: 1.2rem;
  }

.poshesh-auth-field-action {
  float: inline-end;
  font-size: .7rem;
  margin-top: .05rem;
  position: relative;
  z-index: 4;
}

  .poshesh-auth-field-action + .poshesh-password-field .poshesh-field-label {
    padding-inline-end: 8rem;
  }

  .poshesh-auth-field-action a,
  .poshesh-auth-switch a {
    color: var(--poshesh-brand);
    font-weight: 700;
    text-decoration: none;
  }

    .poshesh-auth-field-action a:hover,
    .poshesh-auth-switch a:hover {
      color: var(--poshesh-brand-700);
      text-decoration: underline;
      text-underline-offset: .2rem;
    }

.poshesh-auth-options {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: -.05rem 0 .95rem;
}

.poshesh-check {
  align-items: center;
  color: var(--poshesh-ui-muted);
  display: flex;
  font-size: .72rem;
  gap: .45rem;
  margin: 0;
  min-height: 1.5rem;
  padding-inline-start: 0;
}

  /* Laid out by the flex row rather than Bootstrap's float, but visually the shared control. */
  .poshesh-check .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 0;
  }

.poshesh-auth-secure-note {
  align-items: center;
  color: #8ba4b0;
  display: inline-flex;
  font-size: .65rem;
  gap: .3rem;
}

  .poshesh-auth-secure-note i {
    color: var(--poshesh-ui-success);
  }

.poshesh-auth-divider {
  align-items: center;
  color: #9ab0ba;
  display: flex;
  font-size: .65rem;
  gap: .75rem;
  margin: .95rem 0 .8rem;
  white-space: nowrap;
}

  .poshesh-auth-divider::before,
  .poshesh-auth-divider::after {
    background: linear-gradient(90deg, transparent, var(--poshesh-ui-border));
    content: "";
    flex: 1 1 auto;
    height: 1px;
  }

  .poshesh-auth-divider::after {
    background: linear-gradient(90deg, var(--poshesh-ui-border), transparent);
  }

/* Alternative sign-in buttons ----------------------------------------- */
.poshesh-google-button,
.poshesh-otp-login-button {
  align-items: center;
  border-radius: var(--poshesh-ui-radius-sm);
  display: grid;
  font-size: .79rem;
  font-weight: 600;
  gap: .5rem;
  grid-template-columns: 2.1rem 1fr 1.1rem;
  min-height: 2.95rem;
  padding: .38rem .6rem;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.poshesh-google-button {
  background: #fff;
  border: 1px solid #dfe7ea;
  box-shadow: var(--poshesh-ui-shadow-xs);
  color: var(--poshesh-ui-ink);
  position: relative;
}

  /* The Google palette lives on a hairline underline instead of a rainbow
     border, which read as noisy at this size. */
  .poshesh-google-button::after {
    background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #f9ab00 50% 75%, #34a853 75% 100%);
    border-radius: 2rem;
    bottom: .42rem;
    content: "";
    height: 2px;
    inset-inline: 3.1rem 2rem;
    opacity: 0;
    position: absolute;
    transition: opacity 180ms ease;
  }

  .poshesh-google-button:hover {
    background: #fff;
    border-color: #c6d5db;
    box-shadow: 0 .7rem 1.5rem -.6rem rgba(6, 42, 56, .35);
    color: var(--poshesh-ui-ink);
    transform: translateY(-1px);
  }

    .poshesh-google-button:hover::after {
      opacity: 1;
    }

.poshesh-google-mark {
  align-items: center;
  background: #fff;
  border: 1px solid #e6ecef;
  border-radius: var(--poshesh-ui-radius-xs);
  color: #4285f4;
  display: inline-flex;
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  height: 2.1rem;
  justify-content: center;
  line-height: 1;
  width: 2.1rem;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .poshesh-google-mark {
    background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 25% 43%, #f9ab00 43% 64%, #ea4335 64% 82%, #4285f4 82% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    border-color: #e6ecef;
    -webkit-text-fill-color: transparent;
  }
}

.poshesh-google-arrow,
.poshesh-otp-login-arrow {
  font-size: .95rem;
  transition: transform 180ms ease;
}

.poshesh-google-arrow {
  color: #9ab0ba;
}

.poshesh-google-button:hover .poshesh-google-arrow,
.poshesh-otp-login-button:hover .poshesh-otp-login-arrow {
  transform: translateX(-.18rem);
}

.poshesh-otp-login-button {
  background: var(--poshesh-brand-50);
  border: 1px solid rgba(var(--poshesh-brand-rgb), .16);
  color: var(--poshesh-brand-700);
  margin-top: .6rem;
}

  .poshesh-otp-login-button:hover {
    background: var(--poshesh-brand-100);
    border-color: rgba(var(--poshesh-brand-rgb), .32);
    box-shadow: 0 .7rem 1.5rem -.6rem rgba(var(--poshesh-brand-rgb), .5);
    color: var(--poshesh-brand-700);
    transform: translateY(-1px);
  }

.poshesh-otp-login-mark {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(var(--poshesh-brand-rgb), .14);
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-brand);
  display: inline-flex;
  font-size: 1rem;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}

.poshesh-otp-login-arrow {
  color: var(--poshesh-brand-400);
}

.poshesh-auth-switch {
  color: var(--poshesh-ui-muted);
  font-size: .72rem;
  margin: .95rem 0 0;
  text-align: center;
}

/* A radio rendered as a card, for a setting whose options each need a sentence of explanation and
   where the two are a real fork in behaviour rather than a value in a list. */
.poshesh-choice-card {
  align-items: flex-start;
  background: var(--poshesh-ui-surface, #fff);
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius);
  cursor: pointer;
  display: flex;
  gap: .65rem;
  height: 100%;
  margin: 0;
  padding: .85rem .9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

  .poshesh-choice-card:hover {
    border-color: var(--poshesh-brand-300);
  }

  .poshesh-choice-card.is-selected {
    background: var(--poshesh-brand-50);
    border-color: var(--poshesh-brand);
    box-shadow: 0 0 0 1px var(--poshesh-brand);
  }

  .poshesh-choice-card .form-check-input {
    flex: 0 0 auto;
    margin: .15rem 0 0;
  }

  .poshesh-choice-card strong {
    display: block;
    font-size: .85rem;
    margin-bottom: .15rem;
  }

/* A multi-step auth screen — a designed sign-up, a code challenge — needs a heading between groups
   of fields and a row for the secondary moves ("send the code again", "go back a step"). The
   primary action stays the full-width button every other auth screen uses. */
.poshesh-auth-section-title {
  color: var(--poshesh-ui-text);
  font-size: .85rem;
  font-weight: 600;
  margin: .5rem 0 0;
}

.poshesh-auth-step-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  justify-content: center;
  margin-top: .5rem;
}

  .poshesh-auth-step-actions .btn-link,
  .poshesh-auth-step-back {
    font-size: .75rem;
    padding: .25rem 0;
    text-decoration: none;
  }

.poshesh-auth-step-back {
  color: var(--poshesh-ui-muted);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .35rem;
}

.poshesh-auth-footer {
  align-items: center;
  border-top: 1px solid var(--poshesh-ui-border);
  color: #90a8b3;
  display: flex;
  font-size: .63rem;
  gap: 1rem;
  justify-content: space-between;
  min-height: 3rem;
  padding: .6rem clamp(1.25rem, 3vw, 2.25rem);
}

  .poshesh-auth-footer .poshesh-powered-by {
    flex: 0 0 auto;
  }

.poshesh-auth-footer-security {
  align-items: center;
  display: inline-flex;
  gap: .3rem;
  white-space: nowrap;
}

  .poshesh-auth-footer-security i {
    color: var(--poshesh-ui-success);
  }

.poshesh-auth-icon {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--poshesh-ui-radius);
  display: flex;
  font-size: 1.7rem;
  height: 4.25rem;
  justify-content: center;
  margin: 0 auto 1.25rem;
  transform: rotate(-3deg);
  width: 4.25rem;
}

.poshesh-auth-icon-primary {
  background: var(--poshesh-brand-50);
  border-color: rgba(var(--poshesh-brand-rgb), .14);
  color: var(--poshesh-brand);
}

.poshesh-auth-icon-success {
  background: rgba(18, 161, 125, .1);
  border-color: rgba(18, 161, 125, .18);
  color: var(--poshesh-ui-success);
}

.poshesh-auth-icon-warning {
  background: rgba(228, 154, 50, .11);
  border-color: rgba(228, 154, 50, .18);
  color: var(--poshesh-ui-warning);
}

.poshesh-auth-recovery-icon,
.poshesh-auth-otp-icon {
  box-shadow: 0 .8rem 1.8rem -.6rem rgba(6, 42, 56, .35);
  transform: none;
}

  .poshesh-auth-recovery-icon i,
  .poshesh-auth-otp-icon i {
    line-height: 1;
  }

.poshesh-auth-icon-danger {
  background: rgba(224, 82, 95, .1);
  border-color: rgba(224, 82, 95, .18);
  color: var(--poshesh-ui-danger);
}

.poshesh-auth-result .poshesh-auth-heading {
  margin-bottom: 1.6rem;
}

.poshesh-auth-tip,
.poshesh-ui-only-status {
  align-items: flex-start;
  background: var(--poshesh-ui-surface-2);
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-sm);
  color: var(--poshesh-ui-muted);
  display: flex;
  font-size: .74rem;
  gap: .55rem;
  line-height: 1.8;
  margin-bottom: 1.1rem;
  padding: .75rem .85rem;
}

.poshesh-ui-only-status {
  background: var(--poshesh-brand-50);
  border-color: rgba(var(--poshesh-brand-rgb), .14);
  color: var(--poshesh-brand-700);
  margin: .8rem 0 0;
}

.poshesh-auth-consent {
  align-items: flex-start;
  line-height: 1.8;
  margin: .25rem 0 .2rem;
}

.poshesh-consent-validation {
  margin-bottom: 1.15rem;
}

/* Password policy component --------------------------------------------- */
.poshesh-password-strength {
  margin: .75rem 0 .2rem;
}

.poshesh-password-strength-header {
  color: var(--poshesh-ui-muted);
  display: flex;
  font-size: .68rem;
  justify-content: space-between;
  margin-bottom: .4rem;
}

  .poshesh-password-strength-header strong {
    color: var(--poshesh-ui-muted);
    font-weight: 650;
  }

.poshesh-password-strength-bars {
  direction: ltr;
  display: grid;
  gap: .35rem;
  grid-template-columns: repeat(4, 1fr);
}

  .poshesh-password-strength-bars span {
    background: #e0eaee;
    border-radius: 1rem;
    height: .27rem;
    transition: background-color 160ms ease;
  }

.poshesh-password-strength[data-strength="1"] .poshesh-password-strength-bars span:nth-child(-n+1) {
  background: var(--poshesh-ui-danger);
}

.poshesh-password-strength[data-strength="2"] .poshesh-password-strength-bars span:nth-child(-n+2) {
  background: var(--poshesh-ui-warning);
}

.poshesh-password-strength[data-strength="3"] .poshesh-password-strength-bars span:nth-child(-n+3) {
  background: var(--poshesh-brand-400);
}

.poshesh-password-strength[data-strength="4"] .poshesh-password-strength-bars span:nth-child(-n+4) {
  background: var(--poshesh-ui-success);
}

.poshesh-password-rules {
  display: grid;
  gap: .32rem .65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
}

  .poshesh-password-rules li {
    align-items: center;
    color: #9ab0ba;
    display: flex;
    font-size: .65rem;
    gap: .3rem;
    transition: color 150ms ease;
  }

    .poshesh-password-rules li.is-valid {
      color: var(--poshesh-ui-success);
    }

/* Settings preview ------------------------------------------------------- */
.poshesh-auth-cover-setting-preview {
  background: #072e3d;
  border-radius: var(--poshesh-ui-radius-sm);
  height: 9rem;
  margin-top: .75rem;
  overflow: hidden;
}

  .poshesh-auth-cover-setting-preview img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

/* Panel UI settings ----------------------------------------------------- */
.poshesh-ui-settings-intro {
  align-items: center;
  background: linear-gradient(120deg, #0b6280 0%, #084a60 55%, #06313f 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--poshesh-ui-radius-lg);
  box-shadow: 0 1.15rem 2.5rem -1.4rem rgba(6, 42, 56, .72);
  color: #fff;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  padding: 1.35rem 1.5rem;
  position: relative;
}

  .poshesh-ui-settings-intro::after {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
    height: 16rem;
    inset-inline-start: -4rem;
    position: absolute;
    top: -8rem;
    width: 16rem;
  }

  .poshesh-ui-settings-intro > div {
    position: relative;
    z-index: 1;
  }

  .poshesh-ui-settings-intro > div:not(.poshesh-ui-settings-intro-icon) > span {
    color: var(--poshesh-accent-300);
    display: block;
    font-size: .68rem;
    font-weight: 700;
    margin-bottom: .25rem;
  }

  .poshesh-ui-settings-intro h2 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 .35rem;
  }

  .poshesh-ui-settings-intro p {
    color: rgba(226, 240, 245, .76);
    font-size: .76rem;
    line-height: 1.9;
    margin: 0;
    max-width: 52rem;
  }

.poshesh-ui-settings-intro-icon {
  align-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--poshesh-ui-radius-sm);
  display: flex;
  flex: 0 0 auto;
  font-size: 1.4rem;
  height: 3.5rem;
  justify-content: center;
  width: 3.5rem;
}

@media (min-width: 1200px) {
  .poshesh-ui-settings-nav {
    position: sticky;
    top: 5.75rem;
  }
}

.poshesh-ui-settings-nav .list-group-item {
  align-items: center;
  background: transparent;
  border-color: var(--poshesh-ui-border-soft);
  color: var(--poshesh-ui-ink-soft);
  display: flex;
  font-size: .76rem;
  gap: .55rem;
  padding: .72rem 1rem;
}

  .poshesh-ui-settings-nav .list-group-item i {
    color: var(--poshesh-brand-400);
    font-size: 1rem;
  }

  .poshesh-ui-settings-nav .list-group-item:hover {
    background: var(--poshesh-brand-50);
    color: var(--poshesh-brand);
  }

.poshesh-ui-settings-fixed-note {
  align-items: flex-start;
  background: var(--poshesh-ui-surface-2);
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-ui-muted);
  display: flex;
  font-size: .68rem;
  gap: .45rem;
  line-height: 1.8;
  padding: .7rem;
}

  .poshesh-ui-settings-fixed-note i {
    color: var(--poshesh-ui-success);
    flex: 0 0 auto;
    margin-top: .2rem;
  }

.poshesh-ui-settings-section {
  scroll-margin-top: 6rem;
}

.poshesh-ui-settings-section-head {
  align-items: center;
  display: flex;
  gap: .7rem;
}

.poshesh-ui-settings-section-icon {
  align-items: center;
  background: var(--poshesh-brand-50);
  border: 1px solid rgba(var(--poshesh-brand-rgb), .12);
  border-radius: var(--poshesh-ui-radius-xs);
  color: var(--poshesh-brand);
  display: flex;
  flex: 0 0 auto;
  font-size: 1rem;
  height: 2.35rem;
  justify-content: center;
  width: 2.35rem;
}

.poshesh-ui-settings-section-head p {
  color: var(--poshesh-ui-muted);
  font-size: .7rem;
  margin: .25rem 0 0;
}

.poshesh-brand-asset-field {
  background: var(--poshesh-ui-surface-2);
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-sm);
  padding: .65rem;
}

.poshesh-brand-asset-preview {
  align-items: center;
  background-color: #f8fbfc;
  background-image: linear-gradient(45deg, #edf3f5 25%, transparent 25%), linear-gradient(-45deg, #edf3f5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edf3f5 75%), linear-gradient(-45deg, transparent 75%, #edf3f5 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-xs);
  display: flex;
  height: 4.35rem;
  justify-content: center;
  margin-top: .6rem;
  overflow: hidden;
  padding: .7rem;
}

  .poshesh-brand-asset-preview.is-dark {
    background: linear-gradient(135deg, #0b6280, #052c3a);
  }

  .poshesh-brand-asset-preview.is-mark img {
    max-width: 2.8rem;
  }

  .poshesh-brand-asset-preview.is-cover {
    height: 12rem;
    padding: 0;
  }

  .poshesh-brand-asset-preview img {
    height: 100%;
    max-width: 14rem;
    object-fit: contain;
    width: auto;
  }

  .poshesh-brand-asset-preview.is-cover img {
    max-width: none;
    object-fit: cover;
    width: 100%;
  }

@media (max-width: 575.98px) {
  .poshesh-ui-settings-intro {
    align-items: flex-start;
    padding: 1.1rem;
  }

  .poshesh-ui-settings-intro-icon {
    height: 2.8rem;
    width: 2.8rem;
  }
}

/* =========================================================================
   16. Dark mode
   ========================================================================= */
/* A petrol-navy dark scheme rather than a neutral grey one: the surfaces stay on the same hue as
   the logo, and the turquoise accent — which is washed out on white — becomes the brightest thing
   on screen. Almost everything follows from the tokens; the rules below are the places that had a
   colour baked in because it only ever had to work on white. */
[data-bs-theme="dark"] {
  --poshesh-ui-ink: #e8f2f6;
  --poshesh-ui-ink-soft: #b6ccd6;
  --poshesh-ui-muted: #84a0ac;
  --poshesh-ui-surface: #121b21;
  --poshesh-ui-surface-2: #17222a;
  --poshesh-ui-surface-3: #1d2a33;
  --poshesh-ui-border: #24333d;
  --poshesh-ui-border-soft: rgba(159, 205, 222, .1);
  --poshesh-ui-page-bg: #0b1116;
  --poshesh-ui-primary-soft: rgba(var(--poshesh-accent-rgb), .13);
  --poshesh-brand-50: rgba(var(--poshesh-accent-rgb), .13);
  --poshesh-brand-100: rgba(var(--poshesh-accent-rgb), .22);
  /* Interactive brand text needs to lift off a dark surface, so it moves to the accent. */
  --poshesh-ui-primary: var(--poshesh-accent-300);
  --poshesh-ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --poshesh-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -12px rgba(0, 0, 0, .9);
  --poshesh-ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 34px -26px rgba(0, 0, 0, .9);
  --poshesh-ui-shadow-lift: 0 2px 4px rgba(0, 0, 0, .55), 0 26px 44px -28px rgba(0, 0, 0, .95);
  --poshesh-ui-shadow-pop: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .78);
  --poshesh-ui-shadow-focus: 0 0 0 .22rem rgba(var(--poshesh-accent-rgb), .26);
  /* Velzon plumbing ---------------------------------------------------- */
  --vz-body-bg: var(--poshesh-ui-page-bg);
  --vz-body-color: var(--poshesh-ui-ink-soft);
  --vz-emphasis-color: var(--poshesh-ui-ink);
  --vz-heading-color: var(--poshesh-ui-ink);
  --vz-secondary-color: var(--poshesh-ui-muted);
  --vz-secondary-bg: var(--poshesh-ui-surface-2);
  --vz-tertiary-bg: var(--poshesh-ui-surface-3);
  --vz-border-color: var(--poshesh-ui-border);
  --vz-border-color-translucent: var(--poshesh-ui-border);
  --vz-card-bg: var(--poshesh-ui-surface);
  --vz-card-cap-bg: transparent;
  --vz-input-bg: var(--poshesh-ui-surface-2);
  --vz-input-bg-custom: var(--poshesh-ui-surface-2);
  --vz-light: var(--poshesh-ui-surface-2);
  --vz-light-rgb: 23, 34, 42;
  --vz-dark: #e8f2f6;
  --vz-dark-rgb: 232, 242, 246;
  --vz-header-bg: rgba(15, 24, 30, .86);
  --vz-header-border: rgba(159, 205, 222, .09);
  --vz-header-item-color: #b6ccd6;
  --vz-link-color: var(--poshesh-accent-300);
  --vz-link-hover-color: var(--poshesh-accent-400);
}

/* Shell ---------------------------------------------------------------- */
[data-bs-theme="dark"] body[data-poshesh-panel] {
  background-image: radial-gradient(58rem 30rem at 100% -6rem, rgba(var(--poshesh-accent-rgb), .11), transparent 70%), radial-gradient(50rem 28rem at -8% 4rem, rgba(var(--poshesh-brand-rgb), .2), transparent 70%);
}

[data-bs-theme="dark"] body[data-poshesh-panel] #page-topbar {
  background-color: rgba(15, 24, 30, .86);
  border-bottom-color: rgba(159, 205, 222, .09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 .55rem 1.6rem -1.2rem rgba(0, 0, 0, .95);
}

[data-bs-theme="dark"] body[data-poshesh-panel] .app-menu.navbar-menu {
  background: linear-gradient(197deg, #10222c 0%, #0c1a22 48%, #070d11 100%);
  box-shadow: -1px 0 0 rgba(255, 255, 255, .035) inset, 0 0 3rem rgba(0, 0, 0, .6);
}

[data-bs-theme="dark"] body[data-poshesh-panel] .footer {
  border-top-color: var(--poshesh-ui-border-soft);
}

/* Topbar --------------------------------------------------------------- */
[data-bs-theme="dark"] body[data-poshesh-panel] .btn-topbar,
[data-bs-theme="dark"] body[data-poshesh-panel] .topnav-hamburger {
  color: #b6ccd6;
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-topbar:hover,
  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-topbar:focus-visible,
  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-topbar.show,
  [data-bs-theme="dark"] body[data-poshesh-panel] .topnav-hamburger:hover {
    background: rgba(var(--poshesh-accent-rgb), .16);
    border-color: rgba(var(--poshesh-accent-rgb), .24);
    color: var(--poshesh-accent-300);
  }

[data-bs-theme="dark"] body[data-poshesh-panel] .topbar-user > .btn {
  background: rgba(159, 205, 222, .06);
  border-color: rgba(159, 205, 222, .1);
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .topbar-user > .btn:hover,
  [data-bs-theme="dark"] body[data-poshesh-panel] .topbar-user > .btn.show {
    background: rgba(var(--poshesh-accent-rgb), .14);
    border-color: rgba(var(--poshesh-accent-rgb), .22);
  }

[data-bs-theme="dark"] .poshesh-topbar-search .form-control {
  background-color: rgba(159, 205, 222, .06);
  border-color: rgba(159, 205, 222, .1);
  color: var(--poshesh-ui-ink);
}

  [data-bs-theme="dark"] .poshesh-topbar-search .form-control::placeholder {
    color: #6f8c99;
  }

  [data-bs-theme="dark"] .poshesh-topbar-search .form-control:focus {
    background-color: rgba(159, 205, 222, .09);
    border-color: rgba(var(--poshesh-accent-rgb), .45);
  }

[data-bs-theme="dark"] .poshesh-topbar-search-icon {
  color: #7b96a2;
}

[data-bs-theme="dark"] .poshesh-topbar-search-hint {
  background: rgba(159, 205, 222, .08);
  border-color: rgba(159, 205, 222, .12);
  color: #8aa5b1;
}

[data-bs-theme="dark"] .poshesh-user-menu-head {
  background: rgba(var(--poshesh-accent-rgb), .1);
}

/* Page chrome ---------------------------------------------------------- */
[data-bs-theme="dark"] body[data-poshesh-panel] .breadcrumb-item + .breadcrumb-item::before {
  color: #5f7a86;
}

[data-bs-theme="dark"] body[data-poshesh-panel] .card-footer {
  background: rgba(159, 205, 222, .03);
}

[data-bs-theme="dark"] body[data-poshesh-panel] .table > thead th {
  background: var(--poshesh-ui-surface-2);
  color: var(--poshesh-ui-muted);
}

[data-bs-theme="dark"] body[data-poshesh-panel] .table > tbody > tr:hover {
  background-color: rgba(var(--poshesh-accent-rgb), .05);
}

/* Controls ------------------------------------------------------------- */
[data-bs-theme="dark"] body[data-poshesh-panel] .form-control,
[data-bs-theme="dark"] body[data-poshesh-panel] .form-select {
  background-color: var(--poshesh-ui-surface-2);
  border-color: var(--poshesh-ui-border);
  color: var(--poshesh-ui-ink);
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .form-control::placeholder {
    color: #6f8c99;
  }

  [data-bs-theme="dark"] body[data-poshesh-panel] .form-control:hover,
  [data-bs-theme="dark"] body[data-poshesh-panel] .form-select:hover {
    border-color: rgba(var(--poshesh-accent-rgb), .3);
  }

  [data-bs-theme="dark"] body[data-poshesh-panel] .form-control:focus,
  [data-bs-theme="dark"] body[data-poshesh-panel] .form-select:focus {
    border-color: var(--poshesh-accent);
  }

[data-bs-theme="dark"] body[data-poshesh-panel] .input-group-text {
  background: var(--poshesh-ui-surface-3);
  border-color: var(--poshesh-ui-border);
}

[data-bs-theme="dark"] .form-check-input {
  --vz-form-check-bg: var(--poshesh-ui-surface-3);
  background-color: var(--poshesh-ui-surface-3);
  border-color: #3a4c58;
  box-shadow: none;
}

  [data-bs-theme="dark"] .form-check-input:hover:not(:disabled) {
    border-color: var(--poshesh-accent);
  }

  /* The brand petrol is barely visible against a dark surface, so a checked control uses the
     accent — which is also what makes an active row readable at a glance. */
  [data-bs-theme="dark"] .form-check-input:checked,
  [data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--poshesh-accent);
    border-color: var(--poshesh-accent);
    box-shadow: 0 .25rem .7rem -.25rem rgba(var(--poshesh-accent-rgb), .8);
  }

  [data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-color: #2a3a45;
    border-color: #354854;
  }

  [data-bs-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--poshesh-accent);
    border-color: var(--poshesh-accent);
  }

[data-bs-theme="dark"] .form-check-label {
  color: var(--poshesh-ui-ink-soft);
}

/* Buttons -------------------------------------------------------------- */
[data-bs-theme="dark"] body[data-poshesh-panel] .btn-primary {
  background-image: linear-gradient(135deg, #159cb0 0%, #0c7794 55%, #0a5c76 100%);
  box-shadow: 0 .35rem .9rem -.35rem rgba(0, 0, 0, .8);
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-primary:hover,
  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-primary:focus-visible {
    background-image: linear-gradient(135deg, #19b3c4 0%, #0f8aa8 55%, #0a5c76 100%);
  }

[data-bs-theme="dark"] body[data-poshesh-panel] .btn-light {
  background: var(--poshesh-ui-surface-2);
  border-color: var(--poshesh-ui-border);
  color: var(--poshesh-ui-ink-soft);
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-light:hover {
    background: var(--poshesh-ui-surface-3);
    border-color: rgba(var(--poshesh-accent-rgb), .3);
    color: var(--poshesh-accent-300);
  }

[data-bs-theme="dark"] body[data-poshesh-panel] .btn-outline-primary {
  border-color: rgba(var(--poshesh-accent-rgb), .4);
  color: var(--poshesh-accent-300);
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-outline-primary:hover {
    background: var(--poshesh-accent);
    border-color: var(--poshesh-accent);
    color: #05222a;
  }

[data-bs-theme="dark"] body[data-poshesh-panel] .btn-soft-primary {
  background: rgba(var(--poshesh-accent-rgb), .14);
  color: var(--poshesh-accent-300);
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .btn-soft-primary:hover {
    background: var(--poshesh-accent);
    color: #05222a;
  }

/* Navigation and paging ------------------------------------------------ */
[data-bs-theme="dark"] body[data-poshesh-panel] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] body[data-poshesh-panel] .nav-tabs .nav-link.active {
  color: var(--poshesh-accent-300);
}

[data-bs-theme="dark"] body[data-poshesh-panel] .nav-tabs .nav-link.active {
  border-bottom-color: var(--poshesh-accent);
}

[data-bs-theme="dark"] body[data-poshesh-panel] .page-link {
  background: var(--poshesh-ui-surface-2);
}

  [data-bs-theme="dark"] body[data-poshesh-panel] .page-link:hover {
    background: rgba(var(--poshesh-accent-rgb), .14);
    border-color: rgba(var(--poshesh-accent-rgb), .28);
    color: var(--poshesh-accent-300);
  }

[data-bs-theme="dark"] body[data-poshesh-panel] .page-item.active .page-link {
  background: var(--poshesh-accent);
  border-color: var(--poshesh-accent);
  box-shadow: 0 .3rem .8rem -.3rem rgba(var(--poshesh-accent-rgb), .8);
  color: #05222a;
}

[data-bs-theme="dark"] body[data-poshesh-panel] .nav-pills .nav-link.active {
  background: var(--poshesh-accent);
  color: #05222a;
}

[data-bs-theme="dark"] body[data-poshesh-panel] .dropdown-item:hover,
[data-bs-theme="dark"] body[data-poshesh-panel] .dropdown-item:focus,
[data-bs-theme="dark"] .poshesh-search-item:hover,
[data-bs-theme="dark"] .poshesh-search-item:focus,
[data-bs-theme="dark"] .poshesh-search-item.is-active,
[data-bs-theme="dark"] .poshesh-quick-tile:hover {
  background: rgba(var(--poshesh-accent-rgb), .13);
  color: var(--poshesh-accent-300);
}

[data-bs-theme="dark"] .poshesh-quick-menu,
[data-bs-theme="dark"] .poshesh-search-results,
[data-bs-theme="dark"] .poshesh-user-menu {
  background: var(--poshesh-ui-surface);
}

[data-bs-theme="dark"] .poshesh-quick-tile > i,
[data-bs-theme="dark"] .poshesh-search-item > i {
  color: var(--poshesh-accent-300);
}

/* Dashboard ------------------------------------------------------------ */
[data-bs-theme="dark"] .poshesh-hero {
  background: linear-gradient(115deg, #0d4d64 0%, #093a4c 45%, #061e28 100%);
  box-shadow: 0 1.4rem 2.8rem -1.4rem rgba(0, 0, 0, .9);
}

[data-bs-theme="dark"] .poshesh-quick-card,
[data-bs-theme="dark"] .poshesh-empty-state {
  background: var(--poshesh-ui-surface);
  border-color: var(--poshesh-ui-border);
}

  [data-bs-theme="dark"] .poshesh-quick-card:hover {
    border-color: rgba(var(--poshesh-accent-rgb), .32);
  }

/* One accent family in the dark, instead of four pastel tints that all turn to mud. */
[data-bs-theme="dark"] .poshesh-quick-card-icon,
[data-bs-theme="dark"] .poshesh-quick-card:nth-child(4n+2) .poshesh-quick-card-icon,
[data-bs-theme="dark"] .poshesh-quick-card:nth-child(4n+3) .poshesh-quick-card-icon,
[data-bs-theme="dark"] .poshesh-quick-card:nth-child(4n+4) .poshesh-quick-card-icon {
  background: rgba(var(--poshesh-accent-rgb), .14);
  border-color: rgba(var(--poshesh-accent-rgb), .2);
  color: var(--poshesh-accent-300);
}

[data-bs-theme="dark"] .poshesh-quick-card-arrow {
  color: #57727f;
}

[data-bs-theme="dark"] .poshesh-quick-card:hover .poshesh-quick-card-arrow,
[data-bs-theme="dark"] .poshesh-section-head .poshesh-section-count {
  color: var(--poshesh-accent-300);
}

/* SEO editor ----------------------------------------------------------- */
[data-bs-theme="dark"] .seo-serp-preview,
[data-bs-theme="dark"] .poshesh-google-button,
[data-bs-theme="dark"] .poshesh-google-mark,
[data-bs-theme="dark"] .poshesh-otp-login-mark {
  background: var(--poshesh-ui-surface-2);
  border-color: var(--poshesh-ui-border);
  color: var(--poshesh-ui-ink);
}

[data-bs-theme="dark"] .seo-serp-title {
  color: #8ab4f8;
}

[data-bs-theme="dark"] .seo-serp-url,
[data-bs-theme="dark"] .seo-serp-site,
[data-bs-theme="dark"] .seo-serp-description {
  color: var(--poshesh-ui-muted);
}

/* The panel is authored light-first, so anything still painted with a Bootstrap utility keeps a
   white slab in the dark. These map the two that actually appear in admin markup. */
[data-bs-theme="dark"] body[data-poshesh-panel] .bg-light {
  background-color: var(--poshesh-ui-surface-2) !important;
}

[data-bs-theme="dark"] body[data-poshesh-panel] .bg-white {
  background-color: var(--poshesh-ui-surface) !important;
}

[data-bs-theme="dark"] body[data-poshesh-panel] .border,
[data-bs-theme="dark"] body[data-poshesh-panel] .border-top,
[data-bs-theme="dark"] body[data-poshesh-panel] .border-bottom,
[data-bs-theme="dark"] body[data-poshesh-panel] .border-start,
[data-bs-theme="dark"] body[data-poshesh-panel] .border-end {
  border-color: var(--poshesh-ui-border) !important;
}

/* =========================================================================
   17. Responsive
   ========================================================================= */
@media (max-width: 1199.98px) {
  .poshesh-topbar-search {
    width: 16rem;
  }
}

@media (max-width: 991.98px) {
  body[data-poshesh-panel] .navbar-header {
    padding-inline: .85rem;
  }

  .poshesh-hero-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 1.5rem 1.35rem;
  }

  .poshesh-hero-art {
    display: none;
  }

  .poshesh-auth-page {
    align-items: flex-start;
    padding: 1.25rem;
  }

  .poshesh-auth-shell {
    display: block;
    max-width: 520px;
  }

  .poshesh-auth-cover {
    display: none;
  }

  .poshesh-auth-mobile-brand {
    display: block;
  }

  .poshesh-auth-form-logo {
    display: none;
  }

  .poshesh-auth-form-content {
    max-width: 440px;
    padding: 1.9rem 1.85rem 2rem;
  }
}

@media (max-width: 575.98px) {
  body[data-poshesh-panel] .navbar-header {
    gap: .15rem;
    padding-inline: .45rem;
  }

  .poshesh-topbar-actions {
    gap: .08rem;
    min-width: 0;
  }

  body[data-poshesh-panel] .btn-topbar,
  body[data-poshesh-panel] .topnav-hamburger,
  body[data-poshesh-panel] .topbar-user > .btn {
    height: 2.3rem;
    width: 2.3rem;
  }

  body[data-poshesh-panel] .topbar-user > .btn {
    margin-inline-start: 0;
    padding: .22rem;
  }

  .poshesh-user-menu {
    max-width: calc(100vw - 1.5rem);
    min-width: min(15.5rem, calc(100vw - 1.5rem));
  }

  /* Popper's inline transform is useful on desktop, but on a narrow viewport it can pin this
     relatively wide menu to an edge. A viewport-fixed sheet keeps equal gutters on both sides and
     gives short phones their own scroll area without moving the dashboard underneath it. */
  body[data-poshesh-panel] .poshesh-quick-menu {
    bottom: auto !important;
    inset-inline: .75rem !important;
    left: .75rem !important;
    margin: 0 !important;
    max-height: calc(100vh - 71px - 1.25rem);
    max-height: calc(100dvh - 71px - 1.25rem - env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    overflow-y: auto;
    position: fixed !important;
    right: .75rem !important;
    top: 71px !important;
    transform: none !important;
    width: auto;
  }

  .poshesh-quick-menu-head {
    background: var(--poshesh-ui-surface);
    padding: .7rem .8rem;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .poshesh-quick-menu-grid {
    gap: .2rem;
    padding: .5rem;
  }

  .poshesh-quick-tile {
    min-height: 4.4rem;
    padding: .65rem .25rem;
  }

    .poshesh-quick-tile > span {
      overflow-wrap: anywhere;
    }

  body[data-poshesh-panel] .page-content {
    padding-top: calc(70px + 1rem);
    padding-inline: .35rem;
  }

  body[data-poshesh-panel] .page-title-box {
    margin-bottom: 1rem;
    padding-bottom: .85rem;
  }

  body[data-poshesh-panel] h1.page-title {
    font-size: 1.25rem;
  }

  .poshesh-hero {
    border-radius: var(--poshesh-ui-radius);
    margin-bottom: 1.1rem;
  }

  .poshesh-hero-inner {
    gap: 1rem;
    padding: 1.25rem 1rem;
  }

  body[data-poshesh-panel] .poshesh-hero h2 {
    font-size: 1.2rem;
  }

  .poshesh-hero p {
    font-size: .78rem;
  }

  .poshesh-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .poshesh-hero-btn {
    justify-content: center;
    min-width: 0;
    padding-inline: .65rem;
  }

  .poshesh-section-head {
    margin-bottom: .7rem;
  }

  .poshesh-quick-grid {
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .poshesh-quick-card {
    border-radius: var(--poshesh-ui-radius-sm);
    padding: .8rem .85rem;
  }

  .poshesh-quick-card-icon {
    height: 2.65rem;
    width: 2.65rem;
  }

  body[data-poshesh-panel] .footer {
    padding-inline: .55rem;
  }

  .poshesh-admin-footer-inner {
    gap: .4rem;
  }

  .poshesh-admin-footer-inner > span:first-child {
    font-size: .64rem;
  }

  .poshesh-admin-footer-inner .poshesh-powered-by {
    flex: 0 0 auto;
  }

  .poshesh-auth-page {
    padding: 0;
  }

  .poshesh-auth-shell {
    border: 0;
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .poshesh-auth-form-pane {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .poshesh-auth-form-content {
    margin: clamp(.65rem, 3dvh, 1.5rem) auto 0;
    max-width: none;
    padding: .75rem 1.2rem 1.5rem;
  }

  .poshesh-auth-mobile-brand {
    padding: max(1.1rem, env(safe-area-inset-top)) 1.2rem .25rem;
  }

  .poshesh-auth-footer {
    font-size: .6rem;
    gap: .5rem;
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
    padding-inline: 1.2rem;
  }

  .poshesh-password-rules {
    grid-template-columns: 1fr;
  }

  .poshesh-auth-heading {
    margin-bottom: 1.15rem;
  }

    .poshesh-auth-heading h1 {
      font-size: 1.32rem;
    }

  .poshesh-auth-options {
    align-items: flex-start;
    gap: .6rem;
  }
}

@media (max-width: 380px) {
  .poshesh-auth-secure-note {
    display: none;
  }

  .poshesh-auth-footer {
    flex-direction: column;
    gap: .2rem;
    justify-content: center;
    min-height: 3.8rem;
    text-align: center;
  }

  .poshesh-auth-footer .poshesh-powered-by {
    padding-block: .15rem;
  }

  .poshesh-powered-by > span {
    display: none;
  }

  .poshesh-hero-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-poshesh-panel] *,
  .poshesh-control,
  .poshesh-btn,
  .poshesh-google-button {
    transition: none !important;
  }

  .poshesh-ajax-overlay {
    transition: none;
  }

  .poshesh-ajax-overlay-spinner {
    animation-duration: 1.4s;
  }

  .poshesh-site-chip-dot::before,
  .poshesh-site-chip-dot::after {
    animation: none;
    opacity: .35;
  }
}