/* ===================================================
   TaskMasters — UI Components v2
   Universal modal, form, input, button, and calendar
   components. Loaded by head.php after tokens.css.
   Do NOT import per-page — this is a global stylesheet.
   =================================================== */

/* ── VS2 dashboard card shell ── */
.vs2-card {
  --vs2-card-accent: var(--tm-emerald);
  --vs2-card-tab-fg: var(--tm-navy);
  background: #ffffff;
  border: none;
  border-radius: var(--tm-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(10, 31, 61, 0.07), 0 1px 4px rgba(10, 31, 61, 0.04);
}

.vs2-card--emerald { --vs2-card-accent: var(--tm-emerald); }
.vs2-card--gold    { --vs2-card-accent: var(--tm-gold); }
.vs2-card--navy    { --vs2-card-accent: var(--tm-navy); --vs2-card-tab-fg: #ffffff; }

.vs2-card--dark {
  --vs2-card-accent: var(--tm-emerald);
  --vs2-card-tab-fg: var(--tm-navy);
  background: var(--tm-navy);
  box-shadow: 0 4px 20px rgba(10, 31, 61, 0.18), 0 1px 6px rgba(10, 31, 61, 0.10);
}

.vs2-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 18px 12px 0;
  flex-wrap: wrap;
}

.vs2-card__head > :not(.vs2-card__tab) {
  margin-top: 12px;
}

.vs2-card__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 16px 24px 14px 18px;
  background: var(--vs2-card-accent);
  color: var(--vs2-card-tab-fg);
  border-radius: var(--tm-radius-lg) 0 var(--tm-radius-lg) 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.vs2-card__icon {
  width: auto;
  height: auto;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.vs2-card__tab .vs2-card__icon { color: inherit; }
.vs2-card__icon--emerald { background: transparent; color: var(--tm-emerald); }
.vs2-card__icon--gold    { background: transparent; color: var(--tm-gold); }
.vs2-card__icon--navy    { background: transparent; color: rgba(255,255,255,0.9); }

.vs2-card__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: inherit;
  letter-spacing: 0.01em;
  flex: none;
  margin: 0;
}

.vs2-card__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--tm-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tm-ink-500);
  background: none;
  border: 1px solid var(--tm-line-200);
  cursor: pointer;
  text-decoration: none;
  transition: 150ms ease;
  white-space: nowrap;
  margin-left: auto;
}

.vs2-card__action:hover { background: var(--tm-mist-100); color: var(--tm-navy); border-color: var(--tm-line-300); }

.vs2-card--dark .vs2-card__action {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.15);
}

.vs2-card--dark .vs2-card__action:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

.vs2-card__head > div[style*='display:flex'] {
  margin-top: 12px;
}

.vs2-card__body { padding: 18px; }
.vs2-card--dark .vs2-card__body { padding: 18px; }

/* ── Modal overlay ── */
.jp2-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 61, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease;
}

.jp2-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── Modal card ──
   Customise per-page via CSS custom property:
     <div class="jp2-modal" style="--jp2-modal-maxw: 900px">
   Or a page stylesheet: .jp2-modal { --jp2-modal-maxw: 480px; }
   Modifier shorthands: .jp2-modal--sm / --lg / --xl / --full
   ── */
.jp2-modal {
  --jp2-modal-maxw: 700px;
  background: var(--tm-cream);
  border-radius: var(--tm-radius-xl);
  width: 100%;
  max-width: var(--jp2-modal-maxw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--tm-shadow-hero);
  transform: translateY(16px);
  transition: transform 260ms cubic-bezier(0.34, 1.2, 0.64, 1);
  overflow: hidden;
  position: relative;
}

.jp2-modal-overlay.is-open .jp2-modal { transform: translateY(0); }

.jp2-modal--sm   { --jp2-modal-maxw: 480px; }
.jp2-modal--lg   { --jp2-modal-maxw: 900px; }
.jp2-modal--xl   { --jp2-modal-maxw: 1100px; }
.jp2-modal--full { --jp2-modal-maxw: 1320px; }

