/*
 * TendWorks components (A2, restyled to UX standard v2 in 2026-10).
 *
 * ── HOW TO USE (area agents read this first) ───────────────────────────────
 * Every value comes from tw-tokens.css (type roles --tw-title-size ...,
 * spacing --tw-sp-4 ... --tw-sp-48, radii --tw-radius-pill/control/card,
 * --tw-btn-h, --tw-hit ...). Never hard-code hex or pixel scales in area CSS;
 * scope area overrides under the page root class.
 *
 * Page structure
 *   .tw-page-header                 breadcrumbs (top bar) > title row > tabs.
 *     .tw-page-header__title        h1, 24/32 600. One per page. The shell adds the module icon.
 *     .tw-page-header__desc         only when it states a rule the user needs.
 *     .tw-page-header__actions      right side: secondary buttons, then ONE primary.
 *   Partial: {% include "base/components/page_header.html" with title=... %}
 *   .tw-section / .tw-section__title   17/24 600, 32px between sections.
 *
 * Buttons (36px tall, 44px hit area on touch, radius 8, 14/500, padding 0 14)
 *   .tw-btn.tw-btn--primary         gradient, white text. Max ONE per region.
 *   .tw-btn  (or --secondary)       white, hairline border, ink text.
 *   .tw-btn.tw-btn--tertiary        text button in link colour ("View all", "Retry").
 *   .tw-btn.tw-btn--danger-text     destructive action in tables and menus.
 *   .tw-btn.tw-btn--danger          solid danger: the confirm dialog ONLY.
 *   .tw-btn.tw-btn--icon            36x36 icon-only; needs aria-label + title.
 *   .tw-btn--ghost  .tw-btn--block  .tw-btn--sm (same height, tighter padding)
 *   Legacy .oh-btn--primary / --secondary render as primary; other .oh-btn as
 *   secondary. aria-busy="true" shows a spinner without changing the width.
 *   .tw-btn--compact (32) / .tw-btn--lg (40): never mixed in one row.
 *
 * Action groups (4.21): any row of buttons is ONE line, centred, 8px gaps
 *   .tw-actions  (+ --end | --between | --nowrap | --stack)  secondary first,
 *     ONE primary last. Items: buttons, links as buttons, a <form> around a
 *     single button, .oh-dropdown wrappers, segmented view switches. No
 *     margins, floats or <br> between items. --stack: form / modal footers
 *     stack full width below 480px. Page header actions, toolbars, form,
 *     card and modal footers follow the same contract.
 *   Partial: {% include "base/components/form_footer.html" with submit_label=... %}
 *
 * Forms (Part 5; full guide: scratchpad w5_forms/CONVENTIONS.md)
 *   Render fields with the tag, not by hand:
 *     {% load tw_forms %} {% tw_field form.leave_type_id %}  {% tw_fields form %}
 *     options: label= help= kind= wide=True placeholder= hide_label=True
 *     kinds: input date time textarea select multiselect person file switch
 *            checkbox segmented radio cards checks (auto-detected from widget)
 *   {{ form }} / form.as_p / form.as_div render the same markup
 *   (FORM_RENDERER = base.form_renderer.TendWorksFormRenderer).
 *   .tw-field[.tw-field--wide|--error] > .tw-label[.tw-label--required]
 *     + .tw-input|.tw-select|.tw-textarea[data-tw-autogrow] + .tw-help
 *     + .tw-field-error. Wrapper id "id_<name>_parent_div" (HTMX targets).
 *   Label above 13/500, helper 12 muted under the control, error 12 danger,
 *   required = red asterisk only. Placeholders are examples, never labels.
 *   Selects: empty choice "Choose a leave type" (never "---"); select2 looks
 *     the same and searches only lists longer than 8.
 *   .tw-form-grid 1 column phone, 2 from 640px; .tw-form-section headings.
 *   .tw-date-range > .tw-date-range__part x2 (date + its day part).
 *   .tw-segmented > label.tw-segmented__option > input + .tw-segmented__label
 *     one row, equal widths, stacks below 390px only.
 *   .tw-radio-cards > label.tw-radio-card; label.tw-check > input.tw-checkbox;
 *   .tw-switch-field > text + span.tw-switch > input + .tw-switch__track.
 *   Person picker: .tw-person-picker[data-tw-person-picker] (avatar + name
 *     chip, "Change", searchable list); employee fields get it automatically.
 *   Drop zone: .tw-dropzone[data-tw-dropzone] (drag and drop, name, size,
 *     remove, accepted types, HTMX upload progress); FileFields get it.
 *   .tw-form-actions (primary bottom-left on pages); in modals use
 *   .tw-modal-footer: Cancel (data-tw-close) then ONE primary, sticky.
 *
 * Data
 *   .tw-table-wrap > table.tw-table  header 13/500 muted sentence case, rows
 *     48, cells 12 16, hover fill, no zebra, sticky header, scrolls inside.
 *     td.tw-num right-aligns numbers/money (dates stay left).
 *     .tw-person > .tw-avatar.tw-avatar--28 + .tw-person__name + .tw-person__meta
 *     Row actions: max 2 visible (.tw-btn--sm / --icon), rest in .tw-kebab.
 *     .tw-truncate truncates with ellipsis (add a title attribute).
 *   .tw-badge (alias .tw-pill) + --success|--warning|--danger|--info|--neutral
 *     or a status name (--pending, --approved, --rejected, --draft, --paid,
 *     --overdue, --open, --closed). 22px, radius 6, 12/500. Status only;
 *     counts are plain numbers. Empty badges are hidden.
 *   .tw-avatar --24|--28|--40|--64   photo or neutral initials (surface-2).
 *   .tw-kpis > .tw-kpi > .tw-kpi__value (28/600) + .tw-kpi__label (13 muted)
 *     hairline separated, no icons; .tw-kpi--danger|--warning colour the value
 *     only when it needs action. Partial: base/components/kpi_strip.html.
 *   .tw-card (> __header > __title, __body, __footer)  radius 12, no shadow,
 *     padding 20 (16 phone). Never nest a bordered card in a card: use
 *     .tw-divider or a .tw-section__title instead.
 *   .tw-toolbar > .tw-toolbar__search (280 desktop) + filters + view switch +
 *     .tw-toolbar__actions; one row on desktop, wraps on phone.
 *     .tw-chip (removable active filter, .tw-chip__remove).
 *   .tw-tabs > .tw-tabs__tab[aria-selected|aria-current]  14/500, gap 24,
 *     active indigo + 2px underline, scrolls (never wraps) on phone.
 *   .tw-tabset (+ --pill, --sticky)  THE tab component for panels: ARIA, keyboard,
 *     URL state, HTMX lazy panels, overflow menu. Include: components/tw_tabs.html,
 *     behaviour: static/index/tw-tabs.js. .tw-tabs above stays for link navigation.
 *   .tw-pagination  "1-25 of 240" (.tw-pagination__range) + prev/next.
 *   .tw-empty > .tw-empty__title (one 14 muted line) + .tw-empty__actions
 *     (one action max). Partial: base/components/empty_state.html.
 *   .tw-skeleton (+ --text, --row, --avatar) loading placeholders matching the
 *     final layout. .tw-error-state: inline message + Retry text button.
 *
 * Overlays (the only places with shadows)
 *   .oh-modal > .oh-modal__dialog > __dialog-header (title 17/600 + close X)
 *     + __dialog-body (scrolls, 24px padding) + __dialog-footer (fixed).
 *     A header+body wrapper <form>/<div> joins the column; .tw-modal-footer
 *     inside the body sticks to its bottom. Sizes: data-tw-size="sm|md|lg"
 *     on the header (480 / 640 / 880); create and update targets default md.
 *     <=480px: full-screen sheet with safe-area padding. tw-forms.js: focus
 *     trap, Esc closes the top modal, focus returns, scroll lock;
 *     [data-tw-close] closes the nearest modal or drawer.
 *   .tw-modal (native dialog) keeps its 560 / 720 widths.
 *   .tw-drawer[--sm|--lg] > __header (__title) + __body + __footer.
 *   Record drawer, bulk bar, card tables at 390, toast Undo: see the usage
 *   block at the top of tw-patterns.css (WF5 shared patterns).
 *   .tw-menu / .oh-dropdown__menu  shadow-md, radius 8. .tw-drawer side panel.
 *   window.twToast(msg, variant)  bottom-right (top on phone), 5s, one line,
 *     past tense ("Leave approved"). Django messages render the same way.
 *
 * Motion 150ms ease-out (--tw-motion); prefers-reduced-motion turns it off.
 * Focus: 2px indigo outline, 2px offset, everywhere (tw-tokens.css).
 * Never: text-transform uppercase, letter-spacing > 0, weights 700/800,
 * coloured glows, gradients other than the primary button / active nav.
 * ───────────────────────────────────────────────────────────────────────────
 *
 * Load order: tw-tokens.css, then the legacy CSS (build/css/style.min.css,
 * css/style.css, css/tendworks.css), then this file. It does four jobs:
 *
 *   Part 1  The shared .tw-* class API (buttons, fields, cards, badges, tables,
 *           alerts, modals, toasts, empty / error / loading states, links).
 *   Part 2  Legacy "oh-*" components mapped onto the same tokens, so pages that
 *           still use the old markup get the same look and pass WCAG AA.
 *   Part 3  2026-10 modern look on the shared and legacy classes.
 *   Part 4  UX standard v2: final values for every component above plus the
 *           new page header, KPI strip, toolbar, chip, avatar, pagination and
 *           skeleton classes. Later parts win; edit Part 4 for v2 changes.
 *
 * Rules for this file:
 *   - Colours, type, space, radius, shadow and motion come from tw-tokens.css.
 *   - Focus is the global ring from tw-tokens.css. Nothing here removes it.
 *   - !important is used in Part 2 only where tendworks.css or the compiled SCSS
 *     already uses it on the same property.
 */

/* ═══ MIGRATED LEGACY RULES (from css/style.css and css/tendworks.css, which are no longer linked).
   Kept first in this file so the cascade order matches the old link order (legacy, then tw-*).
   Rules the tw-* files already redefine, and rules for classes no template uses, were deleted. ═══ */

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/material_icons.53436aca8627.woff2") format("woff2");
}

@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/material_icons_outlined.c820c7455db7.woff2") format("woff2");
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes tw-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -800px 0
    }

    100% {
        background-position: 800px 0
    }
}

@keyframes twAnnSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(0.992); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

@keyframes twAnnSlideOut {
  from { opacity: 1; transform: translateY(0)    scale(1);     }
  to   { opacity: 0; transform: translateY(18px) scale(0.992); }
}

@keyframes twSpinAnim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes tw-vhr-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

body {
  background-color: var(--tw-bg, #f4f2ef);
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.note-modal-backdrop {
  z-index: 1020;
}

.note-editing-area {
  background-color: white;
}

.oh-activity-sidebar__body {
  overflow-y: auto !important;
  min-height: calc(100% - 90px) !important;
  max-height: calc(110% - 90px) !important;
}

#mainNav {
  padding: 0 !important;
}

.oh-modal__close--custom {
  background: none;
  position: absolute;
  top: 25px;
  right: 15px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

ul.errorlist li {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

ul:not(.ul) {
  list-style-type: none;
}

ion-icon {
  pointer-events: none;
}

.row-status--purple {
  border-left: 4px solid rgba(128, 128, 128, 0.482);
  border-radius: 5px;
}

.row-status--cyan {
  border-left: 4px solid cyan;
  border-radius: 5px;
}

.row-status--yellow {
  border-left: 4px solid yellowgreen;
  border-radius: 5px;
}

.row-status--red {
  border-left: 4px solid red;
  border-radius: 5px;
}

.row-status--black {
  border-left: 4px solid black;
  border-radius: 5px;
}

.row-status--gray {
  border-left: 4px solid gray;
  border-radius: 5px;
}

.row-status--orange {
  border-left: 4px solid var(--tw-warning-solid, #8a6400);
  border-radius: 5px;
}

.row-status--gray {
  border-left: 4px solid gray;
  border-radius: 5px;
}

.row-status--yellow {
  border-left: 4px solid yellowgreen;
  border-radius: 5px;
}

.row-status--blue {
  border-left: 4px solid rgb(103, 171, 238);
  border-radius: 5px;
}

form label:not(.oh-label):not(.oh-input__label) {
  font-weight: 600;
}

.oh-modal .oh-modal__dialog-title {
  font-weight: 600;
  color: #4f4a4a;
}

.triple-spinner {
  display: block;
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top: 4px solid var(--tw-ink, #1a1918);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.triple-spinner::before,
.triple-spinner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 4px solid transparent;
}

.triple-spinner::before {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-top-color: var(--tw-ink-muted, #5c5a54);
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3.5s linear infinite;
}

.triple-spinner::after {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-top-color: var(--tw-border-strong, #8a857d);
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.75s linear infinite;
}

.oh-titlebar__tag.filter-field {
  border: solid 1px rgba(79, 70, 229, 0.2);
}

.oh-titlebar__tag--custom {
  background-color: rgba(79, 70, 229, 0.6) !important;
}

.loader-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin-left: 199px;
}

.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #a4a3a3;
  width: 100%;
  height: 100%;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader-text {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: bold;
  color: #000;
}

.oh-accordion-meta__header .oh-accordion-meta__title {
  font-weight: 600;
}

.exclude-accordion-style {
  cursor: pointer;
}

.panel {
  display: none;
  background-color: white;
  overflow: hidden;
}

.perm-accordion {
  border: 1px solid #6c757d1c !important;
  margin: 0 0 2px 0 !important;
  width: -100%;
}

.app-permissions {
  background-color: rgba(242, 249, 255, 0.586);
}

.perm-accordion-active {
  background-color: rgba(215, 233, 251, 0.621) !important;
}

.perm-accordion-active:hover {
  background-color: rgba(215, 233, 251, 0.408) !important;
}

.arrow-up::before {
  content: "⇑";
  font-size: 15px;
  display: inline-block;
  margin-right: 5px;
}

.arrow-down::before {
  content: "⇓";
  font-size: 15px;
  display: inline-block;
  margin-right: 5px;
}

.arrow-up-down::before {
  content: "⇅";
  font-size: 15px;
  display: inline-block;
  margin-right: 5px;
}

.oh-activity-sidebar__header {
  position: relative;
}

.select2-container .select2-selection.select2-selection--multiple {
  padding: 5px !important;
  max-height: 90px !important;
  overflow: hidden;
  overflow-y: scroll;
}

@media screen and (max-width: 575.98px) {
  .at-work-seconds {
    font-size: 10px;
  }
}

@media screen and (max-width: 575.98px) {
  #attendance-activity-container .oh-btn {
    padding: 0.5rem 0.2rem;
  }
}

@media screen and (max-width: 575.98px) {
  .oh-pagination {
    margin-bottom: 10px;
  }
}

.oh-main__topbar {
  padding-bottom: 1rem;
}

.oh-inner-sidebar-content {
  padding-top: 0;
}

.hydrated:not(.close-icon) {
  margin-right: 4px;
}

.required-star::after {
  padding-left: 3px;
}

.oh-navbar {
  z-index: 15 !important;
}

.swal2-actions {
  direction: rtl;
}

.oh-dropdown__menu {
  z-index: 15;
}

.animated-background {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: tw-skeleton-pulse;
  animation-timing-function: ease-in-out;
  background-color: var(--tw-surface, #eeebe7);
  border-radius: var(--tw-radius-md, 10px);
  height: 300px;
  position: relative;
}

.d-inline {
  display: inline !important;
}

.d-none,
.note-modal-backdrop {
  display: none !important;
}

.lastTh {
  position: sticky;
  right: 0;
  background-color: #ffff !important;
  z-index: 2;
  width: 160px;
}

.lastTd {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 160px;
  overflow: scroll;
  scrollbar-width: none !important;
  padding: 4px !important;
}

.custom-radio-checkmark {
  width: 18px;
  height: 18px;
  background-color: #eee;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.custom-radio-checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

#c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}

#profile-view .oh-general__tab {
  margin-bottom: 15px;
}

#profile-view .resign-status {
  background: #73bbe12b;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #357579;
}

#profile-view .enlarge-image-container {
  display: none;
  position: fixed;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 50%;
  z-index: 9999;
}

#profile-view .enlarge-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 5%;
}

#profile-view .oh-sticky-table {
  max-height: 50vh;
}

#profile-view .oh-modal_close--custom {
  border: none;
  background: none;
  font-size: 1.5rem;
  opacity: 0.7;
  position: absolute;
  top: 25px;
  right: 15px;
}

#profile-view .custom-dialog {
  max-width: 1000px;
  max-height: 800px;
}

#profile-view .file-validation {
  color: #4f5bd9;
  background-color: #d8e7f0;
  border-color: #d6e9c6;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
}

#profile-view .oh-not-found {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50vh;
  opacity: 0.5;
}

#profile-view .editable-input:read-only {
  color: hsl(0, 0%, 11%);
  background-color: transparent;
  border: none;
  height: 100%;
  border: 1px solid transparent;
}

#profile-view .editable-input:read-only:hover {
  border: 1px solid hsl(213, 22%, 84%);
}

#profile-view .file-upload,
#profile-view .file-upload {
  margin-top: 6px !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 1.75rem !important;
}

.d-flex-justify-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.oh-faq__tag {
  border-radius: 10px;
  font-weight: 600;
}

.oh-faq__input-search {
  margin: 1rem 0;
}

#faqContainer h1.oh-main__titlebar-title {
  margin-bottom: 0;
}

#faqContainer .oh-faq_search--icon {
  top: 17px;
}

.truncated-text {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncated-text::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1) 80%);
  pointer-events: none;
}

#faqContainer .oh-faq_search--icon {
  top: 17px;
}

