/*
 * Paynila Admin shell
 *
 * This host-owned layer intentionally loads after legacy site.css. It replaces
 * shell presentation only; legacy page selectors remain available while screen
 * migrations proceed. Component-level values below come from the approved
 * Product Design System v1.3 shell mapping where no canonical primitive exists.
 */

body.pn-admin-shell {
  --pn-shell-sidebar-width: 280px;
  --pn-shell-sidebar-active: #1f5660;
  --pn-shell-sidebar-indicator: #86aaa5;
  --pn-shell-topnav-active: var(--pn-color-text-link);
  --pn-shell-topnav-indicator: var(--pn-color-brand-anchor);
  --pn-shell-sidebar-text: #dce9e6;
  --pn-shell-sidebar-muted: #a8c2be;
  --pn-shell-sidebar-label: #9fbbb7;
  --pn-shell-sidebar-hover: rgb(255 255 255 / 8%);
  --pn-shell-sidebar-divider: rgb(255 255 255 / 12%);
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--pn-color-surface-page);
  color: var(--pn-color-text-primary);
  font-family: var(--pn-font-family-ui);
}

[x-cloak] {
  display: none;
}

.pn-skip-link {
  position: fixed;
  inset-block-start: var(--pn-space-2);
  inset-inline-start: var(--pn-space-2);
  z-index: 100;
  padding: var(--pn-space-2) var(--pn-space-3);
  border: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-focus);
  border-radius: var(--pn-radius-control);
  background: var(--pn-color-surface-primary);
  color: var(--pn-color-text-link);
  font-weight: var(--pn-font-weight-semibold);
  box-shadow: var(--pn-elevation-2);
  transform: translateY(calc(-100% - var(--pn-space-4)));
  transition: transform var(--pn-motion-duration-fast) var(--pn-motion-ease-standard);
}

.pn-skip-link:focus {
  transform: translateY(0);
}

.pn-admin-shell .app-shell {
  display: grid;
  grid-template-columns: var(--pn-shell-sidebar-width) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  background: var(--pn-color-surface-page);
  transition: grid-template-columns var(--pn-motion-duration-moderate) var(--pn-motion-ease-standard);
}

.pn-admin-shell .app-shell.shell-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.pn-admin-shell .app-shell.shell-no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.pn-admin-shell .app-sidebar {
  position: relative;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: var(--pn-shell-sidebar-width);
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-inline-end: var(--pn-border-width) var(--pn-border-style) rgb(255 255 255 / 8%);
  background: var(--pn-color-brand-anchor);
  color: var(--pn-shell-sidebar-text);
  box-shadow: var(--pn-elevation-0);
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--pn-motion-duration-moderate) var(--pn-motion-ease-standard),
    visibility var(--pn-motion-duration-moderate) step-start;
}

.pn-admin-shell .app-sidebar.is-collapsed {
  pointer-events: none;
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--pn-motion-duration-moderate) var(--pn-motion-ease-standard),
    visibility var(--pn-motion-duration-moderate) step-end;
}

.pn-admin-shell .app-sidebar.is-open {
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

/* Desktop icon rail (UX-044): collapsing keeps navigation in reach instead of removing it.
   Labels stay in the DOM (visually hidden) so links keep their accessible names; site.js adds
   a title tooltip to each link while the rail is shown. */
.pn-admin-shell .brand-mark {
  display: none;
}

@media (min-width: 1200px) {
  body.pn-admin-shell {
    --pn-shell-rail-width: 64px;
  }

  .pn-admin-shell .app-shell.shell-rail {
    grid-template-columns: var(--pn-shell-rail-width) minmax(0, 1fr);
  }

  .pn-admin-shell .app-sidebar.is-rail {
    width: var(--pn-shell-rail-width);
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
  }

  .pn-admin-shell .app-sidebar.is-rail .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .pn-admin-shell .app-sidebar.is-rail .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pn-size-control-default);
    height: var(--pn-size-control-default);
    border-radius: var(--pn-radius-control);
    background: var(--pn-shell-sidebar-active);
    color: var(--pn-color-text-inverse);
    font-weight: var(--pn-font-weight-semibold);
  }

  .pn-admin-shell .app-sidebar.is-rail .brand-text,
  .pn-admin-shell .app-sidebar.is-rail .sidebar-module-title,
  .pn-admin-shell .app-sidebar.is-rail .sidebar-report-search,
  .pn-admin-shell .app-sidebar.is-rail .sidebar-company,
  .pn-admin-shell .app-sidebar.is-rail .sidebar-group__summary {
    display: none;
  }

  .pn-admin-shell .app-sidebar.is-rail .sidebar-menu {
    padding-inline: var(--pn-space-2);
  }

  .pn-admin-shell .app-sidebar.is-rail .sidebar-group + .sidebar-group {
    border-block-start: var(--pn-border-width) var(--pn-border-style) var(--pn-shell-sidebar-divider);
  }

  .pn-admin-shell .app-sidebar.is-rail .nav-item-link {
    justify-content: center;
    padding-inline: 0;
  }

  .pn-admin-shell .app-sidebar.is-rail .nav-item-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.pn-admin-shell .sidebar-brand {
  display: flex;
  align-items: center;
  min-height: 76px;
  margin: 0;
  padding: var(--pn-space-4) var(--pn-space-5);
  border: 0;
  border-block-end: var(--pn-border-width) var(--pn-border-style) var(--pn-shell-sidebar-divider);
  border-radius: 0;
  color: var(--pn-color-text-inverse);
  text-decoration: none;
}

