/* ===================================================================
   Portalyx — application chrome
   Loaded after AdminLTE 4 (RTL build, which already carries Bootstrap 5).
   Everything here is either an Arabic/RTL correction or a deliberate
   deviation from the template default; nothing restates what AdminLTE
   already does.
   =================================================================== */

/* ── Design tokens ────────────────────────────────────────────────
   Declared on :root so a card, a badge and a table border cannot drift
   apart, and re-declared for dark mode in one place further down.      */
:root {
  --ptx-font: 'Cairo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Gold, from the Portalyx mark (#F2D87A → #D4AF37 → #B8902A).
     Measured contrast decides the pairs: white on gold is 2.4:1 and fails,
     so a gold FILL carries near-black text (7.6:1), and gold used AS TEXT
     on white is a deeper bronze (6.2:1). */
  --ptx-brand: #C9A227;
  --ptx-brand-hover: #B8922A;
  --ptx-brand-ink: #7A5C0E;
  --ptx-brand-soft: rgba(201, 162, 39, .12);
  --ptx-on-brand: #1B1406;
  /* The same colours as channels and as the extra shades the components
     need, so a company's own brand (Brand::css) repaints every one of them
     by redefining these — nothing below names a colour twice. */
  --ptx-brand-rgb: 201, 162, 39;
  --ptx-brand-ink-rgb: 122, 92, 14;
  --ptx-brand-light: #F2D87A;
  /* The sidebar is dark in both themes, so it reads the dark-mode accent. */
  --ptx-sidebar-accent: #D4AF37;
  --ptx-sidebar-accent-rgb: 212, 175, 55;
  --ptx-sidebar-ink: #E8C766;

  --ptx-surface: #ffffff;
  --ptx-surface-sunken: #f3f5f9;
  --ptx-line: rgba(16, 24, 40, .10);
  --ptx-line-strong: rgba(16, 24, 40, .16);
  --ptx-muted: #6b7280;

  --ptx-radius: .75rem;
  --ptx-radius-sm: .5rem;
  --ptx-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px -12px rgba(16, 24, 40, .22);
  --ptx-shadow-lg: 0 8px 40px -16px rgba(16, 24, 40, .34);

  --ptx-gap: 1rem;
}

:root[data-bs-theme="dark"] {
  --ptx-brand: #D4AF37;
  --ptx-brand-hover: #E2C04F;
  --ptx-brand-ink: #E8C766;
  --ptx-brand-soft: rgba(212, 175, 55, .16);
  --ptx-on-brand: #1B1406;
  --ptx-brand-rgb: 212, 175, 55;
  --ptx-brand-ink-rgb: 232, 199, 102;

  --ptx-surface: #151b26;
  --ptx-surface-sunken: #0e131c;
  --ptx-line: rgba(255, 255, 255, .10);
  --ptx-line-strong: rgba(255, 255, 255, .18);
  --ptx-muted: #9aa4b2;

  --ptx-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -14px rgba(0, 0, 0, .7);
  --ptx-shadow-lg: 0 10px 44px -18px rgba(0, 0, 0, .8);
}

/* The colour mode is normally resolved by the inline script in <head>.
   This keeps the chrome honest if that script never ran — a hardened
   browser, a scraper, a print pipeline. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --ptx-surface: #151b26;
    --ptx-surface-sunken: #0e131c;
    --ptx-line: rgba(255, 255, 255, .10);
    --ptx-line-strong: rgba(255, 255, 255, .18);
    --ptx-muted: #9aa4b2;
  }
}

/* ── Typography ───────────────────────────────────────────────────
   Cairo is the Arabic face; Latin words and digits inherit it too, which
   is what keeps a mixed line (اسم العميل · INV-0042) looking like one
   sentence rather than two pasted together. */
body,
.dropdown-menu,
.modal,
.tooltip,
.popover,
.form-control,
.form-select,
.btn,
.table {
  font-family: var(--ptx-font);
}

