/* =========================================================================
   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-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;
  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 .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 {
      flex: 1 1 auto;
    }

    /* Velzon paints the collapse caret with an ::after glyph. */
    body[data-poshesh-panel] #navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"]::after {
      color: rgba(214, 238, 244, .38);
      font-size: .82rem;
      transition: transform 180ms ease, color 160ms ease;
    }

    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 ---------------------------------------------------------- */
  /* The guide rail is drawn under the parent item's icon (0.7rem list padding + 0.8rem link
     padding + half of the 1.25rem icon slot), so the whole branch visibly hangs off it. */
  body[data-poshesh-panel] #navbar-nav {
    --poshesh-menu-rail: 1.425rem;
  }

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

  body[data-poshesh-panel] #navbar-nav .nav-sm {
    margin: .18rem 0 .4rem;
    padding: 0;
    position: relative;
  }

    body[data-poshesh-panel] #navbar-nav .nav-sm::before {
      background: linear-gradient(180deg, rgba(var(--poshesh-accent-rgb), .55), rgba(255, 255, 255, .06));
      border-radius: 1rem;
      bottom: .25rem;
      content: "";
      /* inset-inline-start is the right edge under RTL, which is the side the icons sit on.
         The previous inset-inline-end pushed the rail to the far left, away from its branch. */
      inset-inline-start: var(--poshesh-menu-rail);
      position: absolute;
      top: .25rem;
      width: 1.5px;
      right:0;
    }

    /* rail | icon | label. The row's own icon is the marker, so there is no separate bullet —
       a dot sitting on the rail while the icon sat further in read as two competing markers. */
    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: .55rem;
      padding-block: .48rem;
      padding-inline: calc(var(--poshesh-menu-rail) + .55rem) .7rem;
      position: relative;
      transition: background-color 150ms ease, color 150ms ease;
    }

      /* The current row lights its own segment of the rail rather than adding a shape beside it. */
      body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link::before {
        background: transparent;
        border-radius: 1rem;
        bottom: .3rem;
        content: none;
        inset-inline-start: calc(var(--poshesh-menu-rail) - .75px);
        position: absolute;
        top: .3rem;
        transition: background-color 150ms ease, box-shadow 150ms ease;
        width: 3px;
      }

      body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link > i {
        color: rgba(214, 238, 244, .48);
        font-size: 1rem;
        line-height: 1;
        transition: color 150ms ease;
        width: 1.1rem;
      }

      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: rgba(var(--poshesh-accent-rgb), .55);
        }

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

      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);
          box-shadow: 0 0 .7rem rgba(var(--poshesh-accent-rgb), .9);
        }

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

    /* One extra step of indentation per nesting level, with the rail moving with it. */
    body[data-poshesh-panel] #navbar-nav .nav-sm .nav-sm {
      --poshesh-menu-rail: 2.55rem;
    }

/* Collapsed (icon-only) sidebar ---------------------------------------
   Velzon already owns the rail width, the hidden labels and the hover fly-out; these rules only
   re-apply the Poshesh sizing that our own higher-specificity base rules would otherwise keep. */
[data-sidebar-size="sm"] body[data-poshesh-panel] .app-menu.navbar-menu {
  /* Velzon lifts the brand box out of flow here, so the column needs the space reserved. */
  padding-top: 70px;
}

[data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav .nav-link.menu-link {
  justify-content: center;
  padding-inline: .5rem;
}

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

  /* Hovering re-expands the item into the fly-out header, which is left-aligned again. */
  [data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav > .nav-item:hover > .nav-link.menu-link {
    justify-content: flex-start;
    padding-inline: .8rem;
  }

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

/* Inside the fly-out the rail has nothing to hang from, so the plain list reads better. */
[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;
}

[data-sidebar-size="sm"] body[data-poshesh-panel] #navbar-nav .nav-sm .nav-link {
  padding-inline: .9rem;
}

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;
}

/* 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-radius: .45rem;
  box-shadow: 0 .3rem .8rem rgba(var(--poshesh-brand-rgb), .3);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 700;
  height: 1.8rem;
  justify-content: center;
  line-height: 1;
  width: 1.8rem;
}

.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;
}

/* =========================================================================
   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);
  }

/* 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-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;
}

.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-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);
    }

/* OTP component ---------------------------------------------------------- */
.poshesh-otp-group {
  display: grid;
  gap: clamp(.35rem, 1.2vw, .65rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: .4rem 0 1.25rem;
}

.poshesh-otp-input {
  aspect-ratio: 1 / 1.12;
  background: #f8fbfc;
  border: 1px solid var(--poshesh-ui-border);
  border-radius: var(--poshesh-ui-radius-sm);
  caret-color: var(--poshesh-brand);
  color: var(--poshesh-ui-ink);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 750;
  max-height: 4rem;
  min-width: 0;
  outline: none;
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

  .poshesh-otp-input:focus,
  .poshesh-otp-input.is-filled {
    background: #fff;
    border-color: var(--poshesh-brand);
    box-shadow: var(--poshesh-ui-shadow-focus);
    transform: translateY(-1px);
  }

.poshesh-otp-meta {
  align-items: center;
  color: var(--poshesh-ui-muted);
  display: flex;
  font-size: .72rem;
  justify-content: space-between;
  margin-bottom: 1.15rem;
}

  .poshesh-otp-meta span {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
  }

  .poshesh-otp-meta .btn-link {
    color: var(--poshesh-brand);
    font-size: .72rem;
    padding: .2rem;
    text-decoration: none;
  }

    .poshesh-otp-meta .btn-link:disabled {
      color: #a8bcc5;
    }

/* 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%;
  }

/* =========================================================================
   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] .page-content {
    padding-inline: .35rem;
  }

  .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 {
    max-width: none;
    padding: 1.5rem 1.2rem 1.75rem;
  }

  .poshesh-auth-mobile-brand {
    padding: 1.1rem 1.2rem .25rem;
  }

  .poshesh-auth-footer {
    font-size: .6rem;
    gap: .5rem;
    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-footer-security,
  .poshesh-auth-secure-note {
    display: none;
  }

  .poshesh-auth-footer {
    justify-content: center;
    text-align: center;
  }

  .poshesh-otp-group {
    gap: .28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-poshesh-panel] *,
  .poshesh-control,
  .poshesh-btn,
  .poshesh-google-button,
  .poshesh-otp-input {
    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;
  }
}