/* ================================================
   DECISION TEAM — "QUIET CONFIDENCE" DESIGN SYSTEM
   Com0.1, 0.9, 0.2, 1onent Styles
   ================================================ */

/* ========== BUTTONS ========== */
.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

/* Shared focus-visible primitive — see _dev/current-state/how-to/design-system/color-and-foundation-primitives.md.
   Amber outline (`--accent-primary`) is the single accessible focus treatment for
   keyboard-only focus across the design system. Buttons and form inputs opt in by
   selector; arbitrary interactive controls opt in by adding class="dt-focus-ring".
   New consumers append their selector to this list rather than declaring a local rule. */
.dt-btn:focus-visible,
.dt-form-input:focus-visible,
.dt-focus-ring:focus-visible,
.dt-menu__item:focus-visible,
.dt-dropdown-item:focus-visible,
.dt-mobile-kebab-menu__item:focus-visible,
/* Documents surface (story 01) */
.doc-card:focus-visible,
.doc-subfolder-card:focus-visible,
.doc-folder-bar__kebab:focus-visible,
.doc-drawer__close:focus-visible,
.doc-drawer__action-btn:focus-visible,
.doc-picker__doc:focus-visible,
.doc-move__folder:focus-visible,
.doc-mobile-folder-card:focus-visible,
.doc-mobile-chips__chip:focus-visible,
.doc-mobile-breadcrumb__seg:focus-visible,
/* Migrated menu items (story 02). Grouped-selector extension of `.dt-menu__item`
   does not cascade to `:focus-visible`, so each migrated item opts in explicitly
   here. `.doc-menu__item` is intentionally absent — its tighter padding requires
   `outline-offset: -2px`, so it carries a self-contained focus-visible rule in
   documents.css (the full amber outline plus the negative offset, declared
   together so the ring does not depend on cascading from this shared block). */
.folder-menu__item:focus-visible,
.session-documents__add-option:focus-visible,
.session-documents__summary-option:focus-visible,
/* Session surface (story 03) */
.session-people-list__remove:focus-visible,
.session-people-list__invite:focus-visible,
.session-documents__item:focus-visible,
.session-documents__add:focus-visible,
.session-documents__summary:focus-visible,
/* Chat surface (story 04). The ring sits on the focused textarea / button —
   not the `.chat-input` wrapper — so the shared keyboard-only `:focus-visible`
   contract is preserved. The wrapper keeps its `:focus-within` border-color
   hint for non-keyboard focus. */
.chat-input__textarea:focus-visible,
.chat-input__send-btn:focus-visible,
/* Research / dashboard / customer-feature surface (story 05) */
.research-card--clickable:focus-visible,
.import-brief__search-input:focus-visible,
.import-brief__item:focus-visible,
.color-picker__trigger:focus-visible,
.color-swatch:focus-visible,
.dt-home-tile:focus-visible,
.expert-picker__search-input:focus-visible,
.expert-picker__option:focus-visible,
.upload-dropzone:focus-visible,
.add-document-option:focus-visible,
.dt-pagination__btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.dt-focus-ring {
  /* Utility class — base rule is intentionally empty; the focus-visible state above
     is what makes the class do work. Applied to elements that need the shared ring
     but cannot be reached by the selector-list route (per-render class-list controls,
     ad-hoc anchors). */
}

/* Shared active / selected primitives — see _dev/current-state/how-to/design-system/color-and-foundation-primitives.md.
   The default `.dt-is-active` / `.dt-is-selected` shape pairs `--accent-subtle` wash
   with an amber left-edge marker (via `box-shadow: inset`, so the content box does
   not shift). Light surfaces consume the default. Slate surfaces (the customer
   sidebar runs against `--primary-800`) use the `--on-slate` modifier, which drops
   the amber wash (it reads weaker than the existing white-15% fill on slate) and
   keeps only the amber marker as the interaction signal. The `--accent-primary`
   token already remaps to the brighter `--accent-400` in dark mode, so no theme
   override is needed. */
.dt-is-active,
.dt-is-selected,
/* Customer-feature consumers — grouped-selector extension so the shared
   amber wash + amber marker fire on existing BEM modifier class hooks
   without a JS edit. Stories 01 (documents move modal) and 05 (research
   import-brief modal). */
.doc-move__folder--selected,
.import-brief__item--selected {
  background-color: var(--accent-subtle);
  box-shadow: inset 2px 0 0 var(--accent-primary);
}

.dt-is-active--on-slate {
  /* For use on `--primary-800` slate sidebars. Suppresses the wash from the default
     rule and keeps only the amber left-edge marker. The host surface (e.g. the
     sidebar's `.dt-nav-item.active` rule) supplies its own translucent fill. */
  background-color: transparent;
  box-shadow: inset 2px 0 0 var(--accent-primary);
}

.dt-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Sizes - BEM: .dt-btn--sm, .dt-btn--md, .dt-btn--lg */
.dt-btn-sm,
.dt-btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.dt-btn-md,
.dt-btn--md {
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.dt-btn-lg,
.dt-btn--lg {
  height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}

/* Button Variants - BEM: .dt-btn--primary, .dt-btn--secondary, etc.
   Primary stays cool slate per COLOR-SYSTEM.md Buttons table — amber is reserved
   for interaction (focus / active / link) so the primary action does not collide
   with the accent. Rest is `--primary-800`; hover lifts one step to `--primary-700`;
   active reuses the resting `--primary-800` so the click feedback reads as a hold. */
.dt-btn-primary,
.dt-btn--primary {
  background-color: var(--primary-800);
  /* The slate background is theme-stable, so the label must stay light in both
     themes. --text-inverse flips to near-black in dark mode (≈2.4:1 on the slate,
     fails WCAG AA), so use the theme-stable light primary token instead. */
  color: var(--primary-100);
}

.dt-btn-primary:hover,
.dt-btn--primary:hover {
  background-color: var(--primary-700);
  color: var(--primary-100);
}

.dt-btn-primary:active,
.dt-btn--primary:active {
  background-color: var(--primary-800);
}

.dt-btn-secondary,
.dt-btn--secondary {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
}

.dt-btn-secondary:hover,
.dt-btn--secondary:hover {
  background-color: var(--border-default);
  color: var(--text-primary);
}

.dt-btn-ghost,
.dt-btn--ghost {
  background-color: transparent;
  color: var(--text-secondary);
}

.dt-btn-ghost:hover,
.dt-btn--ghost:hover {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
}

.dt-btn-accent,
.dt-btn--accent {
  background-color: var(--accent-500);
  color: var(--text-inverse);
}

.dt-btn-accent:hover,
.dt-btn--accent:hover {
  background-color: var(--accent-600);
  color: var(--text-inverse);
}

.dt-btn-danger,
.dt-btn--danger {
  background-color: var(--error-500);
  /* Saturated red (--error-500/600) is dark in both themes, so the type stays a
     fixed light color rather than the theme-flipping --text-inverse token. */
  color: #FFFFFF;
}

.dt-btn-danger:hover,
.dt-btn--danger:hover {
  background-color: var(--error-600);
  color: #FFFFFF;
}

.dt-btn-success,
.dt-btn--success {
  background-color: var(--success-500);
  color: var(--text-inverse);
}

.dt-btn-success:hover,
.dt-btn--success:hover {
  background-color: var(--success-600);
  color: var(--text-inverse);
}

.dt-btn-outline,
.dt-btn--outline {
  background-color: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.dt-btn-outline:hover,
.dt-btn--outline:hover {
  background-color: var(--bg-subtle);
  border-color: var(--text-tertiary);
}

.dt-btn-outline-primary,
.dt-btn--outline-primary {
  background-color: transparent;
  border: 2px solid var(--primary-600);
  color: var(--primary-600);
}

.dt-btn-outline-primary:hover,
.dt-btn--outline-primary:hover {
  background-color: var(--primary-100);
}

/* Danger Outline - BEM: .dt-btn--danger-outline.
   Outline-style destructive action. The filled `.dt-btn--danger` variant is the
   high-emphasis form; this outline variant is the lower-emphasis "destructive but
   not yet pressed" form used by My Account / Danger Zone surfaces. Routed through
   the declared error semantic tokens (`--error-500`, `--error-600`, `--error-100`)
   so the surface CSS never has to redeclare a soft-red tint locally. */
.dt-btn-danger-outline,
.dt-btn--danger-outline,
/* Compound selector: customer.css re-declares a single-class `.dt-btn` later in the
   cascade with `border: 1px solid transparent`, which strips this variant's outline
   at equal specificity. The doubled class keeps the red border winning when markup
   carries the base class (`dt-btn dt-btn--danger-outline`). */
.dt-btn.dt-btn--danger-outline {
  background-color: transparent;
  border: 1px solid var(--error-500);
  color: var(--error-600);
}

.dt-btn-danger-outline:hover,
.dt-btn--danger-outline:hover {
  background-color: var(--error-100);
  border-color: var(--error-600);
}

/* Full Width Button - BEM: .dt-btn--block */
.dt-btn-block,
.dt-btn--block {
  width: 100%;
}

/* ========== FORM INPUTS ========== */
.dt-form-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) ease;
}

