/* Shared modern presentation layer. Tokens live in gohr-tokens.css,
   which must load first. No rule below may name a raw colour. */

html,
body {
  background: var(--gohr-canvas);
  color: var(--gohr-text);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 100%;
}

body {
  overflow-x: clip;
}

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

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: var(--gohr-focus) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.btn {
  align-items: center;
  border-radius: var(--gohr-radius-sm);
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 40px;
  padding: .55rem 1rem;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background-color: var(--gohr-action);
  border-color: var(--gohr-action);
  color: var(--gohr-on-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--gohr-action-hover);
  border-color: var(--gohr-action-hover);
  color: var(--gohr-on-accent);
}

.btn-light {
  background: var(--gohr-surface-raised);
  border-color: var(--gohr-border);
  color: var(--gohr-text);
}

.btn-secondary {
  background-color: var(--gohr-secondary-action);
  border-color: var(--gohr-secondary-action);
  color: var(--gohr-on-accent);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--gohr-secondary-action-hover);
  border-color: var(--gohr-secondary-action-hover);
  color: var(--gohr-on-accent);
}

.form-label,
.col-form-label {
  color: var(--gohr-text);
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .45rem;
}

/* !important on background and border only because style.css declares both
   with !important on .form-control, and nothing but !important answers that.
   Both go when style.css does. The token is the intended source of truth for
   a control's surface in either theme. */
/* select2 came off this rule: its !important - needed here to answer
   style.css's own on .form-control - meant gk.css could not set the dropdown's
   border however specific it got, so a 42px #DFE4EA box sat beside a 32px
   #C3D0D6 input. The kit styles select2 now; the Bootstrap classes stay. */
.form-control,
.form-select,
.custom-select {
  background-color: var(--gohr-input) !important;
  border: 1px solid var(--gohr-border) !important;
  border-radius: var(--gohr-radius-sm);
  color: var(--gohr-text);
  min-height: 42px;
}

.form-control,
.form-select,
.custom-select {
  padding: .58rem .78rem;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
  background-color: var(--gohr-input);
  border-color: var(--gohr-accent) !important;
  box-shadow: var(--gohr-focus);
  color: var(--gohr-text);
}

/* Also !important: the base rule above had to use it to answer style.css,
   and a more specific selector does not outrank an !important declaration. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--gohr-surface-muted) !important;
  color: var(--gohr-text-muted);
  opacity: 1;
}

.form-control::placeholder {
  color: var(--gohr-text-soft);
  opacity: 1;
}

.form-check-input {
  background-color: var(--gohr-input);
  border-color: var(--gohr-border-strong);
}

.form-check-input:checked {
  background-color: var(--gohr-action);
  border-color: var(--gohr-action);
}

.invalid-feedback,
.text-danger {
  color: var(--gohr-danger) !important;
}

/* Authentication */
.auth-layout {
  margin: 0;
  min-height: 100dvh;
}

.auth-shell {
  align-items: center;
  background:
    radial-gradient(ellipse 60rem 40rem at 12% -10%, color-mix(in srgb, var(--gohr-accent) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 55rem 38rem at 92% 108%, color-mix(in srgb, var(--gohr-info) 13%, transparent), transparent 70%),
    var(--gohr-canvas);
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  padding: clamp(1rem, 4vw, 3rem);
  position: relative;
  width: 100%;
}

/* A faint grid keeps the empty canvas from reading as flat, without competing
   with the card that sits on top of it. */
.auth-shell::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--gohr-text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--gohr-text) 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, var(--gohr-mask-opaque), transparent 78%);
  pointer-events: none;
  position: absolute;
}

.auth-login-grid {
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .04),
    0 24px 64px -12px rgba(16, 24, 40, .18);
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(400px, 1.08fr);
  max-width: 1040px;
  min-height: min(660px, calc(100dvh - 4rem));
  overflow: hidden;
  position: relative;
  width: 100%;
}

[data-theme="dark"] .auth-login-grid {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .3),
    0 28px 72px -16px rgba(0, 0, 0, .6);
}

/* ---- Brand panel ---- */
.auth-login-aside {
  align-items: flex-start;
  background: linear-gradient(155deg, var(--gohr-auth-aside-start), var(--gohr-auth-aside-end));
  color: var(--gohr-on-accent);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  justify-content: center;
  overflow: hidden;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  position: relative;
}

/* Two soft lights lift the flat gradient; both sit behind the content. */
.auth-login-aside::before,
.auth-login-aside::after {
  border-radius: 50%;
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.auth-login-aside::before {
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%);
  height: 26rem;
  inset-block-start: -9rem;
  inset-inline-end: -11rem;
  width: 26rem;
}

.auth-login-aside::after {
  background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 64%);
  height: 20rem;
  inset-block-end: -8rem;
  inset-inline-start: -8rem;
  width: 20rem;
}

.auth-login-aside__mark {
  align-items: center;
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, .96);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(5, 12, 25, .22);
  display: inline-flex;
  justify-content: center;
  margin-bottom: 1.6rem;
  min-height: 56px;
  padding: .55rem .9rem;
}

.auth-login-aside__mark img {
  display: block;
  max-height: 44px;
  max-width: 168px;
  object-fit: contain;
}

.auth-login-aside__mark--initials {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: none;
  color: var(--gohr-on-accent);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 0;
  width: 56px;
}

