/* =============================================================================
   Go-HR component kit
   The Jisr interaction patterns, wearing the Go-HR mobile palette.

   Pairs with resources/views/components/ui/*.blade.php
   Reference gallery: public/gohr-ui-kit.html
   Spec: docs/design/redesign-implementation-plan.md §3

   RULES
   - No hex literals. Every colour is a token from gohr-tokens.css.
   - Logical properties only (inset-inline-*, margin-block-*, text-align:start)
     so RTL needs no mirror stylesheet.
   - No !important. Scope under .admin-shell where the vendor theme fights back.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. Box model
   The kit sizes every control with padding included. Bootstrap's reboot sets
   this globally in the app, but the kit must not depend on the vendor theme —
   without it, .gohr-input overflows its flex parent and covers the Filters
   button in the toolbar.
   --------------------------------------------------------------------------- */
[class^="gohr-"],
[class*=" gohr-"],
[class^="gohr-"] *,
[class*=" gohr-"] * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   1. Buttons
   --------------------------------------------------------------------------- */
.gohr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gohr-s2);
  height: var(--gohr-h-md);
  padding-inline: var(--gohr-s4);
  border: 1px solid transparent;
  border-radius: var(--gohr-r-control);
  font-family: var(--gohr-font);
  font-size: var(--gohr-fs-row);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--gohr-dur) var(--gohr-ease),
              border-color var(--gohr-dur) var(--gohr-ease),
              color var(--gohr-dur) var(--gohr-ease);
}

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

.gohr-btn--sm { height: var(--gohr-h-sm); padding-inline: var(--gohr-s3); font-size: var(--gohr-fs-table); }
.gohr-btn--lg { height: var(--gohr-h-lg); padding-inline: var(--gohr-s5); }
.gohr-btn--block { width: 100%; }

.gohr-btn--primary {
  background: var(--gohr-btn-primary-bg);
  color: var(--gohr-btn-primary-fg);
  border-color: var(--gohr-btn-primary-bg);
}
.gohr-btn--primary:hover,
.gohr-btn--primary:focus {
  background: var(--gohr-btn-primary-bg-hover);
  border-color: var(--gohr-btn-primary-bg-hover);
  color: var(--gohr-btn-primary-fg);
}

.gohr-btn--cta {
  background-image: var(--gohr-brand-cta);
  color: var(--gohr-on-brand);
  border-color: transparent;
  box-shadow: var(--gohr-shadow-cta);
}

.gohr-btn--secondary {
  background: var(--gohr-btn-secondary-bg);
  color: var(--gohr-btn-secondary-fg);
  border-color: var(--gohr-btn-secondary-border);
}
.gohr-btn--secondary:hover { background: var(--gohr-surface-sunken); color: var(--gohr-text); }

.gohr-btn--ghost { background: transparent; color: var(--gohr-btn-ghost-fg); }
.gohr-btn--ghost:hover { background: var(--gohr-btn-ghost-bg-hover); color: var(--gohr-text); }

.gohr-btn--danger { background: var(--gohr-btn-danger-bg); color: var(--gohr-btn-danger-fg); }
.gohr-btn--danger:hover { background: var(--gohr-danger); color: var(--gohr-on-brand); }

.gohr-btn[disabled],
.gohr-btn--disabled { opacity: .5; pointer-events: none; }

.gohr-btn--icon {
  width: var(--gohr-h-md);
  height: var(--gohr-h-md);
  padding: 0;
  background: transparent;
  color: var(--gohr-text-muted);
}
.gohr-btn--icon:hover { background: var(--gohr-surface-sunken); color: var(--gohr-text); }
.gohr-btn--icon.gohr-btn--sm { width: var(--gohr-h-sm); height: var(--gohr-h-sm); }

/* ---------------------------------------------------------------------------
   2. Page header
   --------------------------------------------------------------------------- */
.gohr-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gohr-s4);
  flex-wrap: wrap;
  margin-block-end: var(--gohr-s5);
}
.gohr-page-header__text { min-width: 0; }
.gohr-page-header__title {
  margin: 0;
  font-size: var(--gohr-fs-title);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gohr-text);
}
.gohr-page-header__subtitle {
  margin-block-start: var(--gohr-s1);
  font-size: var(--gohr-fs-caption);
  color: var(--gohr-text-muted);
}
.gohr-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gohr-s2);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   3. Card
   --------------------------------------------------------------------------- */
.gohr-card {
  background: var(--gohr-card-bg);
  border: 1px solid var(--gohr-card-border);
  border-radius: var(--gohr-r-card);
  padding: var(--gohr-s5);
}
.gohr-card + .gohr-card { margin-block-start: var(--gohr-s4); }
.gohr-card--flush { padding: 0; overflow: hidden; }
.gohr-card--raised { box-shadow: var(--gohr-shadow); border-color: transparent; }

.gohr-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gohr-s3);
  margin-block-end: var(--gohr-s4);
}
.gohr-card__title {
  margin: 0;
  font-size: var(--gohr-fs-section);
  font-weight: 700;
  color: var(--gohr-text);
}
.gohr-card__hint { font-size: var(--gohr-fs-caption); color: var(--gohr-text-muted); }

/* Hero surface, mirroring the mobile app's indigo panels. */
.gohr-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--gohr-r-panel);
  padding: var(--gohr-s6);
  background-image: var(--gohr-hero);
  color: var(--gohr-on-brand);
}
.gohr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gohr-hero-glow);
  pointer-events: none;
}
.gohr-hero > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   4. Stat card that doubles as a list filter
   The highest-value pattern borrowed from Jisr: the counter IS the filter.
   Markup wraps a real checkbox/radio bound to the screen's existing GET form.
   --------------------------------------------------------------------------- */
/* Wraps, and the cards share the width. They used to be fixed at 176px in a
   horizontally scrolling row: six of them need 1116px, the row gets 1028px,
   so the sixth was clipped — at -22px, off the left edge of the screen in
   RTL — behind a scrollbar nobody looks for. A filter you cannot see is not a
   filter. Row of six on a wide screen, two or three on a narrow one. */
.gohr-statrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gohr-s3);
  margin-block-end: var(--gohr-s4);
}
.gohr-statcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gohr-s1);
  flex: 1 1 140px;
  /* Capped so a card left alone on the second row does not stretch to the full
     width and stop reading as one of a set - flex:1 grows a lone item to fill
     its line. Six fit on one row at 1440; below that they wrap in pairs. */
  max-inline-size: 260px;
  min-width: 0;
  padding: var(--gohr-s4);
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-r-tile);
  cursor: pointer;
  transition: border-color var(--gohr-dur) var(--gohr-ease),
              box-shadow var(--gohr-dur) var(--gohr-ease),
              background-color var(--gohr-dur) var(--gohr-ease);
}
.gohr-statcard:hover { border-color: var(--gohr-border-strong); }

/* Selected reads as a tinted, outlined tile rather than a 2px ring of
   --gohr-brand-ink (#252853), which at that weight looked like a black box
   drawn around one card. The border stays put so the tile does not shift. */