.swal2-styled.swal2-confirm {
  background-color: var(--tw-success-solid, #1f7a46);
}

.swal2-styled.swal2-cancel {
  background-color: var(--tw-danger-solid, #c63d33);
}

:root {
  --tw-brand: var(--tw-action, #1a1918);
  --tw-brand-dark: var(--tw-action-active, #000000);
  --tw-brand-light: var(--tw-yellow-soft, #f6fbc2);
  --tw-brand-glow: rgba(26, 25, 24, 0.12);
  --tw-border-focus: var(--tw-border-ink, #1a1918);
  --tw-input-bg: var(--tw-white, #ffffff);
  --tw-input-bg-focus: var(--tw-white, #ffffff);
  --tw-radius: 8px;
  --tw-shadow-focus: 0 0 0 var(--tw-focus-offset, 2px) var(--tw-focus-halo, #e4f222);
  --tw-label-w: 160px;
  --tw-text: var(--tw-fg, #1a1918);
  --tw-text-muted: var(--tw-fg-muted, #5c5a54);
  --tw-header-bg: var(--tw-surface, #eeebe7);
  --tw-danger: var(--tw-danger-fg, #b3362d);
  --color-brand-start: var(--tw-action, #1a1918);
  --color-brand-mid: var(--tw-action, #1a1918);
  --color-brand-end: var(--tw-action, #1a1918);
  --color-brand-gradient: var(--tw-action, #1a1918);
  --color-brand-gradient-subtle: var(--tw-action, #1a1918);
  --color-text-on-brand: var(--tw-action-fg, #ffffff);
  --color-text-on-brand-muted: rgba(255, 255, 255, 0.75);
  --color-border-on-brand: var(--tw-border, #e4e0db);
  --color-surface-on-brand: rgba(255, 255, 255, 0.07);
}

body {
  background-color: var(--tw-bg, #f4f2ef);
}

.oh-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  position: sticky !important;
  top: 0;
  height: 100vh;
  width: 100% !important;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none !important;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

.oh-sidebar::-webkit-scrollbar {
  width: 4px;
}

.oh-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.oh-sidebar::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 99px;
}

.oh-sidebar::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

.oh-sidebar__header {
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 0.75rem;
  background: #f8fafc;
}

.oh-sidebar__company-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.tw-sidebar-logo-container {
  width: 42px;
  height: 42px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}

.tw-sidebar-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.oh-sidebar__company-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oh-sidebar__company-name {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oh-sidebar__company-type {
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

.oh-sidebar__menu-link {
  padding: 0.7rem 1rem !important;
  margin: 0.15rem 0.6rem !important;
  border-radius: 10px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 0.86rem !important;
  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-property: background-color, border-color, color, box-shadow, transform !important;
  display: flex !important;
  align-items: center !important;
  border-left: 3px solid transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

.oh-sidebar__menu-link > span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.oh-sidebar__menu-link:hover {
  background: var(--tw-surface) !important;
  color: var(--tw-fg) !important;
}

.oh-sidebar__menu-link--active {
  background: var(--tw-yellow-soft) !important;
  color: var(--tw-fg) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border-left: 3px solid var(--tw-ink) !important;
}

.oh-sidebar__menu-icon {
  margin-right: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

.oh-sidebar__menu-link .oh-sidebar__menu-icon img,
.oh-sidebar__menu-link .oh-sidebar__menu-icon svg {
  filter: brightness(0.5) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  fill: #64748b !important;
}

.oh-sidebar__menu-link .oh-sidebar__menu-icon svg path {
  fill: #64748b !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.oh-sidebar__menu-link:hover .oh-sidebar__menu-icon img,
.oh-sidebar__menu-link--active .oh-sidebar__menu-icon img {
  filter: brightness(0.5) !important;
}

.oh-sidebar__menu-link:hover .oh-sidebar__menu-icon svg path,
.oh-sidebar__menu-link--active .oh-sidebar__menu-icon svg path {
  fill: #64748b !important;
}

.oh-sidebar__submenu {
  margin: 0.2rem 0.6rem 0.6rem 2.4rem !important;
  padding: 0.2rem 0 !important;
  background: transparent !important;
}

.oh-sidebar__submenu-items {
  border-left: 2px solid #e9edf2;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.oh-sidebar__submenu-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.oh-sidebar__submenu-link {
  padding: 0.35rem 0.75rem !important;
  font-size: 0.88rem !important;
  color: #64748b !important;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  border-radius: 6px;
  margin: 0.1rem 0 !important;
}

.oh-sidebar__submenu-link:hover {
  color: var(--tw-fg) !important;
  background: var(--tw-surface) !important;
  padding-left: 1.1rem !important;
  border-radius: 6px;
}

/* The wrapper grid (columns, width, transition) is owned by tw-shell.css. */

.oh-wrapper-main--closed .oh-sidebar__company-info,
.oh-wrapper-main--closed .oh-sidebar__menu-link span,
.oh-wrapper-main--closed .oh-sidebar__submenu {
  display: none !important;
}

.oh-wrapper-main--closed .oh-sidebar__header {
  padding: 1.25rem 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.oh-wrapper-main--closed .oh-sidebar__company-wrap {
  gap: 0 !important;
  justify-content: center !important;
  width: 100% !important;
}

.oh-wrapper-main--closed .tw-sidebar-logo-container {
  width: 38px !important;
  height: 38px !important;
  padding: 5px !important;
  margin: 0 !important;
}

.oh-wrapper-main--closed .oh-sidebar__menu-link {
  padding: 0.75rem 0 !important;
  margin: 0.25rem 0.6rem !important;
  justify-content: center !important;
  border-left: none !important;
  border-radius: 10px !important;
  width: auto !important;
}

.oh-wrapper-main--closed .oh-sidebar__menu-link--active {
  border-left: none !important;
}

.oh-wrapper-main--closed .oh-sidebar__menu-icon {
  margin-right: 0 !important;
  width: 24px !important;
  height: 24px !important;
}

.oh-modal {
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-left: 280px !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.oh-wrapper-main--closed .oh-modal {
  padding-left: 70px !important;
}

.oh-modal--show {
  display: flex !important;
}

.oh-modal__dialog {
  margin: 0 !important;
  max-width: calc(100% - 3rem) !important;
  width: 900px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.oh-modal__dialog--xl {
  width: 1200px !important;
  max-width: calc(100% - 3rem) !important;
}

.oh-modal__dialog--confirm,
.oh-modal__dialog--timeoff {
  max-width: 400px !important;
  width: 400px !important;
}

@media (max-width: 1024px) {
  .oh-modal__dialog {
    width: 95% !important;
  }
}

@media (max-width: 767px) {
  .oh-modal {
    padding-left: 0 !important;
  }
}

@media (max-width: 767px) {
  .oh-modal__dialog {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin: 0 !important;
  }
}

.oh-field-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

select.oh-input {
  padding: 0.48rem 0.875rem !important;
  height: auto !important;
  appearance: auto !important;
}

.oh-auth {
  background: var(--tw-bg);
}

.oh-modal__dialog {
  overflow: hidden;
}

.oh-modal__dialog-title {
  margin: 0 !important;
}

.oh-modal__dialog-body {
  scrollbar-width: thin;
  scrollbar-color: var(--tw-border) transparent;
}

.oh-modal__dialog-body::-webkit-scrollbar {
  width: 5px;
}

.oh-modal__dialog-body::-webkit-scrollbar-thumb {
  background: var(--tw-border);
  border-radius: 99px;
}

.oh-modal__close,
.oh-modal__close--custom,
.oh-modal_close--custom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.oh-label__info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.oh-label__info .oh-label {
  margin-bottom: 0 !important;
}

body .oh-label,
body .oh-input__label,
body label,
.oh-wrapper-main .oh-label,
.oh-wrapper-main .oh-input__label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--tw-text-muted) !important;
  text-align: left !important;
  line-height: 1.4 !important;
  display: block !important;
  margin: 0 0 0.25rem !important;
  cursor: default;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  width: auto !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.oh-rate > label {
  display: inline-block !important;
  width: 1.15em !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  float: right !important;
  font-size: 1.25rem !important;
  color: #ccc !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-align: center !important;
}

.oh-rate > input:checked ~ label {
  color: #ffc700 !important;
}

.oh-input-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.3rem !important;
  margin-bottom: 1.1rem !important;
  position: relative !important;
  width: 100% !important;
}

.oh-input-group .oh-label,
.oh-input-group .oh-input__label {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: left !important;
  padding-top: 0 !important;
  margin-bottom: 0.25rem !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.oh-input-group > .oh-input,
.oh-input-group > select,
.oh-input-group > textarea,
.oh-input-group > .select2-container,
.oh-input-group > .oh-password-input-container,
.oh-input-group > .oh-field-wrap {
  width: 100% !important;
  min-width: 0 !important;
}

.oh-input-group > .oh-input-group__icon {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  width: auto !important;
  color: var(--tw-text-muted) !important;
  font-size: 1.1rem !important;
}

.oh-input-group > .oh-input-group__icon--left {
  left: 0.85rem !important;
}

.oh-input.oh-input__icon {
  padding-left: 2.3rem !important;
}

.oh-modal__dialog-body .row,
.oh-modal__dialog-body form .row {
  row-gap: 0 !important;
}

.oh-modal__dialog-body .row > [class*="col-"] {
  padding-bottom: 0 !important;
}

.oh-modal__dialog-body .row > [class*="col-"] > .oh-input-group {
  margin-bottom: 1rem !important;
}

.oh-input-group:has(> .oh-switch),
.oh-input-group:has(> input[type="checkbox"]) {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.6rem 0.9rem !important;
  min-height: 42px !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--tw-border) !important;
  border-radius: var(--tw-radius) !important;
}

.oh-input-group:has(> .oh-switch) .oh-label,
.oh-input-group:has(> input[type="checkbox"]) .oh-label {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--tw-text-muted) !important;
  line-height: 1.3 !important;
}

.oh-input-group:has(> .oh-switch) > .oh-switch,
.oh-input-group:has(> input[type="checkbox"]) > input[type="checkbox"] {
  flex-shrink: 0 !important;
}

.oh-input {
  padding: 0.5rem 0.875rem !important;
  background: var(--tw-input-bg) !important;
  width: 100% !important;
  line-height: 1.5 !important;
}

.oh-input:focus,
.oh-input:focus-visible {
  background: var(--tw-input-bg-focus) !important;
  box-shadow: var(--tw-shadow-focus) !important;
}

.oh-input:disabled {
  background: #f1f5f9 !important;
  padding-left: 0.875rem !important;
}

.oh-input--textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6 !important;
}

textarea.oh-input {
  resize: vertical;
  line-height: 1.6 !important;
}

input[type="file"].oh-input,
.oh-input--file {
  padding: 0.375rem 0.75rem !important;
  cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button {
  background: var(--tw-header-bg);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-sm);
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  margin-right: 0.6rem;
  transition: background .2s;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background: #e2e8f0;
}

.form-control {
  padding: 0.5rem 0.875rem !important;
  background: var(--tw-input-bg) !important;
  width: 100% !important;
  line-height: 1.5 !important;
}

.form-control:focus {
  background: var(--tw-input-bg-focus) !important;
  box-shadow: var(--tw-shadow-focus) !important;
}

textarea.form-control {
  resize: vertical;
  line-height: 1.6 !important;
}

.form-control:disabled {
  background: #f1f5f9 !important;
}

.form-control[readonly] {
  background: #f1f5f9 !important;
  cursor: not-allowed !important;
}

.oh-select,
select.oh-select--lg {
  padding: 0.5rem 0.875rem !important;
  background: var(--tw-input-bg) !important;
  width: 100% !important;
  appearance: auto;
}

.oh-select:focus,
select.oh-select--lg:focus {
  box-shadow: var(--tw-shadow-focus) !important;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  background: var(--tw-input-bg) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

.select2-container--focus .select2-selection--single,
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
  box-shadow: var(--tw-shadow-focus) !important;
  background: var(--tw-input-bg-focus) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  flex-wrap: wrap !important;
  gap: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  align-items: center !important;
  gap: 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  font-weight: bold !important;
  margin-right: 0 !important;
  float: none !important;
  cursor: pointer !important;
}

.select2-dropdown {
  overflow: hidden !important;
}

.select2-container--open .select2-dropdown--below {
  top: 6px !important;
}

.select2-container--open .select2-dropdown--above {
  top: -6px !important;
}

.oh-btn {
  padding: 0.5rem 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.oh-btn ion-icon {
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.oh-btn--secondary {
  background: var(--tw-action) !important;
}

.oh-btn--secondary:hover {
  background: var(--tw-action-hover) !important;
}

.oh-btn--secondary:active {
  transform: translateY(0) !important;
  filter: none !important;
}

.oh-btn--danger,
.oh-btn--success {
  border-radius: var(--tw-radius) !important;
}

.oh-btn--primary {
  background: var(--tw-action) !important;
  border-radius: var(--tw-radius) !important;
}

.oh-btn--primary:hover {
  background: var(--tw-action-hover) !important;
  text-decoration: none !important;
}

.oh-btn--primary:active {
  transform: translateY(0) !important;
  filter: none !important;
}

.oh-btn--secondary-outline {
  border-radius: var(--tw-radius) !important;
  border-color: var(--tw-brand) !important;
}

.oh-input-group .errorlist,
.oh-input-group p.error {
  padding-left: 0 !important;
  font-size: 0.78rem !important;
  color: var(--tw-danger) !important;
  margin-top: 0.2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  list-style: none !important;
}

.oh-password-input-container {
  position: relative !important;
  width: 100% !important;
}

.oh-password-input-container .oh-input--password {
  padding-right: 2.75rem !important;
  width: 100% !important;
}

.oh-password-input--toggle {
  position: absolute !important;
  right: 0.6rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0.25rem !important;
  font-size: 1rem !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--tw-radius-sm) !important;
}

.oh-password-input--toggle:hover {
  color: var(--tw-text-muted) !important;
}

.note-editor.note-frame {
  border: 1.5px solid var(--tw-border) !important;
  border-radius: var(--tw-radius) !important;
  overflow: hidden;
  box-shadow: none !important;
}

.note-toolbar {
  background: var(--tw-header-bg) !important;
  border-bottom: 1px solid var(--tw-border) !important;
  padding: 0.4rem 0.5rem !important;
}

.note-editing-area {
  border-radius: 0 0 var(--tw-radius) var(--tw-radius);
}

@media (max-width: 640px) {
  .oh-input-group {
    margin-bottom: 0.85rem !important;
  }
}

@media (max-width: 640px) {
  .oh-modal__dialog-body {
    padding: 1rem !important;
  }
}

@media (max-width: 640px) {
  .oh-modal__dialog-header {
    padding: 0.9rem 1rem !important;
  }
}

@media (max-width: 640px) {
  .oh-modal__dialog-footer {
    padding: 0.75rem 1rem !important;
  }
}

@media (max-width: 640px) {
  .oh-btn {
    justify-content: center !important;
  }
}

.oh-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.oh-switch__checkbox,
.oh-switch input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 42px !important;
  height: 23px !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  transition: background .22s ease, box-shadow .22s ease !important;
  position: relative !important;
  flex-shrink: 0 !important;
  border: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 42px !important;
  height: 23px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.oh-switch__checkbox::after,
.oh-switch input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  top: 3px !important;
  left: 3px !important;
  transition: transform .22s cubic-bezier(0.4,0,0.2,1) !important;
}

.oh-switch__checkbox:checked::after,
.oh-switch input[type="checkbox"]:checked::after {
  left: 3px !important;
  transform: translateX(19px) !important;
}

.oh-switch__checkbox:focus-visible,
.oh-switch input[type="checkbox"]:focus-visible {
  box-shadow: var(--tw-shadow-focus) !important;
}

.oh-switch__checkbox:disabled,
.oh-switch input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
}

.oh-input--filter,
.oh-input--small {
  padding: 0.28rem 0.65rem !important;
  border-radius: var(--tw-radius-sm) !important;
}

input[type="radio"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.oh-switch input[type="checkbox"] {
  width: 42px !important;
  height: 23px !important;
  accent-color: unset !important;
}

.oh-filter-tag {
  border-radius: 99px !important;
}

#objectCreateModal.tw-ann-fullscreen {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, 0.62) !important;
}

#objectCreateModal.tw-ann-fullscreen .oh-modal__dialog {
  max-width: 100% !important;
  width: 100% !important;
  height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#objectCreateModal.tw-ann-fullscreen .oh-modal__dialog-header,
#objectCreateModal.tw-ann-fullscreen .oh-modal__dialog-body,
#objectCreateModal.tw-ann-fullscreen .oh-modal__dialog-footer {
  display: none !important;
}

.tw-ann-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  animation: twAnnSlideIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.tw-ann-wrap.tw-closing {
  animation: twAnnSlideOut 0.2s ease-in forwards;
}

.tw-ann-wrap > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.tw-ann-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: var(--tw-header-bg);
  border-bottom: 1.5px solid var(--tw-border);
  flex-shrink: 0;
  gap: 1rem;
  min-height: 66px;
}

.tw-ann-header__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tw-ann-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tw-action);
  color: var(--tw-action-fg);
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--tw-brand-glow);
}

.tw-ann-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tw-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.tw-ann-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tw-ann-char-badge {
  font-size: 0.75rem;
  color: var(--tw-text-muted);
  background: var(--tw-input-bg);
  border: 1px solid var(--tw-border);
  border-radius: 99px;
  padding: 0.2rem 0.75rem;
  font-variant-numeric: tabular-nums;
  transition: color .2s, background .2s;
}

.tw-ann-char-badge--warn {
  color: #d97706;
  background: #fffbeb;
  border-color: #fcd34d;
}

.tw-ann-char-badge--danger {
  color: var(--tw-danger);
  background: #fef2f2;
  border-color: #fca5a5;
}

.tw-ann-header__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--tw-text-muted);
  font-size: 1.35rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.tw-ann-header__close:hover {
  background: #fee2e2;
  color: var(--tw-danger);
}

.tw-modern-input {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  color: #1e293b !important;
}

.tw-modern-input:focus {
  background: #fff !important;
  border-color: var(--tw-border-ink) !important;
  box-shadow: var(--tw-shadow-focus) !important;
}

.tw-modern-select {
  height: 50px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

.tw-modern-file {
  padding: 10px !important;
  background: #f8fafc !important;
  border: 2px dashed #e2e8f0 !important;
  border-radius: 12px !important;
  cursor: pointer;
}

.tw-modern-file:hover {
  border-color: var(--tw-border-ink);
  background: var(--tw-surface) !important;
}

.tw-ann-errors {
  background: #fef2f2;
  border-bottom: 1px solid #fca5a5;
  padding: 0.65rem 2rem;
  flex-shrink: 0;
}

.tw-ann-error-item {
  color: var(--tw-danger);
  font-size: 0.83rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tw-ann-left {
  flex: 0 0 68%;
  max-width: 68%;
  padding: 2rem 2.5rem;
  border-right: 1.5px solid var(--tw-border);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tw-ann-right {
  flex: 1 1 32%;
  max-width: 32%;
  padding: 1.75rem 1.5rem;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tw-ann-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tw-ann-field-group--desc {
  flex: 1 1 auto;
  min-height: 300px;
}

.tw-ann-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tw-text);
}

.tw-ann-input {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--tw-border);
  border-radius: var(--tw-radius);
  background: var(--tw-input-bg);
  color: var(--tw-text);
  font-size: 0.93rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.tw-ann-input:focus {
  border-color: var(--tw-border-focus);
  background: var(--tw-input-bg-focus);
  box-shadow: var(--tw-shadow-focus);
}

.tw-ann-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2rem;
}

.tw-ann-errs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tw-ann-errs li {
  font-size: 0.77rem;
  color: var(--tw-danger);
}

.tw-ann-errs li::before {
  content: "⚠ ";
}

#twAnnForm .note-editor.note-frame {
  min-height: 260px;
  border-radius: var(--tw-radius) !important;
  border-color: var(--tw-border) !important;
}

#twAnnForm .note-editable {
  min-height: 220px;
  font-size: 0.93rem;
  line-height: 1.6;
}

.tw-dropzone {
  border: 2px dashed var(--tw-border);
  border-radius: var(--tw-radius-lg);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  background: var(--tw-input-bg);
  transition: border-color .2s, background .2s, box-shadow .2s;
  text-align: center;
  min-height: 128px;
}

.tw-dropzone:hover,
.tw-dropzone--active {
  border-color: var(--tw-brand);
  background: var(--tw-brand-light);
  box-shadow: inset 0 0 0 1px var(--tw-brand-glow);
}

.tw-dropzone__text {
  font-size: 0.88rem;
  color: var(--tw-text-muted);
  margin: 0;
  line-height: 1.5;
}

.tw-dropzone__link {
  color: var(--tw-brand);
  font-weight: 600;
  text-decoration: underline;
}

.tw-dropzone__hint {
  font-size: 0.76rem;
  color: #94a3b8;
  margin: 0;
}

.tw-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.tw-file-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  background: var(--tw-input-bg);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  font-size: 0.83rem;
  transition: border-color .15s, box-shadow .15s;
}

.tw-file-item:hover {
  border-color: #cbd5e1;
  box-shadow: var(--tw-shadow-sm);
}

.tw-file-item__icon {
  color: var(--tw-brand);
  flex-shrink: 0;
}

.tw-file-item__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tw-text);
}

.tw-file-item__size {
  font-size: 0.75rem;
  color: var(--tw-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.tw-file-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 1.1rem;
  transition: color .15s;
}

.tw-file-item__remove:hover {
  color: var(--tw-danger);
}

.tw-meta-card {
  background: #fff;
  border: 1.5px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: var(--tw-shadow-sm);
}

.tw-meta-card__header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tw-text);
}

.tw-meta-card__header ion-icon {
  color: var(--tw-brand);
  font-size: 1rem;
}

.tw-meta-card__note {
  font-size: 0.75rem;
  color: var(--tw-text-muted);
  margin: -0.5rem 0 0;
  font-style: italic;
}

.tw-meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tw-meta-label {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--tw-text-muted);
}

.tw-meta-widget {
  width: 100%;
}

.tw-toggle-pair {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tw-toggle-pair__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border-radius: var(--tw-radius);
  border: 1px solid var(--tw-border);
  transition: background .15s;
}

.tw-toggle-pair__item:hover {
  background: #f1f5f9;
}

.tw-toggle-pair__text {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
}

.tw-toggle-pair__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tw-text);
}

.tw-ann-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: var(--tw-header-bg);
  border-top: 1.5px solid var(--tw-border);
  flex-shrink: 0;
  gap: 1rem;
  min-height: 66px;
}

.tw-ann-footer__hint {
  font-size: 0.78rem;
  color: var(--tw-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tw-ann-footer__btns {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tw-ann-cancel-btn {
  background: transparent !important;
  border: 1.5px solid var(--tw-border) !important;
  color: var(--tw-text-muted) !important;
  padding: 0.55rem 1.5rem !important;
  border-radius: var(--tw-radius) !important;
  font-weight: 500 !important;
  transition: background .15s, color .15s, border-color .15s !important;
}

.tw-ann-cancel-btn:hover {
  background: #f1f5f9 !important;
  color: var(--tw-text) !important;
  border-color: #cbd5e1 !important;
}

.tw-ann-submit-btn {
  padding: 0.55rem 1.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-weight: 600 !important;
  border-radius: var(--tw-radius) !important;
  box-shadow: 0 2px 8px var(--tw-brand-glow) !important;
  transition: box-shadow .2s, transform .1s !important;
}

.tw-ann-submit-btn:hover:not(:disabled) {
  box-shadow: 0 4px 16px var(--tw-brand-glow) !important;
  transform: translateY(-1px) !important;
}

.tw-ann-submit-btn:active:not(:disabled) {
  transform: translateY(0) !important;
}

.tw-ann-submit-btn__loading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tw-spin {
  animation: twSpinAnim 0.8s linear infinite;
}

@media (max-width: 768px) {
  .tw-ann-body {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .tw-ann-left,
  .tw-ann-right {
    flex: none;
    max-width: 100%;
    border-right: none;
    border-bottom: 1.5px solid var(--tw-border);
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 768px) {
  .tw-ann-header,
  .tw-ann-footer {
    padding: 0.875rem 1.25rem;
  }
}

@media (max-width: 768px) {
  .tw-ann-footer__hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .tw-ann-footer__btns {
    width: 100%;
    justify-content: flex-end;
  }
}

form label,
label.oh-label,
label.oh-input__label {
  text-align: left !important;
  display: block !important;
}

.oh-inner-sidebar .oh-inner-sidebar__link {
  display: block;
  padding: 0.45rem 0.85rem;
  border-radius: var(--tw-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tw-text-muted);
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;
  text-decoration: none;
}

.oh-inner-sidebar .oh-inner-sidebar__link:hover {
  background: var(--tw-brand-light);
  color: var(--tw-brand-dark);
}

.oh-inner-sidebar .oh-inner-sidebar__link--active,
.oh-inner-sidebar .oh-inner-sidebar__link.oh-inner-sidebar__link--active {
  background: var(--tw-brand-light) !important;
  color: var(--tw-brand-dark) !important;
  border: 2px solid var(--tw-brand) !important;
  border-radius: var(--tw-radius) !important;
  font-weight: 600 !important;
}

.oh-inner-sidebar .oh-input-group {
  flex-direction: column !important;
  margin-bottom: 0 !important;
  gap: 0 !important;
}

.oh-accordion-header {
  padding: 0.5rem 0.25rem !important;
  cursor: pointer;
}

.oh-accordion-body {
  padding-left: 0.5rem !important;
}

.oh-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
}

.oh-btn--secondary {
  background: var(--tw-action) !important;
}

.oh-btn--secondary:hover {
  background: var(--tw-action-hover) !important;
}

.oh-modal__dialog-footer .oh-btn,
.tw-ann-footer .oh-btn {
  min-width: 90px !important;
}

.oh-switch.p-3 {
  padding: 0 !important;
  display: flex;
  align-items: center;
}

.oh-label__info + .oh-switch,
.oh-label__info + .oh-switch.p-3 {
  margin-top: 0.5rem;
}

.row > form > .oh-label__info {
  margin-bottom: 0.5rem;
}

.row > form > .oh-switch {
  margin-top: 0;
}

.oh-main__topbar,
.oh-wrapper.oh-main__topbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.85rem 0 !important;
}

.oh-main__titlebar--left {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.oh-main__titlebar--right {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

.oh-main__titlebar--right > form,
.oh-main__titlebar--right > .d-flex {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.4rem !important;
  width: 100% !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

.oh-input__search-group {
  flex: 1 1 auto !important;
  max-width: 300px !important;
  min-width: 120px !important;
  margin-bottom: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
}

.oh-main__titlebar-button-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

.oh-main__titlebar-button-container > * {
  margin-left: 0 !important;
}

.oh-main__titlebar-title {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--tw-text) !important;
  margin: 0 !important;
}

.oh-navbar {
  min-height: 64px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.oh-sidebar__header {
  min-height: 64px !important;
  padding: 0 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  margin-bottom: 0.5rem !important;
}

/* Wrapper and #sidebar sizing live in tw-shell.css (body .oh-wrapper-main,
   .oh-wrapper-main #sidebar); the legacy flex block here only fought it. */

#sidebar:empty,
#sidebar:has(> .oh-sidebar[style*="display: none"]) {
  display: none !important;
}

#main {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-left: none !important;
  margin-left: 0 !important;
}

.oh-sidebar,
.oh-sidebar__submenu {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.oh-navbar .oh-wrapper.oh-navbar__wrapper,
.oh-navbar__wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 1.5rem 0 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 64px !important;
}

.oh-navbar__toggle-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.oh-navbar__systray {
  gap: 0.35rem !important;
  display: flex;
  align-items: center;
}

.tw-breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.tw-breadcrumb__item {
  display: flex;
  align-items: center;
}

.tw-breadcrumb__link {
  font-size: 0.82rem;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}

.tw-breadcrumb__link:hover {
  color: var(--tw-link-hover);
}

.tw-breadcrumb__link--active {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
  pointer-events: none;
}

.tw-breadcrumb__sep {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin: 0 0.4rem;
  user-select: none;
}

.row .col-12 > .oh-input-group,
.row .col-sm-12 > .oh-input-group,
.row .col-md-6 > .oh-input-group,
.row .col-md-12 > .oh-input-group {
  flex-direction: column !important;
  align-items: stretch !important;
}

.note-toolbar .note-btn {
  border-radius: 5px !important;
}

.oh-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.oh-badge--round {
  border-radius: 999px !important;
}

.oh-badge--small {
  font-size: 0.75rem !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 0.3rem !important;
}

.oh-btn--floating,
.oh-btn--circle {
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
}

.oh-btn--floating ion-icon,
.oh-btn--circle ion-icon {
  margin: 0 !important;
  font-size: 1.5rem !important;
}

:root {
  --tw-toolbar-btn-h: 36px;
}

.oh-main__titlebar--right .oh-btn,
.oh-main__titlebar--right button.oh-btn {
  height: var(--tw-toolbar-btn-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

.oh-view-types {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--tw-toolbar-btn-h) !important;
  border: 1.5px solid var(--tw-border) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  padding: 0 !important;
  background-color: #ffffff !important;
}

.oh-view-type {
  background-color: transparent !important;
  border-right: 1.5px solid var(--tw-border) !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.oh-view-type:last-child {
  border-right: none !important;
}

.oh-btn--view {
  width: 36px !important;
  height: 100% !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.oh-btn--view ion-icon {
  font-size: 1.1rem !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.oh-btn--view-active {
  background-color: var(--tw-brand-light, #f6fbc2) !important;
  color: var(--tw-brand) !important;
}

.oh-main__titlebar--right {
  align-items: center !important;
  gap: 0.5rem !important;
}

.oh-main__titlebar-button-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.oh-main__titlebar-button-container .ml-2,
.oh-main__titlebar--right .ml-2,
.oh-view-types.ml-2 {
  margin-left: 0 !important;
}

.oh-virtualhr-btn {
  position: relative;
}

.oh-virtualhr-btn::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  animation: tw-vhr-pulse 2s infinite;
}

.tw-vhr-role-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.25rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tw-vhr-role-pill ion-icon {
  font-size: 0.9rem;
}

.tw-vhr-role-pill:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.leave-ai-panel {
  border: 1px solid var(--tw-border, #e2e8f0);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.leave-ai-panel__header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 6px;
}

.leave-ai-panel__summary {
  border-radius: 0 6px 6px 0;
}

.leave-ai-panel__factors > div {
  padding: 2px 0;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.tw-main-container {
  width: 100%;
  padding: 1.5rem;
  min-height: calc(100vh - 64px);
  background: #f8fafc;
}

.tw-tile-wrapper {
  padding: 0 12px 24px 12px;
}

.tw-tile {
  background: #fff;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  overflow: hidden;
  box-shadow: var(--tw-shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tw-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
}

.tw-tile__head {
  padding: 0.85rem 1.25rem;
  background: #f1f5f9;
  border-bottom: 1px solid var(--tw-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tw-tile__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tw-text);
  letter-spacing: -0.01em;
  opacity: 0.85;
}

.tw-tile__close {
  background: transparent;
  border: none;
  color: var(--tw-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: color 0.2s, transform 0.2s;
}

.tw-tile__close:hover {
  color: var(--tw-danger);
  transform: scale(1.1);
}

.tw-tile__body {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  min-height: 280px;
  max-height: 450px;
}

.tw-tile__body .oh-sticky-table {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
  border: none !important;
}

.oh-empty {
  flex-direction: column !important;
}

.oh-empty::before {
  position: absolute !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: none !important;
  pointer-events: none !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -60%) !important;
}

.oh-404__image {
  width: 148px !important;
  height: auto !important;
  margin-bottom: 1.25rem !important;
  animation: none !important;
  filter: drop-shadow(0 12px 18px rgba(99,102,241,.18)) !important;
  position: relative !important;
  z-index: 1 !important;
}

.oh-empty__title {
  margin-bottom: 0.4rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.oh-empty__subtitle {
  position: relative !important;
  z-index: 1 !important;
}

.oh-faq-card__title,
.oh-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  word-break: break-word;
}

.oh-faq-card {
  display: flex;
  flex-direction: column;
}

.oh-faq-card > div:first-child {
  flex-grow: 1;
}

.oh-faq-card > a.oh-btn {
  margin-top: auto;
}

.oh-faq-card > a.oh-btn:not(:last-child) {
  margin-bottom: 0.5rem;
}

.oh-faq-card > a.oh-btn + a.oh-btn {
  margin-top: 0.5rem;
}

.oh-faq-card > .d-flex.justify-content-between > div:last-child,
.oh-card > .d-flex.justify-content-between > div:last-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.oh-faq-card > .d-flex.justify-content-between > div:last-child > a,
.oh-faq-card > .d-flex.justify-content-between > div:last-child > button,
.oh-card > .d-flex.justify-content-between > div:last-child > a,
.oh-card > .d-flex.justify-content-between > div:last-child > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 6px;
  background-color: transparent;
  color: var(--dark-grey, #4d4a4a);
  border: 1px solid var(--border-light-color, #f0f0f0);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  padding: 0;
  text-decoration: none;
}

.oh-faq-card > .d-flex.justify-content-between > div:last-child > a:hover,
.oh-card > .d-flex.justify-content-between > div:last-child > a:hover {
  background-color: var(--border-light-color, #f0f0f0);
  border-color: #dcdcdc;
  transform: translateY(-1px);
}

.oh-faq-card > .d-flex.justify-content-between > div:last-child > a ion-icon.text-danger,
.oh-card > .d-flex.justify-content-between > div:last-child > a ion-icon.text-danger {
  color: var(--danger-color, #dc3545) !important;
}

.oh-faq-card > .d-flex.justify-content-between > div:last-child > a:hover ion-icon.text-danger,
.oh-card > .d-flex.justify-content-between > div:last-child > a:hover ion-icon.text-danger {
  color: var(--danger-color-dark, #bd2130) !important;
}

.oh-faq-card .oh-btn-group,
.oh-card .oh-btn-group {
  border-radius: 6px;
  overflow: hidden;
}

.oh-faq-card .oh-btn-group > .oh-btn {
  border-radius: 0;
}

.oh-modal__dialog-header {
  padding-right: 1.75rem !important;
}

.oh-modal__dialog-title {
  flex: 1;
  word-break: break-word;
  padding-right: 0 !important;
}

.oh-modal__close {
  position: static !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
}

.oh-checkpoint-badge--secondary {
  color: var(--tw-action) !important;
  border-color: var(--tw-action) !important;
}

.oh-sidebar__menu-link--active {
  background: var(--tw-yellow-soft) !important;
  color: var(--tw-fg) !important;
  box-shadow: none !important;
  border-left: 3px solid var(--tw-ink) !important;
}

[class*="status-active"],
[class*="badge-active"],
[class*="tag--approved"],
[class*="status--approved"] {
  background: var(--tw-success-bg) !important;
  color: var(--tw-success-fg) !important;
  border: none !important;
}

.oh-btn--primary-outline {
  border-color: var(--tw-action) !important;
}

.oh-input:focus,
.oh-input:focus-visible {
  box-shadow: var(--tw-shadow-focus) !important;
}

.oh-navbar__notification-beacon {
  background: var(--tw-danger-solid) !important;
}

#attendance-activity-container .oh-btn--success-outline,
#attendance-activity-container .oh-btn--warning-outline {
  border: none !important;
  background: transparent !important;
  padding: 0.4rem 0.6rem !important;
  min-height: unset !important;
}

#attendance-activity-container .oh-btn--success-outline {
  color: var(--tw-success-fg) !important;
}

#attendance-activity-container .oh-btn--warning-outline {
  color: var(--tw-warning-fg) !important;
}

#attendance-activity-container .oh-btn--success-outline:hover,
#attendance-activity-container .oh-btn--warning-outline:hover {
  background: rgba(0,0,0,0.04) !important;
  border-radius: 8px !important;
}

.oh-navbar__notifications,
.oh-navbar__action-icons,
.oh-navbar__clock,
.oh-navbar .oh-navbar__notifications,
.oh-navbar .oh-navbar__action-icons,
.oh-navbar__systray > div,
.oh-navbar__systray > a {
  border-left: none !important;
  border-right: none !important;
}

.oh-navbar__notification-tray-link:not(.oh-navbar__notification-tray-link--danger) {
  color: var(--tw-fg) !important;
}

.oh-navbar__notification-tray-link:not(.oh-navbar__notification-tray-link--danger):hover {
  color: var(--tw-link) !important;
}

.oh-navbar__notification-image {
  background-color: var(--tw-action) !important;
  transition: background-color 0.2s, transform 0.2s !important;
}

.oh-navbar__notification-image:hover {
  background-color: var(--tw-action-hover) !important;
  transform: none !important;
}

.oh-navbar__notification-dot--unread {
  background-color: var(--tw-action) !important;
}

.swal2-container .swal2-checkbox {
  display: none !important;
}

/* ═══ END MIGRATED LEGACY RULES ═══ */


/* Status icons, drawn as masks so they take the status colour (currentColor). */
:root {
  --twc-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20a10 10 0 0 0 0-20zM11 7h2v7h-2zM11 16h2v2h-2z'/%3E%3C/svg%3E");
  --twc-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20a10 10 0 0 0 0-20zM10.6 15.8l-4-4l1.4-1.4l2.6 2.6l5.4-5.4l1.4 1.4z'/%3E%3C/svg%3E");
  --twc-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20a10 10 0 0 0 0-20zM11 10h2v7h-2zM11 6h2v2h-2z'/%3E%3C/svg%3E");
  --twc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='rgb(26,25,24)' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4l4-4'/%3E%3C/svg%3E");
  --twc-transition: background-color var(--tw-duration-fast) var(--tw-ease-out),
    border-color var(--tw-duration-fast) var(--tw-ease-out),
    color var(--tw-duration-fast) var(--tw-ease-out),
    box-shadow var(--tw-duration-fast) var(--tw-ease-out);
}

@keyframes tw-spin {
  to { transform: rotate(360deg); }
}
@keyframes tw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes tw-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes tw-exit {
  to { opacity: 0; visibility: hidden; }
}


/* ═════════════════════════════════════════════════════════════════════════
   PART 1  SHARED CLASS API
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1.1 Buttons ──────────────────────────────────────────────────────── */
/* Default (no modifier) is the secondary look. */
.tw-btn {
  --twc-btn-bg: var(--tw-bg-raised);
  --twc-btn-fg: var(--tw-fg);
  --twc-btn-border: var(--tw-border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tw-space-2);
  min-height: var(--tw-control-h);
  padding: 0 var(--tw-space-4);
  margin: 0;
  border: 1px solid var(--twc-btn-border);
  border-radius: var(--tw-radius-md);
  background-color: var(--twc-btn-bg);
  color: var(--twc-btn-fg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md);
  font-weight: var(--tw-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--twc-transition);
}
.tw-btn:hover {
  --twc-btn-bg: var(--tw-surface);
  --twc-btn-border: var(--tw-border-ink);
  color: var(--twc-btn-fg);
  text-decoration: none;
}
.tw-btn:active {
  --twc-btn-bg: var(--tw-surface-2);
}
.tw-btn svg,
.tw-btn ion-icon,
.tw-btn img {
  flex: none;
  width: 1.125em;
  height: 1.125em;
}

.tw-btn--secondary {
  --twc-btn-bg: var(--tw-bg-raised);
  --twc-btn-fg: var(--tw-fg);
  --twc-btn-border: var(--tw-border-strong);
}

.tw-btn--primary {
  --twc-btn-bg: var(--tw-action);
  --twc-btn-fg: var(--tw-action-fg);
  --twc-btn-border: var(--tw-action);
}
.tw-btn--primary:hover {
  --twc-btn-bg: var(--tw-action-hover);
  --twc-btn-border: var(--tw-action-hover);
}
.tw-btn--primary:active {
  --twc-btn-bg: var(--tw-action-active);
  --twc-btn-border: var(--tw-action-active);
}

/* Brand gradient on primary actions (indigo to violet). Disabled buttons
   drop it: their muted label would sit on the gradient and be unreadable. */
.tw-btn--primary:not(:disabled):not([aria-disabled="true"]):not(.disabled),
.oh-btn--primary:not(:disabled):not([aria-disabled="true"]):not(.disabled),
.oh-btn--secondary:not(:disabled):not([aria-disabled="true"]):not(.disabled) {
  background-image: var(--tw-gradient-brand) !important;
  border-color: transparent !important;
}
.tw-btn--primary:not(:disabled):not([aria-disabled="true"]):not(.disabled):hover,
.oh-btn--primary:not(:disabled):not([aria-disabled="true"]):not(.disabled):hover,
.oh-btn--secondary:not(:disabled):not([aria-disabled="true"]):not(.disabled):hover {
  background-image: var(--tw-gradient-brand-hover) !important;
}

.tw-btn--ghost {
  --twc-btn-bg: transparent;
  --twc-btn-fg: var(--tw-fg);
  --twc-btn-border: transparent;
}
.tw-btn--ghost:hover {
  --twc-btn-bg: var(--tw-surface);
  --twc-btn-border: transparent;
}
.tw-btn--ghost:active {
  --twc-btn-bg: var(--tw-surface-2);
}

.tw-btn--danger {
  --twc-btn-bg: var(--tw-danger-solid);
  --twc-btn-fg: var(--tw-white);
  --twc-btn-border: var(--tw-danger-solid);
}
.tw-btn--danger:hover,
.tw-btn--danger:active {
  --twc-btn-bg: var(--tw-danger-fg);
  --twc-btn-border: var(--tw-danger-fg);
}

/* Small: 36px to the eye, 44px to the finger. */
.tw-btn--sm {
  min-height: var(--tw-control-h-sm);
  padding: 0 var(--tw-space-3);
  font-size: var(--tw-text-sm);
  border-radius: var(--tw-radius-sm);
}
.tw-btn--sm::after {
  content: "";
  position: absolute;
  inset: calc((var(--tw-control-h-sm) - var(--tw-target)) / 2);
}

.tw-btn--block {
  display: flex;
  width: 100%;
}

/* Icon-only: needs aria-label in markup. */
.tw-btn--icon {
  width: var(--tw-control-h);
  padding: 0;
}
.tw-btn--icon.tw-btn--sm {
  width: var(--tw-control-h-sm);
}

/* Disabled */
.tw-btn:disabled,
.tw-btn[aria-disabled="true"] {
  --twc-btn-bg: var(--tw-surface);
  --twc-btn-fg: var(--tw-fg-muted);
  --twc-btn-border: var(--tw-border);
  cursor: not-allowed;
}
a.tw-btn[aria-disabled="true"] {
  pointer-events: none;
}

/* Loading: keeps its width, hides the label, shows a spinner. */
.tw-btn[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
  cursor: progress;
}
.tw-btn[aria-busy="true"] > * {
  opacity: 0;
}
.tw-btn[aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 1.125em;
  height: 1.125em;
  margin: auto;
  border: 2px solid var(--twc-btn-fg);
  border-right-color: transparent;
  border-radius: var(--tw-radius-full);
  animation: tw-spin 700ms linear infinite;
}


/* ── 1.2 Form fields ──────────────────────────────────────────────────── */
.tw-field {
  display: flex;
  flex-direction: column;
  gap: var(--tw-space-2);
  margin: 0 0 var(--tw-space-4);
  min-width: 0;
}

.tw-label {
  display: block;
  margin: 0;
  color: var(--tw-fg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-sm);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-leading-snug);
}

.tw-input,
.tw-select,
.tw-textarea {
  display: block;
  width: 100%;
  min-height: var(--tw-control-h);
  margin: 0;
  padding: 0 var(--tw-space-3);
  border: 1px solid var(--tw-border-strong);
  border-radius: var(--tw-radius-sm);
  background-color: var(--tw-white);
  color: var(--tw-fg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md);
  line-height: var(--tw-leading-body);
  transition: var(--twc-transition);
}
.tw-textarea {
  min-height: 6.5rem;
  padding: var(--tw-space-3);
  resize: vertical;
}
.tw-select {
  padding-right: var(--tw-space-7);
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--twc-chevron);
  background-repeat: no-repeat;
  background-position: right var(--tw-space-3) center;
  background-size: 16px 16px;
}
.tw-select[multiple] {
  padding: var(--tw-space-2);
  background-image: none;
}
.tw-input::placeholder,
.tw-textarea::placeholder {
  color: var(--tw-fg-muted);
  opacity: 1;
}
.tw-input:hover,
.tw-select:hover,
.tw-textarea:hover {
  border-color: var(--tw-ink-muted);
}
.tw-input:focus,
.tw-select:focus,
.tw-textarea:focus {
  border-color: var(--tw-border-ink);
}
.tw-input:disabled,
.tw-select:disabled,
.tw-textarea:disabled {
  border-color: var(--tw-border);
  background-color: var(--tw-surface);
  color: var(--tw-fg-muted);
  cursor: not-allowed;
}
.tw-input[readonly],
.tw-textarea[readonly] {
  background-color: var(--tw-bg-well);
}

/* Error state: border plus a message (.tw-field-error), never colour alone. */
.tw-input[aria-invalid="true"],
.tw-select[aria-invalid="true"],
.tw-textarea[aria-invalid="true"],
.tw-field--error .tw-input,
.tw-field--error .tw-select,
.tw-field--error .tw-textarea {
  border-color: var(--tw-danger-fg);
  box-shadow: inset 0 0 0 1px var(--tw-danger-fg);
}

.tw-help {
  margin: 0;
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading-snug);
}

.tw-field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--tw-space-2);
  margin: 0;
  color: var(--tw-danger-fg);
  font-size: var(--tw-text-sm);
  font-weight: var(--tw-weight-medium);
  line-height: var(--tw-leading-snug);
}
.tw-field-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: var(--twc-icon-alert) center / contain no-repeat;
  mask: var(--twc-icon-alert) center / contain no-repeat;
}
.tw-field-error:empty {
  display: none;
}

/* Checkbox / radio row: the whole row is the 44px target. */
.tw-check {
  display: flex;
  align-items: flex-start;
  gap: var(--tw-space-3);
  min-height: var(--tw-target);
  padding: var(--tw-space-2) 0;
  color: var(--tw-fg);
  font-size: var(--tw-text-md);
  line-height: var(--tw-leading-body);
  cursor: pointer;
}
.tw-check input[type="checkbox"],
.tw-check input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--tw-action);
  cursor: pointer;
}
.tw-check:has(input:disabled) {
  color: var(--tw-fg-muted);
  cursor: not-allowed;
}


/* ── 1.3 Cards ────────────────────────────────────────────────────────── */
.tw-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--tw-bg-raised);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  color: var(--tw-fg);
}
.tw-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tw-space-3);
  padding: var(--tw-space-4);
  border-bottom: 1px solid var(--tw-border);
}
.tw-card__title {
  margin: 0;
  color: var(--tw-fg);
  font-family: var(--tw-font-display);
  font-size: var(--tw-text-lg);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-leading-snug);
  letter-spacing: var(--tw-tracking-title);
}
.tw-card__body {
  flex: 1 1 auto;
  padding: var(--tw-space-4);
}
.tw-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--tw-space-2);
  padding: var(--tw-space-3) var(--tw-space-4);
  border-top: 1px solid var(--tw-border);
}
@media (min-width: 640px) {
  .tw-card__header { padding: var(--tw-space-4) var(--tw-space-5); }
  .tw-card__body { padding: var(--tw-space-5); }
  .tw-card__footer { padding: var(--tw-space-3) var(--tw-space-5); }
}


/* ── 1.4 Badges ───────────────────────────────────────────────────────── */
/* Always carries text. The dot is decoration on top of the word. */
.tw-badge {
  --twc-badge-bg: var(--tw-neutral-bg);
  --twc-badge-fg: var(--tw-neutral-fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px var(--tw-space-2);
  border-radius: var(--tw-radius-full);
  background-color: var(--twc-badge-bg);
  color: var(--twc-badge-fg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-xs);
  font-weight: var(--tw-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.tw-badge::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--tw-radius-full);
  background-color: currentColor;
}

.tw-badge--success,
.tw-badge--approved,
.tw-badge--paid,
.tw-badge--present,
.tw-badge--active,
.tw-badge--confirmed {
  --twc-badge-bg: var(--tw-success-bg);
  --twc-badge-fg: var(--tw-success-fg);
}

.tw-badge--warning,
.tw-badge--requested,
.tw-badge--pending,
.tw-badge--draft,
.tw-badge--review_ongoing,
.tw-badge--on_hold,
.tw-badge--half_day,
.tw-badge--late {
  --twc-badge-bg: var(--tw-warning-bg);
  --twc-badge-fg: var(--tw-warning-fg);
}

.tw-badge--danger,
.tw-badge--rejected,
.tw-badge--cancelled,
.tw-badge--absent,
.tw-badge--declined,
.tw-badge--overdue {
  --twc-badge-bg: var(--tw-danger-bg);
  --twc-badge-fg: var(--tw-danger-fg);
}

.tw-badge--info,
.tw-badge--processing,
.tw-badge--on_leave {
  --twc-badge-bg: var(--tw-info-bg);
  --twc-badge-fg: var(--tw-info-fg);
}

.tw-badge--neutral,
.tw-badge--closed,
.tw-badge--archived,
.tw-badge--inactive {
  --twc-badge-bg: var(--tw-neutral-bg);
  --twc-badge-fg: var(--tw-neutral-fg);
}


/* ── 1.5 Tables ───────────────────────────────────────────────────────── */
/* Wrap wide tables in .tw-table-wrap so only the table scrolls at 390px. */
.tw-table-wrap {
  /* position: relative contains absolutely positioned visually hidden labels
     inside the scroller, so they never widen the page at 390px. */
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  background-color: var(--tw-bg-raised);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
}
.tw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading-snug);
}
.tw-table caption {
  padding: var(--tw-space-3) var(--tw-space-4);
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
  text-align: left;
  caption-side: top;
}
.tw-table th,
.tw-table td {
  padding: var(--tw-space-3) var(--tw-space-4);
  border-bottom: 1px solid var(--tw-border);
  text-align: left;
  vertical-align: middle;
}
.tw-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-xs);
  font-weight: var(--tw-weight-semibold);
  white-space: nowrap;
  border-bottom-color: var(--tw-border-strong);
}
.tw-table tbody td,
.tw-table tbody th {
  height: var(--tw-row-h);
}
.tw-table tbody tr:last-child > * {
  border-bottom: 0;
}
.tw-table tbody tr {
  transition: background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-table tbody tr:hover {
  background-color: var(--tw-surface);
}
.tw-table tbody tr[aria-selected="true"] {
  background-color: var(--tw-yellow-soft);
}
.tw-table .tw-num,
.tw-table th.tw-num {
  text-align: right;
  white-space: nowrap;
}


/* ── 1.6 Alerts (inline) ──────────────────────────────────────────────── */
/* role="alert" or role="status" is set in markup. */
.tw-alert {
  --twc-accent: var(--tw-info-fg);
  display: flex;
  align-items: flex-start;
  gap: var(--tw-space-3);
  padding: var(--tw-space-3) var(--tw-space-4);
  border: 1px solid var(--twc-accent);
  border-radius: var(--tw-radius-md);
  background-color: var(--tw-info-bg);
  color: var(--tw-fg);
  font-size: var(--tw-text-md);
  line-height: var(--tw-leading-body);
}
.tw-alert::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: var(--twc-accent);
  -webkit-mask: var(--twc-icon-info) center / contain no-repeat;
  mask: var(--twc-icon-info) center / contain no-repeat;
}
.tw-alert > :first-child { margin-top: 0; }
.tw-alert > :last-child { margin-bottom: 0; }
.tw-alert--success {
  --twc-accent: var(--tw-success-fg);
  background-color: var(--tw-success-bg);
}
.tw-alert--success::before {
  -webkit-mask-image: var(--twc-icon-check);
  mask-image: var(--twc-icon-check);
}
.tw-alert--warning {
  --twc-accent: var(--tw-warning-fg);
  background-color: var(--tw-warning-bg);
}
.tw-alert--danger {
  --twc-accent: var(--tw-danger-fg);
  background-color: var(--tw-danger-bg);
}
.tw-alert--warning::before,
.tw-alert--danger::before {
  -webkit-mask-image: var(--twc-icon-alert);
  mask-image: var(--twc-icon-alert);
}


/* ── 1.7 Modals (native <dialog class="tw-modal">) ───────────────────── */
.tw-modal {
  width: min(560px, calc(100% - 2 * var(--tw-space-4)));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--tw-space-4));
  margin: auto;
  padding: 0;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-xl);
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg);
  box-shadow: var(--tw-shadow-modal);
  overflow: hidden;
}
.tw-modal[open] {
  display: flex;
  flex-direction: column;
  animation: tw-enter var(--tw-duration) var(--tw-ease-out);
}
.tw-modal--lg {
  width: min(880px, calc(100% - 2 * var(--tw-space-4)));
}
.tw-modal::backdrop {
  background-color: var(--tw-scrim, rgba(26, 25, 24, 0.48));
}
.tw-modal__header,
.tw-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-3);
  padding: var(--tw-space-3) var(--tw-space-3) var(--tw-space-3) var(--tw-space-5);
  border-bottom: 1px solid var(--tw-border);
}
.tw-modal__title {
  margin: 0;
  color: var(--tw-fg);
  font-family: var(--tw-font-display);
  font-size: var(--tw-text-xl);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-leading-snug);
  letter-spacing: var(--tw-tracking-title);
}
.tw-modal__body {
  flex: 1 1 auto;
  padding: var(--tw-space-5);
  overflow-y: auto;
}
.tw-modal__footer,
.tw-modal > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--tw-space-2);
  padding: var(--tw-space-3) var(--tw-space-5);
  border-top: 1px solid var(--tw-border);
}
.tw-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tw-target);
  height: var(--tw-target);
  padding: 0;
  border: 0;
  border-radius: var(--tw-radius-md);
  background: transparent;
  color: var(--tw-fg-muted);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--twc-transition);
}
.tw-modal__close:hover {
  background-color: var(--tw-surface);
  color: var(--tw-fg);
}