body {
  font-size: .95rem;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ptx-font);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Arabic reads better with a touch more leading than Bootstrap's default;
   long paragraphs get it, dense UI rows do not. */
p { line-height: 1.8; }

/* Numbers. A money screen in RTL is the one place a browser will happily
   reorder a figure: "1,250.00-" and "٢٠٢٦-٠١-٠٣" both come from letting
   the bidi algorithm guess. Anything numeric is pinned LTR and tabular so
   columns line up digit over digit. */
.ptx-num,
.ptx-total,
.table td.num, .table th.num,
time, code, kbd, samp {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.table td.num, .table th.num { text-align: left; }

input[type="tel"], input[type="number"], input[type="email"], input[type="url"],
input[type="password"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[inputmode="numeric"], input[inputmode="decimal"] {
  direction: ltr;
  text-align: right;
}
/* RTL keeps the label-side alignment; the VALUE is what must stay LTR. */
:root[dir="rtl"] input[type="tel"],
:root[dir="rtl"] input[type="number"],
:root[dir="rtl"] input[inputmode="numeric"],
:root[dir="rtl"] input[inputmode="decimal"] { text-align: right; }

/* ── Header ───────────────────────────────────────────────────────── */
.ptx-header {
  border-bottom: 1px solid var(--ptx-line);
  min-height: 3.5rem;
  backdrop-filter: saturate(140%) blur(6px);
}
.ptx-header .nav-link { color: var(--bs-body-color); }
.ptx-header .nav-link:hover { color: var(--ptx-brand); }

.ptx-company {
  display: inline-flex;
  align-items: center;
  max-width: 46vw;
  padding: .35rem .25rem;
  font-weight: 600;
}
.ptx-company-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ptx-avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  /* Near-black on gold, the mark's own pairing — white on gold is 2.4:1. */
  background: linear-gradient(160deg, var(--ptx-brand-light), var(--ptx-brand));
  color: var(--ptx-on-brand);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  flex: 0 0 auto;
}
.ptx-username {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptx-user-menu { min-width: 15rem; }

.ptx-install {
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* The bell badge sits on the icon; AdminLTE's RTL build already moved it
   to the correct side, this only stops a three-digit count clipping. */
.ptx-bell .navbar-badge {
  min-width: 1.1rem;
  text-align: center;
  border-radius: 999px;
}
.ptx-notif-menu {
  width: min(22rem, calc(100vw - 1.5rem));
  padding-bottom: 0;
  box-shadow: var(--ptx-shadow-lg);
}
.ptx-notif-item {
  display: block;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--ptx-line);
  color: inherit;
  text-decoration: none;
  white-space: normal;
}
.ptx-notif-item:last-of-type { border-bottom: 0; }
.ptx-notif-item:hover { background: var(--ptx-brand-soft); }
.ptx-notif-item.is-unread { background: var(--ptx-brand-soft); }
.ptx-notif-item.is-unread .ptx-notif-title::before {
  content: '';
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-inline-start: .4rem;
  border-radius: 50%;
  background: var(--ptx-brand);
  vertical-align: middle;
}
.ptx-notif-title { font-weight: 600; font-size: .875rem; }
.ptx-notif-body  { font-size: .8125rem; color: var(--ptx-muted); }
.ptx-notif-time  { font-size: .75rem; color: var(--ptx-muted); }

/* ── Sidebar ──────────────────────────────────────────────────────── */
.ptx-sidebar { border-inline-start: 0; }
/* The sidebar carries data-bs-theme="dark", so its text resolves light. It
   therefore needs a dark surface underneath: without one the panel inherits
   the page background and white text lands on white. Bootstrap's own token
   is used so the light/dark switcher keeps working. */
.ptx-sidebar { background-color: var(--bs-body-bg); }
.ptx-sidebar .brand-text { color: var(--bs-emphasis-color); }

.ptx-sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-block: .35rem;
}
.ptx-sidebar .brand-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.ptx-sidebar .brand-image {
  border-radius: .5rem;
  margin: 0;
  opacity: 1;
}
.ptx-sidebar .sidebar-menu > .nav-item > .nav-link { border-radius: var(--ptx-radius-sm); }
.ptx-sidebar .sidebar-menu .nav-link {
  margin-inline: .5rem;
  padding-block: .55rem;
  border-radius: var(--ptx-radius-sm);
  font-weight: 500;
}
.ptx-sidebar .sidebar-menu .nav-link.active { font-weight: 700; }
.ptx-sidebar .nav-header {
  padding: 1rem 1.15rem .35rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: none;
  opacity: .65;
}
.ptx-sidebar .nav-treeview .nav-link {
  padding-inline-start: 2.6rem;
  font-size: .9rem;
  font-weight: 400;
}
.ptx-sidebar .nav-treeview .nav-icon { font-size: .85rem; opacity: .8; }
.ptx-sidebar .sidebar-wrapper { scrollbar-width: thin; }

/* ── Content ──────────────────────────────────────────────────────── */
.ptx-content-header { padding-block: 1.1rem .25rem; }
.ptx-content-header .breadcrumb {
  --bs-breadcrumb-divider: '‹';
  font-size: .8125rem;
  background: transparent;
}
.ptx-content-header .breadcrumb-item + .breadcrumb-item::before { padding-inline: .45rem; }
.app-content { padding-block: 1rem 2rem; }

.ptx-flash .alert {
  border: 1px solid var(--ptx-line);
  border-radius: var(--ptx-radius);
  box-shadow: var(--ptx-shadow);
}
.ptx-flash .alert .btn-close { margin-inline-start: auto; }

/* ── Cards ────────────────────────────────────────────────────────
   One card style for the whole product: hairline border, soft shadow,
   generous padding. A screen that needs to stand out earns it with
   content, not with a different card. */
.card {
  border: 1px solid var(--ptx-line);
  border-radius: var(--ptx-radius);
  box-shadow: var(--ptx-shadow);
  background-color: var(--ptx-surface);
}
.card + .card { margin-top: var(--ptx-gap); }
.card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ptx-line);
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  min-height: 3.25rem;
}
.card > .card-header .card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.card > .card-header .card-tools { margin-inline-start: auto; }
/* The padding lives on Bootstrap's own variable, not as a raw value on
   .card-body: the edge-to-edge table rule below pulls by that same variable,
   and a padding set beside it instead of through it is a second number that
   drifts. It did — the pull was typed as -1.1rem against a padding typed as
   1.1rem, and the day one of them changed nothing would have said so. */