.pn-admin-shell .sidebar-brand:hover {
  color: var(--pn-color-text-inverse);
  background: var(--pn-shell-sidebar-hover);
}

.pn-admin-shell .sidebar-brand:focus-visible,
.pn-admin-shell .sidebar-group__summary:focus-visible,
.pn-admin-shell .nav-item-link:focus-visible {
  outline: var(--pn-focus-ring-width) solid var(--pn-color-white);
  outline-offset: calc(var(--pn-focus-ring-offset) * -1);
}

.pn-admin-shell .brand-text {
  display: grid;
  gap: var(--pn-space-1);
  min-width: 0;
}

.pn-admin-shell .brand-name {
  color: var(--pn-color-text-inverse);
  font-size: var(--pn-font-size-heading-md);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-line-height-heading-md);
  letter-spacing: var(--pn-font-letter-spacing-default);
}

.pn-admin-shell .brand-tagline {
  color: var(--pn-shell-sidebar-muted);
  font-size: var(--pn-font-role-caption-size);
  font-weight: var(--pn-font-weight-medium);
  line-height: var(--pn-font-role-caption-line-height);
  letter-spacing: var(--pn-font-letter-spacing-default);
  text-transform: none;
}

.pn-admin-shell .sidebar-menu {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--pn-space-2);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pn-space-3) var(--pn-space-3) var(--pn-space-4);
  scrollbar-color: var(--pn-shell-sidebar-muted) transparent;
  scrollbar-width: thin;
}

.pn-admin-shell .sidebar-menu::-webkit-scrollbar {
  width: var(--pn-space-1);
}

.pn-admin-shell .sidebar-menu::-webkit-scrollbar-thumb {
  border-radius: var(--pn-radius-full);
  background: var(--pn-shell-sidebar-muted);
}

.pn-admin-shell .sidebar-group {
  margin: 0;
  border: 0;
}

.pn-admin-shell .sidebar-group__summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--pn-size-control-default);
  padding: var(--pn-space-2) var(--pn-space-3);
  border-radius: var(--pn-radius-control);
  color: var(--pn-shell-sidebar-label);
  cursor: pointer;
  font-size: var(--pn-font-role-caption-size);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-role-caption-line-height);
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
}

.pn-admin-shell .sidebar-group__summary::-webkit-details-marker {
  display: none;
}

.pn-admin-shell .sidebar-group__summary::after {
  width: var(--pn-space-2);
  height: var(--pn-space-2);
  margin-inline-start: auto;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--pn-motion-duration-fast) var(--pn-motion-ease-standard);
}

.pn-admin-shell .sidebar-group[open] > .sidebar-group__summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.pn-admin-shell .sidebar-group__summary:hover {
  background: var(--pn-shell-sidebar-hover);
  color: var(--pn-color-text-inverse);
}

.pn-admin-shell .sidebar-group__items {
  display: grid;
  gap: var(--pn-space-1);
  padding-block: var(--pn-space-1) var(--pn-space-2);
}

.pn-admin-shell .nav-section-label {
  padding: var(--pn-space-3) var(--pn-space-3) var(--pn-space-1);
  color: var(--pn-shell-sidebar-label);
  font-size: var(--pn-font-role-caption-size);
  font-weight: var(--pn-font-weight-medium);
  line-height: var(--pn-font-role-caption-line-height);
  letter-spacing: var(--pn-font-letter-spacing-default);
  text-transform: none;
}

.pn-admin-shell .nav-item-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pn-space-2);
  min-height: var(--pn-size-control-default);
  padding: var(--pn-space-2) var(--pn-space-3);
  border: var(--pn-border-width) var(--pn-border-style) transparent;
  border-radius: var(--pn-radius-control);
  color: var(--pn-shell-sidebar-text);
  font-size: var(--pn-font-role-compact-size);
  font-weight: var(--pn-font-weight-regular);
  line-height: var(--pn-font-role-compact-line-height);
  text-decoration: none;
  transform: none;
  transition:
    background-color var(--pn-motion-duration-fast) var(--pn-motion-ease-standard),
    border-color var(--pn-motion-duration-fast) var(--pn-motion-ease-standard),
    color var(--pn-motion-duration-fast) var(--pn-motion-ease-standard);
}