.auth-login-aside__brand {
  color: var(--gohr-auth-aside-kicker);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.auth-login-aside h1 {
  color: var(--gohr-on-accent);
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: .6rem 0 .9rem;
}

.auth-login-aside p {
  color: var(--gohr-auth-aside-copy);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
  max-width: 34ch;
}

.auth-login-aside__points {
  display: grid;
  gap: .85rem;
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
}

.auth-login-aside__points li {
  align-items: center;
  color: rgba(255, 255, 255, .92);
  display: flex;
  font-size: .93rem;
  gap: .7rem;
  line-height: 1.4;
}

.auth-login-aside__points svg {
  background: rgba(255, 255, 255, .16);
  border-radius: 50%;
  flex: 0 0 22px;
  height: 22px;
  padding: 4px;
  width: 22px;
}

/* ---- Form panel ---- */
.auth-login-form {
  align-self: center;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  width: 100%;
}

.auth-kicker,
.auth-panel__brand {
  color: var(--gohr-link);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.auth-login-form h1,
.auth-login-form h2,
.auth-panel__title {
  color: var(--gohr-text);
  font-size: clamp(1.65rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: .5rem 0 .5rem;
}

.auth-login-form__intro,
.auth-panel__description {
  color: var(--gohr-text-muted);
  line-height: 1.6;
  margin-bottom: 1.85rem;
}

.auth-field {
  margin-bottom: 1.15rem;
}

.auth-field__row {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.auth-login-form .form-label {
  color: var(--gohr-text);
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .4rem;
}

.auth-login-form .form-control,
.auth-login-form .form-select {
  background: var(--gohr-input);
  border: 1px solid var(--gohr-border-strong);
  border-radius: var(--gohr-radius);
  color: var(--gohr-text);
  font-size: .95rem;
  min-height: 48px;
  padding: .7rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-login-form .form-control::placeholder {
  color: var(--gohr-text-soft);
}

.auth-login-form .form-control:focus,
.auth-login-form .form-select:focus {
  border-color: var(--gohr-accent);
  box-shadow: var(--gohr-focus);
  outline: none;
}

/* Password field with a trailing reveal control. */
.auth-input {
  position: relative;
}

.auth-input .form-control {
  padding-inline-end: 3rem;
}

.auth-input__toggle {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--gohr-radius-sm);
  color: var(--gohr-text-soft);
  cursor: pointer;
  display: flex;
  height: 34px;
  inset-block-start: 50%;
  inset-inline-end: .45rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  transform: translateY(-50%);
  width: 34px;
}

.auth-input__toggle:hover {
  background: var(--gohr-surface-muted);
  color: var(--gohr-text);
}

.auth-input__toggle:focus-visible {
  box-shadow: var(--gohr-focus);
  color: var(--gohr-text);
  outline: none;
}

.auth-input__toggle svg {
  height: 18px;
  width: 18px;
}

/* Segmented control: the two sign-in audiences read better as a visible
   choice than as a collapsed dropdown. */
.auth-seg {
  background: var(--gohr-surface-muted);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
  display: grid;
  gap: .25rem;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding: .25rem;
}

.auth-seg__input {
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.auth-seg__option {
  align-items: center;
  border-radius: calc(var(--gohr-radius) - 4px);
  color: var(--gohr-text-muted);
  cursor: pointer;
  display: flex;
  font-size: .9rem;
  font-weight: 600;
  gap: .45rem;
  justify-content: center;
  margin: 0;
  padding: .55rem .5rem;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
}

.auth-seg__option:hover {
  color: var(--gohr-text);
}

.auth-seg__option svg {
  height: 16px;
  width: 16px;
}

.auth-seg__input:checked + .auth-seg__option {
  background: var(--gohr-surface);
  box-shadow: var(--gohr-shadow-sm);
  color: var(--gohr-text);
}

.auth-seg__input:focus-visible + .auth-seg__option {
  box-shadow: var(--gohr-focus);
}

.auth-login-form__submit {
  border: 0;
  border-radius: var(--gohr-radius);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin-top: .35rem;
  min-height: 48px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  width: 100%;
}

.auth-login-form__submit:hover {
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--gohr-action) 70%, transparent);
  transform: translateY(-1px);
}

.auth-login-form__submit:active {
  transform: translateY(0);
}

.auth-login-form__forgot,
.auth-panel__footer a {
  color: var(--gohr-link);
  font-weight: 600;
  text-decoration: none;
}

.auth-login-form__forgot:hover,
.auth-panel__footer a:hover {
  text-decoration: underline;
}

/* Inline with its field label, the recovery link no longer needs a row of its own. */
.auth-field__row .auth-login-form__forgot {
  font-size: .83rem;
}

.auth-panel__footer {
  border-top: 1px solid var(--gohr-border);
  color: var(--gohr-text-muted);
  font-size: .9rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  text-align: center;
}

.auth-login-form .alert {
  border-radius: var(--gohr-radius);
  font-size: .9rem;
  margin-bottom: 1.25rem;
}

.auth-login-form .invalid-feedback {
  font-size: .82rem;
}

/* Administration shell */
.admin-shell,
.admin-shell .main-wrapper,
.admin-shell .page-wrapper,
.admin-shell .page-content {
  background: var(--gohr-canvas);
  color: var(--gohr-text);
}

.admin-shell .main-wrapper,
.admin-shell .page-wrapper {
  min-width: 0;
}

.admin-shell .sidebar {
  background: var(--gohr-sidebar);
  box-shadow: var(--gohr-sidebar-shadow);
}

.admin-shell .sidebar .sidebar-header,
.admin-shell .sidebar .sidebar-body {
  background: var(--gohr-sidebar);
}

.admin-shell .sidebar .sidebar-header {
  border-color: var(--gohr-sidebar-border);
  gap: 12px;
  padding-inline: 10px 12px;
}

.admin-shell .sidebar .sidebar-header .sidebar-brand {
  align-items: center;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--gohr-sidebar-border);
  border-radius: 9px;
  display: flex;
  flex: 0 0 68px;
  height: 50px;
  justify-content: center;
  margin: 0 !important;
  overflow: hidden;
  padding: 2px 5px;
}

.admin-shell .sidebar .sidebar-header .sidebar-brand img {
  height: 44px !important;
  max-width: 58px;
  object-fit: contain;
  width: auto !important;
}

.admin-shell .sidebar .sidebar-toggler,
.admin-shell > .sidebar-toggler,
.admin-shell .navbar > .sidebar-toggler {
  background: transparent;
  border: 0;
  color: var(--gohr-text);
  min-height: 40px;
  min-width: 40px;
  padding: .5rem;
}

.admin-shell .sidebar .sidebar-header .sidebar-toggler span {
  background: var(--gohr-sidebar-text);
}

.admin-shell .sidebar .sidebar-header .sidebar-toggler {
  border-radius: 8px;
  flex: 0 0 34px;
  height: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 8px !important;
  width: 34px !important;
}

.admin-shell .sidebar .sidebar-header .sidebar-toggler:hover,
.admin-shell .sidebar .sidebar-header .sidebar-toggler:focus-visible {
  background: var(--gohr-sidebar-hover);
}

.admin-shell .sidebar .sidebar-header .sidebar-toggler span {
  animation: none !important;
  bottom: auto !important;
  height: 2px;
  opacity: 1 !important;
  top: auto !important;
  transform: none !important;
  width: 18px !important;
}

.admin-shell .sidebar .sidebar-body .nav {
  gap: 2px;
}

/* 17px, not the theme's 25px: with the 10px link margin that puts the icon
   17 + 10 = 27px from the sidebar edge, dead centre of the 42px square the
   folded rail draws (14px margin + 13px). The icon the pointer is resting on
   therefore does not slide sideways when the rail opens. */
.admin-shell .sidebar .sidebar-body .nav .nav-item {
  border-bottom: 0 !important;
  padding-inline: 17px;
}

/* The theme sets `line-height: 3` here (42px at 14px text) to centre the label
   the old way. The row is a flex box with align-items:center, so that only
   inflated it: 42px of line box plus 17.6px of padding made a 59.6px row where
   `min-height: 42px` says 42. Folded to a rail the padding is dropped and the
   row really is 42px, so every item sat at a different y in the two states and
   opening on hover slid the whole menu down — 409px by the last item. One
   normal line-height gives both states the same 42px row. */
.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link {
  align-items: center;
  border-radius: var(--gohr-radius-sm);
  color: var(--gohr-sidebar-text);
  display: flex;
  line-height: 1.35;
  margin: 1px 10px;
  min-height: 42px;
  padding-block: .55rem !important;
  transition: background-color .15s ease, color .15s ease;
}

.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link .link-title,
.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link .link-icon,
.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link .link-arrow {
  color: inherit;
}

.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link .link-icon {
  fill: none !important;
}

.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link:hover,
.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link:focus-visible {
  background: var(--gohr-sidebar-hover);
  color: var(--gohr-sidebar-text);
}

.admin-shell .sidebar .sidebar-body .nav .nav-item.submenu-open > .nav-link,
.admin-shell .sidebar .sidebar-body .nav .nav-item.active > .nav-link[data-bs-toggle="collapse"],
.admin-shell .sidebar .sidebar-body .nav .nav-item.active > .nav-link[data-gohr-toggle="collapse"],
.admin-shell .sidebar .sidebar-body .nav .nav-item > .nav-link[aria-expanded="true"] {
  background: var(--gohr-sidebar-expanded) !important;
  box-shadow: none !important;
  color: var(--gohr-sidebar-text) !important;
  font-weight: 600;
}

.admin-shell .sidebar .sidebar-body .nav .nav-item.active > .nav-link:not([data-bs-toggle="collapse"]):not([data-gohr-toggle="collapse"]),
.admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link.active {
  background: var(--gohr-sidebar-selected) !important;
  box-shadow: none !important;
  color: var(--gohr-sidebar-selected-text) !important;
  font-weight: 700;
}

.admin-shell .sidebar .sidebar-body .nav .nav-item.active > .nav-link:not([data-bs-toggle="collapse"]):not([data-gohr-toggle="collapse"]) .link-icon {
  color: var(--gohr-link);
}

.admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link.active::before {
  color: var(--gohr-link);
}

.admin-shell .sidebar .sidebar-body .nav .nav-item .nav-link .link-arrow {
  transition: transform .18s ease;
}

.admin-shell .sidebar .sidebar-body .nav .nav-item .nav-link[aria-expanded="true"] .link-arrow {
  transform: rotate(180deg);
}

.admin-shell .sidebar .sidebar-body .nav.sub-menu {
  background: transparent;
  gap: 1px;
  padding-inline: 0 !important;
  padding-block: .25rem .5rem;
}

.admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link {
  border-radius: 6px;
  color: var(--gohr-sidebar-muted);
  font-size: .84rem;
  margin-inline: 10px;
  min-height: 38px;
  padding-inline: 40px 12px !important;
  padding-block: .45rem;
  position: relative;
}

.admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link::before {
  left: 14px;
  right: auto;
}

[dir="rtl"] .admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link::before {
  left: auto;
  right: 14px;
}

.admin-shell .navbar {
  background: color-mix(in srgb, var(--gohr-surface) 94%, transparent);
  border-bottom: 1px solid var(--gohr-border);
  box-shadow: var(--gohr-shadow-sm);
  min-height: 72px;
}

.admin-shell .navbar .navbar-content {
  min-width: 0;
}

.admin-shell .sidebar-search {
  flex: 0 0 auto;
  margin: .75rem 0 0 !important;
  padding-inline: 1rem;
  width: 100%;
}

/* The menu carries 25px of its own top padding, which read as a gap once the
   field sat above it. The field supplies the spacing instead. */
.admin-shell .sidebar-search + .sidebar-menu {
  padding-block-start: .75rem;
}

/* Folded to a rail the field shrinks to its icon but keeps the same box: same
   margin, same 42px height, centred in the 70px rail (70 - 42 = 28 / 2). It
   used to be hidden outright, so opening the rail on hover inserted ~66px and
   pushed every menu item down — the icon you aimed at was no longer under the
   pointer by the time the panel had opened. Scoped to desktop: below 992px
   `sidebar-folded` still means a 280px sidebar, which has room for the field. */
@media (min-width: 992px) {
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar-search {
    padding-inline: 14px;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar-search #admin-search-menu {
    display: none;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar-search .input-group-text {
    border-radius: var(--gohr-radius-sm);
    flex: 1 1 auto;
  }
}

/* The navbar keeps its actions at the end now that nothing pushes them. */
.admin-shell .navbar .navbar-nav {
  margin-inline-start: auto;
}

/* Fixed, not min-: the field is 42px in the rail and the inner input pushed it
   to 46px once the rail opened, which is 4px every menu item below it moved. */
.admin-shell .sidebar-search .input-group {
  background: var(--gohr-input);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius-sm);
  flex-wrap: nowrap;
  height: 42px;
  overflow: visible;
  width: 100%;
}

.admin-shell .sidebar-search .input-group-text,
.admin-shell .sidebar-search .form-control {
  background: transparent;
  border: 0;
  color: var(--gohr-text);
}

.admin-shell .sidebar-search .input-group-text {
  border-radius: var(--gohr-radius-sm) 0 0 var(--gohr-radius-sm);
  flex: 0 0 40px;
  justify-content: center;
  padding: 0 !important;
}

.admin-shell .sidebar-search #admin-search-menu {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  width: auto !important;
}

.admin-shell .sidebar-search #nav-search {
  border: 0 !important;
  border-radius: 0 var(--gohr-radius-sm) var(--gohr-radius-sm) 0;
  box-shadow: none !important;
  height: 40px;
  margin: 0 !important;
  min-height: 40px;
  padding-inline: .25rem .75rem;
  width: 100% !important;
}