.card { --bs-card-spacer-y: 1.1rem; --bs-card-spacer-x: 1.1rem; }
.card > .card-footer {
  background: transparent;
  border-top: 1px solid var(--ptx-line);
  padding: .8rem 1.1rem;
}

/* A compact stat tile, used on dashboards. */
.ptx-stat {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
}
.ptx-stat-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: var(--ptx-radius-sm);
  background: var(--ptx-brand-soft);
  color: var(--ptx-brand);
  font-size: 1.25rem;
}
.ptx-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}
.ptx-stat-label { font-size: .8125rem; color: var(--ptx-muted); }

/* ── Tables ───────────────────────────────────────────────────────
   A phone is 360px wide and a trip row is not. Rather than hide columns
   and let the reader think the data is missing, the table scrolls inside
   its own box, with a shadow on the edge that says there is more. */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead > tr > th {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ptx-muted);
  text-transform: none;
  white-space: nowrap;
  border-bottom-width: 1px;
  background: var(--ptx-surface-sunken);
}
.table > tbody > tr > td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: var(--ptx-brand-soft); }

/* A table that is the whole point of its card runs to the card's edges
   instead of sitting in a box inside a box.

   The pull is the card's OWN padding, read from the variable Bootstrap sets
   on .card — not a number typed here. The first draft said -1.1rem against
   a padding of 1rem, so every such table overshot its card by a tenth of a
   rem; and a card-body with p-0 has no padding at all, so the same pull
   pushed its table a full rem outside the card on both sides. The header
   row carries a background, so the overshoot showed as a grey bar sticking
   out of the card — on the trips list, the expenses list and the reports.
   A card-body with p-0 is excluded: its table is already at the edges. */