.jp2-modal__head {
  background: var(--tm-navy);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.jp2-modal__head.is-success { background: var(--tm-emerald-deep); }
.jp2-modal__head.is-error   { background: #991B1B; }

.jp2-modal__title {
  font-family: var(--tm-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tm-cream);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}

.jp2-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(250, 250, 245, 0.10);
  border-radius: var(--tm-radius-sm);
  color: var(--tm-cream);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}

.jp2-modal__close:hover { background: rgba(250, 250, 245, 0.20); }

/* ── Step progress bar ── */
.jp2-steps {
  background: var(--tm-navy-2);
  padding: 13px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.jp2-steps__track {
  flex: 1;
  height: 2px;
  background: rgba(250, 250, 245, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.jp2-steps__bar {
  height: 100%;
  background: var(--tm-emerald);
  border-radius: 999px;
  transition: width 300ms ease;
}

.jp2-steps__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(250, 250, 245, 0.50);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Modal body / foot ── */

/* When a <form> wraps __body + __foot, make it participate in the flex column */
.jp2-modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.jp2-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 20px;
}

.jp2-modal__foot {
  padding: 18px 28px;
  border-top: 1px solid var(--tm-line-200);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  background: #ffffff;
}

.jp2-modal__foot-spacer { flex: 1; }

/* ── Form steps ── */
.jp2-step         { display: none; }
.jp2-step.is-active { display: block; }
.jp2-general-step { display: none; }
.jp2-general-step.is-active { display: block; }

.jp2-step__heading {
  font-family: var(--tm-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tm-navy);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

/* ── Form layout ── */
.jp2-form-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.jp2-form-row--2   { grid-template-columns: 1fr 1fr; }
.jp2-form-row--3-1 { grid-template-columns: 3fr 1fr; }

.jp2-form-section {
  padding: 18px;
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #fafaf8 100%);
  margin-bottom: 18px;
}

.jp2-form-section__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.jp2-form-section__head i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 157, 110, 0.12);
  color: var(--tm-emerald-deep);
  flex-shrink: 0;
}

.jp2-form-section__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--tm-navy);
}

.jp2-form-section__sub {
  margin: 4px 0 0;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--tm-ink-500);
}

/* ── Form fields ── */
.jp2-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
  position: relative;
}

.jp2-field:last-child { margin-bottom: 0; }

.jp2-field__label {
  font-size: 0.795rem;
  font-weight: 600;
  color: var(--tm-ink-700);
  display: flex;
  align-items: center;
  gap: 5px;
}

.jp2-field__label .req { color: var(--tm-emerald); }

.jp2-field__input,
.jp2-field__select,
.jp2-field__textarea {
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--tm-line-300);
  border-radius: var(--tm-radius-md);
  font-family: var(--tm-font-body);
  font-size: 0.9rem;
  color: var(--tm-ink-900);
  background: #ffffff;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.jp2-field__input,
.jp2-field__select { height: 44px; }

.jp2-field__textarea {
  padding: 11px 14px;
  height: auto;
  resize: vertical;
  line-height: 1.55;
}

.jp2-field__input:focus,
.jp2-field__select:focus,
.jp2-field__textarea:focus {
  border-color: var(--tm-emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.12);
}

.jp2-field__input.is-invalid,
.jp2-field__select.is-invalid,
.jp2-field__textarea.is-invalid {
  border-color: #DC2626;
}

.jp2-field__hint {
  font-size: 0.75rem;
  color: var(--tm-ink-500);
}

.jp2-field__file {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--tm-line-300);
  border-radius: var(--tm-radius-md);
  font-family: var(--tm-font-body);
  font-size: 0.875rem;
  color: var(--tm-ink-700);
  background: #ffffff;
  cursor: pointer;
}

.jp2-field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ── Native date input ── */
input[type="date"].jp2-field__input {
  cursor: pointer;
  color-scheme: light;
}

input[type="date"].jp2-field__input::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
  border-radius: 3px;
  padding: 2px;
  transition: opacity 150ms ease, filter 150ms ease;
}

input[type="date"].jp2-field__input:hover::-webkit-calendar-picker-indicator,
input[type="date"].jp2-field__input:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
  filter: invert(48%) sepia(79%) saturate(570%) hue-rotate(118deg) brightness(96%) contrast(101%);
}

/* ── File upload zone ── */
.jp2-file-field { position: relative; }