.gohr-statcard:has(input:checked) {
  background: color-mix(in srgb, var(--gohr-accent) 8%, var(--gohr-surface));
  border-color: var(--gohr-accent);
  box-shadow: inset 0 0 0 1px var(--gohr-accent);
}
.gohr-statcard:has(input:checked) .gohr-statcard__value,
.gohr-statcard:has(input:checked) .gohr-statcard__label { color: var(--gohr-accent); }
.gohr-statcard:has(input:focus-visible) { box-shadow: var(--gohr-focus); }

/* Clipped, not hidden: the whole tile is the control and carries the selected
   state, so a native radio sitting in the corner was duplicate chrome — six
   loose circles across the row. Clipping keeps it focusable and keeps the
   label/input pairing intact for a screen reader, which display:none would
   both destroy. */
.gohr-statcard__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gohr-statcard__value {
  font-family: var(--gohr-font-num);
  font-size: var(--gohr-fs-metric);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  color: var(--gohr-text);
}
.gohr-statcard__label { font-size: 12.5px; color: var(--gohr-text-muted); }
.gohr-statcard__meta { font-size: var(--gohr-fs-caption); color: var(--gohr-text-soft); }

/* ---------------------------------------------------------------------------
   5. Toolbar — saved view · columns · search · active filters · clear
   --------------------------------------------------------------------------- */
.gohr-toolbar {
  display: flex;
  align-items: center;
  gap: var(--gohr-s2);
  flex-wrap: wrap;
  margin-block-end: var(--gohr-s3);
}
.gohr-toolbar__spacer { flex: 1 1 auto; }
.gohr-toolbar__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;          /* without this the input refuses to shrink and
                            overlaps the Filters / Clear controls */
  max-width: 420px;
}
.gohr-toolbar__search .gohr-input { padding-inline-start: var(--gohr-s8); }
.gohr-toolbar__search-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--gohr-s3);
  transform: translateY(-50%);
  color: var(--gohr-text-soft);
  pointer-events: none;
  display: inline-flex;
}
.gohr-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  margin-inline-start: var(--gohr-s1);
  border-radius: var(--gohr-r-chip);
  background: var(--gohr-brand-ink);
  color: var(--gohr-on-brand);
  font-size: 10px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   6. Inputs
   --------------------------------------------------------------------------- */
.gohr-input,
.gohr-select {
  width: 100%;
  height: var(--gohr-h-md);
  padding-inline: var(--gohr-s3);
  background: var(--gohr-input-bg);
  color: var(--gohr-input-fg);
  border: 1px solid var(--gohr-input-border);
  border-radius: var(--gohr-r-control);
  font-family: var(--gohr-font-body);
  font-size: var(--gohr-fs-body);
  transition: border-color var(--gohr-dur) var(--gohr-ease),
              box-shadow var(--gohr-dur) var(--gohr-ease);
}
.gohr-input::placeholder { color: var(--gohr-input-placeholder); }
.gohr-input:focus,
.gohr-select:focus {
  outline: none;
  border-color: var(--gohr-input-border-focus);
  box-shadow: var(--gohr-focus);
}
.gohr-field { display: flex; flex-direction: column; gap: 6px; }
.gohr-field__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gohr-text-muted);
}
.gohr-field__value { font-size: var(--gohr-fs-row); font-weight: 500; color: var(--gohr-text); }

/* ---------------------------------------------------------------------------
   7. Table
   --------------------------------------------------------------------------- */
.gohr-table-wrap {
  position: relative;
  overflow-x: auto;
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-r-card);
}
.gohr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--gohr-fs-body);
}
.gohr-table th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  height: var(--gohr-thead);
  padding-inline: var(--gohr-s4);
  background: var(--gohr-table-head-bg);
  color: var(--gohr-table-head-fg);
  font-family: var(--gohr-font);
  font-size: var(--gohr-fs-table);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
}
.gohr-table td {
  height: var(--gohr-row);
  padding-inline: var(--gohr-s4);
  border-block-start: 1px solid var(--gohr-table-line);
  color: var(--gohr-text);
  vertical-align: middle;
}
.gohr-table tbody tr { transition: background-color var(--gohr-dur) var(--gohr-ease); }
.gohr-table tbody tr:hover td { background: var(--gohr-table-row-bg-hover); }
.gohr-table__check { width: 44px; }
.gohr-table__actions { width: 56px; text-align: end; }
.gohr-table__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gohr-s3);
  flex-wrap: wrap;
  padding: var(--gohr-s3) var(--gohr-s4);
  border-block-start: 1px solid var(--gohr-border);
  background: var(--gohr-surface);
  font-size: var(--gohr-fs-caption);
  color: var(--gohr-text-muted);
}
.gohr-table__foot--sticky {
  position: sticky;
  inset-block-end: 0;
  box-shadow: var(--gohr-table-foot-shadow);
}

/* Identity cell: avatar + name + secondary line, one column instead of two. */
.gohr-identity { display: flex; align-items: center; gap: var(--gohr-s3); min-width: 0; }
.gohr-identity__text { min-width: 0; }
.gohr-identity__name {
  font-size: var(--gohr-fs-row);
  font-weight: 600;
  color: var(--gohr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gohr-identity__meta {
  font-family: var(--gohr-font-num);
  font-size: var(--gohr-fs-caption);
  color: var(--gohr-text-soft);
  unicode-bidi: plaintext;
}

/* ---------------------------------------------------------------------------
   8. Avatar
   --------------------------------------------------------------------------- */
.gohr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--gohr-r-chip);
  background: var(--gohr-brand-tint);
  color: var(--gohr-brand-ink);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-transform: uppercase;
}
.gohr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gohr-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.gohr-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.gohr-avatar--xl { width: 80px; height: 80px; font-size: 24px; }

/* ---------------------------------------------------------------------------
   9. Status chip
   --------------------------------------------------------------------------- */
.gohr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--gohr-r-chip);
  font-family: var(--gohr-font);
  font-size: var(--gohr-fs-chip);
  font-weight: 700;
  white-space: nowrap;
  background: var(--gohr-chip-neutral-bg);
  color: var(--gohr-chip-neutral-fg);
}
.gohr-chip--success { background: var(--gohr-success-bg); color: var(--gohr-success); }
.gohr-chip--warning { background: var(--gohr-warning-bg); color: var(--gohr-warning); }
.gohr-chip--danger  { background: var(--gohr-danger-bg);  color: var(--gohr-danger); }
.gohr-chip--info    { background: var(--gohr-info-bg);    color: var(--gohr-info); }
.gohr-chip--brand   { background: var(--gohr-brand-tint); color: var(--gohr-brand-ink); }
.gohr-chip--solid   { background: var(--gohr-brand-ink);  color: var(--gohr-on-brand); }
.gohr-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* The one place the orange brand signal is allowed: live / unread. */
.gohr-dot-live {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gohr-signal);
}

/* ---------------------------------------------------------------------------
   10. Tabs (underline) — two tiers allowed: module tabs, then status tabs
   --------------------------------------------------------------------------- */