.card > .card-body:not(.p-0) > .table-responsive:only-child {
  margin: calc(-1 * var(--bs-card-spacer-y)) calc(-1 * var(--bs-card-spacer-x));
  width: auto;
  border-radius: inherit;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* "There is more to the side" — an inset shadow on the leading edge the
   content disappears behind. The page is RTL, so hidden columns are to
   the LEFT, and a positive inset x-offset draws exactly there. app.js
   adds the flag only while the table really overflows, because CSS
   cannot measure and a permanent shadow would be a permanent lie. */
.table-responsive.ptx-scrollable {
  box-shadow: inset 14px 0 12px -14px rgba(16, 24, 40, .35);
}
:root[data-bs-theme="dark"] .table-responsive.ptx-scrollable {
  box-shadow: inset 14px 0 12px -14px rgba(0, 0, 0, .8);
}

@media (max-width: 575.98px) {
  .table > :not(caption) > * > * { padding: .55rem .6rem; }
  .table { font-size: .875rem; }
}

/* ── Forms ────────────────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.form-control, .form-select {
  border-radius: var(--ptx-radius-sm);
  border-color: var(--ptx-line-strong);
  padding-block: .5rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ptx-brand);
  box-shadow: 0 0 0 .2rem var(--ptx-brand-soft);
}
.form-text { font-size: .8rem; }
.input-group-text { background: var(--ptx-surface-sunken); border-color: var(--ptx-line-strong); }

.btn { border-radius: var(--ptx-radius-sm); font-weight: 600; }
.btn-lg { border-radius: var(--ptx-radius); }
.btn:focus-visible { box-shadow: 0 0 0 .2rem var(--ptx-brand-soft); }
/* A submit that has already been sent says so, rather than looking idle
   while the money write it started is in flight. */
.btn[data-ptx-busy] { pointer-events: none; opacity: .65; }

.badge { font-weight: 600; letter-spacing: 0; padding: .35em .6em; border-radius: 999px; }

/* ── Empty state ──────────────────────────────────────────────────── */
.ptx-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ptx-muted);
}
.ptx-empty i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .6rem; }

/* ── Error page ───────────────────────────────────────────────────── */
.ptx-error-card { border-radius: calc(var(--ptx-radius) * 1.4); }
.ptx-error-mark { font-size: 2.75rem; line-height: 1; opacity: .85; }
.ptx-error-code {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
}

/* ── Footer ───────────────────────────────────────────────────────── */
.ptx-footer {
  border-top: 1px solid var(--ptx-line);
  font-size: .8125rem;
  color: var(--ptx-muted);
}