/* ── 1.8 Toasts ───────────────────────────────────────────────────────── */
/* Bottom of the screen on phones, top right from 768px. */
.tw-toast-region {
  position: fixed;
  left: var(--tw-space-4);
  right: var(--tw-space-4);
  bottom: var(--tw-space-4);
  z-index: var(--tw-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--tw-space-2);
  pointer-events: none;
}
@media (min-width: 768px) {
  .tw-toast-region {
    left: auto;
    bottom: auto;
    top: calc(var(--tw-topbar-h) + var(--tw-space-2));
    right: var(--tw-space-5);
    width: min(28rem, calc(100% - 2 * var(--tw-space-5)));
  }
}

.tw-toast,
.oh-alert {
  --twc-accent: var(--tw-info-fg);
  --twc-toast-bg: var(--tw-bg-raised);
}
.tw-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tw-space-3);
  min-height: 56px;
  padding: var(--tw-space-2) var(--tw-space-2) var(--tw-space-2) var(--tw-space-4);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-md);
  background-color: var(--twc-toast-bg);
  color: var(--tw-fg);
  box-shadow: var(--tw-shadow-lg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md);
  line-height: var(--tw-leading-snug);
  pointer-events: auto;
  animation: tw-enter var(--tw-duration-slow) var(--tw-ease-out) both;
}
.tw-toast::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--twc-accent);
  -webkit-mask: var(--twc-icon-info) center / contain no-repeat;
  mask: var(--twc-icon-info) center / contain no-repeat;
}
.tw-toast__message {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--tw-space-2);
  overflow-wrap: anywhere;
}
.tw-toast--success {
  --twc-accent: var(--tw-success-fg);
  --twc-toast-bg: var(--tw-success-bg);
}
.tw-toast--success::before {
  -webkit-mask-image: var(--twc-icon-check);
  mask-image: var(--twc-icon-check);
}
.tw-toast--info {
  --twc-accent: var(--tw-info-fg);
  --twc-toast-bg: var(--tw-info-bg);
}
.tw-toast--warning {
  --twc-accent: var(--tw-warning-fg);
  --twc-toast-bg: var(--tw-warning-bg);
}
.tw-toast--danger {
  --twc-accent: var(--tw-danger-fg);
  --twc-toast-bg: var(--tw-danger-bg);
}
.tw-toast--warning::before,
.tw-toast--danger::before {
  -webkit-mask-image: var(--twc-icon-alert);
  mask-image: var(--twc-icon-alert);
}
.tw-toast.is-leaving {
  animation: tw-exit var(--tw-duration) var(--tw-ease-in-out) forwards;
}

/* Dismiss button shared by toasts and legacy alerts. */
.tw-toast__close,
.oh-alert__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  width: var(--tw-target);
  height: var(--tw-target);
  margin: calc(-1 * var(--tw-space-1)) 0;
  padding: 0;
  border: 0;
  border-radius: var(--tw-radius-sm);
  background: transparent;
  color: var(--tw-fg-muted);
  font-family: var(--tw-font-body);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--twc-transition);
}
.oh-alert__dismiss {
  margin-left: auto;
}
.tw-toast__close:hover,
.oh-alert__dismiss:hover {
  background-color: rgba(26, 25, 24, 0.08);
  color: var(--tw-fg);
}


/* ── 1.9 Empty, error and loading states ─────────────────────────────── */
/* Empty state: a short muted line, left aligned, plus at most one action. */
.tw-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tw-space-2);
  padding: var(--tw-space-5) var(--tw-space-4);
  color: var(--tw-fg-muted);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-sm);
  text-align: left;
}
.tw-empty__title {
  margin: 0;
  color: var(--tw-fg-muted);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-sm);
  font-weight: var(--tw-weight-medium);
  line-height: var(--tw-leading-body);
}
.tw-empty__text {
  max-width: var(--tw-measure);
  margin: 0;
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading-body);
}
.tw-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--tw-space-2);
  margin-top: var(--tw-space-1);
}

.tw-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tw-space-3);
  padding: var(--tw-space-7) var(--tw-space-4);
  color: var(--tw-fg-muted);
  text-align: center;
}
.tw-error-state__title {
  margin: 0;
  color: var(--tw-fg);
  font-family: var(--tw-font-display);
  font-size: var(--tw-text-xl);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-leading-snug);
  letter-spacing: var(--tw-tracking-title);
}
.tw-error-state__text {
  max-width: var(--tw-measure);
  margin: 0;
  font-size: var(--tw-text-md);
  line-height: var(--tw-leading-body);
}
.tw-error-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tw-space-2);
  margin-top: var(--tw-space-2);
}

.tw-error-state {
  margin: var(--tw-space-3) 0;
  padding: var(--tw-space-6) var(--tw-space-4);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  background-color: var(--tw-bg-raised);
}
.tw-error-state--compact {
  gap: var(--tw-space-2);
  margin: 0;
  padding: var(--tw-space-3);
  border: 0;
  background-color: transparent;
}
.tw-error-state--compact .tw-error-state__title {
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md);
}
.tw-error-state--compact .tw-error-state__text {
  display: none;
}
.tw-error-state::before {
  content: "";
  width: 28px;
  height: 28px;
  background-color: var(--tw-danger-fg);
  -webkit-mask: var(--twc-icon-alert) center / contain no-repeat;
  mask: var(--twc-icon-alert) center / contain no-repeat;
}

.tw-skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--tw-radius-sm);
  background-color: var(--tw-surface);
  color: transparent;
  animation: tw-pulse 1.4s var(--tw-ease-in-out) infinite;
}
.tw-skeleton + .tw-skeleton {
  margin-top: var(--tw-space-2);
}

.tw-spinner {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid var(--tw-border-strong);
  border-top-color: var(--tw-ink);
  border-radius: var(--tw-radius-full);
  vertical-align: middle;
  animation: tw-spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tw-skeleton { animation: none; }
  .tw-spinner,
  .tw-btn[aria-busy="true"]::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}


/* ── 1.10 Links ───────────────────────────────────────────────────────── */
.tw-link {
  color: var(--tw-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-link:hover {
  color: var(--tw-link-hover);
  text-decoration-thickness: 2px;
}


/* ═════════════════════════════════════════════════════════════════════════
   PART 2  LEGACY COMPONENTS MAPPED TO TOKENS
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 2.1 Buttons (.oh-btn) ────────────────────────────────────────────── */
.oh-btn {
  min-height: var(--tw-control-h) !important;
  border-radius: var(--tw-radius-md) !important;
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-sm) !important;
  font-weight: var(--tw-weight-semibold) !important;
  letter-spacing: 0 !important;
  text-decoration: none;
  transition: var(--twc-transition) !important;
}

/* Small and square buttons: 36px to the eye, 44px hit area. */
.oh-btn--sq-sm,
.oh-btn--sq,
.oh-btn--x-small {
  min-height: var(--tw-control-h-sm) !important;
}
.oh-btn--sq-sm,
.oh-btn--sq {
  width: var(--tw-control-h-sm);
  height: var(--tw-control-h-sm);
  padding: 0 !important;
}
/* :where() keeps this at zero specificity so any existing position wins. */
:where(.oh-btn--sq-sm, .oh-btn--sq, .oh-btn--x-small, .oh-btn[aria-busy="true"]) {
  position: relative;
}
.oh-btn--sq-sm:not(.oh-btn--chat)::after,
.oh-btn--sq:not(.oh-btn--chat)::after,
.oh-btn--x-small:not(.oh-btn--chat)::after {
  content: "";
  position: absolute;
  inset: calc((var(--tw-control-h-sm) - var(--tw-target)) / 2);
}

/* Primary and secondary are both the main action in this app: brand gradient
   (background-image, so the shorthand never resets it). */
.oh-btn--primary,
.oh-btn--secondary,
.oh-btn--primary:focus,
.oh-btn--secondary:focus {
  background-color: var(--tw-action) !important;
  background-image: var(--tw-gradient-brand) !important;
  border: 1px solid transparent !important;
  color: var(--tw-action-fg) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.oh-btn--primary:hover,
.oh-btn--secondary:hover {
  background-color: var(--tw-action-hover) !important;
  background-image: var(--tw-gradient-brand-hover) !important;
  border-color: transparent !important;
  color: var(--tw-action-fg) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.oh-btn--primary:active,
.oh-btn--secondary:active {
  background-color: var(--tw-action-active) !important;
  background-image: var(--tw-gradient-brand-hover) !important;
  border-color: transparent !important;
}

.oh-btn--success,
.oh-btn--success:focus {
  background: var(--tw-success-solid) !important;
  border: 1px solid var(--tw-success-solid) !important;
  color: var(--tw-white) !important;
}
.oh-btn--success:hover,
.oh-btn--success:active {
  background: var(--tw-success-fg) !important;
  border-color: var(--tw-success-fg) !important;
  color: var(--tw-white) !important;
}

.oh-btn--danger,
.oh-btn--danger:focus {
  background: var(--tw-danger-solid) !important;
  border: 1px solid var(--tw-danger-solid) !important;
  color: var(--tw-white) !important;
}
.oh-btn--danger:hover,
.oh-btn--danger:active {
  background: var(--tw-danger-fg) !important;
  border-color: var(--tw-danger-fg) !important;
  color: var(--tw-white) !important;
}

/* Warning: ink text on the pale warning fill, never white on amber. */
.oh-btn--warning,
.oh-btn--warning:focus {
  background: var(--tw-warning-bg) !important;
  border: 1px solid var(--tw-warning-fg) !important;
  color: var(--tw-fg) !important;
}
.oh-btn--warning:hover,
.oh-btn--warning:active {
  background: var(--tw-warning-bg) !important;
  border-color: var(--tw-warning-fg) !important;
  box-shadow: inset 0 0 0 1px var(--tw-warning-fg) !important;
  color: var(--tw-fg) !important;
}

.oh-btn--info,
.oh-btn--info:focus {
  background: var(--tw-info-solid) !important;
  border: 1px solid var(--tw-info-solid) !important;
  color: var(--tw-white) !important;
}
.oh-btn--info:hover,
.oh-btn--info:active {
  background: var(--tw-link-hover) !important;
  border-color: var(--tw-link-hover) !important;
  color: var(--tw-white) !important;
}

.oh-btn--light,
.oh-btn--light-dark-text,
.oh-btn--light:focus,
.oh-btn--light-dark-text:focus {
  background-color: var(--tw-surface) !important;
  border: 1px solid transparent !important;
  color: var(--tw-fg) !important;
}
.oh-btn--light:hover,
.oh-btn--light-dark-text:hover {
  background-color: var(--tw-surface-2) !important;
  color: var(--tw-fg) !important;
}

/* Outline buttons: white with a 3:1 border. */
.oh-btn--secondary-outline,
.oh-btn--secondary-ouline,
.oh-btn--primary-outline,
.oh-btn--secondary-outline:focus,
.oh-btn--secondary-ouline:focus,
.oh-btn--primary-outline:focus {
  background: var(--tw-bg-raised) !important;
  border: 1px solid var(--tw-border-strong) !important;
  color: var(--tw-fg) !important;
}
.oh-btn--secondary-outline:hover,
.oh-btn--secondary-ouline:hover,
.oh-btn--primary-outline:hover {
  background: var(--tw-surface) !important;
  border-color: var(--tw-border-ink) !important;
  color: var(--tw-fg) !important;
}

.oh-btn--success-outline,
.oh-btn--success-outline:focus {
  background: transparent !important;
  border: 1px solid var(--tw-success-fg) !important;
  color: var(--tw-success-fg) !important;
}
.oh-btn--success-outline:hover {
  background: var(--tw-success-bg) !important;
  color: var(--tw-success-fg) !important;
}
.oh-btn--warning-outline,
.oh-btn--warning-outline:focus {
  background: transparent !important;
  border: 1px solid var(--tw-warning-fg) !important;
  color: var(--tw-warning-fg) !important;
}
.oh-btn--warning-outline:hover {
  background: var(--tw-warning-bg) !important;
  color: var(--tw-warning-fg) !important;
}
.oh-btn--danger-outline,
.oh-btn--danger-outline:focus {
  border: 1px solid var(--tw-danger-fg) !important;
  color: var(--tw-danger-fg) !important;
}
.oh-btn--danger-outline:hover {
  background: var(--tw-danger-bg) !important;
  color: var(--tw-danger-fg) !important;
}
.oh-btn--info-outline,
.oh-btn--info-outline:focus {
  background: transparent !important;
  border: 1px solid var(--tw-info-fg) !important;
  color: var(--tw-info-fg) !important;
}
.oh-btn--info-outline:hover {
  background: var(--tw-info-bg) !important;
  color: var(--tw-info-fg) !important;
}

/* Text-style buttons */
.oh-btn--danger-link,
.oh-btn--danger-text,
.oh-btn--light-danger {
  color: var(--tw-danger-fg) !important;
}
.oh-btn--danger-link:hover,
.oh-btn--danger-text:hover,
.oh-btn--light-danger:hover {
  background-color: var(--tw-danger-bg) !important;
  color: var(--tw-danger-fg) !important;
}
.oh-btn--secondary-link,
.oh-btn--secondary-link:focus {
  color: var(--tw-link) !important;
}
.oh-btn--secondary-link:hover {
  color: var(--tw-link-hover) !important;
  text-decoration: underline !important;
}

/* Disabled */
.oh-btn:disabled,
.oh-btn[aria-disabled="true"],
.oh-btn--disabled,
.oh-btn--disabled:hover {
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-border) !important;
  color: var(--tw-fg-muted) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Loading on legacy buttons (same contract as .tw-btn). */
.oh-btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
}
.oh-btn[aria-busy="true"] > * {
  opacity: 0;
}
.oh-btn[aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 1.125em;
  height: 1.125em;
  margin: auto;
  border: 2px solid var(--tw-border-strong);
  border-top-color: var(--tw-ink);
  border-radius: var(--tw-radius-full);
  animation: tw-spin 700ms linear infinite;
}


/* ── 2.2 Inputs, selects, select2 ─────────────────────────────────────── */
.oh-input:not([type="checkbox"]):not([type="radio"]),
.form-control,
.oh-select,
select.oh-select--lg {
  min-height: var(--tw-control-h);
}
.oh-input,
.form-control,
.oh-select,
select.oh-select--lg {
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-sm) !important;
  background-color: var(--tw-white) !important;
  color: var(--tw-fg) !important;
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md) !important;
  transition: var(--twc-transition) !important;
}
.oh-input--filter,
.oh-input--small {
  font-size: var(--tw-text-md) !important;
}
.oh-input:hover,
.form-control:hover,
.oh-select:hover {
  border-color: var(--tw-ink-muted) !important;
}
.oh-input:focus,
.oh-input:focus-visible,
.form-control:focus,
.oh-select:focus,
select.oh-select--lg:focus {
  border-color: var(--tw-border-ink) !important;
  background-color: var(--tw-white) !important;
}
.oh-input::placeholder,
.form-control::placeholder {
  color: var(--tw-fg-muted) !important;
  font-size: inherit !important;
  opacity: 1;
}
.oh-input:disabled,
.oh-input--disabled,
.form-control:disabled,
.oh-select:disabled {
  border-color: var(--tw-border) !important;
  background-color: var(--tw-surface) !important;
  color: var(--tw-fg-muted) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
.form-control[readonly] {
  background-color: var(--tw-bg-well) !important;
  color: var(--tw-fg) !important;
  opacity: 1 !important;
}
.oh-input[aria-invalid="true"],
.oh-input.is-invalid,
.form-control[aria-invalid="true"],
.form-control.is-invalid,
.oh-select[aria-invalid="true"] {
  border-color: var(--tw-danger-fg) !important;
  box-shadow: inset 0 0 0 1px var(--tw-danger-fg) !important;
}
ul.errorlist,
.errorlist li {
  color: var(--tw-danger-fg);
}

/* select2 */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  min-height: var(--tw-control-h) !important;
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-sm) !important;
  background-color: var(--tw-white) !important;
}
.select2-container .select2-selection--single {
  height: auto !important;
}
.select2-container--focus .select2-selection--single,
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
  border-color: var(--tw-border-ink) !important;
  background-color: var(--tw-white) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 2.25rem 0 var(--tw-space-3) !important;
  color: var(--tw-fg) !important;
  font-size: var(--tw-text-md) !important;
  line-height: calc(var(--tw-control-h) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--tw-fg-muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  right: var(--tw-space-2) !important;
  height: calc(var(--tw-control-h) - 2px) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-sm) !important;
  color: var(--tw-fg) !important;
  font-size: var(--tw-text-sm) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--tw-fg-muted) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--tw-danger-fg) !important;
}
.select2-container .select2-search--inline .select2-search__field,
.select2-search--dropdown .select2-search__field {
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md) !important;
}
.select2-search--dropdown .select2-search__field {
  min-height: var(--tw-control-h-sm);
  border: 1px solid var(--tw-border-strong) !important;
}
.select2-dropdown {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-md) !important;
  box-shadow: var(--tw-shadow-lg) !important;
}
.select2-results__option {
  min-height: var(--tw-target);
  display: flex;
  align-items: center;
  font-size: var(--tw-text-md) !important;
  color: var(--tw-fg);
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--tw-surface);
  color: var(--tw-fg);
}
/* Selection highlight is the one place the brand yellow is a fill. */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted {
  background-color: var(--tw-yellow-soft) !important;
  color: var(--tw-fg) !important;
}