.gohr-tabs {
  display: flex;
  align-items: center;
  gap: var(--gohr-s5);
  border-block-end: 1px solid var(--gohr-border);
  margin-block-end: var(--gohr-s4);
  overflow-x: auto;
  scrollbar-width: none;
}
.gohr-tabs::-webkit-scrollbar { display: none; }
.gohr-tabs__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: var(--gohr-s3);
  border: 0;
  background: none;
  color: var(--gohr-text-muted);
  font-family: var(--gohr-font);
  font-size: var(--gohr-fs-row);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.gohr-tabs__item:hover { color: var(--gohr-text); }
.gohr-tabs__item--active { color: var(--gohr-text); font-weight: 700; }
.gohr-tabs__item--active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--gohr-brand-ink);
}
.gohr-tabs__count {
  font-family: var(--gohr-font-num);
  font-size: var(--gohr-fs-caption);
  color: var(--gohr-text-soft);
}

/* ---------------------------------------------------------------------------
   11. Segmented control / work queues
   --------------------------------------------------------------------------- */
.gohr-segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--gohr-s1);
  padding: var(--gohr-s1);
  background: var(--gohr-surface-sunken);
  border-radius: var(--gohr-r-chip);
}
.gohr-segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--gohr-h-sm);
  padding-inline: var(--gohr-s3);
  border: 0;
  border-radius: var(--gohr-r-chip);
  background: transparent;
  color: var(--gohr-text-muted);
  font-family: var(--gohr-font);
  font-size: var(--gohr-fs-table);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gohr-dur) var(--gohr-ease),
              color var(--gohr-dur) var(--gohr-ease);
}
.gohr-segmented__item:hover { color: var(--gohr-text); }
.gohr-segmented__item--active {
  background: var(--gohr-surface);
  color: var(--gohr-text);
  box-shadow: var(--gohr-shadow-sm);
}
.gohr-segmented--ink .gohr-segmented__item--active {
  background: var(--gohr-brand-ink);
  color: var(--gohr-on-brand);
  box-shadow: none;
}
.gohr-segmented__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--gohr-r-chip);
  background: var(--gohr-neutral-bg);
  font-family: var(--gohr-font-num);
  font-size: 11px;
}
.gohr-segmented__item--active .gohr-segmented__badge {
  background: rgb(255 255 255 / .18);
  color: inherit;
}

/* ---------------------------------------------------------------------------
   12. Empty state
   --------------------------------------------------------------------------- */
.gohr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gohr-s3);
  padding: var(--gohr-s8) var(--gohr-s5);
  text-align: center;
}
.gohr-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--gohr-r-chip);
  background: var(--gohr-icon-chip);
  color: var(--gohr-text-soft);
}
.gohr-empty__title { font-size: var(--gohr-fs-section); font-weight: 700; color: var(--gohr-text); }
.gohr-empty__hint { font-size: var(--gohr-fs-caption); color: var(--gohr-text-muted); max-width: 42ch; }

/* ---------------------------------------------------------------------------
   13. Drawer (filters, quick view)
   --------------------------------------------------------------------------- */
.gohr-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  background: var(--gohr-surface);
  border-inline-start: 1px solid var(--gohr-border);
  box-shadow: var(--gohr-shadow-pop);
  transform: translateX(100%);
  transition: transform 240ms var(--gohr-ease);
}
[dir="rtl"] .gohr-drawer { transform: translateX(-100%); }
.gohr-drawer[data-open="true"],
[dir="rtl"] .gohr-drawer[data-open="true"] { transform: translateX(0); }
.gohr-drawer__head,
.gohr-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gohr-s3);
  padding: var(--gohr-s4) var(--gohr-s5);
}
.gohr-drawer__head { border-block-end: 1px solid var(--gohr-border); }
.gohr-drawer__foot { border-block-start: 1px solid var(--gohr-border); }
.gohr-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--gohr-s5); }
.gohr-drawer__title { font-size: var(--gohr-fs-section); font-weight: 700; }
.gohr-scrim {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgb(23 24 38 / .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--gohr-ease), visibility 240ms var(--gohr-ease);
}
.gohr-scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* Sticky bulk-action bar, revealed when rows are selected. */
.gohr-bulkbar {
  position: sticky;
  inset-block-end: var(--gohr-s4);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--gohr-s3);
  width: fit-content;
  margin-inline: auto;
  padding: var(--gohr-s2) var(--gohr-s4);
  background: var(--gohr-brand-ink);
  color: var(--gohr-on-brand);
  border-radius: var(--gohr-r-chip);
  box-shadow: var(--gohr-shadow-pop);
  font-size: var(--gohr-fs-table);
}

/* ---------------------------------------------------------------------------
   14. Pagination
   --------------------------------------------------------------------------- */
.gohr-pagination { display: inline-flex; align-items: center; gap: var(--gohr-s1); }
.gohr-pagination a,
.gohr-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--gohr-h-sm);
  height: var(--gohr-h-sm);
  padding-inline: var(--gohr-s2);
  border-radius: var(--gohr-r-control);
  color: var(--gohr-text-muted);
  font-family: var(--gohr-font-num);
  font-size: var(--gohr-fs-table);
  text-decoration: none;
}
.gohr-pagination a:hover { background: var(--gohr-surface-sunken); color: var(--gohr-text); }
.gohr-pagination .active,
.gohr-pagination [aria-current="page"] {
  background: var(--gohr-brand-ink);
  color: var(--gohr-on-brand);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   15. Icons + layout helpers
   --------------------------------------------------------------------------- */
.gohr-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.gohr-icon svg { width: 100%; height: 100%; display: block; }
.gohr-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.gohr-icon--sm { width: 16px; height: 16px; }
.gohr-icon--lg { width: 24px; height: 24px; }
/* Directional glyphs mirror in RTL; logos, clocks and marks must not. */
[dir="rtl"] .gohr-icon--dir svg { transform: scaleX(-1); }
/* The icon set has no dedicated close glyph — a rotated plus is the × . */
.gohr-icon--close svg { transform: rotate(45deg); }

.gohr-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--gohr-r-tile);
  background: var(--gohr-brand-tint);
  color: var(--gohr-brand-ink);
}

.gohr-stack { display: flex; flex-direction: column; gap: var(--gohr-s4); }
.gohr-row { display: flex; align-items: center; gap: var(--gohr-s3); }
.gohr-row--between { justify-content: space-between; }
.gohr-grid-2 { display: grid; gap: var(--gohr-s4); grid-template-columns: 1fr; }
.gohr-page { display: grid; gap: var(--gohr-s5); grid-template-columns: 1fr; }