/* One line per link (UX-037); site.js adds the full label as a tooltip when it's cut off. */
.pn-admin-shell .nav-item-link__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-admin-shell .nav-item-link:hover:not(.is-active) {
  border-color: transparent;
  background: var(--pn-shell-sidebar-hover);
  color: var(--pn-color-text-inverse);
  transform: none;
}

.pn-admin-shell .nav-item-link.is-active {
  border-color: rgb(255 255 255 / 8%);
  background: var(--pn-shell-sidebar-active);
  color: var(--pn-color-text-inverse);
  font-weight: var(--pn-font-weight-semibold);
  box-shadow: inset 3px 0 0 var(--pn-shell-sidebar-indicator);
  transform: none;
}

.pn-admin-shell .nav-item-link.is-active .nav-icon {
  background: rgb(255 255 255 / 12%);
}

.pn-admin-shell .nav-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--pn-size-icon-md);
  height: var(--pn-size-icon-md);
  border-radius: var(--pn-radius-sm);
}

.pn-admin-shell .nav-icon svg {
  width: var(--pn-size-icon-sm);
  height: var(--pn-size-icon-sm);
}

.pn-admin-shell .nav-divider {
  height: var(--pn-border-width);
  margin: var(--pn-space-2) var(--pn-space-3);
  background: var(--pn-shell-sidebar-divider);
}

.pn-admin-shell .sidebar-report-search {
  position: relative;
  padding: var(--pn-space-2) var(--pn-space-4);
}

.pn-admin-shell .sidebar-report-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.pn-admin-shell .sidebar-report-search__input {
  width: 100%;
  padding: var(--pn-space-2) var(--pn-space-3);
  border: var(--pn-border-width) var(--pn-border-style) var(--pn-shell-sidebar-divider);
  border-radius: var(--pn-radius-control);
  background: rgb(0 0 0 / 15%);
  color: var(--pn-shell-sidebar-text);
  font-size: var(--pn-font-role-compact-size);
}

.pn-admin-shell .sidebar-report-search__input::placeholder {
  color: var(--pn-shell-sidebar-muted);
}

.pn-admin-shell .sidebar-report-search__input:focus-visible {
  outline: var(--pn-focus-ring-width) solid var(--pn-color-focus-default);
  outline-offset: var(--pn-focus-ring-offset);
}

.pn-admin-shell .sidebar-report-search__count {
  display: block;
  margin-block-start: var(--pn-space-1);
  color: var(--pn-shell-sidebar-muted);
  font-size: var(--pn-font-role-caption-size);
}

.pn-admin-shell .sidebar-company {
  display: grid;
  gap: var(--pn-space-1);
  padding: var(--pn-space-3) var(--pn-space-5) var(--pn-space-4);
  border-block-start: var(--pn-border-width) var(--pn-border-style) var(--pn-shell-sidebar-divider);
  background: rgb(0 0 0 / 8%);
}

.pn-admin-shell .sidebar-company__label {
  color: var(--pn-shell-sidebar-muted);
  font-size: var(--pn-font-role-caption-size);
  font-weight: var(--pn-font-weight-medium);
  line-height: var(--pn-font-role-caption-line-height);
}

.pn-admin-shell .sidebar-company__name {
  overflow: hidden;
  color: var(--pn-color-text-inverse);
  font-size: var(--pn-font-role-compact-size);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-role-compact-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-admin-shell .app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pn-color-surface-page);
}

.pn-admin-shell .topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--pn-space-4);
  min-height: var(--pn-space-16);
  padding: 0 var(--pn-space-6);
  border: 0;
  border-block-end: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
  background: var(--pn-color-surface-primary);
  box-shadow: var(--pn-elevation-0);
  backdrop-filter: none;
}

.pn-admin-shell .topbar-start,
.pn-admin-shell .topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--pn-space-2);
}

.pn-admin-shell .topbar-start {
  min-width: 0;
}

.pn-admin-shell .topbar-actions {
  justify-content: flex-end;
}