/* Native <option>/<optgroup> popups don't inherit the control's CSS; in dark mode
   they defaulted to a light system list. `color-scheme: dark` (dt-base.css) handles
   UA-styled controls; this explicit pairing guarantees a dark, readable list. The
   `optgroup` rule covers grouped lists like the Time Zone picker, whose region
   headers were otherwise left on a transparent (light) background. */
[data-theme="dark"] .dt-form-input option,
[data-theme="dark"] .dt-form-input optgroup {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

.dt-form-input:focus {
  /* Suppress the default user-agent outline for mouse focus and shift the resting
     border to the slate-500 tint so the input still reads as focused on click.
     The sibling `.dt-form-input:focus-visible` rule directly below re-applies the
     amber keyboard-only ring at the same specificity but later in source order, so
     mouse focus matches only `:focus` and keeps the border-tint hint, while keyboard
     focus matches both and the later `:focus-visible` rule wins. */
  outline: none;
  border-color: var(--primary-500);
}

.dt-form-input:focus-visible {
  /* Re-apply the shared amber ring for keyboard focus only. This sibling rule must
     stay AFTER `.dt-form-input:focus` above — they share specificity, and source
     order is what guarantees the ring wins for keyboard tabs. The shared selector-
     list block at the top of the file still lists `.dt-form-input:focus-visible`
     so the focus-visible primitive's scope reads correctly there; this rule is the
     ordering-aware re-application that defeats the `:focus { outline: none }` rule. */
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.dt-form-input::placeholder {
  color: var(--text-tertiary);
}

.dt-form-input:disabled,
.dt-form-input[readonly] {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Input Size */
/* Numeric and code fields read as broken when stretched to the width of a management card. */
.dt-form-input--narrow {
  max-width: 12rem;
}

.dt-form-input--lg {
  padding: 0.625rem 1rem;
  font-size: var(--text-base);
}

/* Textarea */
.dt-textarea {
  min-height: 100px;
  padding: var(--space-3);
  resize: vertical;
}

/* Form Label */
.dt-form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

/* Form Label Row (label + link side by side) */
.dt-form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.dt-form-label-row .dt-form-label {
  margin-bottom: 0;
}

/* Form Static (read-only display value) */
.dt-form-static {
  font-size: 0.875rem;
  color: var(--text-primary);
  padding: 0.5rem 0;
}

/* Datum - BEM: .dt-datum, .dt-datum__label, .dt-datum__value.
   A read-only label/value pair on a detail card. Set on one line at equal weight — the shape
   `<strong>Label:</strong> value` produces — the two compete and a card full of them reads as
   a block of prose. Stacking the label above its value gives each pair a scannable anchor. */
.dt-datum {
  margin-bottom: var(--space-4);
}

.dt-datum:last-child {
  margin-bottom: 0;
}

.dt-datum__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

/* Label + its own action, side by side — mirrors .dt-form-label-row. A datum whose action is
   gated differently from the card's (transferring ownership vs. editing the manager list)
   needs the control on the datum, not hoisted into the card header. */
.dt-datum__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.dt-datum__label-row .dt-datum__label {
  margin-bottom: 0;
}

.dt-datum__value {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

/* Bulleted prose inside a card. A bare <ul> keeps the browser's 16px body size and 2rem
   indent, which sits a size larger than the card text it belongs to.
   Named `dt-bullet-list`, not `dt-list`: customer.css owns an unrelated `dt-list-*` family
   (`dt-list-header`, `dt-list-search`, …) for its listing shell, and a bare `.dt-list` reads
   as that family's root. */
.dt-bullet-list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.dt-bullet-list li {
  margin-bottom: var(--space-1);
}

/* Form Value with Icon (read-only value with inline icon support) */
.dt-form-value-with-icon {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
  padding: 0.25rem 0;
}

/* Form Help Text */
.dt-help-text {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.dt-error-text {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--error-500);
}

/* Consent checkbox (e.g. Terms / Privacy affirmation) */
.dt-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.dt-checkbox__input {
  flex-shrink: 0;
  margin-top: 0.15em;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--accent-500);
  cursor: pointer;
}

.dt-checkbox__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.dt-checkbox__label a {
  color: var(--accent-600);
  text-decoration: underline;
}

/* ========== CARDS ========== */
.dt-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              transform var(--duration-fast) var(--ease-out);
}

/* Card Modifier - BEM: .dt-card--hover */
.dt-card-hover:hover,
.dt-card--hover:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

/* Card Body - BEM: .dt-card__body */
.dt-card-body,
.dt-card__body {
  padding: var(--space-4);
}

/* Card Body Large - BEM: .dt-card__body--lg */
.dt-card-body-lg,
.dt-card__body--lg {
  padding: var(--space-6);
}

/* NOTE: `.dt-card__header`, `.dt-card__title` and `.dt-card__footer` are NOT declared here.
   customer.css already owns those three names with a different visual language (uppercase
   micro-titles, no header fill), and it loads *after* this sheet on the customer chain — so a
   declaration here would lose on the properties it shares and silently leak the ones it does
   not (flex layout, header fill) onto customer pages. The org treatment is scoped under
   `.dt-org-container` in the ORG MANAGEMENT SHELL section instead. */

/* ========== TOP BAR / NAVBAR ========== */
.dt-topbar {
  background-color: var(--primary-800);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Topbar Brand - BEM: .dt-topbar__brand */
.dt-topbar-brand,
.dt-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-inverse);
  text-decoration: none;
  font-weight: var(--font-bold);
  font-size: var(--text-base);
}

.dt-topbar-brand:hover,
.dt-topbar__brand:hover {
  color: var(--text-inverse);
}

.dt-brand-icon {
  width: 25px;
  height: 25px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  flex-shrink: 0;
}

.dt-brand-text-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
}