@media (min-width: 992px) {
  .gohr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gohr-page--sidebar { grid-template-columns: 320px minmax(0, 1fr); }
  .gohr-page--dashboard { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

@media (max-width: 767.98px) {
  .gohr-page-header { flex-direction: column; align-items: stretch; }
  .gohr-page-header__actions .gohr-btn { flex: 1 1 auto; }
  .gohr-drawer { width: 100vw; }
}

/* ---------------------------------------------------------------------------
   16. Brand marks
   Assets: public/assets/brand/ — from GoHR-Release-Package/01-flutter-drop-in/brand
   Wordmark when the sidebar is expanded, square mark when it is folded to a
   rail; a light/dark pair of each. Pure CSS — no JS picks the file.
   --------------------------------------------------------------------------- */

/* The stock brand tile is a white plate, added so any tenant logo stayed legible.
   We ship artwork per theme now, so the plate only hid the white wordmark in dark
   mode. The vendor rules being overridden use !important, so two of these must
   too — the only !important in the kit. */
.admin-shell .sidebar .sidebar-header .sidebar-brand {
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
  flex: 0 1 auto;
  justify-content: flex-start;
}
[dir="rtl"] .admin-shell .sidebar .sidebar-header .sidebar-brand { justify-content: flex-end; }

.admin-shell .sidebar .sidebar-header .sidebar-brand .gohr-brand {
  display: none;
  width: auto !important;
  max-width: none;
  height: 30px !important;
  object-fit: contain;
}

/* One rule decides which of the four assets is visible, so theme and fold state
   compete at the same specificity instead of one silently winning. */
html:not([data-theme="dark"]) body:not(.sidebar-folded) .sidebar-brand .gohr-brand--full.gohr-brand--light,
html[data-theme="dark"] body:not(.sidebar-folded) .sidebar-brand .gohr-brand--full.gohr-brand--dark,
html:not([data-theme="dark"]) body.sidebar-folded.open-sidebar-folded .sidebar-brand .gohr-brand--full.gohr-brand--light,
html[data-theme="dark"] body.sidebar-folded.open-sidebar-folded .sidebar-brand .gohr-brand--full.gohr-brand--dark,
html:not([data-theme="dark"]) body.sidebar-folded:not(.open-sidebar-folded) .sidebar-brand .gohr-brand--mark.gohr-brand--light,
html[data-theme="dark"] body.sidebar-folded:not(.open-sidebar-folded) .sidebar-brand .gohr-brand--mark.gohr-brand--dark {
  display: block;
}

/* The theme hides the brand outright in the folded rail (display:none, then
   opacity/visibility/width:0). Bring it back — the rail has room for the mark. */
@media (min-width: 992px) {
  body.admin-shell.sidebar-folded .sidebar .sidebar-header,
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-header {
    padding-inline: 12px;
    justify-content: space-between;
  }
  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;
    opacity: 1;
    visibility: visible;
    width: auto;
    flex: 0 0 auto;
  }
  body.admin-shell.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-header .sidebar-toggler {
    display: none;
  }
}

/* Sign-in panel mark: the brand kit's white glyph on the indigo hero. */
.auth-login-aside__mark--brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  box-shadow: none;
}
.auth-login-aside__mark--brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   17. Folded sidebar opens on hover
   The theme already styles `open-sidebar-folded` (8 rules in style.css, 12 in
   gohr-modern.css) but nothing ever added the class — template.js only removes
   it. gohr-kit.js adds it on hover and on keyboard focus, which is the Jisr
   behaviour: a rail that expands under the pointer, collapsing when it leaves.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body.admin-shell.sidebar-folded .sidebar {
    transition: width 200ms var(--gohr-ease);
  }
  body.admin-shell.sidebar-folded.open-sidebar-folded .sidebar {
    box-shadow: var(--gohr-shadow-pop);
    z-index: 1040;
  }

  /* Opening on hover reveals labels; it must never move an item. The theme
     hides sub-menus in the rail (style.css) but shows them again the moment
     the rail opens, so the section the current page belongs to re-inflated
     and shoved everything below it down by its full height. Keep them
     collapsed: clicking a parent unfolds the sidebar outright (template.js),
     which is the only way a sub-menu is ever meant to appear from the rail. */
  body.admin-shell.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body .nav.sub-menu {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   18. Bootstrap semantic remap
   The purchased theme hardcodes its own palette (#05a34a appears 27 times in
   style.css) and never routes semantic colour through a variable, so the app
   showed Bootstrap greens and ambers next to the Go-HR indigo. This section is
   what makes 603 views read as one system without editing any of them.

   The rule, taken from the Jisr teardown: exactly one solid filled button per
   screen — the ink primary — and colour elsewhere only where it carries status.
   Evidence for demoting .btn-success: 45 of its 85 uses in this codebase are
   the toolbar "Filter" button, which is chrome, not an outcome. To bring the
   green slabs back, delete the .btn-success block below.
   --------------------------------------------------------------------------- */

/* Anything still reading Bootstrap's variables gets our hues. */
:root {
  --bs-primary: var(--gohr-brand-ink);
  --bs-secondary: var(--gohr-neutral);
  --bs-success: var(--gohr-success);
  --bs-danger: var(--gohr-danger);
  --bs-warning: var(--gohr-warning);
  --bs-info: var(--gohr-info);
  --bs-link-color: var(--gohr-link);
  --bs-body-color: var(--gohr-text);
  --bs-body-bg: var(--gohr-canvas);
  --bs-border-color: var(--gohr-border-strong);
}

/* --- buttons -------------------------------------------------------------- */
.admin-shell .btn {
  border-radius: var(--gohr-r-control);
  font-family: var(--gohr-font);
  font-weight: 600;
  transition: background-color var(--gohr-dur) var(--gohr-ease),
              border-color var(--gohr-dur) var(--gohr-ease),
              color var(--gohr-dur) var(--gohr-ease);
}
.admin-shell .btn:focus-visible { box-shadow: var(--gohr-focus); outline: none; }

/* The one solid button. */
.admin-shell .btn-primary,
.admin-shell .btn-dark {
  background-color: var(--gohr-brand-ink);
  border-color: var(--gohr-brand-ink);
  color: var(--gohr-on-brand);
}
.admin-shell .btn-primary:hover,
.admin-shell .btn-primary:focus,
.admin-shell .btn-dark:hover {
  background-color: var(--gohr-brand-deep);
  border-color: var(--gohr-brand-deep);
  color: var(--gohr-on-brand);
}

/* Neutral actions: Filter, Export, Reset, Cancel, Back — chrome, not outcomes. */
.admin-shell .btn-success,
.admin-shell .btn-secondary,
.admin-shell .btn-info,
.admin-shell .btn-light {
  background-color: var(--gohr-surface);
  border: 1px solid var(--gohr-border-strong);
  color: var(--gohr-text);
}
.admin-shell .btn-success:hover,
.admin-shell .btn-secondary:hover,
.admin-shell .btn-info:hover,
.admin-shell .btn-light:hover,
.admin-shell .btn-success:focus,
.admin-shell .btn-secondary:focus,
.admin-shell .btn-info:focus {
  background-color: var(--gohr-surface-sunken);
  border-color: var(--gohr-border-strong);
  color: var(--gohr-text);
}

/* Risk stays visible, but tinted rather than a red slab. */
.admin-shell .btn-danger {
  background-color: var(--gohr-danger-bg);
  border-color: transparent;
  color: var(--gohr-danger);
}
.admin-shell .btn-danger:hover,
.admin-shell .btn-danger:focus {
  background-color: var(--gohr-danger);
  border-color: var(--gohr-danger);
  color: var(--gohr-on-brand);
}

.admin-shell .btn-warning {
  background-color: var(--gohr-warning-bg);
  border-color: transparent;
  color: var(--gohr-warning);
}
.admin-shell .btn-warning:hover { background-color: var(--gohr-warning); color: var(--gohr-on-brand); }

/* Outline variants keep their outline, in our hues. */
.admin-shell .btn-outline-primary { border-color: var(--gohr-brand-ink); color: var(--gohr-brand-ink); }
.admin-shell .btn-outline-primary:hover { background-color: var(--gohr-brand-ink); color: var(--gohr-on-brand); }
.admin-shell .btn-outline-success { border-color: var(--gohr-success); color: var(--gohr-success); }
.admin-shell .btn-outline-success:hover { background-color: var(--gohr-success); color: var(--gohr-on-brand); }
.admin-shell .btn-outline-danger { border-color: var(--gohr-danger); color: var(--gohr-danger); }
.admin-shell .btn-outline-danger:hover { background-color: var(--gohr-danger); color: var(--gohr-on-brand); }
.admin-shell .btn-outline-secondary { border-color: var(--gohr-border-strong); color: var(--gohr-text-muted); }
.admin-shell .btn-outline-secondary:hover { background-color: var(--gohr-surface-sunken); color: var(--gohr-text); }

/* --- badges: tinted pills, the same language as .gohr-chip ----------------- */
.admin-shell .badge {
  border-radius: var(--gohr-r-chip);
  font-family: var(--gohr-font);
  font-size: var(--gohr-fs-chip);
  font-weight: 700;
  padding: 5px 10px;
}
.admin-shell .badge.bg-primary,
.admin-shell .badge.badge-primary { background-color: var(--gohr-brand-tint) !important; color: var(--gohr-brand-ink); }
.admin-shell .badge.bg-success,
.admin-shell .badge.badge-success { background-color: var(--gohr-success-bg) !important; color: var(--gohr-success); }
.admin-shell .badge.bg-danger,
.admin-shell .badge.badge-danger { background-color: var(--gohr-danger-bg) !important; color: var(--gohr-danger); }
.admin-shell .badge.bg-warning,
.admin-shell .badge.badge-warning { background-color: var(--gohr-warning-bg) !important; color: var(--gohr-warning); }
.admin-shell .badge.bg-info,
.admin-shell .badge.badge-info { background-color: var(--gohr-info-bg) !important; color: var(--gohr-info); }
.admin-shell .badge.bg-secondary,
.admin-shell .badge.badge-secondary { background-color: var(--gohr-neutral-bg) !important; color: var(--gohr-neutral); }

/* --- alerts --------------------------------------------------------------- */
.admin-shell .alert {
  border-radius: var(--gohr-r-tile);
  border-width: 1px;
  font-size: var(--gohr-fs-body);
}
.admin-shell .alert-success { background-color: var(--gohr-success-bg); border-color: transparent; color: var(--gohr-success); }
.admin-shell .alert-danger  { background-color: var(--gohr-danger-bg);  border-color: transparent; color: var(--gohr-danger); }
.admin-shell .alert-warning { background-color: var(--gohr-warning-bg); border-color: transparent; color: var(--gohr-warning); }
.admin-shell .alert-info    { background-color: var(--gohr-info-bg);    border-color: transparent; color: var(--gohr-info); }

/* --- text, fills, progress, switches -------------------------------------- */
.admin-shell .text-primary { color: var(--gohr-brand-ink) !important; }
.admin-shell .text-success { color: var(--gohr-success) !important; }
.admin-shell .text-danger  { color: var(--gohr-danger) !important; }
.admin-shell .text-warning { color: var(--gohr-warning) !important; }
.admin-shell .text-info    { color: var(--gohr-info) !important; }
.admin-shell .text-muted   { color: var(--gohr-text-muted) !important; }

.admin-shell .bg-primary:not(.badge) { background-color: var(--gohr-brand-ink) !important; }
.admin-shell .bg-success:not(.badge) { background-color: var(--gohr-success) !important; }
.admin-shell .bg-danger:not(.badge)  { background-color: var(--gohr-danger) !important; }
.admin-shell .bg-warning:not(.badge) { background-color: var(--gohr-warning) !important; }
.admin-shell .bg-info:not(.badge)    { background-color: var(--gohr-info) !important; }

.admin-shell .progress { background-color: var(--gohr-surface-sunken); border-radius: var(--gohr-r-chip); }
.admin-shell .progress-bar { background-color: var(--gohr-brand); }

.admin-shell .form-check-input:checked {
  background-color: var(--gohr-brand);
  border-color: var(--gohr-brand);
}
.admin-shell .form-check-input:focus { box-shadow: var(--gohr-focus); border-color: var(--gohr-brand); }

/* Status toggles in tables read as on/off, so green keeps its meaning there. */
.admin-shell td .form-switch .form-check-input:checked,
.admin-shell .form-switch.gohr-switch-status .form-check-input:checked {
  background-color: var(--gohr-success);
  border-color: var(--gohr-success);
}

/* --- links and form controls ---------------------------------------------- */
/* :not([class*="gk-"]) added in G2. This rule is the widest reach-through in
   the estate: at (0,4,1) it beat anything gk.css said about a link, so a
   primary button rendered as an <a> sat at about 1.6:1 and nine other kit
   link classes took the old palette. The old layer has no business styling
   the new system's elements, and no screen still on this layer has a gk-
   class on its links, so excluding them cannot change one. Goes with the
   file.

   .gohr-error__action is here for the same reason and was the same bug made
   visible: the error screens' way out is an <a> whose own rule sets
   color:#fff over a filled background, at (0,1,0). This selector is (0,5,1),
   so it won, and "Back to home" was painted var(--gohr-link) on a background
   mixed from the same brand colour - the text and the button were the same
   colour and the only way off a 404 was invisible. */
.admin-shell a:not(.btn):not(.nav-link):not(.sidebar-brand):not(.gohr-error__action):not([class*="gk-"]) { color: var(--gohr-link); }
.admin-shell .form-control,
.admin-shell .form-select {
  border-radius: var(--gohr-r-control);
  border-color: var(--gohr-border-strong);
  color: var(--gohr-text);
  background-color: var(--gohr-input);
}
.admin-shell .form-control:focus,
.admin-shell .form-select:focus {
  border-color: var(--gohr-brand);
  box-shadow: var(--gohr-focus);
}

/* Select2 is used across the admin; keep it in the same language. */
/* The select2 box is gk.css's now. This set it from the --gohr-* tokens, whose
   control radius is 10px against the kit's 6px, and at a specificity gk.css
   could not reach - so a dropdown and the input beside it never matched. */
.admin-shell .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--gohr-brand);
  color: var(--gohr-on-brand);
}
.admin-shell .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--gohr-brand-tint);
  border-color: transparent;
  color: var(--gohr-brand-ink);
  border-radius: var(--gohr-r-chip);
}