/* ── 2.3 Switches and checkboxes ──────────────────────────────────────── */
.oh-switch__checkbox,
.oh-switch input[type="checkbox"],
input[type="checkbox"].oh-toggle {
  background: var(--tw-border-strong) !important;
  box-shadow: none !important;
}
.oh-switch__checkbox:checked,
.oh-switch input[type="checkbox"]:checked,
input[type="checkbox"].oh-toggle:checked {
  background: var(--tw-action) !important;
  box-shadow: none !important;
}
.oh-switch__checkbox::after,
.oh-switch input[type="checkbox"]::after,
input[type="checkbox"].oh-toggle::after {
  background: var(--tw-white) !important;
  box-shadow: var(--tw-shadow-sm) !important;
}
/* Invisible 44px-tall hit area around the 23px track. */
.oh-switch__checkbox::before,
.oh-switch input[type="checkbox"]::before,
input[type="checkbox"].oh-toggle::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -11px -2px !important;
  width: auto !important;
  height: auto !important;
}
.oh-switch__checkbox:disabled,
.oh-switch input[type="checkbox"]:disabled,
input[type="checkbox"].oh-toggle:disabled {
  opacity: 0.6 !important;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--tw-action);
}


/* ── 2.4 Tables (.oh-sticky-table, .oh-table) ─────────────────────────── */
/* Row actions (kebab): the last column, pinned to the right edge of the
   table frame while wide tables scroll inside it. The pinned cell is opaque
   in every row state (rest, hover, selected) with a hairline divider on its
   left, so scrolled columns pass cleanly under it instead of showing through
   ("Sa", "En"). The last data column keeps extra end padding so its text
   never touches the divider. */
.oh-sticky-table__right,
table .oh-sticky-table__right {
  position: sticky !important;
  right: 0 !important;
  z-index: 2;
  min-width: var(--tw-target);
  background-color: var(--tw-bg-raised) !important;
  box-shadow: inset 1px 0 0 var(--tw-border) !important;
  background-clip: padding-box;
}
/* Header cells are sticky to the top at z-index 10-11; the pinned corner
   cell sits above them. */
.oh-sticky-table__thead .oh-sticky-table__right,
thead .oh-sticky-table__right {
  z-index: 12 !important;
}
.oh-sticky-table__tbody .oh-sticky-table__tr:hover > .oh-sticky-table__right,
.oh-sticky-table tbody tr:hover > .oh-sticky-table__right {
  background-color: var(--tw-surface) !important;
}
.oh-sticky-table__tr.highlight-selected > .oh-sticky-table__right,
.oh-sticky-table tr.highlight-selected > .oh-sticky-table__right {
  background-color: var(--tw-accent-bg) !important;
}
.oh-sticky-table--no-highlight .oh-sticky-table__tr:hover > .oh-sticky-table__right {
  background-color: var(--tw-bg-raised) !important;
}
.oh-sticky-table :is(td, th, .oh-sticky-table__td, .oh-sticky-table__th):has(+ .oh-sticky-table__right) {
  padding-inline-end: var(--tw-space-5) !important;
}
.oh-sticky-table {
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  background-color: var(--tw-bg-raised);
}
.oh-sticky-table__th {
  padding: var(--tw-space-3) var(--tw-space-4) !important;
  border-bottom: 1px solid var(--tw-border-strong);
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-xs);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-leading-snug);
}
/* 48px rows: the height is a minimum and the content is centred, so the
   block padding stays small and a 36-40px avatar or icon button never
   stretches a row past 48px. */
.oh-sticky-table__td,
.oh-sticky-table__sd {
  height: var(--tw-row-h);
  padding: var(--tw-space-1) var(--tw-space-4);
  border-bottom: 1px solid var(--tw-border);
  color: var(--tw-fg);
  font-size: var(--tw-text-sm);
  vertical-align: middle;
}
.oh-sticky-table__sd {
  background-color: var(--tw-bg-raised);
}
.oh-sticky-table__thead div.oh-sticky-table__th:first-child,
.oh-sticky-table__tfoot div.oh-sticky-table__th:first-child {
  border-right-color: var(--tw-border);
}
.oh-sticky-table__tr {
  transition: background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.oh-sticky-table__tr:hover,
.oh-sticky-table__tr:hover .oh-sticky-table__sd {
  background-color: var(--tw-surface);
}
.oh-sticky-table--no-highlight .oh-sticky-table__tr:hover,
.oh-sticky-table--no-highlight .oh-sticky-table__tr:hover .oh-sticky-table__sd {
  background-color: transparent;
}
.oh-sticky-table--no-highlight .oh-sticky-table__tr:hover .oh-sticky-table__sd {
  background-color: var(--tw-bg-raised);
}
.oh-sticky-table__th--right,
.oh-sticky-table__td.tw-num,
.oh-sticky-table__th.tw-num {
  text-align: right;
}

.oh-table {
  border: 1px solid var(--tw-border);
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg);
  font-size: var(--tw-text-sm);
}
.oh-table thead tr th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--tw-space-3) var(--tw-space-4);
  border-bottom: 1px solid var(--tw-border-strong);
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-xs);
  font-weight: var(--tw-weight-semibold);
}
.oh-table tbody tr td {
  height: var(--tw-row-h);
  padding: var(--tw-space-3) var(--tw-space-4);
  border-bottom: 1px solid var(--tw-border);
  vertical-align: middle;
}
.oh-table tbody tr:hover {
  background-color: var(--tw-surface);
}
.oh-table .tw-num {
  text-align: right;
}


/* ── 2.5 Badges and status dots ───────────────────────────────────────── */
.oh-badge {
  border-radius: var(--tw-radius-full);
  font-family: var(--tw-font-body);
  font-weight: var(--tw-weight-semibold) !important;
}
.oh-badge--secondary,
.oh-badge_count {
  background: var(--tw-action) !important;
  color: var(--tw-action-fg) !important;
  border: none !important;
}
.oh-badge--danger {
  background: var(--tw-danger-bg) !important;
  color: var(--tw-danger-fg) !important;
}
.oh-badge--info {
  background: var(--tw-info-bg) !important;
  color: var(--tw-info-fg) !important;
}
.oh-badge--success {
  background: var(--tw-success-bg) !important;
  color: var(--tw-success-fg) !important;
}
.oh-badge--warning {
  background: var(--tw-warning-bg) !important;
  color: var(--tw-warning-fg) !important;
}

/* Dots sit next to a text label; they only change colour here. */
.oh-dot { flex: none; }
.oh-dot--success { background-color: var(--tw-success-solid); }
.oh-dot--warning { background-color: var(--tw-warning-solid); }
.oh-dot--danger { background-color: var(--tw-danger-solid); }
.oh-dot--info { background-color: var(--tw-info-solid); }


/* ── 2.6 Cards ────────────────────────────────────────────────────────── */
.oh-card {
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg) !important;
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg);
}
.oh-card--no-shadow,
.oh-card--border {
  border-color: var(--tw-border) !important;
}
.oh-card__title--lg,
.oh-card__title--sm,
.oh-card-dashboard__title {
  color: var(--tw-fg);
  font-family: var(--tw-font-display);
  letter-spacing: var(--tw-tracking-title);
}


/* ── 2.7 Tabs ─────────────────────────────────────────────────────────── */

/* Active tab: weight and an ink underline, not colour alone. */


/* ── 2.8 Alerts and Django messages (.oh-alert) ──────────────────────── */
/* Phones: bottom of the screen. From 768px: top right under the topbar. */
.oh-alert-container {
  top: auto;
  bottom: var(--tw-space-4);
  left: var(--tw-space-4);
  right: var(--tw-space-4);
  width: auto;
  max-width: none;
  z-index: var(--tw-z-toast);
}
@media (min-width: 768px) {
  .oh-alert-container {
    top: calc(var(--tw-topbar-h) + var(--tw-space-2));
    bottom: auto;
    left: auto;
    right: var(--tw-space-5);
    width: min(28rem, calc(100% - 2 * var(--tw-space-5)));
  }
}

.oh-alert {
  position: relative;
  gap: var(--tw-space-3);
  min-height: 56px;
  padding: var(--tw-space-2) var(--tw-space-2) var(--tw-space-2) var(--tw-space-4);
  margin-bottom: var(--tw-space-2);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-md);
  background-color: var(--twc-toast-bg);
  color: var(--tw-fg);
  box-shadow: var(--tw-shadow-lg);
  font-family: var(--tw-font-body);
  font-size: var(--tw-text-md);
  line-height: var(--tw-leading-snug);
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.oh-alert::before {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 0;
  background-image: none;
  background-color: var(--twc-accent);
  -webkit-mask: var(--twc-icon-info) center / contain no-repeat;
  mask: var(--twc-icon-info) center / contain no-repeat;
}
.oh-alert--success,
.oh-alert.success {
  --twc-accent: var(--tw-success-fg);
  --twc-toast-bg: var(--tw-success-bg);
  border: 1px solid var(--tw-border);
}
.oh-alert--info,
.oh-alert.info {
  --twc-accent: var(--tw-info-fg);
  --twc-toast-bg: var(--tw-info-bg);
  border: 1px solid var(--tw-border);
}
.oh-alert--warning,
.oh-alert.warning {
  --twc-accent: var(--tw-warning-fg);
  --twc-toast-bg: var(--tw-warning-bg);
  border: 1px solid var(--tw-border);
}
.oh-alert--danger,
.oh-alert.error {
  --twc-accent: var(--tw-danger-fg);
  --twc-toast-bg: var(--tw-danger-bg);
  border: 1px solid var(--tw-border);
}
.oh-alert--success::before,
.oh-alert.success::before {
  background-image: none;
  -webkit-mask-image: var(--twc-icon-check);
  mask-image: var(--twc-icon-check);
}
.oh-alert--info::before,
.oh-alert.info::before {
  background-image: none;
}
.oh-alert--warning::before,
.oh-alert--danger::before,
.oh-alert.warning::before,
.oh-alert.error::before {
  background-image: none;
  -webkit-mask-image: var(--twc-icon-alert);
  mask-image: var(--twc-icon-alert);
}
.oh-alert__text {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--tw-space-2);
}

/* Timing (WCAG 2.2.1): success and info stay fully visible for 7s, then fade.
   Errors and warnings stay until dismissed. Hover or focus pauses the timer.
   Reduced motion: the enter/exit become instant, the 7s delay still applies. */
.oh-alert--animated {
  animation:
    tw-enter var(--tw-duration-slow) var(--tw-ease-out) both,
    tw-exit var(--tw-duration-slow) var(--tw-ease-in-out) 7s forwards;
}
.oh-alert--animated.oh-alert--danger,
.oh-alert--animated.oh-alert--warning,
.oh-alert--animated.error,
.oh-alert--animated.warning {
  animation: tw-enter var(--tw-duration-slow) var(--tw-ease-out) both;
}
.oh-alert--animated:hover,
.oh-alert--animated:focus-within,
.oh-alert-container:hover .oh-alert--animated,
.oh-alert-container:focus-within .oh-alert--animated {
  animation-play-state: paused;
}


/* ── 2.9 Accordion headers ────────────────────────────────────────────── */
.oh-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--tw-space-2);
  min-height: var(--tw-target);
  border-bottom-color: var(--tw-border);
  color: var(--tw-fg) !important;
  font-family: var(--tw-font-body);
  font-weight: var(--tw-weight-semibold) !important;
  transition: background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.oh-accordion-header:hover {
  opacity: 1;
  background-color: var(--tw-surface);
}
button.oh-accordion-header {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--tw-border);
  border-radius: 0;
  background-color: transparent;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}


/* ── 2.10 Dropdown menus ──────────────────────────────────────────────── */
.oh-dropdown__menu,
.oh-dropdown__import {
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-md);
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg);
  box-shadow: var(--tw-shadow-lg);
}
.oh-dropdown__menu hr {
  border-color: var(--tw-border);
}
.oh-dropdown__items {
  margin: 0;
  padding-block: var(--tw-space-2);
}
.oh-dropdown__items > .oh-dropdown__item {
  margin: 0;
}
.oh-dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--tw-space-2);
  width: auto;
  min-height: var(--tw-target);
  margin-inline: calc(-1 * var(--tw-space-2));
  padding: 0 var(--tw-space-2);
  border-radius: var(--tw-radius-sm);
  color: var(--tw-fg) !important;
  font-size: var(--tw-text-sm);
  text-decoration: none;
  transition: background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.oh-dropdown__link:hover {
  background-color: var(--tw-surface);
  color: var(--tw-fg) !important;
}
.oh-dropdown__link--danger,
.oh-dropdown__link--danger:hover {
  color: var(--tw-danger-fg) !important;
}
.oh-dropdown__link--danger:hover {
  background-color: var(--tw-danger-bg);
}


/* ── 2.11 Pagination ──────────────────────────────────────────────────── */
.oh-pagination {
  flex-wrap: wrap;
  gap: var(--tw-space-3);
  color: var(--tw-fg);
}
.oh-pagination__page {
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
}
.oh-pagination__items {
  margin: 0;
}
.oh-pagination__item {
  min-width: var(--tw-target);
  height: var(--tw-target);
  width: auto;
  border-color: var(--tw-border);
  background-color: var(--tw-bg-raised);
  font-size: var(--tw-text-sm);
  transition: background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.oh-pagination__item:last-child {
  border-right-color: var(--tw-border);
}
.oh-pagination__item:first-child {
  border-radius: var(--tw-radius-sm) 0 0 var(--tw-radius-sm);
}
.oh-pagination__item:last-child {
  border-radius: 0 var(--tw-radius-sm) var(--tw-radius-sm) 0;
}
.oh-pagination__item:hover {
  background-color: var(--tw-surface);
}
.oh-pagination__link {
  color: var(--tw-fg);
  text-decoration: none;
}
/* Current page: weight and underline as well as the fill. */
.oh-pagination__link--active {
  color: var(--tw-fg);
  font-weight: var(--tw-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.oh-pagination__item--active,
.oh-pagination__item:has(.oh-pagination__link--active) {
  background-color: var(--tw-yellow-soft);
}
.oh-pagination__item--active .oh-pagination__link,
.page-item.active .page-link {
  background: var(--tw-action) !important;
  border-color: var(--tw-action) !important;
  color: var(--tw-action-fg) !important;
}
.oh-pagination__input {
  min-height: var(--tw-control-h-sm);
  border: 1px solid var(--tw-border-strong);
  border-radius: var(--tw-radius-sm);
  font-size: var(--tw-text-md);
}


/* ── 2.12 Modals (.oh-modal) ──────────────────────────────────────────── */
.oh-modal {
  background-color: var(--tw-scrim);
}
.oh-modal__dialog {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-xl) !important;
  background-color: var(--tw-bg-raised);
  color: var(--tw-fg);
  box-shadow: var(--tw-shadow-modal) !important;
}
.oh-modal--full-content .oh-modal__dialog {
  border-radius: 0 !important;
}
.oh-modal__dialog-header {
  align-items: center !important;
  gap: var(--tw-space-3);
  padding: var(--tw-space-3) var(--tw-space-3) var(--tw-space-3) var(--tw-space-4) !important;
  border-bottom: 1px solid var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
}
.oh-modal__dialog-title {
  color: var(--tw-fg) !important;
  font-family: var(--tw-font-display);
  font-size: var(--tw-text-xl) !important;
  font-weight: var(--tw-weight-semibold) !important;
  line-height: var(--tw-leading-snug);
  letter-spacing: var(--tw-tracking-title);
}
.oh-modal__dialog-body {
  padding: var(--tw-space-4) !important;
}
.oh-modal__dialog-footer {
  flex-wrap: wrap;
  gap: var(--tw-space-2) !important;
  padding: var(--tw-space-3) var(--tw-space-4) !important;
  border-top: 1px solid var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
}
.oh-modal__close,
.oh-modal__close--custom,
.oh-modal_close--custom {
  width: var(--tw-target) !important;
  height: var(--tw-target) !important;
  margin-top: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--tw-radius-md) !important;
  background-color: transparent !important;
  color: var(--tw-fg-muted) !important;
  font-size: 1.375rem !important;
  opacity: 1 !important;
  transform: none !important;
  transition: var(--twc-transition) !important;
}
.oh-modal__close:hover,
.oh-modal__close--custom:hover,
.oh-modal_close--custom:hover {
  background-color: var(--tw-surface) !important;
  border-color: transparent !important;
  color: var(--tw-fg) !important;
  transform: none !important;
}
@media (min-width: 640px) {
  .oh-modal__dialog-header { padding-left: var(--tw-space-5) !important; }
  .oh-modal__dialog-body { padding: var(--tw-space-5) !important; }
  .oh-modal__dialog-footer { padding: var(--tw-space-3) var(--tw-space-5) !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   PART 3  2026-10 MODERN LOOK (Keka / greytHR patterns, TendWorks brand)
   Restyles the shared and legacy classes every page already uses. Class
   names and JS hooks are unchanged. Area files (tw-<area>.css) load later
   and scope their own overrides under a page root class.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 3.1 Focus on text fields: indigo outline plus a soft halo ───────── */
/* The global ink ring (tw-tokens.css) stays for buttons and links. Fields
   take the brand: a 2px indigo outline (6.3:1 on white) and a tint halo. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tw-accent) !important;
  outline-offset: 0 !important;
  border-color: var(--tw-accent) !important;
  box-shadow: 0 0 0 4px var(--tw-accent-bg) !important;
}

/* ── 3.2 Page header (title, description, actions) ───────────────────── */
.tw-page-header,
#main-section .oh-main__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-3) var(--tw-space-4);
  padding-top: var(--tw-space-2);
  padding-bottom: var(--tw-space-5);
}
.tw-page-header__title,
#main-section .oh-main__titlebar-title,
#main-section .oh-titlebar__title {
  margin: 0 !important;
  color: var(--tw-fg) !important;
  font-family: var(--tw-font-display);
  font-size: var(--tw-text-2xl) !important;
  font-weight: var(--tw-weight-semibold) !important;
  letter-spacing: var(--tw-tracking-heading);
  line-height: var(--tw-leading-snug);
}
.tw-page-header__desc {
  margin: var(--tw-space-1) 0 0;
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading-body);
}
.tw-page-header__actions,
#main-section .oh-main__titlebar-button-container {
  display: flex;
  flex-wrap: wrap !important;
  flex-shrink: 1 !important;
  align-items: center;
  gap: var(--tw-space-2) !important;
  min-width: 0;
}
#main-section .oh-main__titlebar--right {
  display: flex;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tw-space-2);
  min-width: 0;
  max-width: 100%;
}
#main-section .oh-main__titlebar--right > .d-flex,
#main-section .oh-main__titlebar--right > form {
  flex-wrap: wrap !important;
  align-items: center;
  gap: var(--tw-space-2);
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  #main-section .oh-main__topbar {
    flex-wrap: wrap !important;
  }
  #main-section .oh-main__titlebar--right,
  #main-section .oh-main__titlebar--right > .d-flex,
  #main-section .oh-main__titlebar--right > form,
  #main-section .oh-main__titlebar-button-container {
    justify-content: flex-start;
  }
}
/* Legacy ml-2 gaps are replaced by the flex gap above. */
#main-section .oh-main__titlebar--right .oh-btn.ml-2,
#main-section .oh-main__titlebar--right .oh-dropdown.ml-2,
#main-section .oh-main__titlebar--right .oh-btn-group.ml-2 {
  margin-left: 0 !important;
}

/* Toolbar buttons that are not the primary action: white outline. */
#main-section .oh-main__titlebar .oh-btn:not([class*="oh-btn--"]),
.oh-btn--light-bkg,
.oh-btn--dropdown,
.oh-btn--light,
.oh-btn--light-dark-text {
  background-color: var(--tw-bg-raised) !important;
  background-image: none !important;
  border: 1px solid var(--tw-border) !important;
  color: var(--tw-fg) !important;
  box-shadow: none !important;
  filter: none !important;
}
#main-section .oh-main__titlebar .oh-btn:not([class*="oh-btn--"]):hover,
.oh-btn--light-bkg:hover,
.oh-btn--dropdown:hover,
.oh-btn--light:hover,
.oh-btn--light-dark-text:hover {
  background-color: var(--tw-surface) !important;
  border-color: var(--tw-border-strong) !important;
  color: var(--tw-fg) !important;
}
#main-section .oh-main__titlebar .oh-btn ion-icon {
  color: var(--tw-fg-muted);
}
.oh-btn--secondary ion-icon,
.oh-btn--primary ion-icon {
  color: inherit !important;
}
.oh-main__titlebar .oh-btn--secondary,
.oh-main__titlebar .oh-btn--primary,
.tw-page-header .tw-btn--primary {
  box-shadow: none !important;
}
.oh-btn--shadow {
  filter: none !important;
}

/* View toggles (list / card): a segmented control. */
.oh-view-type,
.tw-view-toggle {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-md);
  background: var(--tw-bg-raised);
}
.oh-btn--view:hover,
.oh-btn--view.oh-btn--view-active,
.oh-btn--view[aria-pressed="true"],
.oh-btn--view[aria-current="true"] {
  background-color: var(--tw-accent-bg) !important;
  color: var(--tw-accent) !important;
}

/* Search box in a page header. */
#main-section .oh-main__titlebar .oh-input__search-group .oh-input,
.tw-search-input {
  border-color: var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-md) !important;
}
#main-section .oh-main__titlebar .oh-input__search-group {
  position: relative;
}
#main-section .oh-main__titlebar .oh-input__search-group .oh-input-group__icon--left {
  position: absolute;
  top: 50%;
  left: var(--tw-space-3);
  z-index: 2;
  width: 18px !important;
  min-width: 18px;
  height: 18px;
  font-size: 18px !important;
  transform: translateY(-50%);
  color: var(--tw-fg-muted);
  pointer-events: none;
}
/* Several view toggles (list / card / chart) read as one segmented control. */
.oh-view-types {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-md);
  background: var(--tw-bg-raised);
}
.oh-view-types .oh-view-type {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
}
.oh-view-types .oh-view-type + .oh-view-type {
  border-left: 1px solid var(--tw-border);
}
.oh-view-types .oh-btn--view {
  min-width: var(--tw-control-h-sm);
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Generic list toolbar (generic/tendworks_nav.html): search and buttons stay
   on one row on desktop; the search gives way first, never the buttons. */
@media (min-width: 1024px) {
  #main-section form#filterForm.oh-main__titlebar--right {
    flex-wrap: nowrap !important;
  }
  #main-section form#filterForm > .oh-input__search-group {
    flex: 1 1 12rem !important;
    width: auto !important;
    min-width: 8rem !important;
    max-width: 16rem !important;
    margin: 0 !important;
  }
  #main-section form#filterForm > .oh-main__titlebar-button-container {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
  }
}
@media (max-width: 767.98px) {
  #main-section .oh-main__titlebar .oh-input__search-group:not(.oh-input__search-group--show) {
    display: none !important;
  }
  #main-section .oh-main__titlebar .oh-input__search-group--show {
    position: static !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
}

/* Applied filter chips under a list toolbar (generic/filter_tags.html,
   templates/filter_tags.html): neutral chips, a plain "Filters:" label and
   text actions. No red close dots, green pills or tinted labels. */
.oh-titlebar-container__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-space-2);
}
.oh-titlebar__tag {
  display: inline-flex !important;
  align-items: center;
  gap: var(--tw-space-1);
  min-height: 28px;
  padding: 2px var(--tw-space-1) 2px var(--tw-space-3) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-sm) !important;
  background: var(--tw-bg-raised) !important;
  color: var(--tw-fg) !important;
  font-size: var(--tw-text-xs) !important;
  font-weight: var(--tw-weight-medium) !important;
}
.oh-titlebar__tag--custom {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--tw-fg-muted) !important;
}
.oh-titlebar__tag--custom[role="button"] {
  min-height: 28px;
  padding: 0 var(--tw-space-2) !important;
  color: var(--tw-link) !important;
  cursor: pointer;
}
.oh-titlebar__tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  border: 0;
  border-radius: var(--tw-radius-sm);
  background: none !important;
  color: var(--tw-fg-muted) !important;
}
.oh-titlebar__tag-close:hover {
  background: var(--tw-bg-well) !important;
  color: var(--tw-fg) !important;
}
.oh-titlebar__save {
  display: inline-flex;
  align-items: center;
  gap: var(--tw-space-1);
  min-height: 28px;
  padding: 0 var(--tw-space-2) !important;
  border: 0 !important;
  border-radius: var(--tw-radius-sm) !important;
  background: none !important;
  color: var(--tw-link) !important;
  font-size: var(--tw-text-xs) !important;
  font-weight: var(--tw-weight-medium);
}
.oh-titlebar__save:hover {
  background: var(--tw-bg-well) !important;
}

/* ── 3.3 Tabs: indigo text and a 2px indigo underline ────────────────── */
.tw-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--tw-space-1);
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--tw-border);
  background: transparent;
}
.tw-tabs__tab {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: var(--tw-target);
  padding: var(--tw-space-2) var(--tw-space-4) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  border-radius: var(--tw-radius-sm) var(--tw-radius-sm) 0 0;
  background: transparent !important;
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
  font-weight: var(--tw-weight-medium);
  white-space: nowrap;
  box-shadow: none !important;
}
.tw-tabs__tab:hover {
  background: var(--tw-surface) !important;
  color: var(--tw-fg);
}
.tw-tabs__tab[aria-selected="true"],
.tw-tabs__tab[aria-current="page"] {
  border-bottom-color: var(--tw-accent) !important;
  background: transparent !important;
  color: var(--tw-accent) !important;
  font-weight: var(--tw-weight-semibold);
}

/* Filter / status chips (legacy .oh-checkpoint-badge). */
.oh-checkpoint-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tw-space-1);
  min-height: 32px;
  padding: 0 var(--tw-space-3) !important;
  border: 1px solid var(--tw-accent-line) !important;
  border-radius: var(--tw-radius-full) !important;
  background: var(--tw-accent-bg);
  color: var(--tw-accent) !important;
  font-size: var(--tw-text-xs) !important;
  font-weight: var(--tw-weight-semibold) !important;
  cursor: pointer;
}
.oh-checkpoint-badge.text-success { border-color: var(--tw-success-bg) !important; background: var(--tw-success-bg); color: var(--tw-success-fg) !important; }
.oh-checkpoint-badge.text-danger { border-color: var(--tw-danger-bg) !important; background: var(--tw-danger-bg); color: var(--tw-danger-fg) !important; }
.oh-checkpoint-badge.text-info { border-color: var(--tw-info-bg) !important; background: var(--tw-info-bg); color: var(--tw-info-fg) !important; }
.oh-checkpoint-badge.text-secondary { border-color: var(--tw-border) !important; background: var(--tw-surface); color: var(--tw-fg-muted) !important; }
.oh-checkpoint-badge.text-warning { border-color: var(--tw-warning-bg) !important; background: var(--tw-warning-bg); color: var(--tw-warning-fg) !important; }

/* ── 3.4 Tables ───────────────────────────────────────────────────────── */
.oh-sticky-table,
.tw-table-wrap {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-lg);
  background-color: var(--tw-bg-raised);
  box-shadow: var(--tw-shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.oh-sticky-table__thead .oh-sticky-table__th,
.tw-table thead th,
.oh-table thead tr th {
  position: sticky;
  top: 0;
  background-color: var(--tw-table-head-bg) !important;
  border-bottom: 1px solid var(--tw-border) !important;
  color: var(--tw-fg-muted) !important;
  font-size: var(--tw-text-xs) !important;
  font-weight: var(--tw-weight-semibold) !important;
  letter-spacing: 0;
  white-space: nowrap;
}
.oh-sticky-table__td,
.oh-sticky-table__sd {
  border-bottom: 1px solid var(--tw-border) !important;
}
.oh-sticky-table__tbody .oh-sticky-table__tr:last-child > .oh-sticky-table__td,
.oh-sticky-table__tbody .oh-sticky-table__tr:last-child > .oh-sticky-table__sd {
  border-bottom: 0 !important;
}
.oh-sticky-table__tbody .oh-sticky-table__tr[hx-get],
.oh-sticky-table__tbody .oh-sticky-table__tr[data-toggle="oh-modal-toggle"] {
  cursor: pointer;
}
.oh-sticky-table__tbody .oh-sticky-table__tr:hover > .oh-sticky-table__td,
.oh-sticky-table__tbody .oh-sticky-table__tr:hover > .oh-sticky-table__sd {
  background-color: var(--tw-surface);
}
.oh-sticky-table__tr.highlight-selected > .oh-sticky-table__td,
.oh-sticky-table__tr.highlight-selected > .oh-sticky-table__sd {
  background-color: var(--tw-accent-bg) !important;
}

/* Row status stripe (legacy row-status--*): a slim stripe in status colours.
   The status is also written in the row, so colour is never the only cue. */
.oh-sticky-table [class*="row-status--"] {
  border-radius: 0 !important;
  border-left-width: 3px !important;
}
.oh-sticky-table .row-status--yellow { border-left-color: var(--tw-success-solid) !important; }
.oh-sticky-table .row-status--purple { border-left-color: var(--tw-border-strong) !important; }
.oh-sticky-table .row-status--red { border-left-color: var(--tw-danger-solid) !important; }
.oh-sticky-table .row-status--black,
.oh-sticky-table .row-status--gray { border-left-color: var(--tw-ink-muted) !important; }
.oh-sticky-table .row-status--blue,
.oh-sticky-table .row-status--cyan { border-left-color: var(--tw-blue) !important; }
.oh-sticky-table .row-status--orange { border-left-color: var(--tw-warning-solid) !important; }

/* Avatar + name + secondary line in the first column. */
.oh-profile__avatar,
.tw-avatar {
  background: var(--tw-avatar-bg);
  border-radius: var(--tw-radius-full);
  overflow: hidden;
}
.oh-profile__name,
.tw-person__name {
  color: var(--tw-fg);
  font-weight: var(--tw-weight-medium);
}
.tw-person {
  display: flex;
  align-items: center;
  gap: var(--tw-space-3);
  min-width: 0;
}
.tw-person__meta {
  display: block;
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-xs);
}