/* Topbar Nav - BEM: .dt-topbar__nav */
.dt-topbar-nav,
.dt-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.dt-topbar-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: color var(--duration-fast) var(--ease-out);
}

.dt-topbar-link:hover {
  color: var(--text-inverse);
}

.dt-topbar-link.active {
  color: var(--text-inverse);
  font-weight: var(--font-semibold);
}

/* ========== FOOTER ========== */
.dt-footer {
  background-color: var(--primary-800);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.dt-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.dt-footer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.dt-footer-link:hover {
  color: var(--text-inverse);
}

.dt-footer-copyright {
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-xs);
}

/* ========== AVATARS ========== */
.dt-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  color: var(--text-inverse);
  flex-shrink: 0;
}

/* Avatar Sizes - BEM: .dt-avatar--sm, .dt-avatar--md, .dt-avatar--lg, .dt-avatar--xl */
.dt-avatar-sm,
.dt-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.625rem;
}

.dt-avatar-md,
.dt-avatar--md {
  width: 36px;
  height: 36px;
  font-size: 0.75rem;
}

.dt-avatar-lg,
.dt-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 0.875rem;
}

.dt-avatar-xl,
.dt-avatar--xl {
  width: 56px;
  height: 56px;
  font-size: 1rem;
}

/* Avatar Colors */
.dt-avatar-chair {
  background-color: var(--expert-chair);
  border: 2px solid var(--accent-500);
}

.dt-avatar-expert-1 {
  background-color: var(--expert-1);
}

.dt-avatar-expert-2 {
  background-color: var(--expert-2);
}

.dt-avatar-expert-3 {
  background-color: var(--expert-3);
}