.admin-shell .sidebar-search .input-group:focus-within {
  border-color: var(--gohr-accent);
  box-shadow: var(--gohr-focus);
}

.admin-shell .sidebar-search .card-admin-search {
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  margin: 0;
  max-height: min(420px, calc(100dvh - 96px));
  overflow-y: auto;
  position: absolute !important;
  width: 100%;
  z-index: 1050;
}

.admin-shell .sidebar-search .card-admin-search:has(#nav-search-listing:empty) {
  display: none !important;
}

.admin-shell .navbar .profile-menu-action {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--gohr-text) !important;
  display: flex;
  gap: .5rem;
  min-height: 40px;
  padding: .55rem .75rem;
  text-align: start;
  width: 100%;
}

.admin-shell .navbar .profile-menu-action:hover,
.admin-shell .navbar .profile-menu-action:focus-visible {
  background: color-mix(in srgb, var(--gohr-accent) 10%, var(--gohr-surface));
}

.admin-shell .navbar .profile-menu-action svg,
.admin-shell .navbar .profile-menu-action i {
  flex: 0 0 auto;
  margin: 0 !important;
}

[dir="rtl"] .admin-shell .sidebar-search .input-group-text {
  border-radius: 0 var(--gohr-radius-sm) var(--gohr-radius-sm) 0;
}