/* ── Signed-out shell ─────────────────────────────────────────────── */
.ptx-auth-body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 520px at 85% -10%, var(--ptx-brand-soft), transparent 60%),
    radial-gradient(900px 480px at 0% 110%, var(--ptx-brand-soft), transparent 60%),
    var(--ptx-surface-sunken);
}
.ptx-auth-topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: flex-end;
  padding: .75rem 1rem;
}
.ptx-auth-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem 2.5rem;
}
.ptx-auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--ptx-surface);
  border: 1px solid var(--ptx-line);
  border-radius: calc(var(--ptx-radius) * 1.3);
  box-shadow: var(--ptx-shadow-lg);
  overflow: hidden;
}
.ptx-auth-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.35rem 1.5rem;
  background: linear-gradient(135deg, var(--ptx-brand), var(--ptx-brand-ink));
  color: #fff;
}
.ptx-auth-logo { border-radius: .85rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.ptx-auth-wordmark { font-size: 1.35rem; font-weight: 800; line-height: 1.1; letter-spacing: .01em; }
.ptx-auth-tagline { font-size: .8125rem; opacity: .85; }
.ptx-auth-body-inner { padding: 1.5rem; }
.ptx-auth-body-inner .form-control { padding-block: .65rem; }
.ptx-auth-foot { margin: 1.25rem 0 0; font-size: .78rem; color: var(--ptx-muted); }

/* An OTP box: one character per cell, always LTR, never autocorrected. */
.ptx-otp {
  direction: ltr;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .6em;
  text-indent: .6em;
  font-variant-numeric: tabular-nums;
}

/* ── Utilities the pages will reach for ───────────────────────────── */
.ptx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptx-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: .75rem 1.1rem;
  background: var(--ptx-surface);
  border-top: 1px solid var(--ptx-line);
  border-radius: 0 0 var(--ptx-radius) var(--ptx-radius);
}

/* ── Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ────────────────────────────────────────────────────────
   Invoices leave this building on paper. The chrome does not go with
   them, and the page reverts to a light palette whatever the screen was
   set to — a dark-mode invoice is a black rectangle. */