.dt-avatar-custom {
  background-color: var(--expert-color, #64748b);
  color: var(--text-inverse);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.dt-avatar-user {
  background-color: var(--expert-user);
}

.dt-avatar-accent {
  background-color: var(--accent-500);
  color: var(--primary-800);
}

/* ========== MESSAGES ========== */
.dt-message {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Message Elements - BEM: .dt-message__avatar, .dt-message__content, etc. */
.dt-message-avatar,
.dt-message__avatar {
  flex-shrink: 0;
}

.dt-message-content,
.dt-message__content {
  flex: 1;
  min-width: 0;
}

.dt-message-header,
.dt-message__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.dt-message-name,
.dt-message__name {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.dt-message-role,
.dt-message__role {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.dt-message-body,
.dt-message__body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.dt-message-body p,
.dt-message__body p {
  margin: 0 0 var(--space-3) 0;
}

.dt-message-body p:last-child,
.dt-message__body p:last-child {
  margin-bottom: 0;
}

/* User Message (right-aligned bubble) */
.dt-message-user {
  justify-content: flex-end;
}

.dt-message-user .dt-message-bubble {
  background-color: var(--primary-800);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  max-width: 80%;
}

/* System Message */
.dt-message-system {
  background-color: var(--bg-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Claire Message Bubble */
.dt-message-bubble-claire {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4);
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
}


.dt-icon-btn {
  width: 40px;
  height: 40px;
  background-color: var(--primary-800);
  border: 1px solid var(--primary-800);
  border-radius: var(--radius-md);
  color: var(--text-inverse);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.dt-icon-btn:hover:not(:disabled) {
  background-color: var(--primary-700);
}

.dt-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== ACTION BOXES ========== */
.dt-action-box {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

/* Confirmation Box (Green) */
.dt-action-box-confirm {
  background-color: var(--success-100);
  border: 1px solid #A7F3D0;
}

.dt-action-box-confirm .dt-action-box-title {
  color: var(--success-600);
}

/* Team Suggestion Box (Blue) */
.dt-action-box-team {
  background: linear-gradient(135deg, var(--advisory-50) 0%, var(--bg-surface) 100%);
  border: 2px solid var(--advisory-500);
}

.dt-action-box-team .dt-action-box-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--advisory-600);
  margin-bottom: var(--space-3);
}

/* Action Box Elements */
.dt-action-box-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.dt-action-box-content {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.dt-action-box-buttons {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* Confirmed State */
.dt-action-box.confirmed {
  opacity: 0.7;
  border-style: dashed;
}

.dt-action-box.confirmed .dt-action-box-buttons {
  display: none;
}

.dt-action-box.confirmed::after {
  content: '\2713 Confirmed';
  display: block;
  font-size: var(--text-xs);
  color: var(--success-500);
  font-weight: var(--font-semibold);
  margin-top: var(--space-3);
}

/* ========== PROGRESS INDICATOR ========== */
.dt-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Progress Elements - BEM: .dt-progress__step, .dt-progress__dot, .dt-progress__label */
.dt-progress-step,
.dt-progress__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dt-progress-dot,
.dt-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--border-default);
}

.dt-progress-dot.active,
.dt-progress__dot.active,
.dt-progress__dot--active {
  background-color: var(--advisory-500);
}

.dt-progress-dot.complete,
.dt-progress__dot.complete,
.dt-progress__dot--complete {
  background-color: var(--success-500);
}

.dt-progress-label,
.dt-progress__label {
  font-size: var(--text-xs);
  color: var(--text-disabled);
}

.dt-progress-step.active .dt-progress-label,
.dt-progress__step.active .dt-progress__label,
.dt-progress__step--active .dt-progress__label {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.dt-progress-step.complete .dt-progress-label,
.dt-progress__step.complete .dt-progress__label,
.dt-progress__step--complete .dt-progress__label {
  color: var(--text-tertiary);
}

/* ========== SECTION HEADERS ========== */
/* BEM: .dt-section__header */
.dt-section-header,
.dt-section__header {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

/* ========== LANDING PAGE COMPONENTS ========== */
.dt-hero {
  text-align: center;
  padding: var(--space-16) var(--space-6) var(--space-12);
}

/* Hero Elements - BEM: .dt-hero__title, .dt-hero__subtitle */
.dt-hero-title,
.dt-hero__title {
  font-size: 2.5rem;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.dt-hero-subtitle,
.dt-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-tertiary);
  max-width: 540px;
  margin: 0 auto var(--space-8);
  line-height: var(--leading-relaxed);
}

.dt-section {
  padding: var(--space-16) var(--space-6);
}

/* Section Modifiers and Elements - BEM */
.dt-section-alt,
.dt-section--alt {
  background-color: var(--bg-surface);
}

.dt-section-title,
.dt-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.dt-section-label,
.dt-section__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.dt-section-inner,
.dt-section__inner {
  max-width: 800px;
  margin: 0 auto;
}

/* Feature Cards */
.dt-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  font-size: var(--text-xl);
}

.dt-feature-icon-blue {
  background-color: var(--advisory-50);
  color: var(--advisory-500);
}

.dt-feature-icon-green {
  background-color: var(--success-100);
  color: var(--success-500);
}

.dt-feature-icon-purple {
  background-color: var(--panel-50);
  color: var(--panel-500);
}

.dt-feature-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.dt-feature-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Step Indicators */
.dt-step-number {
  width: 40px;
  height: 40px;
  background-color: var(--primary-800);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  margin: 0 auto var(--space-3);
}

/* ========== ONBOARDING LAYOUT ========== */
.dt-onboarding-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dt-onboarding-container {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  width: 100%;
}

.dt-onboarding-card {
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}

.dt-conversation-stream {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dt-conversation-inner {
  width: 100%;
  max-width: 680px;
}

/* ========== EXPERT CARD DETAILS ========== */
/* Extends .dt-card for expert roster display */
.dt-expert-card-details {
  flex: 1;
  min-width: 0;
}

.dt-expert-card-fields {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.dt-expert-card-fields p {
  margin: 0 0 var(--space-1) 0;
}

.dt-expert-card-fields p:last-child {
  margin-bottom: 0;
}

/* ========== TENSION MAP ========== */
/* Shows productive tensions between experts — similar pattern to .dt-action-box-team */
.dt-tension-map {
  background: linear-gradient(135deg, var(--advisory-50) 0%, var(--success-100) 100%);
  border: 1px solid var(--advisory-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.dt-tension-map__content {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.dt-tension-line {
  margin: 0 0 var(--space-2) 0;
}

.dt-tension-line:last-child {
  margin-bottom: 0;
}

/* ========== UNCOMFORTABLE ADDITION ========== */
/* Modifier for expert card when marked as uncomfortable addition */
.dt-card--uncomfortable {
  border-color: var(--warning-200);
  background: var(--warning-50);
}

/* Warning Badge Variant */
.dt-badge--warning {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--warning-700);
  background: var(--warning-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Expert Rationale — italic explanation text */
.dt-expert-rationale {
  font-size: var(--text-sm);
  color: var(--warning-600);
  margin-top: var(--space-2);
  font-style: italic;
  line-height: var(--leading-relaxed);
}

/* ========== SUCCESS STATE ========== */
/* Centered confirmation display after team creation */
.dt-success-container {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  max-width: 500px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.dt-success-icon {
  font-size: 3rem;
  color: var(--success-500);
  margin-bottom: var(--space-4);
}

.dt-success-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.dt-success-message {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.dt-success-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 300px;
  margin: 0 auto;
}

/* Block button variant */
.dt-btn-block {
  width: 100%;
}

/* ========== EXPERT PREVIEW (Team Suggestion) ========== */
.dt-expert-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Keep the avatar beside the name/title; only the field list stacks. */
.dt-expert-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dt-expert-preview-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dt-expert-preview-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.dt-expert-preview-role {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ========== BADGES ========== */
.dt-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
}

/* Badge Variants - BEM: .dt-badge--default, .dt-badge--success, etc. */
.dt-badge-default,
.dt-badge--default {
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
}

.dt-badge-success,
.dt-badge--success {
  background-color: var(--success-100);
  color: var(--success-600);
}

.dt-badge-warning,
.dt-badge--warning {
  background-color: var(--warning-100);
  color: var(--warning-600);
}

.dt-badge-info,
.dt-badge--info {
  background-color: var(--info-100);
  color: var(--info-600);
}

.dt-badge-accent,
.dt-badge--accent {
  background-color: var(--accent-500);
  color: var(--primary-800);
}

/* ========== STATUS DOTS ========== */
.dt-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.dt-status-dot-active {
  background-color: var(--success-500);
}

.dt-status-dot-paused {
  background-color: var(--accent-500);
}

.dt-status-dot-archived {
  background-color: var(--text-tertiary);
}

/* ========== LINKS ========== */
.dt-link {
  color: var(--info-500);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color var(--duration-fast) var(--ease-out);
}

.dt-link:hover {
  color: var(--info-600);
}

.dt-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.dt-back-link:hover {
  color: var(--text-primary);
}

.dt-link--sm {
  font-size: var(--text-xs);
}

/* ========== DIVIDERS ========== */
.dt-divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: var(--space-6) 0;
}

.dt-divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.dt-divider-text::before,
.dt-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border-subtle);
}

/* ========== SKIP LINK ========== */
.dt-skip-link {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-decoration: none;
}

.dt-skip-link:hover {
  color: var(--text-secondary);
}

/* ========== VALIDATION ========== */
/* ASP.NET adds validation-summary-valid when no errors, validation-summary-errors when errors exist */
/* Also hides empty field-level validation spans */
.validation-summary-valid,
.field-validation-valid {
  display: none;
}

.dt-validation-summary {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--error-100);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--error-500);
}

.dt-validation-summary ul {
  margin: 0;
  padding-left: var(--space-4);
  list-style: none;
}

.dt-validation-summary li {
  margin-bottom: var(--space-1);
}

.dt-validation-summary li:last-child {
  margin-bottom: 0;
}

/* ========== DARK MODE COMPONENT OVERRIDES ========== */
[data-theme="dark"] .dt-card {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
}

[data-theme="dark"] .dt-help-text {
  color: var(--text-tertiary);
}

[data-theme="dark"] .dt-validation-summary {
  background-color: rgba(220, 38, 38, 0.15);
  color: #FCA5A5;
}

[data-theme="dark"] .dt-error-text {
  color: #FCA5A5;
}

[data-theme="dark"] .dt-link {
  color: var(--accent-400);
}

[data-theme="dark"] .dt-link:hover {
  color: var(--accent-300);
}

[data-theme="dark"] .dt-topbar-link {
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .dt-topbar-link:hover {
  color: #fff;
}

[data-theme="dark"] .dt-btn-primary,
[data-theme="dark"] .dt-btn--primary {
  background-color: var(--primary-600);
  color: var(--primary-100);
}

[data-theme="dark"] .dt-btn-primary:hover,
[data-theme="dark"] .dt-btn--primary:hover {
  background-color: var(--primary-700);
  color: var(--primary-100);
}

[data-theme="dark"] .dt-btn-primary:active,
[data-theme="dark"] .dt-btn--primary:active {
  background-color: var(--primary-600);
}

[data-theme="dark"] .dt-btn-outline,
[data-theme="dark"] .dt-btn--outline,
[data-theme="dark"] .dt-btn-outline-primary,
[data-theme="dark"] .dt-btn--outline-primary {
  background-color: var(--bg-subtle);
}

[data-theme="dark"] .dt-btn-outline:hover,
[data-theme="dark"] .dt-btn--outline:hover,
[data-theme="dark"] .dt-btn-outline-primary:hover,
[data-theme="dark"] .dt-btn--outline-primary:hover {
  background-color: var(--bg-surface-raised);
}

[data-theme="dark"] .dt-btn-ghost,
[data-theme="dark"] .dt-btn--ghost {
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
}

[data-theme="dark"] .dt-btn-ghost:hover,
[data-theme="dark"] .dt-btn--ghost:hover {
  background-color: var(--bg-surface-raised);
  color: var(--text-primary);
}

[data-theme="dark"] .dt-btn-accent {
  background-color: var(--accent-400);
  color: #1E293B;
}

[data-theme="dark"] .dt-btn-accent:hover {
  background-color: var(--accent-300);
  color: #1E293B;
}

[data-theme="dark"] .dt-progress-label {
  color: var(--text-tertiary);
}

[data-theme="dark"] .dt-progress-step.active .dt-progress-label {
  color: var(--text-primary);
}

/* Dark mode: Input area */
[data-theme="dark"] .dt-text-input {
  background-color: var(--bg-surface-raised);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .dt-text-input:focus {
  border-color: var(--advisory-400);
}

[data-theme="dark"] .dt-icon-btn {
  background-color: var(--advisory-500);
  border-color: var(--advisory-500);
  color: var(--text-inverse);
}

[data-theme="dark"] .dt-icon-btn:hover:not(:disabled) {
  background-color: var(--advisory-400);
  border-color: var(--advisory-400);
}

/* Dark mode: Claire message bubble */
[data-theme="dark"] .dt-message-bubble-claire {
  background-color: var(--bg-surface-raised);
  border-color: var(--border-default);
}

[data-theme="dark"] .dt-avatar-chair {
  background-color: var(--bg-surface-raised);
}

/* ========== AUTH/FORM PAGE TYPOGRAPHY ========== */
.dt-page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.dt-page-title-semibold {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.dt-page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: var(--space-6);
}

.dt-page-subtitle-tight {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: var(--space-1);
}

/* ========== AUTH PAGE LAYOUT ========== */
.dt-auth-main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}

.dt-auth-container {
  width: 100%;
  max-width: 400px;
}

/* Form Group */
.dt-form-group {
  margin-bottom: var(--space-4);
}

.dt-form-group:last-child {
  margin-bottom: 0;
}

.dt-form-group--lg {
  margin-bottom: var(--space-5);
}

/* ========== SUCCESS STATE ICON ========== */
.dt-success-icon {
  width: 56px;
  height: 56px;
  background: var(--success-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 1.5rem;
  color: var(--success-500);
}

/* ========== WARNING STATE ICON ========== */
/* Sibling of .dt-success-icon for blocked/lapsed states (expired subscription, pulled seat)
   that head a centered terminal card rather than a success confirmation. */
.dt-warning-icon {
  width: 56px;
  height: 56px;
  background: var(--warning-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 1.5rem;
  color: var(--warning-600);
}

/* ========== INFO BOX ========== */
.dt-info-box {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* ========== FOOTER LINK ========== */
.dt-footer-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--space-6);
}

/* ========== NAVIGATION MENU ========== */
.dt-nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.dt-nav-link:hover {
  color: var(--text-inverse);
  background-color: rgba(255, 255, 255, 0.1);
}

.dt-nav-link.active {
  color: var(--text-inverse);
  font-weight: var(--font-semibold);
}

.dt-nav-dropdown {
  position: relative;
}

.dt-dropdown-toggle svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.dt-nav-dropdown:hover .dt-dropdown-toggle svg,
.dt-nav-dropdown:focus-within .dt-dropdown-toggle svg {
  transform: rotate(180deg);
}

/* ========== MENU PRIMITIVE ==========
   Shared chrome for desktop dropdowns (`.dt-dropdown-menu`), the mobile kebab
   menu (`.dt-mobile-kebab-menu` in `customer.css`), and any future menu/popover
   surface. The `.dt-menu` family owns the raised surface, border, shadow, padding,
   and item shape; consumer-specific positioning (absolute vs fixed, hover transitions)
   stays local. See `_dev/current-state/how-to/design-system/color-and-foundation-primitives.md`.

   Note: the Bootstrap navbar override block below (`.navbar.custom-navbar .dropdown-menu`)
   is a transition shim for Bootstrap's own dropdown selectors, not a `.dt-menu`
   consumer. New menu work extends `.dt-menu`, never Bootstrap's selectors. */
.dt-menu,
.dt-dropdown-menu,
.dt-mobile-kebab-menu,
/* Customer-feature menu consumers (story 02) — folder/document/session menus
   consume the shared chrome via grouped-selector extension. Positioning,
   z-index, and min-width stay local because the dropdown anchors differ. */
.folder-menu,
.doc-menu,
.session-documents__add-menu,
.session-documents__summary-menu {
  background-color: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
}

.dt-menu__item,
.dt-dropdown-item,
.dt-mobile-kebab-menu__item,
.folder-menu__item,
.doc-menu__item,
.session-documents__add-option,
.session-documents__summary-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: transparent;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.dt-menu__item:hover,
.dt-dropdown-item:hover,
.dt-mobile-kebab-menu__item:hover,
.folder-menu__item:hover,
.doc-menu__item:hover,
.session-documents__add-option:hover,
.session-documents__summary-option:hover {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
}

.dt-menu__item--danger,
.dt-menu__item--danger i,
.dt-mobile-kebab-menu__item--danger,
.dt-mobile-kebab-menu__item--danger i,
.folder-menu__item--danger,
.folder-menu__item--danger i,
.doc-menu__item--danger,
.doc-menu__item--danger i {
  color: var(--error-500);
}

/* Danger-hover wash — extends the shared item rule so the migrated
   `.folder-menu__item--danger` and `.doc-menu__item--danger` consumers
   share the red-tint hover the local rules used before story 02. */
.dt-menu__item--danger:hover,
.dt-mobile-kebab-menu__item--danger:hover,
.folder-menu__item--danger:hover,
.doc-menu__item--danger:hover {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--error-500);
}

.dt-menu__header,
.dt-dropdown-header {
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  cursor: default;
}

.dt-menu__header:hover,
.dt-dropdown-header:hover {
  background-color: transparent;
}

.dt-menu__divider,
.dt-dropdown-divider,
.folder-menu__divider,
.doc-menu__divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: var(--space-2) 0;
}

/* Desktop dropdown — adds the absolute positioning and hover/focus-within transition
   on top of the shared `.dt-menu` chrome above. */
.dt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--duration-fast) var(--ease-out);
  z-index: 1000;
}

.dt-nav-dropdown:hover .dt-dropdown-menu,
.dt-nav-dropdown:focus-within .dt-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}

/* ========== TOPBAR ACTIONS ========== */
.dt-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dt-topbar-actions .dt-icon-btn {
  background-color: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.dt-topbar-actions .dt-icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-inverse);
}

/* ========== MAIN CONTENT AREA ========== */
.dt-main {
  flex: 1;
  padding: var(--space-8) var(--space-6);
}

.dt-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.dt-container-narrow {
  max-width: 800px;
}

.dt-container-wide {
  max-width: 1400px;
}

/* ========== FOOTER UPDATES ========== */
.dt-footer {
  background-color: var(--primary-800);
  padding: var(--space-6) var(--space-6);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
}

/* ========== BOOTSTRAP NAVBAR OVERRIDES ========== */
.navbar.custom-navbar {
  background-color: var(--primary-800) !important;
}

.navbar.custom-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
}

.navbar.custom-navbar .nav-link:hover,
.navbar.custom-navbar .nav-link:focus {
  color: #fff !important;
}

.navbar.custom-navbar .dropdown-menu {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

.navbar.custom-navbar .dropdown-item {
  color: var(--text-primary);
}

.navbar.custom-navbar .dropdown-item:hover,
.navbar.custom-navbar .dropdown-item:focus {
  background-color: var(--bg-subtle);
  color: var(--text-primary);
}

.navbar.custom-navbar .dropdown-divider {
  border-color: var(--border-subtle);
}

/* ========== RESPONSIVE NAV ========== */
@media (max-width: 768px) {
  .dt-topbar {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .dt-topbar-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .dt-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
  }

  .dt-dropdown-item {
    color: rgba(255, 255, 255, 0.8);
  }

  .dt-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-inverse);
  }
}



/* ========== UTILITY MODIFIERS ========== */

/* Onboarding container with no top padding */
.dt-onboarding-container--flush-top {
  padding-top: 0;
}

/* Card variant for narrow centered content */
.dt-card--narrow-centered {
  max-width: 480px;
  margin: 0 auto;
}

/* Centered content container with generous padding */
.dt-container--centered-padded {
  text-align: center;
  padding: var(--space-16);
}

/* Flex container aligned to end */
.dt-flex-end {
  display: flex;
  justify-content: flex-end;
}

/* Inline form (no display block) */
.dt-form-inline {
  display: inline;
}

/* Large icon sizing (matches hero title size) */
.dt-icon-xl {
  font-size: 2.5rem;
  line-height: 1;
}

/* Full viewport body for chat layouts */
.dt-body-chat {
  height: 100dvh;
  overflow: hidden;
}

/* Table column widths */
.dt-col-qty {
  width: 120px;
}
.dt-col-actions {
  width: 80px;
}

/* ========== NOTICE ========== */
/* Standing banner for a state the user should act on — seats left unassigned, a
   subscription about to lapse. Bootstrap's .alert is unthemed in this app (the DT layouts
   set data-theme, not data-bs-theme), so it keeps a light palette on a dark page; this
   carries the token families instead and follows .dt-validation-summary's dark treatment. */
.dt-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.dt-notice--warning {
  background: var(--warning-100);
  color: var(--warning-600);
}

[data-theme="dark"] .dt-notice--warning {
  background-color: rgba(217, 119, 6, 0.15);
  color: #FCD34D;
}

/* ========== METER ========== */
/* Proportion bar for a used-of-available count (seats assigned, users active). */
.dt-meter {
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--bg-subtle);
  overflow: hidden;
}

.dt-meter__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--advisory-500);
}