/* Row actions: compact 36px buttons with a 44px hit area, kebab menu. */
.oh-sticky-table .oh-btn-group {
  display: inline-flex;
  gap: var(--tw-space-1);
  border: 0 !important;
  box-shadow: none !important;
}
.oh-sticky-table .oh-btn-group .oh-btn {
  position: relative;
  min-width: var(--tw-control-h-sm);
  min-height: var(--tw-control-h-sm) !important;
  height: var(--tw-control-h-sm);
  padding: 0 var(--tw-space-2) !important;
  border-radius: var(--tw-radius-sm) !important;
  box-shadow: none !important;
}
.oh-sticky-table .oh-btn-group .oh-btn.oh-btn--light-bkg,
.oh-sticky-table .oh-btn-group .oh-btn--danger-outline {
  border: 1px solid var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
}
.oh-sticky-table .oh-btn-group .oh-btn.oh-btn--light-bkg:hover {
  border-color: var(--tw-accent) !important;
  background: var(--tw-accent-bg) !important;
}
.oh-sticky-table .oh-btn-group .oh-btn--danger-outline:hover {
  border-color: var(--tw-danger-fg) !important;
  background: var(--tw-danger-bg) !important;
}
.oh-sticky-table .oh-btn-group .oh-btn::after {
  content: "";
  position: absolute;
  inset: calc((var(--tw-control-h-sm) - var(--tw-target)) / 2) -2px;
}
.oh-sticky-dropdown_btn,
.tw-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tw-target) !important;
  height: var(--tw-target);
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--tw-radius-md);
  background: transparent !important;
  color: var(--tw-fg-muted) !important;
  cursor: pointer;
}
.oh-sticky-dropdown_btn:hover,
.tw-kebab:hover {
  background: var(--tw-surface) !important;
  color: var(--tw-fg) !important;
}
.oh-sticky-dropdown--header {
  top: 1px !important;
  margin-right: var(--tw-space-1) !important;
  border-top: 0 !important;
}
/* Tab containers: one white card. A container without a tab list only
   wraps a list table, which is already a card, so it draws no second box. */


/* ── 3.5 Status pills ─────────────────────────────────────────────────── */
.oh-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px var(--tw-space-2) !important;
  border-radius: var(--tw-radius-full) !important;
  font-size: var(--tw-text-xs) !important;
  line-height: 1.2;
}

/* ── 3.6 Cards and KPI cards ──────────────────────────────────────────── */
.oh-card,
.tw-card {
  box-shadow: var(--tw-shadow-sm);
}
.oh-card__title,
.oh-card__title--sm,
.oh-card__title--lg {
  color: var(--tw-fg) !important;
  font-weight: var(--tw-weight-semibold) !important;
}
.tw-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--tw-space-1);
  padding: var(--tw-space-4) var(--tw-space-5);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  background: var(--tw-bg-raised);
  box-shadow: var(--tw-shadow-sm);
  color: var(--tw-fg);
  text-decoration: none;
}
.tw-kpi-card__value {
  font-family: var(--tw-font-display);
  font-size: var(--tw-text-3xl);
  font-weight: var(--tw-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--tw-leading-tight);
}
.tw-kpi-card__label {
  color: var(--tw-fg-muted);
  font-size: var(--tw-text-sm);
}
.tw-kpi-card--highlight {
  border-color: var(--tw-accent-line);
  background: var(--tw-gradient-soft);
}
.oh-card-dashboard {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-lg) !important;
  background: var(--tw-bg-raised) !important;
  box-shadow: var(--tw-shadow-sm) !important;
}

/* ── 3.7 Empty states ─────────────────────────────────────────────────── */
/* Legacy empty states (.oh-empty, .oh-404 inside lists and cards) render as
   one plain muted line: no illustration, no serif fallback, no second line
   restating the first. Error pages use .tw-error and are not affected. */
.oh-empty,
.tw-empty-state,
.oh-404:not(.tw-error) {
  position: static !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--tw-space-1);
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--tw-space-4) !important;
  text-align: left !important;
  font-family: var(--tw-font-body) !important;
}
.oh-empty::before,
.oh-empty::after,
.tw-empty-state::before,
.tw-empty-state::after {
  content: none !important;
  display: none !important;
}
.oh-empty img,
.oh-404 img,
.oh-404__image,
.oh-empty-state-img,
.tw-empty-state__image,
.tw-empty img {
  display: none !important;
}
.oh-empty__title,
.oh-empty__subtitle,
.tw-empty-state__title,
.tw-empty-state__subtitle,
.oh-404__subtitle:not(.tw-error__text),
.oh-404:not(.tw-error) .oh-404__title {
  margin: 0 !important;
  color: var(--tw-fg-muted) !important;
  font-family: var(--tw-font-body) !important;
  font-size: var(--tw-text-sm) !important;
  font-weight: var(--tw-weight-regular) !important;
  line-height: var(--tw-leading-body) !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  max-width: none !important;
}
/* A title already says it; the legacy subtitle only repeats it. */
.oh-empty__title ~ .oh-empty__subtitle,
.tw-empty-state__title ~ .tw-empty-state__subtitle {
  display: none !important;
}

/* ── 3.8 Modals and drawers ───────────────────────────────────────────── */
.oh-modal__dialog-title {
  font-size: var(--tw-text-lg) !important;
}
.oh-activity-sidebar {
  border-left: 1px solid var(--tw-border);
  box-shadow: var(--tw-shadow-modal) !important;
}
/* Side drawer component: <aside class="tw-drawer" aria-modal ...>. */
.tw-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--tw-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(32rem, 100vw);
  background: var(--tw-bg-raised);
  border-left: 1px solid var(--tw-border);
  box-shadow: var(--tw-shadow-modal);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--tw-duration-slow) var(--tw-ease-out), visibility 0s linear var(--tw-duration-slow);
}
.tw-drawer[open],
.tw-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--tw-duration-slow) var(--tw-ease-out), visibility 0s linear 0s;
}
.tw-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-3);
  padding: var(--tw-space-3) var(--tw-space-3) var(--tw-space-3) var(--tw-space-5);
  border-bottom: 1px solid var(--tw-border);
}
.tw-drawer__body {
  flex: 1 1 auto;
  padding: var(--tw-space-5);
  overflow-y: auto;
}

/* ── 3.9 Forms ────────────────────────────────────────────────────────── */
.oh-label,
.oh-input__label {
  color: var(--tw-fg) !important;
  font-size: var(--tw-text-sm) !important;
  font-weight: var(--tw-weight-medium) !important;
}
.oh-input,
.form-control,
.oh-select,
.tw-input,
.tw-select,
.tw-textarea,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border-radius: var(--tw-radius-md) !important;
}
.tw-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--tw-space-5);
}
@media (min-width: 768px) {
  .tw-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tw-form-grid > .tw-form-grid__full {
    grid-column: 1 / -1;
  }
}
/* Long forms: actions stay reachable at the bottom of the modal or page. */
.tw-form-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tw-space-2);
  margin-top: var(--tw-space-5);
  padding: var(--tw-space-3) 0;
  border-top: 1px solid var(--tw-border);
  background: var(--tw-bg-raised);
}
.oh-dropdown__filter {
  border-radius: var(--tw-radius-lg) !important;
  box-shadow: var(--tw-shadow-lg) !important;
}

/* ── 3.10 Pagination ──────────────────────────────────────────────────── */
.oh-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--tw-space-3);
  padding: var(--tw-space-2) 0;
}
.oh-pagination__items {
  gap: var(--tw-space-1);
}
.oh-pagination__item,
.oh-pagination__item:first-child,
.oh-pagination__item:last-child {
  min-width: 36px;
  height: 36px;
  padding: 0 var(--tw-space-3);
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-md);
  background: var(--tw-bg-raised);
}
.oh-pagination__item:hover {
  border-color: var(--tw-border-strong) !important;
  background: var(--tw-surface);
}
.oh-pagination__link {
  color: var(--tw-fg) !important;
  font-weight: var(--tw-weight-medium);
}
.oh-pagination__item--active,
.oh-pagination__item:has(.oh-pagination__link--active) {
  border-color: var(--tw-accent) !important;
  background: var(--tw-accent-bg);
}
.oh-pagination__item--active .oh-pagination__link,
.oh-pagination__link--active {
  color: var(--tw-accent) !important;
  background: transparent !important;
}

/* ── 3.11 Dropdown menus ──────────────────────────────────────────────── */
.oh-dropdown__menu {
  border-radius: var(--tw-radius-lg);
}
.oh-dropdown__link:hover {
  background-color: var(--tw-accent-bg);
}


/* ═════════════════════════════════════════════════════════════════════════
   PART 4  UX STANDARD v2 (2026-10)
   Final values for every shared and legacy component. Later rules win, so
   this part only sets what v2 decides; area files scope their own tweaks
   under a page root class and use the tokens, never raw values.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 4.1 Base type ────────────────────────────────────────────────────── */
body {
  font-family: var(--tw-font-body);
  font-size: var(--tw-body-size);
  line-height: var(--tw-body-line);
  font-weight: var(--tw-body-weight);
}
b,
strong {
  font-weight: var(--tw-weight-semibold);
}
.fw-bold,
.font-weight-bold {
  font-weight: var(--tw-weight-semibold) !important;
}
.tw-section + .tw-section {
  margin-top: var(--tw-section-gap);
}
.tw-section__title,
.tw-section-title {
  margin: 0 0 var(--tw-sp-12);
  color: var(--tw-fg);
  font: var(--tw-font-section);
  letter-spacing: 0;
}
.tw-secondary {
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}
.tw-caption {
  color: var(--tw-fg-muted);
  font: var(--tw-font-caption);
}
.tw-divider {
  height: 0;
  margin: var(--tw-sp-16) 0;
  border: 0;
  border-top: 1px solid var(--tw-border);
}
.tw-truncate {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-measure {
  max-width: var(--tw-measure);
}

/* ── 4.2 Buttons ──────────────────────────────────────────────────────── */
.tw-btn,
.oh-btn {
  min-height: var(--tw-btn-h) !important;
  border-radius: var(--tw-radius-control) !important;
  font-family: var(--tw-font-body) !important;
  font-size: var(--tw-button-size) !important;
  font-weight: var(--tw-button-weight) !important;
  line-height: 20px;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color var(--tw-motion), border-color var(--tw-motion), color var(--tw-motion) !important;
}
.tw-btn {
  gap: var(--tw-sp-8);
  padding: 0 var(--tw-btn-pad-x);
}
.oh-btn:not(.oh-btn--sq):not(.oh-btn--sq-sm):not(.oh-btn--view):not(.oh-sticky-dropdown_btn) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: var(--tw-btn-pad-x) !important;
}
.tw-btn--sm {
  min-height: var(--tw-btn-h) !important;
  padding: 0 var(--tw-sp-12);
}
.tw-btn ion-icon,
.tw-btn svg,
.oh-btn ion-icon {
  width: var(--tw-icon-size);
  height: var(--tw-icon-size);
  font-size: var(--tw-icon-size);
}
/* Tertiary: a text button in the link colour. */
.tw-btn--tertiary,
.oh-btn--secondary-link {
  --twc-btn-bg: transparent;
  --twc-btn-fg: var(--tw-link);
  --twc-btn-border: transparent;
  padding-inline: var(--tw-sp-8) !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tw-link) !important;
}
.tw-btn--tertiary:hover,
.oh-btn--secondary-link:hover {
  background: var(--tw-accent-bg) !important;
  color: var(--tw-link-hover) !important;
  text-decoration: none !important;
}
/* Destructive in tables and menus: danger text. Solid danger is for the
   confirm dialog only (.tw-btn--danger). */
.tw-btn--danger-text,
.oh-btn--danger-text,
.oh-btn--danger-link,
.oh-btn--light-danger {
  --twc-btn-bg: transparent;
  --twc-btn-fg: var(--tw-danger-fg);
  --twc-btn-border: transparent;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tw-danger-fg) !important;
}
.tw-btn--danger-text:hover,
.oh-btn--danger-text:hover,
.oh-btn--danger-link:hover,
.oh-btn--light-danger:hover {
  background: var(--tw-danger-bg) !important;
  color: var(--tw-danger-fg) !important;
}
/* Icon-only: 36x36, aria-label + title in markup. */
.tw-btn--icon,
.oh-btn--sq,
.oh-btn--sq-sm {
  width: var(--tw-icon-btn) !important;
  min-width: var(--tw-icon-btn);
  height: var(--tw-icon-btn) !important;
  min-height: var(--tw-icon-btn) !important;
  padding: 0 !important;
}
/* 44px hit area on touch screens, 36px to the eye. */
@media (pointer: coarse) {
  :where(.oh-btn) {
    position: relative;
  }
  .tw-btn::after,
  .oh-btn::after {
    content: "";
    position: absolute;
    inset: calc((var(--tw-btn-h) - var(--tw-hit)) / 2) 0;
  }
}
/* No glows, lifts or filters on any button. */
.tw-btn,
.oh-btn,
.tw-btn:hover,
.oh-btn:hover,
.tw-btn:active,
.oh-btn:active {
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* ── 4.3 Fields ───────────────────────────────────────────────────────── */
.tw-field {
  gap: var(--tw-sp-8);
  margin-bottom: var(--tw-field-gap);
}
.tw-label,
.oh-label,
.oh-input__label,
.oh-input-group > label,
.oh-modal__dialog-body label:not(.oh-switch):not([class*="check"]) {
  color: var(--tw-fg) !important;
  font-family: var(--tw-font-body);
  font-size: var(--tw-label-size) !important;
  font-weight: var(--tw-label-weight) !important;
  line-height: var(--tw-label-line) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tw-input,
.tw-select,
.tw-textarea,
.oh-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.form-control,
.oh-select,
select.oh-select--lg {
  min-height: var(--tw-input-h) !important;
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-control) !important;
  font-size: var(--tw-body-size) !important;
  line-height: var(--tw-body-line);
}
.tw-input,
.tw-select,
input.oh-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select.oh-select,
select.form-control,
input.form-control {
  height: var(--tw-input-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
input.oh-input:not([type="checkbox"]):not([type="radio"]):not(.oh-input__icon),
input.form-control,
select.oh-select,
select.form-control {
  padding-inline-start: var(--tw-sp-12) !important;
}
.oh-input__search-group .oh-input.oh-input__icon,
.oh-input.oh-input__icon {
  padding-inline-start: calc(var(--tw-sp-12) + var(--tw-icon-size) + var(--tw-sp-8)) !important;
}
textarea.oh-input,
textarea.form-control,
.tw-textarea {
  height: auto;
  min-height: 88px !important;
  padding: var(--tw-sp-8) var(--tw-sp-12) !important;
}
/* Phones: 16px text in fields so iOS never zooms the page. */
@media (max-width: 767.98px) {
  .tw-input,
  .tw-select,
  .tw-textarea,
  .oh-input,
  .form-control,
  .oh-select,
  .select2-container .select2-selection__rendered,
  .select2-search__field {
    font-size: 16px !important;
  }
}
.tw-help,
.oh-input__help,
.form-text,
.helptext {
  color: var(--tw-fg-muted) !important;
  font-size: var(--tw-caption-size) !important;
  line-height: var(--tw-caption-line) !important;
}
/* Errors: danger text below the field, no icon. */
.tw-field-error,
ul.errorlist,
.errorlist li,
.invalid-feedback {
  color: var(--tw-danger-fg) !important;
  font-size: var(--tw-caption-size) !important;
  font-weight: var(--tw-weight-regular) !important;
  line-height: var(--tw-caption-line) !important;
}
.tw-field-error::before {
  content: none;
  display: none;
}
ul.errorlist {
  margin: var(--tw-sp-4) 0 0;
  padding: 0;
  list-style: none;
}
/* Fields focus with the same ring as everything else. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--tw-focus-width) solid var(--tw-focus-ring) !important;
  outline-offset: var(--tw-focus-offset) !important;
  border-color: var(--tw-accent) !important;
  box-shadow: none !important;
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  min-height: var(--tw-input-h) !important;
  border-radius: var(--tw-radius-control) !important;
}
.select2-container .select2-selection--single {
  height: var(--tw-input-h) !important;
  padding: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--tw-body-size) !important;
  line-height: calc(var(--tw-input-h) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--tw-input-h) - 2px) !important;
}
.select2-results__option {
  min-height: var(--tw-btn-h);
  font-size: var(--tw-body-size) !important;
}
.select2-dropdown {
  border-radius: var(--tw-radius-control) !important;
  box-shadow: var(--tw-shadow-menu) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: var(--tw-radius-pill) !important;
  font-size: var(--tw-caption-size) !important;
}
.tw-form-grid {
  gap: 0 var(--tw-sp-24);
}
/* Full pages: primary action bottom-left, aligned with the fields. */
.tw-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--tw-sp-8);
  margin-top: var(--tw-sp-24);
}
.oh-switch__checkbox::after,
.oh-switch input[type="checkbox"]::after,
input[type="checkbox"].oh-toggle::after {
  box-shadow: var(--tw-shadow-xs) !important;
}

/* ── 4.4 Cards: white, hairline, radius 12, no shadow, padding 20 ────── */
.tw-card,
.oh-card,
.oh-card-dashboard,
.tw-kpi-card {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-card) !important;
  background: var(--tw-bg-raised) !important;
  box-shadow: none !important;
}
.oh-card {
  padding: var(--tw-card-pad);
}
.tw-card__header {
  padding: var(--tw-sp-16) var(--tw-card-pad);
}
.tw-card__body {
  padding: var(--tw-card-pad);
}
.tw-card__footer {
  padding: var(--tw-sp-12) var(--tw-card-pad);
}
.tw-card__title,
.oh-card__title,
.oh-card__title--sm,
.oh-card__title--lg,
.oh-card-dashboard__title {
  color: var(--tw-fg) !important;
  font: var(--tw-font-card-title) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* Never a bordered card inside a bordered card: the inner frame goes. */
:is(.tw-card, .oh-card) :is(.tw-card, .oh-card) {
  border-color: transparent !important;
  border-radius: 0 !important;
  padding: 0;
}
.tw-kpi-card--highlight {
  border-color: var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
}
.tw-kpi-card__value {
  font: var(--tw-font-kpi);
}
.tw-kpi-card__label {
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}
/* Cards in a row share height and gaps. */
.tw-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--tw-sp-16);
  align-items: stretch;
}
.tw-card-grid > * {
  height: 100%;
}

/* ── 4.5 KPI strip ────────────────────────────────────────────────────── */
.tw-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-card);
  background: var(--tw-bg-raised);
}
.tw-kpi {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--tw-sp-4);
  min-width: 0;
  margin: 0;
  padding: var(--tw-sp-16) var(--tw-card-pad);
  /* Hairlines between items, whatever the wrap. */
  box-shadow: -1px 0 0 var(--tw-border), 0 -1px 0 var(--tw-border);
}
.tw-kpi__value {
  margin: 0;
  color: var(--tw-fg);
  font: var(--tw-font-kpi);
  font-variant-numeric: tabular-nums;
}
.tw-kpi__value a {
  color: inherit;
  text-decoration: none;
}
.tw-kpi__value a:hover {
  color: var(--tw-link);
}
.tw-kpi__label {
  margin: 0;
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}
/* Strip with icons: label row (icon chip + label) on top, then the number. */
.tw-kpis--icons .tw-kpi {
  flex-direction: column;
  justify-content: flex-start; /* numbers line up whether or not a tile has a hint */
  gap: var(--tw-sp-8);
}
.tw-kpis--icons .tw-kpi__hint {
  order: 2;
}
.tw-kpis--icons .tw-kpi__label {
  display: flex;
  align-items: center;
  gap: var(--tw-sp-8);
}
.tw-kpi__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--tw-radius-control);
  background: var(--tw-accent-bg);
  color: var(--tw-accent);
}
.tw-kpi__icon ion-icon {
  width: 16px;
  height: 16px;
}
.tw-kpi--warning .tw-kpi__icon {
  background: var(--tw-warning-bg);
  color: var(--tw-warning-fg);
}
.tw-kpi--danger .tw-kpi__icon {
  background: var(--tw-danger-bg);
  color: var(--tw-danger-fg);
}
.tw-kpi--danger .tw-kpi__value {
  color: var(--tw-danger-fg);
}
.tw-kpi--warning .tw-kpi__value {
  color: var(--tw-warning-fg);
}

/* ── 4.6 Pills and badges: 22px, radius 6, 12/500, status only ───────── */
.tw-badge,
.tw-pill,
.oh-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tw-sp-4);
  min-height: var(--tw-pill-h) !important;
  padding: 0 var(--tw-sp-8) !important;
  border: 0 !important;
  border-radius: var(--tw-radius-pill) !important;
  font-family: var(--tw-font-body);
  font-size: var(--tw-pill-size) !important;
  font-weight: var(--tw-pill-weight) !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.tw-pill {
  --twc-badge-bg: var(--tw-neutral-bg);
  --twc-badge-fg: var(--tw-neutral-fg);
  background-color: var(--twc-badge-bg);
  color: var(--twc-badge-fg);
}
.tw-badge::before {
  content: none;
  display: none;
}
/* Never render an empty badge (a red "0" or a blank tinted box). */
.tw-badge:empty,
.tw-pill:empty,
.oh-badge:empty,
.badge:empty {
  display: none !important;
}
.tw-pill--success,
.tw-pill--approved,
.tw-pill--paid,
.tw-pill--active,
.tw-pill--open,
.tw-badge--open {
  --twc-badge-bg: var(--tw-success-bg);
  --twc-badge-fg: var(--tw-success-fg);
}
.tw-pill--warning,
.tw-pill--pending,
.tw-pill--requested,
.tw-pill--draft {
  --twc-badge-bg: var(--tw-warning-bg);
  --twc-badge-fg: var(--tw-warning-fg);
}
.tw-pill--danger,
.tw-pill--rejected,
.tw-pill--overdue,
.tw-pill--cancelled {
  --twc-badge-bg: var(--tw-danger-bg);
  --twc-badge-fg: var(--tw-danger-fg);
}
.tw-pill--info,
.tw-pill--processing {
  --twc-badge-bg: var(--tw-info-bg);
  --twc-badge-fg: var(--tw-info-fg);
}
.tw-pill--neutral,
.tw-pill--closed,
.tw-pill--archived,
.tw-pill--inactive {
  --twc-badge-bg: var(--tw-neutral-bg);
  --twc-badge-fg: var(--tw-neutral-fg);
}
/* Counts are plain numbers, not brand pills (the sidebar count is the one
   exception, styled in tw-shell.css). */
.oh-badge--secondary,
.oh-badge_count {
  background: var(--tw-surface) !important;
  color: var(--tw-fg-muted) !important;
}
.oh-checkpoint-badge {
  min-height: 28px;
  border-radius: var(--tw-radius-pill) !important;
  font-size: var(--tw-pill-size) !important;
  font-weight: var(--tw-pill-weight) !important;
}

/* Removable active-filter chip */
.tw-chip,
.oh-titlebar__tag:not(.oh-titlebar__tag--custom) {
  display: inline-flex !important;
  align-items: center;
  gap: var(--tw-sp-4);
  min-height: 28px;
  padding: 0 var(--tw-sp-4) 0 var(--tw-sp-8) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-pill) !important;
  background: var(--tw-bg-raised) !important;
  color: var(--tw-fg) !important;
  font-size: var(--tw-secondary-size) !important;
  font-weight: var(--tw-weight-regular) !important;
}
.tw-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--tw-radius-pill);
  background: none;
  color: var(--tw-fg-muted);
  cursor: pointer;
}
.tw-chip__remove:hover {
  background: var(--tw-surface);
  color: var(--tw-fg);
}

/* ── 4.7 Avatars: photo or neutral initials, 24 / 28 / 40 / 64 ────────── */
.tw-avatar,
.oh-profile__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--tw-radius-full);
  background: var(--tw-avatar-bg) !important;
  color: var(--tw-avatar-fg) !important;
  font-family: var(--tw-font-body);
  font-weight: var(--tw-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
}
.tw-avatar,
.tw-avatar--40 {
  width: var(--tw-avatar-40);
  height: var(--tw-avatar-40);
  font-size: var(--tw-body-size);
}
.tw-avatar--24 {
  width: var(--tw-avatar-24);
  height: var(--tw-avatar-24);
  font-size: 10px;
}
.tw-avatar--28 {
  width: var(--tw-avatar-28);
  height: var(--tw-avatar-28);
  font-size: 11px;
}
.tw-avatar--64 {
  width: var(--tw-avatar-64);
  height: var(--tw-avatar-64);
  font-size: var(--tw-section-size);
}
.tw-avatar img,
img.tw-avatar,
.oh-profile__image {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}
.oh-profile--md .oh-profile__avatar {
  width: var(--tw-avatar-28);
  height: var(--tw-avatar-28);
}
.oh-profile--md .oh-profile__name {
  font-size: var(--tw-body-size) !important;
}
.oh-profile--lg .oh-profile__avatar {
  width: var(--tw-avatar-40);
  height: var(--tw-avatar-40);
}
/* Initials tiles in area files used the brand gradient: neutral everywhere. */
.tw-emp-ava:not(img),
.tw-org-avatar--initials,
.tw-approvals-avatar,
.tw-lms-avatar,
.tw-pay-avatar,
.tw-pmsdash-avatar,
[class*="avatar--initials"],
[class*="__initials"] {
  background: var(--tw-avatar-bg) !important;
  background-image: none !important;
  color: var(--tw-avatar-fg) !important;
  font-weight: var(--tw-weight-medium) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.tw-person {
  gap: var(--tw-sp-12);
}
.tw-person__name,
.oh-profile__name {
  color: var(--tw-fg);
  font-size: var(--tw-body-size);
  font-weight: var(--tw-weight-medium);
}
.tw-person__meta {
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}

/* ── 4.8 Tables ───────────────────────────────────────────────────────── */
/* One frame (radius 12, hairline, no shadow); the table scrolls inside it. */
.tw-table-wrap,
.oh-sticky-table,
.oh-table_sticky--wrapper > .table-wrapper {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-card) !important;
  background: var(--tw-bg-raised);
  box-shadow: none !important;
}
.oh-table_sticky--wrapper > .table-wrapper {
  max-height: none;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tw-surface-2) transparent;
}
/* Header: 13/500, muted, sentence case, never uppercase or tracked. */
.tw-table thead th,
.oh-table thead tr th,
.oh-sticky-table__thead .oh-sticky-table__th,
.oh-sticky-table__th,
.fixed-table thead th {
  height: 40px !important;
  padding-block: 0 !important;
  padding-inline: var(--tw-cell-pad-x) !important;
  background-color: var(--tw-bg-raised) !important;
  color: var(--tw-fg-muted) !important;
  font-family: var(--tw-font-body);
  font-size: var(--tw-label-size) !important;
  font-weight: var(--tw-label-weight) !important;
  line-height: var(--tw-label-line) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--tw-border) !important;
}
.tw-table thead th,
.oh-table thead tr th,
.fixed-table thead th {
  position: sticky;
  top: 0;
}
/* Any other table header: same type, sentence case, no tracking. */
table thead th {
  color: var(--tw-fg-muted);
  font-family: var(--tw-font-body);
  font-size: var(--tw-label-size);
  font-weight: var(--tw-label-weight) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* Rows: 48px, cells 12 16, 14px text, hover fill, no zebra.
   The oh-sticky-table cells take their height and padding from the
   "Sticky table" block above (compact and not forced), so a 36px row
   control still sits in a 48px row and module rules can tune it. */
.tw-table tbody td,
.tw-table tbody th,
.oh-table tbody tr td,
.fixed-table td {
  height: var(--tw-row-h) !important;
  padding: var(--tw-cell-pad-y) var(--tw-cell-pad-x) !important;
}
.tw-table tbody td,
.tw-table tbody th,
.oh-table tbody tr td,
.oh-sticky-table__td,
.oh-sticky-table__sd,
.fixed-table td {
  color: var(--tw-fg) !important;
  font-size: var(--tw-body-size) !important;
  line-height: var(--tw-body-line) !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--tw-border) !important;
}
.fixed-table th,
.fixed-table td,
.fixed-table th:first-child,
.fixed-table td:first-child {
  border-right: 0 !important;
}
.fixed-table tbody tr:hover > td,
.fixed-table tbody tr:hover > td:first-child {
  background-color: var(--tw-surface) !important;
}
.fixed-table tbody tr:last-child > td {
  border-bottom: 0 !important;
}
.fixed-table thead tr {
  box-shadow: none !important;
}
.tw-table tbody tr:hover,
.oh-table tbody tr:hover {
  background-color: var(--tw-surface);
}
/* Numbers and money right aligned; dates stay left. */
.tw-num,
td.tw-num,
th.tw-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
.tw-table .tw-truncate,
.oh-sticky-table .tw-truncate,
.fixed-table .tw-truncate {
  max-width: 32ch;
}
/* Row status stripes are colour-only noise: the status is written in the row. */
.oh-sticky-table [class*="row-status--"],
.fixed-table [class*="row-status--"] {
  border-left-width: 0 !important;
}
/* Row actions: 36px buttons, kebab for the rest. */
.oh-sticky-table .oh-btn-group,
.fixed-table .oh-btn-group {
  display: inline-flex;
  gap: var(--tw-sp-4);
  border: 0 !important;
  box-shadow: none !important;
}
.oh-sticky-table .oh-btn-group .oh-btn,
.fixed-table .oh-btn-group .oh-btn {
  min-width: var(--tw-icon-btn);
  height: var(--tw-icon-btn);
  min-height: var(--tw-icon-btn) !important;
  border-radius: var(--tw-radius-control) !important;
}
.oh-sticky-dropdown_btn,
.tw-kebab {
  width: var(--tw-icon-btn) !important;
  height: var(--tw-icon-btn);
  border-radius: var(--tw-radius-control);
}
.oh-dot--small {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--tw-radius-full);
}