.pn-admin-shell .topbar-modules {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--pn-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.pn-admin-shell .topbar-modules::-webkit-scrollbar {
  display: none;
}

.pn-admin-shell .topbar-module-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--pn-space-1);
  padding: var(--pn-space-2) var(--pn-space-3);
  border: 0;
  border-block-end: 3px solid transparent;
  color: var(--pn-color-text-secondary);
  font-weight: var(--pn-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.pn-admin-shell .topbar-module-link:hover {
  color: var(--pn-shell-topnav-active);
}

.pn-admin-shell .topbar-module-link.is-active {
  border-block-end-color: var(--pn-shell-topnav-indicator);
  color: var(--pn-shell-topnav-active);
  font-weight: var(--pn-font-weight-semibold);
}

.pn-admin-shell .topbar-module-link.is-active .topbar-module-icon svg {
  fill: currentColor;
  fill-opacity: 0.15;
}

.pn-admin-shell .topbar-module-icon {
  display: inline-flex;
}

.pn-admin-shell .topbar-module-link:focus-visible {
  outline: var(--pn-focus-ring-width) solid var(--pn-color-focus-default);
  outline-offset: var(--pn-focus-ring-offset);
  box-shadow: 0 0 0 var(--pn-focus-ring-spread) var(--pn-color-focus-ring);
}

.pn-admin-shell .sidebar-module-title {
  padding: var(--pn-space-3) var(--pn-space-4) 0;
  color: var(--pn-shell-sidebar-label);
  font-size: var(--pn-font-size-text-xs);
  font-weight: var(--pn-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pn-admin-shell .topbar-toggle,
.pn-admin-shell .topbar-icon-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--pn-size-control-default);
  height: var(--pn-size-control-default);
  padding: 0;
  border: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
  border-radius: var(--pn-radius-control);
  background: var(--pn-color-surface-primary);
  color: var(--pn-color-text-secondary);
  cursor: pointer;
  text-decoration: none;
}

.pn-admin-shell .topbar-toggle:hover,
.pn-admin-shell .topbar-icon-button:hover {
  border-color: var(--pn-color-border-interactive);
  background: var(--pn-color-surface-hover);
  color: var(--pn-color-text-link);
}

.pn-admin-shell .topbar-toggle:focus-visible,
.pn-admin-shell .topbar-icon-button:focus-visible,
.pn-admin-shell .topbar-account__trigger:focus-visible,
.pn-admin-shell .topbar-account__action:focus-visible,
.pn-admin-shell .topbar-compact-brand:focus-visible {
  outline: var(--pn-focus-ring-width) solid var(--pn-color-focus-default);
  outline-offset: var(--pn-focus-ring-offset);
  box-shadow: 0 0 0 var(--pn-focus-ring-spread) var(--pn-color-focus-ring);
}

.pn-admin-shell .topbar-compact-brand {
  color: var(--pn-color-brand-anchor);
  font-size: var(--pn-font-size-text-lg);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-line-height-text-lg);
  text-decoration: none;
}

.pn-admin-shell .topbar-account {
  position: relative;
}

/* Bell + alerts panel (UX-043). Shares the account menu's dropdown look. */
.pn-admin-shell .topbar-alerts {
  position: relative;
}

.pn-admin-shell .topbar-alerts__trigger {
  position: relative;
  list-style: none;
}

.pn-admin-shell .topbar-alerts__trigger::-webkit-details-marker {
  display: none;
}

.pn-admin-shell .topbar-alerts[open] > .topbar-alerts__trigger {
  border-color: var(--pn-color-border-interactive);
  background: var(--pn-color-surface-hover);
  color: var(--pn-color-text-link);
}

.pn-admin-shell .topbar-alerts__count {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--pn-color-surface-primary);
  border-radius: var(--pn-radius-full);
  background: var(--pn-color-status-error-default);
  color: var(--pn-color-text-inverse);
  font-size: 11px;
  font-weight: var(--pn-font-weight-semibold);
  line-height: 14px;
  text-align: center;
}

.pn-admin-shell .topbar-alerts__count[hidden] {
  display: none;
}

.pn-admin-shell .topbar-alerts__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--pn-space-2));
  inset-inline-end: 0;
  z-index: 80;
  display: grid;
  width: min(22rem, calc(100vw - var(--pn-space-8)));
  overflow: hidden;
  border: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
  border-radius: var(--pn-radius-control);
  background: var(--pn-color-surface-primary);
  box-shadow: var(--pn-elevation-2);
}

.pn-admin-shell .topbar-alerts__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pn-space-2);
  padding: var(--pn-space-3) var(--pn-space-4);
  border-block-end: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
  font-size: var(--pn-font-role-compact-size);
}

.pn-admin-shell .topbar-alerts__header span,
.pn-admin-shell .topbar-alerts__meta,
.pn-admin-shell .topbar-alerts__empty {
  color: var(--pn-color-text-muted);
  font-size: var(--pn-font-role-caption-size);
}

.pn-admin-shell .topbar-alerts__empty {
  margin: 0;
  padding: var(--pn-space-4);
}

.pn-admin-shell .topbar-alerts__list {
  max-height: 20rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.pn-admin-shell .topbar-alerts__item {
  display: grid;
  gap: 2px;
  padding: var(--pn-space-2) var(--pn-space-4);
  border-block-end: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-subtle, var(--pn-color-border-default));
  color: var(--pn-color-text-primary);
  text-decoration: none;
}

.pn-admin-shell .topbar-alerts__item:hover {
  background: var(--pn-color-surface-hover);
}

.pn-admin-shell .topbar-alerts__title {
  overflow: hidden;
  font-size: var(--pn-font-role-compact-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-admin-shell .topbar-alerts__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--pn-space-3);
  padding: var(--pn-space-2) var(--pn-space-4);
  border-block-start: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
  font-size: var(--pn-font-role-compact-size);
}