/* ========== CONFIRMATION PANEL ========== */
/* Grouping box for a "here is what you are about to do" block — the order total, the people a
   purchase will affect. Reads as one object against the card so the buyer sees three groups
   instead of a flat column of paragraphs. Left-aligned, unlike .dt-info-box, because the rows
   inside it are label/value pairs that need a shared left edge. */
.dt-confirm-panel {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Group heading inside a card. .dt-section-label centers itself for marketing sections; in a
   card it has to share the left edge of the rows it labels, and it carries an optional inline
   action (Edit) on the far right. */
.dt-group-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
}

/* The inline action opts out of the label's uppercase treatment — styled as a label it reads
   as a second heading rather than something clickable. */
.dt-group-label__action {
  text-transform: none;
  letter-spacing: normal;
}

/* ========== ORDER SUMMARY ========== */
/* Money rows on a confirmation surface: label left, amount right. Unlike .dt-datum — which
   stacks label over value because equal-weight pairs compete — these pairs are deliberately
   unequal, so the amount is what the eye lands on and the label stays quiet. */
.dt-order-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.dt-order-row__amount {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Carries its own rule rather than a .dt-divider between the rows: that divider's 24px margins
   are sized for separating card sections and blow the panel apart. */
.dt-order-row--total {
  margin-bottom: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.dt-order-row--total .dt-order-row__amount {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

/* ========== SEAT LIST ========== */
/* One row per person a purchase creates an account for. Name and address stack in one left
   column so the addresses form a single scannable edge — the whole point of showing the list
   before an irreversible invitation send. Splitting them across the row's full width instead
   leaves the pair looking unrelated at small row counts. Row-level markers (You) sit right.

   Named `dt-seat-list`, not `dt-roster`: customer.css owns an unrelated `dt-roster-*` family
   (`dt-roster-item`, `dt-roster-framework`, …) and a BEM twin of that name would read as the
   same component to anyone aliasing legacy and BEM selectors the way `.dt-card__header` does. */
.dt-seat-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.dt-seat-list__row:first-child {
  padding-top: 0;
}

.dt-seat-list__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.dt-seat-list__person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dt-seat-list__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.dt-seat-list__email {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* ========== ORG MANAGEMENT SHELL ========== */
/* Layout: _LayoutDTOrg. The org surface keeps its own top-level nav instead of the customer
   app shell, because a manager is not required to hold a seat.

   Shell geometry follows the employee surface: the topbar and the breadcrumb strip run
   full-bleed, and each constrains its contents to the same column as the page body, so the
   brand, the crumbs, and the content share one left edge. The three consumers read the width
   from a single custom property — they drift apart the moment it is written out three times. */
:root {
  --org-content-max: 1100px;
  --org-content-gutter: var(--space-6);
}

/* The shell owns the vertical rhythm between the breadcrumb strip and the content. Pages that
   add their own `py-*` wrapper on top of this double up and sit lower than their siblings. */
.dt-org-container {
  max-width: var(--org-content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--org-content-gutter) var(--space-12);
  width: 100%;
}

/* The bar keeps its background full-bleed; the inner row carries the gutter instead. */
.dt-topbar--contained {
  padding-left: 0;
  padding-right: 0;
}

.dt-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--org-content-max);
  margin: 0 auto;
  padding: 0 var(--org-content-gutter);
}

/* Breadcrumb strip: a seated bar between the nav and the content, as on /eops. */
.dt-org-breadcrumbs {
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- Card anatomy on this surface ----------
   Scoped, not global: customer.css owns `.dt-card__header` / `__title` / `__footer` for the
   customer chain and loads after dt-components.css there. Declaring these globally would
   leak the properties customer.css does not set onto pages this work never touched. This
   surface never loads customer.css, so the scoped rules are unopposed here. */
.dt-org-container .dt-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* The header hosts a heading element, whose default bottom margin would push the bar open. */
.dt-org-container .dt-card__header > * {
  margin-bottom: 0;
}

/* Sits above the body content in the visual hierarchy. `.dt-section__header` is the opposite
   treatment — a small uppercase micro-label that reads as *smaller* than the prose beneath it,
   which is why body-only cards full of read-only values looked unstructured. */
.dt-org-container .dt-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.dt-org-container .dt-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* A trailing paragraph carries its own bottom margin, which reads as dead space against the
   body's padding — and as a gap above the footer on cards that have one. */
.dt-org-container .dt-card__body > :last-child,
.dt-org-container .dt-card__body--lg > :last-child {
  margin-bottom: 0;
}

.dt-org-footer {
  margin-top: auto;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}

/* Breadcrumbs arrive from the shared <breadcrumbs> tag helper, whose wrapper carries the
   legacy `site-light` class and an inner Bootstrap `container-lg`. site.css is not loaded on
   DT layouts, so `site-light` is inert; the helper's own bottom border is dropped in favour of
   the strip's, its container is re-constrained to the shared column, and the links pick up
   theme tokens rather than Bootstrap's defaults.

   The helper is shared with the employee and legacy customer layouts and hardcodes its own
   class attribute, so everything below is scoped restyling rather than a helper change. */
.dt-org-breadcrumbs > .border-bottom {
  border-bottom: 0 !important;
}

.dt-org-breadcrumbs [aria-label="breadcrumb"] {
  max-width: var(--org-content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--org-content-gutter);
}

.dt-org-breadcrumbs .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
}

.dt-org-breadcrumbs .breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
}

.dt-org-breadcrumbs .breadcrumb-item a:hover {
  color: var(--text-primary);
}

.dt-org-breadcrumbs .breadcrumb-item.active,
.dt-org-breadcrumbs .breadcrumb-item.active a {
  color: var(--text-primary);
}

.dt-org-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-tertiary);
}