/* ── 4.9 Tabs: 14/500, gap 24, indigo text + 2px underline ───────────── */
.tw-tabs {
  display: flex;
  flex-wrap: nowrap !important;
  gap: var(--tw-tab-gap) !important;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  scrollbar-width: none;
  border-bottom: 1px solid var(--tw-border);
}
.tw-tabs::-webkit-scrollbar {
  display: none;
}
.tw-tabs__tab,
.oh-general__tab-link:not(.tw-tabset__tab) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  gap: var(--tw-sp-8);
  min-height: var(--tw-hit);
  margin: 0 0 -1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tw-fg-muted) !important;
  font: var(--tw-font-tab) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  transition: color var(--tw-motion), border-color var(--tw-motion);
}
.tw-tabs__tab:hover,
.oh-general__tab-link:not(.tw-tabset__tab):hover {
  background: transparent !important;
  color: var(--tw-fg) !important;
}
.tw-tabs__tab[aria-selected="true"],
.tw-tabs__tab[aria-current="page"],
.oh-general__tab-link--active:not(.tw-tabset__tab),
.oh-general__tab-link:not(.tw-tabset__tab)[aria-selected="true"] {
  border-bottom-color: var(--tw-accent) !important;
  color: var(--tw-accent) !important;
  font-weight: var(--tw-tab-weight) !important;
}

/* ── 4.9 Tab set (.tw-tabset): the one tab component ─────────────────────
   Markup contract (templates/components/tw_tabs.html renders it; legacy
   pages use the same classes by hand, behaviour comes from static/index/tw-tabs.js):

     .tw-tabset [--pill] [--sticky]
       .tw-tabset__bar            fade edges + "More" menu live here
         .tw-tabset__scroll       the only horizontal scroller
           .tw-tabset__list       role=tablist (ul / div)
             .tw-tabset__tab      role=tab, data-target="#panel" or aria-controls,
                                  --active = selected. Children: __icon, __label,
                                  __count (or __badges holding a .tw-badge)
       .tw-tabset__panels
         .tw-tabset__panel        role=tabpanel, --active = shown. Lazy panels carry
                                  hx-get + hx-trigger="tw-tab-show once" and a __skeleton.

   Constant weight and width in every state, so selecting a tab never moves
   its neighbours. Active state is colour plus a 2px bar (never colour alone). */
.tw-tabset {
  position: relative;
  min-width: 0;
  background: transparent;
}
.tw-tabset__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-bottom: 1px solid var(--tw-border);
  background: var(--tw-bg);
}
.tw-tabset--sticky > .tw-tabset__bar,
.tw-tabset__bar--sticky {
  position: sticky;
  top: var(--tw-tabs-top, calc(var(--tw-topbar-h, 64px) + 1px));
  z-index: 8;
}
.tw-tabset__scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.tw-tabset__scroll::-webkit-scrollbar {
  display: none;
}
.tw-tabset__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--tw-tab-gap);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* <li role="presentation"> wrappers around tab buttons (profile style lists). */
.tw-tabset__list > li:not(.tw-tabset__tab) {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
.tw-tabset__bar[data-overflow="true"] .tw-tabset__list {
  padding-inline-end: var(--tw-hit);
}

/* Fade edges: only while there is more to scroll in that direction. */
.tw-tabset__bar::before,
.tw-tabset__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  z-index: 2;
  width: var(--tw-sp-24);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tw-motion);
}
.tw-tabset__bar::before {
  left: 0;
  background: linear-gradient(to right, var(--tw-bg), transparent);
}
.tw-tabset__bar::after {
  right: var(--tw-hit);
  background: linear-gradient(to left, var(--tw-bg), transparent);
}
.tw-tabset__bar[data-overflow-start="true"]::before,
.tw-tabset__bar[data-overflow-end="true"]::after {
  opacity: 1;
}

.tw-tabset__tab {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--tw-sp-8);
  box-sizing: border-box;
  min-height: var(--tw-hit);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tw-fg-muted);
  font: var(--tw-font-tab);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--tw-motion);
}
.tw-tabset__tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  transition: background-color var(--tw-motion);
}
.tw-tabset__tab:hover {
  color: var(--tw-fg);
}
.tw-tabset__tab:hover::after {
  background: var(--tw-border-strong);
}
.tw-tabset__tab--active,
.tw-tabset__tab[aria-selected="true"],
.tw-tabset__tab--active:hover {
  color: var(--tw-accent);
}
.tw-tabset__tab--active::after,
.tw-tabset__tab[aria-selected="true"]::after {
  background: var(--tw-accent);
}
.tw-tabset__tab:focus-visible {
  outline: none;
  border-radius: var(--tw-radius-sm);
  box-shadow: var(--tw-focus-shadow);
}
.tw-tabset__tab[aria-disabled="true"],
.tw-tabset__tab--disabled {
  color: var(--tw-fg-faint);
  cursor: not-allowed;
  pointer-events: none;
}
.tw-tabset__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  font-size: 18px;
}
.tw-tabset__label {
  min-width: 0;
}
.tw-tabset__count,
.tw-tabset__badges {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.tw-tabset__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--tw-radius-full);
  background: var(--tw-neutral-bg);
  color: var(--tw-neutral-fg);
  font-size: 12px;
  font-weight: var(--tw-weight-medium);
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.tw-tabset__tab--active .tw-tabset__count,
.tw-tabset__tab[aria-selected="true"] .tw-tabset__count {
  background: var(--tw-info-bg);
  color: var(--tw-info-fg);
}
.tw-tabset__count[data-tone="danger"] {
  background: var(--tw-danger-bg);
  color: var(--tw-danger-fg);
}
.tw-tabset__badges .tw-badge {
  margin: 0;
}

/* Pill variant: a segmented control for view switches and short tab sets. */
.tw-tabset--pill > .tw-tabset__bar {
  padding: var(--tw-sp-4);
  border: 0;
  border-radius: var(--tw-radius-lg);
  background: var(--tw-bg-well);
}
.tw-tabset--pill > .tw-tabset__bar::before {
  background: linear-gradient(to right, var(--tw-bg-well), transparent);
}
.tw-tabset--pill > .tw-tabset__bar::after {
  background: linear-gradient(to left, var(--tw-bg-well), transparent);
}
.tw-tabset--pill .tw-tabset__list {
  gap: var(--tw-sp-4);
}
.tw-tabset--pill .tw-tabset__tab {
  min-height: 36px;
  padding: 0 var(--tw-sp-12);
  border-radius: var(--tw-radius-md);
}
.tw-tabset--pill .tw-tabset__tab::after {
  display: none;
}
.tw-tabset--pill .tw-tabset__tab:hover {
  background: var(--tw-surface-2);
}
.tw-tabset--pill .tw-tabset__tab--active,
.tw-tabset--pill .tw-tabset__tab[aria-selected="true"] {
  background: var(--tw-bg-raised);
  color: var(--tw-fg);
  box-shadow: 0 0 0 1px var(--tw-border);
}
.tw-tabset--pill .tw-tabset__tab--active:focus-visible {
  box-shadow: var(--tw-focus-shadow);
}

/* Card variant (.tw-tabset__list--cards): each tab is a bordered card with a
   title, meta line and optional menu (recruitment pipeline job tabs). */
.tw-tabset__bar:has(.tw-tabset__list--cards) {
  border-bottom: 0;
}
.tw-tabset__list--cards {
  gap: var(--tw-sp-12);
  padding: var(--tw-sp-4) var(--tw-sp-4) var(--tw-sp-12);
}
.tw-tabset__list--cards > .tw-tabset__tab {
  justify-content: space-between;
  min-width: 280px;
  max-width: 360px;
  padding: var(--tw-sp-12) var(--tw-sp-16);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  background: var(--tw-bg-raised);
  color: var(--tw-fg);
  white-space: normal;
  box-shadow: var(--tw-shadow-sm);
}
.tw-tabset__list--cards > .tw-tabset__tab::after {
  display: none;
}
.tw-tabset__list--cards > .tw-tabset__tab:hover {
  border-color: var(--tw-border-strong);
}
.tw-tabset__list--cards > .tw-tabset__tab--active,
.tw-tabset__list--cards > .tw-tabset__tab[aria-selected="true"] {
  border-color: var(--tw-accent);
  background: var(--tw-yellow-soft);
  color: var(--tw-fg);
  box-shadow: inset 0 0 0 1px var(--tw-accent);
}

/* Secondary tabs (data-tw-secondary on the tab or its <li>) stay in the More menu
   until they are the open tab. */
.tw-tabset__list li[data-tw-secondary]:not(:has(.tw-tabset__tab--active)),
.tw-tabset__list .tw-tabset__tab[data-tw-secondary]:not(.tw-tabset__tab--active) {
  display: none;
}

/* "More" overflow menu. */
.tw-tabset__more {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tw-hit);
  height: calc(100% - 1px);
  padding: 0;
  border: 0;
  background: var(--tw-bg);
  color: var(--tw-fg-muted);
  font-size: 20px;
  cursor: pointer;
}
.tw-tabset__bar[data-overflow="true"] > .tw-tabset__more {
  display: inline-flex;
}
.tw-tabset__more:hover,
.tw-tabset__more[aria-expanded="true"] {
  color: var(--tw-accent);
}
.tw-tabset__more:focus-visible {
  outline: none;
  box-shadow: inset var(--tw-focus-shadow);
}
.tw-tabset--pill .tw-tabset__more {
  background: var(--tw-bg-well);
}
.tw-tabset__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  box-sizing: border-box;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(60vh, 360px);
  margin: var(--tw-sp-4) 0 0;
  padding: var(--tw-sp-4);
  overflow-y: auto;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  background: var(--tw-bg-raised);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  list-style: none;
}
.tw-tabset__menu[hidden] {
  display: none;
}
.tw-tabset__menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-sp-8);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tw-hit);
  padding: 0 var(--tw-sp-12);
  border: 0;
  border-radius: var(--tw-radius-md);
  background: transparent;
  color: var(--tw-fg);
  font: var(--tw-font-tab);
  text-align: left;
  cursor: pointer;
}
.tw-tabset__menu-item:hover,
.tw-tabset__menu-item:focus-visible {
  outline: none;
  background: var(--tw-bg-well);
}
.tw-tabset__menu-item[aria-current="true"] {
  background: var(--tw-yellow-soft);
  color: var(--tw-accent);
}

/* Panels. Hidden until active, wherever they sit in the page. */
.tw-tabset__panels {
  min-width: 0;
}
.tw-tabset__panel {
  display: none;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--tw-sp-16) 0 0;
}
.tw-tabset__panel--active {
  display: block;
}
.tw-tabset__panel[hidden] {
  display: none;
}
.tw-tabset__panel:focus-visible {
  outline: none;
  box-shadow: var(--tw-focus-shadow);
}
.tw-tabset__panel[aria-busy="true"] {
  min-height: 160px;
}

/* Lazy panel placeholder, same rhythm as the content it stands in for. */
.tw-tabset__skeleton {
  display: grid;
  gap: var(--tw-sp-12);
}
.tw-tabset__skeleton > span {
  display: block;
  height: 16px;
  border-radius: var(--tw-radius-sm);
  background: var(--tw-surface-2);
  animation: tw-skeleton-pulse 1.6s ease-in-out infinite;
}
.tw-tabset__skeleton > span:nth-child(1) {
  width: 32%;
  height: 20px;
}
.tw-tabset__skeleton > span:nth-child(3) {
  width: 78%;
}
.tw-tabset__skeleton > span:nth-child(4) {
  width: 64%;
}
.tw-tabset__skeleton > span:nth-child(5) {
  width: 86%;
}

@media (max-width: 640px) {
  .tw-tabset {
    --tw-tab-gap: var(--tw-sp-16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tw-tabset__scroll {
    scroll-behavior: auto;
  }
  .tw-tabset__skeleton > span {
    animation: none;
  }
}

/* ── 4.10 Page header ─────────────────────────────────────────────────── */
.tw-page-header {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 3.x sets center: in a column that centred the title row */
  gap: var(--tw-sp-16);
  margin: 0 0 var(--tw-header-gap);
  padding: 0;
}
.tw-page-header__row,
#main-section .oh-main__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-sp-12) var(--tw-sp-16);
}
#main-section .oh-main__topbar {
  margin: 0 0 var(--tw-header-gap) !important;
  padding: 0 !important;
}
.tw-page-header__text {
  min-width: 0;
}
.tw-page-header__title,
#main-section .oh-main__titlebar-title,
#main-section .oh-titlebar__title {
  margin: 0 !important;
  color: var(--tw-fg) !important;
  font: var(--tw-font-title) !important;
  letter-spacing: var(--tw-title-tracking) !important;
  text-transform: none !important;
}
/* Page title icon: the module's sidebar mark in an indigo chip, drawn from
   --tw-page-icon on <main> (set by the shell for module pages). One per page. */
.tw-page-title--icon {
  position: relative;
  min-height: 36px;
  padding-left: 48px !important;
}
.tw-page-title--icon::before,
.tw-page-title--icon::after {
  position: absolute;
  top: 50%;
  content: "";
  transform: translateY(-50%);
}
.tw-page-title--icon::before {
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--tw-accent-line);
  border-radius: var(--tw-radius-control);
  background: var(--tw-accent-bg);
}
.tw-page-title--icon::after {
  left: 8px;
  width: 20px;
  height: 20px;
  background: var(--tw-accent);
  -webkit-mask: var(--tw-page-icon) center / contain no-repeat;
  mask: var(--tw-page-icon) center / contain no-repeat;
}
.tw-page-header__desc {
  max-width: var(--tw-measure);
  margin: var(--tw-sp-4) 0 0;
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}
.tw-page-header__actions,
#main-section .oh-main__titlebar-button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-sp-8) !important;
}
/* No ad-hoc icons inside page titles; the shell draws the module icon (tw-page-title--icon). */
.tw-page-header__title ion-icon,
#main-section .oh-main__titlebar-title ion-icon {
  display: none;
}

/* ── 4.11 Toolbar ─────────────────────────────────────────────────────── */
.tw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-sp-8);
  margin: 0 0 var(--tw-sp-16);
}
.tw-toolbar__search {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}
.tw-toolbar__search input,
.oh-input__search-group .oh-input {
  width: 100%;
}
.tw-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-sp-8);
  margin-inline-start: auto;
}
@media (min-width: 1024px) {
  .tw-toolbar {
    flex-wrap: nowrap;
  }
  .tw-toolbar__search {
    flex: 0 1 var(--tw-search-w);
  }
  #main-section form#filterForm > .oh-input__search-group {
    flex: 0 1 var(--tw-search-w) !important;
    max-width: var(--tw-search-w) !important;
  }
}
#main-section .oh-main__titlebar .oh-input__search-group .oh-input,
.tw-search-input {
  border-color: var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-control) !important;
}
.oh-view-types,
.tw-view-toggle {
  border-radius: var(--tw-radius-control) !important;
}
.oh-view-types .oh-btn--view,
.oh-btn--view {
  width: var(--tw-icon-btn);
  min-width: var(--tw-icon-btn);
  height: calc(var(--tw-btn-h) - 2px);
  min-height: calc(var(--tw-btn-h) - 2px) !important;
  padding: 0 !important;
}
.oh-titlebar-container__filters {
  gap: var(--tw-sp-8);
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}

/* ── 4.12 Pagination: "1-25 of 240" + Previous / Next ─────────────────── */
.oh-pagination,
.tw-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-sp-8) var(--tw-sp-16);
  margin: var(--tw-sp-16) 0 0;
  padding: 0;
}
.oh-pagination__page,
.tw-pagination__range {
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
  font-variant-numeric: tabular-nums;
}
.oh-pagination__nav {
  display: flex;
  align-items: center;
  gap: var(--tw-sp-8);
}
.oh-pagination__items,
.tw-pagination__nav {
  display: flex;
  gap: var(--tw-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.oh-pagination__item,
.oh-pagination__item:first-child,
.oh-pagination__item:last-child {
  min-width: 0;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}
.oh-pagination__item .oh-pagination__link:not(.tw-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tw-icon-btn);
  height: var(--tw-btn-h);
  padding: 0 var(--tw-sp-12);
  border: 1px solid var(--tw-border-strong);
  border-radius: var(--tw-radius-control);
  background: var(--tw-bg-raised);
  color: var(--tw-fg) !important;
  font-size: var(--tw-button-size);
  font-weight: var(--tw-button-weight);
  text-decoration: none;
}
.oh-pagination__item .oh-pagination__link:not(.tw-btn):hover {
  background: var(--tw-surface) !important;
}
.oh-pagination__item--active .oh-pagination__link,
.oh-pagination__link--active {
  border-color: var(--tw-accent) !important;
  background: var(--tw-accent-bg) !important;
  color: var(--tw-accent) !important;
  text-decoration: none;
}
.tw-pagination .tw-btn[aria-disabled="true"] {
  border-color: var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
  color: var(--tw-fg-faint) !important;
  cursor: default;
}
.oh-pagination__input {
  height: var(--tw-btn-h);
  border-radius: var(--tw-radius-control);
  font-size: var(--tw-body-size);
}

/* ── 4.13 Menus and popovers: floating, shadow-md, radius 8 ───────────── */
.tw-menu,
.oh-dropdown__menu,
.oh-dropdown__import,
.oh-dropdown__filter {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-control) !important;
  background: var(--tw-bg-raised) !important;
  box-shadow: var(--tw-shadow-menu) !important;
}
.oh-dropdown__link,
.tw-menu__item {
  min-height: var(--tw-btn-h);
  border-radius: var(--tw-radius-pill);
  font-size: var(--tw-body-size);
  font-weight: var(--tw-weight-regular);
}
.oh-dropdown__link:hover,
.tw-menu__item:hover {
  background-color: var(--tw-surface) !important;
}

/* ── 4.14 Modals: 560 forms / 720 detail, title 17/600 ────────────────── */
.tw-modal,
.oh-modal__dialog {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-card) !important;
  box-shadow: var(--tw-shadow-modal) !important;
}
.tw-modal {
  width: min(var(--tw-modal-w), calc(100% - 2 * var(--tw-sp-16)));
  max-width: var(--tw-modal-w);
}
/* Legacy dialogs: 720 for detail by default, 560 for the shared create and
   edit form dialogs; --confirm (400) and --xl keep their own widths. */
.oh-modal__dialog:not(.oh-modal__dialog--confirm):not(.oh-modal__dialog--timeoff):not(.oh-modal__dialog--xl),
.tw-modal--lg,
.oh-modal__dialog--lg {
  width: min(var(--tw-modal-w-lg), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--tw-modal-w-lg) !important;
}
#objectCreateModalTarget.oh-modal__dialog,
#objectUpdateModalTarget.oh-modal__dialog,
#dynamicCreateModalTarget.oh-modal__dialog,
.oh-modal__dialog.tw-modal--form {
  width: min(var(--tw-modal-w), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--tw-modal-w) !important;
}
.tw-modal__header,
.tw-modal > header,
.oh-modal__dialog-header {
  padding: var(--tw-sp-16) var(--tw-sp-12) var(--tw-sp-16) var(--tw-sp-24) !important;
}
.tw-modal__title,
.oh-modal__dialog-title {
  color: var(--tw-fg) !important;
  font: var(--tw-font-section) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tw-modal__body,
.oh-modal__dialog-body {
  padding: var(--tw-sp-24) !important;
}
.tw-modal__footer,
.tw-modal > footer,
.oh-modal__dialog-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: flex-end;
  gap: var(--tw-sp-8) !important;
  padding: var(--tw-sp-16) var(--tw-sp-24) !important;
  background: var(--tw-bg-raised) !important;
}
.tw-modal__close,
.oh-modal__close,
.oh-modal__close--custom,
.oh-modal_close--custom {
  width: var(--tw-icon-btn) !important;
  height: var(--tw-icon-btn) !important;
  border-radius: var(--tw-radius-control) !important;
  font-size: 20px !important;
}
/* A form inside a modal body draws no second frame. */
.oh-modal__dialog-body .oh-profile-section,
.oh-modal__dialog-body > .oh-card,
.oh-modal__dialog-body > form > .oh-card,
.oh-modal__dialog-body .oh-general__tab-target > .oh-card {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 480px) {
  .tw-modal__body,
  .oh-modal__dialog-body,
  .tw-modal__footer,
  .oh-modal__dialog-footer {
    padding-inline: var(--tw-sp-16) !important;
  }
  .oh-modal__dialog-header {
    padding-inline-start: var(--tw-sp-16) !important;
  }
}

/* ── 4.15 Toasts: bottom right (top on phones), 5s, one line ──────────── */
.tw-toast-region,
.oh-alert-container {
  position: fixed;
  top: var(--tw-sp-16);
  bottom: auto;
  left: var(--tw-sp-16);
  right: var(--tw-sp-16);
  width: auto;
  max-width: none;
  z-index: var(--tw-z-toast);
}
@media (min-width: 768px) {
  .tw-toast-region,
  .oh-alert-container {
    top: auto;
    bottom: var(--tw-sp-24);
    left: auto;
    right: var(--tw-sp-24);
    width: min(400px, calc(100% - 2 * var(--tw-sp-24)));
  }
}
.tw-toast,
.oh-alert {
  min-height: 48px;
  padding: var(--tw-sp-4) var(--tw-sp-4) var(--tw-sp-4) var(--tw-sp-16) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-control) !important;
  background-color: var(--tw-bg-raised) !important;
  color: var(--tw-fg) !important;
  box-shadow: var(--tw-shadow-toast) !important;
  font-size: var(--tw-body-size) !important;
  line-height: var(--tw-body-line) !important;
}
.tw-toast::before,
.oh-alert::before {
  width: var(--tw-icon-size) !important;
  height: var(--tw-icon-size) !important;
}
.tw-toast__close,
.oh-alert__dismiss {
  width: var(--tw-icon-btn);
  height: var(--tw-icon-btn);
  border-radius: var(--tw-radius-control);
  font-size: 20px;
}
.oh-alert--animated {
  animation:
    tw-enter var(--tw-duration-slow) var(--tw-ease-out) both,
    tw-exit var(--tw-duration-slow) var(--tw-ease-in-out) var(--tw-toast-duration) forwards;
}
.oh-alert--animated.oh-alert--danger,
.oh-alert--animated.error {
  animation: tw-enter var(--tw-duration-slow) var(--tw-ease-out) both;
}

/* ── 4.16 Empty, error and loading states ─────────────────────────────── */
.tw-empty,
.oh-empty,
.tw-empty-state {
  gap: var(--tw-sp-12) !important;
  padding: var(--tw-sp-24) var(--tw-sp-16) !important;
  color: var(--tw-fg-muted);
  font: var(--tw-font-body-text);
}
.tw-empty--compact {
  padding: var(--tw-sp-12) 0 !important;
}
/* Shared empty state with its icon: centred block in a page or card; a
   single left-aligned row when compact. */
.tw-empty--visual {
  align-items: center;
  text-align: center;
}
.tw-empty__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--tw-accent-line);
  border-radius: var(--tw-radius-full);
  background: var(--tw-accent-bg);
  color: var(--tw-accent);
}
.tw-empty__icon ion-icon {
  width: 22px;
  height: 22px;
}
.tw-empty--visual.tw-empty--compact {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
}
.tw-empty--compact .tw-empty__icon {
  width: 32px;
  height: 32px;
}
.tw-empty--compact .tw-empty__icon ion-icon {
  width: 16px;
  height: 16px;
}
.tw-empty__title,
.oh-empty__title,
.tw-empty-state__title {
  color: var(--tw-fg-muted) !important;
  font: var(--tw-font-body-text) !important;
}
/* Errors: an inline message with a Retry text button. */
.tw-error-state {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-sp-4) var(--tw-sp-8);
  margin: 0;
  padding: var(--tw-sp-16);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tw-fg-muted);
  text-align: left;
}
.tw-error-state::before {
  content: none;
  display: none;
}
.tw-error-state__title {
  color: var(--tw-danger-fg);
  font: var(--tw-font-body-text);
}
.tw-error-state__text {
  color: var(--tw-fg-muted);
  font: var(--tw-font-body-text);
}
.tw-error-state__actions {
  margin: 0;
}
/* Skeletons match the final layout; never a page-blocking spinner. */
.tw-skeleton {
  border-radius: var(--tw-radius-pill);
  background-color: var(--tw-surface-2);
}
.tw-skeleton--text {
  width: 60%;
  height: 12px;
}
.tw-skeleton--title {
  width: 40%;
  height: 20px;
}
.tw-skeleton--row {
  width: 100%;
  height: var(--tw-row-h);
  border-radius: 0;
  background-color: var(--tw-surface);
}
.tw-skeleton--avatar {
  width: var(--tw-avatar-28);
  height: var(--tw-avatar-28);
  border-radius: var(--tw-radius-full);
}
.tw-skeleton--block {
  width: 100%;
  height: 120px;
  border-radius: var(--tw-radius-card);
}

/* ── 4.17 Links ───────────────────────────────────────────────────────── */
.tw-link {
  text-decoration: none;
}
.tw-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ── 4.18 Motion: 150ms ease-out; nothing moves for reduced motion ───── */
a,
button,
.oh-btn,
.tw-btn,
input,
select,
textarea {
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  a,
  button,
  .oh-btn,
  .tw-btn,
  input,
  select,
  textarea {
    transition: none !important;
  }
}

/* ── 4.19 No glows: shadows belong to floating layers only ────────────── */
.tw-card:hover,
.oh-card:hover,
.oh-card-dashboard:hover,
.tw-kpi-card:hover,
.oh-kanban-card,
.oh-kanban-card:hover,
.oh-sticky-table__tr:hover,
.oh-btn--shadow,
[class*="--glow"],
[class*="-glow"] {
  box-shadow: none !important;
}
.oh-kanban-card {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-card) !important;
  background: var(--tw-bg-raised) !important;
}
/* The floating "+" button is retired; the top bar "New request" menu replaces it. */
#fab1,
.inner-fabs,
.oh-fab,
.fab-container,
.tw-fab {
  display: none !important;
}

/* ── 4.20 Generic list extras ─────────────────────────────────────────── */
/* Bulk select bar: text actions ("Select (3)", "Unselect", "Export"), not
   tinted pills; the status legend wraps beside it. */
.tw-list-quickbar {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-sp-8) var(--tw-sp-16);
  margin-bottom: var(--tw-sp-12) !important;
}
.quick-bulk-action.oh-checkpoint-badge {
  min-height: var(--tw-btn-h);
  padding: 0 var(--tw-sp-8) !important;
  border: 0 !important;
  border-radius: var(--tw-radius-control) !important;
  background: transparent !important;
  color: var(--tw-link) !important;
  font-size: var(--tw-button-size) !important;
  font-weight: var(--tw-button-weight) !important;
}
.quick-bulk-action.oh-checkpoint-badge:hover {
  background: var(--tw-accent-bg) !important;
}
.quick-bulk-action.oh-checkpoint-badge.text-danger {
  color: var(--tw-danger-fg) !important;
}
.quick-bulk-action.oh-checkpoint-badge.text-danger:hover {
  background: var(--tw-danger-bg) !important;
}
.quick-bulk-action.oh-checkpoint-badge.text-secondary {
  color: var(--tw-fg-muted) !important;
}
.tw-list-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-sp-4) var(--tw-sp-16);
  margin: 0 0 var(--tw-sp-12) auto;
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}
.tw-list-quickbar .tw-list-legend {
  margin-bottom: 0;
}
.tw-list-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--tw-sp-8);
  cursor: pointer;
}
.tw-list-legend__item:hover {
  color: var(--tw-fg);
}
/* Title bar button groups draw no frame of their own. */
#main-section .oh-main__titlebar .oh-btn-group,
.oh-main__titlebar-button-container > .oh-btn-group {
  border: 0 !important;
  box-shadow: none !important;
  margin-left: 0 !important;
}
@media (max-width: 767.98px) {
  .oh-pagination,
  .tw-pagination {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left;
  }
}