/* --- the theme's custom toggle -------------------------------------------
   `.slider` paints the OFF state with var(--primary-color) — the brand colour
   on a switch that is off — and the ON state with a third hardcoded green
   (#50C443, next to #05a34a and Bootstrap's). Off is neutral, on is our green. */
.admin-shell .switch .slider {
  background-color: var(--gohr-border-strong);
}
.admin-shell .switch input:checked + .slider {
  background-color: var(--gohr-success);
}
.admin-shell .switch input:focus + .slider {
  box-shadow: var(--gohr-focus);
}

/* ---------------------------------------------------------------------------
   19. List-screen shell
   Applied to converted screens (phase 3). The vendor card carries a heavy
   header and inner padding; a list screen reads better as one flat surface
   with the table meeting its edges.
   --------------------------------------------------------------------------- */
.admin-shell .card.gohr-filter-card,
.admin-shell .card.gohr-list-card {
  background: var(--gohr-card-bg);
  border: 1px solid var(--gohr-card-border);
  border-radius: var(--gohr-r-card);
  box-shadow: none;
}
.admin-shell .card.gohr-list-card > .card-body { padding: 0; }
.admin-shell .card.gohr-list-card .gohr-table-wrap { border: 0; border-radius: var(--gohr-r-card); }
.admin-shell .card.gohr-filter-card > .card-body { padding: var(--gohr-s5) var(--gohr-s5) 0; }