[dir="rtl"] .admin-shell .sidebar-search #nav-search {
  border-radius: var(--gohr-radius-sm) 0 0 var(--gohr-radius-sm);
}

.admin-shell .navbar .navbar-nav .nav-item .nav-link,
.admin-shell .navbar .navbar-toggler {
  color: var(--gohr-text-muted);
}

.admin-shell .navbar .navbar-nav .nav-item .nav-link:hover,
.admin-shell .navbar .navbar-nav .nav-item .nav-link:focus-visible,
.admin-shell .navbar .navbar-toggler:hover {
  color: var(--gohr-text);
}

.admin-shell #nav-search-listing {
  background: var(--gohr-surface-raised);
}

.admin-shell #nav-search-listing > li {
  background: transparent;
  border: 0;
}

.admin-shell #nav-search-listing > li + li {
  border-top: 1px solid var(--gohr-border);
}

.admin-shell #nav-search-listing > li a {
  color: var(--gohr-text);
  text-transform: capitalize;
}

.admin-shell #nav-search-listing > li.highlight,
.admin-shell #nav-search-listing > li:hover {
  background: color-mix(in srgb, var(--gohr-accent) 18%, var(--gohr-surface));
}

.admin-shell .page-content {
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.admin-shell .page-content > .grid-margin:first-child {
  margin-bottom: 1.25rem;
}

.admin-shell .page-content > .grid-margin:first-child h4 {
  color: var(--gohr-text);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 800;
}

.admin-shell .card,
.admin-shell .modal-content,
.admin-shell .offcanvas,
.admin-shell .list-group-item {
  background: var(--gohr-surface);
  border-color: var(--gohr-border);
  color: var(--gohr-text);
}

.admin-shell .card {
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
  box-shadow: var(--gohr-shadow-sm);
  margin-bottom: 1.25rem;
}

.admin-shell .card .card-header,
.admin-shell .modal-header,
.admin-shell .modal-footer {
  background: transparent;
  border-color: var(--gohr-border);
}

.admin-shell .card .card-header {
  font-weight: 700;
  padding: 1.1rem 1.25rem;
}

.admin-shell .card .card-body {
  padding: 1.25rem;
}

.admin-shell .card-title,
.admin-shell .modal-title,
/* :not([class*="gk-"]) added in G2, for the same reason as the link rule in
   gohr-kit.css: this is !important, so no specificity in gk.css can answer
   it, and it was repainting every .gk-field__label at full heading colour -
   a label meant to be quieter than its own value. No screen still on this
   layer puts a gk- class on a heading or a label, so excluding them cannot
   change one. Goes with the file. */
.admin-shell h1:not([class*="gk-"]),
.admin-shell h2:not([class*="gk-"]),
.admin-shell h3:not([class*="gk-"]),
.admin-shell h4:not([class*="gk-"]),
.admin-shell h5:not([class*="gk-"]),
.admin-shell h6:not([class*="gk-"]),
.admin-shell label:not([class*="gk-"]),
.admin-shell .text-body:not([class*="gk-"]) {
  color: var(--gohr-text) !important;
}

/* :not([class*="gk-"]) added in G2, with the heading and label rule above:
   `.admin-shell small` was repainting every <small class="gk-muted"> the kit
   renders. Goes with the file. */
.admin-shell .text-muted:not([class*="gk-"]),
.admin-shell small:not([class*="gk-"]),
.admin-shell .breadcrumb-item:not([class*="gk-"]) {
  color: var(--gohr-text-muted) !important;
}

.admin-shell .breadcrumb-item a {
  color: var(--gohr-link) !important;
}

/* The current crumb is not a link. Painting it in the brand colour made
   it look like one, on every screen; weight carries "you are here". */
.admin-shell .breadcrumb-item.active {
  color: var(--gohr-text) !important;
  font-weight: 600;
}

.admin-shell .table-responsive {
  border-radius: var(--gohr-radius-sm);
  max-width: 100%;
  overflow-x: auto;
}

.admin-shell .table {
  color: var(--gohr-text);
  margin-bottom: 0;
}

.admin-shell .table > :not(caption) > * > * {
  background: transparent;
  border-bottom-color: var(--gohr-border);
  color: inherit;
  padding: .8rem .75rem;
  vertical-align: middle;
}

.admin-shell .table thead th {
  background: var(--gohr-surface-muted);
  color: var(--gohr-text-muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-shell .table-hover tbody tr:hover > * {
  background: color-mix(in srgb, var(--gohr-accent) 6%, var(--gohr-surface));
  color: var(--gohr-text);
}

.admin-shell .dropdown-menu,
.admin-shell .tt-menu,
.admin-shell .datepicker.datepicker-dropdown,
.select2-dropdown {
  background: var(--gohr-surface-raised);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
  box-shadow: var(--gohr-shadow);
  color: var(--gohr-text);
  padding: .4rem;
}

.admin-shell .dropdown-item,
.admin-shell .tt-menu .tt-suggestion,
.select2-container--default .select2-results__option {
  border-radius: 7px;
  color: var(--gohr-text);
  padding: .55rem .75rem;
}

.admin-shell .dropdown-item:hover,
.admin-shell .dropdown-item:focus,
.admin-shell .dropdown-item.active,
.admin-shell .dropdown-item:active,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: color-mix(in srgb, var(--gohr-accent) 16%, var(--gohr-surface));
  color: var(--gohr-text);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--gohr-text);
  line-height: 40px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--gohr-surface-muted);
  border-color: var(--gohr-border);
  color: var(--gohr-text);
}