.jp2-file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jp2-file-field__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 22px 16px 18px;
  border: 1.5px dashed var(--tm-line-300);
  border-radius: var(--tm-radius-md);
  background: var(--tm-cream);
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.jp2-file-field__zone:hover {
  border-color: var(--tm-emerald);
  background: rgba(15, 157, 110, 0.04);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.07);
}

.jp2-file-field__input:focus-visible + .jp2-file-field__zone {
  outline: none;
  border-color: var(--tm-emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.12);
}

.jp2-file-field__input.is-invalid + .jp2-file-field__zone {
  border-color: #DC2626;
  background: #FEF2F2;
}

.jp2-file-field__zone i {
  font-size: 1.9rem;
  color: var(--tm-emerald);
  margin-bottom: 2px;
}

.jp2-file-field__cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tm-navy);
}

.jp2-file-field__hint {
  font-size: 0.72rem;
  color: var(--tm-ink-500);
}

.jp2-file-field__name {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(15, 157, 110, 0.07);
  border: 1px solid rgba(15, 157, 110, 0.22);
  border-radius: var(--tm-radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tm-emerald-deep);
  word-break: break-all;
}

.jp2-file-field__name.has-file { display: flex; }
.jp2-file-field__name i { font-size: 0.95rem; flex-shrink: 0; }

/* ── Pill option group ── */
.jp2-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jp2-pill-option {
  position: relative;
  display: inline-flex;
}

.jp2-pill-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jp2-pill-option__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--tm-radius-pill);
  border: 1px solid var(--tm-line-300);
  background: #ffffff;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tm-ink-700);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.jp2-pill-option__input:checked + .jp2-pill-option__label {
  background: rgba(15, 157, 110, 0.10);
  border-color: var(--tm-emerald);
  color: var(--tm-emerald-deep);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.10);
}

.jp2-pill-option__input:focus-visible + .jp2-pill-option__label {
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.14);
}

/* ── Validation tooltips (float below field, no layout shift) ── */
.jp2-email-msg,
.jp2-age-msg,
.jp2-contact-msg {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  z-index: 20;
  font-size: 0.775rem;
  display: none;
  border-radius: var(--tm-radius-sm);
  line-height: 1.45;
}

.jp2-email-msg.is-error,
.jp2-age-msg.is-error,
.jp2-contact-msg.is-error {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #991B1B;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  padding: 8px 11px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(10, 31, 61, 0.10), 0 1px 3px rgba(0,0,0,0.06);
}

.jp2-email-msg.is-ok,
.jp2-age-msg.is-ok,
.jp2-contact-msg.is-ok {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tm-emerald-deep);
  background: #F0FDF9;
  border: 1px solid rgba(15, 157, 110, 0.28);
  padding: 7px 11px;
  box-shadow: 0 4px 14px rgba(10, 31, 61, 0.10), 0 1px 3px rgba(0,0,0,0.06);
}

.jp2-age-msg.is-info {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1E40AF;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  padding: 7px 11px;
  box-shadow: 0 4px 14px rgba(10, 31, 61, 0.10), 0 1px 3px rgba(0,0,0,0.06);
}

.jp2-email-msg.is-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tm-ink-500);
  background: #ffffff;
  border: 1px solid var(--tm-line-200);
  padding: 6px 11px;
  box-shadow: 0 4px 14px rgba(10, 31, 61, 0.08), 0 1px 3px rgba(0,0,0,0.05);
}

.jp2-email-msg i,
.jp2-age-msg i,
.jp2-contact-msg i { flex-shrink: 0; font-size: 0.85rem; }

.jp2-recaptcha-error {
  display: none;
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: #DC2626;
}

/* ── Check groups (radio / checkbox) ── */
.jp2-check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.jp2-check-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}

.jp2-check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.jp2-check__input {
  width: 16px;
  height: 16px;
  accent-color: var(--tm-emerald);
  cursor: pointer;
  flex-shrink: 0;
}

.jp2-check__label {
  font-size: 0.875rem;
  color: var(--tm-ink-700);
  cursor: pointer;
}

/* ── Tags multiselect ── */
.jp2-tags-wrapper {
  border: 1px solid var(--tm-line-300);
  border-radius: var(--tm-radius-md);
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.jp2-tags-wrapper:focus-within {
  border-color: var(--tm-emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.12);
}

.jp2-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 6px;
}

