/*
 * Pen LMS — custom layer on top of the Domiex theme (assets/css/app.rtl.css).
 * The theme names its CSS variables --dx-* (not the stock --bs-*), so all
 * colors here read from those tokens with sane fallbacks.
 */

/* ── Theme gap-fill: .fs-14 is used by the theme demo pages but missing
     from the shipped compiled CSS (fs-13/fs-15 exist). ────────────────── */
.fs-14 { font-size: 14px !important; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Shared shell polish and keyboard access ─────────────────────── */
.pen-skip-link {
  position: fixed;
  top: .75rem;
  inset-inline-start: .75rem;
  z-index: 2000;
  transform: translateY(-180%);
  padding: .6rem .9rem;
  border-radius: .5rem;
  background: var(--dx-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .18);
}
.pen-skip-link:focus { transform: translateY(0); color: #fff; }
#main-content:focus { outline: 0; }
.main-topbar .topbar-user { min-height: 2.75rem; padding: .25rem .5rem; border-radius: .65rem; color: var(--dx-topbar-color); }
.main-topbar .topbar-user:hover, .main-topbar .topbar-user:focus-visible { background: var(--dx-tertiary-bg); color: var(--dx-topbar-hover-color); }
.topbar-user-copy { max-width: 10rem; }
.topbar-user-menu { min-width: 13rem; }
.main-topbar .dropdown-menu {
  max-width: calc(100vw - 1rem);
  max-height: calc(100dvh - var(--dx-topbar, 4.6875rem) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#pen-toast-root { max-width: 100vw; }
#pen-toast-root .toast { max-width: 100%; overflow-wrap: anywhere; }
.pen-stat-card { overflow: hidden; border-color: var(--dx-border-color); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.pen-stat-card:hover { border-color: var(--dx-primary-border-subtle, var(--dx-primary)); box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08); transform: translateY(-1px); }
.pen-stat-card .avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.pen-stat-caption { color: var(--dx-secondary-color); font-size: .7rem; }
.password-toggle { min-width: 2.75rem; }
.password-toggle:focus-visible, .topbar-user:focus-visible, .sidebar-toggle:focus-visible { outline: 3px solid var(--dx-primary-border-subtle, var(--dx-primary)); outline-offset: 2px; }

/* ── Status badges for form submissions ─────────────────────────── */
.pen-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.pen-badge-draft      { background: var(--dx-gray-200); color: var(--dx-gray-700); }
.pen-badge-submitted  { background: var(--dx-primary-bg-subtle); color: var(--dx-primary); }
.pen-badge-processing { background: var(--dx-warning-bg-subtle); color: var(--dx-gray-700); }
.pen-badge-approved   { background: var(--dx-success-bg-subtle); color: var(--dx-success-text-emphasis, var(--dx-success)); }
.pen-badge-rejected   { background: var(--dx-danger-bg-subtle); color: var(--dx-danger-text-emphasis, var(--dx-danger)); }
.pen-badge-archived   { background: var(--dx-secondary-bg-subtle); color: var(--dx-secondary-color); }

/* ── Field rendering (dynamic form) ─────────────────────────────── */
.pen-field { margin-bottom: 1rem; }
.pen-field > label {
  display: block;
  font-weight: 600;
  margin-bottom: .375rem;
}
.pen-field .pen-help {
  color: var(--dx-secondary-color);
  font-size: .8125rem;
  margin-top: .25rem;
  margin-bottom: 0;
}
.pen-field .pen-errors {
  list-style: none;
  color: var(--dx-danger-text-emphasis, var(--dx-danger));
  font-size: .8125rem;
  margin: .375rem 0 0;
  padding: 0;
}
.pen-field .invalid-feedback { margin-top: .375rem; }
.pen-field.is-invalid .invalid-feedback { display: block; }
.pen-field.is-invalid .form-control,
.pen-field.is-invalid .form-select {
  border-color: var(--dx-danger);
}
.pen-field .option-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  padding: .25rem 0;
}

/* ── Error summary box ──────────────────────────────────────────── */
.pen-error-summary {
  border: 1px solid var(--dx-danger);
  background: var(--dx-danger-bg-subtle);
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  color: var(--dx-danger-text-emphasis, var(--dx-danger));
}
.pen-error-summary ul { margin: .25rem 0 0; }

/* ── Multi-step section progress ────────────────────────────────── */
.pen-progress {
  display: flex;
  gap: .35rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.pen-progress span {
  flex: 1 1 40px;
  height: 6px;
  border-radius: 3px;
  background: var(--dx-tertiary-bg);
  min-width: 40px;
}
.pen-progress span.done { background: var(--dx-primary); }

/* ── Attachments / drop zone ────────────────────────────────────── */
.pen-dropzone {
  border: 2px dashed var(--dx-border-color);
  border-radius: .5rem;
  padding: 1.25rem;
  text-align: center;
  color: var(--dx-secondary-color);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.pen-dropzone:hover,
.pen-dropzone.is-dragover {
  border-color: var(--dx-primary);
  background: var(--dx-primary-bg-subtle);
}
.pen-attachment-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .625rem;
  border: 1px solid var(--dx-border-color);
  border-radius: .5rem;
  margin-top: .5rem;
  font-size: .8125rem;
}

/* ── Detail page ────────────────────────────────────────────────── */
.pen-definition-list th {
  width: 220px;
  vertical-align: top;
  font-weight: 600;
  color: var(--dx-secondary-color);
}
.pen-rich-content img { max-width: 100%; height: auto; }
.pen-rich-editor {
  min-height: 10rem;
  padding: .75rem 1rem;
  border: 1px solid var(--dx-border-color);
  border-radius: .375rem;
  background: var(--dx-body-bg);
  line-height: 1.8;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pen-rich-editor:focus { border-color: var(--dx-primary); box-shadow: 0 0 0 .2rem var(--dx-primary-bg-subtle); }
.pen-rich-editor:empty::before { content: attr(data-placeholder); color: var(--dx-secondary-color); pointer-events: none; }

/* ── Empty / loading states ─────────────────────────────────────── */
.pen-empty {
  text-align: center;
  color: var(--dx-secondary-color);
  padding: 3rem 1rem;
}
.pen-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem;
  color: var(--dx-secondary-color);
}
.pen-loading::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--dx-border-color);
  border-top-color: var(--dx-primary);
  border-radius: 50%;
  animation: pen-spin .6s linear infinite;
}
@keyframes pen-spin { to { transform: rotate(360deg); } }

/* ── Jalali datepicker above modals ───────────────────────────────── */
/* The theme's jalalidatepicker defaults to inline z-index:1000, which is
   BELOW a Bootstrap modal (1055) — so inside a modal the calendar renders
   behind the dialog and is unclickable. The popup root element has class
   "jdp". pen-core.js also passes startWatch({zIndex:2000}); this !important
   rule is the belt-and-suspenders backstop for any picker instance. */
.jdp { z-index: 2000 !important; }

/* ── Internal messaging ───────────────────────────────────────────── */
.msg-list .msg-item:hover { background: var(--dx-primary-bg-subtle); }
.msg-list .msg-item.active { background: var(--dx-primary-bg-subtle); box-shadow: inset 3px 0 0 var(--dx-primary); }
.msg-bubble {
  max-width: 78%;
  border-radius: .75rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1.6;
}
.msg-bubble .msg-head { color: var(--dx-secondary-color); margin-bottom: .125rem; }
.msg-mine { background: var(--dx-primary); color: #fff; border-bottom-right-radius: .25rem; }
.msg-mine .msg-head { color: rgba(255, 255, 255, .75); }
.msg-theirs { background: var(--dx-tertiary-bg); color: var(--dx-body-color); border-bottom-left-radius: .25rem; }

/* unread badge (sidebar/topbar) */
.msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3125rem;
  border-radius: 999px;
  background: var(--dx-danger);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}
/* icon-overlay variant: only visible when the sidebar is icon-only
   (mobile drawer or data-sidebar=small), where .content is hidden. */
.main-sidebar .nav-link .icons { position: relative; }
.msg-badge-on-icon {
  display: none;
  position: absolute;
  top: -2px;
  inset-inline-start: calc(100% - 4px);
  margin: 0;
  min-width: 1rem;
  height: 1rem;
  font-size: .625rem;
}
@media (max-width: 991.98px) {
  html[data-sidebar="small"] .msg-badge-on-icon:not([hidden]),
  .msg-badge-on-icon:not([hidden]) { display: inline-flex; }
}
html[data-sidebar="small"] .msg-badge-on-icon:not([hidden]) { display: inline-flex; }

/* Keep compact navigation icon-only. The messages label also carries the
   Bootstrap .d-flex utility, whose !important declaration otherwise wins. */
html[data-sidebar="small"] .navbar-menu .nav-item > .nav-link > .content {
  display: none !important;
}

.sidebar-version {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: .5rem .625rem;
  border-top: 1px solid var(--dx-sidebar-border);
  color: var(--dx-sidebar-menu-title);
  font-size: .7rem;
  line-height: 1.3;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sidebar-version-compact { display: none; }
html[data-sidebar="small"] .sidebar-version { min-height: 2.75rem; padding-inline: .2rem; font-size: .62rem; }
html[data-sidebar="small"] .sidebar-version-full { display: none; }
html[data-sidebar="small"] .sidebar-version-compact { display: inline; }

/* ── Jalali datepicker above Bootstrap modals ─────────────────────── */
/* jdp-container ships with position:absolute but NO z-index, so inside a
   modal (z-index 1040) it renders behind the dialog and is unclickable.
   Raise it above the modal + its backdrop. */
jdp-container { z-index: 1080 !important; }
jdp-overlay   { z-index: 1075 !important; }

/* ── Org chart / ApexTree integration ─────────────────────────────── */
.org-group-switcher { align-items: stretch; }
.org-group-filter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-color: var(--dx-border-color);
  color: var(--dx-secondary-color);
  background: var(--dx-body-bg);
}
.org-group-filter:hover,
.org-group-filter.is-active {
  border-color: var(--dx-primary);
  color: var(--dx-primary);
  background: var(--dx-primary-bg-subtle);
}
.org-group-filter .org-group-count {
  min-width: 1.35rem;
  padding: .08rem .3rem;
  border-radius: 999px;
  color: var(--dx-secondary-color);
  background: var(--dx-tertiary-bg);
  font-size: .72rem;
  line-height: 1.25;
}
.org-group-filter.is-active .org-group-count {
  color: var(--dx-primary);
  background: var(--dx-body-bg);
}
#rightToLeftChart { min-height: 600px; overflow: auto; }
#rightToLeftChart #apexTreeWrapper { min-width: 100%; min-height: 600px; }
#rightToLeftChart svg { display: block; max-width: none; }
.org-apex-node {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: start;
}
.org-apex-node:hover { cursor: pointer; }
.org-apex-node:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: -3px; }
.org-apex-node h6 { max-width: 8rem; }
.org-apex-node .text-muted { max-width: 8rem; }
@media (max-width: 575.98px) {
  .org-group-switcher { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .25rem; }
  .org-group-filter { flex: 0 0 auto; }
  #rightToLeftChart { min-height: 480px; }
  #rightToLeftChart #apexTreeWrapper { min-height: 480px; }
}

/* ── Leads / placement workspace ─────────────────────────────────── */
.lead-workspace { --lead-ink: #172033; --lead-muted: #738096; --lead-line: #e8ecf2; --lead-blue: #2f6fed; }
.lead-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding: 1.5rem 1.75rem; border: 1px solid var(--lead-line); border-radius: 1rem; background: var(--dx-body-bg); }
.lead-kicker { color: var(--lead-blue); font-size: .75rem; font-weight: 700; }
.lead-hero h1 { margin: .35rem 0 .4rem; color: var(--lead-ink); font-size: 1.55rem; font-weight: 800; }
.lead-hero p, .lead-muted { color: var(--lead-muted); font-size: .82rem; }
.lead-hero-flow { display: flex; align-items: center; gap: .45rem; color: var(--lead-muted); font-size: .75rem; white-space: nowrap; }
.lead-hero-flow span { padding: .45rem .65rem; border-radius: .5rem; background: var(--dx-tertiary-bg); }
.lead-hero-flow span.is-active { color: var(--lead-blue); background: var(--dx-primary-bg-subtle); font-weight: 700; }
.lead-hero-flow svg { width: .8rem; height: .8rem; }
.lead-stat { display: flex; align-items: center; gap: .75rem; min-height: 5.4rem; padding: 1rem; border: 1px solid var(--lead-line); border-radius: .85rem; background: var(--dx-body-bg); }
.lead-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: .7rem; }
.lead-stat-icon svg { width: 1.2rem; height: 1.2rem; }
.lead-stat-blue { color: #2f6fed; background: #eaf1ff; }.lead-stat-amber { color: #ad7100; background: #fff4d9; }.lead-stat-violet { color: #7658c7; background: #f0ebff; }.lead-stat-green { color: #20855d; background: #e3f7ed; }
.lead-stat strong, .lead-stat small { display: block; }.lead-stat strong { color: var(--lead-ink); font-size: 1.25rem; line-height: 1.3; }.lead-stat small { color: var(--lead-muted); font-size: .75rem; }
.lead-form-card, .lead-queue-card { border-color: var(--lead-line); box-shadow: 0 .35rem 1.1rem rgba(32, 46, 74, .035); }
.lead-form-card .card-header, .lead-queue-card .card-header { padding: 1.15rem 1.25rem; background: transparent; border-bottom-color: var(--lead-line); }
.lead-version, .lead-code { color: var(--lead-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.lead-section-title { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--lead-line); }
.lead-section-title > span { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; color: #fff; background: var(--lead-blue); font-size: .75rem; font-weight: 700; }
.lead-section-title strong, .lead-section-title small { display: block; }.lead-section-title strong { color: var(--lead-ink); font-size: .85rem; }.lead-section-title small { margin-top: .12rem; color: var(--lead-muted); font-size: .7rem; }
.lead-form-card .form-label { color: var(--lead-ink); font-size: .78rem; font-weight: 600; }.lead-form-card .form-label b { color: var(--dx-danger); }
.lead-queue-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.lead-filters { display: flex; gap: .25rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--lead-line); overflow-x: auto; }.lead-filters button { border: 0; border-radius: .45rem; padding: .45rem .7rem; color: var(--lead-muted); background: transparent; font: inherit; font-size: .75rem; white-space: nowrap; }.lead-filters button:hover, .lead-filters button.is-active { color: var(--lead-blue); background: var(--dx-primary-bg-subtle); font-weight: 700; }
.lead-filters button:focus-visible, .lead-card .btn:focus-visible, #lead-refresh:focus-visible { outline: 3px solid rgba(47, 111, 237, .42); outline-offset: 2px; }
.lead-list { padding: .55rem .8rem .8rem; }.lead-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem .45rem; border-bottom: 1px solid var(--lead-line); }.lead-card:last-child { border-bottom: 0; }.lead-card-main, .lead-card-side { display: flex; align-items: center; gap: .7rem; }.lead-card-side { flex-direction: column; align-items: flex-end; gap: .35rem; }.lead-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.55rem; height: 2.55rem; border-radius: .75rem; color: var(--lead-blue); background: var(--dx-primary-bg-subtle); font-weight: 800; }.lead-card-name { color: var(--lead-ink); font-size: .85rem; }.lead-card-meta { margin-top: .22rem; color: var(--lead-muted); font-size: .7rem; }
.lead-status { display: inline-flex; align-items: center; padding: .22rem .48rem; border-radius: 999px; font-size: .65rem; font-weight: 700; white-space: nowrap; }.lead-status-new { color: #996900; background: #fff4d9; }.lead-status-sent, .lead-status-assessed { color: #654bb0; background: #efeaff; }.lead-status-recommended { color: #1b6a9b; background: #e5f4ff; }.lead-status-enrolled { color: #20855d; background: #e3f7ed; }.lead-status-lost { color: var(--lead-muted); background: var(--dx-tertiary-bg); }
.lead-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 3.5rem 1rem; color: var(--lead-muted); text-align: center; }.lead-empty svg { width: 2rem; height: 2rem; color: var(--lead-blue); }.lead-empty strong { color: var(--lead-ink); font-size: .9rem; }.lead-empty span { font-size: .75rem; }
.lead-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }.lead-detail-grid > div { padding: .75rem; border: 1px solid var(--lead-line); border-radius: .65rem; }.lead-detail-grid span, .lead-detail-grid strong, .lead-detail-note span { display: block; }.lead-detail-grid span, .lead-detail-note span { color: var(--lead-muted); font-size: .7rem; }.lead-detail-grid strong { margin-top: .35rem; color: var(--lead-ink); font-size: .82rem; }.lead-detail-note { margin-top: .75rem; padding: .8rem; border-radius: .65rem; background: var(--dx-tertiary-bg); }.lead-detail-note p { margin: .35rem 0 0; color: var(--lead-ink); font-size: .8rem; line-height: 1.8; }.lead-detail-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lead-line); }.lead-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .65rem; }.lead-inline-form .form-label { width: 100%; margin-bottom: -.2rem; color: var(--lead-ink); font-size: .75rem; font-weight: 600; }.lead-inline-form .form-select, .lead-inline-form .form-control { flex: 1 1 10rem; }.lead-inline-form .btn { flex: 0 0 auto; }
@media (max-width: 991.98px) { .lead-hero { align-items: flex-start; flex-direction: column; gap: 1rem; }.lead-hero-flow { flex-wrap: wrap; }.lead-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .lead-card { align-items: flex-start; }.lead-card-side { min-width: 4.4rem; }.lead-detail-grid { grid-template-columns: 1fr; } }
.lead-form-card .card-body { padding: 1.25rem; }
.lead-creator-report { border-bottom: 1px solid var(--lead-line); color: var(--lead-muted); }
.lead-creator-report summary { width: fit-content; padding: .35rem 0; color: var(--lead-muted); cursor: pointer; font-size: .76rem; }
.lead-creator-report summary:focus-visible { outline: 2px solid var(--lead-blue); outline-offset: 3px; }
.lead-creator-report .table { margin-top: .5rem; }
.lead-creator-report .table { color: var(--lead-ink); font-size: .8rem; }
.lead-creator-report .table th { color: var(--lead-muted); font-size: .72rem; font-weight: 700; }
.lead-form-card .form-control, .lead-form-card .form-select { min-height: 2.75rem; border-color: #dfe5ef; }
.lead-form-card textarea.form-control { min-height: auto; }
.lead-form-card .form-control:focus, .lead-form-card .form-select:focus { border-color: var(--lead-blue); box-shadow: 0 0 0 .18rem rgba(47, 111, 237, .13); }
.lead-form-card .form-text { margin-top: .32rem; color: #7d8799; font-size: .69rem; line-height: 1.55; }
.lead-input-unit { position: relative; }
.lead-input-unit .form-control { padding-inline-end: 2.6rem; }
.lead-input-unit span { position: absolute; inset-inline-end: .8rem; top: 50%; color: #788397; font-size: .72rem; transform: translateY(-50%); pointer-events: none; }
.lead-appointment { padding: 1rem; border: 1px solid #dbe6fa; border-radius: .75rem; background: #f6f9ff; }
.lead-appointment-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.lead-appointment-icon { display: grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: .65rem; color: #2f6fed; background: #e5edff; }
.lead-appointment-icon svg { width: 1.15rem; height: 1.15rem; }
.lead-appointment-heading h3 { margin: 0; color: #172b4d; font-size: .88rem; font-weight: 800; }
.lead-appointment-heading p { margin: .2rem 0 0; color: #71809a; font-size: .7rem; }
.lead-date-control { position: relative; }
.lead-date-control .form-control { padding-right: 2.8rem; }
.lead-calendar-open { position: absolute; top: 50%; right: .35rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: .45rem; color: #3868bd; background: #eaf0ff; transform: translateY(-50%); }
.lead-calendar-open:hover, .lead-calendar-open:focus-visible { color: #fff; background: #2f6fed; outline: 2px solid #8eaff5; outline-offset: 2px; }
.lead-calendar-open svg { width: 1rem; height: 1rem; }
.lead-date-shortcuts { display: flex; gap: .4rem; margin-top: .45rem; }
.lead-date-shortcuts button { padding: .2rem .55rem; border: 1px solid #d8e3f7; border-radius: 999px; color: #3868bd; background: #fff; font: inherit; font-size: .68rem; }
.lead-date-shortcuts button:hover, .lead-date-shortcuts button:focus-visible { border-color: #2f6fed; background: #eaf0ff; outline: 2px solid rgba(47, 111, 237, .18); outline-offset: 1px; }
.lead-time-input { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; }
.lead-optional-details { border-top: 1px solid var(--lead-line); border-bottom: 1px solid var(--lead-line); }
.lead-optional-details summary { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .85rem .15rem; cursor: pointer; list-style: none; }
.lead-optional-details summary::-webkit-details-marker { display: none; }
.lead-optional-details summary strong, .lead-optional-details summary small { display: block; }
.lead-optional-details summary strong { color: #344057; font-size: .78rem; }
.lead-optional-details summary small { margin-top: .18rem; color: #7d8799; font-size: .67rem; }
.lead-optional-details summary > svg { width: 1rem; height: 1rem; color: #7d8799; }
.lead-optional-details[open] summary { border-bottom: 1px solid var(--lead-line); }
.lead-form-card [aria-invalid="true"] { border-color: var(--dx-danger); }
.lead-form-card button:focus-visible, .lead-optional-details summary:focus-visible { outline: 3px solid rgba(47, 111, 237, .45); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .lead-form-card .card-body { padding: 1rem; }
  .lead-appointment { padding: .8rem; }
  .lead-appointment .col-7, .lead-appointment .col-5 { width: 100%; }
  .lead-appointment .lead-time-input { max-width: 100%; }
}
.org-node-row .org-toggle { padding: 0 .25rem; line-height: 1; }

/* ── Playhouse operator desk ─────────────────────────────────────── */
.ph-page { --ph-ink: #182338; --ph-muted: #7b8497; --ph-line: #e8ebf2; --ph-coral: #f47b62; --ph-coral-dark: #dc604b; --ph-mint: #2da98f; --ph-lavender: #f5f6fb; color: var(--ph-ink); padding-bottom: 2rem; }
.ph-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.65rem 1.8rem; margin: .15rem 0 1.25rem; border: 1px solid #ebeef5; border-radius: 1.15rem; background: linear-gradient(112deg, #fff8f4 0%, #fff 52%, #f2fbf9 100%); box-shadow: 0 .8rem 2.3rem rgba(24,35,56,.055); }
.ph-kicker { display: flex; align-items: center; gap: .45rem; color: var(--ph-coral-dark); font-size: .76rem; font-weight: 800; margin-bottom: .65rem; }
.ph-kicker-muted { color: var(--ph-muted); margin-bottom: .35rem; }
.ph-kicker-dot { width: .52rem; height: .52rem; border-radius: 50%; background: var(--ph-coral); box-shadow: 0 0 0 .26rem rgba(244,123,98,.14); }
.ph-hero h1, .ph-sessions-heading h2 { color: var(--ph-ink); letter-spacing: -.035em; }
.ph-hero h1 { font-size: clamp(1.5rem, 2.2vw, 2.05rem); margin: 0 0 .42rem; font-weight: 800; }
.ph-hero p, .ph-sessions-heading p, .ph-panel-heading p { color: var(--ph-muted); margin: 0; font-size: .88rem; }
.ph-rate-card { min-width: 14rem; padding: 1rem 1.1rem; border: 1px solid rgba(86,168,253,.32); border-radius: .95rem; background: #0b2a79; color: #fcf9ea; box-shadow: .6rem .7rem 0 rgba(249,138,174,.22); }
.ph-rate-card > span:last-child { display: block; color: #d5e6ff; font-size: .74rem; margin-top: .25rem; }
.ph-rate-label { display: flex; align-items: center; gap: .35rem; color: #ffc4d7 !important; font-size: .73rem; }
.ph-rate-label svg { width: .9rem; height: .9rem; }
.ph-rate-card strong { display: block; font-size: 1.45rem; line-height: 1.3; margin-top: .35rem; }
.ph-rate-card strong small { font-size: .72rem; font-weight: 500; }
.ph-layout { display: grid; grid-template-columns: minmax(19rem, 24rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ph-intake-panel, .ph-sessions-panel { background: #fff; border: 1px solid var(--ph-line); border-radius: 1.05rem; box-shadow: 0 .65rem 2rem rgba(24,35,56,.045); }
.ph-intake-panel { padding: 1.35rem; position: sticky; top: 1rem; }
.ph-panel-heading { display: flex; gap: .75rem; align-items: flex-start; padding-bottom: 1.15rem; margin-bottom: 1.05rem; border-bottom: 1px solid var(--ph-line); }
.ph-panel-heading h2 { font-size: 1.05rem; font-weight: 800; margin: .08rem 0 .28rem; }
.ph-heading-icon { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem; border-radius: .8rem; }
.ph-heading-icon-coral { background: #fff0eb; color: var(--ph-coral-dark); }
.ph-heading-icon svg { width: 1.25rem; height: 1.25rem; }
.ph-section-label { display: flex; align-items: center; gap: .48rem; font-size: .75rem; color: var(--ph-ink); font-weight: 800; margin: 1rem 0 .62rem; }
.ph-section-label span { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; color: var(--ph-coral-dark); background: #fff0eb; border-radius: 50%; font-size: .68rem; }
.ph-field { margin-bottom: .65rem; }
.ph-field label, .ph-member-picker label { display: block; color: #505a6e; font-size: .75rem; font-weight: 700; margin-bottom: .38rem; }
.ph-field .form-control, .ph-member-picker .form-control { min-height: 2.65rem; border-color: #e1e5ee; border-radius: .65rem; color: var(--ph-ink); background: #fcfdff; font-size: .84rem; }
.ph-field .form-control:focus, .ph-member-picker .form-control:focus { border-color: var(--ph-coral); box-shadow: 0 0 0 .2rem rgba(244,123,98,.12); background: #fff; }
.ph-field .form-control::placeholder, .ph-member-picker .form-control::placeholder { color: #aeb5c2; }
.ph-input-icon-wrap, .ph-input-suffix-wrap { position: relative; }
.ph-input-icon-wrap > svg { position: absolute; inset-inline-start: .78rem; top: 50%; width: 1rem; height: 1rem; color: #929bad; transform: translateY(-50%); z-index: 2; pointer-events: none; }
.ph-input-icon-wrap .form-control { padding-inline-start: 2.35rem; }
.ph-date-input { letter-spacing: .04em; }
.ph-input-suffix-wrap span { position: absolute; inset-inline-end: .75rem; top: 50%; color: #9aa2b2; font-size: .72rem; transform: translateY(-50%); pointer-events: none; }
.ph-input-suffix-wrap .form-control { padding-inline-end: 2.25rem; }
.ph-help, .ph-search-status { color: var(--ph-muted); font-size: .7rem; line-height: 1.7; margin-top: .34rem; }
.ph-member-picker { position: relative; }
.ph-input-clear { position: absolute; inset-inline-end: .55rem; top: 50%; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: .45rem; background: #eef0f5; color: #768096; transform: translateY(-50%); }
.ph-input-clear svg { width: .85rem; height: .85rem; }
.ph-input-clear ~ .form-control { padding-inline-end: 2.4rem; }
.ph-member-results { position: absolute; inset-inline: 0; top: 4.65rem; z-index: 30; overflow: hidden; border: 1px solid #dfe4ed; border-radius: .7rem; background: #fff; box-shadow: 0 .8rem 1.7rem rgba(24,35,56,.14); }
.ph-member-option { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .7rem .75rem; border: 0; border-bottom: 1px solid #f0f2f6; background: #fff; color: var(--ph-ink); text-align: start; }
.ph-member-option:last-child { border-bottom: 0; }
.ph-member-option:hover, .ph-member-option:focus-visible { background: #fff7f3; outline: 0; }
.ph-member-option-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: #eef8f5; color: var(--ph-mint); font-weight: 800; }
.ph-member-option strong, .ph-member-option small { display: block; }
.ph-member-option strong { font-size: .8rem; }
.ph-member-option small { color: var(--ph-muted); font-size: .68rem; margin-top: .18rem; }
.ph-member-empty { padding: .8rem; color: var(--ph-muted); font-size: .75rem; text-align: center; }
.ph-selected-member { display: flex; align-items: center; gap: .6rem; margin-top: .65rem; padding: .62rem .7rem; border: 1px solid #ccebe3; border-radius: .7rem; background: #f1fbf8; }
.ph-selected-avatar { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .55rem; background: var(--ph-mint); color: #fff; }
.ph-selected-avatar svg { width: 1rem; height: 1rem; }
.ph-selected-member strong, .ph-selected-member span { display: block; }
.ph-selected-member strong { font-size: .78rem; }
.ph-selected-member span { color: #66867e; font-size: .67rem; margin-top: .1rem; }
.ph-form-actions { display: flex; gap: .55rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--ph-line); }
.ph-primary-action { min-height: 2.7rem; border: 0; border-radius: .68rem; background: var(--ph-coral); color: #fff; font-size: .78rem; font-weight: 800; box-shadow: 0 .4rem .85rem rgba(244,123,98,.2); }
.ph-primary-action:hover, .ph-primary-action:focus-visible { background: var(--ph-coral-dark); color: #fff; }
.ph-primary-action svg, .ph-outline-action svg, .ph-icon-action svg { width: 1rem; height: 1rem; vertical-align: -.18rem; }
.ph-secondary-action, .ph-outline-action, .ph-icon-action { min-height: 2.7rem; border: 1px solid #dfe4ed; border-radius: .68rem; background: #fff; color: #647087; font-size: .77rem; font-weight: 700; }
.ph-secondary-action:hover, .ph-outline-action:hover, .ph-icon-action:hover { border-color: #c7cedb; background: #f8f9fc; color: var(--ph-ink); }
.ph-sessions-panel { min-width: 0; padding: 1.35rem; }
.ph-sessions-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .15rem .15rem 1.1rem; }
.ph-sessions-heading h2 { font-size: 1.3rem; margin: 0 0 .3rem; font-weight: 800; }
.ph-list-actions { display: flex; align-items: center; gap: .5rem; }
.ph-history-controls .ph-history-date { margin-bottom: 0; }
.ph-history-controls > .btn { min-height: 2.45rem; white-space: nowrap; }
.ph-outline-action { padding-inline: .8rem; }
.ph-icon-action { display: grid; place-items: center; width: 2.7rem; padding: 0; }
.ph-live-strip { display: flex; align-items: center; gap: 1.25rem; padding: .72rem .9rem; margin-bottom: .9rem; border: 1px solid #e5eee9; border-radius: .72rem; background: #f5fbf9; color: #55716a; font-size: .75rem; }
.ph-live-strip > div { display: flex; align-items: center; gap: .45rem; }
.ph-live-strip svg { width: .95rem; height: .95rem; color: var(--ph-mint); }
.ph-live-pulse { width: .48rem; height: .48rem; border-radius: 50%; background: var(--ph-mint); box-shadow: 0 0 0 .25rem rgba(45,169,143,.13); }
.ph-live-value { color: var(--ph-ink); font-weight: 800; margin-inline-start: .15rem; }
.ph-table-shell { overflow: hidden; border: 1px solid #e7eaf1; border-radius: .8rem; }
.ph-session-table { min-width: 680px; }
.ph-session-table thead th { padding: .85rem .85rem; border-bottom: 1px solid #e6e9f0; color: #7b8497; background: #fafbfc; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.ph-session-table tbody td { padding: .9rem .85rem; border-bottom: 1px solid #f0f2f6; font-size: .78rem; }
.ph-session-table tbody tr:last-child td { border-bottom: 0; }
.ph-session-table tbody tr:hover { background: #fcfdff; }
.ph-time-cell span { display: block; color: #737e92; font-size: .7rem; line-height: 1.8; white-space: nowrap; }
.ph-child-name { color: var(--ph-ink); font-weight: 800; }
.ph-child-age { color: #98a0af; font-size: .68rem; margin-top: .2rem; }
.ph-phone-cell { color: #68748a; font-size: .75rem !important; }
.ph-timer-cell { color: var(--ph-ink); font-size: 1.05rem !important; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.ph-status { display: inline-flex; align-items: center; gap: .38rem; padding: .35rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.ph-status > span { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.ph-status-waiting { color: #7c8595; background: #f0f2f5; }.ph-status-active { color: #18866e; background: #e8f7f2; }.ph-status-paused { color: #a36a12; background: #fff5df; }.ph-status-finished { color: #4f65ad; background: #eef1ff; }.ph-status-cancelled { color: #b65a64; background: #fff0f1; }.ph-status-invoiced { color: #5066ac; background: #eef1ff; }.ph-status-paid { color: #18866e; background: #e8f7f2; }
.ph-invoice-done { color: #18866e; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.ph-row-actions { display: inline-flex; align-items: center; gap: .35rem; }
.ph-row-btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 2rem; height: 2rem; padding: .35rem .5rem; border: 1px solid transparent; border-radius: .5rem; }
.ph-row-btn svg { width: .9rem; height: .9rem; }.ph-row-start { background: #e9f7f2; color: #16866d; }.ph-row-pause { background: #fff5df; color: #9d6915; }.ph-row-end, .ph-row-cancel { background: #fff0f1; color: #b65a64; }.ph-row-invoice { background: #eef1ff; color: #5066ac; font-size: .7rem; font-weight: 800; }.ph-row-btn:hover { filter: brightness(.96); }
.ph-empty-state { display: flex; align-items: center; flex-direction: column; gap: .35rem; padding: 3.5rem 1rem; color: var(--ph-muted); }.ph-empty-state strong { color: var(--ph-ink); font-size: .85rem; }.ph-empty-state span { font-size: .72rem; }.ph-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .35rem; border-radius: 1rem; background: #fff0eb; color: var(--ph-coral); }.ph-empty-icon svg { width: 1.35rem; height: 1.35rem; }
@media (max-width: 991.98px) { .ph-layout { grid-template-columns: 1fr; }.ph-intake-panel { position: static; }.ph-sessions-panel { order: 2; } }
@media (max-width: 575.98px) { .ph-hero { align-items: flex-start; flex-direction: column; padding: 1.2rem; }.ph-rate-card { width: 100%; }.ph-sessions-panel, .ph-intake-panel { padding: 1rem; }.ph-sessions-heading { flex-direction: column; }.ph-list-actions { width: 100%; }.ph-outline-action { flex-grow: 1; }.ph-live-strip { justify-content: space-between; gap: .5rem; font-size: .68rem; }.ph-form-actions { flex-direction: column; }.ph-secondary-action { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ph-page *, .ph-page *::before, .ph-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.org-node-row .org-person { text-decoration: none; padding: .125rem .25rem; }
.org-node-row .org-person:hover { color: var(--dx-primary); }

/* ── Work queue / requests cards ──────────────────────────────────── */
.wq-card { transition: box-shadow .15s, transform .15s; cursor: pointer; }
.wq-card:hover { box-shadow: 0 .5rem 1rem rgba(2, 6, 23, .12); transform: translateY(-1px); }
.nav-tabs .nav-link { cursor: pointer; }

/* ── Request detail timeline ──────────────────────────────────────── */
.pen-timeline {
  list-style: none;
  margin: 0;
  padding: 0 1rem 0 0; /* RTL: line on the right */
  position: relative;
}
.pen-timeline::before {
  content: '';
  position: absolute;
  top: .25rem; bottom: .25rem;
  right: .3125rem;
  width: 2px;
  background: var(--dx-border-color);
}
.pen-timeline-item {
  position: relative;
  padding: 0 1.25rem .875rem 0;
}
.pen-timeline-item::before {
  content: '';
  position: absolute;
  right: 0;
  top: .375rem;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--dx-primary);
  box-shadow: 0 0 0 3px var(--dx-body-bg);
}
.pen-workflow-timeline { list-style: none; margin: 0; padding: 0 1rem 0 0; position: relative; }
.pen-workflow-timeline::before { content: ''; position: absolute; top: .25rem; bottom: .25rem; right: .3125rem; width: 2px; background: var(--dx-border-color); }
.pen-workflow-timeline > li { position: relative; padding: 0 1.25rem .875rem 0; }
.pen-workflow-timeline > li::before { content: ''; position: absolute; right: 0; top: .375rem; width: .625rem; height: .625rem; border-radius: 50%; background: var(--dx-primary); box-shadow: 0 0 0 3px var(--dx-body-bg); }

/* ── Timetable grid (rows=locations, cols=1h slots) ─────────────── */
.timetable-grid th, .timetable-grid td { text-align: center; vertical-align: middle; }
.timetable-grid .tt-corner { min-width: 160px; width: 180px; font-weight: 600; }
.timetable-grid .tt-hour { font-size: .8125rem; font-weight: 600; color: var(--dx-secondary-color); min-width: 92px; }
.timetable-grid .tt-loc { min-width: 160px; text-align: right; font-weight: 600; background: var(--dx-tertiary-bg); }
.timetable-grid .tt-loc .tt-sub { display: block; font-weight: 400; font-size: .75rem; color: var(--dx-secondary-color); }
.timetable-grid .tt-empty { height: 64px; }
.tt-cell { padding: 3px !important; height: 64px; }
.tt-block {
  height: 100%;
  border-radius: .5rem;
  padding: .375rem .5rem;
  border-inline-start: 3px solid var(--dx-primary);
  background: var(--dx-primary-bg-subtle);
  cursor: default;
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.tt-block:hover, .tt-block:focus-visible {
  box-shadow: 0 .5rem 1rem rgba(2, 6, 23, .15);
  transform: translateY(-2px);
  outline: none;
}
.tt-block .tt-title {
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-block .tt-meta {
  font-size: .71875rem;
  color: var(--dx-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-block .tt-code {
  font-family: var(--dx-font-monospace, monospace);
  font-size: .6875rem;
  background: rgba(2, 6, 23, .06);
  border-radius: .25rem;
  padding: 0 .25rem;
}
.tt-block.tt-held { border-inline-start-color: var(--dx-success); background: var(--dx-success-bg-subtle); }
.tt-block.tt-cancelled { border-inline-start-color: var(--dx-danger); background: var(--dx-danger-bg-subtle); opacity: .7; }
.tt-tooltip .tooltip-inner { white-space: pre-line; text-align: right; max-width: 280px; }
.tt-dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; }

/* ── Avatar placeholder in profile dropdown ─────────────────────── */
.pen-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dx-primary);
  color: var(--dx-white, #fff);
  font-weight: 600;
}

/* ── Mobile-first: full-width fields on xs ──────────────────────── */
@media (max-width: 575.98px) {
  .pen-field[data-span="2"] { width: 100%; }
  .pen-definition-list th { width: auto; }
  .topbar-user-copy, .main-topbar .topbar-user > .size-4 { display: none !important; }
  .main-topbar .topbar-user { padding-inline: .35rem; }
}

/* ── Teacher / learner portal (attendance + report cards) ─────────── */
.pen-seg { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.pen-seg .btn { min-width: 2.6rem; }

/* attendance status pill (present/absent/late/excused) */
.pen-status { display: inline-flex; align-items: center; gap: .375rem; border: 0;
  border-radius: 999px; padding: .25rem .75rem; font-size: .8125rem; font-weight: 600;
  background: var(--dx-gray-200); color: var(--dx-gray-700); cursor: pointer; line-height: 1; }
.pen-status .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .8; }
.pen-status.present  { background: var(--dx-success-bg-subtle);  color: var(--dx-success-text-emphasis, var(--dx-success)); }
.pen-status.absent   { background: var(--dx-danger-bg-subtle);   color: var(--dx-danger-text-emphasis, var(--dx-danger)); }
.pen-status.late     { background: var(--dx-warning-bg-subtle);  color: var(--dx-warning-text-emphasis, var(--dx-warning)); }
.pen-status.excused  { background: var(--dx-info-bg-subtle);     color: var(--dx-info-text-emphasis, var(--dx-info)); }
.pen-status.unset    { background: var(--dx-gray-200);           color: var(--dx-gray-700); }

/* report-card result pill (passed/failed) */
.pen-result { display: inline-flex; align-items: center; gap: .375rem; border-radius: 999px;
  padding: .25rem .75rem; font-size: .8125rem; font-weight: 700; }
.pen-result.passed { background: var(--dx-success-bg-subtle); color: var(--dx-success-text-emphasis, var(--dx-success)); }
.pen-result.failed { background: var(--dx-danger-bg-subtle);  color: var(--dx-danger-text-emphasis, var(--dx-danger)); }

/* attendance rate ring on the learner portal */
.pen-ring { --pen-ring: 0; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--dx-success) calc(var(--pen-ring) * 1%), var(--dx-gray-200) 0); }
.pen-ring > span { width: 74px; height: 74px; border-radius: 50%; background: var(--dx-card-bg, #fff);
  display: grid; place-items: center; font-weight: 800; font-size: 1.125rem; }

/* class picker card on the teacher pages */
.pen-class-card { border: 1px solid var(--dx-border-color); border-radius: .75rem; transition: border-color .15s, box-shadow .15s; }
.pen-class-card:hover { border-color: var(--dx-primary); box-shadow: 0 .375rem 1rem rgba(2,6,23,.08); }
.pen-class-card.selected { border-color: var(--dx-primary); box-shadow: 0 0 0 2px var(--dx-primary-bg-subtle); }

/* roster table row tint when a status is chosen */
.att-row.marked { background: var(--dx-tertiary-bg); }
.att-row .row-note { min-width: 200px; }

/* the day the class runs, on the teacher dashboard */
.pen-week-strip { display: flex; gap: .375rem; flex-wrap: wrap; }
.pen-week-chip { font-size: .75rem; padding: .125rem .5rem; border-radius: .375rem;
  background: var(--dx-primary-bg-subtle); color: var(--dx-primary); font-weight: 600; }

/* ── Reports & Analytics Dashboard ────────────────────────────────── */
.pen-reports { --report-ink: #123b5d; --report-teal: #0f6b67; --report-saffron: #e5a83b;
  --report-plum: #934b70; --report-paper: #f7f9fb; color: var(--dx-body-color); }
.report-hero { min-height: 168px; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  overflow: hidden; position: relative; padding: 2rem 2.25rem; border-radius: 1rem;
  color: #fff; background: var(--report-ink); isolation: isolate; }
.report-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .65;
  background: radial-gradient(circle at 12% 25%, rgba(229,168,59,.55), transparent 25%),
    linear-gradient(135deg, transparent 38%, rgba(15,107,103,.7) 100%); }
.report-kicker { display: block; margin-bottom: .65rem; color: #e5d5a7; font-size: .8rem; font-weight: 700; }
.report-hero-title { margin: 0; font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -.03em; font-weight: 800; }
.report-hero-copy { max-width: 38rem; color: rgba(255,255,255,.76); font-size: .95rem; }
.report-hero-mark { width: 132px; height: 110px; position: relative; flex: 0 0 auto; opacity: .9; }
.report-mark-bar { position: absolute; bottom: 16px; width: 18px; border-radius: 10px 10px 2px 2px; background: #e5a83b; }
.report-mark-bar-one { right: 92px; height: 42px; }.report-mark-bar-two { right: 58px; height: 70px; background: #7fc2b4; }.report-mark-bar-three { right: 24px; height: 94px; background: #fff; }
.report-mark-dot { position: absolute; right: 9px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #e5a83b; box-shadow: 0 0 0 8px rgba(229,168,59,.16); }
.report-toolbar { border: 1px solid rgba(18,59,93,.12); box-shadow: 0 12px 28px rgba(18,59,93,.06); }
.report-toolbar .form-label { margin-bottom: .4rem; font-size: .78rem; font-weight: 700; color: var(--report-ink); }
.report-loading { display: flex; align-items: center; gap: .55rem; margin: -1rem 0 1rem; color: var(--report-teal); font-size: .83rem; }
.pen-reports.is-loading .report-panel, .pen-reports.is-loading .report-kpi { opacity: .68; transition: opacity .2s ease; }
.report-kpi { min-height: 126px; position: relative; display: flex; align-items: center; gap: .85rem; overflow: hidden;
  padding: 1.1rem 1.15rem; border-radius: .85rem; color: #fff; box-shadow: 0 10px 24px rgba(18,59,93,.12); }
.report-kpi::after { content: ""; position: absolute; width: 125px; height: 125px; left: -42px; bottom: -55px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255,255,255,.05), 0 0 0 28px rgba(255,255,255,.04); }
.report-kpi-navy { background: #123b5d; }.report-kpi-teal { background: #0f6b67; }.report-kpi-saffron { background: #b87b16; }.report-kpi-plum { background: #934b70; }
.report-kpi-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: .7rem; background: rgba(255,255,255,.15); }
.report-kpi-icon svg { width: 22px; height: 22px; }.report-kpi-label { display: block; margin-bottom: .22rem; font-size: .78rem; color: rgba(255,255,255,.78); }
.report-kpi strong { display: block; font-size: 1.26rem; line-height: 1.2; }.report-kpi-caption { position: absolute; right: 1.15rem; bottom: .8rem; color: rgba(255,255,255,.55); font-size: .69rem; }
.report-section-title { color: var(--report-ink); font-size: 1.12rem; font-weight: 800; }.report-panel { overflow: hidden; border: 1px solid rgba(18,59,93,.1); box-shadow: 0 8px 22px rgba(18,59,93,.045); }
.report-panel .card-header { padding: 1rem 1.15rem; border-bottom: 1px solid rgba(18,59,93,.08); background: transparent; }.report-panel .card-body { padding: 1.15rem; }
.report-chart { min-height: 280px; }.report-chart-small { min-height: 220px; }.report-chart-short { min-height: 230px; }
.report-table th { padding: .8rem 1rem; color: var(--report-ink); background: #f7f9fb; border-bottom-width: 1px; font-size: .76rem; white-space: nowrap; }.report-table td { padding: .78rem 1rem; font-size: .82rem; border-color: #edf1f4; }.report-table tbody tr:last-child td { border-bottom: 0; }
.report-finance-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }.report-finance-stats div, .report-inline-metrics div { padding: .7rem .8rem; border-radius: .55rem; background: #f7f9fb; }.report-finance-stats span, .report-inline-metrics span { display: block; color: var(--dx-secondary-color); font-size: .73rem; }.report-finance-stats strong, .report-inline-metrics strong { display: block; margin-top: .15rem; color: var(--report-ink); font-size: 1rem; }
.report-room-row .progress, .report-form-row .progress { height: 8px; overflow: hidden; background: #edf1f4; border-radius: 99px; }.report-room-row .progress-bar, .report-form-row .progress-bar { border-radius: 99px; background: linear-gradient(90deg, var(--report-teal), #73bcae); }.report-room-row:nth-child(2n) .progress-bar { background: linear-gradient(90deg, var(--report-plum), #c789a8); }
.report-attendance-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }.report-attendance-summary div { display: flex; align-items: center; gap: .45rem; color: var(--dx-secondary-color); font-size: .85rem; }.report-attendance-summary strong { margin-right: auto; color: var(--report-ink); }.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }.dot-success { background: #27a88f; }.dot-danger { background: #ef6a5b; }.dot-warning { background: #e5a83b; }.dot-info { background: #4c8ca8; }
.report-response-metric { padding: 1rem; border-radius: .7rem; background: #edf7f5; }.report-response-metric strong { display: block; color: var(--report-teal); font-size: 1.8rem; }.report-response-metric span { color: #47736f; font-size: .78rem; }.report-inline-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .8rem; }
.pen-empty { display: grid; place-items: center; min-height: 120px; padding: 1rem; color: var(--dx-secondary-color); font-size: .82rem; text-align: center; }
.pen-actions-dropdown .dropdown-toggle::after { display: none; }
.pen-actions-dropdown .dropdown-menu { min-width: 10rem; box-shadow: 0 .5rem 1.25rem rgba(15,23,42,.12); }
.pen-actions-dropdown .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.pen-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.pen-detail-meta > div { padding: .7rem .8rem; border: 1px solid var(--dx-border-color); border-radius: .65rem; background: var(--dx-tertiary-bg); }
.pen-detail-meta small { display: block; color: var(--dx-secondary-color); font-size: .72rem; }
.pen-detail-meta strong { display: block; margin-top: .2rem; font-size: .86rem; }
@media (max-width: 575.98px) { .report-hero { min-height: 150px; padding: 1.35rem; }.report-hero-mark { display: none; }.report-kpi { min-height: 112px; }.report-kpi strong { font-size: 1.08rem; }.report-attendance-summary { grid-template-columns: 1fr; }.report-inline-metrics { grid-template-columns: 1fr; } }
@media print { @page { size: A4 landscape; margin: 12mm; } body { background: #fff !important; }.main-sidebar, .main-topbar, .main-footer, .page-heading, .report-toolbar, .report-nav, .report-index, .report-loading, [data-report-export], #report-print { display: none !important; }.page-wrapper { margin: 0 !important; }.pen-reports { color: #111 !important; }.report-hero { min-height: 110px; padding: 1rem 1.25rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }.report-panel, .report-kpi { break-inside: avoid; box-shadow: none !important; }.report-section-title { margin-top: .65rem; }.card { border-color: #cbd5e1 !important; } }

/* ── Dark theme bridge for project-specific surfaces ────────────────
   Bootstrap/Domiex already switches the --dx-* tokens. These modules
   were added on top of the purchased theme and therefore need an explicit
   dark palette for their original light-only colors. */
[data-bs-theme="dark"] .bg-white { background-color: var(--dx-secondary-bg) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--dx-body-color) !important; }
[data-bs-theme="dark"] .btn-light {
  --dx-btn-color: var(--dx-body-color);
  --dx-btn-bg: var(--dx-tertiary-bg);
  --dx-btn-border-color: var(--dx-border-color);
  --dx-btn-hover-color: var(--dx-body-color);
  --dx-btn-hover-bg: var(--dx-secondary-bg);
  --dx-btn-hover-border-color: var(--dx-primary-border-subtle);
}
[data-bs-theme="dark"] .table-light {
  --dx-table-color: var(--dx-body-color);
  --dx-table-bg: var(--dx-tertiary-bg);
  --dx-table-border-color: var(--dx-border-color);
}
[data-bs-theme="dark"] .table-light > :not(caption) > * > * {
  background-color: var(--dx-tertiary-bg);
  color: var(--dx-body-color);
  border-color: var(--dx-border-color);
}

/* Leads / placement workspace */
[data-bs-theme="dark"] .lead-workspace {
  --lead-ink: var(--dx-body-color);
  --lead-muted: var(--dx-secondary-color);
  --lead-line: var(--dx-border-color);
  --lead-blue: var(--dx-primary);
}
[data-bs-theme="dark"] .lead-stat-blue { color: var(--dx-primary); background: var(--dx-primary-bg-subtle); }
[data-bs-theme="dark"] .lead-stat-amber { color: var(--dx-warning-text-emphasis); background: var(--dx-warning-bg-subtle); }
[data-bs-theme="dark"] .lead-stat-violet { color: var(--dx-indigo-text-emphasis); background: var(--dx-indigo-bg-subtle); }
[data-bs-theme="dark"] .lead-stat-green { color: var(--dx-success-text-emphasis); background: var(--dx-success-bg-subtle); }
[data-bs-theme="dark"] .lead-status-new { color: var(--dx-warning-text-emphasis); background: var(--dx-warning-bg-subtle); }
[data-bs-theme="dark"] .lead-status-sent,
[data-bs-theme="dark"] .lead-status-assessed { color: var(--dx-indigo-text-emphasis); background: var(--dx-indigo-bg-subtle); }
[data-bs-theme="dark"] .lead-status-recommended { color: var(--dx-info-text-emphasis); background: var(--dx-info-bg-subtle); }
[data-bs-theme="dark"] .lead-status-enrolled { color: var(--dx-success-text-emphasis); background: var(--dx-success-bg-subtle); }
[data-bs-theme="dark"] .lead-form-card .form-control,
[data-bs-theme="dark"] .lead-form-card .form-select { border-color: var(--dx-border-color); }
[data-bs-theme="dark"] .lead-appointment { border-color: var(--dx-primary-border-subtle); background: var(--dx-primary-bg-subtle); }
[data-bs-theme="dark"] .lead-appointment-icon { color: var(--dx-primary); background: var(--dx-primary-bg-subtle); }
[data-bs-theme="dark"] .lead-calendar-open { color: var(--dx-primary); background: var(--dx-primary-bg-subtle); }
[data-bs-theme="dark"] .lead-date-shortcuts button { border-color: var(--dx-primary-border-subtle); color: var(--dx-primary); background: var(--dx-secondary-bg); }
[data-bs-theme="dark"] .lead-date-shortcuts button:hover,
[data-bs-theme="dark"] .lead-date-shortcuts button:focus-visible { background: var(--dx-primary-bg-subtle); }

/* Playhouse operator desk */
[data-bs-theme="dark"] .ph-page {
  --ph-ink: var(--dx-body-color);
  --ph-muted: var(--dx-secondary-color);
  --ph-line: var(--dx-border-color);
  --ph-lavender: var(--dx-tertiary-bg);
}
[data-bs-theme="dark"] .ph-hero {
  border-color: var(--ph-line);
  background: linear-gradient(112deg, color-mix(in srgb, var(--ph-coral) 12%, var(--dx-secondary-bg)), var(--dx-secondary-bg) 52%, color-mix(in srgb, var(--ph-mint) 12%, var(--dx-secondary-bg)));
}
[data-bs-theme="dark"] .ph-rate-card {
  border-color: rgba(86,168,253,.55);
  box-shadow: .6rem .7rem 0 rgba(249,138,174,.13);
}
[data-bs-theme="dark"] .ph-intake-panel,
[data-bs-theme="dark"] .ph-sessions-panel { background: var(--dx-secondary-bg); }
[data-bs-theme="dark"] .ph-heading-icon-coral,
[data-bs-theme="dark"] .ph-section-label span,
[data-bs-theme="dark"] .ph-empty-icon { background: color-mix(in srgb, var(--ph-coral) 18%, var(--dx-secondary-bg)); }
[data-bs-theme="dark"] .ph-field label,
[data-bs-theme="dark"] .ph-member-picker label { color: var(--dx-body-color); }
[data-bs-theme="dark"] .ph-field .form-control,
[data-bs-theme="dark"] .ph-member-picker .form-control { border-color: var(--dx-border-color); color: var(--ph-ink); background: var(--dx-body-bg); }
[data-bs-theme="dark"] .ph-field .form-control:focus,
[data-bs-theme="dark"] .ph-member-picker .form-control:focus { background: var(--dx-body-bg); }
[data-bs-theme="dark"] .ph-input-clear { background: var(--dx-tertiary-bg); color: var(--dx-secondary-color); }
[data-bs-theme="dark"] .ph-member-results { border-color: var(--dx-border-color); background: var(--dx-secondary-bg); }
[data-bs-theme="dark"] .ph-member-option { border-bottom-color: var(--dx-border-color); background: var(--dx-secondary-bg); }
[data-bs-theme="dark"] .ph-member-option:hover,
[data-bs-theme="dark"] .ph-member-option:focus-visible { background: color-mix(in srgb, var(--ph-coral) 10%, var(--dx-secondary-bg)); }
[data-bs-theme="dark"] .ph-member-option-avatar { background: var(--dx-success-bg-subtle); }
[data-bs-theme="dark"] .ph-selected-member { border-color: var(--dx-success-border-subtle); background: var(--dx-success-bg-subtle); }
[data-bs-theme="dark"] .ph-secondary-action,
[data-bs-theme="dark"] .ph-outline-action,
[data-bs-theme="dark"] .ph-icon-action { border-color: var(--dx-border-color); background: var(--dx-tertiary-bg); color: var(--dx-body-color); }
[data-bs-theme="dark"] .ph-secondary-action:hover,
[data-bs-theme="dark"] .ph-outline-action:hover,
[data-bs-theme="dark"] .ph-icon-action:hover { border-color: var(--dx-primary-border-subtle); background: var(--dx-secondary-bg); }
[data-bs-theme="dark"] .ph-live-strip { border-color: var(--dx-success-border-subtle); background: var(--dx-success-bg-subtle); color: var(--dx-secondary-color); }
[data-bs-theme="dark"] .ph-table-shell { border-color: var(--dx-border-color); }
[data-bs-theme="dark"] .ph-session-table thead th { border-color: var(--dx-border-color); color: var(--dx-secondary-color); background: var(--dx-tertiary-bg); }
[data-bs-theme="dark"] .ph-session-table tbody td { border-color: var(--dx-border-color); }
[data-bs-theme="dark"] .ph-session-table tbody tr:hover { background: var(--dx-tertiary-bg); }
[data-bs-theme="dark"] .ph-status-waiting { color: var(--dx-secondary-color); background: var(--dx-tertiary-bg); }
[data-bs-theme="dark"] .ph-status-active,
[data-bs-theme="dark"] .ph-status-paid { color: var(--dx-success-text-emphasis); background: var(--dx-success-bg-subtle); }
[data-bs-theme="dark"] .ph-status-paused { color: var(--dx-warning-text-emphasis); background: var(--dx-warning-bg-subtle); }
[data-bs-theme="dark"] .ph-status-finished,
[data-bs-theme="dark"] .ph-status-invoiced { color: var(--dx-indigo-text-emphasis); background: var(--dx-indigo-bg-subtle); }
[data-bs-theme="dark"] .ph-status-cancelled { color: var(--dx-danger-text-emphasis); background: var(--dx-danger-bg-subtle); }
[data-bs-theme="dark"] .ph-row-start { background: var(--dx-success-bg-subtle); color: var(--dx-success-text-emphasis); }
[data-bs-theme="dark"] .ph-row-pause { background: var(--dx-warning-bg-subtle); color: var(--dx-warning-text-emphasis); }
[data-bs-theme="dark"] .ph-row-end,
[data-bs-theme="dark"] .ph-row-cancel { background: var(--dx-danger-bg-subtle); color: var(--dx-danger-text-emphasis); }
[data-bs-theme="dark"] .ph-row-invoice { background: var(--dx-indigo-bg-subtle); color: var(--dx-indigo-text-emphasis); }

/* Minimal operating surfaces: keep live actions prominent and remove duplicate framing. */
.lead-form-card, .lead-queue-card { box-shadow: none; }
.lead-form-card .card-header, .lead-queue-card .card-header { padding: 1rem 1.15rem; }
.lead-form-card .card-body { padding: 1.15rem; }
.lead-section-title { padding-bottom: .55rem; }
.lead-section-title > span { display: none; }
.lead-appointment { border: 1px solid var(--lead-line); background: transparent; }
.lead-appointment-heading { margin-bottom: .8rem; }

.ph-page .ph-hero { min-height: 3.5rem; padding: 0 0 1rem; margin: 0 0 1rem; border: 0; border-bottom: 1px solid var(--ph-line); border-radius: 0; background: transparent; box-shadow: none; }
.ph-page .ph-hero h1 { margin: 0; color: var(--ph-ink); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
.ph-page .ph-rate-card { display: flex; align-items: baseline; gap: .55rem; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ph-ink); }
.ph-page .ph-rate-card > span:last-child { display: none; }
.ph-page .ph-rate-label { color: var(--ph-muted) !important; font-size: .75rem; }
.ph-page .ph-rate-card strong { margin: 0; font-size: 1rem; font-variant-numeric: tabular-nums; }
.ph-page .ph-rate-card strong small { color: var(--ph-muted); font-size: .72rem; }
.ph-page .ph-hero-tools { display: flex; align-items: center; gap: .55rem; }
.ph-page .ph-cafe-manage-card { display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; border: 1px solid var(--ph-line); border-radius: .45rem; background: var(--dx-body-bg); color: var(--ph-ink); text-align: start; }
.ph-page .ph-cafe-manage-card > i:first-child { color: var(--dx-primary); }
.ph-page .ph-cafe-manage-card > i:last-child { color: var(--ph-muted); font-size: .85rem; }
.ph-page .ph-cafe-manage-card span { display: grid; gap: .05rem; }
.ph-page .ph-cafe-manage-card strong { font-size: .75rem; font-weight: 700; }
.ph-page .ph-cafe-manage-card small { color: var(--ph-muted); font-size: .65rem; }
.ph-page .ph-cafe-manage-card:hover { border-color: var(--dx-primary); background: var(--dx-primary-bg-subtle); }
.ph-page #ph-cafe-preset-list .ph-cafe-preset-row + .ph-cafe-preset-row { margin-top: .15rem; }
.ph-page #ph-cafe-preset-list .ph-cafe-preset-row .btn { white-space: nowrap; }
.ph-page .ph-layout { grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr); gap: 1rem; }
.ph-page .ph-intake-panel, .ph-page .ph-sessions-panel { border-color: var(--ph-line); border-radius: .65rem; box-shadow: none; }
.ph-page .ph-intake-panel { padding: 1.1rem; position: static; }
.ph-page .ph-panel-heading { padding-bottom: .75rem; margin-bottom: .75rem; }
.ph-page .ph-panel-heading h2 { margin: 0; font-size: .95rem; font-weight: 700; }
.ph-page .ph-section-label { margin: .85rem 0 .5rem; font-size: .73rem; }
.ph-page .ph-section-label span { display: none; }
.ph-page .ph-optional-details { margin-top: .15rem; border-bottom: 1px solid var(--ph-line); }
.ph-page .ph-optional-details summary { width: fit-content; padding: .45rem 0; color: var(--ph-muted); cursor: pointer; font-size: .72rem; }
.ph-page .ph-optional-details summary:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 2px; }
.ph-page .ph-optional-details[open] summary { color: var(--ph-ink); }
.ph-page .ph-field { margin-bottom: .5rem; }
.ph-page .ph-field .form-control, .ph-page .ph-member-picker .form-control { border-radius: .4rem; background: var(--dx-body-bg); }
.ph-page .ph-sessions-panel { padding: 1.1rem; }
.ph-page .ph-sessions-heading { align-items: center; padding: 0 0 .8rem; }
.ph-page .ph-sessions-heading h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.ph-page .ph-live-strip { padding: .55rem .7rem; margin-bottom: .7rem; border: 0; border-radius: .4rem; }
.ph-page .ph-table-shell { border-radius: .45rem; }
.ph-page .ph-session-table thead th { padding: .7rem .65rem; }
.ph-page .ph-session-table tbody td { padding: .7rem .65rem; }
.ph-page .ph-session-table { width: 100%; min-width: 980px; }
.ph-page .ph-session-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--dx-tertiary-bg) 38%, transparent); }
.ph-page .ph-session-table tbody td { vertical-align: middle; overflow-wrap: anywhere; }
.ph-page .ph-row-actions { flex-wrap: wrap; justify-content: flex-end; }
.ph-page .ph-row-btn { flex: 0 0 2.25rem; min-height: 2.25rem; }
.ph-page .ph-session-table [data-role="timer"] { white-space: nowrap; }
.ph-page .ph-time-cell span { display: flex; align-items: center; justify-content: center; gap: .3rem; line-height: 1.45; }
.ph-page .ph-time-cell svg { width: .78rem; height: .78rem; color: var(--dx-secondary-color); }
.ph-page .ph-time-cell b { font-size: .64rem; font-weight: 700; }
.ph-page .ph-row-actions { gap: .25rem; }
.ph-page .ph-row-btn { transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ph-page .ph-row-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px #18253d18; }
.ph-page .ph-row-btn:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 2px; }
.ph-page .ph-status-ready { color: #13785e; background: #e3f6ee; }
.ph-page .form-check-input { width: 1.1rem; height: 1.1rem; }
.ph-page .btn-check + .btn { min-height: 2.5rem; }
.ph-page .ph-field .form-control { width: 100%; min-width: 0; }
.ph-page .ph-intake-panel, .ph-page .ph-sessions-panel { min-width: 0; }
.ph-page .ph-primary-action, .ph-page .ph-secondary-action, .ph-page .ph-outline-action, .ph-page .ph-icon-action { min-height: 2.45rem; border-radius: .4rem; box-shadow: none; }
.ph-fin-number { font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) { .ph-page .ph-layout { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .ph-page .ph-hero { align-items: center; flex-direction: row; padding: 0 0 .8rem; }.ph-page .ph-hero-tools { gap: .35rem; }.ph-page .ph-sessions-panel, .ph-page .ph-intake-panel { padding: .9rem; }.ph-page .ph-rate-card { width: auto; }.ph-page .ph-rate-label { font-size: .68rem; }.ph-page .ph-cafe-manage-card { gap: .3rem; padding: .35rem .45rem; }.ph-page .ph-cafe-manage-card small { display: none; } }

/* ── Playhouse history controls ───────────────────────────────────── */
.ph-page .ph-history-controls {
  display: grid !important;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: end;
  gap: .5rem;
}
.ph-page .ph-history-controls .ph-history-date {
  min-width: 0;
  margin-bottom: 0;
}
.ph-page .ph-history-controls .ph-history-date .form-control,
.ph-page .ph-history-controls > .btn {
  height: 2.65rem;
  min-height: 2.65rem;
}
.ph-page .ph-history-controls > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .ph-page .ph-history-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .ph-page .ph-history-controls .ph-history-date { grid-column: 1 / -1; }
.ph-page .ph-history-controls > .btn { width: auto; }
}

/* ── Main dashboard ───────────────────────────────────────────────── */
.pen-dashboard { max-width: 88rem; margin-inline: auto; }
.pen-dashboard-card { overflow: hidden; box-shadow: none; }
.pen-dashboard-card .card-header { min-height: 3.8rem; padding: .8rem 1rem; }
.pen-dashboard-card .card-body { padding: 1rem; }
.pen-dashboard .pen-stat-card { min-height: 5.75rem; box-shadow: none; }
.pen-dashboard .pen-stat-card .avatar { width: 2rem; height: 2rem; color: var(--dx-secondary-color) !important; background: transparent !important; }
.pen-dashboard .pen-stat-card .pen-stat-caption { padding: 0; color: var(--dx-secondary-color); background: transparent; font-size: .67rem; font-weight: 500; }
.pen-dashboard-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.pen-dashboard-quick-link { display: flex; align-items: center; gap: .65rem; min-width: 0; min-height: 3.35rem; padding: .65rem .15rem; border: 0; border-bottom: 1px solid var(--dx-border-color); border-radius: 0; color: var(--dx-body-color); background: transparent; text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.pen-dashboard-quick-link:hover, .pen-dashboard-quick-link:focus-visible { color: var(--dx-primary); background: var(--dx-primary-bg-subtle); transform: none; }
.pen-dashboard-quick-link.is-primary { border: 0; border-bottom: 1px solid var(--dx-primary-border-subtle, var(--dx-border-color)); border-radius: 0; background: transparent; color: var(--dx-body-color); }
.pen-dashboard-quick-link.is-primary:hover, .pen-dashboard-quick-link.is-primary:focus-visible { background: var(--dx-primary-bg-subtle); color: var(--dx-primary); }
.pen-dashboard-quick-icon { display: grid; place-items: center; flex: 0 0 1.85rem; width: 1.85rem; height: 1.85rem; border-radius: .4rem; color: var(--dx-secondary-color); background: transparent; }
.pen-dashboard-quick-link:hover .pen-dashboard-quick-icon, .pen-dashboard-quick-link:focus-visible .pen-dashboard-quick-icon, .pen-dashboard-quick-link.is-primary .pen-dashboard-quick-icon { color: var(--dx-primary); background: transparent; }
.pen-dashboard-quick-link > span:not(.pen-dashboard-quick-icon) { display: grid; gap: .12rem; min-width: 0; }
.pen-dashboard-quick-link strong { font-size: .78rem; font-weight: 700; line-height: 1.45; }
.pen-dashboard-quick-link small { overflow: hidden; color: var(--dx-secondary-color); font-size: .67rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.pen-dashboard-quick-link.is-primary small { color: var(--dx-secondary-color); }
.pen-dashboard-quick-arrow { flex: 0 0 auto; margin-inline-start: auto; color: var(--dx-secondary-color); }
.pen-dashboard-quick-link.is-primary .pen-dashboard-quick-arrow { color: var(--dx-secondary-color); }
.pen-dashboard-messages { max-height: 18rem; overflow-y: auto; }
.pen-dashboard-message { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .72rem 1rem; border-bottom: 1px solid var(--dx-border-color); color: var(--dx-body-color); text-decoration: none; }
.pen-dashboard-message:last-child { border-bottom: 0; }
.pen-dashboard-message:hover, .pen-dashboard-message:focus-visible { background: var(--dx-primary-bg-subtle); color: var(--dx-body-color); }
.pen-dashboard-message-icon { display: grid; place-items: center; flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: .4rem; color: var(--dx-secondary-color); background: transparent; }
.pen-dashboard-message span:nth-child(2) { display: grid; gap: .1rem; }
.pen-dashboard-message strong, .pen-dashboard-message small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen-dashboard-message strong { font-size: .77rem; }
.pen-dashboard-message small { color: var(--dx-secondary-color); font-size: .67rem; }
.pen-dashboard-message > b { flex: 0 0 auto; min-width: 1.25rem; padding: .1rem .3rem; border-radius: 999px; color: var(--dx-danger-text-emphasis, #a61b2b); background: var(--dx-danger-bg-subtle, #fde8eb); font-size: .64rem; text-align: center; }
@media (max-width: 767.98px) {
  .pen-dashboard-quick-grid { grid-template-columns: 1fr; }
  .pen-dashboard-card .card-header { padding: .8rem .9rem; }
  .pen-dashboard-card .card-body { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pen-dashboard-quick-link { transition: none; }
}
[data-bs-theme="dark"] .pen-dashboard-quick-link.is-primary:hover,
[data-bs-theme="dark"] .pen-dashboard-quick-link.is-primary:focus-visible { background: var(--dx-primary-bg-subtle); }

/* Reports & analytics dashboard */
[data-bs-theme="dark"] .pen-reports {
  --report-ink: var(--dx-body-color);
  --report-paper: var(--dx-tertiary-bg);
}
[data-bs-theme="dark"] .report-toolbar { border-color: var(--dx-border-color); }
[data-bs-theme="dark"] .report-toolbar .form-label,
[data-bs-theme="dark"] .report-section-title { color: var(--dx-body-color); }
[data-bs-theme="dark"] .report-panel { border-color: var(--dx-border-color); }
[data-bs-theme="dark"] .report-panel .card-header { border-bottom-color: var(--dx-border-color); }
[data-bs-theme="dark"] .report-table th,
[data-bs-theme="dark"] .report-finance-stats div,
[data-bs-theme="dark"] .report-inline-metrics div { background: var(--dx-tertiary-bg); }
[data-bs-theme="dark"] .report-table th { color: var(--dx-body-color); }
[data-bs-theme="dark"] .report-table td { border-color: var(--dx-border-color); }
[data-bs-theme="dark"] .report-finance-stats strong,
[data-bs-theme="dark"] .report-inline-metrics strong { color: var(--dx-body-color); }
[data-bs-theme="dark"] .report-room-row .progress,
[data-bs-theme="dark"] .report-form-row .progress { background: var(--dx-tertiary-bg); }
[data-bs-theme="dark"] .report-response-metric { background: var(--dx-success-bg-subtle); }
[data-bs-theme="dark"] .report-response-metric span { color: var(--dx-success-text-emphasis); }

/* Shared page surfaces aligned with the Domiex heading, dashboard and list patterns. */
.pen-page-heading { margin-bottom: 1.5rem !important; }
.pen-page-heading-main { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1 1 auto; }
.pen-page-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--dx-primary-border-subtle, transparent);
  border-radius: .85rem;
  color: var(--dx-primary);
  background: var(--dx-primary-bg-subtle);
}
.pen-page-heading-copy { min-width: 0; }
.pen-page-heading-copy, .pen-page-heading nav { overflow-wrap: anywhere; }
.pen-page-heading nav { min-width: 0; max-width: 100%; }
.pen-page-heading-eyebrow { margin-bottom: .12rem; color: var(--dx-secondary-color); font-size: .7rem; font-weight: 700; line-height: 1.4; }
.pen-page-heading-copy h1 { font-size: clamp(1.25rem, .9vw + 1rem, 1.6rem); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
.pen-page-heading-subtitle { margin: .2rem 0 0; color: var(--dx-secondary-color); font-size: .78rem; line-height: 1.6; }
.pen-page-heading .breadcrumb { font-size: .76rem; }
[data-nav-type="pattern"] .pen-page-heading-eyebrow,
[data-nav-type="pattern"] .pen-page-heading-subtitle { color: rgba(255,255,255,.72); }
[data-nav-type="pattern"] .pen-page-heading-icon { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.13); }

.pen-card-heading-icon { display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: .75rem; }
.pen-filter-bar { margin-inline: 0; padding: .85rem; border: 1px solid var(--dx-border-color); border-radius: .75rem; background: var(--dx-tertiary-bg); }
.pen-stat-card { min-height: 6.25rem; border-radius: .85rem; }
.pen-stat-card .pen-stat-value { line-height: 1.2; letter-spacing: -.025em; }
.pen-stat-card .pen-stat-caption { display: inline-flex; align-items: center; padding: .1rem .45rem; border-radius: 999px; color: var(--dx-success-text-emphasis, var(--dx-success)); background: var(--dx-success-bg-subtle); font-size: .65rem; font-weight: 700; line-height: 1.4; }
.pen-empty { display: grid; justify-items: center; align-content: center; gap: .45rem; min-height: 8rem; padding: 1.25rem; }
.pen-empty-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .15rem; border-radius: .85rem; color: var(--dx-primary); background: var(--dx-primary-bg-subtle); }
.pen-empty-title { color: var(--dx-body-color); font-size: .88rem; }
.pen-empty > p { color: var(--dx-secondary-color); font-size: .8rem; line-height: 1.7; }
.pen-auth-card { overflow: hidden; border-color: var(--dx-border-color); border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(15,23,42,.08); }
.pen-auth-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: .85rem; color: var(--dx-primary); background: var(--dx-primary-bg-subtle); }
[data-bs-theme="dark"] .pen-auth-card { box-shadow: 0 1rem 3rem rgba(0,0,0,.22); }
@media (max-width: 575.98px) {
  .pen-page-heading { align-items: flex-start !important; }
  .pen-page-heading-icon { flex-basis: 2.4rem; width: 2.4rem; height: 2.4rem; border-radius: .7rem; }
  .pen-page-heading .breadcrumb { flex-wrap: wrap; }
}

/* Permission management: one person and one primary action per view. */
.pm-page { max-width: 92rem; margin-inline: auto; }
.pm-page [hidden] { display: none !important; }
.pm-view-switch, .pm-sub-switch { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--dx-border-color); margin-bottom: 2rem; }
.pm-sub-switch { margin-bottom: 1.5rem; }
.pm-view-tab { border: 0; border-bottom: 2px solid transparent; padding: .8rem .1rem; color: var(--dx-secondary-color); background: transparent; font-weight: 600; font-size: .9rem; }
.pm-view-tab:hover, .pm-view-tab:focus-visible { color: var(--dx-primary); }
.pm-view-tab.is-active { color: var(--dx-primary); border-bottom-color: var(--dx-primary); }
.pm-view-tab:focus-visible, .pm-user:focus-visible, .pm-advanced summary:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 3px; }
.pm-directory { padding: 1.4rem; border: 1px solid var(--dx-border-color); border-radius: .85rem; background: var(--dx-card-bg, var(--dx-body-bg)); }
.pm-section-label { display: block; margin-bottom: .8rem; color: var(--dx-body-color); font-size: 1rem; font-weight: 700; }
.pm-user-list { display: grid; align-content: start; gap: .3rem; max-height: 62vh; overflow-y: auto; margin-top: 1rem; }
.pm-user { display: grid; gap: .15rem; width: 100%; padding: .8rem .9rem; border: 1px solid transparent; border-radius: .55rem; background: transparent; color: var(--dx-body-color); text-align: start; }
.pm-user:hover { background: var(--dx-tertiary-bg); }
.pm-user.active { border-color: var(--dx-primary-border-subtle, var(--dx-primary)); background: var(--dx-primary-bg-subtle); }
.pm-user-name { font-size: .9rem; font-weight: 650; }
.pm-user-meta { color: var(--dx-secondary-color); font-size: .78rem; line-height: 1.5; }
.pm-editor-surface, .pm-menu-surface { padding: clamp(1.25rem, 2.5vw, 2.25rem); border: 1px solid var(--dx-border-color); border-radius: .85rem; background: var(--dx-card-bg, var(--dx-body-bg)); }
.pm-editor-surface.pen-empty { min-height: 22rem; }
.pm-person-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--dx-border-color); }
.pm-person-name { margin: 0; color: var(--dx-body-color); font-size: clamp(1.25rem, 1.4vw, 1.5rem); font-weight: 700; line-height: 1.45; }
.pm-person-sub { margin: .2rem 0 0; color: var(--dx-secondary-color); font-size: .85rem; }
.pm-editor-section { padding-block: 1.7rem; border-bottom: 1px solid var(--dx-border-color); }
.pm-section-heading h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.pm-section-heading p, .pm-help { margin: .3rem 0 1.2rem; color: var(--dx-secondary-color); font-size: .83rem; line-height: 1.8; }
.pm-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.pm-option { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .85rem; border: 1px solid var(--dx-border-color); border-radius: .5rem; font-size: .88rem; cursor: pointer; }
.pm-option:has(input:checked) { border-color: var(--dx-primary-border-subtle, var(--dx-primary)); background: var(--dx-primary-bg-subtle); }
.pm-option:has(input:disabled) { opacity: .7; cursor: default; }
.pm-option .form-check-input { flex: 0 0 auto; margin: 0; }
.pm-advanced { border-bottom: 1px solid var(--dx-border-color); }
.pm-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; list-style: none; cursor: pointer; font-size: 1.05rem; font-weight: 700; }
.pm-advanced summary::-webkit-details-marker { display: none; }
.pm-advanced summary::after { content: '+'; color: var(--dx-primary); font-size: 1.3rem; font-weight: 400; }
.pm-advanced[open] summary::after { content: '−'; }
.pm-summary-note { margin-inline-start: auto; color: var(--dx-secondary-color); font-size: .78rem; font-weight: 400; }
.pm-advanced-body { padding-bottom: 1.5rem; }
.pm-acl-filters { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.pm-acl-filters .form-control { flex: 1 1 13rem; }
.pm-acl-filters .form-select { flex: 0 1 10rem; }
.pm-acl-state { color: var(--dx-secondary-color); font-size: .75rem; }
.acl-row-explicit .pm-acl-state { color: var(--dx-primary); font-weight: 700; }
.pm-save-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; }
.pm-save-status { color: var(--dx-secondary-color); font-size: .83rem; }
.pm-review-link { display: inline-block; margin-top: 1.25rem; color: var(--dx-secondary-color); font-size: .8rem; text-decoration: underline; text-underline-offset: .2rem; }
.pm-review-link:hover { color: var(--dx-primary); }
.pm-menu-intro { margin-bottom: 1rem; }
.pm-menu-intro h2 { margin: 0 0 .25rem; font-size: 1.2rem; font-weight: 700; }
.pm-menu-intro p { margin: 0; color: var(--dx-secondary-color); font-size: .88rem; line-height: 1.8; }
.pm-menu-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-weight: 600; }
.pm-menu-toolbar .form-select { max-width: 18rem; }
.pm-menu-grid { display: grid; gap: 1rem; }
.pm-menu-group { padding-block: .7rem 1.3rem; border-bottom: 1px solid var(--dx-border-color); }
.pm-menu-group:last-child { border-bottom: 0; }
.pm-menu-group h3 { margin: 0 0 .85rem; font-size: .95rem; font-weight: 700; }
.pm-menu-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .45rem 1.25rem; }
.pm-menu-item { display: flex; align-items: center; gap: .65rem; min-height: 2.8rem; padding: .4rem 0; font-size: .85rem; font-weight: 400; }
.pm-menu-item .form-select { flex: 0 0 auto; }
.pm-menu-item:has(.sidebar-user-item) { grid-column: 1 / -1; border-bottom: 1px solid var(--dx-border-color); }
@media (max-width: 767.98px) {
  .pm-view-switch, .pm-sub-switch { gap: 1rem; margin-bottom: 1.25rem; }
  .pm-directory, .pm-editor-surface, .pm-menu-surface { padding: 1.15rem; }
  .pm-user-list { display: flex; max-height: 12rem; overflow: auto; }
  .pm-user { min-width: 11rem; }
  .pm-summary-note { display: none; }
  .pm-save-bar > .btn { width: 100%; }
}

/* Staff dashboard: shared cards, form controls and a separate history surface. */
.staff-page { max-width: 78rem; margin-inline: auto; }
.staff-page [hidden] { display: none !important; }
.staff-page .card { min-width: 0; margin-bottom: 0; }
.staff-entry-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; margin-bottom: 1.25rem; }
.staff-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.staff-page .form-control, .staff-page .form-select { min-height: 2.75rem; background-color: var(--dx-body-bg); }
.staff-page .form-control:focus, .staff-page .form-select:focus { background-color: var(--dx-secondary-bg); }
.staff-page textarea.form-control { min-height: 5rem; }
.staff-page .form-text { color: var(--dx-secondary-color); font-size: .74rem; line-height: 1.7; }
.staff-overline { display: block; margin-bottom: .4rem; color: var(--dx-secondary-color); font-size: .8rem; font-weight: 600; }
.staff-clock-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--dx-border-color); border-radius: .65rem; background: var(--dx-body-bg); }
.staff-clock-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .55rem; background: var(--dx-primary-bg-subtle); color: var(--dx-primary); }
.staff-clock-icon svg { width: 1.25rem; height: 1.25rem; }
.staff-clock-panel .btn { min-height: 2.75rem; }
.staff-manual-self { grid-column: 1 / -1; min-width: 0; }
.staff-manual-self-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--dx-border-color); }
.staff-manual-self-help { margin: 0 0 1rem; color: var(--dx-secondary-color); font-size: .84rem; line-height: 1.8; }
.staff-manual-self-form .staff-form-footer { justify-content: flex-start; }
.staff-clock-panel h3 { margin: 0; color: var(--dx-body-color); font-size: 1.05rem; font-weight: 700; }
.staff-clock-panel p { margin: .45rem 0 0; color: var(--dx-secondary-color); font-size: .88rem; line-height: 1.7; }
.staff-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 0; padding: 1rem 1.25rem; }
.staff-section-heading > div { flex: 1; min-width: 0; }
.staff-section-heading h2 { margin: 0; color: var(--dx-body-color); font-size: 1rem; font-weight: 700; line-height: 1.6; }
.staff-section-heading p { margin: .25rem 0 0; color: var(--dx-secondary-color); font-size: .8rem; line-height: 1.8; }
.staff-choice { display: flex; gap: 1.25rem; flex-wrap: wrap; padding-inline: 1.25rem; border-bottom: 1px solid var(--dx-border-color); }
.staff-choice button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .8rem .15rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--dx-secondary-color); background: transparent; font-size: .86rem; font-weight: 600; }
.staff-choice button:hover, .staff-choice button.is-active { border-bottom-color: var(--dx-primary); color: var(--dx-primary); }
.staff-choice button:focus-visible, .staff-history-tabs button:focus-visible, .staff-filter summary:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 3px; }
.staff-form-panel { padding: 1.25rem; }
.staff-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.staff-form-grid > div { min-width: 0; }
.staff-manual-form > .card-body { padding: 1.25rem; }
.staff-form-grid .form-label { margin-bottom: .4rem; font-size: .83rem; font-weight: 600; }
.staff-form-wide { grid-column: 1 / -1; }
.staff-form-grid:has(> #leave-end-field[hidden]) > #leave-start-field { grid-column: 1 / -1; }
.staff-optional { color: var(--dx-secondary-color); font-size: .76rem; font-weight: 400; }
.staff-form-footer { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .625rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--dx-border-color); }
.staff-form-footer .btn { min-height: 2.75rem; }
.staff-manual-form > .card-footer { margin-top: 0; padding: 1rem 1.25rem; background: var(--dx-body-bg); }
.staff-history-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; padding-inline: 1.25rem; border-bottom: 1px solid var(--dx-border-color); }
.staff-history-tabs { display: flex; gap: 1.5rem; overflow-x: auto; }
.staff-history-tabs button { flex: 0 0 auto; padding: .7rem .1rem; border: 0; border-bottom: 2px solid transparent; color: var(--dx-secondary-color); background: transparent; font-size: .86rem; font-weight: 600; }
.staff-history-tabs button:hover, .staff-history-tabs button.is-active { border-bottom-color: var(--dx-primary); color: var(--dx-primary); }
.staff-filter { position: relative; padding-block: .5rem; }
.staff-filter summary { cursor: pointer; padding: .4rem .65rem; border: 1px solid var(--dx-border-color); border-radius: .45rem; color: var(--dx-secondary-color); background: var(--dx-body-bg); font-size: .8rem; }
.staff-filter-fields { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .65rem; padding: 1rem 0; }
.staff-filter-fields label { display: grid; gap: .3rem; font-size: .8rem; }
.staff-filter-fields .form-control { width: 9rem; }
.staff-table-panel { min-width: 0; padding: .5rem; }
.staff-table-panel .table { min-width: 52rem; margin: 0; font-size: .83rem; font-variant-numeric: tabular-nums; }
.staff-table-panel th { padding: .85rem 1rem; color: var(--dx-secondary-color); background: var(--dx-body-bg); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.staff-table-panel td { padding: .85rem 1rem; vertical-align: middle; overflow-wrap: anywhere; }
.staff-table-panel td:last-child { min-width: 18rem; }
.staff-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.staff-table-panel .badge { padding: .4rem .55rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.staff-leave-table { min-width: 42rem; }
.staff-leave-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--dx-body-color) 2.5%, transparent); }
.staff-leave-range { display: flex; flex-direction: column; gap: .3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.staff-leave-dates { display: flex; gap: 1rem; }
.staff-leave-range span span { display: inline-flex; gap: .35rem; align-items: baseline; }
.staff-leave-time-range { color: var(--dx-primary); font-size: .8rem; font-weight: 600; direction: ltr; text-align: right; }
.staff-leave-range small { color: var(--dx-secondary-color); font-size: .72rem; }
.staff-no-records { padding: 2rem !important; color: var(--dx-secondary-color); text-align: center; }
.staff-reject-dialog { width: min(26rem, calc(100vw - 2rem)); max-width: none; padding: 1.5rem; border: 1px solid var(--dx-border-color); border-radius: .85rem; color: var(--dx-body-color); background: var(--dx-card-bg, var(--dx-body-bg)); box-shadow: 0 1.25rem 3.5rem rgba(15, 23, 42, .2); }
.staff-reject-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.staff-reject-dialog h2 { margin: 0 0 .4rem; font-size: 1.13rem; font-weight: 700; }
.staff-reject-dialog p { margin: 0 0 1.25rem; color: var(--dx-secondary-color); font-size: .83rem; line-height: 1.7; }
.staff-reject-dialog .form-label { margin-bottom: .45rem; font-size: .84rem; font-weight: 600; }
.staff-reject-dialog .staff-reject-error { margin: .4rem 0 0; color: var(--dx-danger); }
.staff-reject-dialog [hidden] { display: none; }
.staff-reject-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }
.staff-details-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.staff-details-metadata { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1rem; margin: 1.25rem 0; font-size: .86rem; }
.staff-details-metadata dt { color: var(--dx-secondary-color); font-weight: 500; }
.staff-details-metadata dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-details-label { margin: 1.25rem 0 .6rem; font-size: .9rem; font-weight: 600; }
.staff-details-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.9; }
@media (min-width: 1200px) {
  .staff-entry-layout:has(> .staff-manual-form:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-entry-layout:has(> .staff-manual-form:not([hidden])) .staff-clock-panel { grid-template-columns: auto minmax(0, 1fr); }
  .staff-entry-layout:has(> .staff-manual-form:not([hidden])) #clock-action { grid-column: 1 / -1; }
}

/* Calls workspace: one clear form, quiet metrics, compact history. */
.progress-workspace { max-width: 72rem; margin-inline: auto; }
.progress-workspace [hidden], #progress-learner [hidden] { display: none !important; }
.progress-period-range { direction: rtl; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; }
.progress-period-date { direction: ltr; unicode-bidi: isolate; }
.progress-period-separator { direction: rtl; unicode-bidi: isolate; }
.progress-report-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; max-width: 75ch; }
.progress-report-details summary { cursor: pointer; color: var(--dx-primary); font-weight: 600; }
.progress-report-details summary:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 4px; }
.progress-report h3, .progress-report h4 { overflow-wrap: anywhere; }
.progress-report section { padding-top: .5rem; border-top: 1px solid var(--dx-border-color); }

/* Learner report pages: compact controls and readable report cards. */
.learner-reports-page .card { border-color: var(--dx-border-color); }
.learner-reports-page #progress-learner-start,
.learner-reports-page #progress-learner-end { width: min(100%, 12rem); }
#lp-date-start, #lp-date-end { text-align: center; }
#lp-ring { flex: 0 0 auto; }
#lp-cards .pen-result { white-space: nowrap; }
@media (max-width: 575.98px) {
  .learner-reports-page #progress-learner-start,
  .learner-reports-page #progress-learner-end { width: 100%; }
}

.calls-page { max-width: 78rem; margin-inline: auto; }
.calls-page [hidden] { display: none !important; }
.calls-page > section + section { margin-top: 2.5rem; }
.calls-create { padding: clamp(1.4rem, 2.5vw, 2.25rem); border: 1px solid var(--dx-border-color); border-radius: .85rem; background: var(--dx-card-bg, var(--dx-body-bg)); }
.calls-section-heading { margin-bottom: 1.25rem; }
.calls-section-heading h2 { margin: 0; color: var(--dx-body-color); font-size: 1.16rem; font-weight: 700; }
.calls-section-heading p { margin: .3rem 0 0; color: var(--dx-secondary-color); font-size: .84rem; }
.calls-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; max-width: 52rem; }
.calls-form-grid .form-label, .calls-filter-fields .form-label { margin-bottom: .4rem; font-size: .83rem; font-weight: 600; }
.calls-form-wide { grid-column: 1 / -1; }
.calls-optional { color: var(--dx-secondary-color); font-size: .76rem; font-weight: 400; }
.calls-more { margin-top: 1.15rem; }
.calls-more summary, .calls-filter summary { width: fit-content; cursor: pointer; color: var(--dx-secondary-color); font-size: .84rem; }
.calls-more summary:hover, .calls-filter summary:hover { color: var(--dx-primary); }
.calls-more summary:focus-visible, .calls-filter summary:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 3px; }
.calls-more-grid { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--dx-border-color); }
.calls-form-footer { display: flex; justify-content: flex-end; max-width: 52rem; margin-top: 1.4rem; }
.calls-steps { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: 52rem; }
.calls-steps li { flex: 1; padding: .65rem .8rem; border-bottom: 2px solid var(--dx-border-color); color: var(--dx-secondary-color); font-size: .82rem; }
.calls-steps li[aria-current="step"] { border-color: var(--dx-primary); color: var(--dx-primary); font-weight: 700; }
.call-step h3 { margin: 0 0 1rem; font-size: 1rem; }
.calls-field-error { display: block; margin-top: .35rem; color: var(--dx-danger, #b42318); font-size: .78rem; }
.calls-person-options { display: grid; max-width: 32rem; }
.calls-review { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .7rem 1rem; max-width: 52rem; }
.calls-review dt { color: var(--dx-secondary-color); font-weight: 600; }
.calls-review dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.calls-form-footer .btn { min-width: 8rem; }
.calls-history-toolbar { display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.calls-search { width: min(100%, 23rem); }
.calls-filter { padding-top: .55rem; }
.calls-filter-fields { display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap; padding-top: 1rem; }
.calls-filter-fields .form-control { width: 10rem; }
.calls-summary { display: flex; gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap; padding: 1rem 0 1.35rem; border-top: 1px solid var(--dx-border-color); border-bottom: 1px solid var(--dx-border-color); }
.calls-summary .calls-summary-caption { flex-basis: 100%; margin-bottom: -.35rem; color: var(--dx-secondary-color); font-size: .76rem; }
.calls-summary > div { display: flex; flex-direction: column; gap: .15rem; }
.calls-summary strong { color: var(--dx-body-color); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; }
.calls-summary span { color: var(--dx-secondary-color); font-size: .78rem; }
.calls-table { margin: .8rem 0 0; font-size: .86rem; }
.calls-table th { color: var(--dx-secondary-color); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.calls-table td { vertical-align: middle; }
.calls-cell-main { display: block; }
.calls-table small { display: block; margin-top: .25rem; color: var(--dx-secondary-color); font-size: .75rem; }
.calls-table .btn { margin-top: .4rem; white-space: nowrap; }
.calls-empty { padding: 2.5rem 1rem !important; color: var(--dx-secondary-color); text-align: center; }
.calls-details-dialog { width: min(48rem, calc(100vw - 2rem)); max-height: min(85vh, 52rem); overflow: auto; padding: 1.35rem; border: 1px solid var(--dx-border-color); border-radius: 1rem; color: var(--dx-body-color); background: var(--dx-card-bg, var(--dx-body-bg)); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%); }
.calls-details-dialog::backdrop { background: rgb(16 24 40 / 48%); }
.calls-details-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--dx-border-color); }
.calls-details-header p { margin: 0 0 .2rem; color: var(--dx-secondary-color); font-size: .76rem; }
.calls-details-header h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.calls-details-section { margin-top: 1.15rem; }
.calls-details-section h3 { margin: 0 0 .65rem; color: var(--dx-secondary-color); font-size: .78rem; font-weight: 700; }
.calls-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; margin: 0; }
.calls-details-grid > div { min-width: 0; }
.calls-details-grid dt { margin-bottom: .15rem; color: var(--dx-secondary-color); font-size: .74rem; }
.calls-details-grid dd { margin: 0; overflow-wrap: anywhere; font-size: .88rem; }
.calls-details-description, .calls-details-history p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .87rem; }
.calls-details-history ol { display: grid; gap: .75rem; margin: 0; padding-inline-start: 1.2rem; }
.calls-details-history li { padding-inline-start: .2rem; }
.calls-details-history li > * { display: block; margin-top: .25rem; }
.calls-details-history li strong { font-size: .85rem; }
.calls-details-history li span { color: var(--dx-secondary-color); font-size: .78rem; }
.calls-details-error { color: var(--dx-danger, #b42318); }

/* Persons directory: the list and search lead, precision filters stay available. */
.persons-page { max-width: 82rem; margin-inline: auto; }
.persons-page [hidden] { display: none !important; }
.persons-directory { border: 1px solid var(--dx-border-color); border-radius: .85rem; background: var(--dx-card-bg, var(--dx-body-bg)); }
.persons-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem clamp(1.2rem, 2.2vw, 2rem) 1rem; }
.persons-directory-heading h2 { margin: 0; font-size: 1.17rem; font-weight: 700; }
.persons-directory-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.persons-secondary-link { color: var(--dx-secondary-color); font-size: .84rem; text-decoration: none; }
.persons-secondary-link:hover { color: var(--dx-primary); text-decoration: underline; }
.persons-directory-body { padding: 0 clamp(1.2rem, 2.2vw, 2rem) 1.4rem; }
.persons-groups { display: flex; gap: 1.3rem; overflow-x: auto; border-bottom: 1px solid var(--dx-border-color); }
.persons-groups button { flex: 0 0 auto; padding: .8rem .05rem; border: 0; border-bottom: 2px solid transparent; color: var(--dx-secondary-color); background: transparent; font-size: .85rem; font-weight: 600; }
.persons-groups button:hover, .persons-groups button[aria-pressed="true"] { border-bottom-color: var(--dx-primary); color: var(--dx-primary); }
.persons-groups button:focus-visible, .persons-more-filters summary:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 3px; }
.persons-search-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .75rem 1.2rem; margin: 1.35rem 0 .75rem; }
.persons-search { flex: 0 1 25rem; min-width: min(100%, 16rem); }
.persons-more-filters { flex: 1 1 100%; }
.persons-more-filters summary { width: fit-content; cursor: pointer; color: var(--dx-secondary-color); font-size: .84rem; }
.persons-more-filters summary:hover, .persons-more-filters[data-has-filters] summary { color: var(--dx-primary); }
.persons-more-filters summary span:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; margin-inline-start: .25rem; border-radius: 50%; background: var(--dx-primary-bg-subtle); color: var(--dx-primary); font-size: .72rem; }
.persons-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem 0 1rem; }
.persons-filter-grid > [class*="col-"] { width: auto; padding: 0; }
.persons-filter-grid .form-label { margin-bottom: .35rem; font-size: .8rem; font-weight: 600; }
.persons-filter-grid > div:last-child { grid-column: 1 / -1; padding-top: .2rem; }
.persons-list-meta { display: flex; align-items: center; gap: .7rem; min-height: 1.75rem; margin-bottom: .5rem; color: var(--dx-secondary-color); font-size: .8rem; }
.persons-table { min-width: 42rem; font-size: .85rem; }
.persons-table th { padding-block: .8rem; color: var(--dx-secondary-color); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.persons-table td { padding-block: .8rem; }
.persons-table tbody tr[data-person-row] { cursor: pointer; }
.persons-table tbody tr[data-person-row]:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: -2px; }
.persons-table tbody tr[data-person-row]:focus-visible > td { background-color: var(--dx-primary-bg-subtle); }
.persons-name { display: block; color: var(--dx-body-color); font-weight: 600; }
.persons-secondary { display: block; margin-top: .25rem; color: var(--dx-secondary-color); font-size: .75rem; font-weight: 400; }
.persons-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; color: var(--dx-secondary-color); font-size: .8rem; }
.persons-pagination .pagination { gap: .25rem; }
.persons-step-indicator { margin: 0 0 .65rem; color: var(--dx-secondary-color); font-size: .78rem; }
.persons-optional-fields { margin-top: .25rem; padding-top: 1rem; border-top: 1px solid var(--dx-border-color); }
.persons-optional-fields summary, .persons-detail-history summary { width: fit-content; cursor: pointer; color: var(--dx-secondary-color); font-size: .85rem; font-weight: 600; }
.persons-optional-fields summary:hover, .persons-detail-history summary:hover { color: var(--dx-primary); }
.persons-optional-fields summary:focus-visible, .persons-detail-history summary:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 3px; }
.persons-account-note { max-width: 42rem; margin: 1.4rem 0 0; color: var(--dx-secondary-color); font-size: .8rem; line-height: 1.75; }
.persons-edit-identity { display: flex; gap: 1rem; padding-block: .45rem; border-block: 1px solid var(--dx-border-color); }
.persons-edit-identity > div { flex: 1 1 0; }
.persons-edit-identity .form-control { border-color: transparent; background: transparent; color: var(--dx-secondary-color); opacity: 1; padding-inline: 0; }
.persons-detail-fields { padding-top: 1.1rem; }
.persons-detail-history { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--dx-border-color); }
@media (max-width: 767.98px) {
  .persons-directory-heading { align-items: flex-start; }
  .persons-directory-actions { width: 100%; justify-content: space-between; }
  .persons-groups { gap: 1rem; }
  .persons-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .persons-edit-identity { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  .persons-search { flex-basis: 100%; }
  .persons-filter-grid { grid-template-columns: 1fr; }
  .persons-pagination { justify-content: center; text-align: center; }
}
@media (max-width: 575.98px) {
  .calls-page > section + section { margin-top: 2rem; }
  .calls-form-grid { grid-template-columns: 1fr; }
  .calls-form-wide { grid-column: auto; }
  .calls-form-footer .btn, .calls-search { width: 100%; }
  .calls-history-toolbar { gap: .4rem; }
  .calls-summary { gap: 1.3rem; }
  .calls-filter-fields .form-control { width: 100%; }
  .calls-details-grid { grid-template-columns: 1fr; }
}

/* Shared table and data-list rhythm across workspace pages. Navigation and
   long-form message content retain their natural reading alignment. */
.table {
  font-variant-numeric: tabular-nums;
}

.table > :not(caption) > * > * {
  padding: .75rem .85rem;
  line-height: 1.65;
  text-align: center !important;
  vertical-align: middle;
}

.table thead th {
  color: var(--dx-secondary-color);
  font-size: .8rem;
  font-weight: 700;
}

.table tbody td {
  font-size: .875rem;
}

.table :is(code, time, [dir="ltr"]) {
  font-variant-numeric: tabular-nums;
}

.list-group > .list-group-item {
  padding-block: .7rem;
  line-height: 1.65;
  text-align: center !important;
}

.pen-timeline > .pen-timeline-item,
.pen-workflow-timeline > li,
.msg-list > .msg-item,
[data-attachment-list] > li {
  line-height: 1.65;
  text-align: center !important;
}

#rd-people > li,
#lp-totals > li {
  justify-content: center;
  padding: .7rem .85rem;
  text-align: center;
}

#lp-totals > li > .ms-auto {
  margin-inline-start: 0 !important;
}

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

/* Reports are split into short, task-focused routes. */
.pen-reports[data-report-page] {
  --report-ink: var(--dx-body-color);
  --report-teal: var(--dx-primary);
}

.report-nav {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--dx-border-color);
  scrollbar-width: thin;
}

.report-nav a {
  flex: 0 0 auto;
  padding: .7rem .85rem;
  border-bottom: 2px solid transparent;
  color: var(--dx-secondary-color);
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
}

.report-nav a:hover,
.report-nav a[aria-current="page"] {
  border-bottom-color: var(--dx-primary);
  color: var(--dx-primary);
  font-weight: 600;
}

.report-nav a:focus-visible,
.report-index-link:focus-visible,
.report-more-filters summary:focus-visible {
  outline: 2px solid var(--dx-primary);
  outline-offset: 3px;
}

.report-toolbar {
  border-color: var(--dx-border-color);
  box-shadow: none;
}

.report-toolbar .card-body {
  padding: 1.1rem 1.25rem;
}

.report-more-filters {
  border-top: 1px solid var(--dx-border-color);
  padding-top: .75rem;
}

.report-more-filters summary {
  width: fit-content;
  color: var(--dx-primary);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
}

.report-more-filters summary span {
  margin-inline-start: .35rem;
  color: var(--dx-secondary-color);
  font-weight: 400;
}

.report-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.report-index-link {
  display: grid;
  gap: .25rem;
  min-height: 5rem;
  align-content: center;
  padding: .9rem 1rem;
  border: 1px solid var(--dx-border-color);
  border-radius: .6rem;
  color: var(--dx-body-color);
  text-decoration: none;
}

.report-index-link:hover {
  border-color: var(--dx-primary);
  color: var(--dx-primary);
}

.report-index-link span {
  font-weight: 600;
}

.report-index-link small {
  color: var(--dx-secondary-color);
  font-size: .78rem;
}

.report-secondary-link {
  color: var(--dx-primary);
  font-size: .84rem;
}

.pen-reports[data-report-page="overview"] [data-report-section] {
  display: none !important;
}

.pen-reports[data-report-page="overview"] .report-index {
  display: block;
}

.pen-reports[data-report-page]:not([data-report-page="overview"]) .report-summary-kpis,
.pen-reports[data-report-page]:not([data-report-page="overview"]) .report-index {
  display: none !important;
}

.pen-reports[data-report-page="financial"] [data-report-section]:not([data-report-section="financial"]),
.pen-reports[data-report-page="enrollments"] [data-report-section]:not([data-report-section="enrollments"]) {
  display: none !important;
}

.report-kpi {
  min-height: 6rem;
  padding: .9rem 1rem;
  border: 1px solid var(--dx-border-color);
  border-radius: .6rem;
  background: var(--dx-body-bg);
  box-shadow: none;
  color: var(--dx-body-color);
}

.report-kpi::after,
.report-kpi-icon,
.report-kpi-caption {
  display: none;
}

.report-kpi-label {
  color: var(--dx-secondary-color);
}

.report-kpi strong {
  color: var(--dx-body-color);
}

.report-panel {
  border-color: var(--dx-border-color);
  border-radius: .6rem;
  box-shadow: none;
}

.report-panel .card-header {
  border-color: var(--dx-border-color);
}

@media (max-width: 767.98px) {
  .report-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .report-index-grid {
    grid-template-columns: 1fr;
  }

  .report-toolbar .card-body {
    padding: .9rem;
  }

  .report-period-switcher .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 767.98px) {
  .staff-clock-panel { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .staff-clock-panel .btn { grid-column: 1 / -1; width: 100%; }
  .staff-form-grid { grid-template-columns: 1fr; }
  .staff-form-grid .staff-form-wide { grid-column: auto; }
  .staff-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding-inline: 1rem; }
  .staff-choice:not(:has(#staff-clock-tab)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-choice button { padding-inline: .15rem; font-size: .8rem; }
  .staff-choice svg { display: none; }
  .staff-section-heading { padding: 1rem; }
  .staff-create > .staff-section-heading { flex-direction: column; align-items: stretch; }
  .staff-form-footer .btn { flex: 1 1 auto; }
  .staff-history-toolbar { display: block; }
  .staff-history-tabs { gap: 1rem; }
  .staff-filter { padding-block: .65rem; }
}

/* Request center: calm workbench for form-driven services. */
.pen-requests { --req-ink:#182533; --req-muted:#647383; --req-line:rgba(24,37,51,.11); --req-accent:#2563eb; }
.pen-requests-hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; gap:2rem; align-items:center; min-height:18rem; padding:2.4rem clamp(1.25rem,4vw,4rem); border-radius:1.1rem; background:linear-gradient(120deg,#152b45 0%,#1c4861 58%,#187f7d 100%); color:#fff; box-shadow:0 1rem 2.5rem rgba(17,54,79,.16); }
.pen-requests-hero::after { content:""; position:absolute; width:28rem; height:28rem; border:1px solid rgba(255,255,255,.14); border-radius:50%; inset:-12rem -8rem auto auto; box-shadow:0 0 0 3rem rgba(255,255,255,.03),0 0 0 6rem rgba(255,255,255,.025); }
.pen-requests-hero-copy { position:relative; z-index:1; max-width:42rem; }
.pen-requests-hero h1 { max-width:34rem; margin:.8rem 0 .7rem; font-size:clamp(1.6rem,3.1vw,2.5rem); line-height:1.35; letter-spacing:-.025em; }
.pen-requests-hero p { max-width:37rem; margin:0; color:rgba(255,255,255,.78); font-size:1rem; line-height:1.9; }
.pen-eyebrow { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:#a7f3d0; }
.pen-requests-hero-mark { position:relative; z-index:1; display:grid; place-items:center; width:9rem; height:9rem; color:#a7f3d0; border:1px solid rgba(255,255,255,.22); border-radius:2.2rem; transform:rotate(-8deg); }
.btn-soft-light { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.09); }
.btn-soft-light:hover,.btn-soft-light:focus { color:#fff; background:rgba(255,255,255,.18); }
.pen-request-kpi { position:relative; min-height:7rem; padding:1rem 1.1rem; border:1px solid var(--req-line); border-radius:.8rem; background:var(--dx-body-bg,#fff); }
.pen-request-kpi span { display:block; color:var(--req-muted); font-size:.78rem; }
.pen-request-kpi strong { display:block; margin-top:.55rem; color:var(--req-ink); font-size:1.7rem; font-weight:700; }
.pen-request-kpi i { position:absolute; top:1rem; left:1rem; color:#2aa198; }
.pen-request-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--req-line); }
.pen-request-tab { display:inline-flex; align-items:center; gap:.45rem; padding:.8rem 1rem; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--req-muted); font-weight:600; }
.pen-request-tab.is-active { color:var(--req-accent); border-bottom-color:var(--req-accent); }
.pen-request-panel { padding-top:1.5rem; }
.pen-request-search { display:flex; align-items:center; gap:.5rem; min-width:15rem; padding:.45rem .75rem; border:1px solid var(--req-line); border-radius:.5rem; background:var(--dx-body-bg,#fff); color:var(--req-muted); }
.pen-request-search input { width:100%; border:0; outline:0; background:transparent; color:inherit; font-size:.85rem; }
.pen-request-control { min-width:10rem; }
.pen-request-categories { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1rem; }
.pen-category { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem .8rem; border:1px solid var(--req-line); border-radius:.55rem; background:var(--dx-body-bg,#fff); color:var(--req-muted); font-size:.82rem; }
.pen-category b { display:grid; place-items:center; min-width:1.4rem; height:1.4rem; border-radius:50%; background:rgba(37,99,235,.08); color:var(--req-accent); font-size:.72rem; }
.pen-category.is-active { border-color:rgba(37,99,235,.32); background:rgba(37,99,235,.06); color:var(--req-accent); }
.pen-request-schema-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.pen-schema-card { display:flex; gap:1rem; min-height:9.8rem; padding:1.1rem; border:1px solid var(--req-line); border-radius:.8rem; background:var(--dx-body-bg,#fff); color:inherit; text-decoration:none; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.pen-schema-card:hover,.pen-schema-card:focus-visible { border-color:rgba(37,99,235,.38); box-shadow:0 .7rem 1.4rem rgba(30,64,175,.08); transform:translateY(-2px); }
.pen-schema-icon { display:grid; flex:0 0 2.8rem; place-items:center; width:2.8rem; height:2.8rem; border-radius:.65rem; background:#e8f4f3; color:#147d79; }
.pen-schema-card h3 { margin:0; color:var(--req-ink); font-size:1rem; font-weight:700; }
.pen-schema-card p { margin:.45rem 0 .8rem; color:var(--req-muted); font-size:.82rem; line-height:1.7; }
.pen-schema-arrow { margin-inline-start:auto; color:var(--req-accent); opacity:.6; }
.pen-schema-meta { display:inline-flex; padding:.2rem .45rem; border-radius:.3rem; background:rgba(100,116,139,.09); color:var(--req-muted); font-size:.7rem; }
.pen-schema-meta.is-workflow { background:#e8f4f3; color:#147d79; }
.pen-request-list { display:grid; gap:.65rem; }
.pen-request-row { display:flex; align-items:center; gap:.9rem; padding:1rem; border:1px solid var(--req-line); border-radius:.7rem; background:var(--dx-body-bg,#fff); color:inherit; text-decoration:none; }
.pen-request-row:hover,.pen-request-row:focus-visible { border-color:rgba(37,99,235,.35); }
.pen-request-row-icon { display:grid; flex:0 0 2.5rem; place-items:center; width:2.5rem; height:2.5rem; border-radius:.6rem; background:#eff6ff; color:var(--req-accent); }
.pen-request-row-meta { margin-top:.3rem; color:var(--req-muted); font-size:.8rem; }
.pen-current-stage { display:flex; align-items:center; gap:.55rem; padding:.8rem 1rem; border-radius:.55rem; background:#edf8f5; color:#147d79; }
.pen-detail-card .card-header { background:transparent; }
@media (max-width: 767.98px) { .pen-requests-hero { min-height:auto; padding:1.6rem 1.2rem; } .pen-requests-hero-mark { display:none; } .pen-request-schema-grid { grid-template-columns:1fr; } .pen-request-search { min-width:100%; } .pen-request-row { align-items:flex-start; } }
@media (prefers-reduced-motion: reduce) { .pen-schema-card { transition:none; } }
.pen-tab-count { display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; padding-inline:.25rem; border-radius:99px; background:rgba(37,99,235,.1); color:inherit; font-size:.68rem; }
.pen-requests .card-header { padding-bottom:0; }
.pen-requests .pen-request-tabs { display:flex; flex-wrap:wrap; gap:.25rem; border:0; }
.pen-requests .pen-request-tab { min-height:2.75rem; padding:.65rem .9rem; border:0; border-radius:.45rem .45rem 0 0; }
.pen-requests .pen-request-tab.is-active { background:var(--dx-body-bg,#fff); box-shadow:inset 0 -2px var(--req-accent); }
.pen-requests .pen-request-panel { padding-top:.25rem; }
.pen-requests .pen-request-categories { gap:.4rem; }
.pen-requests .pen-category { padding:.5rem .7rem; }
.pen-requests .pen-schema-card { min-height:0; padding:1rem; border-radius:.5rem; box-shadow:none; }
.pen-requests .pen-schema-card:hover,.pen-requests .pen-schema-card:focus-visible { transform:none; box-shadow:none; }
.pen-requests .pen-schema-icon { flex-basis:2.4rem; width:2.4rem; height:2.4rem; border-radius:.5rem; }
@media (max-width: 767.98px) { .pen-requests .card-header { padding:0; } .pen-requests .pen-request-tabs { flex-wrap:nowrap; overflow-x:auto; width:100%; padding:.25rem .5rem 0; } .pen-requests .pen-request-tab { flex:0 0 auto; } }
.pen-request-row-icon.is-task { background:#fff7ed; color:#c2410c; }
.pen-schema-meta.is-direct { background:#f1f5f9; color:#475569; }
.pen-schema-meta.is-behalf { background:#fef3c7; color:#92400e; }
.pen-form-context { padding:1rem; border:1px solid rgba(37,99,235,.15); border-radius:.7rem; background:rgba(37,99,235,.035); }
.pen-form-route { padding:1rem; border:1px solid var(--req-line,rgba(24,37,51,.11)); border-radius:.7rem; }
.pen-form-route-steps { display:flex; flex-wrap:wrap; gap:.55rem; margin:0; padding:0; list-style:none; }
.pen-form-route-steps li { display:inline-flex; align-items:center; gap:.45rem; color:var(--dx-secondary-color); font-size:.8rem; }
.pen-form-route-steps li + li::before { content:""; width:1.2rem; border-top:1px solid var(--dx-border-color); }
.pen-subject-results { overflow:auto; max-height:18rem; border:1px solid var(--dx-border-color); border-radius:.55rem; background:var(--dx-body-bg,#fff); }
.pen-subject-option { display:flex; width:100%; flex-direction:column; align-items:flex-start; gap:.2rem; padding:.7rem .85rem; border:0; border-bottom:1px solid var(--dx-border-color); background:transparent; text-align:right; }
.pen-subject-option:last-child { border-bottom:0; }
.pen-subject-option:hover,.pen-subject-option:focus-visible { background:rgba(37,99,235,.06); outline:0; }
.pen-subject-option span,.pen-subject-empty,.pen-subject-loading { color:var(--dx-secondary-color); font-size:.78rem; }
.pen-subject-empty,.pen-subject-loading { padding:.8rem; }
.pen-subject-selected { padding:.65rem .8rem; border-radius:.5rem; background:#e8f4f3; color:#147d79; font-size:.85rem; }

/* Lead operations inbox */
.lead-ops { display: grid; gap: 1rem; }
.lead-ops .lead-page-intro,.lead-inbox { border: 1px solid var(--lead-line); border-radius: .85rem; background: var(--dx-body-bg); }
.lead-ops .lead-page-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; }
.lead-page-intro h1 { margin: 0 0 .3rem; color: var(--lead-ink); font-size: 1.15rem; font-weight: 800; }
.lead-page-intro p,.lead-inbox-heading p { color: var(--lead-muted); font-size: .78rem; }
.lead-inbox { overflow: hidden; }
.lead-inbox-heading { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem .75rem; }
.lead-inbox-heading h2 { margin: 0 0 .2rem; color: var(--lead-ink); font-size: .95rem; font-weight: 750; }
.lead-toolbar { display: grid; grid-template-columns: minmax(15rem,1fr) minmax(11rem, .35fr) auto; align-items: center; gap: .65rem; padding: .7rem 1.15rem 1rem; }
.lead-search { position: relative; }.lead-search > svg { position: absolute; inset-inline-start: .75rem; top: 50%; width: 1rem; color: var(--lead-muted); transform: translateY(-50%); pointer-events: none; }
.lead-search .form-control { padding-inline-start: 2.25rem; }.lead-toolbar .form-control,.lead-toolbar .form-select { min-height: 2.55rem; border-color: var(--lead-line); font-size: .78rem; }
.lead-page-size { display: flex; align-items: center; gap: .5rem; color: var(--lead-muted); font-size: .75rem; white-space: nowrap; }.lead-page-size select { min-width: 4.8rem; }
.lead-table-wrap { border-top: 1px solid var(--lead-line); }
.lead-table { min-width: 760px; color: var(--lead-ink); font-size: .78rem; }
.lead-table thead th { padding: .7rem .9rem; color: var(--lead-muted); background: var(--dx-tertiary-bg); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.lead-table tbody td { padding: .75rem .9rem; border-color: var(--lead-line); white-space: nowrap; }
.lead-table tbody tr:hover { background: color-mix(in srgb, var(--dx-primary-bg-subtle) 40%, transparent); }
.lead-table-name,.lead-table td small { display: block; }.lead-table-name { color: var(--lead-ink); font-weight: 700; }.lead-table td small { margin-top: .2rem; color: var(--lead-muted); font-size: .68rem; }
.lead-table-message { height: 8rem; text-align: center; color: var(--lead-muted); }.lead-table-message strong,.lead-table-message span { display: block; }.lead-table-message strong { color: var(--lead-ink); }.lead-table-message span { margin-top: .3rem; font-size: .74rem; }
.lead-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.15rem; border-top: 1px solid var(--lead-line); color: var(--lead-muted); font-size: .75rem; }
.lead-page-controls { display: flex; align-items: center; gap: .5rem; }.lead-page-controls .btn { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; }.lead-page-controls svg { width: .9rem; height: .9rem; }
.lead-ops :focus-visible { outline: 3px solid rgba(47,111,237,.4); outline-offset: 2px; }
@media (max-width: 767.98px) { .lead-toolbar { grid-template-columns: 1fr 1fr; }.lead-search { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .lead-ops .lead-page-intro { align-items: flex-start; flex-direction: column; }.lead-ops .lead-page-intro .btn { width: 100%; }.lead-toolbar { grid-template-columns: 1fr; }.lead-search { grid-column: auto; }.lead-pagination { align-items: flex-start; flex-direction: column; }.lead-page-controls { width: 100%; justify-content: space-between; } }

/* ── Shared responsive shell, forms, tables and Jalali controls ─────── */
.page-wrapper,
#main-content,
#main-content > *,
#main-content .row > *,
#main-content .card,
#main-content .card-body { min-width: 0; }

#main-content .table-responsive {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

#main-content form .form-control,
#main-content form .form-select,
#main-content [data-jalali],
#main-content [data-jalali-dt],
#main-content [data-jalali-time] { max-width: 100%; }

#main-content [data-jalali],
#main-content [data-jalali-dt],
#main-content [data-jalali-time] {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

jdp-container {
  max-width: calc(100vw - 1rem);
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Keep long dialogs inside the viewport and scroll their content area.
   Some forms wrap the modal header/body/footer in one outer <form>, so the
   form itself must join the modal's flex column for Bootstrap scrolling to
   constrain the body correctly. */
.modal .modal-content {
  max-height: calc(100dvh - 2rem);
  min-height: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.modal .modal-header > :not(.btn-close) { min-width: 0; }
.modal .modal-header .btn-close { flex-shrink: 0; }
.modal .modal-body .row > * { min-width: 0; }

.modal .modal-content > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.modal .modal-content > .modal-body,
.modal .modal-content > form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal .modal-content > .modal-header,
.modal .modal-content > .modal-footer,
.modal .modal-content > form > .modal-header,
.modal .modal-content > form > .modal-footer { flex: 0 0 auto; }

/* Native dialogs used by the staff and calls workspaces. */
dialog.staff-reject-dialog:not(.staff-details-dialog) {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 991.98px) {
  .page-wrapper { margin-inline: 0 !important; }
  #main-content { padding-inline: 0; }
  .main-sidebar {
    max-width: min(var(--dx-sidebar, 15rem), calc(100vw - 3rem));
    height: 100dvh;
    overflow: hidden;
  }
  .main-sidebar { display: flex; flex-direction: column; }
  .main-sidebar .sidebar-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  .main-sidebar .navbar-brand, .main-sidebar .sidebar-version { flex-shrink: 0; }
  .main-sidebar .sidebar-version { position: static; }
  .main-sidebar .navbar-menu { flex: 1 1 auto; height: auto; min-height: 0; }
  body.pen-drawer-open { overflow: hidden; }
  .sidebar-backdrop { touch-action: manipulation; }
}

@media (max-width: 767.98px) {
  .page-wrapper {
    padding-inline: .75rem;
    padding-block-end: 2rem;
  }
  #main-content .row { --dx-gutter-x: 1rem; }
  #main-content .card-header,
  #main-content .card-footer { flex-wrap: wrap; gap: .625rem; }
  #main-content .btn-group { max-width: 100%; flex-wrap: wrap; }
  .modal-dialog { margin: .5rem; }
  .modal .modal-content { max-height: calc(100dvh - 1rem); }
  .modal .modal-footer { flex-wrap: wrap; gap: .5rem; }
}

@media (max-width: 575.98px) {
  .page-wrapper {
    padding-inline: .5rem;
    padding-block: calc(var(--dx-topbar, 4.6875rem) + .5rem) 1.5rem;
  }
  #main-content .card-body { padding: 1rem; }
  #main-content .table-responsive > .table { margin-bottom: 0; }
  #main-content .form-label { overflow-wrap: anywhere; }
  .modal-dialog { margin: .375rem; }
  .modal .modal-content { max-height: calc(100dvh - .75rem); }
  .modal .modal-footer > .btn { max-width: 100%; white-space: normal; }
  jdp-container { max-width: calc(100vw - .5rem); }
  .main-topbar .sidebar-toggle { width: 2.75rem; height: 2.75rem; }
  .main-topbar .topbar-link { width: 2.75rem; }
}

/* Portal data keeps readable columns inside its own horizontal scroller. */
.learner-portal-page .table { min-width: 40rem; }
.learner-portal-page #lp-schedule .table { min-width: 56rem; }
.learner-portal-page .table td,
.learner-portal-page #lp-cards,
.teacher-dashboard-page .pen-class-card,
.teacher-dashboard-page #td-standalone-classes,
#td-material-list { overflow-wrap: anywhere; }
.learner-attendance-summary > div:last-child { min-width: 0; }
.learner-attendance-summary .pen-ring { flex: 0 0 96px; }
#lp-switch, #progress-learner-switch {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 100%;
}
#lp-switch .btn, #progress-learner-switch .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.teacher-class-heading > .flex-grow-1 { min-width: 0; flex-basis: 10rem; }
.teacher-dashboard-page .list-group-item > .flex-grow-1 { min-width: 0; }
#rc-table { min-width: 46rem; }
#rc-table td:nth-child(2) { min-width: 10rem; overflow-wrap: anywhere; }
#rc-table .rc-note { min-width: 16rem; }
.ph-page .ph-session-table [data-role="timer"] {
  min-width: 7.5rem;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.ph-kitchen-order { min-width: 0; overflow-wrap: anywhere; }
.ph-kitchen-order header > div,
.ph-kitchen-item > span { min-width: 0; }
.ph-kitchen-order header .badge,
.ph-kitchen-item > strong { flex-shrink: 0; }
.ph-kitchen-order footer { flex-wrap: wrap; gap: .75rem; }

@media (max-width: 767.98px) {
  .ph-kitchen-page > header > .d-flex { flex-wrap: wrap; }
  #progress-form .card-footer > .d-flex { flex-wrap: wrap; }
  #tt-legend { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
  .learner-portal-page .btn,
  .teacher-dashboard-page .btn,
  .teacher-report-cards-page .btn,
  .teacher-attendance-page .btn,
  .teacher-attendance-page .pen-status,
  .progress-workspace .btn,
  .learner-reports-page .btn,
  .ph-kitchen-page .btn,
  .ph-page .ph-row-btn,
  .modal .btn { min-height: 2.75rem; }
  .learner-portal-page .form-control,
  .learner-portal-page .form-select,
  .teacher-report-cards-page .form-control,
  .teacher-report-cards-page .form-select,
  .modal .form-control,
  .modal .form-select { min-height: 2.75rem; }
  .teacher-quick-actions > .btn { flex: 1 1 100%; white-space: normal; }
  .learner-attendance-summary { flex-wrap: wrap; }
  #td-classes .list-group-item { flex-wrap: wrap; }
  .ph-kitchen-item { flex-wrap: wrap; gap: .25rem .75rem; }
  .ph-kitchen-item > span { flex: 1 1 10rem; }
  #ph-cafe-presets-modal .modal-body > .d-flex { flex-wrap: wrap; gap: .5rem; }
  #ph-cafe-preset-form .btn { width: 100%; padding-inline: .25rem; }
  .ph-cafe-preset-row > .d-flex { justify-content: flex-end; }
  .ph-cafe-row > .d-flex > .btn { width: 100%; padding-inline: .25rem; }
}
[dir="rtl"] .res-management-page .card-header { gap: .75rem; }
.res-management-page .card-header > .flex-grow-1 { min-width: 8rem; }
.res-management-page #res-search { min-width: 15rem; }
.res-page-size-label { white-space: nowrap; }
.res-page-size-label select { min-width: 4.5rem; }
.res-management-page .res-table-compact { min-width: 48rem; }
.res-management-page .res-table-compact thead { position: sticky; top: 0; z-index: 2; }
.res-management-page .res-table-compact th,
.res-management-page .res-table-compact td { padding: .55rem .75rem; }
.res-management-page .res-table-compact td:nth-child(2) { min-width: 12rem; max-width: 20rem; white-space: normal; }
.res-session-number { display: inline-flex; min-width: 1.8rem; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-management-page .pen-group-row th { display: flex; align-items: center; gap: .15rem; background: var(--dx-tertiary-bg, #f6f7f9); }
.res-group-title { font-weight: 700; }
.res-group-teacher { margin-inline-start: .65rem; color: var(--bs-secondary-color, #6c757d); font-weight: 400; }
.res-group-code { margin-inline-start: auto; display: inline-block; font-size: .78rem; }
@media (max-width: 767.98px) {
  .res-management-page .card-header { align-items: stretch !important; }
  .res-management-page .card-header > .d-flex { width: 100%; }
  .res-management-page #res-search { min-width: 0; width: 100%; }
  .res-management-page .res-table-compact th,
  .res-management-page .res-table-compact td { padding: .5rem; }
}
/* Kitchen cards use the same surface and text tokens as the dashboard. */
.ph-kitchen-order {
  height: 100%;
  min-height: 250px;
  padding: 1rem;
  border: 1px solid var(--dx-border-color);
  border-radius: 14px;
  background: var(--dx-card-bg, var(--dx-secondary-bg));
  color: var(--dx-body-color);
  box-shadow: 0 2px 8px #14243b0a;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ph-kitchen-new { border-inline-start: 4px solid var(--dx-danger); }
.ph-kitchen-preparing { border-inline-start: 4px solid var(--dx-warning); }
.ph-kitchen-ready { border-inline-start: 4px solid var(--dx-success); }
.ph-kitchen-order h2 { color: inherit; }
.ph-kitchen-order header small,
.ph-kitchen-order footer > small { color: var(--dx-secondary-color); }
.ph-kitchen-items {
  border-top: 1px solid var(--dx-border-color);
  border-bottom: 1px solid var(--dx-border-color);
  padding: .45rem 0;
}
.ph-kitchen-item { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.ph-kitchen-item strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-kitchen-order .alert-warning {
  --dx-alert-color: var(--dx-body-color);
  --dx-alert-bg: var(--dx-warning-bg-subtle);
  --dx-alert-border-color: var(--dx-warning-border-subtle);
}
.ph-kitchen-order footer { margin-top: auto; }
.ph-kitchen-handoff { color: color-mix(in srgb, var(--dx-success) 70%, var(--dx-body-color)); }
.ph-kitchen-empty {
  padding: 3rem 1rem;
  text-align: center;
  border: 1px dashed var(--dx-border-color);
  border-radius: 14px;
  color: var(--dx-secondary-color);
  background: var(--dx-card-bg, var(--dx-secondary-bg));
}
.ph-cafe-orders{margin-bottom:.4rem}.ph-order-item-row,.ph-order-payment-row{padding:.45rem 0;border-bottom:1px solid #edf0f5}.ph-session-table .btn-outline-success{white-space:nowrap}@media(max-width:767.98px){.ph-kitchen-order{min-height:unset}.ph-order-item-row [class*="col-"],.ph-order-payment-row [class*="col-"]{flex:0 0 auto;width:100%}}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ph-kitchen-page > .row { --dx-gutter-x: .5rem; }
}
.ph-status-partial{background:#fff1d6;color:#8a5a00}.ph-status-partial>span{background:#d99a13}

/* ── List alignment and compact row actions ──────────────────────── */
.pen-app-shell #main-content .table > :is(thead, tbody) > tr > :is(th, td) {
  text-align: center;
}
.pen-app-shell #main-content .table .btn {
  justify-content: center;
}
.staff-table-panel .table { min-width: 52rem; }
.staff-table-panel .table th,
.staff-table-panel .table td { text-align: center; }
.staff-table-panel td:last-child { min-width: 13rem; }
.staff-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  width: 100%;
}
.staff-primary-action,
.staff-row-more { display: inline-flex; justify-content: center; }
.staff-primary-action .btn,
.staff-more-trigger { min-width: 8.5rem; }
.staff-more-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  cursor: pointer;
}
.staff-more-trigger::-webkit-details-marker { display: none; }
.staff-more-trigger::marker { content: ''; }
.staff-more-label { font-size: .76rem; }
.staff-more-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .35rem);
  z-index: 30;
  display: grid;
  min-width: 10rem;
  gap: .35rem;
  padding: .4rem;
  border: 1px solid var(--dx-border-color);
  border-radius: .55rem;
  background: var(--dx-secondary-bg);
  box-shadow: 0 .65rem 1.4rem rgba(15, 23, 42, .14);
}
.staff-row-more { position: relative; }
.staff-more-menu .btn { width: 100%; white-space: nowrap; }
[data-bs-theme="dark"] .staff-more-menu { box-shadow: 0 .65rem 1.4rem rgba(0, 0, 0, .25); }
@media (max-width: 767.98px) {
  .staff-table-panel .table { min-width: 46rem; }
  .staff-table-panel td:last-child { min-width: 11rem; }
  .staff-row-actions { flex-direction: column; align-items: stretch; gap: .35rem; }
  .staff-primary-action,
  .staff-row-more,
  .staff-primary-action .btn,
  .staff-more-trigger { width: 100%; min-width: 0; }
  .staff-more-menu {
    position: static;
    min-width: 0;
    margin-top: .35rem;
    box-shadow: none;
  }
}

/* ── Domiex shared visual contract ──────────────────────────────────
   The Django pages use the same shell as the Domiex demos. Keep the
   contract here so page-specific modules inherit one rhythm, surface,
   control and responsive treatment without changing their behavior. */
.pen-app-shell {
  background: var(--dx-body-bg);
  color: var(--dx-body-color);
  font-family: "Vazir", "Inter", sans-serif;
  line-height: 1.65;
}
.pen-app-shell .main-topbar {
  background: var(--dx-topbar-bg);
  border-bottom: 1px solid var(--dx-topbar-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.pen-app-shell .main-topbar .navbar-brand { min-width: 0; }
.pen-app-shell .main-topbar .topbar-link,
.pen-app-shell .main-topbar .sidebar-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: .625rem;
  color: var(--dx-topbar-color);
}
.pen-app-shell .main-topbar .topbar-link:hover,
.pen-app-shell .main-topbar .topbar-link:focus-visible,
.pen-app-shell .main-topbar .sidebar-toggle:hover,
.pen-app-shell .main-topbar .sidebar-toggle:focus-visible {
  border-color: var(--dx-border-color);
  background: var(--dx-tertiary-bg);
  color: var(--dx-topbar-hover-color);
}
.pen-app-shell .main-sidebar {
  border-inline-end: 1px solid var(--dx-sidebar-border);
  box-shadow: 2px 0 18px rgba(15, 23, 42, .035);
}
.pen-app-shell .main-sidebar .navbar-brand {
  border-bottom: 1px solid var(--dx-sidebar-border);
}
.pen-app-shell .main-sidebar .navbar-menu { padding-inline: .75rem !important; }
.pen-app-shell .main-sidebar .nav-menu-title {
  margin: 1.25rem .65rem .45rem;
  color: var(--dx-sidebar-menu-title);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.pen-app-shell .main-sidebar .nav-link {
  min-height: 2.65rem;
  margin-block: .15rem;
  padding: .55rem .75rem;
  border: 1px solid transparent;
  border-radius: .625rem;
  line-height: 1.45;
}
.pen-app-shell .main-sidebar .nav-link .icons {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  flex: 0 0 1.25rem;
}
.pen-app-shell .main-sidebar .nav-link .icons svg { width: 1.05rem; height: 1.05rem; }
.pen-app-shell .main-sidebar .nav-link.active { font-weight: 700; }
.pen-app-shell .main-sidebar .nav-menu-sub { padding-inline-start: 1.5rem; }
.pen-app-shell .main-sidebar .nav-menu-sub .nav-link {
  min-height: 2.3rem;
  padding-block: .42rem;
  font-size: .82rem;
}
.pen-app-shell .page-wrapper {
  background: var(--dx-body-bg);
  padding-block: calc(var(--dx-topbar, 4.6875rem) + 1.5rem) 2.25rem;
}
.pen-app-shell #main-content {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}
.pen-app-shell .pen-page-heading {
  align-items: center;
  min-height: 3.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--dx-border-color);
}
.pen-app-shell .pen-page-heading .breadcrumb { color: var(--dx-secondary-color); }
.pen-app-shell .pen-page-heading .breadcrumb-item.active { color: var(--dx-body-color); font-weight: 600; }
.pen-app-shell .card {
  border: 1px solid var(--dx-border-color);
  border-radius: .75rem;
  background: var(--dx-card-bg, var(--dx-secondary-bg));
  box-shadow: 0 4px 18px rgba(15, 23, 42, .035);
}
.pen-app-shell .card-header,
.pen-app-shell .card-footer {
  border-color: var(--dx-border-color);
  background: transparent;
}
.pen-app-shell .card-header { padding: 1rem 1.15rem; }
.pen-app-shell .card-body { padding: 1.15rem; }
.pen-app-shell .card-title { color: var(--dx-body-color); font-weight: 700; }
.pen-app-shell .card-header > .text-muted,
.pen-app-shell .card-header .text-muted { line-height: 1.7; }
.pen-app-shell .table-card,
.pen-app-shell .table-responsive {
  border-radius: .5rem;
}
.pen-app-shell .table {
  --dx-table-bg: transparent;
  --dx-table-border-color: var(--dx-border-color);
  color: var(--dx-body-color);
  margin-bottom: 0;
}
.pen-app-shell .table > :not(caption) > * > * {
  padding: .75rem .85rem;
  border-bottom-color: var(--dx-border-color);
  vertical-align: middle;
}
.pen-app-shell .table thead th {
  color: var(--dx-secondary-color);
  background: var(--dx-tertiary-bg);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.pen-app-shell .table tbody tr { transition: background-color .15s ease; }
.pen-app-shell .table tbody tr:hover { background: var(--dx-primary-bg-subtle); }
.pen-app-shell .table tbody tr:last-child > * { border-bottom: 0; }
.pen-app-shell .form-label { margin-bottom: .4rem; color: var(--dx-body-color); font-size: .8rem; font-weight: 600; }
.pen-app-shell .form-control,
.pen-app-shell .form-select,
.pen-app-shell .input-group-text {
  min-height: 2.65rem;
  border-color: var(--dx-border-color);
  border-radius: .5rem;
  background-color: var(--dx-secondary-bg);
  color: var(--dx-body-color);
}
.pen-app-shell .input-group > .form-control,
.pen-app-shell .input-group > .form-select,
.pen-app-shell .input-group > .input-group-text { border-radius: 0; }
.pen-app-shell .input-group > :first-child { border-start-start-radius: .5rem; border-end-start-radius: .5rem; }
.pen-app-shell .input-group > :last-child { border-start-end-radius: .5rem; border-end-end-radius: .5rem; }
.pen-app-shell .form-control:focus,
.pen-app-shell .form-select:focus {
  border-color: var(--dx-primary);
  box-shadow: 0 0 0 .2rem var(--dx-primary-bg-subtle);
}
.pen-app-shell .btn {
  min-height: 2.5rem;
  border-radius: .5rem;
  font-weight: 600;
}
.pen-app-shell .btn-sm { min-height: 2.2rem; border-radius: .45rem; }
.pen-app-shell .btn > svg,
.pen-app-shell .btn > i[data-lucide] { flex: 0 0 auto; }
.pen-app-shell .badge { font-weight: 600; }
.pen-app-shell .alert { border-radius: .625rem; }
.pen-app-shell .nav-pills .nav-link {
  border-radius: .5rem;
  color: var(--dx-secondary-color);
  font-size: .82rem;
  font-weight: 600;
}
.pen-app-shell .nav-pills .nav-link:hover,
.pen-app-shell .nav-pills .nav-link.active { color: var(--dx-primary); background: var(--dx-primary-bg-subtle); }
.pen-app-shell .dropdown-menu {
  border-color: var(--dx-border-color);
  border-radius: .625rem;
  background: var(--dx-secondary-bg);
  box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .12);
}
.pen-app-shell .dropdown-item { border-radius: .4rem; }
.pen-app-shell .dropdown-item:hover,
.pen-app-shell .dropdown-item:focus { background: var(--dx-primary-bg-subtle); color: var(--dx-primary); }
.pen-notification-menu { min-width: min(20rem, calc(100vw - 1rem)); }
.pen-notification-list { max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; }
.pen-filter-bar { background: var(--dx-secondary-bg); box-shadow: 0 2px 10px rgba(15, 23, 42, .025); }
.pen-app-shell :is(.pen-filter-bar, .border, .border-top, .border-bottom) { border-color: var(--dx-border-color) !important; }
.pen-app-shell :is(.bg-light, .bg-light-subtle, .bg-body-tertiary) { background-color: var(--dx-tertiary-bg) !important; }
.pen-app-shell .main-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--dx-border-color);
  color: var(--dx-secondary-color);
  font-size: .75rem;
}
.pen-app-shell #main-content > .pen-dashboard { padding-bottom: 1rem; }
.pen-app-shell #main-content > .pen-dashboard .pen-dashboard-card.h-100 { height: auto !important; }
.pen-app-shell #main-content > .main-footer {
  clear: both;
  margin-top: 4rem;
  padding-top: 1.5rem;
}
[data-bs-theme="dark"] .pen-app-shell .card { box-shadow: 0 6px 22px rgba(0, 0, 0, .12); }
[data-bs-theme="dark"] .pen-app-shell .table tbody tr:hover { background: color-mix(in srgb, var(--dx-primary) 10%, transparent); }
@media (max-width: 991.98px) {
  .pen-app-shell .page-wrapper { padding-top: calc(var(--dx-topbar, 4.6875rem) + 1rem); }
  .pen-app-shell #main-content { padding-inline: 1rem; }
}
@media (max-width: 767.98px) {
  .pen-app-shell .page-wrapper { padding-block-end: 1.5rem; }
  .pen-app-shell #main-content { padding-inline: .75rem; }
  .pen-app-shell .pen-page-heading { align-items: flex-start; gap: .75rem !important; }
  .pen-app-shell .pen-page-heading nav { width: 100%; }
  .pen-app-shell .card-header,
  .pen-app-shell .card-body { padding: .9rem; }
  .pen-app-shell .table > :not(caption) > * > * { padding: .65rem .7rem; }
}
@media (max-width: 575.98px) {
  .pen-app-shell #main-content { padding-inline: .5rem; }
  .pen-app-shell .pen-page-heading { margin-bottom: 1.1rem !important; }
  .pen-app-shell .pen-page-heading-copy h1 { font-size: 1.2rem; }
  .pen-app-shell .btn { width: auto; max-width: 100%; white-space: normal; }
  .pen-notification-menu { min-width: min(19rem, calc(100vw - 1rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .pen-app-shell .table tbody tr { transition: none; }
}

/* ── Directory operation controls ─────────────────────────────────── */
.pen-app-shell .persons-table th:last-child,
.pen-app-shell .persons-table td:last-child {
  min-width: 16rem;
  text-align: center;
  vertical-align: middle;
}
.pen-app-shell .persons-actions-cell { white-space: nowrap; }
.pen-app-shell .persons-actions-wrap {
  display: flex;
  width: 100%;
  justify-content: center;
}
.pen-app-shell .persons-actions-direct {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.pen-app-shell .persons-direct-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.15rem;
  padding: .35rem .6rem;
  font-size: .77rem;
  white-space: nowrap;
}
.pen-app-shell .persons-actions-direct + .persons-actions-dropdown { display: none; }
.pen-app-shell .persons-actions-dropdown {
  display: flex;
  justify-content: center;
}
.pen-app-shell .persons-actions-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 6.75rem;
  padding-inline: .8rem;
  color: var(--dx-body-color);
}
.pen-app-shell .persons-actions-trigger:hover,
.pen-app-shell .persons-actions-trigger:focus-visible {
  border-color: var(--dx-primary);
  color: var(--dx-primary);
  background: var(--dx-primary-bg-subtle);
}
.pen-app-shell .persons-actions-dropdown .dropdown-menu {
  min-width: 13rem;
  margin-top: .35rem;
  padding: .35rem;
}
.pen-app-shell .persons-actions-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.35rem;
  white-space: nowrap;
}

/* Canonical icon system: Lucide. Keep stroke, sizing and alignment consistent
   across navigation, buttons, cards and dynamically-rendered content. */
.pen-app-shell :where(svg.lucide, i[data-lucide]) {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
}
.pen-app-shell .main-sidebar .nav-link .icons :where(svg.lucide, i[data-lucide]) {
  width: 1.05rem;
  height: 1.05rem;
  stroke-width: 1.8;
}
.pen-app-shell .btn :where(svg.lucide, i[data-lucide]),
.pen-app-shell .dropdown-item :where(svg.lucide, i[data-lucide]) {
  stroke-width: 1.8;
}
.pen-app-shell .pen-dashboard-quick-icon :where(svg.lucide, i[data-lucide]),
.pen-app-shell .pen-card-heading-icon :where(svg.lucide, i[data-lucide]) {
  stroke-width: 1.75;
}
@media (max-width: 767.98px) {
  .pen-app-shell .persons-table th:last-child,
  .pen-app-shell .persons-table td:last-child { min-width: 4.25rem; }
  .pen-app-shell .persons-actions-direct { display: none; }
  .pen-app-shell .persons-actions-direct + .persons-actions-dropdown { display: flex; }
  .pen-app-shell .persons-actions-trigger {
    width: 2.65rem;
    min-width: 2.65rem;
    padding-inline: .45rem;
  }
  .pen-app-shell .persons-actions-dropdown .dropdown-menu {
    min-width: min(13rem, calc(100vw - 2rem));
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .pen-app-shell .persons-table th:last-child,
  .pen-app-shell .persons-table td:last-child { min-width: 4.25rem; }
  .pen-app-shell .persons-actions-direct { display: none; }
  .pen-app-shell .persons-actions-direct + .persons-actions-dropdown { display: flex; }
}