/* ── 4.21 Action groups: one line, centred, 36px, 8px gaps, primary last ─ */
/*
 * Every row of actions (page header actions, list toolbars and filter bars,
 * card headers and footers, form footers, modal and drawer footers, table row
 * actions, bulk-action bars) follows one contract:
 *   - one line on desktop, every item centred on the row;
 *   - buttons 36px tall (--tw-btn-h); .tw-btn--compact (32) and .tw-btn--lg
 *     (40) exist for dense tables and hero forms, never mixed in one row;
 *   - 8px between items, no margins or floats on the items;
 *   - secondary actions first, ONE primary last;
 *   - wraps on narrow screens; .tw-actions--stack (form and modal footers)
 *     stacks full width below 480px with the primary on top.
 * Items can be buttons, links styled as buttons, a <form> wrapping one button
 * (it renders display: contents, so the button is the flex item), a dropdown
 * wrapper (.oh-dropdown) around its trigger, or a segmented view switch.
 * Area containers opt in with the class: <div class="twx-actions tw-actions">.
 */
:root {
  --twc-action-gap: var(--tw-sp-8);
  --twc-btn-h-compact: 32px;
  --twc-btn-h-lg: 40px;
}

/* Inline buttons outside a group still sit on the line's centre, so an
   icon-only button and a text button never land on different baselines. */
.tw-btn,
.oh-btn,
.btn {
  vertical-align: middle;
}
.tw-btn > ion-icon,
.tw-btn > svg,
.oh-btn > ion-icon,
.oh-btn > svg {
  flex: none;
  margin: 0 !important;
  vertical-align: middle;
}
.tw-btn--compact {
  min-height: var(--twc-btn-h-compact) !important;
  padding-inline: var(--tw-sp-12);
}
.tw-btn--lg {
  min-height: var(--twc-btn-h-lg) !important;
  padding-inline: var(--tw-sp-16);
}

/* The group, and the shared containers that follow the same contract. */
.tw-actions,
.tw-page-header__actions,
.tw-toolbar__actions,
.tw-form-actions,
.tw-form-footer,
.tw-card__footer,
.tw-modal__footer,
.tw-modal > footer,
.tw-empty__actions,
.tw-error-state__actions,
.oh-modal__dialog-footer,
.oh-main__titlebar-button-container,
.oh-inner-sidebar-content__footer,
.oh-kanban-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--twc-action-gap) !important;
  min-width: 0;
}
/* An explicit .tw-actions wins over the area container it is added to. */
.tw-actions {
  align-items: center !important;
}
.tw-actions--end {
  justify-content: flex-end !important;
}
.tw-actions--between {
  justify-content: space-between !important;
}
.tw-actions--nowrap {
  flex-wrap: nowrap !important;
}
/* In a header row the title gives way first: the actions keep one line and
   move under the title only when they no longer fit beside it. */
@media (min-width: 768px) {
  :is(header, .tw-page-header__row, [class*="-header"], [class*="-head"], [class*="__head"], [class*="__top"]) > .tw-actions {
    flex-shrink: 0;
    max-width: 100%;
  }
  /* A search field counts at its real width when the row is measured, so the
     row is not sized too narrow and the last button pushed to a second line. */
  .tw-actions > :is(.oh-input__search-group, .tw-toolbar__search, .tw-field:has(input[type="search"], input[name="search"])) {
    flex: 0 1 var(--tw-search-w) !important;
    min-width: var(--tw-search-w) !important;
  }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .tw-actions > :is(.oh-input__search-group, .tw-toolbar__search, .tw-field:has(input[type="search"], input[name="search"])) {
    flex: 0 1 12rem !important;
    min-width: 12rem !important;
  }
}
/* Table row actions stay on one line. */
:is(td, .oh-sticky-table__td) > .tw-actions {
  flex-wrap: nowrap !important;
}

/* Items: no stray margins or floats from legacy classes (.ml-2, .m-2, .mt-3,
   .float-end ...). An auto margin (.ms-auto / .ml-auto) still pushes an item
   to the far end on purpose. */
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .tw-form-actions, .tw-form-footer,
    .tw-card__footer, .tw-modal__footer, .tw-empty__actions, .tw-error-state__actions,
    .oh-modal__dialog-footer, .oh-main__titlebar-button-container, .oh-inner-sidebar-content__footer,
    .oh-kanban-card__actions) > :not(.ms-auto, .ml-auto, .me-auto, .mr-auto),
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .tw-form-actions, .tw-form-footer,
    .tw-card__footer, .tw-modal__footer, .oh-modal__dialog-footer, .oh-main__titlebar-button-container,
    .oh-kanban-card__actions) > :is(form, .oh-dropdown, .oh-btn-group)
  > :is(.tw-btn, .oh-btn, .btn, button, .oh-dropdown):not(.ms-auto, .ml-auto) {
  margin: 0 !important;
}
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .tw-form-actions, .tw-form-footer,
    .tw-card__footer, .tw-modal__footer, .tw-empty__actions, .tw-error-state__actions,
    .oh-modal__dialog-footer, .oh-main__titlebar-button-container, .oh-inner-sidebar-content__footer,
    .oh-kanban-card__actions) > * {
  float: none !important;
}
/* A form around a single button: the button becomes the flex item, so it
   shares the row's centre line (no line box, no block display). */
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .tw-form-actions, .tw-form-footer,
    .tw-card__footer, .tw-modal__footer, .tw-empty__actions, .oh-modal__dialog-footer,
    .oh-main__titlebar-button-container, .oh-kanban-card__actions)
  > form:not(.d-none, [hidden], [style*="display: none"], [style*="display:none"]):not(:has(input:not([type="hidden"]), select, textarea)) {
  display: contents !important;
}
/* A filter form inside a group (its fields live in dropdown panels) lays its
   buttons out as part of the same row. */
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .oh-main__titlebar-button-container)
  > form:not(.d-none, [hidden], [style*="display: none"], [style*="display:none"]):has(input:not([type="hidden"]), select, textarea) {
  display: flex;
  align-items: center;
  gap: var(--twc-action-gap);
  min-width: 0;
}
@media (max-width: 767.98px) {
  :is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .oh-main__titlebar-button-container) > form {
    flex-wrap: wrap;
  }
}
/* Dropdown wrappers and button groups line up on their trigger. */
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .tw-form-actions, .tw-card__footer,
    .tw-modal__footer, .oh-modal__dialog-footer, .oh-main__titlebar-button-container, .oh-kanban-card__actions)
  > :is(.oh-dropdown, .oh-btn-group):not(.d-none, [hidden]) {
  display: inline-flex;
  align-items: center;
}
/* An unframed button group (title bars) spaces its buttons like a group. */
#main-section .oh-main__titlebar .oh-btn-group,
.oh-main__titlebar-button-container > .oh-btn-group,
.tw-actions > .oh-btn-group {
  gap: var(--twc-action-gap);
}

/* Buttons in a group: one box model for every variant, links and inputs. */
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .tw-form-actions, .tw-form-footer,
    .tw-card__footer, .tw-modal__footer, .tw-empty__actions, .tw-error-state__actions,
    .oh-modal__dialog-footer, .oh-main__titlebar-button-container, .oh-inner-sidebar-content__footer,
    .oh-kanban-card__actions)
  :is(.tw-btn, .oh-btn, .btn, input[type="submit"], input[type="button"]):not(.oh-btn--view, .tw-btn--compact, .tw-btn--lg, :is(.oh-view-types, .tw-view-toggle, [class*="segmented"], [class*="view-switch"], [class*="-seg"]) *) {
  align-items: center;
  justify-content: center;
  min-height: var(--tw-btn-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 20px !important;
  white-space: nowrap;
}
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .tw-form-actions, .tw-form-footer,
    .tw-card__footer, .tw-modal__footer, .tw-empty__actions, .tw-error-state__actions,
    .oh-modal__dialog-footer, .oh-main__titlebar-button-container, .oh-kanban-card__actions)
  :is(.btn, input[type="submit"], input[type="button"]) {
  display: inline-flex;
}

/* Neutral legacy buttons in a row read as secondary buttons (white, hairline
   border, ink text), so Filter / Group by / Actions never mix grey fills with
   outlines on one line. */
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .oh-main__titlebar-button-container,
    .tw-form-actions, .oh-modal__dialog-footer)
  :is(.oh-btn:not([class*="oh-btn--"]), .oh-btn--light, .oh-btn--light-bkg, .oh-btn--dropdown, .oh-btn--light-dark-text):not(.oh-btn--view, :is(.oh-view-types, .tw-view-toggle, [class*="segmented"], [class*="view-switch"], .oh-btn-group) > *) {
  border: 1px solid var(--tw-border-strong) !important;
  background: var(--tw-bg-raised) !important;
  color: var(--tw-fg) !important;
}
:is(.tw-actions, .tw-page-header__actions, .tw-toolbar__actions, .oh-main__titlebar-button-container,
    .tw-form-actions, .oh-modal__dialog-footer)
  :is(.oh-btn:not([class*="oh-btn--"]), .oh-btn--light, .oh-btn--light-bkg, .oh-btn--dropdown, .oh-btn--light-dark-text):not(.oh-btn--view, :is(.oh-view-types, .tw-view-toggle, [class*="segmented"], [class*="view-switch"], .oh-btn-group) > *):hover {
  border-color: var(--tw-border-ink) !important;
  background: var(--tw-surface) !important;
}

/* Search fields in a toolbar: the field fills its group, so no empty strip
   opens up between the search box and the buttons. */
.oh-input__search-group > form {
  flex: 1 1 auto;
  min-width: 0;
}
.oh-input__search-group > form > .oh-input {
  width: 100%;
}
/* The search icon sits inside the field on every toolbar (it collapsed to
   0px wide outside the legacy title bar). */
:where(.oh-input__search-group) {
  position: relative;
}
.oh-input__search-group > .oh-input-group__icon--left,
.oh-input__search-group > form > .oh-input-group__icon--left {
  position: absolute !important;
  top: 50%;
  left: var(--tw-sp-12);
  z-index: 2;
  width: var(--tw-icon-size) !important;
  min-width: var(--tw-icon-size);
  height: var(--tw-icon-size);
  margin: 0 !important;
  font-size: var(--tw-icon-size) !important;
  color: var(--tw-fg-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Segmented view switches (list / card, open / closed) are as tall as a
   button, frame included, so they share the row's height. Phones keep the
   44px touch height. */
@media (min-width: 768px) {
  :is(.tw-actions, .tw-page-header__actions, .tw-toolbar, .tw-toolbar__actions, .oh-main__titlebar-button-container)
    :is(.oh-view-types, .tw-view-toggle, [class*="segmented"]:not([class*="segmented__"]), [class*="view-switch"]:not([class*="view-switch__"])) {
    box-sizing: border-box;
    height: var(--tw-btn-h);
    align-items: stretch;
  }
  :is(.tw-actions, .tw-page-header__actions, .tw-toolbar, .tw-toolbar__actions, .oh-main__titlebar-button-container)
    :is([class*="segmented"], [class*="view-switch"]) > :is(button, a) {
    min-height: 0 !important;
    height: auto;
  }
}

/* Phones: rows wrap; form and modal footers stack full width, primary on top. */
@media (max-width: 480px) {
  :is(.tw-actions--stack, .tw-form-actions, .tw-form-footer, .tw-modal__footer, .oh-modal__dialog-footer) {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  :is(.tw-actions--stack, .tw-form-actions, .tw-form-footer, .tw-modal__footer, .oh-modal__dialog-footer) > *,
  :is(.tw-actions--stack, .tw-form-actions, .tw-form-footer, .tw-modal__footer, .oh-modal__dialog-footer) > form > * {
    width: 100%;
  }
  :is(.tw-actions--stack, .tw-form-actions, .tw-form-footer, .tw-modal__footer, .oh-modal__dialog-footer)
    :is(.tw-btn, .oh-btn, .btn, input[type="submit"]) {
    width: 100%;
    min-height: var(--tw-hit) !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   PART 5  FORMS FOUNDATION (wave 5): modal / drawer shell and the field
   system. Usage is documented in the "Forms" and "Overlays" blocks of the
   HOW TO USE header above. Later than Parts 1-4, so it wins.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --twf-modal-sm: 480px;
  --twf-modal-md: 640px;
  --twf-modal-lg: 880px;
  --twf-pad: var(--tw-sp-24);
  --twf-gap: var(--tw-sp-16);
  --twf-field-h: var(--tw-input-h);
  --twf-focus-halo: 0 0 0 1px var(--tw-accent);
  --twf-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(92,90,84)' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --twf-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(92,90,84)' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --twf-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4l4-4'/%3E%3C/svg%3E");
  --twf-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3l6-7'/%3E%3C/svg%3E");
}
@media (max-width: 480px) {
  :root {
    --twf-pad: var(--tw-sp-16);
    --twf-field-h: var(--tw-hit);
  }
}

/* ── 5.1 Modal shell (.oh-modal and the HTMX targets in index.html) ──────
   .oh-modal > .oh-modal__dialog > header + body + footer. The dialog is a
   column no taller than the viewport; the header and footer never scroll,
   the body does. Templates may wrap header + body in a <form> or <div>: that
   wrapper joins the column. A footer inside the body (inside the <form>)
   sticks to the bottom of the scroll area. */
.oh-modal.oh-modal--show {
  align-items: flex-start !important;
  padding-top: var(--tw-sp-48) !important;
  padding-bottom: var(--tw-sp-48) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}
.oh-modal__dialog:not(.oh-modal__dialog--navigation) {
  display: flex !important;
  flex-direction: column;
  max-height: calc(100dvh - 2 * var(--tw-sp-48));
  overflow: hidden !important;
  padding: 0 !important;
}
.oh-modal--show > .oh-modal__dialog {
  animation: twf-dialog-in var(--tw-duration) var(--tw-ease-out);
}
@keyframes twf-dialog-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* No body class at all: the dialog itself scrolls. */
.oh-modal__dialog:not(.oh-modal__dialog--navigation):not(:has(.oh-modal__dialog-body)) {
  overflow-y: auto !important;
}
.oh-modal__dialog > :is(form, div, section):not(.oh-modal__dialog-header):not(.oh-modal__dialog-body):not(.oh-modal__dialog-footer):has(> .oh-modal__dialog-body),
.oh-modal__dialog > :is(form, div, section):not(.oh-modal__dialog-header):not(.oh-modal__dialog-body):not(.oh-modal__dialog-footer):has(> form > .oh-modal__dialog-body),
.oh-modal__dialog > :is(form, div, section) > form:has(> .oh-modal__dialog-body) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.oh-modal__dialog-header {
  flex: none;
  position: relative;
  z-index: 3;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--tw-sp-12);
  min-height: 60px;
  margin: 0 !important;
  padding: var(--tw-sp-12) var(--tw-sp-12) var(--tw-sp-12) var(--twf-pad) !important;
  border-bottom: 1px solid var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
}
.oh-modal__dialog-header .oh-modal__dialog-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow-wrap: anywhere;
}
/* Close buttons sit in the header row, never absolutely over the content. */
.oh-modal__dialog-header :is(.oh-modal__close, .oh-modal__close--custom, .oh-modal_close--custom, .oh-modal__close-custom, [data-tw-close]) {
  position: static !important;
  flex: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transform: none !important;
}
.oh-modal__dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: var(--twf-pad);
  scroll-padding-bottom: 96px;
  padding: var(--twf-pad) !important;
}
/* First field fully visible: nothing above the first label is pulled up. */
.oh-modal__dialog-body > :first-child,
.oh-modal__dialog-body > form > :first-child {
  margin-top: 0 !important;
}
.oh-modal__dialog-footer {
  flex: none;
  position: relative;
  z-index: 3;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--tw-sp-8) !important;
  margin: 0 !important;
  padding: var(--tw-sp-16) var(--twf-pad) !important;
  border-top: 1px solid var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
}
/* A footer inside the body (inside the form) sticks to the bottom of the
   scroll area and runs edge to edge. */
.oh-modal__dialog-body :is(.tw-modal-footer, .oh-modal__dialog-footer, .tw-leave-form__footer),
.oh-modal__dialog-body form > .tw-form-actions:last-child,
.oh-modal__dialog-body .oh-profile-section__card > .tw-actions:last-child {
  position: sticky !important;
  bottom: calc(-1 * var(--twf-pad));
  z-index: 3;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end !important;
  gap: var(--tw-sp-8) !important;
  grid-column: 1 / -1;
  margin: var(--tw-sp-8) calc(-1 * var(--twf-pad)) calc(-1 * var(--twf-pad)) !important;
  padding: var(--tw-sp-16) var(--twf-pad) !important;
  border-top: 1px solid var(--tw-border) !important;
  background: var(--tw-bg-raised) !important;
}
/* Footer buttons: Cancel then primary, one line, same height. */
:is(.oh-modal__dialog-footer, .tw-modal-footer, .tw-modal__footer, .tw-drawer__footer) :is(.tw-btn, .oh-btn) {
  width: auto;
  min-width: 96px;
  margin: 0 !important;
}

/* Sizes: sm 480 / md 640 (create and edit forms) / lg 880 (detail, wide
   forms). Put data-tw-size="sm|md|lg" on a direct child of the dialog
   (usually the header), or the class on the dialog itself. */
#objectCreateModalTarget.oh-modal__dialog,
#objectUpdateModalTarget.oh-modal__dialog,
#dynamicCreateModalTarget.oh-modal__dialog,
.oh-modal__dialog.tw-modal--form,
.oh-modal__dialog.tw-modal--md,
.oh-modal__dialog:has(> [data-tw-size="md"]),
.oh-modal__dialog:has(> * > [data-tw-size="md"]) {
  width: min(var(--twf-modal-md), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--twf-modal-md) !important;
}
.oh-modal__dialog.tw-modal--sm,
.oh-modal__dialog:has(> [data-tw-size="sm"]),
.oh-modal__dialog:has(> * > [data-tw-size="sm"]) {
  width: min(var(--twf-modal-sm), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--twf-modal-sm) !important;
}
.oh-modal__dialog.tw-modal--lg,
.oh-modal__dialog:has(> [data-tw-size="lg"]),
.oh-modal__dialog:has(> * > [data-tw-size="lg"]) {
  width: min(var(--twf-modal-lg), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--twf-modal-lg) !important;
}
/* A requested size must beat the id-based create/update default and the
   720px detail default above (specificity), but never the phone sheet. */
@media (min-width: 481px) {
html .oh-modal .oh-modal__dialog.tw-modal--sm,
html .oh-modal .oh-modal__dialog:has(> [data-tw-size="sm"]),
html .oh-modal .oh-modal__dialog:has(> * > [data-tw-size="sm"]),
html #objectCreateModalTarget.oh-modal__dialog.tw-modal--sm,
html #objectCreateModalTarget.oh-modal__dialog:has(> [data-tw-size="sm"]),
html #objectCreateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="sm"]),
html #objectUpdateModalTarget.oh-modal__dialog.tw-modal--sm,
html #objectUpdateModalTarget.oh-modal__dialog:has(> [data-tw-size="sm"]),
html #objectUpdateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="sm"]),
html #dynamicCreateModalTarget.oh-modal__dialog.tw-modal--sm,
html #dynamicCreateModalTarget.oh-modal__dialog:has(> [data-tw-size="sm"]),
html #dynamicCreateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="sm"]) {
  width: min(var(--twf-modal-sm), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--twf-modal-sm) !important;
}
html .oh-modal .oh-modal__dialog.tw-modal--md,
html .oh-modal .oh-modal__dialog:has(> [data-tw-size="md"]),
html .oh-modal .oh-modal__dialog:has(> * > [data-tw-size="md"]),
html #objectCreateModalTarget.oh-modal__dialog.tw-modal--md,
html #objectCreateModalTarget.oh-modal__dialog:has(> [data-tw-size="md"]),
html #objectCreateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="md"]),
html #objectUpdateModalTarget.oh-modal__dialog.tw-modal--md,
html #objectUpdateModalTarget.oh-modal__dialog:has(> [data-tw-size="md"]),
html #objectUpdateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="md"]),
html #dynamicCreateModalTarget.oh-modal__dialog.tw-modal--md,
html #dynamicCreateModalTarget.oh-modal__dialog:has(> [data-tw-size="md"]),
html #dynamicCreateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="md"]) {
  width: min(var(--twf-modal-md), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--twf-modal-md) !important;
}
html .oh-modal .oh-modal__dialog.tw-modal--lg,
html .oh-modal .oh-modal__dialog:has(> [data-tw-size="lg"]),
html .oh-modal .oh-modal__dialog:has(> * > [data-tw-size="lg"]),
html #objectCreateModalTarget.oh-modal__dialog.tw-modal--lg,
html #objectCreateModalTarget.oh-modal__dialog:has(> [data-tw-size="lg"]),
html #objectCreateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="lg"]),
html #objectUpdateModalTarget.oh-modal__dialog.tw-modal--lg,
html #objectUpdateModalTarget.oh-modal__dialog:has(> [data-tw-size="lg"]),
html #objectUpdateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="lg"]),
html #dynamicCreateModalTarget.oh-modal__dialog.tw-modal--lg,
html #dynamicCreateModalTarget.oh-modal__dialog:has(> [data-tw-size="lg"]),
html #dynamicCreateModalTarget.oh-modal__dialog:has(> * > [data-tw-size="lg"]) {
  width: min(var(--twf-modal-lg), calc(100% - 2 * var(--tw-sp-16))) !important;
  max-width: var(--twf-modal-lg) !important;
}
}
/* Page scroll is locked while a modal is open (tw-forms.js sets the class). */
html.tw-modal-open,
html.tw-modal-open body {
  overflow: hidden !important;
}

/* Phones (<=480): a full-screen sheet. Header and footer respect the safe
   areas; footer buttons share one row (Cancel, then primary). Confirm
   dialogs stay small cards. */
@media (max-width: 480px) {
  .oh-modal.oh-modal--show:not(:has(> .oh-modal__dialog--confirm)) {
    padding: 0 !important;
  }
  .oh-modal > .oh-modal__dialog:not(.oh-modal__dialog--confirm),
  .oh-modal > #objectCreateModalTarget,
  .oh-modal > #objectUpdateModalTarget,
  .oh-modal > #dynamicCreateModalTarget,
  .oh-modal > #genericModalBody {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .oh-modal--show > .oh-modal__dialog:not(.oh-modal__dialog--confirm) {
    animation-name: twf-sheet-in;
  }
  .oh-modal__dialog:not(.oh-modal__dialog--confirm) .oh-modal__dialog-header {
    padding-top: max(var(--tw-sp-12), env(safe-area-inset-top)) !important;
  }
  .oh-modal__dialog:not(.oh-modal__dialog--confirm) .oh-modal__dialog-footer,
  .oh-modal__dialog:not(.oh-modal__dialog--confirm) .oh-modal__dialog-body :is(.tw-modal-footer, .tw-leave-form__footer),
  .oh-modal__dialog:not(.oh-modal__dialog--confirm) .oh-modal__dialog-body form > .tw-form-actions:last-child {
    padding-bottom: max(var(--tw-sp-16), env(safe-area-inset-bottom)) !important;
  }
  :is(.oh-modal__dialog-footer, .tw-modal-footer, .tw-leave-form__footer, .oh-modal__dialog-body .tw-form-actions, .tw-drawer__footer) {
    flex-direction: row !important;
    align-items: center !important;
  }
  :is(.oh-modal__dialog-footer, .tw-modal-footer, .tw-leave-form__footer, .oh-modal__dialog-body .tw-form-actions, .tw-drawer__footer) > :is(.tw-btn, .oh-btn, button, a) {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    min-height: var(--tw-hit) !important;
  }
  .oh-modal__dialog--confirm {
    width: calc(100vw - 2 * var(--tw-sp-16)) !important;
  }
}
@keyframes twf-sheet-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ── 5.2 Drawers (.tw-drawer, legacy .oh-activity-sidebar) ────────────── */
.tw-drawer {
  max-width: 100vw;
  overscroll-behavior: contain;
}
.tw-drawer--sm { width: min(var(--twf-modal-sm), 100vw); }
.tw-drawer--lg { width: min(var(--twf-modal-lg), 100vw); }
.tw-drawer__header {
  flex: none;
  min-height: 60px;
  padding: var(--tw-sp-12) var(--tw-sp-12) var(--tw-sp-12) var(--twf-pad);
  padding-top: max(var(--tw-sp-12), env(safe-area-inset-top));
}
.tw-drawer__title {
  margin: 0;
  font: var(--tw-font-section);
  color: var(--tw-fg);
}
.tw-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--twf-pad);
  overscroll-behavior: contain;
}
.tw-drawer__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tw-sp-8);
  padding: var(--tw-sp-16) var(--twf-pad);
  padding-bottom: max(var(--tw-sp-16), env(safe-area-inset-bottom));
  border-top: 1px solid var(--tw-border);
  background: var(--tw-bg-raised);
}
.tw-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--tw-z-drawer) - 1);
  background: var(--tw-scrim);
}
.oh-activity-sidebar {
  max-width: 100vw;
  overscroll-behavior: contain;
}
@media (max-width: 480px) {
  .tw-drawer,
  .oh-activity-sidebar {
    width: 100vw !important;
  }
}

/* ── 5.3 Field layout ──────────────────────────────────────────────────── */
/* .tw-form-grid: one column on phones, two from 640px (modal md and wider,
   pages). .tw-field--wide spans both columns. */
.tw-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--twf-gap);
  align-items: start;
}
@media (min-width: 640px) {
  .tw-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tw-form-grid > :is(.tw-field--wide, .tw-form-grid__full, .tw-form-section, .tw-alert, .tw-form-errors, .tw-modal-footer, .tw-form-actions, .tw-date-range) {
    grid-column: 1 / -1;
  }
}
.tw-form-section {
  grid-column: 1 / -1;
  margin: var(--tw-sp-8) 0 var(--tw-sp-16);
  padding-top: var(--tw-sp-16);
  border-top: 1px solid var(--tw-border);
  font: var(--tw-font-card-title);
  color: var(--tw-fg);
}
.tw-form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.tw-field {
  display: flex;
  flex-direction: column;
  gap: var(--tw-sp-8);
  min-width: 0;
  margin: 0 0 var(--twf-gap);
  padding: 0;
  border: 0;
}
fieldset.tw-field > legend.tw-label {
  float: left;
  width: 100%;
  margin: 0 0 var(--tw-sp-8) !important;
  padding: 0;
}
fieldset.tw-field > legend.tw-label + * {
  clear: both;
}
.tw-label {
  display: block;
  margin: 0 !important;
  color: var(--tw-fg) !important;
  font: var(--tw-font-label) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* One required marker everywhere: a red asterisk after the label. */
.tw-label--required::after,
.oh-label.required-star::after,
.required-star::after {
  content: "*";
  margin-left: 2px;
  padding: 0 !important;
  color: var(--tw-danger-fg);
  font-weight: var(--tw-weight-medium);
}
.tw-field .tw-help {
  margin: 0;
  color: var(--tw-fg-muted) !important;
  font: var(--tw-font-caption) !important;
}
.tw-field-error {
  display: block !important;
  margin: 0 !important;
  color: var(--tw-danger-fg) !important;
  font: var(--tw-font-caption) !important;
}
.tw-field-error:empty { display: none !important; }
/* The rule above forces block; a field error marked hidden (the approvals
   drawer's "Add a reason to reject.") must stay hidden until JS shows it. */
.tw-field-error[hidden] { display: none !important; }
.tw-form-errors {
  margin: 0 0 var(--twf-gap);
  padding: var(--tw-sp-12) var(--tw-sp-16);
  border: 1px solid var(--tw-danger-fg);
  border-radius: var(--tw-radius-control);
  background: var(--tw-danger-bg);
  color: var(--tw-danger-fg);
  font: var(--tw-font-secondary);
}
.tw-form-errors > :last-child { margin-bottom: 0; }
.tw-form-errors ul { margin: 0; padding-left: var(--tw-sp-16); }

/* ── 5.4 Text inputs, textarea ─────────────────────────────────────────── */
.tw-input,
.tw-select,
.tw-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--twf-field-h) !important;
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-control) !important;
  background-color: var(--tw-bg-raised) !important;
  color: var(--tw-fg) !important;
  font-family: var(--tw-font-body) !important;
  font-size: var(--tw-body-size) !important;
  box-shadow: none;
  transition: border-color var(--tw-duration-fast) var(--tw-ease-out), box-shadow var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-input,