.jp2-tags-chips:empty { display: none; }

.jp2-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  background: var(--tm-mist-100);
  border-radius: var(--tm-radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tm-ink-700);
}

.jp2-tag-chip.is-custom { background: var(--tm-warm); }

.jp2-tag-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  color: var(--tm-ink-500);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  transition: color 100ms ease;
}

.jp2-tag-chip__remove:hover { color: #DC2626; }

.jp2-tags-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--tm-ink-500);
  user-select: none;
  border-top: 1px solid transparent;
}

.jp2-tags-chips:not(:empty) + .jp2-tags-trigger {
  border-top-color: var(--tm-line-200);
}

.jp2-tags-dropdown {
  display: none;
  border-top: 1px solid var(--tm-line-200);
  max-height: 240px;
  overflow-y: auto;
}

.jp2-tags-dropdown.is-open { display: block; }

.jp2-tags-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tm-line-200);
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}

.jp2-tags-search i { font-size: 0.85rem; color: var(--tm-ink-500); }

.jp2-tags-search__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--tm-font-body);
  font-size: 0.875rem;
  color: var(--tm-ink-900);
  background: transparent;
}

.jp2-tags-add-custom {
  padding: 8px 14px;
  border-bottom: 1px solid var(--tm-line-200);
  display: none;
}

.jp2-tags-add-custom.is-visible { display: block; }

.jp2-tags-add-btn {
  background: none;
  border: none;
  font-family: var(--tm-font-body);
  font-size: 0.82rem;
  color: var(--tm-emerald);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.jp2-tags-list { padding: 6px 0; }

.jp2-tags-category__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 3px;
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tm-ink-500);
}

.jp2-tags-category__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jp2-tag-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background-color 100ms ease;
}

.jp2-tag-item:hover { background: var(--tm-mist-100); }
.jp2-tag-item.is-selected { background: rgba(15, 157, 110, 0.06); }

.jp2-tag-item__check {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--tm-line-300);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 100ms ease, background-color 100ms ease;
}

.jp2-tag-item.is-selected .jp2-tag-item__check {
  background: var(--tm-emerald);
  border-color: var(--tm-emerald);
}

.jp2-tag-item.is-selected .jp2-tag-item__check::after {
  content: '';
  width: 4px;
  height: 7px;
  border: 1.5px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.jp2-tag-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jp2-tag-item__name {
  font-size: 0.84rem;
  color: var(--tm-ink-700);
}

.jp2-tags-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--tm-line-200);
  font-size: 0.74rem;
  color: var(--tm-ink-500);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Alert box ── */
.jp2-alert {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--tm-radius-md);
  background: var(--tm-mist-100);
  border: 1px solid var(--tm-line-200);
  margin-bottom: 20px;
}

.jp2-alert i { font-size: 1rem; color: var(--tm-navy); flex-shrink: 0; margin-top: 1px; }

.jp2-alert__text {
  font-size: 0.855rem;
  color: var(--tm-ink-700);
  line-height: 1.55;
  margin: 0;
}

/* ── Review summary ── */
.jp2-summary {
  background: #ffffff;
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-md);
  padding: 16px;
  margin-bottom: 18px;
  font-size: 0.855rem;
  color: var(--tm-ink-700);
  line-height: 1.6;
}

/* ── Agree checkbox row ── */
.jp2-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
}

.jp2-agree__input {
  width: 16px;
  height: 16px;
  accent-color: var(--tm-emerald);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.jp2-agree__label {
  font-size: 0.845rem;
  color: var(--tm-ink-700);
  line-height: 1.55;
  cursor: pointer;
}

.jp2-recaptcha { margin: 16px 0; }

/* ── Buttons ── */
.jp2-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--tm-radius-sm);
  font-family: var(--tm-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1);
  white-space: nowrap;
}

.jp2-btn--primary {
  background: var(--tm-emerald);
  color: var(--tm-cream);
  border-color: var(--tm-emerald);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(15, 157, 110, 0.20);
}