/* The vendor table paints its own header and borders; the kit's rules need to
   win inside a .table that also carries theme classes. */
.admin-shell table.table.gohr-table > thead > tr > th {
  background: var(--gohr-table-head-bg);
  color: var(--gohr-table-head-fg);
  border: 0;
  border-block-end: 1px solid var(--gohr-table-line);
  font-size: var(--gohr-fs-table);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.admin-shell table.table.gohr-table > tbody > tr > td {
  border-inline: 0;
  border-block-start: 0;
  border-block-end: 1px solid var(--gohr-table-line);
  vertical-align: middle;
}
.admin-shell table.table.gohr-table > tbody > tr:last-child > td { border-block-end: 0; }
.admin-shell table.table.gohr-table > tbody > tr:hover > td { background: var(--gohr-table-row-bg-hover); }

/* ---------------------------------------------------------------------------
   20. Home inbox — the strip Jisr opens on
   Four equal cards: what has lapsed, what you raised, what waits on you, and
   the week's occasions. Each list scrolls on its own so one long column cannot
   stretch the row.
   --------------------------------------------------------------------------- */
.gohr-inbox .gohr-card { height: 100%; }
.gohr-inbox__list {
  max-block-size: 232px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin-block-end: var(--gohr-s3);
}
.gohr-inbox__list > li + li { border-block-start: 1px solid var(--gohr-border); padding-block-start: var(--gohr-s2); }

/* ---------------------------------------------------------------------------
   21. Approval timeline — a request's chain, as it actually ran
   The rail is drawn on the list, not per item, so it does not break where a
   step wraps onto two lines.
   --------------------------------------------------------------------------- */
.gohr-timeline { position: relative; padding-inline-start: var(--gohr-s5); }
.gohr-timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 5px;
  inline-size: 2px;
  background: var(--gohr-border);
}
.gohr-timeline__item { position: relative; }
.gohr-timeline__item::before {
  content: "";
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: calc(var(--gohr-s5) * -1);
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--gohr-surface);
  border: 2px solid var(--gohr-border-strong);
}
.gohr-timeline__item.is-current::before {
  border-color: var(--gohr-brand-ink);
  box-shadow: var(--gohr-ring-selected);
}

/* ---------------------------------------------------------------------------
   22. Repeater rows — approval steps and custom fields in settings
   --------------------------------------------------------------------------- */
.gohr-repeater__row {
  padding: var(--gohr-s3);
  border: 1px solid var(--gohr-border);
  border-radius: var(--gohr-r-tile);
  background: var(--gohr-surface-sunken, var(--gohr-surface));
}
.gohr-repeater__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   23. Choice card — picking a request type before the form exists
   --------------------------------------------------------------------------- */
.gohr-choice-card {
  color: var(--gohr-text);
  border-color: var(--gohr-border) !important;
  transition: border-color var(--gohr-dur) var(--gohr-ease),
              box-shadow var(--gohr-dur) var(--gohr-ease);
}
.gohr-choice-card:hover {
  border-color: var(--gohr-brand-ink) !important;
  box-shadow: var(--gohr-ring-selected);
}

/* ---------------------------------------------------------------------------
   24. Sign-in utilities — the appearance switch before there is an account
   Pinned to the shell's top corner, above the split panel, and clear of the
   phone's safe area. It follows the writing direction, so it sits opposite the
   logo in both LTR and RTL.
   --------------------------------------------------------------------------- */
.auth-shell { position: relative; }

.auth-utilities {
  position: absolute;
  inset-block-start: max(var(--gohr-s4), env(safe-area-inset-top, 0px));
  inset-inline-end: var(--gohr-s4);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--gohr-s2);
}

/* The switch sits on the brand panel on wide screens and on the form's own
   ground when the panel stacks away, so it carries its own surface. The
   language picker stands beside it and needs the same ground. */
.auth-utilities .theme-switch,
.auth-utilities .gohr-lang__trigger {
  background: var(--gohr-surface);
  border: 1px solid var(--gohr-border);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06);
}

/* Signed out there is no navbar above the menu, so it would otherwise open
   against the brand panel's artwork. */
.auth-utilities .gohr-lang__menu {
  background: var(--gohr-surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / .14);
}

@media (max-width: 575.98px) {
  .auth-utilities {
    inset-inline-end: var(--gohr-s3);
    inset-block-start: max(var(--gohr-s3), env(safe-area-inset-top, 0px));
  }
}

/* ---------------------------------------------------------------------------
   25. Dropdown carets — one placement that holds in both writing directions
   Reported as "the dropdown icon is not in the correct place, especially in
   Arabic and English". Three unrelated families draw a caret in this admin and
   every one of them pinned it to a PHYSICAL side, so Arabic put the caret on
   the side the label starts from and the label ran underneath it:

   - Bootstrap separates caret from label with `margin-left`
     (style.css:3649 `.dropdown-toggle::after`). The caret is generated content
     placed after the label in LOGICAL order, so in RTL it renders to the left
     of the label: that margin then opens a gap on the caret's far side while
     the caret itself touches the label.
   - `.form-select` paints its chevron as a background image at
     `right .8rem center` (style.css:2522). `background-position` has no logical
     form, so the chevron never left the right edge in Arabic — exactly where a
     right-aligned label begins. gohr-modern.css:104 then gives the control an
     even .78rem of padding on both sides, which is less than half the 28.8px
     the chevron occupies, so the label ran under it in English too.
   - Select2 ships correct `[dir=rtl]` padding for its rendered label, but
     style.css:25223 overrides that label with an even `padding: 8px 15px`.
     Select2's RTL rule carries an attribute selector and outranks it; its LTR
     rule does not. So one control cleared its 21px-wide arrow in Arabic (20px
     of padding) and ran 6px under it in English (15px against 21px).

   Everything below is stated with logical properties, so a single rule is
   correct in both directions instead of an RTL override per rule.
   --------------------------------------------------------------------------- */