/* The helper renders its optional "new record" action as a Bootstrap `btn btn-primary`. */
.dt-org-breadcrumbs .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  /* Matches .dt-btn--primary: the slate background is theme-stable, so the label has to stay
     light in both themes. --text-inverse flips to near-black in dark and fails AA on slate. */
  color: var(--primary-100);
  background-color: var(--primary-800);
  border: 1px solid var(--primary-800);
  border-radius: var(--radius-md);
}

.dt-org-breadcrumbs .btn-primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  color: var(--primary-100);
}

/* ========== ORG SURFACE: BOOTSTRAP RETHEME ==========
   Two kinds of markup on this surface can't be expressed in design-system classes:

   1. Shared tag helpers — <simple-table>, <paging>, <breadcrumbs> — emit Bootstrap markup and
      are shared with /eops and the legacy customer layout, so their output can't be changed
      here without a cross-surface blast radius.
   2. Bootstrap's JS-driven components (modal, offcanvas) would lose their behaviour if the
      markup were swapped.

   Bootstrap's own CSS is unthemed in this app — the DT layouts set `data-theme`, not
   `data-bs-theme` — so both render light on a dark page. Repaint them with the token families,
   the same approach employee.css takes for /eops, scoped so nothing leaks off this surface. */

/* ---------- Tables (from <simple-table>) ---------- */
.dt-org-container .table {
  --bs-table-bg: var(--bg-surface);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg: var(--bg-canvas);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-subtle);
  --bs-table-hover-color: var(--text-primary);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  margin-bottom: 0;
}