.jp2-btn--primary:hover {
  background: var(--tm-emerald-deep);
  border-color: var(--tm-emerald-deep);
  box-shadow: 0 4px 20px rgba(15, 157, 110, 0.40), 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.jp2-btn--ghost {
  background: transparent;
  color: var(--tm-ink-700);
  border-color: var(--tm-line-300);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.jp2-btn--ghost:hover {
  color: var(--tm-navy);
  background: var(--tm-mist-100);
  border-color: var(--tm-ink-500);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.jp2-btn:active   { transform: translateY(0) scale(0.98); }
.jp2-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.jp2-btn i { font-size: 0.82rem; }

/* ── Submit overlay ── */
.jp2-submit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 245, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  z-index: 10;
}

.jp2-submit-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.jp2-submit-overlay__card {
  text-align: center;
  max-width: 300px;
  width: 100%;
}

.jp2-submit-overlay__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}

@keyframes jp2-spin { to { transform: rotate(360deg); } }

.jp2-submit-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--tm-line-200);
  border-top-color: var(--tm-emerald);
  border-radius: 50%;
  animation: jp2-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.jp2-submit-overlay__headline {
  font-family: var(--tm-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tm-navy);
  letter-spacing: -0.01em;
}

.jp2-submit-overlay__sub {
  font-size: 0.78rem;
  color: var(--tm-ink-500);
  margin-top: 2px;
}

.jp2-submit-progress {
  height: 3px;
  background: var(--tm-line-200);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.jp2-submit-progress__bar {
  height: 100%;
  background: var(--tm-emerald);
  border-radius: 999px;
  transition: width 400ms ease;
}

.jp2-submit-overlay__text {
  font-size: 0.82rem;
  color: var(--tm-ink-500);
}

/* ── Message enter / exit animations ── */
@keyframes jp2MsgIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes jp2MsgOut {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(-5px); }
}

.jp2-email-msg.is-error,
.jp2-email-msg.is-ok,
.jp2-email-msg.is-check,
.jp2-age-msg.is-error,
.jp2-age-msg.is-ok,
.jp2-age-msg.is-info,
.jp2-contact-msg.is-error,
.jp2-contact-msg.is-ok {
  animation: jp2MsgIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.jp2-email-msg.is-dismissing,
.jp2-age-msg.is-dismissing,
.jp2-contact-msg.is-dismissing {
  animation: jp2MsgOut 380ms ease forwards;
  pointer-events: none;
}

/* ── Question file upload with preview ── */
.jp2-qfile { position: relative; }

.jp2-qfile__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jp2-qfile__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 20px 16px 16px;
  border: 1.5px dashed var(--tm-line-300);
  border-radius: var(--tm-radius-md);
  background: var(--tm-cream);
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.jp2-qfile__zone:hover,
.jp2-qfile__zone.has-file {
  border-color: var(--tm-emerald);
  background: rgba(15, 157, 110, 0.04);
}

.jp2-qfile__zone.is-drag-over {
  border-color: var(--tm-emerald);
  background: rgba(15, 157, 110, 0.07);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.10);
}

.jp2-qfile__input.is-invalid + .jp2-qfile__zone {
  border-color: #DC2626;
  background: #FEF2F2;
}

.jp2-qfile__zone i { font-size: 1.6rem; color: var(--tm-emerald); }

.jp2-qfile__cta {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tm-navy);
}

.jp2-qfile__hint {
  font-size: 0.72rem;
  color: var(--tm-ink-500);
}

.jp2-qfile__preview {
  display: none;
  margin-top: 8px;
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-md);
  overflow: hidden;
  background: #ffffff;
}

.jp2-qfile__preview-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.jp2-qfile__thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--tm-radius-sm);
  border: 1px solid var(--tm-line-200);
  flex-shrink: 0;
  display: none;
}

.jp2-qfile__fname {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tm-ink-700);
  word-break: break-all;
  min-width: 0;
}

.jp2-qfile__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--tm-mist-100);
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-sm);
  color: var(--tm-ink-500);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.jp2-qfile__remove:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .jp2-form-row--2,
  .jp2-form-row--3-1 { grid-template-columns: 1fr; }

  .jp2-modal__head,
  .jp2-modal__body,
  .jp2-modal__foot,
  .jp2-steps { padding-left: 18px; padding-right: 18px; }
}