.admin-shell .modal-content {
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius-lg);
  box-shadow: var(--gohr-shadow);
}

.admin-shell .modal-header,
.admin-shell .modal-body,
.admin-shell .modal-footer {
  padding: 1.25rem;
}

.admin-shell .btn-close {
  filter: none;
}

[data-theme="dark"] .admin-shell .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

.admin-shell .pagination {
  flex-wrap: wrap;
  gap: .3rem;
}

.admin-shell .pagination .page-link {
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  border-radius: 7px;
  color: var(--gohr-text-muted);
  min-width: 36px;
  text-align: center;
}

.admin-shell .pagination .page-item.active .page-link,
.admin-shell .pagination .page-link:hover {
  background: var(--gohr-action);
  border-color: var(--gohr-action);
  color: var(--gohr-on-accent);
}

.admin-shell .pagination .page-item.disabled .page-link {
  background: var(--gohr-surface-muted);
  color: var(--gohr-text-soft);
}

.alert {
  border: 1px solid transparent;
  border-radius: var(--gohr-radius-sm);
}

.alert-success {
  background: var(--gohr-success-bg);
  border-color: color-mix(in srgb, var(--gohr-success) 30%, transparent);
  color: var(--gohr-success);
}

.alert-warning {
  background: var(--gohr-warning-bg);
  border-color: color-mix(in srgb, var(--gohr-warning) 30%, transparent);
  color: var(--gohr-warning);
}

.alert-danger {
  background: var(--gohr-danger-bg);
  border-color: color-mix(in srgb, var(--gohr-danger) 30%, transparent);
  color: var(--gohr-danger);
}

.alert-info {
  background: var(--gohr-info-bg);
  border-color: color-mix(in srgb, var(--gohr-info) 30%, transparent);
  color: var(--gohr-info);
}

.admin-shell .footer {
  background: var(--gohr-canvas);
  border-color: var(--gohr-border) !important;
  color: var(--gohr-text-muted);
}