:root {
  /* The caret is two squares side by side, each crossed corner to corner by a
     2px band: "\" then "/". Drawn from `currentColor` gradients rather than the
     theme's navy SVG for two reasons: this file may not carry colour literals
     (gohr-tokens.css owns every colour), and the SVG is a fixed navy that
     gohr-theme-dark.css never re-colours, so on the dark theme the chevron sat
     invisible on a navy field. Ink comes out 12x6 — the size of the SVG it
     replaces — and now tracks the control's own text colour, including when
     the control is disabled. */
  --gohr-caret-a: linear-gradient(45deg, transparent calc(50% - 1.1px), currentColor calc(50% - .9px), currentColor calc(50% + .9px), transparent calc(50% + 1.1px));
  --gohr-caret-b: linear-gradient(135deg, transparent calc(50% - 1.1px), currentColor calc(50% - .9px), currentColor calc(50% + .9px), transparent calc(50% + 1.1px));
  --gohr-caret-box: 6px;
  /* Outer edge of the caret to the control's inline-end edge. .8rem keeps it
     where style.css already drew it in LTR, so nothing moves on English screens
     that were already right. */
  --gohr-caret-inset: .8rem;
  /* What the label has to leave free: the inset, both halves of the caret, and
     a gap wide enough that a long option never looks like it touches it. */
  --gohr-caret-gutter: calc(var(--gohr-caret-inset) + var(--gohr-caret-box) * 2 + .45rem);
  /* `background-position` is the one placement in this section with no logical
     form, so the side it names is carried here and flipped once, below. */
  --gohr-caret-pos: right calc(var(--gohr-caret-inset) + var(--gohr-caret-box)) center,
                    right var(--gohr-caret-inset) center;
}

/* RTL: the caret moves to the inline-end edge, which is now the left, and the
   two halves swap so the "V" still points down. `:dir()` reads the direction
   the element actually resolves to — which is what rtl_style.css sets on body —
   and the attribute form covers engines that do not implement it. It is inside
   `:where()` so an engine that knows neither cannot invalidate the whole rule. */
:root[dir="rtl"],
:root:where(:dir(rtl)) {
  --gohr-caret-pos: left var(--gohr-caret-inset) center,
                    left calc(var(--gohr-caret-inset) + var(--gohr-caret-box)) center;
}

/* `:not([multiple]):not([size])` is not decoration: it keeps the caret off list
   boxes, which style.css blanks deliberately, and it lifts these rules over
   `.input-group-sm > .form-select` and `.auth-login-form .form-select`, which
   both set padding at two classes. `select.form-control` is the 25 selects in
   this app that carry no `.form-select` at all: style.css:21973 strips
   `appearance` from every `select` and only hands `.form-select` a chevron
   back, so those rendered as plain boxes with nothing to say they open. */
.form-select:not([multiple]):not([size]):not(.select2-hidden-accessible),
.custom-select:not([multiple]):not([size]):not(.select2-hidden-accessible),
select.form-control:not([multiple]):not([size]):not(.select2-hidden-accessible) {
  background-image: var(--gohr-caret-a), var(--gohr-caret-b);
  background-repeat: no-repeat;
  background-position: var(--gohr-caret-pos);
  background-size: var(--gohr-caret-box) var(--gohr-caret-box);
  padding-inline-end: var(--gohr-caret-gutter);
}

/* Select2's arrow is an absolutely positioned box. style.css:25226 stretched it
   to `height: 100%` but left Select2's own `top: 1px` in place, so the box hung
   1px past the bottom of the field and the caret in it sat below centre. Width
   is restated so the caret's centre lands the same distance from the edge as
   the one above — the two controls sit side by side in every filter row. */
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
  inset-block: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  inline-size: calc(var(--gohr-caret-inset) * 2 + var(--gohr-caret-box) * 2);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Select2 draws a solid triangle in a hardcoded `#888`, which would now sit
   next to the stroked chevron every other control in the admin uses. Same mark,
   same colour source. The bottom margin is what centres it: a square rotated on
   to its corner carries its ink below its own centre, so the flex line nudges
   the box up by half that margin to put the ink back on the centre line. */
.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b {
  position: static;
  margin: 0 0 4px;
  width: var(--gohr-caret-box);
  height: var(--gohr-caret-box);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Four class-level components in the selector, which is one more than
   style.css:25221 carries and enough to match Select2's own `[dir=rtl]` rule —
   nothing less would clear both. */
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-inline-end: var(--gohr-caret-gutter);
}

/* `margin-inline-end: 0` is not redundant with the line above it: it is what
   clears Bootstrap's physical `margin-left`, which in RTL is the caret's far
   side. `vertical-align` replaces Bootstrap's `.255em`, which lifts the caret
   off the label's centre line. */
.dropdown-toggle::after {
  margin-inline-start: .3em;
  margin-inline-end: 0;
  vertical-align: middle;
}

/* style.css:24117 swaps Bootstrap's solid triangle for the theme's feather
   chevron, but only under a `.dropdown` or `.btn-group` ancestor. The table
   row action menus put `.dropdown-toggle` straight in a `<td>` — see
   admin/employees/index.blade.php:165 — so they alone kept the triangle. Same
   declarations as the theme's, one selector wider, so every caret in the admin
   is the same mark. */
.admin-shell .dropdown-toggle::after {
  border: 0;
  font: .875rem/.625rem feather;
  content: "\e842";
  width: auto;
  height: auto;
  vertical-align: middle;
  margin-inline-start: .3em;
  margin-inline-end: 0;
}

/* ---------------------------------------------------------------------------
   26. Spacing, density and rhythm
   One scale, taken from the tokens already in gohr-tokens.css: --gohr-s6 (24)
   around the page and between cards, --gohr-s5 (20) inside a card, --gohr-s4
   (16) between the blocks within one, --gohr-s3 (12) in a table cell. Nothing
   below invents a value outside it and nothing below names a page: every rule
   is pinned to the component that was wrong, so the screens that share the
   component are fixed with it.
   --------------------------------------------------------------------------- */

/* .gohr-card (section 3) pads itself, because <x-kit.card> drops its slot
   straight inside and there is nothing else to carry the padding. But only 2
   of the 105 card uses in the views are that component. The other 103 are
   <x-ui.card>, which puts .gohr-card on a Bootstrap .card that already
   contains a .card-header and a .card-body — both padded by
   gohr-modern.css:978 and :983 — so the two paddings simply added up and
   content sat 40px in from the card edge on /admin/roles, /admin/company,
   /admin/general-settings and four of the dashboard cards, against 20px on
   the cards already converted to .gohr-filter-card. Where the vendor's parts
   are present they own the padding and the wrapper keeps only the surface. */
.admin-shell .card.gohr-card { padding: 0; }

/* gohr-modern.css:978 pads the card header 1.1rem — 17.6px, the one value in
   the admin that lands between two steps of the scale, and 2.4px out of step
   with the 20px body directly under it. On the /admin/employee-request filter
   card that left 38.6px of nothing between the «تصفية» title and the single
   tab below it, which is the gap the owner is looking at. A header with a
   rule under it is a band rather than a panel, so it takes the narrower step;
   the body that follows one opens at the same 16 so the seam reads as one
   gap instead of two unequal ones. */