/* ================================================================
   DATATABLES SKIN  (shared across all v2 pages/portals)
   ─────────────────────────────────────────────────────────────────
   Usage:
     1. Add class="tm-data-table" to the <table> element.
     2. Wrap controls in .tm-dt-toolbar before the table.
     3. Set dom: "t<'tm-dt-footer'ip>" in DataTables config.
     4. Add a second <thead> row with class="tm-dt-filter-row"
        and populate it with .tm-dt-col-search inputs via initComplete.
   ================================================================ */

/* ── Toolbar (search bar + entries select + title) ── */
.tm-dt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 10px;
  flex-wrap: wrap;
}

.tm-dt-toolbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tm-dt-toolbar__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-emerald);
}

/* Entries per page */
.tm-dt-entries {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tm-dt-entries__label {
  font-size: 0.75rem;
  color: var(--tm-ink-500);
  font-weight: 500;
  white-space: nowrap;
}

.tm-dt-entries__select {
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--tm-line-300);
  border-radius: var(--tm-radius-sm);
  font-family: var(--tm-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tm-navy);
  background: #ffffff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none'%3E%3Cpath d='M1 1l3.5 4L8 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tm-dt-entries__select:focus {
  outline: none;
  border-color: var(--tm-emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.12);
}

/* Global search wrapper (label + input) */
.tm-dt-global-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tm-dt-search-label {
  font-family: var(--tm-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--tm-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Global search input */
.tm-dt-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.tm-dt-search-wrap i {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: var(--tm-ink-500);
  pointer-events: none;
}

.tm-dt-search {
  padding: 6px 12px 6px 30px;
  border: 1px solid var(--tm-line-300);
  border-radius: var(--tm-radius-pill);
  font-family: var(--tm-font-body);
  font-size: 0.80rem;
  color: var(--tm-ink-700);
  background: #ffffff;
  width: 190px;
  transition: border-color 150ms ease, box-shadow 150ms ease, width 200ms ease;
}

.tm-dt-search:focus {
  outline: none;
  border-color: var(--tm-emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.12);
  width: 240px;
}

/* ── Base DataTables wrapper ── */
.dataTables_wrapper {
  font-family: var(--tm-font-body);
  font-size: 0.82rem;
  color: var(--tm-ink-700);
}

/* Hide built-in length + filter — use toolbar controls instead */
.tm-dt-wrap .dataTables_length,
.tm-dt-wrap .dataTables_filter { display: none; }

/* ── Table base ── */
.tm-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

/* ── Reset DataTables default sort pseudo-elements ── */
.tm-data-table.dataTable thead th::before,
.tm-data-table.dataTable thead th::after {
  display: none !important;
  content: none !important;
}

/* ── Column headers ── */
.tm-data-table thead th {
  position: relative;
  text-align: left;
  padding: 0 24px 10px 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tm-navy);
  border-bottom: none !important;
  white-space: nowrap;
  user-select: none;
  transition: color 120ms ease;
}

.tm-data-table thead th:first-child { padding-left: 16px; }

/* Non-sortable actions column */
.tm-data-table thead th.tm-dt-col-actions {
  cursor: default;
  text-align: center;
  padding-right: 16px;
}

/* Sort cursor */
.tm-data-table thead th.sorting,
.tm-data-table thead th.sorting_asc,
.tm-data-table thead th.sorting_desc { cursor: pointer; }

.tm-data-table thead th.sorting:hover { color: var(--tm-emerald); }

.tm-data-table thead th.sorting_asc,
.tm-data-table thead th.sorting_desc { color: var(--tm-navy); }

/* Re-enable ::after only on sort columns */
.tm-data-table.dataTable thead th.sorting::after,
.tm-data-table.dataTable thead th.sorting_asc::after,
.tm-data-table.dataTable thead th.sorting_desc::after {
  display: block !important;
  content: '' !important;
  position: absolute;
  right: 6px;
  top: 2px;
  bottom: 12px;
  width: 10px;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Unsorted — up + down arrows, muted gray */
.tm-data-table.dataTable thead th.sorting::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M5 2 9 7H1z' fill='%23C8CDD6'/%3E%3Cpath d='M5 14 1 9h8z' fill='%23C8CDD6'/%3E%3C/svg%3E");
}

/* Ascending — up arrow in navy */
.tm-data-table.dataTable thead th.sorting_asc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M5 1 9 7H1z' fill='%230A1F3D'/%3E%3C/svg%3E");
}