@media (min-width: 992px) {
  body.admin-shell.sidebar-folded .sidebar .sidebar-header,
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-header {
    gap: 0;
    justify-content: center;
    padding: 0 !important;
    width: 70px;
  }

  body.admin-shell.sidebar-folded .sidebar .sidebar-header .sidebar-toggler {
    display: block;
    flex: 0 0 34px;
    inset-inline-end: auto !important;
    inset-inline-start: 18px !important;
    margin: 0 !important;
    position: absolute !important;
    top: 13px !important;
  }

  body.admin-shell.sidebar-folded .navbar > .sidebar-toggler {
    display: none !important;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .sidebar-menu > .nav-item {
    padding-inline: 0;
  }

  /* Block margin matches the expanded `margin: 1px 10px` so an item sits at the
     same y in both states; only the inline margin changes, to centre the 42px
     square in the 70px rail. At 4px the pitch was 52px against the expanded
     46px, so the tenth icon drifted 60px as the rail opened. */
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .sidebar-menu > .nav-item > .nav-link {
    justify-content: center;
    margin: 1px 14px;
    min-height: 42px;
    padding: 0 !important;
    width: 42px;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .sidebar-menu > .nav-item > .nav-link .link-icon {
    flex: 0 0 18px;
    height: 18px;
    margin: 0 !important;
    position: static;
    width: 18px;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .sidebar-menu > .nav-item > .nav-link .link-title,
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .sidebar-menu > .nav-item > .nav-link .link-arrow {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .auth-login-grid {
    grid-template-columns: minmax(260px, .82fr) minmax(360px, 1.18fr);
  }

  .auth-login-aside,
  .auth-login-form {
    padding: 2rem;
  }

  .auth-login-aside__points {
    margin-top: 1.75rem;
  }

  .admin-shell .navbar {
    inset-inline-start: 0 !important;
    min-height: 64px;
    width: 100% !important;
  }

  .admin-shell .navbar > .sidebar-toggler {
    align-items: center;
    border-inline-end: 1px solid var(--gohr-border);
    display: flex !important;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    padding: 13px !important;
    width: 48px;
  }

  .admin-shell .navbar .navbar-content {
    padding-inline: 16px;
    width: calc(100% - 48px) !important;
  }

  body.admin-shell.sidebar-folded .page-wrapper {
    margin-inline: 0 !important;
    width: 100% !important;
  }

  body.admin-shell.sidebar-folded .page-wrapper .navbar {
    left: 0 !important;
    right: 0 !important;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar {
    width: 280px;
  }

  body.admin-shell.sidebar-folded .sidebar .sidebar-header,
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-header {
    gap: 12px;
    justify-content: space-between;
    padding-inline: 10px 12px !important;
    width: 280px;
  }

  body.admin-shell.sidebar-folded .sidebar .sidebar-header .sidebar-brand,
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-header .sidebar-brand {
    display: flex;
    flex: 0 0 68px;
    opacity: 1;
    visibility: visible;
    width: auto;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .nav .nav-item .nav-link .link-title,
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .nav .nav-item .nav-link .link-arrow {
    opacity: 1;
    visibility: visible;
  }

  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .collapse.show > .nav.sub-menu {
    display: flex;
  }
}

@media (max-width: 767.98px) {
  .auth-shell {
    align-items: flex-start;
    padding: 1rem;
  }

  .auth-login-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .auth-login-aside {
    min-height: 150px;
    padding: 1.5rem;
  }

  .auth-login-aside h1 {
    font-size: 1.55rem;
    margin-bottom: .35rem;
  }

  .auth-login-aside p {
    font-size: .9rem;
  }

  .auth-login-aside__points {
    display: none;
  }

  .auth-login-aside__mark {
    margin-bottom: 1.1rem;
    min-height: 46px;
  }

  .auth-login-aside__mark img {
    max-height: 34px;
  }

  .auth-login-form {
    padding: 1.5rem;
  }

  .auth-login-form h1,
  .auth-login-form h2,
  .auth-panel__title {
    font-size: 1.5rem;
  }

  .admin-shell .page-content {
    padding: 1rem;
  }

  .admin-shell .card .card-header,
  .admin-shell .card .card-body,
  .admin-shell .modal-header,
  .admin-shell .modal-body,
  .admin-shell .modal-footer {
    padding: 1rem;
  }

  .admin-shell .sidebar-search {
    display: none;
  }
}

@media (max-height: 650px) and (min-width: 768px) {
  .auth-shell {
    align-items: flex-start;
    padding-block: 1rem;
  }

  .auth-login-grid {
    min-height: 0;
  }

  .auth-login-aside__points {
    gap: .55rem;
    margin-top: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Employee profile workspace (admin/employees create + edit)
   Two-column workspace: a sticky section rail beside stacked section cards.
   Scoped under .gohr-profile so no other admin screen is affected.
   ========================================================================== */

.gohr-profile {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}

@media (max-width: 991.98px) {
  .gohr-profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* --- section rail --------------------------------------------------------- */

.gohr-profile__rail {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .5rem;
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
  box-shadow: var(--gohr-shadow-sm);
}

@media (max-width: 991.98px) {
  .gohr-profile__rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

.gohr-profile__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .625rem .75rem;
  background: transparent;
  border: 0;
  border-radius: var(--gohr-radius-sm);
  color: var(--gohr-text-muted);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.gohr-profile__step:hover:not(:disabled) {
  background: var(--gohr-sidebar-hover);
  color: var(--gohr-text);
}

.gohr-profile__step:focus-visible {
  outline: none;
  box-shadow: var(--gohr-focus);
}

.gohr-profile__step.active {
  background: var(--gohr-sidebar-selected);
  color: var(--gohr-sidebar-selected-text);
}

.gohr-profile__step.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: var(--gohr-accent);
}

.gohr-profile__step:disabled {
  opacity: .45;
  cursor: default;
}

.gohr-profile__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gohr-border-strong);
  transition: background-color .15s ease;
}

.gohr-profile__step.active .gohr-profile__dot {
  background: var(--gohr-accent);
}

/* --- section card --------------------------------------------------------- */

.gohr-pcard {
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius-lg);
  box-shadow: var(--gohr-shadow-sm);
  overflow: hidden;
}

.gohr-pcard + .gohr-pcard {
  margin-top: 1.25rem;
}

.gohr-pcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--gohr-border);
}

.gohr-pcard__title {
  margin: 0;
  color: var(--gohr-text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.gohr-pcard__subtitle {
  margin: .2rem 0 0;
  color: var(--gohr-text-muted);
  font-size: .8125rem;
}

.gohr-pcard__layout {
  padding: 1.35rem;
}

.gohr-pcard__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .625rem;
  padding: .95rem 1.35rem;
  background: var(--gohr-surface-muted);
  border-top: 1px solid var(--gohr-border);
}

/* --- fields --------------------------------------------------------------- */

/* .gohr-field, __hint and __error moved to gohr-components.css, which now
   owns them for both this layer and the Blade components. */
.gohr-fieldgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 1.05rem 1.15rem;
}


.gohr-field--wide {
  grid-column: span 2;
}

.gohr-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
  .gohr-field--wide {
    grid-column: 1 / -1;
  }
}

.gohr-field .form-label {
  margin-bottom: .4rem;
}

.gohr-req {
  margin-inline-start: .15rem;
  color: var(--gohr-danger);
}



/* --- sub-section within a card -------------------------------------------- */

.gohr-subsection {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--gohr-border);
}

.gohr-subsection__title {
  margin: 0 0 .85rem;
  color: var(--gohr-text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --- tables --------------------------------------------------------------- */

.gohr-tablewrap {
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
  overflow: hidden;
}

.gohr-tablescroll {
  overflow-x: auto;
}

.gohr-profile .gohr-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.gohr-profile .gohr-table th {
  padding: .62rem .85rem;
  background: var(--gohr-surface-muted);
  border-bottom: 1px solid var(--gohr-border);
  color: var(--gohr-text-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}

.gohr-profile .gohr-table td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--gohr-border);
  color: var(--gohr-text);
  vertical-align: middle;
}

.gohr-profile .gohr-table tr:last-child td {
  border-bottom: 0;
}

.gohr-profile .gohr-table .form-control {
  max-width: 180px;
}

/* --- misc ----------------------------------------------------------------- */

.gohr-empty {
  padding: 1.6rem;
  background: var(--gohr-surface-muted);
  border: 1px dashed var(--gohr-border);
  border-radius: var(--gohr-radius);
  color: var(--gohr-text-muted);
  font-size: .875rem;
  text-align: center;
}

.gohr-switchrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  background: var(--gohr-surface-muted);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
}

.gohr-switchrow .form-check-input {
  margin: 0;
  flex: none;
}

.gohr-switchrow .form-check-label {
  margin: 0;
  font-weight: 600;
}

/* Repeatable document blocks injected by profile-scripts. */
.gohr-repeat-item {
  padding: 1.1rem;
  background: var(--gohr-surface-muted);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
}

.gohr-repeat-item + .gohr-repeat-item {
  margin-top: .9rem;
}

.gohr-repeat-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--gohr-border);
}

.gohr-repeat-item__title {
  font-weight: 600;
  color: var(--gohr-text);
}

.gohr-repeat-item__drop {
  padding: .2rem .6rem;
  font-size: .85rem;
  color: var(--gohr-danger);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--gohr-radius-sm);
  cursor: pointer;
}

.gohr-repeat-item__drop:hover {
  color: var(--gohr-on-accent);
  background: var(--gohr-danger);
}

/* --- saved document cards ------------------------------------------------- */

.gohr-doc {
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius);
  background: var(--gohr-surface);
  overflow: hidden;
}

.gohr-doc + .gohr-doc {
  margin-top: .75rem;
}

.gohr-doc--invalid {
  border-color: var(--gohr-danger);
}

.gohr-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .85rem 1.1rem;
  background: var(--gohr-surface-muted);
}

.gohr-doc__ident {
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  flex: 1 1 11rem;
}

.gohr-doc__type {
  font-weight: 600;
  color: var(--gohr-text);
}

.gohr-doc__number {
  font-size: .85rem;
  color: var(--gohr-text-muted);
}

.gohr-doc__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.gohr-doc__file {
  font-size: .85rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gohr-doc__actions {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-inline-start: auto;
}

.gohr-doc__toggle {
  padding: .25rem .75rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--gohr-link);
  background: transparent;
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius-sm);
  cursor: pointer;
}

.gohr-doc__toggle:hover {
  border-color: var(--gohr-accent);
}

.gohr-doc__remove {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .85rem;
  color: var(--gohr-text-muted);
  cursor: pointer;
}

.gohr-doc__body {
  padding: 1.1rem;
  border-top: 1px solid var(--gohr-border);
}

.gohr-chip {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  font-size: .78rem;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
}

.gohr-chip--valid {
  color: var(--gohr-success);
  background: var(--gohr-success-bg);
}

.gohr-chip--soon {
  color: var(--gohr-warning);
  background: var(--gohr-warning-bg);
}