.pn-admin-shell .topbar-alerts__item:focus-visible,
.pn-admin-shell .topbar-alerts__footer a:focus-visible,
.pn-admin-shell .topbar-alerts__trigger:focus-visible {
  outline: var(--pn-focus-ring-width) solid var(--pn-color-focus-default);
  outline-offset: calc(var(--pn-focus-ring-offset) * -1);
}

.pn-admin-shell .topbar-account__trigger {
  display: flex;
  align-items: center;
  gap: var(--pn-space-2);
  min-height: var(--pn-size-control-default);
  padding: var(--pn-space-1) var(--pn-space-2);
  border: var(--pn-border-width) var(--pn-border-style) transparent;
  border-radius: var(--pn-radius-control);
  color: var(--pn-color-text-primary);
  cursor: pointer;
  list-style: none;
}

.pn-admin-shell .topbar-account__trigger::-webkit-details-marker {
  display: none;
}

.pn-admin-shell .topbar-account__trigger:hover,
.pn-admin-shell .topbar-account[open] > .topbar-account__trigger {
  border-color: var(--pn-color-border-default);
  background: var(--pn-color-surface-hover);
}

.pn-admin-shell .topbar-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--pn-size-control-compact);
  height: var(--pn-size-control-compact);
  border-radius: var(--pn-radius-full);
  background: var(--pn-color-brand-anchor);
  color: var(--pn-color-text-inverse);
  font-size: var(--pn-font-role-compact-size);
  font-weight: var(--pn-font-weight-semibold);
}

.pn-admin-shell .topbar-user-text {
  display: grid;
  gap: 0;
  min-width: 0;
}

.pn-admin-shell .topbar-user-name {
  max-width: 12rem;
  overflow: hidden;
  color: var(--pn-color-text-primary);
  font-size: var(--pn-font-role-compact-size);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-role-compact-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-admin-shell .topbar-user-role {
  color: var(--pn-color-text-muted);
  font-size: var(--pn-font-role-caption-size);
  line-height: var(--pn-font-role-caption-line-height);
}

.pn-admin-shell .topbar-account__chevron {
  flex: 0 0 auto;
  transition: transform var(--pn-motion-duration-fast) var(--pn-motion-ease-standard);
}

.pn-admin-shell .topbar-account[open] .topbar-account__chevron {
  transform: rotate(180deg);
}

.pn-admin-shell .topbar-account__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--pn-space-2));
  inset-inline-end: 0;
  display: grid;
  min-width: 15rem;
  overflow: hidden;
  border: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
  border-radius: var(--pn-radius-control);
  background: var(--pn-color-surface-primary);
  box-shadow: var(--pn-elevation-2);
}

.pn-admin-shell .topbar-account__identity {
  display: grid;
  gap: var(--pn-space-1);
  padding: var(--pn-space-3) var(--pn-space-4);
  border-block-end: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
}

.pn-admin-shell .topbar-account__identity strong {
  overflow-wrap: anywhere;
  color: var(--pn-color-text-primary);
  font-size: var(--pn-font-role-compact-size);
}

.pn-admin-shell .topbar-account__identity span {
  color: var(--pn-color-text-muted);
  font-size: var(--pn-font-role-caption-size);
}

.pn-admin-shell .topbar-account__menu form {
  margin: 0;
}

.pn-admin-shell .topbar-account__action {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--pn-size-control-default);
  padding: var(--pn-space-2) var(--pn-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pn-color-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--pn-font-role-compact-size);
  text-align: start;
  text-decoration: none;
}

.pn-admin-shell .topbar-account__action:hover {
  background: var(--pn-color-surface-hover);
  color: var(--pn-color-text-link);
}

/* Account items carry an icon and sign-out sits below a divider, matching the
   Self Service account menu (UX-011). */
.pn-admin-shell .topbar-account__action {
  gap: var(--pn-space-2);
}

.pn-admin-shell .topbar-account__action svg {
  flex: 0 0 auto;
  color: var(--pn-color-text-muted);
}

.pn-admin-shell .topbar-account__signout {
  border-block-start: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
}

.pn-admin-shell .app-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: clamp(var(--pn-space-5), 2vw, var(--pn-space-8));
  background: var(--pn-color-surface-page);
}

.pn-admin-shell .app-content:focus {
  outline: none;
}

.pn-admin-shell .pn-page {
  min-block-size: auto;
}

.pn-admin-shell .pn-sidebar-scrim {
  display: none;
  border: 0;
  background: var(--pn-color-surface-overlay-backdrop);
}

.pn-admin-shell .pn-sidebar-scrim[hidden] {
  display: none !important;
}

.pn-admin-shell .topbar-compact-brand[hidden] {
  display: none;
}