/* Descending — down arrow in navy */
.tm-data-table.dataTable thead th.sorting_desc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M5 7 1 1h8z' fill='%230A1F3D'/%3E%3C/svg%3E");
}

/* No sort arrow on actions column */
.tm-data-table.dataTable thead th.tm-dt-col-actions::after { display: none !important; }

/* ── Timezone label pill (DATE / TIME IN / TIME OUT) ── */
.tm-th-tz {
  display: inline-block;
  font-size: 0.60rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--tm-ink-500);
  background: var(--tm-mist-100);
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-pill);
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
  transition: opacity 200ms ease;
}

.tm-th-tz:empty { display: none; }

/* ── Per-column filter row (second <thead> row) ── */
.tm-data-table thead tr.tm-dt-filter-row th {
  padding: 6px 8px 10px 8px;
  border-top: none !important;
  border-bottom: 2px solid var(--tm-line-200);
  background: transparent;
  vertical-align: middle;
}

.tm-data-table thead tr.tm-dt-filter-row th:first-child { padding-left: 16px; }
.tm-data-table thead tr.tm-dt-filter-row th:last-child  { padding-right: 16px; }

/* Kill sort arrows injected by DataTables on the filter row */
.tm-data-table thead tr.tm-dt-filter-row th::after,
.tm-data-table thead tr.tm-dt-filter-row th::before {
  display: none !important;
  content: none !important;
}

/* ── Per-column filter input ── */
.tm-dt-col-search {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-pill);
  font-family: var(--tm-font-body);
  font-size: 0.74rem;
  color: var(--tm-ink-700);
  background: #ffffff;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}

.tm-dt-col-search:hover  { border-color: var(--tm-line-300); }

.tm-dt-col-search:focus {
  border-color: var(--tm-emerald);
  box-shadow: 0 0 0 2px rgba(15, 157, 110, 0.12);
}

.tm-dt-col-search::placeholder {
  color: var(--tm-ink-500);
  font-size: 0.72rem;
  font-weight: 400;
}

/* ── Table body ── */
.tm-data-table tbody tr {
  border-bottom: 1px solid var(--tm-line-200);
  transition: background-color 100ms ease;
}

.tm-data-table tbody tr:last-child { border-bottom: none; }
.tm-data-table tbody tr:hover      { background: var(--tm-mist-100); }

.tm-data-table tbody td {
  padding: 11px 14px;
  color: var(--tm-ink-700);
  vertical-align: middle;
}

.tm-data-table tbody td:first-child { padding-left: 16px; }
.tm-data-table tbody td:last-child  { padding-right: 16px; }

/* ── Draw animation (toggled by drawCallback on every DataTables draw) ── */
@keyframes tmDtFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tm-data-table.tm-dt-redraw tbody {
  animation: tmDtFade 220ms ease forwards;
}

/* ── Empty / loading states ── */
.tm-dt-empty,
.tm-dt-loading {
  text-align: center;
  padding: 32px 16px !important;
  color: var(--tm-ink-500);
  font-size: 0.83rem;
}

.tm-dt-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tm-dt-empty i {
  display: block;
  font-size: 1.8rem;
  opacity: 0.25;
  margin-bottom: 8px;
}

/* ── Footer row (info + pagination) ── */
.tm-dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 14px;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--tm-line-200);
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.73rem;
  color: var(--tm-ink-500);
  font-weight: 500;
  padding: 0;
  white-space: nowrap;
}