.gohr-chip--expired {
  color: var(--gohr-danger);
  background: var(--gohr-danger-bg);
}

.gohr-chip--muted {
  color: var(--gohr-text-muted);
  background: var(--gohr-surface-muted);
  border: 1px solid var(--gohr-border);
}

/* --- avatar uploader ------------------------------------------------------ */

.gohr-avatar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gohr-avatar__frame {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 84px;
  height: 84px;
  background: var(--gohr-surface-muted);
  border: 1px dashed var(--gohr-border-strong);
  border-radius: 50%;
  overflow: hidden;
}

.gohr-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gohr-avatar__placeholder {
  width: 38px;
  height: 38px;
  color: var(--gohr-text-soft);
}

/* A visible image covers the placeholder, so hide it underneath. */
.gohr-avatar__img:not(.d-none) + .gohr-avatar__placeholder {
  display: none;
}

.gohr-avatar__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  min-width: 0;
}

/* The label is the visible control; the input itself stays reachable but unstyled. */
.gohr-avatar__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gohr-avatar__body .btn {
  cursor: pointer;
}

.gohr-avatar__input:focus-visible + .gohr-field__hint,
.gohr-avatar__input:focus-visible ~ .gohr-field__hint {
  outline: none;
}

/* The rich-text editor replaces this textarea; give it a sensible fallback height. */
.gohr-richtext {
  min-height: 110px;
}

/* ------------------------------------------------------------------
   Appearance switch

   Three options, all visible, so the current choice reads at a glance
   rather than having to be inferred from the icon a two-state toggle
   happens to be showing. The thumb is positioned from
   [data-theme-active] on the track, so the script sets one attribute
   and the movement is a CSS consequence.
   ------------------------------------------------------------------ */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .theme-switch {
  background: rgba(255, 255, 255, 0.08);
}

.theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gohr-on-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease;
}

[data-theme="dark"] .theme-switch__thumb {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.theme-switch[data-theme-active="dark"] .theme-switch__thumb {
  transform: translateX(32px);
}

.theme-switch[data-theme-active="system"] .theme-switch__thumb {
  transform: translateX(64px);
}

/* RTL runs the other way, so the thumb travels the other way with it. */
[dir="rtl"] .theme-switch__thumb {
  left: auto;
  right: 3px;
}

[dir="rtl"] .theme-switch[data-theme-active="dark"] .theme-switch__thumb {
  transform: translateX(-32px);
}

[dir="rtl"] .theme-switch[data-theme-active="system"] .theme-switch__thumb {
  transform: translateX(-64px);
}

.theme-switch__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
}

.theme-switch__option[aria-checked="true"] {
  opacity: 1;
}

.theme-switch__option:disabled {
  cursor: progress;
}

.theme-switch__option:focus-visible {
  outline: 2px solid var(--gohr-accent);
  outline-offset: 2px;
}

.theme-switch__option .link-icon {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* The thumb slides; that is the whole affordance. Honour a request for less. */
@media (prefers-reduced-motion: reduce) {
  .theme-switch__thumb {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Light-only template rules, neutralised for dark

   style.css and style_dark.css were whole alternative stylesheets, so
   a rule present in only one of them simply did not exist in the other
   theme. Now that style.css is the single base and dark is an override
   layer, the 23 rules that existed only in the light copy would leak
   into dark mode. These are the ones that name a colour.

   Scoped with :where() so they keep the specificity of the rule they
   answer and win on source order, exactly like the derived layer.
   ------------------------------------------------------------------ */
:where(html[data-theme="dark"]) tr:nth-child(even),
:where(html[data-theme="dark"]) .support-main tr:nth-child(even) {
  background-color: var(--gohr-surface-muted);
}

:where(html[data-theme="dark"]) .summary-card {
  border-color: var(--gohr-border);
  background: var(--gohr-surface-raised);
}

:where(html[data-theme="dark"]) .summary-card p {
  border-bottom-color: var(--gohr-border);
}

:where(html[data-theme="dark"]) .summary-card strong {
  color: var(--gohr-text);
}

:where(html[data-theme="dark"]) .summary-header {
  color: var(--gohr-info);
}

:where(html[data-theme="dark"]) .template-main .btn-group,
:where(html[data-theme="dark"]) .approved-list #sortable li {
  border-color: var(--gohr-border);
}

:where(html[data-theme="dark"]) .tox.tox-tinymce .tox-edit-area__iframe {
  background-color: var(--gohr-input);
}

:where(html[data-theme="dark"]) .fc-daygrid.fc-dayGridMonth-view.fc-view,
:where(html[data-theme="dark"]) .fc-header-toolbar.fc-toolbar {
  background: var(--gohr-surface);
  border-color: var(--gohr-border);
  box-shadow: var(--gohr-shadow-sm);
}

:where(html[data-theme="dark"]) table.fc-col-header,
:where(html[data-theme="dark"]) table.fc-scrollgrid-sync-table tbody td {
  background: var(--gohr-surface);
}

/* ===========================================================================
   Folded rail, RTL: close the dead band between content and sidebar.

   rtl_style.css pins `.main-wrapper .page-wrapper` to `margin-right: 280px`
   (the expanded sidebar width) and only ever corrects the navbar when the rail
   folds — there is no folded counterpart for the wrapper itself. So in Arabic
   and Persian, folding the sidebar shrank it 280px -> 70px while the content
   kept its 280px inset, leaving a 210px empty strip between the two.

   rtl_style.css is loaded after this file and only for ar/fa, so the override
   has to out-specify it rather than rely on order. Scoped to html[dir="rtl"]
   so the LTR rule in style.css (margin-left: 70px) is left alone.

   The margin stays at 70px while the rail is hovered open
   (`open-sidebar-folded`): that state overlays the content by design and must
   not reflow the page under the pointer.
   =========================================================================== */
@media (min-width: 992px) {
  html[dir="rtl"] body.admin-shell.sidebar-folded .main-wrapper .page-wrapper {
    margin-right: 70px;
    width: calc(100% - 70px);
  }
}

/* ===========================================================================
   Platform console shell
   ---------------------------------------------------------------------------
   The operator's chrome: a dark top bar over content that keeps whatever
   light/dark preference the reader chose. The bar carries data-theme="dark"
   on itself, so everything below reads the dark tokens through inheritance
   and the shared dropdowns need no inverse variant.

   Nothing here reads --gohr-tenant or --primary-color: company branding does
   not reach the platform shell, and none of it survives sign-out.
   =========================================================================== */

.gohr-platform {
  background: var(--gohr-canvas);
  min-height: 100vh;
}

.gohr-platform-bar {
  background: var(--gohr-surface);
  border-bottom: 1px solid var(--gohr-border);
  color: var(--gohr-text);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.gohr-platform-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 60px;
}

.gohr-platform-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--gohr-text);
  text-decoration: none;
  white-space: nowrap;
}