.admin-shell .card > .card-header {
  padding-block: var(--gohr-s4);
  padding-inline: var(--gohr-s5);
}
.admin-shell .card > .card-body {
  padding: var(--gohr-s5);
}
.admin-shell .card > .card-header + .card-body {
  padding-block-start: var(--gohr-s4);
}

/* Cards sat 20px apart by default (gohr-modern.css:967) and 24px apart
   wherever a view had added .mb-4, and /admin/employees stacks both gaps on
   one screen. .mb-4's 1.5rem carries !important and cannot be reached from a
   stylesheet, so the only way the two ever agree is to move the default onto
   the utility's value — which is the scale step anyway. */
.admin-shell .card { margin-block-end: var(--gohr-s6); }

/* style.css's .main-wrapper .page-wrapper .page-content is (0,3,0) and beats
   gohr-modern.css:941's (0,2,0), so that file's responsive gutter has never
   once applied and every admin page has been padded by the theme's 25px. One
   notch wider a selector puts the gutter on the scale and matches it to the
   24px between the cards standing in it. */
.admin-shell .main-wrapper .page-content { padding: var(--gohr-s6); }

/* style.css zeroes .btn border-width. The neutral variants in section 18 draw
   their own 1px border and the filled ones only set a colour, so the two
   stood 2px apart in every toolbar: 43.6px for «استيراد الموظفين» beside
   41.6px for «إضافة موظف» on /admin/employees. Handing the border back to all
   of them settles it without touching a single colour — the variants above
   already say what colour it is, and on a filled button that colour is its
   own fill or transparent, so nothing new becomes visible. */
.admin-shell .btn { border-width: 1px; border-style: solid; }

/* .btn-link is the one variant with nothing to paint the border it has just
   been given, and an unset border-color is currentColor. */
.admin-shell .btn-link { border-color: transparent; }

/* The views ask for a smaller button 266 times — 76 .btn-sm, 91 .btn-xs and
   99 <x-ui.button size="sm"> — and not one of them got one. Two separate
   things were swallowing it. gohr-modern.css:36 floors every .btn at 40px and
   no layer since had given the modifiers a floor of their own, so Bootstrap's
   smaller padding was applied and then absorbed. And section 1 sizes the kit
   button on .gohr-btn--sm, while components/ui/button.blade.php:18 composes
   its size class as 'btn-' . $size — so the 99 <x-ui.button size="sm"> land
   on .btn-sm, miss .gohr-btn--sm entirely, and keep .gohr-btn's flat
   height: var(--gohr-h-md). A row-action button measured the same 40px as the
   page-header call to action above it: the size scale was in the markup and
   nowhere on screen.

   Both classes are made to mean the kit's own --gohr-h-sm, so it no longer
   matters which spelling a view reached for. xs shares that step rather than
   inventing a fourth: the control scale is 32 / 40 / 48 and a table row does
   not need a size below the one the kit already defines. */
.admin-shell .btn-sm,
.admin-shell .btn-xs {
  min-block-size: var(--gohr-h-sm);
  padding-block: var(--gohr-s1);
}
/* .gohr-btn sets a fixed block-size, which no min- can argue with. */
.admin-shell .gohr-btn.btn-sm,
.admin-shell .gohr-btn.btn-xs {
  block-size: var(--gohr-h-sm);
  padding-inline: var(--gohr-s3);
}
/* An icon-only button is a square, so the shrink has to happen on both axes
   or the edit and delete buttons in a table row turn into lozenges. */
.admin-shell .gohr-btn--icon.btn-sm,
.admin-shell .gohr-btn--icon.btn-xs { inline-size: var(--gohr-h-sm); }

/* Bootstrap 4 held button labels on one line and 5 dropped it; the filter
   toolbars are where that shows. On /admin/attendances «تصفية», «تصدير CSV»
   and «إعادة تعيين» sit in one flex row at 40.6px, 61.6px and 59.6px, because
   the two longer labels wrapped inside boxes 90px wide. A button label is a
   label — it makes the button wider, never taller. */
.admin-shell .btn { white-space: nowrap; }

/* What the line above moves, this one catches. Those three buttons need
   288px of label and the filter column is 276px wide, so once they stopped
   wrapping internally they ran 28px past the card's padding on the way out.
   A toolbar that cannot fit its buttons should break between them, not
   inside them — a flex row holding buttons is a row of buttons, and rows of
   things wrap. Restricted to a container whose own children are buttons, so
   no page-level flex layout is touched by it. */
.admin-shell .d-flex:has(> .btn),
.admin-shell .d-sm-flex:has(> .btn),
.admin-shell .d-md-flex:has(> .btn),
.admin-shell .d-lg-flex:has(> .btn) { flex-wrap: wrap; }

/* gohr-modern.css:1009 pads table cells 0.8rem, and its (0,2,1) beats
   .gohr-table td's (0,1,1), so section 7's density has never reached a real
   table — every table in the admin has been on 12.8px, off the scale, since
   the kit landed. Same selector, one file later, on the scale.

   Figures in a table are a column of digits rather than prose: tabular
   figures give every digit one advance, so ids, counts and dates line up down
   the column whatever the row holds. It does nothing to the Arabic. */
.admin-shell .table > :not(caption) > * > * {
  padding: var(--gohr-s3);
  font-variant-numeric: tabular-nums;
}

/* A table header changed depending on whether the view had remembered to add
   .gohr-table: with it, 13px/600 and no transform; without it,
   gohr-modern.css:1036 gives 11.84px/800/UPPERCASE with .045em of tracking.
   /admin/employees and /admin/attendances are one nav item apart and did not
   agree. Uppercase is a no-op on Arabic; the tracking is worse than a no-op,
   because letter-spacing pulls joined Arabic letterforms apart. (0,2,3)
   against that rule's (0,2,1) covers both kinds of table at once.

   Alignment deliberately stays in the markup: a stylesheet cannot tell a
   numeric column from a textual one, and guessing would misalign the header
   from the cells under it. */
.admin-shell .table > thead > tr > th {
  padding: var(--gohr-s3);
  font-size: var(--gohr-fs-table);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Chart.js writes its pixel size into the element's style attribute, and on
   /admin/dashboard it wrote 320px into a card body 247px wide. Nothing
   between the canvas and <html> clips, so 53px of overshoot pushed the whole
   document to scrollWidth 1273 against clientWidth 1246 and the admin scrolled
   sideways — the same shape of bug as the stat row, one component along. A
   chart is a picture inside a card: it gets the width the card has. */
.admin-shell .card canvas { max-inline-size: 100%; }

/* The three rules above that set padding are (0,3,0) and (0,3,0), which also
   beats gohr-modern.css:1357's small-screen step — so the step has to be
   restated here or the admin would keep desktop padding on a phone. */
@media (max-width: 767.98px) {
  .admin-shell .main-wrapper .page-content,
  .admin-shell .card > .card-header,
  .admin-shell .card > .card-body {
    padding: var(--gohr-s4);
  }
}