/* ── Pagination ── */
.dataTables_wrapper .dataTables_paginate {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  flex-wrap: nowrap;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--tm-radius-sm);
  font-family: var(--tm-font-body);
  font-size: 0.80rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tm-ink-700) !important;
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):hover {
  background: var(--tm-mist-100) !important;
  border-color: var(--tm-line-200) !important;
  color: var(--tm-navy) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--tm-navy) !important;
  border-color: var(--tm-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(10, 31, 61, 0.18);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  border-color: var(--tm-line-200) !important;
  background: #ffffff !important;
  min-width: auto;
  padding: 0 12px;
  font-size: 0.76rem;
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:not(.disabled):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:not(.disabled):hover {
  border-color: var(--tm-navy) !important;
  color: var(--tm-navy) !important;
  background: var(--tm-mist-100) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.35;
  cursor: not-allowed !important;
  pointer-events: none;
  background: transparent !important;
  border-color: var(--tm-line-200) !important;
  color: var(--tm-ink-500) !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate span.ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 4px;
  color: var(--tm-ink-500);
  font-size: 0.80rem;
  letter-spacing: 0.05em;
  user-select: none;
  pointer-events: none;
  vertical-align: middle;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .tm-dt-toolbar { flex-direction: column; align-items: flex-start; }
  .tm-dt-toolbar__left { width: 100%; }
  .tm-dt-search-wrap { width: 100%; }
  .tm-dt-search { width: 100%; }
  .tm-dt-search:focus { width: 100%; }
  .tm-dt-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ================================================================
   TABLE CARD  (shared shell for DataTables-powered pages)
   Usage:
     <div class="tm-table-card">
       <div class="tm-table-card__header">Title <span class="tm-table-card__count-badge">N</span></div>
       <div class="tm-dt-toolbar">…toolbar…</div>
       <table class="tm-data-table" id="myTable">…</table>
     </div>
     DataTables dom: "<'tm-dt-wrap'tr><'tm-dt-footer'ip>"
   ================================================================ */
.tm-table-card {
  background: #ffffff;
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-lg);
  box-shadow: 0 1px 4px rgba(10, 31, 61, 0.05), 0 2px 14px rgba(10, 31, 61, 0.06);
  overflow: hidden;
}

.tm-table-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: var(--tm-navy);
}

.tm-table-card__header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tm-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--tm-cream);
}

.tm-table-card__header-title i { color: var(--tm-emerald); font-size: 0.85rem; }

.tm-table-card__count-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(250, 250, 245, 0.12);
  border: 1px solid rgba(250, 250, 245, 0.18);
  border-radius: var(--tm-radius-pill);
  font-family: var(--tm-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(250, 250, 245, 0.75);
  padding: 0.15em 0.65em;
  white-space: nowrap;
}

.tm-table-card .tm-dt-toolbar {
  border-bottom: 1px solid var(--tm-line-200);
}

.tm-table-card .tm-dt-wrap { overflow-x: auto; }

/* ── Stat Strip (shared component) ──────────────────────────
   A single-row card with icon + number + label cells divided
   by inner borders. Use on any v2 page that needs stat tiles.
   ────────────────────────────────────────────────────────── */
.tm-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid var(--tm-line-200);
    border-radius: var(--tm-radius-lg);
    overflow: hidden;
}

.tm-stat-strip__cell {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--tm-line-200);
}

.tm-stat-strip__cell:last-child { border-right: none; }

.tm-stat-strip__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--tm-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.tm-stat-strip__icon--navy    { background: rgba(10,  31,  61,  0.08); color: var(--tm-navy); }
.tm-stat-strip__icon--emerald { background: rgba(15, 157, 110,  0.10); color: var(--tm-emerald); }
.tm-stat-strip__icon--gold    { background: rgba(201,169,  97,  0.12); color: var(--tm-gold); }
.tm-stat-strip__icon--info    { background: rgba(59, 130, 246,  0.10); color: #3b82f6; }
.tm-stat-strip__icon--danger  { background: rgba(220,  53,  69,  0.10); color: #dc3545; }

.tm-stat-strip__body { flex: 1; min-width: 0; }

.tm-stat-strip__num {
    font-family: var(--tm-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--tm-navy);
    line-height: 1;
}

.tm-stat-strip__lbl {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tm-ink-500);
    margin-top: 0.2rem;
}

@media (max-width: 991px) {
    .tm-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .tm-stat-strip__cell:nth-child(even) { border-right: none; }
    .tm-stat-strip__cell:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--tm-line-200); }
}

@media (max-width: 575px) {
    .tm-stat-strip { grid-template-columns: 1fr; }
    .tm-stat-strip__cell { border-right: none; }
    .tm-stat-strip__cell:not(:last-child) { border-bottom: 1px solid var(--tm-line-200); }
}