@media (max-width: 1199px) {
  .pn-admin-shell .app-shell,
  .pn-admin-shell .app-shell.shell-collapsed {
    display: block;
  }

  .pn-admin-shell .topbar {
    z-index: 70;
  }

  .pn-admin-shell .app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(var(--pn-shell-sidebar-width), calc(100vw - var(--pn-space-12)));
    box-shadow: var(--pn-elevation-3);
  }

  .pn-admin-shell .pn-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: default;
  }

  .pn-admin-shell .app-main {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .pn-admin-shell .topbar {
    min-height: var(--pn-size-touch-target);
    padding: var(--pn-space-2) var(--pn-space-4);
  }

  .pn-admin-shell .topbar-toggle,
  .pn-admin-shell .topbar-icon-button,
  .pn-admin-shell .topbar-account__trigger {
    min-width: var(--pn-size-touch-target);
    min-height: var(--pn-size-touch-target);
  }

  .pn-admin-shell .topbar-user-text,
  .pn-admin-shell .topbar-account__chevron {
    display: none;
  }

  .pn-admin-shell .topbar-account__trigger {
    justify-content: center;
    padding: var(--pn-space-1);
  }

  .pn-admin-shell .topbar-account__menu {
    position: fixed;
    inset-block-start: calc(var(--pn-size-touch-target) + var(--pn-space-4));
    inset-inline: var(--pn-space-4);
    min-width: 0;
  }

  .pn-admin-shell .app-content {
    padding: var(--pn-space-5);
  }
}

@media (max-width: 430px) {
  .pn-admin-shell .topbar-compact-brand {
    font-size: var(--pn-font-size-text-md);
  }

  .pn-admin-shell .topbar-actions {
    gap: var(--pn-space-1);
  }

  .pn-admin-shell .app-content {
    padding-inline: var(--pn-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pn-skip-link,
  .pn-admin-shell .app-shell,
  .pn-admin-shell .app-sidebar,
  .pn-admin-shell .sidebar-group__summary::after,
  .pn-admin-shell .topbar-account__chevron,
  .pn-admin-shell .nav-item-link,
  .pn-admin-shell .topbar-module-link {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

@media (forced-colors: active) {
  .pn-admin-shell .nav-item-link.is-active {
    border-color: Highlight;
    box-shadow: inset 3px 0 0 Highlight;
  }

  .pn-admin-shell .topbar-module-link.is-active {
    border-block-end-color: Highlight;
    color: Highlight;
  }

  .pn-admin-shell .topbar-toggle,
  .pn-admin-shell .topbar-icon-button,
  .pn-admin-shell .topbar-account__trigger {
    border-color: ButtonText;
  }
}

/* Primary hover moves to the darker "active" teal so the change is visible,
   as it is in Self Service (UX-017). Pressed goes one step darker again. */
.pn-admin-shell .btn-primary {
  --bs-btn-hover-bg: var(--pn-color-action-primary-active);
  --bs-btn-hover-border-color: var(--pn-color-action-primary-active);
  --bs-btn-active-bg: var(--pn-color-brand-anchor);
  --bs-btn-active-border-color: var(--pn-color-brand-anchor);
}

.pn-admin-shell .pn-button--primary:hover:not(:disabled, [aria-disabled="true"]),
.pn-admin-shell .button-primary:hover {
  background: var(--pn-color-action-primary-active);
  border-color: var(--pn-color-action-primary-active);
  transform: none;
}

.pn-admin-shell .pn-button--primary:active:not(:disabled, [aria-disabled="true"]),
.pn-admin-shell .button-primary:active {
  background: var(--pn-color-brand-anchor);
  border-color: var(--pn-color-brand-anchor);
}

/* Top navigation: the brand never shrinks into the module strip, and modules
   that do not fit move into a "More" menu (site.js initTopNavOverflow), so all
   modules stay reachable at tablet and phone widths (UX-045, UX-046). */
.pn-admin-shell .topbar-start {
  flex: 0 0 auto;
}

.pn-admin-shell .topbar-actions {
  flex: 0 0 auto;
  flex-direction: row;
}

.pn-admin-shell .topbar-modules-wrap {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  gap: var(--pn-space-1);
  min-width: 0;
}

.pn-admin-shell .topbar-modules-wrap[data-topnav-ready] .topbar-modules {
  overflow: hidden;
}

.pn-admin-shell .topbar-more {
  position: relative;
  flex: 0 0 auto;
}

.pn-admin-shell .topbar-more[hidden] {
  display: none;
}

.pn-admin-shell .topbar-more__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-space-1);
  min-height: var(--pn-size-control-default);
  padding: var(--pn-space-2) var(--pn-space-3);
  border-block-end: 3px solid transparent;
  color: var(--pn-color-text-secondary);
  font-weight: var(--pn-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.pn-admin-shell .topbar-more__trigger::-webkit-details-marker {
  display: none;
}

.pn-admin-shell .topbar-more__trigger:hover,
.pn-admin-shell .topbar-more[open] > .topbar-more__trigger {
  color: var(--pn-shell-topnav-active);
}

.pn-admin-shell .topbar-more__trigger.is-active {
  border-block-end-color: var(--pn-shell-topnav-indicator);
  color: var(--pn-shell-topnav-active);
  font-weight: var(--pn-font-weight-semibold);
}

.pn-admin-shell .topbar-more__trigger:focus-visible {
  outline: var(--pn-focus-ring-width) solid var(--pn-color-focus-default);
  outline-offset: var(--pn-focus-ring-offset);
  box-shadow: 0 0 0 var(--pn-focus-ring-spread) var(--pn-color-focus-ring);
}

.pn-admin-shell .topbar-more__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--pn-space-2));
  inset-inline-start: 0;
  z-index: 80;
  display: grid;
  min-width: 13rem;
  padding: var(--pn-space-1);
  border: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
  border-radius: var(--pn-radius-control);
  background: var(--pn-color-surface-primary);
  box-shadow: var(--pn-elevation-2);
}

.pn-admin-shell .topbar-more__menu .topbar-module-link {
  border-block-end: 0;
  border-inline-start: 3px solid transparent;
  border-radius: var(--pn-radius-sm);
}

.pn-admin-shell .topbar-more__menu .topbar-module-link:hover {
  background: var(--pn-color-surface-hover);
}

.pn-admin-shell .topbar-more__menu .topbar-module-link.is-active {
  border-inline-start-color: var(--pn-shell-topnav-indicator);
}

@media (max-width: 767px) {
  .pn-admin-shell .topbar {
    gap: var(--pn-space-2);
  }

  .pn-admin-shell .topbar-more__menu {
    position: fixed;
    inset-block-start: calc(var(--pn-size-touch-target) + var(--pn-space-4));
    inset-inline: var(--pn-space-4);
    min-width: 0;
  }
}

/* Wide tables: fade the edge that has hidden columns so horizontal scrolling
   is discoverable (UX-047). site.js sets the data attributes. */
.pn-admin-shell [data-scroll-more-end] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.pn-admin-shell [data-scroll-more-start] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

.pn-admin-shell [data-scroll-more-start][data-scroll-more-end] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

/* Employees list: same full-width container as the other list pages (UX-027),
   and the wide table scrolls inside its card instead of widening the page and
   clipping the header actions and filters on small screens (UX-047). */
.pn-admin-shell .pn-employee-pilot {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}

.pn-admin-shell .pn-employee-pilot > *,
.pn-admin-shell #employee-page-content {
  min-width: 0;
}