@media print {
  :root, :root[data-bs-theme="dark"] {
    --ptx-surface: #fff;
    --ptx-surface-sunken: #fff;
    --ptx-line: #d0d5dd;
    --ptx-muted: #475467;
  }
  :root[data-bs-theme="dark"] { color-scheme: light; }
  .app-header, .app-sidebar, .app-footer,
  .ptx-content-header .breadcrumb, .ptx-flash,
  .ptx-install, .no-print { display: none !important; }
  .app-main, .app-content, .container-fluid { padding: 0 !important; margin: 0 !important; }
  .card { border: 1px solid #d0d5dd !important; box-shadow: none !important; break-inside: avoid; }
  .table-responsive { overflow: visible !important; }
  a[href]::after { content: ''; }
}


/* ═══ Gold as Bootstrap's primary ════════════════════════════════════
   Bootstrap compiles its blue into each component, so pointing one
   variable at gold is not enough: every place primary reaches is named
   here, and each reads the tokens above. */
:root, [data-bs-theme] {
  --bs-primary: var(--ptx-brand);
  --bs-primary-rgb: var(--ptx-brand-rgb);
  --bs-link-color: var(--ptx-brand-ink);
  --bs-link-color-rgb: var(--ptx-brand-ink-rgb);
  --bs-link-hover-color: var(--ptx-brand-ink);
  --bs-link-hover-color-rgb: var(--ptx-brand-ink-rgb);
  --bs-primary-text-emphasis: var(--ptx-brand-ink);
  --bs-primary-bg-subtle: var(--ptx-brand-soft);
  --bs-primary-border-subtle: rgba(var(--ptx-brand-rgb), .45);
  --bs-focus-ring-color: rgba(var(--ptx-brand-rgb), .35);
}
:root[data-bs-theme="dark"], [data-bs-theme="dark"] {
  --bs-primary-rgb: var(--ptx-brand-rgb);
  --bs-link-color-rgb: var(--ptx-brand-ink-rgb);
  --bs-link-hover-color-rgb: var(--ptx-brand-ink-rgb);
}
.btn-primary {
  --bs-btn-color: var(--ptx-on-brand); --bs-btn-bg: var(--ptx-brand); --bs-btn-border-color: var(--ptx-brand);
  --bs-btn-hover-color: var(--ptx-on-brand); --bs-btn-hover-bg: var(--ptx-brand-hover); --bs-btn-hover-border-color: var(--ptx-brand-hover);
  --bs-btn-active-color: var(--ptx-on-brand); --bs-btn-active-bg: var(--ptx-brand-hover); --bs-btn-active-border-color: var(--ptx-brand-hover);
  --bs-btn-disabled-color: var(--ptx-on-brand); --bs-btn-disabled-bg: var(--ptx-brand); --bs-btn-disabled-border-color: var(--ptx-brand);
  --bs-btn-focus-shadow-rgb: var(--ptx-brand-rgb);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--ptx-brand-ink); --bs-btn-border-color: var(--ptx-brand);
  --bs-btn-hover-color: var(--ptx-on-brand); --bs-btn-hover-bg: var(--ptx-brand); --bs-btn-hover-border-color: var(--ptx-brand);
  --bs-btn-active-color: var(--ptx-on-brand); --bs-btn-active-bg: var(--ptx-brand-hover); --bs-btn-active-border-color: var(--ptx-brand-hover);
  --bs-btn-disabled-color: var(--ptx-brand-ink); --bs-btn-disabled-border-color: var(--ptx-brand);
  --bs-btn-focus-shadow-rgb: var(--ptx-brand-rgb);
}
.btn-check:checked + .btn-outline-primary { color: var(--ptx-on-brand); background-color: var(--ptx-brand); border-color: var(--ptx-brand); }
.text-primary { color: var(--ptx-brand-ink) !important; }
.bg-primary { background-color: var(--ptx-brand) !important; }
.text-bg-primary { color: var(--ptx-on-brand) !important; background-color: var(--ptx-brand) !important; }
.border-primary { border-color: var(--ptx-brand) !important; }
.link-primary { color: var(--ptx-brand-ink) !important; }
.form-check-input:checked { background-color: var(--ptx-brand); border-color: var(--ptx-brand); }
.form-check-input:focus, .form-control:focus, .form-select:focus {
  border-color: rgba(var(--ptx-brand-rgb), .7); box-shadow: 0 0 0 .25rem rgba(var(--ptx-brand-rgb), .25);
}
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c9a227'/%3e%3c/svg%3e");
}
.nav-pills { --bs-nav-pills-link-active-color: var(--ptx-on-brand); --bs-nav-pills-link-active-bg: var(--ptx-brand); }
.nav-tabs .nav-link.active { border-top: 2px solid var(--ptx-brand); }
.pagination { --bs-pagination-active-bg: var(--ptx-brand); --bs-pagination-active-border-color: var(--ptx-brand);
  --bs-pagination-active-color: var(--ptx-on-brand); --bs-pagination-color: var(--ptx-brand-ink);
  --bs-pagination-hover-color: var(--ptx-brand-ink); --bs-pagination-focus-color: var(--ptx-brand-ink);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ptx-brand-rgb), .25); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--ptx-brand); --bs-dropdown-link-active-color: var(--ptx-on-brand); }
.list-group { --bs-list-group-active-bg: var(--ptx-brand); --bs-list-group-active-border-color: var(--ptx-brand); --bs-list-group-active-color: var(--ptx-on-brand); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--ptx-brand); }
.alert-primary { --bs-alert-color: var(--ptx-brand-ink); --bs-alert-bg: var(--ptx-brand-soft); --bs-alert-border-color: rgba(var(--ptx-brand-rgb), .4); }

/* The sidebar is dark in both themes: the active entry reads as the mark
   does — gold on black. */
.ptx-sidebar .sidebar-menu .nav-link.active,
.ptx-sidebar .sidebar-menu .nav-item.menu-open > .nav-link.active {
  background-color: rgba(var(--ptx-sidebar-accent-rgb), .16) !important;
  color: var(--ptx-sidebar-ink) !important;
  box-shadow: inset -3px 0 0 var(--ptx-sidebar-accent);
}
.ptx-sidebar .sidebar-menu .nav-link.active .nav-icon { color: var(--ptx-sidebar-ink) !important; }
.ptx-sidebar .brand-text { color: var(--ptx-brand-light); }