.dt-org-container .table > thead th {
  background-color: var(--bg-surface);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-subtle);
}

.dt-org-container .table > tbody > tr,
.dt-org-container .table td,
.dt-org-container .table th {
  border-color: var(--border-subtle);
}

.dt-org-container .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--bg-canvas);
  background-color: var(--bg-canvas);
}

.dt-org-container .table-padded th,
.dt-org-container .table-padded td {
  padding: var(--space-3) var(--space-6);
}

/* The helper wraps every table in `.border`; inside a card the card already draws the edge,
   and a nested border doubles up against the header's divider. */
.dt-org-container .dt-card .table-responsive .table.border {
  border: 0;
}

/* A table is the card's whole body, so its last row has to round with the card. */
.dt-org-container .dt-card > .table-responsive {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}

/* ---------- Pagination (from <paging>) ---------- */
.dt-org-container .pagination {
  --bs-pagination-bg: var(--bg-surface);
  --bs-pagination-color: var(--text-primary);
  --bs-pagination-border-color: var(--border-default);
  --bs-pagination-hover-bg: var(--bg-subtle);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-hover-border-color: var(--border-hover);
  --bs-pagination-focus-bg: var(--bg-subtle);
  --bs-pagination-focus-color: var(--text-primary);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--accent-subtle);
  --bs-pagination-active-border-color: var(--accent-primary);
  --bs-pagination-active-color: var(--text-primary);
  --bs-pagination-disabled-bg: var(--bg-subtle);
  --bs-pagination-disabled-border-color: var(--border-subtle);
  --bs-pagination-disabled-color: var(--text-tertiary);
  background-color: transparent;
  font-size: var(--text-sm);
  margin-bottom: 0;
}

/* ---------- Radio / checkbox groups ---------- */
/* asp-for on a bool or an enum list renders Bootstrap's `.form-check` shape; there is no
   design-system equivalent, so the control is repainted rather than replaced. */
.dt-org-container .form-check {
  margin-bottom: var(--space-2);
}

.dt-org-container .form-check-input {
  background-color: var(--bg-surface);
  border-color: var(--border-hover);
}

.dt-org-container .form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.dt-org-container .form-check-input:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.dt-org-container .form-check-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ---------- Bootstrap utilities left in place on dense report markup ---------- */
/* The usage-report lesson blocks are built from `.border`, `.badge` and `.text-muted`. They
   are display-only and heavily nested; repainting the utilities is cheaper and less risky
   than restructuring the report, and keeps them on the token families. */
.dt-org-container .border {
  border-color: var(--border-subtle) !important;
}

.dt-org-container .text-muted {
  color: var(--text-tertiary) !important;
}

.dt-org-container .badge {
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

/* ---------- Modal / offcanvas ---------- */
.dt-org-container .offcanvas {
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.dt-org-container .offcanvas-header {
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.dt-org-container .offcanvas-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 0;
}

/* Bootstrap draws the close glyph as a dark SVG background, invisible on a dark surface. */
[data-theme="dark"] .dt-org-container .btn-close {
  filter: invert(1) grayscale(100%);
}

.dt-org-container .modal-content {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}

.dt-org-container .modal-header,
.dt-org-container .modal-footer {
  background-color: var(--bg-subtle);
  border-color: var(--border-subtle);
}

.dt-org-container .modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 0;
}

.dt-org-container .modal-footer {
  gap: var(--space-2);
}

/* Bootstrap spaces footer children with its own margins; the gap above replaces them. */
.dt-org-container .modal-footer > * {
  margin: 0;
}
/* Date range picker -------------------------------------------------------- */
.dtrp {
    position: relative;
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.dtrp__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 220px;
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.dtrp__trigger:hover { border-color: var(--border-hover); }
.dtrp__trigger-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-tertiary); }
.dtrp__trigger-caret { flex-shrink: 0; width: 14px; height: 14px; color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-out); }
.dtrp[data-open="true"] .dtrp__trigger-caret { transform: rotate(180deg); }