#employee-page-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pn-space-5);
}

.pn-admin-shell .pn-employee-list__table tbody tr > * {
  border-bottom: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
}

.pn-admin-shell .pn-employee-list__table tbody tr:last-child > * {
  border-bottom: 0;
}

@media (max-width: 767px) {
  .pn-admin-shell .pn-search-toolbar__search > * {
    flex: 0 0 auto;
  }

  .pn-admin-shell .pn-search-toolbar__search .pn-field__control,
  .pn-admin-shell .pn-search-toolbar__search input {
    flex: 0 0 auto;
    min-height: var(--pn-size-control-touch);
  }

  .pn-admin-shell .pn-page-header__actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .pn-admin-shell .pn-page-header__actions > * {
    flex: 1 1 auto;
  }
}

/* Row actions sit on one line with even spacing; inline forms (Reset, Delete)
   no longer drop onto their own line, and destructive row actions are outlined
   rather than filled so they do not dominate the row (UX-030, UX-040). */
.pn-admin-shell td.pn-table-actions {
  width: 1%;
  white-space: nowrap;
}

.pn-admin-shell td.pn-table-actions > *,
.pn-admin-shell td.pn-table-actions > .pn-inline-form > * {
  display: inline-flex;
  vertical-align: middle;
}

.pn-admin-shell td.pn-table-actions > * + * {
  margin-inline-start: var(--pn-space-2);
}

.pn-admin-shell td.pn-table-actions .pn-inline-form {
  margin-block: 0;
}

.pn-admin-shell td.pn-table-actions .pn-button--destructive {
  --pn-button-background: var(--pn-color-surface-primary);
  --pn-button-border: var(--pn-color-action-destructive);
  --pn-button-color: var(--pn-color-action-destructive);
}

.pn-admin-shell td.pn-table-actions .pn-button--destructive:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--pn-color-action-destructive-hover);
  background: var(--pn-color-status-error-light);
  color: var(--pn-color-action-destructive-hover);
}

/* Form footer: primary action at the end of a ruled footer, separated from
   the last field (UX-033). */
.pn-admin-shell .pn-form-footer {
  margin-top: var(--pn-space-5);
  padding-top: var(--pn-space-4);
  border-top: var(--pn-border-width) var(--pn-border-style) var(--pn-color-border-default);
}

/* One table header style: bold, sentence case, primary text. Sortable header
   links inherit it instead of rendering as coloured links (UX-018). */