.tw-select {
  height: var(--twf-field-h);
  padding: 0 var(--tw-sp-12) !important;
}
.tw-input:hover:not(:disabled):not(:focus),
.tw-select:hover:not(:disabled):not(:focus),
.tw-textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--tw-ink-muted) !important;
}
.tw-input:focus,
.tw-select:focus,
.tw-textarea:focus {
  border-color: var(--tw-accent) !important;
  box-shadow: var(--twf-focus-halo) !important;
}
.tw-input::placeholder,
.tw-textarea::placeholder {
  color: var(--tw-fg-muted) !important;
}
.tw-field--error :is(.tw-input, .tw-select, .tw-textarea),
:is(.tw-input, .tw-select, .tw-textarea)[aria-invalid="true"] {
  border-color: var(--tw-danger-fg) !important;
}
.tw-field--error :is(.tw-input, .tw-select, .tw-textarea):focus {
  box-shadow: 0 0 0 3px var(--tw-danger-bg) !important;
}
.tw-textarea {
  display: block;
  min-height: 88px !important;
  padding: var(--tw-sp-8) var(--tw-sp-12) !important;
  line-height: var(--tw-leading-body);
  resize: vertical;
}
.tw-textarea[data-tw-autogrow] {
  max-height: 320px;
  overflow-y: auto;
  resize: none;
}
input.tw-input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* ── 5.5 Select: custom chevron; select2 (searchable) looks the same ──── */
.tw-select,
select.oh-select:not([multiple]),
.oh-modal__dialog-body select.form-control:not([multiple]),
.oh-modal__dialog-body select.oh-input:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: calc(var(--tw-sp-12) + 24px) !important;
  background-image: var(--twc-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--tw-sp-12) center !important;
  background-size: 16px 16px !important;
  text-overflow: ellipsis;
}
.tw-select[multiple],
.tw-select--multi {
  height: auto;
  padding: var(--tw-sp-8) !important;
  background-image: none !important;
}
.tw-select:has(option[value=""]:checked) {
  color: var(--tw-fg-muted) !important;
}
.tw-select option { color: var(--tw-fg); }
/* select2 single: same box, same chevron, muted placeholder. */
.select2-container {
  max-width: 100%;
}
.tw-field .select2-container,
.oh-modal__dialog-body .select2-container {
  width: 100% !important;
}
.select2-container.select2-container--default .select2-selection.select2-selection--single {
  display: flex !important;
  align-items: center;
  height: var(--twf-field-h) !important;
  min-height: var(--twf-field-h) !important;
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-control) !important;
  background: var(--tw-bg-raised) !important;
  transition: border-color var(--tw-duration-fast) var(--tw-ease-out), box-shadow var(--tw-duration-fast) var(--tw-ease-out);
}
.select2-container.select2-container--default .select2-selection.select2-selection--single:hover {
  border-color: var(--tw-ink-muted) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--tw-accent) !important;
  box-shadow: var(--twf-focus-halo) !important;
}
.select2-container .select2-selection:focus-visible {
  outline: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto;
  padding: 0 calc(var(--tw-sp-12) + 24px) 0 var(--tw-sp-12) !important;
  color: var(--tw-fg) !important;
  font-size: var(--tw-body-size) !important;
  line-height: calc(var(--twf-field-h) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--tw-fg-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  right: var(--tw-sp-12) !important;
  width: 16px !important;
  height: 100% !important;
  background: var(--tw-fg-muted);
  -webkit-mask: var(--twf-icon-chevron) center / 16px 16px no-repeat;
  mask: var(--twf-icon-chevron) center / 16px 16px no-repeat;
  transition: transform var(--tw-duration-fast) var(--tw-ease-out);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}
.select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: rotate(180deg);
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: var(--tw-sp-8);
  color: var(--tw-fg-muted);
}
.tw-field.tw-field--error .select2-container .select2-selection.select2-selection--single,
.tw-field.tw-field--error .select2-container .select2-selection.select2-selection--multiple {
  border-color: var(--tw-danger-fg) !important;
}
/* Dropdown: a floating menu, search on top for long lists. */
.select2-dropdown {
  overflow: hidden;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-control) !important;
  background: var(--tw-bg-raised) !important;
  box-shadow: var(--tw-shadow-menu, var(--tw-shadow-md)) !important;
}
.select2-dropdown--below { margin-top: var(--tw-sp-4); }
.select2-dropdown--above { margin-top: calc(-1 * var(--tw-sp-4)); }
.select2-search--dropdown {
  padding: var(--tw-sp-8) !important;
  border-bottom: 1px solid var(--tw-border);
}
.select2-search--dropdown .select2-search__field {
  height: var(--tw-control-h);
  padding: 0 var(--tw-sp-12) !important;
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-md) !important;
  outline: 0;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--tw-accent) !important;
  box-shadow: var(--twf-focus-halo);
}
.select2-results > .select2-results__options {
  max-height: 280px !important;
  padding: var(--tw-sp-4) !important;
}
.select2-results__option {
  display: flex;
  align-items: center;
  min-height: var(--tw-control-h) !important;
  padding: var(--tw-sp-8) var(--tw-sp-12) !important;
  border-radius: var(--tw-radius-sm);
  color: var(--tw-fg) !important;
  font-size: var(--tw-body-size) !important;
  line-height: var(--tw-leading-snug);
}
.select2-results__option[aria-disabled="true"] { color: var(--tw-fg-muted) !important; }
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted {
  background-color: var(--tw-surface) !important;
  color: var(--tw-fg) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: var(--tw-accent-bg) !important;
  color: var(--tw-accent) !important;
  font-weight: var(--tw-weight-medium);
}
.select2-container--default .select2-results__option[aria-selected="true"]::after,
.select2-container--default .select2-results__option--selected::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: var(--twf-icon-check) center / 16px 16px no-repeat;
  mask: var(--twf-icon-check) center / 16px 16px no-repeat;
}
.select2-results__message {
  color: var(--tw-fg-muted) !important;
}
/* Above modals and drawers. */
.select2-container--open {
  z-index: calc(var(--tw-z-modal) + 20) !important;
}

/* ── 5.6 Multi-select chips (select2 multiple) ─────────────────────────── */
.select2-container.select2-container--default .select2-selection.select2-selection--multiple {
  display: flex !important;
  align-items: center;
  min-height: var(--twf-field-h) !important;
  padding: 3px var(--tw-sp-8) !important;
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-control) !important;
  background: var(--tw-bg-raised) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-sp-4);
  margin: 0 !important;
  padding: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--tw-sp-4);
  height: 24px;
  margin: 0 !important;
  padding: 0 var(--tw-sp-4) 0 var(--tw-sp-8) !important;
  border: 0 !important;
  border-radius: var(--tw-radius-sm) !important;
  background: var(--tw-surface-2) !important;
  color: var(--tw-fg) !important;
  font-size: var(--tw-caption-size) !important;
  font-weight: var(--tw-weight-medium);
  line-height: 24px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px;
  background: transparent !important;
  color: var(--tw-fg-muted) !important;
  font-size: 14px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: var(--tw-border) !important;
  color: var(--tw-fg) !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  height: 24px;
  margin: 0 !important;
  font-size: var(--tw-body-size) !important;
}

/* ── 5.7 Date, time, date range (native pickers, shared look) ──────────── */
.tw-input--date,
.tw-input--time,
.oh-modal__dialog-body input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]),
.tw-field input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
  position: relative;
  padding-right: calc(var(--tw-sp-12) + 24px) !important;
  font-variant-numeric: tabular-nums;
  background-image: var(--twf-icon-calendar) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--tw-sp-12) center !important;
  background-size: 16px 16px !important;
  color-scheme: light;
}
.tw-input--time,
.oh-modal__dialog-body input[type="time"],
.tw-field input[type="time"] {
  background-image: var(--twf-icon-clock) !important;
}
/* The native indicator stays clickable but invisible over our icon. */
:is(.tw-input--date, .tw-input--time, .oh-modal__dialog-body input, .tw-field input)::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(var(--tw-sp-12) + 28px);
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
:is(.tw-input--date, .tw-input--time, .oh-modal__dialog-body input, .tw-field input)::-webkit-datetime-edit,
:is(.tw-input--date, .tw-input--time, .oh-modal__dialog-body input, .tw-field input)::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
/* Start and end side by side from 640px: .tw-date-range > .tw-date-range__part
   x 2, each holding a date field and (optionally) its segmented day part.
   Phones stack them so each segmented control keeps the full width. */
.tw-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--twf-gap);
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .tw-date-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tw-date-range__part {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── 5.8 Segmented control: one row, equal widths ─────────────────────── */
.tw-segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-auto-rows: minmax(calc(var(--twf-field-h) - 4px), auto);
  gap: 2px;
  padding: 2px;
  border-radius: var(--tw-radius-control);
  background: var(--tw-surface-2);
}
.tw-segmented__option {
  position: relative;
  display: flex !important;
  align-items: stretch;
  min-width: 0;
  margin: 0 !important;
  cursor: pointer;
}
.tw-segmented__option > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tw-segmented__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--tw-sp-8);
  border-radius: calc(var(--tw-radius-control) - 2px);
  color: var(--tw-fg-muted);
  font: var(--tw-font-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--tw-duration-fast) var(--tw-ease-out), color var(--tw-duration-fast) var(--tw-ease-out), box-shadow var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-segmented__option:hover > input:not(:checked) + .tw-segmented__label {
  color: var(--tw-fg);
}
.tw-segmented__option > input:checked + .tw-segmented__label {
  background: var(--tw-bg-raised);
  color: var(--tw-fg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--tw-border);
}
.tw-segmented__option > input:focus-visible + .tw-segmented__label {
  outline: var(--tw-focus-width) solid var(--tw-focus-ring);
  outline-offset: 1px;
}
.tw-segmented__option > input:disabled + .tw-segmented__label {
  opacity: 0.5;
  cursor: not-allowed;
}
.tw-field--error .tw-segmented {
  box-shadow: inset 0 0 0 1px var(--tw-danger-fg);
}
@media (max-width: 389px) {
  .tw-segmented { grid-auto-flow: row; }
}

/* ── 5.9 Radio cards and choice lists ──────────────────────────────────── */
.tw-radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--tw-sp-8);
}
.tw-radio-card {
  position: relative;
  display: flex !important;
  align-items: flex-start;
  gap: var(--tw-sp-12);
  min-height: var(--tw-hit);
  margin: 0 !important;
  padding: var(--tw-sp-12) var(--tw-sp-16);
  border: 1px solid var(--tw-border-strong);
  border-radius: var(--tw-radius-control);
  background: var(--tw-bg-raised);
  cursor: pointer;
  transition: border-color var(--tw-duration-fast) var(--tw-ease-out), background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-radio-card:hover { border-color: var(--tw-ink-muted); }
.tw-radio-card > input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--tw-accent);
}
.tw-radio-card__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--tw-fg);
  font: var(--tw-font-label);
}
.tw-radio-card__desc {
  color: var(--tw-fg-muted);
  font: var(--tw-font-caption);
}
.tw-radio-card:has(> input:checked) {
  border-color: var(--tw-accent);
  background: var(--tw-accent-bg);
  box-shadow: inset 0 0 0 1px var(--tw-accent);
}
.tw-radio-card:has(> input:focus-visible) {
  outline: var(--tw-focus-width) solid var(--tw-focus-ring);
  outline-offset: 2px;
}
.tw-choice-list {
  display: flex;
  flex-direction: column;
}
.tw-choice-list .tw-check { min-height: var(--tw-control-h); padding: var(--tw-sp-4) 0; }

/* ── 5.10 Checkbox and switch ──────────────────────────────────────────── */
.tw-check {
  display: flex !important;
  align-items: flex-start;
  gap: var(--tw-sp-12);
  margin: 0 !important;
  color: var(--tw-fg);
  font-size: var(--tw-body-size);
  font-weight: var(--tw-weight-regular);
  cursor: pointer;
}
.tw-check > input[type="checkbox"],
.tw-check > input[type="radio"],
.tw-checkbox {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0 !important;
  accent-color: var(--tw-accent);
  cursor: pointer;
}
.tw-check__text { display: flex; flex-direction: column; gap: 2px; }
.tw-check__label { font-weight: var(--tw-weight-medium); }
.tw-switch-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-sp-16);
  min-height: var(--tw-hit);
}
.tw-switch-field__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tw-switch {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 36px;
  height: 20px;
}
.tw-switch > input,
.tw-switch__input {
  position: absolute !important;
  inset: -12px -4px;
  z-index: 1;
  width: calc(100% + 8px) !important;
  height: calc(100% + 24px) !important;
  margin: 0 !important;
  opacity: 0;
  cursor: pointer;
}
.tw-switch__track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--tw-border-strong);
  transition: background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tw-white);
  box-shadow: var(--tw-shadow-xs);
  transition: transform var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-switch > input:checked + .tw-switch__track { background: var(--tw-accent); }
.tw-switch > input:checked + .tw-switch__track::after { transform: translateX(16px); }
.tw-switch > input:focus-visible + .tw-switch__track {
  outline: var(--tw-focus-width) solid var(--tw-focus-ring);
  outline-offset: 2px;
}
.tw-switch > input:disabled + .tw-switch__track { opacity: 0.5; }

/* ── 5.11 Person picker: avatar + name chip, "Change" action ──────────── */
.tw-person-picker {
  position: relative;
  min-width: 0;
}
.tw-person-picker__select { display: none !important; }
.tw-person-picker__field {
  display: flex;
  align-items: center;
  gap: var(--tw-sp-8);
  width: 100%;
  min-height: var(--tw-hit);
  margin: 0;
  padding: var(--tw-sp-4) var(--tw-sp-4) var(--tw-sp-4) var(--tw-sp-8);
  border: 1px solid var(--tw-border-strong);
  border-radius: var(--tw-radius-control);
  background: var(--tw-bg-raised);
  color: var(--tw-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--tw-duration-fast) var(--tw-ease-out), box-shadow var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-person-picker__field:hover { border-color: var(--tw-ink-muted); }
.tw-person-picker__field:focus-visible,
.tw-person-picker--open .tw-person-picker__field {
  border-color: var(--tw-accent);
  outline: 0;
  box-shadow: var(--twf-focus-halo);
}
.tw-field--error .tw-person-picker__field { border-color: var(--tw-danger-fg); }
.tw-person-picker__avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tw-avatar-bg);
}
.tw-person-picker__avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tw-fg-muted);
  font-size: 16px;
}
.tw-person-picker__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: var(--tw-leading-snug);
}
.tw-person-picker__name {
  overflow: hidden;
  color: var(--tw-fg);
  font-size: var(--tw-body-size);
  font-weight: var(--tw-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tw-person-picker__meta {
  overflow: hidden;
  color: var(--tw-fg-muted);
  font: var(--tw-font-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tw-person-picker__meta:empty { display: none; }
.tw-person-picker__placeholder {
  flex: 1 1 auto;
  color: var(--tw-fg-muted);
  font-size: var(--tw-body-size);
}
.tw-person-picker__change {
  flex: none;
  padding: 0 var(--tw-sp-12);
  border-radius: var(--tw-radius-md);
  color: var(--tw-link, var(--tw-accent));
  font-size: var(--tw-label-size);
  font-weight: var(--tw-weight-medium);
  line-height: 32px;
}
.tw-person-picker__field:hover .tw-person-picker__change { background: var(--tw-accent-bg); }
.tw-person-picker__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: var(--tw-sp-8);
  background: var(--tw-fg-muted);
  -webkit-mask: var(--twf-icon-chevron) center / 16px 16px no-repeat;
  mask: var(--twf-icon-chevron) center / 16px 16px no-repeat;
}
.tw-person-picker__menu {
  position: absolute;
  top: calc(100% + var(--tw-sp-4));
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-control);
  background: var(--tw-bg-raised);
  box-shadow: var(--tw-shadow-menu, var(--tw-shadow-md));
}
.tw-person-picker__menu[hidden] { display: none; }
.tw-person-picker__search {
  position: relative;
  flex: none;
  padding: var(--tw-sp-8);
  border-bottom: 1px solid var(--tw-border);
}
.tw-person-picker__search ion-icon {
  position: absolute;
  top: 50%;
  left: calc(var(--tw-sp-8) + var(--tw-sp-12));
  color: var(--tw-fg-muted);
  font-size: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.tw-person-picker__search input {
  width: 100%;
  height: var(--tw-control-h) !important;
  min-height: 0 !important;
  padding: 0 var(--tw-sp-12) 0 calc(var(--tw-sp-12) + 24px) !important;
  border: 1px solid var(--tw-border-strong) !important;
  border-radius: var(--tw-radius-md) !important;
  background: var(--tw-bg-raised) !important;
  font-size: var(--tw-body-size);
  outline: 0 !important;
}
.tw-person-picker__search input:focus {
  border-color: var(--tw-accent) !important;
  box-shadow: var(--twf-focus-halo) !important;
}
.tw-person-picker__list {
  max-height: 280px;
  margin: 0;
  padding: var(--tw-sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.tw-person-picker__option {
  display: flex;
  align-items: center;
  gap: var(--tw-sp-12);
  min-height: var(--tw-hit);
  padding: var(--tw-sp-4) var(--tw-sp-8);
  border-radius: var(--tw-radius-sm);
  cursor: pointer;
}
.tw-person-picker__option[hidden] { display: none; }
.tw-person-picker__option:hover,
.tw-person-picker__option.is-active {
  background: var(--tw-surface);
}
.tw-person-picker__option[aria-selected="true"] .tw-person-picker__name { color: var(--tw-accent); }
.tw-person-picker__option[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: var(--tw-accent);
  -webkit-mask: var(--twf-icon-check) center / 16px 16px no-repeat;
  mask: var(--twf-icon-check) center / 16px 16px no-repeat;
}
.tw-person-picker__empty {
  margin: 0;
  padding: var(--tw-sp-12);
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}
@media (max-width: 480px) {
  .tw-person-picker__list { max-height: 50dvh; }
}

/* ── 5.12 File drop zone ───────────────────────────────────────────────── */
/* [data-tw-dropzone] also resets the older announcement drop zone styles
   that share the class name (tendworks.css). */
.tw-dropzone[data-tw-dropzone],
.tw-dropzone[data-tw-dropzone]:hover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--tw-sp-8);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  cursor: auto;
}
.tw-dropzone[data-tw-dropzone] .tw-dropzone__icon {
  font-size: 20px;
  color: var(--tw-fg-muted);
}
.tw-dropzone[data-tw-dropzone] .tw-dropzone__text {
  margin: 0;
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
}
.tw-dropzone > input[type="file"] {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100% !important;
  height: 88px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  cursor: pointer;
}
.tw-dropzone__prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tw-sp-4);
  min-height: 88px;
  padding: var(--tw-sp-12) var(--tw-sp-16);
  border: 1px dashed var(--tw-border-strong);
  border-radius: var(--tw-radius-control);
  background: var(--tw-surface);
  color: var(--tw-fg-muted);
  font: var(--tw-font-secondary);
  text-align: center;
  transition: border-color var(--tw-duration-fast) var(--tw-ease-out), background-color var(--tw-duration-fast) var(--tw-ease-out);
}
.tw-dropzone__icon {
  display: inline-flex;
  color: var(--tw-fg-muted);
  font-size: 20px;
}
.tw-dropzone__action {
  color: var(--tw-link, var(--tw-accent));
  font-weight: var(--tw-weight-medium);
}
.tw-dropzone__types {
  color: var(--tw-fg-muted);
  font: var(--tw-font-caption);
}
.tw-dropzone:hover .tw-dropzone__prompt,
.tw-dropzone.is-dragover .tw-dropzone__prompt {
  border-color: var(--tw-accent);
  background: var(--tw-accent-bg);
}
.tw-dropzone.is-dragover .tw-dropzone__prompt { border-style: solid; }
.tw-dropzone > input[type="file"]:focus-visible + .tw-dropzone__prompt {
  outline: var(--tw-focus-width) solid var(--tw-focus-ring);
  outline-offset: 2px;
}
.tw-field--error .tw-dropzone__prompt,
.tw-dropzone.is-invalid .tw-dropzone__prompt {
  border-color: var(--tw-danger-fg);
}
.tw-dropzone__files {
  display: flex;
  flex-direction: column;
  gap: var(--tw-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tw-dropzone__files:empty { display: none; }
.tw-dropzone__file {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tw-sp-8);
  min-height: var(--tw-hit);
  padding: var(--tw-sp-4) var(--tw-sp-4) var(--tw-sp-4) var(--tw-sp-12);
  overflow: hidden;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-control);
  background: var(--tw-bg-raised);
  font: var(--tw-font-secondary);
}
.tw-dropzone__file > ion-icon {
  flex: none;
  color: var(--tw-fg-muted);
  font-size: 18px;
}
.tw-dropzone__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--tw-fg);
  font-weight: var(--tw-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tw-dropzone__size {
  flex: none;
  color: var(--tw-fg-muted);
  font-variant-numeric: tabular-nums;
}
.tw-dropzone__remove,
.tw-dropzone__clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--tw-sp-4);
  min-width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 var(--tw-sp-8);
  border: 0;
  border-radius: var(--tw-radius-md);
  background: transparent;
  color: var(--tw-fg-muted);
  font: var(--tw-font-label);
  cursor: pointer;
}
.tw-dropzone__remove:hover,
.tw-dropzone__clear:hover {
  background: var(--tw-surface);
  color: var(--tw-danger-fg);
}
.tw-dropzone__remove ion-icon { font-size: 18px; }
.tw-dropzone__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--tw-accent);
  transition: width var(--tw-duration-fast) linear;
}
/* With a file chosen (single file), the list replaces the prompt; "Replace"
   reopens the picker. */
.tw-dropzone.has-files:not(.is-multiple) > .tw-dropzone__prompt {
  display: none;
}
.tw-dropzone.has-files:not(.is-multiple) > input[type="file"] {
  height: 0 !important;
  pointer-events: none;
}
.tw-dropzone__error {
  margin: 0;
  color: var(--tw-danger-fg);
  font: var(--tw-font-caption);
}
.tw-dropzone__error:empty { display: none; }

/* ── 5.13 Legacy fields inside modals: same rhythm and focus ───────────── */
.oh-modal__dialog-body .oh-label__info {
  display: flex;
  align-items: center;
  gap: var(--tw-sp-4);
  margin-bottom: var(--tw-sp-8);
}
.oh-modal__dialog-body .oh-label__info .oh-label { margin: 0 !important; }
.oh-modal__dialog-body :is(input.oh-input, select.oh-select, textarea.oh-input, .form-control):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
  border-color: var(--tw-accent) !important;
  outline: 0 !important;
  box-shadow: var(--twf-focus-halo) !important;
}
.oh-modal__dialog-body ul.errorlist {
  margin-top: var(--tw-sp-4) !important;
}
@media (max-width: 480px) {
  .oh-modal__dialog-body :is(input.oh-input, select.oh-select, input.form-control, select.form-control):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    height: var(--tw-hit);
    min-height: var(--tw-hit) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oh-modal--show > .oh-modal__dialog,
  .tw-segmented__label,
  .tw-switch__track,
  .tw-switch__track::after,
  .tw-dropzone__prompt,
  .tw-person-picker__field {
    animation: none !important;
    transition: none !important;
  }
}

/* select2 showing its empty first option reads as a placeholder. */
.tw-select2--empty .select2-selection__rendered {
  color: var(--tw-fg-muted) !important;
}

/* A date with its day part right under it reads as one field. */
.tw-date-range__part > .tw-field:has(+ .tw-field--segmented) {
  margin-bottom: var(--tw-sp-8);
}

/* Form footer anywhere (pages too); inside a modal body it also sticks. */
.tw-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tw-sp-8);
  grid-column: 1 / -1;
  margin-top: var(--tw-sp-8);
}
.tw-generic-form { min-width: 0; }

/* Legacy scripts hide a field with $("[name=x]").parent().hide(): when that
   parent is the control wrapper, the whole field (label too) goes. */
.tw-field:has(> :is(.tw-control, .tw-select-wrap, .tw-dropzone)[style*="display: none"]) {
  display: none !important;
}

/* Cancel in shared form footers shows only when the form sits in a modal. */
.tw-modal-only { display: none !important; }
.oh-modal .tw-modal-only, .tw-drawer .tw-modal-only { display: inline-flex !important; }

/* Phone sheets: the footer sits at the bottom of the sheet even when the
   form is short (body > form > grid become columns; footer margin-top auto). */
@media (max-width: 480px) {
  .oh-modal__dialog:not(.oh-modal__dialog--confirm) .oh-modal__dialog-body:has(.tw-modal-footer) {
    display: flex !important;
    flex-direction: column;
  }
  .oh-modal__dialog-body:has(.tw-modal-footer) > :is(form, .tw-generic-form),
  .oh-modal__dialog-body:has(.tw-modal-footer) > form > .tw-generic-form,
  .oh-modal__dialog-body .tw-form-grid:has(> .tw-modal-footer) {
    display: flex !important;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
  }
  .oh-modal__dialog-body .tw-modal-footer {
    margin-top: auto !important;
  }
}

/* Forms foundation: focus parked on a modal title or dialog by tw-forms.js
   (tabindex="-1", programmatic only) draws no ring. Buttons, links and fields
   keep theirs. */
.oh-modal__dialog-title[tabindex="-1"]:focus,
.tw-modal__title[tabindex="-1"]:focus,
.oh-modal__dialog[tabindex="-1"]:focus,
.oh-modal [tabindex="-1"]:focus:not(:focus-visible) {
  outline: none !important; /* tw-tokens.css sets the global ring with !important */
}

/* Row action menu used by legacy list rows (rotating shifts and work types):
   anchors and one-button forms stack as menu links. */
.tw-row-kebab__list { display: flex; flex-direction: column; min-width: 9rem; }
.tw-row-kebab__list form { margin: 0; width: 100%; }
.tw-row-kebab__list .oh-dropdown__link { display: block; width: 100%; padding: var(--tw-space-2) var(--tw-space-3); border: 0; background: none; text-align: left; cursor: pointer; }
/* ── Shared fixes from the UX review (shell wave) ─────────────────────── */

/* Date inputs print dd/mm/yyyy (tw-forms.js part 6). The native field keeps
   the value and the picker; its own text is hidden under the face. */
.tw-date {
  position: relative;
  display: block;
  width: 100%;
}
.tw-date--inline {
  display: inline-block;
  width: auto;
}
.tw-date__native::-webkit-datetime-edit {
  opacity: 0;
}
.tw-date__face {
  position: absolute;
  top: 1px;
  bottom: 1px;
  inset-inline: 1px 40px;
  display: flex;
  align-items: center;
  padding-inline-start: var(--tw-sp-12);
  overflow: hidden;
  background: var(--tw-surface);
  border-radius: var(--tw-radius-control);
  color: var(--tw-fg);
  font: inherit;
  white-space: nowrap;
  pointer-events: none;
}
.tw-date__face--empty {
  color: var(--tw-fg-muted);
}
.tw-date__face--typing {
  color: var(--tw-accent);
}
.tw-date__face--disabled {
  background: transparent;
  opacity: 0.6;
}

/* Status chip icon (tw_status): the icon replaces the badge dot. */
.tw-badge--icon::before {
  content: none;
}
.tw-badge--icon ion-icon {
  flex: none;
  font-size: 14px;
}

/* Search field in a toolbar: the text always starts after the icon (the
   icon overlapped the placeholder on fields without .oh-input__icon). */
.oh-input__search-group:has(> .oh-input-group__icon--left, > form > .oh-input-group__icon--left) .oh-input,
.oh-input__search-group:has(> .oh-input-group__icon--left, > form > .oh-input-group__icon--left) input[type="search"],
.oh-input__search-group:has(> .oh-input-group__icon--left, > form > .oh-input-group__icon--left) input[type="text"] {
  padding-inline-start: calc(var(--tw-sp-12) + var(--tw-icon-size) + var(--tw-sp-8)) !important;
}

/* Keyboard focus only: a mouse click or page load never draws the heavy
   ring on a search box; Tab does. */
.oh-input__search-group .oh-input:focus:not(:focus-visible),
.oh-input__search-group input[type="search"]:focus:not(:focus-visible),
.tw-toolbar__search input:focus:not(:focus-visible) {
  box-shadow: none !important;
  outline: none !important;
}

/* "Filter" is a secondary action everywhere (UX review): the submit inside
   every filter dropdown looks like .tw-btn--secondary, never a second primary. */
.tw-btn.filterButton,
.oh-btn.filterButton,
button#filterSubmit,
.oh-dropdown__filter-footer .tw-btn--primary,
.oh-dropdown__filter-footer .oh-btn--secondary,
.oh-dropdown__filter-footer .oh-btn--primary {
  --twc-btn-bg: var(--tw-bg-raised);
  --twc-btn-fg: var(--tw-fg);
  --twc-btn-border: var(--tw-border-strong);
  background-color: var(--tw-bg-raised) !important;
  background-image: none !important;
  border: 1px solid var(--tw-border-strong) !important;
  color: var(--tw-fg) !important;
}
.tw-btn.filterButton:hover,
.oh-btn.filterButton:hover,
button#filterSubmit:hover,
.oh-dropdown__filter-footer .tw-btn--primary:hover,
.oh-dropdown__filter-footer .oh-btn--secondary:hover,
.oh-dropdown__filter-footer .oh-btn--primary:hover {
  background-color: var(--tw-surface) !important;
  background-image: none !important;
  border-color: var(--tw-border-ink) !important;
}

/* Any search field whose icon is a direct sibling (tw-leave-search, tw-emp-search,
   tw-toolbar__search, ...): the text starts after the icon. Area rules lost to
   the base .tw-input padding, so the icon sat on the placeholder. */
:where(div, span, label, form):not(.tw-appbar-search):has(> ion-icon[name^="search"]) > input:is([type="search"], [type="text"]) {
  padding-inline-start: calc(var(--tw-sp-12) + var(--tw-icon-size) + var(--tw-sp-8)) !important;
}