.dtrp__trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-medium);
}

.dtrp__pop {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 1050;
    display: none;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--bg-surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.dtrp[data-open="true"] .dtrp__pop { display: flex; }
.dtrp__pop--right { left: auto; right: 0; }

.dtrp__presets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    padding-right: var(--space-2);
    border-right: 1px solid var(--border-subtle);
}

.dtrp__preset {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.dtrp__preset:not(.dt-is-active):hover { background: var(--bg-subtle); color: var(--text-primary); }
.dtrp__preset.dt-is-active { color: var(--text-primary); font-weight: var(--font-semibold); }

.dtrp__custom {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 256px;
}

.dtrp__custom[hidden] { display: none; }
.dtrp__fields-row { display: flex; gap: var(--space-2); }
.dtrp__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.dtrp__input { width: 100%; }
.dtrp__cal { display: flex; flex-direction: column; gap: var(--space-1); }
.dtrp__cal-header { display: flex; align-items: center; gap: var(--space-1); }

.dtrp__cal-nav,
.dtrp__cal-title,
.dtrp__cal-link {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.dtrp__cal-nav {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtrp__cal-nav:hover:not(:disabled),
.dtrp__cal-title:hover,
.dtrp__cal-link:hover { background: var(--bg-subtle); color: var(--text-primary); }
.dtrp__cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.dtrp__cal-title {
    flex: 1;
    height: 28px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.dtrp__cal-grid--days { display: grid; grid-template-columns: repeat(7, 1fr); }
.dtrp__cal-grid--periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

.dtrp__dow {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    padding-bottom: 2px;
}

.dtrp__day,
.dtrp__period {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.dtrp__period { height: 40px; border-radius: var(--radius-sm); }
.dtrp__day:hover:not(:disabled):not(.dtrp__day--start):not(.dtrp__day--end):not(.dtrp__day--in-range):not(.dtrp__day--preview-end),
.dtrp__period:hover:not(:disabled) { background: var(--bg-subtle); }
.dtrp__day--muted,
.dtrp__period--muted { color: var(--text-muted); }
.dtrp__day--today { font-weight: var(--font-semibold); box-shadow: inset 0 0 0 1px var(--border-strong); border-radius: var(--radius-sm); }
.dtrp__day--in-range,
.dtrp__day--preview-end { background: var(--accent-subtle); }
.dtrp__day--start,
.dtrp__day--end {
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-weight: var(--font-semibold);
}

.dtrp__day--start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dtrp__day--end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dtrp__day--start.dtrp__day--end { border-radius: var(--radius-sm); }
.dtrp__day:disabled,
.dtrp__period:disabled { color: var(--text-disabled); opacity: 0.4; cursor: not-allowed; }
.dtrp__cal-footer { display: flex; justify-content: space-between; padding-top: var(--space-1); }
.dtrp__cal-link { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.dtrp__cal-link:hover { color: var(--accent-primary); }
.dtrp__error { min-height: 1em; font-size: var(--text-xs); color: var(--error-500); }
.dtrp__actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-1); }

@media (max-width: 560px) {
    .dtrp[data-open="true"] .dtrp__pop { flex-direction: column; }
    .dtrp__presets {
        flex-direction: row;
        flex-wrap: wrap;
        padding-right: 0;
        padding-bottom: var(--space-2);
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }
}

/* ========== GUIDED TOUR ========== */
.dt-guided-tour-popover.driver-popover {
  width: min(340px, calc(100vw - 32px));
  max-width: 340px;
  padding: 18px;
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}

.dt-guided-tour-popover .driver-popover-title::before {
  content: "Guided tour";
  display: block;
  margin-bottom: 4px;
  color: var(--accent-primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.dt-guided-tour-popover .driver-popover-title {
  padding-right: 24px;
  font-size: 1rem;
  line-height: 1.35;
}

.dt-guided-tour-popover .driver-popover-description {
  color: var(--text-secondary);
  font-size: .84rem;
  line-height: 1.55;
}

.dt-guided-tour-popover .driver-popover-progress-text,
.dt-guided-tour-popover .driver-popover-close-btn {
  color: var(--text-muted);
}

.dt-guided-tour-popover .driver-popover-progress-text {
  font-size: .75rem;
}

/* Driver's default 15px footer margin reads as extra space low in the card
   against the even 18px outer padding; 10px balances the vertical rhythm. */
.dt-guided-tour-popover .driver-popover-footer {
  margin-top: 10px;
}

.dt-guided-tour-popover .driver-popover-footer-btn {
  padding: 7px 12px;
  border-color: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 600;
}

/* Driver's own footer-btn hover/focus paints a near-white (#f7f7f7) background,
   which in dark mode is white-on-white and hides the Back label. Re-assert the
   token hover state at higher specificity so it wins. The primary (Next/Done)
   hover rule below comes later, so it still wins for that button. */
.dt-guided-tour-popover .driver-popover-footer-btn:hover,
.dt-guided-tour-popover .driver-popover-footer-btn:focus {
  background: var(--bg-subtle);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.dt-guided-tour-popover .driver-popover-next-btn {
  border-color: var(--primary-800);
  background: var(--primary-800);
  color: var(--primary-100);
}

.dt-guided-tour-popover .driver-popover-next-btn:hover,
.dt-guided-tour-popover .driver-popover-next-btn:focus {
  border-color: var(--primary-700);
  background: var(--primary-700);
  color: var(--primary-100);
}

[data-theme="dark"] .dt-guided-tour-popover .driver-popover-next-btn {
  border-color: var(--primary-600);
  background: var(--primary-600);
}

[data-theme="dark"] .dt-guided-tour-popover .driver-popover-next-btn:hover,
[data-theme="dark"] .dt-guided-tour-popover .driver-popover-next-btn:focus {
  border-color: var(--primary-700);
  background: var(--primary-700);
}

.dt-guided-tour-popover .driver-popover-arrow {
  border-color: var(--bg-surface);
}

.dt-guided-tour-popover .driver-popover-arrow-side-left {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.dt-guided-tour-popover .driver-popover-arrow-side-right {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.dt-guided-tour-popover .driver-popover-arrow-side-top {
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.dt-guided-tour-popover .driver-popover-arrow-side-bottom {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

/* Footer buttons (Back / Next / Done) carry the shared amber focus ring. The
   close (×) is deliberately excluded: Driver auto-focuses it when a tour starts,
   and a :focus-visible ring there paints an amber box on auto-start but not on a
   mouse-triggered replay — an inconsistency that reads as a bug. Driver's own
   focus color-change still cues the × for keyboard users. */
.dt-guided-tour-popover .driver-popover-footer-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.driver-active-element {
  box-shadow:
    0 0 0 2px var(--accent-primary),
    0 0 0 6px color-mix(in srgb, var(--accent-primary) 30%, transparent),
    0 0 16px 2px color-mix(in srgb, var(--accent-primary) 45%, transparent) !important;
}