.pn-admin-shell th a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.pn-admin-shell th a:hover {
  color: var(--pn-color-text-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.pn-admin-shell .changes-table th {
  color: var(--pn-color-text-primary);
  font-size: var(--pn-font-role-table-size);
  font-weight: var(--pn-font-weight-semibold);
  letter-spacing: normal;
  text-transform: none;
}

/* Government IDs are masked by default; editors get a per-field Show/Hide (UX-029). */
.pn-admin-shell .pn-sensitive-value__toggle {
  margin-inline-start: var(--pn-space-2);
  padding: 0 var(--pn-space-2);
  border: 0;
  background: transparent;
  color: var(--pn-color-text-link);
  font: inherit;
  font-size: var(--pn-font-role-caption-size);
  font-weight: var(--pn-font-weight-semibold);
  letter-spacing: normal;
  text-decoration: underline;
  cursor: pointer;
}

.pn-admin-shell .pn-sensitive-value__toggle:hover {
  color: var(--pn-color-text-link-hover);
}

/* Empty values: one muted dash, never inside a status pill (UX-014). */
.pn-empty-value {
  color: var(--pn-color-text-muted);
}

/* Secondary detail under a table value, e.g. the approval state under a status (UX-007). */
.pn-admin-shell .pn-cell-note {
  display: block;
  margin-top: 2px;
  color: var(--pn-color-text-muted);
  font-size: var(--pn-font-role-caption-size);
}

/* Reports catalogue (UX-039): readable section headings instead of the faint
   sidebar label style, and an even three-column grid whose short last row is
   widened so no card is left orphaned. */
.pn-admin-shell .pn-report-section {
  margin-bottom: var(--pn-space-6);
}

.pn-admin-shell .pn-report-section__title {
  margin: 0 0 var(--pn-space-3);
  color: var(--pn-color-text-primary);
  font-size: var(--pn-font-size-text-lg);
  font-weight: var(--pn-font-weight-semibold);
  line-height: var(--pn-font-line-height-text-lg);
}

.pn-admin-shell .pn-report-catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

.pn-admin-shell .pn-report-catalog > :last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.pn-admin-shell .pn-report-catalog > :last-child:nth-child(3n + 2) {
  grid-column: span 2;
}

.pn-admin-shell .pn-report-card {
  display: flex;
  flex-direction: column;
  padding: var(--pn-space-4);
}

.pn-admin-shell .pn-report-card .text-link {
  margin-top: auto;
  color: var(--pn-color-text-link);
  font-weight: var(--pn-font-weight-semibold);
}

@media (max-width: 1080px) {
  .pn-admin-shell .pn-report-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pn-admin-shell .pn-report-catalog > :last-child:nth-child(3n + 1),
  .pn-admin-shell .pn-report-catalog > :last-child:nth-child(3n + 2) {
    grid-column: auto;
  }

  .pn-admin-shell .pn-report-catalog > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .pn-admin-shell .pn-report-catalog {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .pn-admin-shell .pn-report-catalog > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Sortable headers show a real arrow for the active sort instead of "^"/"v" (UX-035). */
.pn-admin-shell .pn-sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-space-1);
}

.pn-admin-shell .pn-sort-icon--desc {
  transform: rotate(180deg);
}

.pn-admin-shell .pn-leave-balance-filters {
  margin-bottom: var(--pn-space-4);
}

/* Summary counts are read-only figures, not navigation (UX-025): no pointer, no
   hover change, so they do not invite a click that goes nowhere. */
.pn-admin-shell article.pn-summary-card {
  cursor: default;
}

/* Component extensions (HR only). paynila-components.css is generated from design-system/web; do not edit it. */
.pn-table-empty-row > td { padding: 0; }
.pn-table-empty-row .pn-state { border: 0; border-radius: 0; background: transparent; }
.pn-state__icon { display: inline-flex; color: var(--pn-color-text-secondary); }

/* Summary grid warning tone (UX-049). The note carries the state in text as well as colour. */
.pn-kpi-card--warning { border-inline-start: 3px solid var(--pn-color-status-warning-default); }
.pn-kpi-card__note { display: block; margin-block-start: var(--pn-space-1); font-size: var(--pn-font-role-compact-size); color: var(--pn-color-status-warning-strong); }

/* Native selects share the employee picker chevron (UX-049). A data URI cannot read custom
   properties, so #172126 is --pn-color-text-primary and #5F6F74 is --pn-color-text-disabled. */
select.pn-field__control:not([multiple]):not([size]) {
  appearance: none;
  padding-inline-end: var(--pn-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%23172126' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--pn-space-3) center;
}

select.pn-field__control:not([multiple]):not([size]):disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%235F6F74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (forced-colors: active) {
  select.pn-field__control:not([multiple]):not([size]) {
    appearance: auto;
    background-image: none;
    padding-inline-end: var(--pn-space-3);
  }
}