.gohr-platform-bar__brand:hover { color: var(--gohr-text); }

.gohr-platform-bar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  overflow-x: auto;
}

.gohr-platform-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--gohr-radius-sm);
  color: var(--gohr-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.gohr-platform-bar__link:hover {
  background: var(--gohr-surface-raised);
  color: var(--gohr-text);
}

.gohr-platform-bar__link.is-active {
  background: var(--gohr-surface-raised);
  color: var(--gohr-text);
  font-weight: 600;
}

.gohr-platform-bar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}

.gohr-platform-bar__actor {
  color: var(--gohr-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.gohr-platform-bar__signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-radius-sm);
  color: var(--gohr-text-muted);
  padding: 6px 12px;
}

.gohr-platform-bar__signout:hover {
  background: var(--gohr-surface-raised);
  color: var(--gohr-text);
}

.gohr-platform__content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

/* The bar is one row of links; below the fold of a phone it wraps rather
   than pushing the sign-out button off the edge. */
@media (max-width: 767.98px) {
  .gohr-platform-bar__inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .gohr-platform-bar__nav { order: 3; width: 100%; }
  .gohr-platform__content { padding: 16px; }
}

/* ---------------------------------------------------------------------------
   Company hub: a definition list of facts, and a derived setup checklist.
   Both are read-only presentations of server state, so they carry no
   interactive styling of their own.
   --------------------------------------------------------------------------- */

.gohr-deflist {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 10px 24px;
  margin: 0;
}

.gohr-deflist dt {
  color: var(--gohr-text-muted);
  font-weight: 500;
}

.gohr-deflist dd {
  margin: 0;
  color: var(--gohr-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.gohr-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gohr-checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* One column on a phone: a 140px label column beside a value leaves neither
   enough room to read. */
@media (max-width: 575.98px) {
  .gohr-deflist { grid-template-columns: 1fr; gap: 4px 0; }
  .gohr-deflist dd { margin-block-end: 12px; }
}

/* ===========================================================================
   Sub-menu marker, icon sizing, and the row actions menu.
   =========================================================================== */

/* The template drew each sub-menu item with FontAwesome's \f192 — dot-circle-o,
   which is literally the radio-button glyph — plus border-radius: 50%. A list of
   pages therefore read as a set of radio options, as if one had to be chosen.
   Replaced with a plain dot drawn in CSS: muted at rest, brand-coloured and a
   touch larger on hover and on the active page. */
.admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link::before {
  content: "" !important;
  font-family: inherit !important;
  font-size: 0 !important;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}

.admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link:hover::before {
  opacity: .7;
  transform: translateY(-50%) scale(1.25);
}

.admin-shell .sidebar .sidebar-body .nav.sub-menu .nav-item > .nav-link.active::before {
  background: var(--gohr-link);
  opacity: 1;
  transform: translateY(-50%) scale(1.5);
}

/* Feather emits a 24px square, which the template then left unsized inside a
   32px control, so the glyph filled the button on some screens and looked lost
   on others. Sizing it here makes every icon in a button the same, and large
   enough to read: the action icons in a table row were the complaint. */
.admin-shell .gohr-btn svg,
.admin-shell .gohr-btn .link-icon {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  stroke-width: 2;
}

.admin-shell .gohr-btn--sm svg,
.admin-shell .gohr-btn--sm .link-icon {
  inline-size: 17px;
  block-size: 17px;
}

/* Row actions collapse into one button. Six icons side by side already crowded
   the cell; a module with ten would not fit at all, and an icon with only a
   tooltip makes a person hover each one to find the right action. */
.gohr-actions { position: relative; display: inline-flex; }

/* Fixed, not absolute, and placed by gohr-kit.js. Both table wrappers set
   `overflow-x: auto` (.gohr-table-wrap here and .table-responsive at :1017) and
   the overflow spec computes the cross axis to `auto` the moment one axis is
   not `visible` — so an absolutely positioned menu was clipped by the wrapper
   on the rows nearest the bottom, which is most of the rows that matter on a
   long list. A fixed element is not clipped by an ancestor's overflow, and
   nothing on the path (.admin-shell, .main-wrapper, .page-wrapper, .card) sets
   transform, filter or contain, so nothing establishes a containing block that
   would pull it back in. Do not add one.

   `top`/`left` are left to the script: a fixed box cannot be positioned off its
   toggle in CSS. It also flips above the row and clamps to the viewport there. */
.gohr-actions__menu {
  position: fixed;
  z-index: 1080;
  min-inline-size: 208px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-r-card, 14px);
  box-shadow: var(--gohr-shadow-pop, 0 12px 32px rgba(37, 40, 83, .14));
  text-align: start;
}

.gohr-actions.is-open .gohr-actions__menu { display: flex; }

/* Inside the menu each action is a full-width row with its label showing, so
   the icon stops being the only clue to what it does. */
.gohr-actions__menu .gohr-btn {
  justify-content: flex-start;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 36px;
  padding-inline: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
  color: var(--gohr-body-text, inherit);
}

.gohr-actions__menu .gohr-btn:hover,
.gohr-actions__menu .gohr-btn:focus-visible {
  background: var(--gohr-brand-tint, rgba(86, 92, 184, .10));
}

/* `.btn-danger` is what <x-ui.button variant="danger"> actually emits —
   ui/button.blade.php spells a variant `gohr-btn--x` only for ghost and cta.
   Matching just the kit spelling meant this rule never fired, and
   `.gohr-actions__menu .gohr-btn` above (same specificity, earlier) painted
   every delete row in body-text colour. Both spellings are matched now. */
.gohr-actions__menu .gohr-btn--danger,
.gohr-actions__menu .btn-danger,
.gohr-actions__menu .gohr-btn--danger:hover,
.gohr-actions__menu .btn-danger:hover {
  color: var(--bs-danger, #B02A37);
}

.gohr-actions__menu .gohr-btn--danger:hover,
.gohr-actions__menu .btn-danger:hover {
  background: rgba(176, 42, 55, .10);
}

.gohr-actions__sep {
  block-size: 1px;
  margin: 4px 6px;
  background: var(--gohr-border);
}