/* DataTable module — Notion-lite */

/* Inline cell save: button spinner (datatable.js dtWithCellSavePromise) */
.vault-dt-cell--saving {
  position: relative;
}
.vault-dt-cell-saving-spinner.vault-loader--button {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  z-index: 4;
  pointer-events: none;
}

/* Tools page: fill content area so DataTable uses full width and height */
.vault-tools-page--datatable .vault-settings-header--tools {
  padding-top: 0.35rem;
  padding-bottom: 0.22rem;
  flex-shrink: 0;
}
#datatable-page-title.vault-settings-title--tools {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-tools-page--datatable .vault-tools-page-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  /* Global .vault-tools-page-content uses padding-top: 1rem — flush toolbar under title row */
  padding-top: 0;
  /* Full-height grid: safe-area only (footer spacing lives on add-row / pagination) */
  padding-bottom: max(0.3rem, env(safe-area-inset-bottom, 0px));
}
.vault-tools-page--datatable .vault-tools-page-body {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vault-tools-page--datatable .vault-tools-page-body {
  position: relative;
  background: transparent !important;
}
.vault-tools-page--datatable .vault-tools-page-body .vault-dt {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Standalone Data tables page (#sidepanel-datatable): match content width to the page header row.
   Global .vault-tools-page-content adds horizontal padding that does not apply to .vault-settings-header,
   so the table block looked narrower than “Data tables” + close. */
#sidepanel-datatable.vault-tools-page--datatable .vault-tools-page-content {
  padding-left: 0;
  padding-right: 0;
}
#sidepanel-datatable.vault-tools-page--datatable .vault-dt__main-body {
  padding-left: 0;
  padding-right: 0;
}
#sidepanel-datatable.vault-tools-page--datatable .vault-dt-add-row-bar {
  padding-left: 2.25rem;
}

/* Project panel: Data tables tab — same layout as tools page so datatable fills height */
.vault-panel-datatable-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.vault-panel-datatable-body .vault-dt {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* PWA / notch: keep add-row above home indicator without a large empty gap under the grid */
.vault-panel-datatable-body .vault-dt-add-row-bar,
.vault-tools-page--datatable .vault-dt-add-row-bar {
  padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

/* Tighten default main-body bottom pad so the grid + footer fill the column (list view keeps its own rule). */
.vault-panel-datatable-body .vault-dt__main-body:not(:has(> .vault-dt__table-list-wrap)),
.vault-tools-page--datatable .vault-dt__main-body:not(:has(> .vault-dt__table-list-wrap)) {
  padding-bottom: 0.35rem;
}
/* Project panel open grid: drop extra horizontal inset on main-body so progress/table/pagination/add-row
   line up with the header row (matches #sidepanel-datatable .vault-dt__main-body). Table list keeps base padding. */
#panel-datatable-body .vault-dt__main-body:not(:has(> .vault-dt__table-list-wrap)) {
  padding-left: 0;
  padding-right: 0;
}

/*
 * Vertical rhythm: table list — search row → filter row → list → pagination.
 * Tools + project panel share the same table-list title and inline search+filter row.
 */
/* Non–vault-app-open: still trim dead bottom padding when Data tables tab is active */
.vault-panel-content:has(#tab-panel-datatables.active) {
  padding-top: 0.2rem;
  padding-bottom: max(0.3rem, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.vault-tools-page--datatable .vault-tools-page-body .vault-dt,
.vault-panel-datatable-body .vault-dt {
  padding-top: 0.65rem;
}
.vault-app.vault-panel-open .vault-panel-datatable-body .vault-dt {
  padding-top: var(--vault-panel-chrome-gap, 0.4rem);
}
.vault-panel-datatable-body .vault-dt:has(.vault-dt__table-list-wrap) {
  padding-top: 0.5rem;
}
.vault-app.vault-panel-open .vault-panel-datatable-body .vault-dt:has(.vault-dt__table-list-wrap) {
  padding-top: var(--vault-panel-chrome-gap, 0.36rem);
}
.vault-panel-datatable-body .vault-dt:has(.vault-dt__table-list-wrap) .vault-dt__main-body {
  padding-top: 0.12rem;
  padding-bottom: 0.5rem;
}
.vault-panel-datatable-body .vault-dt:has(.vault-dt__table-list-wrap) .vault-dt__table-list-wrap {
  padding-top: 0.15rem;
}
.vault-tools-page--datatable .vault-dt__header-row,
.vault-panel-datatable-body .vault-dt__header-row {
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
}

/* Project panel — open table: table name above search row (app header shows project + “Data tables”) */
.vault-panel-datatable-body .vault-dt__header-row:has(.vault-dt__grid-context-title) {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.2rem;
}
.vault-panel-datatable-body .vault-dt__grid-context-title {
  flex: 1 1 100%;
  min-width: 0;
  order: 2;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--vault-text, #111);
  margin: 0;
  padding: 0.05rem 0 0.15rem;
  line-height: 1.25;
  box-sizing: border-box;
}

/* Project panel — open grid: same header rhythm as Tools page (linked-tables / bundle nav full-width row above search via shared `order: -1`). */
.vault-panel-datatable-body .vault-dt--project-page.vault-dt--chrome-table-name .vault-dt__header-row--linked-tables-strip,
.vault-panel-datatable-body .vault-dt--project-page.vault-dt--chrome-table-name .vault-dt__header-row--bundle-nav {
  row-gap: 0.12rem;
}
.vault-panel-datatable-body .vault-dt--project-page.vault-dt--chrome-table-name .vault-dt__header-row .vault-dt__toggle-nav {
  order: 0;
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  right: auto;
  z-index: 5;
  background: transparent;
  padding-left: 0;
}
.vault-panel-datatable-body .vault-dt--project-page.vault-dt--chrome-table-name .vault-dt__header-row > .vault-dt__header-search-toolbar {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
}
/* Tables list: no duplicate sidebar control (list is in main body). */
.vault-panel-datatable-body .vault-dt--project-page:not(.vault-dt--chrome-table-name) .vault-dt__header-row .vault-dt__toggle-nav {
  display: none !important;
}
/* Toggle is still in DOM (display:none); collapse the empty metadata row without breaking :has(.vault-dt__toggle-nav) rules elsewhere. */
.vault-panel-datatable-body .vault-dt--project-page:not(.vault-dt--chrome-table-name) .vault-dt__header-row:not(:has(.vault-dt__header-center)) {
  display: none;
}

.vault-dt {
  display: flex;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: transparent;
  position: relative;
}

/* Full-area loader while locale prefs fetch before first mount (any host). */
.vault-dt__locale-prefetch-host {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  width: 100%;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Project panel: one overlay until first table list + main content (or error) is ready. */
.vault-dt__project-boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vault-bg, rgba(248, 250, 252, 0.96));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vault-panel-datatable-body .vault-dt__project-boot-overlay {
  border-radius: 0;
}

/* Type-to-confirm: highlight the text user must type (bold, larger, primary) */
.vault-dt-confirm-highlight {
  font-weight: 700;
  font-size: 1.1em;
  color: var(--vault-primary, #10b981);
}

/* Tables list: sidebar panel uses shared sheet width; solid surface (see styles .vault-side-sheet-overlay__panel) */
.vault-dt__sidebar.vault-side-sheet-overlay__panel {
  background: var(--vault-bg-elevated, #fff);
}
.vault-dt__sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Tables list: main area — search row, then filter row; sidebar — search in header, filter below */
.vault-dt__filter-search-row {
  flex-shrink: 0;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.vault-dt__table-list-search-row {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}
.vault-dt__filter-search-filter-inline {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
/* Main tables list (Tools + vault): search column grows; filter + Linked live in trailing cluster */
.vault-dt__table-list-search-filter-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 2.375rem;
}
.vault-dt__table-list-search-filter-inline .vault-dt__main-tables-list-search-slot {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  min-height: 2.375rem;
  display: flex;
  align-items: center;
}
.vault-dt__table-list-search-row-trailing {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  z-index: 0;
}
.vault-dt__main-tables-list-search-field {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s ease;
  box-sizing: border-box;
  border-radius: 0.375rem;
}
/* Same expand pattern as `.vault-dt__header-search-toolbar .vault-dt__table-search-field:focus-within`: full row width, trailing chrome under overlay. */
.vault-dt__table-list-search-filter-inline:has(.vault-dt__main-tables-list-search-field:focus-within) {
  z-index: 2;
  overflow: visible;
}
.vault-dt__table-list-search-filter-inline:has(.vault-dt__main-tables-list-search-field:focus-within) .vault-dt__table-list-search-row-trailing {
  z-index: 0;
}
.vault-dt__table-list-search-filter-inline .vault-dt__main-tables-list-search-field:focus-within {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  display: flex;
  align-items: center;
  background: var(--vault-bg-elevated, #fff);
  border-radius: 0.375rem;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.vault-dt__table-list-linked-inline-wrap {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.vault-dt__table-list-linked-inline-wrap .vault-dt__table-list-show-linked {
  margin: 0;
  white-space: nowrap;
}
.vault-dt__table-list-search-filter-inline .vault-dt__tables-list-search,
.vault-dt__filter-search-filter-inline .vault-dt__tables-list-search {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.vault-dt__table-list-search-row-trailing .vault-dt__table-list-filter {
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 7.5rem;
  max-width: 11rem;
  width: auto;
  align-self: center;
}
.vault-dt__filter-search-filter-inline .vault-dt__sidebar-filter-select,
.vault-dt__filter-search-filter-inline .vault-dt__filter-select {
  flex: 0 0 auto;
  min-width: 7.25rem;
  max-width: 11rem;
  width: auto;
  align-self: center;
}
@media (max-width: 340px) {
  .vault-dt__table-list-search-filter-inline {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .vault-dt__table-list-search-filter-inline .vault-dt__main-tables-list-search-slot {
    grid-column: 1;
    grid-row: 1;
  }
  .vault-dt__table-list-search-row-trailing {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .vault-dt__filter-search-filter-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .vault-dt__table-list-search-row-trailing .vault-dt__table-list-filter,
  .vault-dt__filter-search-filter-inline .vault-dt__sidebar-filter-select {
    max-width: 100%;
    width: 100%;
  }
}
.vault-dt__tables-list-search-wrap-inner {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
.vault-dt__tables-list-search-wrap-inner .vault-input-search-icon-wrap__icon {
  left: 0.45rem;
}
.vault-dt__tables-list-search-wrap-inner .vault-dt__tables-list-search {
  padding-left: 2rem;
}
.vault-dt__tables-list-search {
  width: 100%;
  max-width: 100%;
  padding: 0.35rem 0.5rem 0.35rem 0.6rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  background: var(--vault-bg, #fff);
  color: var(--vault-text, #111);
  box-sizing: border-box;
}
.vault-dt__tables-list-search::placeholder {
  color: var(--vault-text-muted, #94a3b8);
}

/* Header row: Tables button left of page title */
.vault-dt__header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.15rem 0 0.12rem;
  margin-bottom: 0;
}
.vault-dt__header-row.vault-dt__header-row--linked-tables-strip,
.vault-dt__header-row.vault-dt__header-row--bundle-nav {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 0.25rem;
}
/* Full-width row above burger + title + search (linked tables switcher) */
.vault-dt-linked-tables-strip-host,
.vault-dt-inventory-bundle-nav-host {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  order: -1;
}
/* Strip still mounted for graph/order; switching is via related-tables dropdowns (panel header, tools header, sticky bar). */
.vault-dt .vault-dt-linked-tables-strip-host {
  display: none !important;
}

/* Linked tables switcher: chevron next to chrome title (no bottom sticky bar). */
.vault-dt-linked-tables-title-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-width: 2rem;
  min-height: 2rem;
  border: none;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  color: var(--vault-primary, #6366f1);
  cursor: pointer;
  line-height: 0;
  border-radius: 0.375rem;
  font-size: inherit;
}
@media (hover: hover) {
  .vault-dt-linked-tables-title-trigger:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
  }
}
.vault-dt-linked-tables-title-trigger[aria-expanded='true'] {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
.vault-dt-linked-tables-title-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 45%, transparent);
  outline-offset: 2px;
}
.vault-dt-linked-tables-title-trigger__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  transition: transform 0.18s ease;
}
.vault-dt-linked-tables-title-trigger[aria-expanded="true"] .vault-dt-linked-tables-title-trigger__icon {
  transform: rotate(180deg);
}
.vault-dt-linked-tables-title-trigger__icon svg {
  width: 100%;
  height: 100%;
}
.vault-panel-table-title-row .vault-dt-linked-tables-title-trigger,
.vault-datatable-fs-exit-bar__title-row .vault-dt-linked-tables-title-trigger {
  font-size: 1.0625rem;
}
.vault-header-datatable-linked-tables-host .vault-dt-linked-tables-title-trigger {
  font-size: 1.25rem;
}
@media (min-width: 480px) {
  .vault-header-datatable-linked-tables-host .vault-dt-linked-tables-title-trigger {
    font-size: 1.3125rem;
  }
}
.vault-dt-linked-tables-dropdown-panel.vault-dropdown-panel {
  min-width: 12rem;
}
/* When the sidebar toggle is in `.vault-dt__header-row` (e.g. after tab switch / hideAll), keep layout order. */
.vault-dt--project-page .vault-dt__header-row .vault-dt__toggle-nav {
  order: 0;
  flex-shrink: 0;
}

/* Hide empty list-only header row when toggle lives in `#vault-header-datatable-toggle-host` */
.vault-dt--project-page .vault-dt__header-row:not(:has(.vault-dt__toggle-nav)):has(.vault-dt__main-title-text:empty):not(:has(.vault-dt__header-center)) {
  display: none;
}

/* Table name shown in tools page title (#datatable-page-title) or project tab (#panel-current-tab-name); hide duplicate in-row title */
.vault-dt--chrome-table-name .vault-dt__main-title {
  display: none;
}

/* Header row: burger, table name, search (center), then actions (add/sort/filters/chart/gear) */
.vault-dt__header-row .vault-dt__toggle-nav {
  order: 0;
}
.vault-dt__header-row .vault-dt__table-name-actions {
  order: 1;
}
.vault-dt__header-row .vault-dt__main-title {
  order: 2;
  flex-shrink: 0;
}
.vault-dt__header-row > .vault-dt__header-center {
  order: 3;
}
.vault-dt__header-row > .vault-dt__header-actions {
  order: 4;
}
/* Grid toolbar: search + row actions share one flex row; expanded search overlays full toolbar width (see `.vault-dt__table-search-*`). */
.vault-dt__header-row > .vault-dt__header-search-toolbar {
  order: 3;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.vault-dt__header-row > .vault-dt__header-search-toolbar .vault-dt__header-center {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}
.vault-dt__header-row > .vault-dt__header-search-toolbar .vault-dt__header-toolbar-end {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.vault-dt__header-search-toolbar .vault-dt__header-toolbar-end .vault-dt__header-actions {
  margin-left: 0;
}
.vault-dt__header-search-toolbar .vault-dt__header-refresh-slot {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.vault-dt__header-search-toolbar .vault-dt__header-refresh-slot:empty {
  display: none;
}
.vault-dt__header-search-toolbar .vault-dt__header-refresh-slot .vault-settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  color: var(--vault-text-muted, #64748b);
  background: transparent;
}
@media (hover: hover) {
  .vault-dt__header-search-toolbar .vault-dt__header-refresh-slot .vault-settings-close:hover {
    background: var(--vault-surface-hover, rgba(148, 163, 184, 0.15));
    color: var(--vault-text, #0f172a);
  }
}
.vault-dt__header-search-toolbar .vault-dt__header-actions {
  flex-shrink: 0;
}
.vault-dt__header-search-toolbar .vault-dt__table-search-slot {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.vault-dt__header-search-toolbar .vault-dt__table-search-field {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s ease;
}
.vault-dt__header-search-toolbar .vault-dt__table-search-field:focus-within {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 0;
  bottom: 0;
  width: auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: var(--vault-bg-elevated, #fff);
  border-radius: 0.375rem;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.vault-dt__header-search-toolbar .vault-dt__header-center:has(.vault-dt__table-search-field:focus-within),
.vault-dt__header-search-toolbar:has(.vault-dt__table-search-field:focus-within) {
  overflow: visible;
}
.vault-dt__header-search-toolbar .vault-dt__header-center:has(.vault-dt__table-search-field:focus-within) {
  z-index: 3;
}
/* Keep Gantt / cash-flow controls *below* the expanded search overlay (`.vault-dt__table-search-field:focus-within` is z-index: 2). Raising them above the overlay made the chart icon sit on top of the search field. */
.vault-dt__header-search-toolbar .vault-dt__header-center:has(.vault-dt__table-search-field:focus-within) .vault-dt__toolbar-charts-fallback,
.vault-dt__header-search-toolbar .vault-dt__header-center:has(.vault-dt__table-search-field:focus-within) .vault-dt__toolbar-saved-views-menu,
.vault-dt__header-search-toolbar .vault-dt__header-center:has(.vault-dt__table-search-field:focus-within) .vault-dt__display-mode-menu {
  position: relative;
  z-index: 0;
}
.vault-dt__display-mode-menu {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* Same footprint as charts / saved-views / 2rem icon buttons (no boxed border). */
.vault-dt__header-center .vault-dt__display-mode-menu .vault-hover-dropdown__trigger {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  box-shadow: none;
  color: #374151;
  font-size: inherit;
}
.vault-dt__header-center .vault-dt__display-mode-menu .vault-hover-dropdown__trigger-icon svg,
.vault-dt__header-center .vault-dt__display-mode-menu .vault-hover-dropdown__trigger-icon img {
  width: 18px !important;
  height: 18px !important;
}
.vault-dt__header-center .vault-dt__display-mode-menu .vault-hover-dropdown__trigger:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}

/* Card layout modal: button-style option rows (native checkbox + visuals). */
.vault-dt-card-layout-modal__opts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vault-dt-card-layout-modal__opts-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}
.vault-dt-card-layout-modal__opts--scroll {
  max-height: min(40vh, 16rem);
  overflow-y: auto;
}
.vault-dt-card-layout-modal__opts--info .vault-dt-card-layout-modal__section-title {
  margin-top: 0.5rem;
}
/* Card layout modal: slightly tighter header, stronger title (modalClass adds vault-modal--card-layout on .vault-modal). */
.vault-modal--card-layout .vault-modal-header {
  padding-top: 0.65rem;
  padding-bottom: 0.35rem;
}
.vault-modal--card-layout .vault-modal-title {
  font-size: 1.125rem;
}
.vault-dt-card-layout-modal__chip-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.25rem;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.85;
}
.vault-dt-card-layout-modal__chip-actions svg {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.vault-dt-card-relation-cell-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  min-width: 0;
}
.vault-dt-card-relation-cell-wrap .vault-dt-relation-cell {
  flex: 1 1 auto;
  min-width: 0;
}
.vault-dt-card__field-value .vault-dt-cell-price-wrap,
.vault-dt-card__field-value .vault-dt-card-number-input,
.vault-dt-card__field-value .vault-dt-card-text-input {
  max-width: 100%;
}
/* Click-to-edit affordance (not select / multiselect / toggle) */
.vault-dt-card__field-value--click-hint {
  border: 1px dashed var(--vault-border, #cbd5e1);
  border-radius: 0.35rem;
  padding: 0.15rem 0.3rem;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.vault-dt-card__field-value--click-hint .vault-dt-cell-price-wrap--clickable {
  margin: 0;
}
.vault-dt-card-number-input,
.vault-dt-card-text-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.8125rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.25rem;
  background: var(--vault-bg, #fff);
}
.vault-dt-card__info-row--meta {
  opacity: 0.92;
}
.vault-checkbox-btn-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem 0.35rem 0.4rem;
  margin: 0;
  box-sizing: border-box;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.16);
  color: var(--vault-text, #e2e8f0);
  transition: background 0.15s ease, opacity 0.15s ease;
}
@media (hover: hover) {
  .vault-checkbox-btn-row:hover:not(.vault-checkbox-btn-row--disabled) {
    background: rgba(148, 163, 184, 0.24);
  }
}
.vault-checkbox-btn-row--selected {
  background: color-mix(in srgb, var(--vault-primary, #14b8a6) 22%, rgba(148, 163, 184, 0.1));
}
.vault-checkbox-btn-row--selected .vault-checkbox-btn-row__label {
  color: var(--vault-text, #f1f5f9);
}
.vault-checkbox-btn-row--disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.vault-checkbox-btn-row--disabled .vault-checkbox-btn-row__main {
  pointer-events: none;
}
.vault-checkbox-btn-row:focus-within:not(.vault-checkbox-btn-row--disabled) {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #2dd4bf) 55%, transparent);
  outline-offset: 1px;
}
.vault-checkbox-btn-row__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
}
.vault-checkbox-btn-row__main {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: min(100%, 16rem);
  pointer-events: none;
}
.vault-checkbox-btn-row__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(226, 232, 240, 0.88);
}
.vault-checkbox-btn-row__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}
.vault-checkbox-btn-row__icon.vault-checkbox-btn-row__icon--user-currency {
  width: auto;
  min-width: 1.25rem;
  max-width: 3rem;
  padding: 0 0.1rem;
}
.vault-checkbox-btn-row__icon .vault-dt-user-currency-icon {
  font-size: 0.8125rem !important;
  line-height: 1 !important;
}
.vault-checkbox-btn-row__label {
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
/* Light settings modal */
.vault-modal--settings .vault-checkbox-btn-row {
  background: var(--vault-bg-muted, #f1f5f9);
  color: var(--vault-text, #334155);
}
@media (hover: hover) {
  .vault-modal--settings .vault-checkbox-btn-row:hover {
    background: var(--vault-bg-hover, #e2e8f0);
  }
}
.vault-modal--settings .vault-checkbox-btn-row--selected {
  background: color-mix(in srgb, var(--vault-primary, #14b8a6) 18%, var(--vault-bg-elevated, #fff));
}
.vault-modal--settings .vault-checkbox-btn-row--selected .vault-checkbox-btn-row__label {
  color: var(--vault-text, #0f172a);
}
.vault-modal--settings .vault-checkbox-btn-row__icon {
  color: var(--vault-text-muted, #64748b);
}
.vault-modal--settings .vault-checkbox-btn-row--selected .vault-checkbox-btn-row__icon {
  color: var(--vault-primary, #0f766e);
}

/* Table actions (gear) and recurring chart live in `.vault-dt__header-actions` on the right. */
/* Three-dot actions (legacy / unused in default layout) */
.vault-dt__table-name-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.vault-dt__table-name-actions-btn {
  padding: 0.35rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vault-text-subtle, #64748b);
  cursor: pointer;
}
@media (hover: hover) {
  .vault-dt__table-name-actions-btn:hover {
    background: var(--vault-bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--vault-text, #111);
  }
}

.vault-dt__main-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt__header-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}
/* Toolbar: Gantt sits after the search slot; drop column-header sticky/shadow. */
.vault-dt__header-center .vault-dt__gantt-toolbar-btn {
  flex-shrink: 0;
  position: relative;
  right: auto;
  margin-left: auto;
  box-shadow: none;
  z-index: 1;
}
.vault-dt__header-center .vault-dt__toolbar-charts-menu {
  flex-shrink: 0;
  position: relative;
  margin-left: auto;
  z-index: 1;
}
/* Match .vault-dt__header-actions-btns .vault-dt__icon-btn (2rem, 18px glyph) */
.vault-dt__header-center .vault-dt__toolbar-charts-menu .vault-hover-dropdown__trigger {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  box-shadow: none;
  color: #374151;
  font-size: inherit;
}
.vault-dt__header-center .vault-dt__toolbar-charts-menu .vault-hover-dropdown__trigger-icon svg,
.vault-dt__header-center .vault-dt__toolbar-charts-menu .vault-hover-dropdown__trigger-icon img {
  width: 18px !important;
  height: 18px !important;
}
.vault-dt__header-center .vault-dt__toolbar-charts-menu .vault-hover-dropdown__trigger:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
/* Card view: toolbar charts menu lists table + per-column actions — scroll when many columns. */
.vault-dt__toolbar-charts-menu--card-rich .vault-hover-dropdown__menu {
  min-width: 14rem;
  max-height: min(70vh, 24rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.vault-dt__toolbar-charts-menu--card-rich .vault-hover-dropdown__item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Saved views (named presets): same control size as charts menu; sits between search and charts when both exist */
.vault-dt__header-center .vault-dt__toolbar-saved-views-menu {
  flex-shrink: 0;
  position: relative;
  margin-left: 0;
  z-index: 1;
}
/* Pin saved-views to the search row end when no chart controls share the row */
.vault-dt__header-center:not(:has(.vault-dt__toolbar-charts-menu)):not(:has(.vault-dt__toolbar-charts-fallback)):not(:has(.vault-dt__gantt-toolbar-btn)) .vault-dt__toolbar-saved-views-menu {
  margin-left: auto;
}
.vault-dt__header-center .vault-dt__toolbar-saved-views-menu .vault-hover-dropdown__trigger {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  box-shadow: none;
  color: #374151;
  font-size: inherit;
}
.vault-dt__header-center .vault-dt__toolbar-saved-views-menu .vault-hover-dropdown__trigger-icon svg,
.vault-dt__header-center .vault-dt__toolbar-saved-views-menu .vault-hover-dropdown__trigger-icon img {
  width: 18px !important;
  height: 18px !important;
}
.vault-dt__header-center .vault-dt__toolbar-saved-views-menu .vault-hover-dropdown__trigger:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
.vault-dt__toolbar-charts-fallback {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}
.vault-dt__toolbar-charts-fallback .vault-dt-grid__th-column-chart-btn {
  position: relative;
  margin-left: 0;
  box-shadow: none;
}
.vault-dt__toolbar-charts-fallback__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 10.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.vault-dt__toolbar-charts-fallback__lead-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.vault-dt__toolbar-charts-fallback__lead-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.vault-dt__toolbar-charts-fallback__lead-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  text-align: left;
}
/* Gantt / cashflow / charts fallback in search row: same 2rem control as gear, filters, etc. (column-header rule is padding-only + sticky). */
.vault-dt__header-center .vault-dt-grid__th-column-chart-btn,
.vault-dt__header-center .vault-dt__gantt-toolbar-btn {
  position: relative;
  right: auto;
  margin-left: 0;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0.375rem;
  background: transparent;
  box-shadow: none;
}
.vault-dt__header-center .vault-dt-grid__th-column-chart-btn svg,
.vault-dt__header-center .vault-dt__gantt-toolbar-btn svg {
  width: 18px;
  height: 18px;
}

/* Gantt modal (start/end timeline): chart mount */
.vault-dt-gantt-modal-body {
  min-width: 0;
}
.vault-dt-gantt-mount {
  min-width: 0;
}
.vault-dt__add-filters-btn {
  flex-shrink: 0;
  padding: 0.35rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  background: var(--vault-bg-elevated, #fff);
  color: var(--vault-text-subtle, #64748b);
  cursor: pointer;
}
@media (hover: hover) {
  .vault-dt__add-filters-btn:hover {
    background: var(--vault-bg-hover, #f8fafc);
    color: var(--vault-primary, #10b981);
  }
}
.vault-dt__filters-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  padding: 0.35rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  background: var(--vault-bg-hover, #f1f5f9);
  color: var(--vault-text, #1e293b);
}
.vault-dt__filters-toggle-btn:not(.vault-dt__filters-toggle-btn--collapsed) {
  background: color-mix(in srgb, var(--vault-primary, #10b981) 14%, transparent);
  color: var(--vault-primary, #10b981);
}
@media (hover: hover) {
  .vault-dt__filters-toggle-btn:hover {
    background: var(--vault-bg-hover, #f8fafc);
    color: var(--vault-primary, #10b981);
  }
  .vault-dt__filters-toggle-btn:not(.vault-dt__filters-toggle-btn--collapsed):hover {
    background: color-mix(in srgb, var(--vault-primary, #10b981) 22%, transparent);
  }
}
.vault-dt__filters-toggle-btn .vault-dt__filters-toggle-chevron {
  display: inline-flex;
  opacity: 0.8;
  transition: transform 0.2s ease;
}
.vault-dt__filters-toggle-btn--collapsed .vault-dt__filters-toggle-chevron {
  transform: rotate(-90deg);
}
.vault-dt__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
.vault-dt__search-wrap .vault-input-search-icon-wrap__icon {
  left: 0.45rem;
}
.vault-dt__search-wrap:has(.vault-input-search-icon-wrap__icon) .vault-dt__search-input {
  padding-left: 2.05rem;
}
@media (min-width: 520px) {
  .vault-dt__search-wrap {
    min-width: 10rem;
  }
}
@media (min-width: 768px) {
  .vault-dt__search-wrap {
    min-width: 14rem;
  }
}
.vault-dt__search-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  font-size: 0.875rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--vault-bg, #fff);
  color: var(--vault-text, #111);
  box-sizing: border-box;
}
.vault-dt__search-wrap .vault-dt__search-clear {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--vault-text-muted, #94a3b8);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt__search-wrap .vault-dt__search-clear:hover {
  color: var(--vault-text, #111);
  background: rgba(0, 0, 0, 0.06);
}
.vault-dt__search-wrap .vault-dt__search-clear.hidden {
  display: none;
}
.vault-dt__search-input::placeholder {
  color: var(--vault-text-muted, #94a3b8);
}

/* Collapsible filters section */
.vault-dt-filters-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0.05rem;
  width: 100%;
  min-width: 0;
  background: var(--vault-bg, #fff);
  padding-bottom: 0.15rem;
}
/* Filters section header hidden: toggle is in table name row (sliders icon) */
.vault-dt-filters-section-header {
  display: none !important;
}
.vault-dt-filters-section-header-label {
  opacity: 1;
  transition: opacity 0.15s ease;
}
.vault-dt-filters-section-chevron {
  opacity: 0.8;
  transition: transform 0.2s ease;
}
.vault-dt-filters-section--collapsed .vault-dt-filters-section-chevron {
  transform: rotate(-90deg);
}
/* Collapsed: no border, only button on the right */
.vault-dt-filters-section--collapsed .vault-dt-filters-section-header {
  border-color: transparent;
  background: transparent;
}
.vault-dt-filters-section--collapsed .vault-dt-filters-section-header:hover {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 6%, transparent);
}
.vault-dt-filters-section-body {
  align-self: stretch;
  padding-top: 0.12rem;
  padding-left: 0.25rem;
}
/* When section header is hidden */
.vault-dt-filters-section .vault-dt-filters-section-body {
  padding-top: 0.18rem;
}
.vault-dt-filters-section--collapsed .vault-dt-filters-section-body {
  display: none;
}
.vault-tools-page--datatable .vault-dt-filters-section,
.vault-dt--embed-page .vault-dt-filters-section {
  background: var(--vault-bg, #fff);
  padding-bottom: 0.25rem;
}
.vault-tools-page--datatable .vault-dt-filters-section--collapsed,
.vault-dt--embed-page .vault-dt-filters-section--collapsed {
  padding-bottom: 0;
}

/* Same breakpoint as filters toggle in datatable.js (max-width: 639px): inline filters stay in DOM for modal move/restore but must not show in the page layout—only inside VaultModal. */
@media (max-width: 639px) {
  .vault-dt__main-body > .vault-dt-filters-section {
    display: none !important;
  }
}

.vault-dt-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.2rem 0 0.35rem;
  min-height: 1.75rem;
  flex-shrink: 0;
}
.vault-dt-filters-bar--empty {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0.25rem;
}
.vault-dt-filters-bar-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
  width: 100%;
  min-width: 0;
}
.vault-dt-filters-bar-row .vault-dt-filters-bar {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
}
.vault-dt-filters-bar-row .vault-dt-filters-result-count {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  align-self: center;
  white-space: nowrap;
}
.vault-dt-filters-bar-add-filter-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vault-primary, #6366f1);
  background: transparent;
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
}
.vault-dt-filters-bar-add-filter-btn:hover {
  color: var(--vault-primary-hover, #4f46e5);
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 8%, transparent);
}
.vault-dt-filters-bar-add-filter-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt-filters-save-view-link {
  flex-shrink: 0;
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vault-text-muted, #64748b);
  background: transparent;
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
}
.vault-dt-filters-save-view-link:hover {
  color: var(--vault-text, #111);
  background: var(--vault-bg-hover, rgba(0, 0, 0, 0.05));
}
.vault-dt-filters-save-view-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-text-muted, #64748b) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt-filters-save-view-link.hidden {
  display: none;
}
.vault-dt-filters-save-view-btn {
  flex-shrink: 0;
  margin: 0;
  align-self: center;
  white-space: nowrap;
}
.vault-dt-filters-save-view-btn.hidden {
  display: none;
}
.vault-dt-filter-pill-wrap {
  position: relative;
  z-index: 1;
}
.vault-dt-filter-pill-wrap:has(.vault-dt-filter-pill-panel--open) {
  z-index: 40;
}
.vault-dt-filter-pill-wrap:has(.vault-dt-filter-pill-panel--open) .vault-dt-filter-pill {
  border-color: transparent;
  box-shadow: none;
  background: #eef0f3;
}
.vault-dt-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vault-text, #111);
  background: #f1f3f5;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  cursor: pointer;
}
.vault-dt-filter-pill-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.vault-dt-filter-pill-angle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-primary, #6366f1);
  opacity: 1;
  line-height: 0;
  transition: transform 0.15s ease;
}
.vault-dt-filter-pill-angle svg {
  display: block;
}
.vault-dt-filter-pill-wrap:has(.vault-dt-filter-pill-panel--open) .vault-dt-filter-pill-angle {
  transform: rotate(180deg);
}
.vault-dt-filter-pill:hover {
  background: #e9ecef;
}
.vault-dt-filter-pill-wrap--not-applied .vault-dt-filter-pill {
  opacity: 0.8;
  background: #f1f3f5;
  border-color: transparent;
}
.vault-dt-filter-pill-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  width: max-content;
  min-width: 12rem;
  max-width: min(92vw, 26rem);
  padding: 0.5rem 0.65rem 0.6rem;
  background: var(--vault-bg, #fff);
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.4rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.vault-dt-filter-pill-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -0.5rem -0.65rem 0.45rem;
  padding: 0.4rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--vault-border, #e5e7eb);
}
.vault-dt-filter-pill-panel-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vault-text-muted, #64748b);
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.vault-dt-filter-pill-panel-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--vault-text-muted, #64748b);
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}
.vault-dt-filter-pill-panel-close:hover {
  color: var(--vault-text, #111);
  background: color-mix(in srgb, var(--vault-text, #111) 8%, transparent);
}
.vault-dt-filter-pill-panel-body--wide {
  min-width: 14rem;
}
.vault-dt-filter-pill-panel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.vault-dt-filter-pill-panel-controls .vault-dt-filter-inline-op,
.vault-dt-filter-pill-panel-controls .vault-dt-filter-inline-input,
.vault-dt-filter-pill-panel-controls .vault-dt-filter-inline-val {
  min-width: 0;
}
.vault-dt-filter-pill-panel-hint {
  margin-top: 0.25rem;
}
.vault-dt-filter-row--manage {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
.vault-dt-filter-row--manage .vault-dt-filter-col {
  flex: 1 1 auto;
  min-width: 0;
}
.vault-dt-filter-row--manage .vault-dt-filter-rm {
  flex-shrink: 0;
}
.vault-dt-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--vault-primary, #10b981) 14%, transparent);
  color: var(--vault-text, #111);
  border: 1px solid color-mix(in srgb, var(--vault-primary, #10b981) 28%, transparent);
}
.vault-dt-filter-chip-rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  border-radius: 0.2rem;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.vault-dt-filter-chip-rm:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}
.vault-dt-filter-chip--search {
  background: color-mix(in srgb, #6366f1 12%, transparent);
  border-color: color-mix(in srgb, #6366f1 25%, transparent);
}
.vault-dt-filter-inline-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--vault-primary, #10b981) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--vault-primary, #10b981) 22%, transparent);
}
.vault-dt-filter-inline-row--not-applied {
  opacity: 0.7;
  background: color-mix(in srgb, var(--vault-text, #111) 6%, transparent);
  border-color: var(--vault-border, #e5e7eb);
}
.vault-dt-filter-inline-apply {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.vault-dt-filter-inline-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--vault-text, #111);
  white-space: nowrap;
}
.vault-dt-filter-inline-op,
.vault-dt-filter-inline-input {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.25rem;
  background: var(--vault-bg, #fff);
  color: var(--vault-text, #111);
  min-width: 5rem;
}
.vault-dt-filter-inline-val {
  display: inline-flex;
  min-width: 6rem;
}
.vault-dt-filter-inline-date-picker {
  min-width: 8rem;
  flex: 1;
}
.vault-dt-filter-inline-date-picker .vault-dtp {
  min-width: 0;
}
.vault-dt-filter-inline-val .vault-dt-filter-inline-input {
  flex: 1;
  min-width: 5rem;
}
/* Select and multiselect in filter bar: identical height, padding, font, margins */
.vault-dt-filter-inline-select,
.vault-dt-filter-inline-relation-multi {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  box-sizing: border-box;
}
.vault-dt-filter-inline-select .vault-dropdown,
.vault-dt-filter-inline-relation-multi .vault-dropdown {
  min-width: 5rem;
  flex: 1;
}
.vault-dt-filter-inline-select .vault-dropdown-trigger,
.vault-dt-filter-inline-relation-multi .vault-dropdown-trigger,
.vault-dt-filter-inline-relation-multi [class*="dropdown-trigger"] {
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0.2rem 0.4rem !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  border-radius: 0.25rem;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  overflow: hidden;
}
.vault-dt-filter-inline-select .vault-dropdown-trigger-inner,
.vault-dt-filter-inline-relation-multi .vault-dropdown-trigger-inner {
  min-height: 0;
  line-height: 1.25;
}
.vault-dt-filter-inline-select .vault-dropdown-trigger-text,
.vault-dt-filter-inline-relation-multi .vault-dropdown-trigger-text {
  line-height: 1.25;
}
.vault-dt-filter-modal-select .vault-dropdown-trigger {
  min-height: 1.75rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
}
.vault-dt-filter-inline-rm {
  margin-left: 0.15rem;
}
/* Applied filters badges — below filters section, xs font, removable */
.vault-dt-filters-result-count {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--vault-text-muted, #64748b);
  margin: 0;
  padding: 0;
}
.vault-dt-filters-applied-wrap {
  margin-top: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--vault-border, #e5e7eb);
}
/* Shown above the grid (outside collapsed filter body) so active filters stay visible */
.vault-dt-filters-applied-wrap--above-grid {
  margin-top: 0.35rem;
  margin-bottom: 0.2rem;
  padding-top: 0.2rem;
  padding-bottom: 0.35rem;
  border-top: none;
  border-bottom: 1px solid var(--vault-border, #e5e7eb);
}
.vault-dt-filters-applied-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.vault-dt-filter-applied-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.35rem 0.15rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.25;
  color: #1a1a1a;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 0.25rem;
  max-width: 100%;
  box-sizing: border-box;
}
.vault-dt-filter-applied-badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.vault-dt-filter-applied-badge .vault-dt-filter-applied-badge-rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin-left: 0.1rem;
  border: none;
  border-radius: 0.15rem;
  background: transparent;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.vault-dt-filter-applied-badge .vault-dt-filter-applied-badge-rm:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}
/* Option-colored filter badge: same light bg + text color as in cols (opacity from STATUS_BG_LIGHTEN_MIX) */
.vault-dt-filter-applied-badge--option .vault-dt-filter-applied-badge-rm {
  color: inherit;
}
.vault-dt-filter-applied-badge--busy {
  opacity: 0.72;
  pointer-events: none;
}
.vault-dt-filter-applied-badge--busy .vault-dt-filter-applied-badge-rm {
  cursor: wait;
}
/* Badge font sizes by context: filter bar 0.75rem (above), infocard 0.75rem (infocard.css), cell slightly smaller */
.vault-dt-cell-select-wrap .vault-dropdown-trigger,
.vault-dt-cell-dropdown-wrap .vault-dropdown-trigger {
  font-size: 0.8125rem;
}
.vault-dt-multiselect-badges .vault-dt-option-badge {
  font-size: 0.8125rem;
}
.vault-dt-filter-sort-row {
  background: color-mix(in srgb, #6366f1 10%, transparent);
  border-color: color-mix(in srgb, #6366f1 22%, transparent);
}

/* Subscription table: Row types + Due date as separate inline rows (label left, control right), after Sort */
.vault-dt-filters-bar .vault-dt-filter-sort-row .vault-dt-filter-inline-val {
  flex: 1 1 auto;
  min-width: 0;
}
.vault-dt-filter-subscription-row-types-host {
  min-width: 6.5rem;
  max-width: 14rem;
}
.vault-dt-filter-subscription-due-host {
  min-width: 8rem;
  max-width: 18rem;
}
.vault-dt-filter-subscription-due-host .vault-due-period-picker {
  width: 100%;
  max-width: 18rem;
}
.vault-dt-filter-subscription-due-host .vault-due-period-picker__trigger {
  max-width: none;
  width: 100%;
}
@media (hover: hover) {
  .vault-dt__toggle-nav:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
  }
}
.vault-dt__toggle-nav[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
/* Match app header icon buttons: no border, 32×32 hit target (Tools + project Data tables). */
.vault-dt__toggle-nav.vault-dt__toggle-nav--page-header {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--vault-text-muted, #64748b);
}
@media (hover: hover) {
  .vault-dt__toggle-nav.vault-dt__toggle-nav--page-header:hover {
    background: var(--vault-surface-hover, rgba(148, 163, 184, 0.15));
    color: var(--vault-text, #0f172a);
  }
}
.vault-dt__toggle-nav.vault-dt__toggle-nav--page-header[aria-expanded="true"] {
  background: var(--vault-surface-hover, rgba(148, 163, 184, 0.15));
  color: var(--vault-text, #0f172a);
}
/* Same chrome as ⋮ tables toggle: no fill by default, light gray hover */
.vault-dt__header-create-table-btn.vault-dt__icon-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent !important;
  color: var(--vault-text-muted, #64748b);
}
@media (hover: hover) {
  .vault-dt__header-create-table-btn.vault-dt__icon-btn:hover {
    background: var(--vault-surface-hover, rgba(148, 163, 184, 0.15)) !important;
    color: var(--vault-text, #0f172a);
  }
}
/* Match adjacent `.vault-dt__toggle-nav--page-header` (more-vertical @ 20px). */
.vault-dt__header-create-table-btn.vault-dt__icon-btn svg,
.vault-dt__header-create-table-btn.vault-dt__icon-btn .vault-dt__burger-icon,
.vault-dt__sidebar-header--with-search .vault-dt__sidebar-actions .vault-dt__icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.vault-settings-header--tools .vault-dt__toggle-nav--page-header {
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.vault-settings-header--tools .vault-dt__header-create-table-btn {
  margin-right: 0.25rem;
  flex-shrink: 0;
}

/* Table name row: title left, actions right (add row, add column, reorder) */
.vault-dt__header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.vault-dt__header-actions-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: min-content;
}
@media (max-width: 640px) {
  .vault-dt__header-actions-btns .vault-dt-table-action-btn,
  .vault-dt__header-actions-btns .vault-dt__filters-toggle-btn {
    display: inline-flex !important;
  }
  .vault-dt__header-actions-btns .vault-dt__recurring-analytics-btn,
  .vault-dt__header-actions-btns .vault-dt-header-actions-gear-btn {
    display: inline-flex !important;
  }
}
.vault-dt-actions-menu-dropdown,
.vault-dt-table-name-actions-dropdown {
  z-index: 10000;
  position: fixed;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0.35rem;
  min-width: 192px;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.vault-dt-actions-menu-divider {
  flex-shrink: 0;
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: #e5e7eb;
  border: 0;
  padding: 0;
  pointer-events: none;
}
.vault-dt-actions-menu-dropdown .vault-dt-dropdown-item,
.vault-dt-table-name-actions-dropdown .vault-dt-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #111;
  cursor: pointer;
  border-radius: 0.375rem;
}
.vault-dt-actions-menu-dropdown .vault-dt-dropdown-item:hover,
.vault-dt-table-name-actions-dropdown .vault-dt-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
}
.vault-dt-linked-tables-title-menu .vault-dt-actions-menu-item--current {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 14%, transparent);
  font-weight: 600;
  color: var(--vault-text, #111);
}
.vault-dt-linked-tables-title-menu .vault-dt-actions-menu-item--current:hover {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 20%, transparent);
}
.vault-dt-actions-menu-item__label {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.vault-dt-actions-menu-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.vault-dt-actions-menu-item__icon svg {
  width: 100%;
  height: 100%;
}

.vault-dt__sidebar-header {
  padding: 0.65rem 0.75rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Tables sidebar (sheet on both pages): grid so search uses full width; expand-on-focus inside slot like toolbar */
.vault-dt__sidebar-header--with-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.vault-dt__sidebar-header--with-search:has(.vault-dt__sidebar-search-field:focus-within) {
  overflow: visible;
  z-index: 2;
}
.vault-dt__sidebar-header--with-search .vault-dt__sidebar-search-slot {
  grid-column: 1;
  min-width: 0;
  width: 100%;
  min-height: 2.375rem;
  display: flex;
  align-items: center;
}
.vault-dt__sidebar-search-field {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s ease;
  border-radius: 0.375rem;
}
/* Match grid toolbar: expanded search spans full header inner width; linked + actions sit under overlay while focused. */
.vault-dt__sidebar-header--with-search:has(.vault-dt__sidebar-search-field:focus-within) .vault-dt__sidebar-header-linked-slot,
.vault-dt__sidebar-header--with-search:has(.vault-dt__sidebar-search-field:focus-within) .vault-dt__sidebar-actions {
  z-index: 0;
}
.vault-dt__sidebar-search-field:focus-within {
  position: absolute;
  z-index: 2;
  left: 0.75rem;
  right: 0.75rem;
  top: 0.65rem;
  bottom: 0.45rem;
  width: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: var(--vault-bg-elevated, #fff);
  border-radius: 0.375rem;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.vault-dt__sidebar-header-linked-slot {
  grid-column: 2;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.vault-dt__sidebar-header-linked-slot .vault-dt__filter-show-linked--sidebar-header {
  margin-bottom: 0;
  white-space: nowrap;
  color: var(--vault-text-muted, #6b7280);
}

.vault-dt__sidebar-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.vault-dt__sidebar-header--with-search .vault-dt__sidebar-actions {
  grid-column: 3;
  margin-inline-start: 0;
  position: relative;
  z-index: 1;
}

.vault-dt__icon-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: #374151;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .vault-dt__icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
  }
}

.vault-dt__icon-btn--success-light {
  background: color-mix(in srgb, var(--vault-primary, #10b981) 14%, transparent);
  color: var(--vault-primary, #059669);
}
@media (hover: hover) {
  .vault-dt__icon-btn--success-light:hover {
    background: color-mix(in srgb, var(--vault-primary, #10b981) 22%, transparent);
    color: #047857;
  }
}

.vault-dt__filter-select-row {
  width: 100%;
  min-width: 0;
}
.vault-dt__filter-select-row .vault-dt__sidebar-filter-select,
.vault-dt__filter-select-row .vault-dt__filter-select {
  width: 100%;
  max-width: 100%;
  font-size: 0.8125rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  background: var(--vault-bg-elevated, #fff);
  color: var(--vault-text, #111);
  box-sizing: border-box;
}

.vault-dt__tables-list-pagination {
  flex-shrink: 0;
  min-width: 0;
}
.vault-dt__tables-list-pagination--sidebar {
  padding: 0.2rem 0.5rem 0.45rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.vault-dt__tables-list-pagination--sidebar .vault-pagination {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: none;
}
.vault-dt__tables-list-pagination--main .vault-pagination {
  margin-top: 0.35rem;
}
/* PWA / narrow: table list pagination clear of OS home indicator */
@media (max-width: 639px) {
  .vaultside-pwa .vault-dt__tables-list-pagination--main,
  .vaultside-pwa .vault-dt__tables-list-pagination--sidebar {
    padding-bottom: max(0.65rem, calc(env(safe-area-inset-bottom, 0px) + 0.55rem));
  }
}

.vault-dt__filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.75rem 0.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.vault-dt__filter-select {
  width: 100%;
  cursor: pointer;
  outline: none;
}
.vault-dt__filter-select:focus {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 50%, transparent);
  outline-offset: 1px;
}
.vault-dt__filter-project-row {
  padding-top: 0.25rem;
}
.vault-dt__filter-project-container .vault-dropdown-trigger {
  min-height: 32px;
  font-size: 0.8125rem;
}
.vault-dt__filter-show-linked {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--vault-text-muted, #6b7280);
}
.vault-dt__filter-show-linked-chk {
  margin: 0;
  flex-shrink: 0;
}

.vault-dt__list-group {
  width: 100%;
  box-sizing: border-box;
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.vault-dt__list-group-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--vault-text-muted, #6b7280);
  padding: 0.25rem 0.5rem 0.25rem 0;
  margin-bottom: 0.125rem;
  align-self: flex-start;
  max-width: 100%;
}
.vault-dt__list-group-loading {
  padding: 0.5rem;
  font-size: 0.8125rem;
  color: var(--vault-text-muted, #6b7280);
}

.vault-dt__list {
  --vault-dt-list-pad-x: 0.45rem;
  --vault-dt-list-pad-y: 0.35rem;
  --vault-dt-list-icon-col: 1.25rem;
  --vault-dt-list-icon-gap: 0.45rem;
  padding: 0.25rem;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 0;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.vault-dt__list-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: none;
  background: transparent;
  color: #111;
  padding: var(--vault-dt-list-pad-y) var(--vault-dt-list-pad-x);
  border-radius: 0.4rem;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--vault-dt-list-icon-gap);
}
.vault-dt__list-item:hover {
  background: var(--vault-nav-item-hover-bg, rgba(100, 116, 139, 0.12));
}
.vault-dt__list-item--active {
  background: var(--vault-primary-light);
}
.vault-dt__list-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
}
.vault-dt__list-item-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}
.vault-dt__list-item-name-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}
.vault-dt__list-item-name-line .vault-dt__list-item-name {
  flex: 0 1 auto;
  min-width: 0;
}
.vault-dt__list-item-name-line .vault-dt__list-item-row-count {
  font-size: 0.75rem;
  color: var(--vault-text-muted, #64748b);
  font-weight: 400;
  flex-shrink: 0;
}
.vault-dt__list-item-left .vault-dt__list-item-meta {
  margin-left: 0;
}
.vault-dt__list-item-left .vault-dt__table-list-item-badge {
  margin-top: 0.125rem;
}
.vault-dt__list-item-left .vault-dt__table-list-item-progress {
  margin-top: 0.25rem;
}
.vault-dt__list-item-meta {
  margin-left: 0;
  font-size: 0.6875rem;
  color: #6b7280;
  flex-shrink: 0;
}

.vault-dt__list-item-settings {
  flex-shrink: 0;
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.vault-dt__list-item-settings:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
}
.vault-dt__list-item-settings:focus {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt__list-item-settings svg {
  display: block;
}

.vault-dt__list-item-leading-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: var(--vault-dt-list-icon-col, 1.25rem);
  height: var(--vault-dt-list-icon-col, 1.25rem);
  padding-top: 0.2rem;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt__list-item-leading-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vault-dt__list-item--active .vault-dt__list-item-leading-icon {
  color: var(--vault-primary, #6366f1);
}
.vault-dt__list-item--bundle-head-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.vault-dt__list-item--bundle-head-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0;
}
.vault-dt__list-item--bundle-head-row .vault-dt__list-item-left {
  flex: 1 1 0;
  min-width: 0;
}
.vault-dt__list-item--bundle-head-row .vault-dt__list-bundle-toggle {
  flex-shrink: 0;
  padding: 0.15rem 0.2rem;
  margin-top: 0.05rem;
}
.vault-dt__list-item--bundle-head-row .vault-dt__list-item-settings {
  flex-shrink: 0;
}
.vault-dt__list-bundle:has(.vault-dt__list-item--active) .vault-dt__list-bundle-root-icon.vault-dt__list-item-leading-icon {
  color: var(--vault-primary, #6366f1);
}

/* Linked tables as sub-nav below the selected table (names only, target icon on right) */
.vault-dt__list-sublist {
  width: 100%;
  box-sizing: border-box;
  padding-left: 1rem;
  margin-top: 0.35rem;
  margin-bottom: 0.25rem;
  border-left: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 25%, transparent);
}
.vault-dt__list-item--sublink {
  padding: 0.35rem 0.5rem;
  min-height: auto;
}
.vault-dt__list-item--sublink .vault-dt__list-item-name {
  font-weight: 500;
  font-size: 0.75rem;
}
.vault-dt__list-item--sublink:hover {
  background: var(--vault-nav-item-hover-bg, rgba(100, 116, 139, 0.12));
}
.vault-dt__list-item--sublink .vault-dt__list-item-sublink-icon {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-text-muted, #64748b);
  opacity: 0.85;
}

/* Inventory / Clients bundle: icon rail | (name … chevron settings); guide under icon */
.vault-dt__list-bundle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.15rem;
}
.vault-dt__list-bundle-upper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--vault-dt-list-pad-y) var(--vault-dt-list-pad-x);
  gap: var(--vault-dt-list-icon-gap);
}
.vault-dt__list-bundle-rail-col {
  flex-shrink: 0;
  width: var(--vault-dt-list-icon-col);
  min-width: var(--vault-dt-list-icon-col);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}
.vault-dt__list-bundle-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.1rem 0.15rem;
  margin: 0;
  line-height: 1;
  color: var(--vault-text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}
.vault-dt__list-bundle-toggle:hover {
  color: var(--vault-text, #111);
  background: var(--vault-nav-item-hover-bg, rgba(100, 116, 139, 0.12));
}
.vault-dt__list-bundle-toggle:focus {
  outline: none;
}
.vault-dt__list-bundle-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt__list-bundle-root-icon {
  flex-shrink: 0;
}
.vault-dt__list-bundle-rail-line {
  flex: 1 1 auto;
  width: 2px;
  margin-top: 0.125rem;
  min-height: 0;
  align-self: center;
  border-radius: 1px;
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 28%, transparent);
}
.vault-dt__list-bundle:not(.vault-dt__list-bundle--expanded) .vault-dt__list-bundle-rail-line {
  display: none;
}
.vault-dt__list-bundle-main-stack {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.vault-dt__list-sublist--bundle {
  margin-top: 0.1rem;
  margin-bottom: 0.35rem;
  padding-left: 0;
  margin-left: 0;
  border-left: none;
}
.vault-dt__list-item--bundle-child {
  padding-left: 0.15rem;
}
.vault-dt__list-item--bundle-child .vault-dt__list-item-name {
  font-size: 0.8125rem;
  font-weight: 500;
}
.vault-dt__list-item--bundle-child .vault-dt__table-list-item-badge {
  font-size: 0.65rem;
}

/* Main “Data tables” list: bundle — icon rail | (root row + chevron) + nested ul */
.vault-dt__table-list-item-wrap--bundle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.vault-dt__table-list-bundle-upper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  gap: 0.5rem;
}
.vault-dt__table-list-bundle-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.35rem 0.25rem;
  margin: 0;
  line-height: 1;
  color: var(--vault-text-muted, #64748b);
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
.vault-dt__table-list-bundle-toggle:hover {
  color: var(--vault-text, #111);
  background: var(--vault-nav-item-hover-bg, rgba(100, 116, 139, 0.12));
}
.vault-dt__table-list-bundle-toggle:focus {
  outline: none;
}
.vault-dt__table-list-bundle-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt__table-list-bundle-col-rail {
  flex-shrink: 0;
  width: 1.25rem;
  min-width: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}
.vault-dt__table-list-bundle-root-icon {
  flex-shrink: 0;
}
.vault-dt__table-list-bundle-rail-line {
  flex: 1 1 auto;
  width: 2px;
  margin-top: 0.125rem;
  min-height: 0;
  align-self: center;
  border-radius: 1px;
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 24%, transparent);
}
.vault-dt__table-list-item-wrap--bundle:not(.vault-dt__table-list-item-wrap--bundle-expanded) .vault-dt__table-list-bundle-rail-line {
  display: none;
}
.vault-dt__table-list-bundle-main-stack {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.vault-dt__table-list-bundle-head-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: 0.25rem;
}
.vault-dt__table-list-bundle-head-btn-host {
  flex: 1 1 0;
  min-width: 0;
}
.vault-dt__table-list-bundle-head-btn-host > .vault-dt__table-list-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 0;
}
.vault-dt__table-list-item-wrap--bundle:has(.vault-dt__table-list-item--active) .vault-dt__table-list-bundle-root-icon {
  color: var(--vault-primary, #6366f1);
}
.vault-dt__table-list-bundle-sub {
  list-style: none;
  margin: 0.2rem 0 0.35rem 0;
  padding: 0;
  border-left: none;
}
.vault-dt__table-list-item--bundle-child {
  font-size: 0.8125rem;
}

.vault-dt__main {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
}
.vault-dt__header-row {
  flex-shrink: 0;
  min-width: 0;
}

.vault-dt__toggle-nav,
.vault-dt__burger-btn {
  border: 1px solid #e5e7eb;
  background: transparent;
  color: #111;
  border-radius: 0.375rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.vault-dt__burger-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
.vault-dt__burger-icon {
  flex-shrink: 0;
  display: block;
}
.vault-dt__main-body {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0.75rem 0.75rem;
  background: transparent;
}
.vault-tools-page--datatable .vault-dt__main-body,
.vault-dt--embed-page .vault-dt__main-body {
  background: transparent !important;
}
.vault-dt__empty {
  padding: 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}
.vault-dt__empty--with-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.vault-dt__empty-msg-line {
  font-size: 0.875rem;
  color: inherit;
  line-height: 1.4;
}
.vault-dt__empty-action {
  flex-shrink: 0;
}

/* Home page (separate panel, logo opens) */
.vault-home-page,
.vault-main-content > .vault-home-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.vault-home-page .vault-app-home {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.vault-home-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1.5rem;
}
.vault-home-loader-wrap.hidden {
  display: none !important;
}
/* Per-section home loaders: overlay + reserved slot height so section titles do not jump */
.vault-dt-home__section-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.vault-dt-home__section:first-child .vault-dt-home__section-body {
  flex-shrink: 0;
}
.vault-dt-home__section-body > .vault-dt-home__projects-scroll {
  flex: 0 1 auto;
  /* Match ~avatar + card padding + strip padding; avoid stretch filling a tall min-height */
  min-height: 3.5rem;
  position: relative;
  z-index: 0;
}
.vault-dt-home__section:last-child .vault-dt-home__section-body {
  flex: 0 0 auto;
  min-height: 0;
}
.vault-dt-home__section-body > .vault-dt-home__tables-list {
  flex: 0 0 auto;
  min-height: 0;
  position: relative;
  z-index: 0;
}
.vault-home-section-loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  padding: 0.5rem 0;
  background: var(--vault-bg, #fff);
}
.vault-home-section-loader.hidden {
  display: none !important;
}
/* Signed-out home: no reserved loader strip under Recent vaults */
.vault-home-page--guest .vault-dt-home__section-body > .vault-dt-home__projects-scroll {
  min-height: 0;
}
.vault-home-page--guest .vault-dt-home__section:last-child .vault-dt-home__section-body {
  min-height: 0;
}
.vault-home-empty-wrap {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}
.vault-home-empty-wrap.hidden {
  display: none !important;
}
.vault-home-empty__intro {
  font-size: 0.9375rem;
  color: var(--vault-text-muted, #64748b);
  margin: 0 0 0.5rem;
  text-align: center;
}
.vault-home-empty__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vault-border, #e2e8f0);
  background: var(--vault-bg-card, #f8fafc);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s, border-color 0.15s;
}
.vault-home-empty__btn:hover {
  background: var(--vault-primary-light, rgba(16, 185, 129, 0.08));
  border-color: var(--vault-primary, #10b981);
}
.vault-home-empty__btn-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vault-text, #111);
}
.vault-home-empty__btn-info {
  font-size: 0.8125rem;
  color: var(--vault-text-muted, #64748b);
  line-height: 1.4;
}
/* Home project cards: media + label (image when storage has icon/thumbnail) */
.vault-home-project-card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  align-self: center;
  min-width: 9.5rem;
  max-width: 12.5rem;
  padding: 0.2rem 0.5rem 0.2rem 0.35rem;
  border-radius: 0.6rem;
  background: var(--vault-bg-elevated, #fff);
  border: 1px solid var(--vault-border, #e2e8f0);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.vault-home-project-card:hover {
  background: var(--vault-bg-elevated, #fff);
  border-color: color-mix(in srgb, var(--vault-primary, #10b981) 42%, var(--vault-border, #e2e8f0));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.vault-home-project-card--home-pinned {
  position: relative;
  padding-right: 1.5rem;
}
.vault-home-project-card__pin-corner {
  position: absolute;
  top: 0.2rem;
  right: 0.35rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-primary, #10b981);
  pointer-events: none;
  line-height: 0;
}
.vault-home-project-card__pin-corner svg {
  display: block;
}
.vault-home-project-card__media {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vault-bg-card, #f1f5f9);
  border: 2px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.vault-home-project-card__media--photo {
  background: #e2e8f0;
  border-color: #fff;
}
.vault-home-project-card__letter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.vault-home-project-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.vault-home-project-card__body {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 0;
}
.vault-home-project-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vault-text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.25;
  min-width: 0;
}
.vault-dt-home__table-row--home-pinned {
  position: relative;
  padding-right: 1.75rem;
}
.vault-dt-home__table-row-pin-corner {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-primary, #6366f1);
  pointer-events: none;
  line-height: 0;
}
.vault-dt-home__table-row-pin-corner svg {
  display: block;
}
/* Table row count (lighter) */
.vault-dt-home__table-row-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}
.vault-dt-home__table-row-name-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}
.vault-dt-home__table-row-name-line .vault-dt-home__table-row-text {
  flex: 0 1 auto;
  min-width: 0;
}
.vault-dt-home__table-row-name-line .vault-dt-home__table-row-count {
  flex-shrink: 0;
}
.vault-dt-home__table-row-count {
  font-size: 0.75rem;
  color: var(--vault-text-muted, #64748b);
  font-weight: 400;
}
.vault-dt-home__table-row-badge {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--vault-text-muted, #64748b);
  margin-top: 0.125rem;
}
.vault-app-home {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

/* Home page: recent projects + recent tables */
.vault-dt-home {
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
}
.vault-dt-home__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vault-dt-home__section:first-child {
  flex-shrink: 0;
}
/* Recent data tables: grows with rows; page scrolls as a whole */
.vault-dt-home__section:last-child {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.vault-dt-home__section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.vault-dt-home__section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--vault-text, #0f172a);
  margin: 0;
  letter-spacing: -0.02em;
}
.vault-dt-home__section-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--vault-primary, #10b981);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0;
  white-space: nowrap;
}
.vault-dt-home__section-link:hover {
  text-decoration: underline;
}
.vault-dt-home__projects-scroll {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.1rem 0.15rem 0.25rem;
  margin: 0 -0.15rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.vault-dt-home__project-card {
  flex: 0 0 auto;
  min-width: 10rem;
  max-width: 14rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--vault-bg-card, #f8fafc);
  border: 1px solid var(--vault-border, #e2e8f0);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  text-align: left;
}
.vault-dt-home__project-card:hover {
  background: var(--vault-primary-light, rgba(16, 185, 129, 0.08));
  border-color: var(--vault-primary, #10b981);
}
.vault-dt-home__project-card-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--vault-text, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-home__tables-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.vault-dt-home__table-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.9375rem;
  color: var(--vault-text, #111);
  background: var(--vault-bg-elevated, #fff);
  border: 1px solid var(--vault-border, #e2e8f0);
  border-radius: 0.5rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition:
    color 0.15s,
    background-color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.vault-dt-home__table-row:hover {
  border-color: color-mix(in srgb, var(--vault-primary, #10b981) 35%, var(--vault-border, #e2e8f0));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.vault-dt-home__table-row-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding-top: 0.125rem;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-home__table-row-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-home__empty {
  font-size: 0.875rem;
  color: var(--vault-text-muted, #64748b);
  padding: 0.5rem 0;
}

/* Neutral slot while incoming shares load — no tinted strip */
.vault-home-shared-fetch-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.2rem 0 0.35rem;
  box-sizing: border-box;
}
.vault-home-shared-fetch-loader-host {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vault-home-shared-fetch-row__msg {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--vault-danger, #b91c1c);
  text-align: center;
  line-height: 1.4;
}

.vault-dt-home__section#sp-home-shared-strip-section {
  flex-shrink: 0;
  padding: 0.65rem 0.75rem 0.5rem;
  margin: 0 -0.25rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--vault-bg-card, #f8fafc) 88%, var(--vault-primary, #10b981));
  border: 1px solid color-mix(in srgb, var(--vault-border, #e2e8f0) 92%, var(--vault-primary, #10b981));
  box-sizing: border-box;
}

.vault-dt-home__table-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  width: 100%;
  margin-top: 0.125rem;
}

.vault-home-shared {
  padding: 0;
}

.vault-home-shared--error {
  font-size: 0.8125rem;
  color: var(--vault-danger, #b91c1c);
  padding: 0.35rem 0;
}

.vault-home-shared__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.vault-home-shared__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--vault-text, #0f172a);
  margin: 0;
  letter-spacing: -0.02em;
}

.vault-home-shared__hint {
  font-size: 0.8125rem;
  color: var(--vault-text-muted, #64748b);
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.vault-home-shared__count-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  min-width: 1.25rem;
  text-align: center;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--vault-primary, #059669) 14%, transparent);
  color: var(--vault-primary, #059669);
  border: 1px solid color-mix(in srgb, var(--vault-primary, #059669) 30%, transparent);
}

.vault-home-shared__card-scroll {
  max-height: min(42vh, 18rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 0.1rem;
  margin-right: -0.05rem;
}

.vault-home-shared__card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.65rem;
  overflow: visible;
  padding-right: 0;
}

.vault-home-shared__card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-align: left;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--vault-border, #e2e8f0);
  background: var(--vault-bg-elevated, #fff);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    border-color 0.15s,
    background-color 0.15s,
    box-shadow 0.15s;
}

.vault-home-shared__card:hover {
  border-color: color-mix(in srgb, var(--vault-primary, #059669) 38%, var(--vault-border, #e2e8f0));
  background: var(--vault-bg-elevated, #fff);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.vault-home-shared__card-media {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vault-primary, #059669) 10%, transparent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: var(--vault-primary, #059669);
  box-sizing: border-box;
}

.vault-home-shared__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vault-home-shared__card-body {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
}

.vault-home-shared__card-row-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.vault-home-shared__perm {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.35rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.vault-home-shared__perm--edit {
  background: color-mix(in srgb, var(--vault-primary, #059669) 14%, transparent);
  color: var(--vault-primary, #047857);
}

.vault-home-shared__perm--read {
  background: rgba(148, 163, 184, 0.22);
  color: var(--vault-text-muted, #64748b);
}

.vault-home-shared__card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vault-text, #0f172a);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}

.vault-home-shared__card-from {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--vault-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-home-shared__card-from-label {
  font-weight: 500;
  color: var(--vault-text-muted, #64748b);
}

.vault-home-shared__card-email {
  font-weight: 600;
  color: var(--vault-text, #334155);
}

.vault-home-shared__card-from--muted {
  font-style: italic;
  font-weight: 400;
}

.vault-home-shared__card--skeleton {
  min-height: 4rem;
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 0%,
    rgba(148, 163, 184, 0.22) 50%,
    rgba(148, 163, 184, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: vault-home-skeleton-shimmer 1.15s ease-in-out infinite;
  border: none;
  pointer-events: none;
}

.vault-home-shared__skeleton-title-block {
  display: inline-block;
  width: 2rem;
  height: 0.875rem;
  border-radius: 0.25rem;
  background: rgba(148, 163, 184, 0.25);
}

@keyframes vault-home-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.vault-dt__shared-with-you-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  line-height: 0;
  background: transparent;
  color: var(--vault-primary, #059669);
  border: none;
  flex-shrink: 0;
}

.vault-dt__shared-with-you-chip svg {
  display: block;
}

.vault-dt__table-list-item-meta-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  margin-top: 0.1rem;
  max-width: 100%;
}

.vault-dt__list-item-meta-row {
  display: flex;
  flex-wrap: wrap;
}

/* No table selected: full-width list area; rows shrink to content (left-aligned). */
.vault-dt__main-body:has(> .vault-dt__table-list-wrap) {
  align-items: stretch;
}
.vault-dt__table-list-wrap {
  padding: 0.5rem 0 1rem;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
  align-self: stretch;
  overflow: hidden;
}
.vault-dt__table-list-wrap:has(.vault-dt__main-tables-list-search-field:focus-within) {
  overflow: visible;
}
.vault-dt__table-list-filter {
  margin-bottom: 0;
  max-width: 12rem;
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  background: var(--vault-bg-elevated, #fff);
  color: var(--vault-text, #111);
  flex-shrink: 0;
}
.vault-dt__table-list-filter-row {
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.vault-dt__table-list-project-row .vault-dt__table-list-filter-project {
  max-width: 16rem;
  margin-top: 0.25rem;
}
.vault-dt__table-list-show-linked {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--vault-text, #111);
  cursor: pointer;
}
.vault-dt__table-list-show-linked input {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--vault-primary, #6366f1);
}
.vault-dt__table-list-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vault-text-muted, #64748b);
  margin-top: 1rem;
  margin-bottom: 0.375rem;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
}
.vault-dt__tables-list-pagination--main {
  align-self: stretch;
  width: 100%;
}
.vault-dt__table-list {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0;
  margin-left: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.vault-dt__table-list-pin-host {
  position: relative;
}
.vault-dt__table-list-pin-host > .vault-dt__table-list-item {
  padding-right: 2.65rem;
  box-sizing: border-box;
}
.vault-dt__table-list-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--vault-text-muted, #94a3b8);
  line-height: 0;
}
.vault-dt__table-list-pin-btn svg {
  display: block;
}
.vault-dt__table-list-pin-btn--pinned {
  color: var(--vault-primary, #6366f1);
}
.vault-dt__table-list-pin-btn--floating {
  position: absolute;
  top: 0.35rem;
  right: 0.2rem;
  z-index: 3;
}
.vault-dt__table-list-pin-btn--bundle-head {
  position: relative;
  align-self: flex-start;
  margin-left: 0.125rem;
  margin-top: 0.05rem;
}
@media (hover: hover) {
  .vault-dt__table-list-pin-btn:hover {
    background: var(--vault-nav-item-hover-bg, rgba(100, 116, 139, 0.12));
  }
  .vault-dt__table-list-pin-btn--pinned:hover {
    color: var(--vault-primary, #6366f1);
  }
}
.vault-dt__table-list-item-wrap {
  margin-bottom: 0.2rem;
  display: block;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
}
.vault-dt__table-list-item-wrap:last-child {
  margin-bottom: 0;
}
.vault-dt__table-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--vault-text, #111);
  background: var(--vault-bg-card, #fafbfc);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
  box-sizing: border-box;
}
.vault-dt__table-list-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding-top: 0.125rem;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt__table-list-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (hover: hover) {
  .vault-dt__table-list-item:hover:not(.vault-dt__table-list-item--active) {
    color: var(--vault-text, #111);
    background: var(--vault-nav-item-hover-bg, rgba(100, 116, 139, 0.12));
  }
  .vault-dt__table-list-item:hover:not(.vault-dt__table-list-item--active) .vault-dt__table-list-item-icon {
    color: var(--vault-text-muted, #64748b);
  }
}
.vault-dt__table-list-item--active {
  color: var(--vault-text, #111);
  background: var(--vault-primary-light, rgba(16, 185, 129, 0.08));
}
@media (hover: hover) {
  .vault-dt__table-list-item--active:hover {
    background: var(--vault-primary-light, rgba(16, 185, 129, 0.08));
  }
}
.vault-dt__table-list-item--active .vault-dt__table-list-item-icon {
  color: var(--vault-primary, #6366f1);
}
.vault-dt__table-list-item-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}
.vault-dt__table-list-item-name-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}
.vault-dt__table-list-item-name-line .vault-dt__table-list-item-text {
  flex: 0 1 auto;
  min-width: 0;
}
.vault-dt__table-list-item-name-line .vault-dt__table-list-item-count {
  font-size: 0.75rem;
  color: var(--vault-text-muted, #64748b);
  font-weight: 400;
  flex-shrink: 0;
}
.vault-dt__table-list-item-badge {
  display: inline;
  font-size: 0.6875rem;
  font-weight: 500;
  font-style: italic;
  padding: 0;
  border-radius: 0;
  line-height: 1.35;
}
.vault-dt__table-list-item-badge--global {
  background: transparent;
  color: #2563eb;
}
.vault-dt__table-list-item-badge--project {
  background: transparent;
  color: var(--vault-primary, #059669);
}
.vault-dt__table-list-item-progress {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  width: 100%;
  max-width: 6rem;
}
.vault-dt__table-list-item-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
  min-width: 2rem;
}
.vault-dt__table-list-item-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--vault-primary, #6366f1);
  transition: width 0.2s ease;
}
.vault-dt__table-list-item-progress-pct {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--vault-text-muted, #64748b);
  flex-shrink: 0;
}
.vault-dt__table-list-item-text {
  min-width: 0;
  flex: 1;
  text-align: left;
}
.vault-dt__table-list-loading,
.vault-dt__table-list-empty {
  list-style: none;
  margin-left: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--vault-text-muted, #64748b);
  line-height: 1.4;
}
.vault-dt__table-list-empty--block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.vault-dt__table-list-empty-msg {
  display: block;
}
.vault-dt__table-list-empty-action {
  flex-shrink: 0;
}

/* Table view grid — table in its own scrollable section */
/* Shown under the filters bar while view settings / totals load before a prefetched grid re-render (e.g. filter apply). */
.vault-dt-table-area-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 2rem 1rem;
  flex: 1 1 auto;
}

.vault-dt-table-wrap {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.vault-dt-table-container {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}
.vault-dt-progress-bar-wrap {
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.vault-dt-progress-bar-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
}
#panel-datatable-body .vault-dt-progress-bar-section,
#sidepanel-datatable.vault-tools-page--datatable .vault-dt-progress-bar-section {
  padding-left: 0;
  padding-right: 0;
}
.vault-dt-progress-bar-time-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0.25rem;
}
.vault-dt-progress-bar-inner {
  flex: 1 1 0;
  min-width: 80px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.vault-dt-progress-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--vault-primary, #10b981);
  transition: width 0.2s ease;
}
.vault-dt-progress-bar-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--vault-text-muted, #64748b);
  white-space: nowrap;
}
.vault-dt-progress-bar-label-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  /* Do not use `font: inherit` — it pulls weight from the parent div (normal), not from .vault-dt-progress-bar-label. */
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vault-dt-progress-bar-label-link:hover {
  opacity: 0.9;
}
/* Progress bar tier colors: background only on progress section (bar + details); fill and label same as bar */
.vault-dt-progress-bar-wrap[data-progress-tier="pct-0-25"] .vault-dt-progress-bar-section {
  background: rgba(239, 68, 68, 0.12);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-0-25"] .vault-dt-progress-bar-inner {
  background: rgba(239, 68, 68, 0.2);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-0-25"] .vault-dt-progress-bar-fill {
  background: #EF4444;
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-0-25"] .vault-dt-progress-bar-label {
  color: #EF4444;
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-26-50"] .vault-dt-progress-bar-section {
  background: rgba(249, 115, 22, 0.12);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-26-50"] .vault-dt-progress-bar-inner {
  background: rgba(249, 115, 22, 0.2);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-26-50"] .vault-dt-progress-bar-fill {
  background: #F97316;
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-26-50"] .vault-dt-progress-bar-label {
  color: #F97316;
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-51-75"] .vault-dt-progress-bar-section {
  background: rgba(245, 158, 11, 0.12);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-51-75"] .vault-dt-progress-bar-inner {
  background: rgba(245, 158, 11, 0.2);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-51-75"] .vault-dt-progress-bar-fill {
  background: #F59E0B;
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-51-75"] .vault-dt-progress-bar-label {
  color: #F59E0B;
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-76-100"] .vault-dt-progress-bar-section {
  background: rgba(16, 185, 129, 0.12);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-76-100"] .vault-dt-progress-bar-inner {
  background: rgba(16, 185, 129, 0.2);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-76-100"] .vault-dt-progress-bar-fill {
  background: var(--vault-primary, #10b981);
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-76-100"] .vault-dt-progress-bar-label {
  color: var(--vault-primary, #10b981);
}
/* Time badge: table total; seconds in lighter color */
.vault-dt-progress-bar-time-badge {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.06);
  color: var(--vault-text, #111);
  white-space: nowrap;
}
button.vault-dt-progress-bar-time-badge {
  appearance: none;
  -webkit-appearance: none;
}
.vault-dt-progress-bar-wrap[data-progress-tier="pct-0-25"] .vault-dt-progress-bar-time-badge { color: #EF4444; background: rgba(239, 68, 68, 0.12); }
.vault-dt-progress-bar-wrap[data-progress-tier="pct-26-50"] .vault-dt-progress-bar-time-badge { color: #F97316; background: rgba(249, 115, 22, 0.12); }
.vault-dt-progress-bar-wrap[data-progress-tier="pct-51-75"] .vault-dt-progress-bar-time-badge { color: #F59E0B; background: rgba(245, 158, 11, 0.12); }
.vault-dt-progress-bar-wrap[data-progress-tier="pct-76-100"] .vault-dt-progress-bar-time-badge { color: var(--vault-primary, #10b981); background: rgba(16, 185, 129, 0.12); }
/* Progress details modal (opened from progress bar label) — pie chart + legend */
.vault-dt-progress-details-modal {
  font-size: 0.875rem;
}
.vault-dt-progress-details-summary {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--vault-text, #111);
}
.vault-dt-progress-details-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--vault-text-muted, #64748b);
  line-height: 1.4;
}
.vault-dt-progress-details-chart-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
/* Small screens: pie on top, legend below */
.vault-dt-progress-details-chart-wrap .vault-pie-chart {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.vault-dt-progress-details-chart-wrap .vault-pie-chart__chart {
  flex-shrink: 0;
}
.vault-dt-progress-details-chart-wrap .vault-pie-chart__legend {
  width: 100%;
  min-width: 0;
}
@media (min-width: 400px) {
  .vault-dt-progress-details-chart-wrap {
    flex-direction: row;
  }
  .vault-dt-progress-details-chart-wrap .vault-pie-chart {
    flex-direction: row;
    align-items: flex-start;
    width: auto;
  }
  .vault-dt-progress-details-chart-wrap .vault-pie-chart__legend {
    flex: 1 1 0;
    width: auto;
  }
}

/* Fallback list when pie chart component not loaded */
.vault-dt-progress-details-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vault-dt-progress-details-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
}
.vault-dt-progress-details-label {
  flex-shrink: 0;
  min-width: 5.5rem;
  font-weight: 600;
  color: var(--vault-text, #111);
}
.vault-dt-progress-details-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vault-dt-progress-details-count {
  font-weight: 600;
  color: var(--vault-text, #111);
}
.vault-dt-progress-details-pct {
  color: var(--vault-text-muted, #64748b);
  font-size: 0.8125rem;
  min-width: 2.25rem;
  text-align: right;
}

/* Reusable pie chart component (used in Progress details and elsewhere) */
.vault-pie-chart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.vault-pie-chart__chart {
  flex-shrink: 0;
  border-radius: 50%;
}
.vault-pie-chart__legend {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vault-pie-chart__legend-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.vault-pie-chart__legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.vault-pie-chart__legend-label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--vault-text, #111);
}
.vault-pie-chart__legend-meta {
  flex-shrink: 0;
  color: var(--vault-text-muted, #64748b);
}

/* Reusable horizontal bar chart (time-by-task modal): [ ID + info | bar | status + time ] */
.vault-bar-chart {
  width: 100%;
  min-width: 0;
}
/* One grid for all rows: column 3 width = max(meta) across rows, so every 1fr bar column matches. */
.vault-bar-chart__rows {
  display: grid;
  grid-template-columns: minmax(11rem, 34%) minmax(0, 1fr) auto;
  column-gap: 0.35rem;
  row-gap: 0.85rem;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.vault-bar-chart__row {
  display: contents;
}
.vault-bar-chart__id-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}
.vault-bar-chart__id-line {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}
.vault-bar-chart__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--vault-text, #0f172a);
  line-height: 1.2;
  flex-shrink: 0;
  white-space: nowrap;
}
.vault-bar-chart__id-sep {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vault-text-muted, #64748b);
  padding: 0 0.05rem;
}
.vault-bar-chart__row-name {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vault-text-muted, #64748b);
  line-height: 1.25;
  text-align: right;
}
.vault-bar-chart__info.vault-info {
  flex-shrink: 0;
}
.vault-bar-chart__track-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}
.vault-bar-chart__track-h {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
/* Fixed width so "0%" and "100%" reserve the same space — gray tracks stay identical width. */
.vault-bar-chart__pct-end {
  flex: 0 0 3rem;
  width: 3rem;
  box-sizing: border-box;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--vault-text, #0f172a);
  text-align: right;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.vault-bar-chart__fill-h {
  height: 100%;
  min-width: 0;
  border-radius: 9999px;
  transition: width 0.2s ease;
}
.vault-bar-chart__meta-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2rem;
  flex-shrink: 0;
  text-align: right;
  justify-self: end;
  min-width: 0;
}

/* Row details (VaultInfo popup HTML) */
.vault-bar-chart-info__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--vault-text-muted, #64748b);
  margin-top: 0.45rem;
}
.vault-bar-chart-info__label:first-child {
  margin-top: 0;
}
.vault-bar-chart-info__value {
  font-size: 0.8125rem;
  color: var(--vault-text, #0f172a);
  line-height: 1.35;
  word-break: break-word;
}
.vault-bar-chart-info__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  word-break: break-all;
}

.vault-bar-chart__status {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 9999px;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-bar-chart__values {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vault-text, #0f172a);
  line-height: 1.2;
  white-space: nowrap;
}
/* Stacked layout + full-width bar track: small viewports */
@media (max-width: 720px) {
  .vault-bar-chart__rows {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    grid-template-columns: none;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    max-width: 100%;
  }
  .vault-bar-chart__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .vault-bar-chart__id-cell {
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
  }
  .vault-bar-chart__id-line {
    justify-content: flex-start;
    max-width: 100%;
  }
  .vault-bar-chart__id {
    white-space: nowrap;
    word-break: normal;
  }
  .vault-bar-chart__row-name {
    text-align: left;
  }
  .vault-bar-chart__track-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .vault-bar-chart__track-h {
    min-width: 0;
  }
  .vault-bar-chart__meta-cell {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}

/* Same stacked layout when the chart container is narrow (e.g. extension side panel wide window) */
@container vault-dt-time-chart (max-width: 720px) {
  .vault-bar-chart__rows {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    grid-template-columns: none;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    max-width: 100%;
  }
  .vault-bar-chart__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .vault-bar-chart__id-cell {
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
  }
  .vault-bar-chart__id-line {
    justify-content: flex-start;
    max-width: 100%;
  }
  .vault-bar-chart__id {
    white-space: nowrap;
    word-break: normal;
  }
  .vault-bar-chart__row-name {
    text-align: left;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__id-line {
    justify-content: flex-start;
  }
  .vault-bar-chart__track-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .vault-bar-chart__track-h {
    min-width: 0;
  }
  .vault-bar-chart__meta-cell {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}

/* Time-by-task: two columns (id+status | bar) on small viewports */
@media (max-width: 720px) {
  .vault-bar-chart--time-by-task .vault-bar-chart__rows {
    display: grid;
    grid-template-columns: minmax(3.5rem, 5.5rem) minmax(5rem, 1fr);
    column-gap: 0.45rem;
    row-gap: 0.45rem;
    align-items: stretch;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__row {
    display: contents;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__id-cell {
    justify-content: center;
    align-items: flex-end;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__id-line {
    justify-content: flex-end;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__track-wrap {
    width: 100%;
    min-width: 0;
  }
}
@container vault-dt-time-chart (max-width: 720px) {
  .vault-bar-chart--time-by-task .vault-bar-chart__rows {
    display: grid;
    grid-template-columns: minmax(3.5rem, 5.5rem) minmax(5rem, 1fr);
    column-gap: 0.45rem;
    row-gap: 0.45rem;
    align-items: stretch;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__row {
    display: contents;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__id-cell {
    justify-content: center;
    align-items: flex-end;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__id-line {
    justify-content: flex-end;
  }
  .vault-bar-chart--time-by-task .vault-bar-chart__track-wrap {
    width: 100%;
    min-width: 0;
  }
}

/* Time distribution modal (total time badge → bar chart) */
.vault-dt-time-distribution-modal {
  font-size: 0.875rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.vault-dt-time-distribution-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.vault-dt-time-distribution-summary {
  margin: 0 0 0.75rem;
  font-weight: 500;
  color: var(--vault-text-muted, #64748b);
  line-height: 1.4;
}
.vault-dt-time-distribution-summary-total {
  font-weight: 700;
  color: var(--vault-text, #0f172a);
}
.vault-dt-time-distribution-chart-wrap {
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Stack bar rows when this area is narrow (side panel / bottom sheet), even if viewport is wide */
  container-type: inline-size;
  container-name: vault-dt-time-chart;
}

/* Time by task modal — headline + total (Statista-style title band) */
.vault-dt-time-distribution-hero {
  flex-shrink: 0;
  margin: 0 0 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--vault-border, #e2e8f0);
}
.vault-dt-time-distribution-hero__kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vault-text-muted, #64748b);
  margin-bottom: 0.2rem;
}
.vault-dt-time-distribution-hero__total {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vault-text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.vault-dt-time-distribution-hero__sub {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--vault-text-muted, #64748b);
  max-width: 42rem;
}

/* Time-by-task horizontal chart variant (DataTable modal only): id + status | bar */
.vault-bar-chart--time-by-task {
  --vault-time-by-task-row-h: 2.25rem;
}
.vault-bar-chart--time-by-task .vault-bar-chart__rows {
  grid-template-columns: minmax(5rem, 7.25rem) minmax(0, 1fr);
  column-gap: 0.55rem;
  row-gap: 0.45rem;
  align-items: stretch;
}
.vault-bar-chart--time-by-task .vault-bar-chart__id-cell {
  background: var(--vault-dt-time-id-bg, #fafafa);
  border-radius: 0.2rem;
  padding: 0.32rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.28rem;
  align-self: stretch;
  box-sizing: border-box;
  min-width: 0;
}
.vault-bar-chart--time-by-task .vault-bar-chart__id-line {
  justify-content: flex-end;
  width: 100%;
  flex-shrink: 0;
}
.vault-bar-chart--time-by-task .vault-bar-chart__id {
  font-size: 0.8125rem;
}
.vault-bar-chart__status--under-id {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.12rem 0.35rem;
  border-radius: 9999px;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-bar-chart--time-by-task .vault-bar-chart__track-wrap {
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: stretch;
}
.vault-bar-chart__track-hit {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  border-radius: 0;
}
.vault-bar-chart--time-by-task .vault-bar-chart__track-hit {
  min-height: var(--vault-time-by-task-row-h);
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
}
.vault-bar-chart__track-hit[tabindex="0"] {
  cursor: pointer;
}
.vault-bar-chart__track-hit[tabindex="0"]:hover .vault-bar-chart__fill-h {
  filter: brightness(0.96);
}
.vault-bar-chart__track-hit[tabindex="0"]:focus-visible {
  outline: 2px solid var(--vault-primary, #10b981);
  outline-offset: 2px;
}
.vault-bar-chart--time-by-task .vault-bar-chart__track-h--pct-inline {
  flex: 1 1 auto;
  min-height: var(--vault-time-by-task-row-h, 2.25rem);
  height: auto;
  align-self: stretch;
}
.vault-bar-chart__track-h--pct-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: var(--vault-time-by-task-row-h, 2.25rem);
  min-height: var(--vault-time-by-task-row-h, 2.25rem);
  box-sizing: border-box;
  border-radius: 0;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.vault-bar-chart__track-h--pct-inline .vault-bar-chart__fill-h {
  border-radius: 0;
}
.vault-bar-chart__pct-in-track {
  flex-shrink: 1;
  min-width: 0;
  margin-left: auto;
  padding: 0 0.4rem 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--vault-text, #0f172a);
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* Fallback list when chart scripts missing — mirror time-by-task layout */
.vault-dt-time-distribution-fallback--time-by-task {
  --vault-time-by-task-row-h: 2.25rem;
  gap: 0.5rem;
}
.vault-dt-time-distribution-fallback--time-by-task .vault-dt-time-distribution-fallback-row {
  display: grid;
  grid-template-columns: minmax(5rem, 7.25rem) minmax(0, 1fr);
  align-items: stretch;
  gap: 0.55rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}
.vault-dt-time-distribution-fallback-id {
  background: var(--vault-dt-time-id-bg, #fafafa);
  border-radius: 0.2rem;
  padding: 0.32rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.28rem;
  box-sizing: border-box;
  min-width: 0;
}
.vault-dt-time-distribution-fallback-id__text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  font-size: 0.8125rem;
  text-align: right;
  color: var(--vault-text, #0f172a);
  line-height: 1.2;
}
.vault-dt-time-distribution-fallback-id .vault-dt-time-distribution-fallback-status {
  font-size: 0.5625rem;
  padding: 0.12rem 0.35rem;
}
.vault-dt-time-distribution-fallback-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--vault-time-by-task-row-h, 2.25rem);
  min-height: var(--vault-time-by-task-row-h, 2.25rem);
  border-radius: 0;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
  box-sizing: border-box;
}
.vault-dt-time-distribution-fallback-fill {
  height: 100%;
  border-radius: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.vault-dt-time-distribution-fallback-pct {
  margin-left: auto;
  padding: 0 0.4rem 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--vault-text, #0f172a);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .vault-dt-time-distribution-fallback--time-by-task .vault-dt-time-distribution-fallback-row {
    grid-template-columns: minmax(3.5rem, 5.5rem) minmax(5rem, 1fr);
  }
}
.vault-dt-time-distribution-fallback-status {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  line-height: 1.2;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-time-distribution-fallback-bar-col {
  min-width: 0;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
.vault-dt-time-distribution-fallback--time-by-task .vault-dt-time-distribution-fallback-track {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}
.vault-dt-progress-bar-time-badge--clickable {
  cursor: pointer;
  border: none;
  font: inherit;
  text-align: center;
}
.vault-dt-progress-bar-time-badge--clickable:hover {
  filter: brightness(0.97);
}
.vault-dt-progress-bar-time-badge--clickable:focus-visible {
  outline: 2px solid var(--vault-primary, #10b981);
  outline-offset: 2px;
}
.vault-dt-time-distribution-fallback {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.vault-dt-time-distribution-fallback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--vault-bg-elevated, #f8fafc);
}
.vault-dt-time-distribution-fallback-name {
  flex: 1 1 8rem;
  min-width: 0;
  font-weight: 600;
  color: var(--vault-text, #0f172a);
}
.vault-dt-time-distribution-fallback-name--one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-dt-table-scroll {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* PWA sets touch-action: pan-y on .vault-dt__main; without pan-x, horizontal grid scroll is blocked on touch. */
  touch-action: pan-x pan-y;
  background: transparent !important;
  display: flex;
  flex-direction: column;
}
.vault-dt-table-scroll--card-mode .vault-dt-grid,
.vault-tools-page--datatable .vault-dt-table-scroll--card-mode .vault-dt-grid,
.vault-dt--embed-page .vault-dt-table-scroll--card-mode .vault-dt-grid {
  display: none !important;
}
.vault-dt-table-scroll:not(.vault-dt-table-scroll--card-mode) > .vault-dt-card-deck {
  display: none !important;
}
.vault-dt-card-deck {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding: 0.65rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-sizing: border-box;
}
/* One row = one branch: card + optional subtree (tree guide under parent’s left edge). */
.vault-dt-card-branch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* Continuous vertical guide for direct children; not drawn on the card faces. */
.vault-dt-card-branch__subtree {
  position: relative;
  margin: 0;
  padding: 0 0 0 0.75rem;
  box-sizing: border-box;
}
.vault-dt-card-branch__subtree::before {
  content: '';
  position: absolute;
  left: 0.125rem;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--vault-primary, #14b8a6) 52%, var(--vault-border, #cbd5e1));
  pointer-events: none;
}
.vault-dt-card-branch[data-vault-dt-card-branch-depth='1'] .vault-dt-card-branch__subtree::before,
.vault-dt-card-branch[data-vault-dt-card-branch-depth='2'] .vault-dt-card-branch__subtree::before {
  background: color-mix(in srgb, var(--vault-primary, #0d9488) 58%, var(--vault-border, #94a3b8));
}
.vault-dt-card-branch[data-vault-dt-card-branch-depth='3'] .vault-dt-card-branch__subtree::before,
.vault-dt-card-branch[data-vault-dt-card-branch-depth='4'] .vault-dt-card-branch__subtree::before,
.vault-dt-card-branch[data-vault-dt-card-branch-depth='5'] .vault-dt-card-branch__subtree::before {
  background: color-mix(in srgb, var(--vault-primary, #0f766e) 60%, var(--vault-border, #64748b));
}
.vault-dt-card-branch__nested {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding-left: 0.5rem;
  box-sizing: border-box;
}
.vault-dt-card {
  --vault-dt-card-depth: 0;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--vault-bg-elevated, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  margin-left: calc(var(--vault-dt-card-depth, 0) * 14px);
  max-width: 100%;
  box-sizing: border-box;
}
.vault-dt-card-branch .vault-dt-card {
  margin-left: 0;
}
.vault-dt-card[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]) {
  box-shadow: inset 3px 0 0 0 var(--vault-dt-row-neon-bg, #94a3b8), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.vault-dt-card__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--vault-border, #e5e7eb);
}
.vault-dt-card__header-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.vault-dt-card__toggle {
  flex-shrink: 0;
}
.vault-dt-card__uid {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vault-text-muted, #64748b);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-card__header-title-wrap {
  min-width: 0;
}
.vault-dt-card__title {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--vault-text, #0f172a);
  word-break: break-word;
  white-space: normal;
}
.vault-dt-card__header-doc-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}
.vault-dt-card__header-actions-trigger {
  flex-shrink: 0;
}
.vault-dt-card__doc {
  flex-shrink: 0;
}
.vault-dt-card__title-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.1rem 0.25rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vault-text, #0f172a);
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.25rem;
  background: var(--vault-bg, #fff);
}
.vault-dt-card__body {
  padding: 0.5rem 0.6rem 0.45rem;
}
.vault-dt-card__editable-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem 0.65rem;
  align-items: start;
}
.vault-dt-card__field--editable {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.vault-dt-card__field-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-card__field-label-inner,
.vault-dt-card__info-label-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.vault-dt-card__label-type-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-card__label-type-icon svg {
  display: block;
}
.vault-dt-card__label-type-icon.vault-dt-col-dropdown-item-icon--user-currency {
  width: auto;
  max-width: 2.75rem;
}
.vault-dt-card__label-type-icon .vault-dt-user-currency-icon {
  font-size: 12px !important;
}
.vault-dt-card__field-value {
  min-width: 0;
}
.vault-dt-card__info {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--vault-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.vault-dt-card__info-row {
  display: grid;
  grid-template-columns: minmax(0, min(42%, 10rem)) minmax(0, 1fr);
  gap: 0.45rem 0.6rem;
  align-items: start;
  font-size: 0.8rem;
  line-height: 1.35;
  padding: 0.2rem 0;
  border-radius: 0.25rem;
}
.vault-dt-card__info-row:nth-child(even) {
  background: rgba(148, 163, 184, 0.06);
}
.vault-dt-card__info-label {
  min-width: 0;
  padding-top: 0.12rem;
  color: var(--vault-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-card__info-value {
  min-width: 0;
  color: var(--vault-text, #0f172a);
  word-break: break-word;
}
.vault-dt-card__info-value.vault-dt-media-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  word-break: normal;
}
.vault-dt-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0.6rem 0.55rem;
  border-top: 1px solid var(--vault-border, #e5e7eb);
  font-size: 0.7rem;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-card__footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.vault-dt-card__meta {
  white-space: nowrap;
}
/* Sub-rows: right-aligned, emphasized (matches active filter affordance). */
.vault-dt-card__toggle--footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.2rem 0.45rem 0.2rem 0.35rem;
  min-height: 1.75rem;
  border-radius: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--vault-primary, #0d9488) 45%, transparent);
  background: color-mix(in srgb, var(--vault-primary, #14b8a6) 12%, transparent);
  color: var(--vault-primary, #0f766e);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}
.vault-dt-card__toggle--footer:hover {
  background: color-mix(in srgb, var(--vault-primary, #14b8a6) 20%, transparent);
  border-color: color-mix(in srgb, var(--vault-primary, #0d9488) 60%, transparent);
}
.vault-dt-card__toggle--footer .vault-dt-card__toggle-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.vault-dt-card__toggle--footer .vault-dt-card__toggle-icon svg {
  width: 14px;
  height: 14px;
}
.vault-dt-card__toggle--footer .vault-dt-card__toggle-count {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Footer sub-row control is not the grid name-cell toggle (that uses absolute `.vault-dt-toggle-children`). */
.vault-dt-card__footer .vault-dt-card__toggle--footer {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: auto;
}
.vault-dt-card__muted {
  color: var(--vault-text-muted, #94a3b8);
}
/* Minimalistic black & white: transparent background, default black text */
/* Full-page embed (Tools Data tables + project panel): same table display + table-layout:fixed for resizable cols */
.vault-tools-page--datatable .vault-dt-table-scroll,
.vault-dt--embed-page .vault-dt-table-scroll {
  background: transparent !important;
}
.vault-tools-page--datatable .vault-dt-grid,
.vault-dt--embed-page .vault-dt-grid {
  display: table !important;
  width: 100% !important;
  background: transparent !important;
  color: #111 !important;
  table-layout: auto;
}
/* Flat table: fixed layout + fill scroll area width so <col>/resize handles set width, not cell text
   (width:max-content made the table as wide as content mins and blocked shrinking past long values).
   min-width:100% keeps short tables full-width; overflow-x on the scroll host handles wide col sums. */
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat {
  table-layout: fixed;
  width: 100% !important;
  min-width: 100% !important;
}
/* min-width:0 + clip: intrinsic cell min-content no longer wins over assigned column width */
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat thead .vault-dt-grid__th:not(.vault-dt-grid__th--actions),
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat thead .vault-dt-grid__th:not(.vault-dt-grid__th--actions),
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat tbody .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions),
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat tbody .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) {
  overflow-x: hidden;
  min-width: 0;
}
/* Flat grid body: left-align text; inner padding matches .vault-dt-grid__input (0.35rem 0.5rem) — same inset as Unique ID / text inputs */
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions),
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) {
  text-align: left;
}
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-text-wrap,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-text-wrap {
  justify-content: flex-start;
  align-items: center;
}
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-plain-text,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-plain-text {
  padding: 0.35rem 0.5rem;
  box-sizing: border-box;
  text-align: left;
}
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-text-wrap > .vault-dt-cell-plain-text,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-text-wrap > .vault-dt-cell-plain-text {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-grid__input,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-grid__input {
  text-align: left;
}
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-multiselect-wrap,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-multiselect-wrap,
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-dropdown-wrap,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-dropdown-wrap {
  justify-content: flex-start;
}
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-readonly-select-pill,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-readonly-select-pill {
  align-self: flex-start;
}
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-decimal-wrap,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) .vault-dt-cell-decimal-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vault-tools-page--datatable .vault-dt-grid thead,
.vault-dt--embed-page .vault-dt-grid thead {
  display: table-header-group !important;
}
.vault-tools-page--datatable .vault-dt-grid tbody,
.vault-dt--embed-page .vault-dt-grid tbody {
  display: table-row-group !important;
}
.vault-tools-page--datatable .vault-dt-grid tr,
.vault-dt--embed-page .vault-dt-grid tr {
  display: table-row !important;
}
.vault-tools-page--datatable .vault-dt-grid th,
.vault-tools-page--datatable .vault-dt-grid td,
.vault-dt--embed-page .vault-dt-grid th,
.vault-dt--embed-page .vault-dt-grid td {
  display: table-cell !important;
}
/* Add-sub cell: keep flex so input and Enter button stay inline on all screen sizes */
.vault-tools-page--datatable .vault-dt-grid .vault-dt-grid__cell--add-sub,
.vault-dt--embed-page .vault-dt-grid .vault-dt-grid__cell--add-sub {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
/* Add-sub name cell: keep vertical blue line (left border) continuous and bottom border grey so line is not misaligned */
.vault-tools-page--datatable .vault-dt-grid.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col,
.vault-dt--embed-page .vault-dt-grid.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col {
  border-left: 2px solid color-mix(in srgb, var(--vault-primary, #10b981) 50%, white) !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.vault-tools-page--datatable .vault-dt-grid__head,
.vault-tools-page--datatable .vault-dt-grid__th,
.vault-dt--embed-page .vault-dt-grid__head,
.vault-dt--embed-page .vault-dt-grid__th {
  background: transparent !important;
  color: #374151 !important;
  border-bottom: 1px solid #e5e7eb;
}
/* Sticky table header within table scroll section — always above tbody + sticky row-action cells */
.vault-tools-page--datatable .vault-dt-grid__head,
.vault-dt--embed-page .vault-dt-grid__head {
  position: sticky !important;
  top: 0;
  z-index: 8;
  background: var(--vault-bg, #fff) !important;
  box-shadow: 0 1px 0 0 #e5e7eb;
}
.vault-tools-page--datatable .vault-dt-grid__head .vault-dt-grid__th,
.vault-dt--embed-page .vault-dt-grid__head .vault-dt-grid__th {
  background: var(--vault-bg, #fff) !important;
}
.vault-tools-page--datatable .vault-dt-grid__body .vault-dt-grid__row,
.vault-dt--embed-page .vault-dt-grid__body .vault-dt-grid__row {
  background-color: var(--vault-bg, #fff) !important;
}
.vault-tools-page--datatable .vault-dt-grid__body .vault-dt-grid__row:hover,
.vault-dt--embed-page .vault-dt-grid__body .vault-dt-grid__row:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}
.vault-tools-page--datatable .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions),
.vault-dt--embed-page .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) {
  background: transparent !important;
  color: #111 !important;
  border-bottom: 1px solid #e5e7eb;
}
.vault-tools-page--datatable .vault-dt-grid__th-inner,
.vault-tools-page--datatable .vault-dt-grid__th-label,
.vault-dt--embed-page .vault-dt-grid__th-inner,
.vault-dt--embed-page .vault-dt-grid__th-label {
  color: #374151 !important;
}
.vault-tools-page--datatable .vault-dt-grid__input,
.vault-dt--embed-page .vault-dt-grid__input {
  color: #111 !important;
  background: transparent !important;
  border-color: transparent;
}
.vault-tools-page--datatable .vault-dt-add-row-input--bordered,
.vault-tools-page--datatable .vault-dt-add-sub-input,
.vault-dt--embed-page .vault-dt-add-row-input--bordered,
.vault-dt--embed-page .vault-dt-add-sub-input {
  border-color: #e5e7eb !important;
  background: #fff !important;
}
.vault-tools-page--datatable .vault-dt-grid__cell--plain,
.vault-dt--embed-page .vault-dt-grid__cell--plain {
  color: #111 !important;
}
.vault-tools-page--datatable .vault-dt-add-row-bar,
.vault-dt--embed-page .vault-dt-add-row-bar {
  background: transparent !important;
  border-top-color: rgba(0, 0, 0, 0.08);
  padding-left: calc(2.25rem + 0.75rem);
}
/* After rule above: project panel main-body has no horizontal inset — same as Tools standalone page */
#panel-datatable-body .vault-dt-add-row-bar {
  padding-left: 2.25rem;
}
.vault-tools-page--datatable .vault-dt-grid__th--actions,
.vault-dt--embed-page .vault-dt-grid__th--actions {
  background: var(--vault-bg, #fff) !important;
  color: #374151 !important;
  border-right-color: #e5e7eb;
  border-bottom: none !important;
  border-left: none !important;
  z-index: 9 !important;
}
.vault-tools-page--datatable .vault-dt-grid__cell--actions,
.vault-dt--embed-page .vault-dt-grid__cell--actions {
  color: #374151 !important;
  border-right-color: #e5e7eb;
  border-bottom: none !important;
  border-left: none !important;
  z-index: 4 !important;
}
.vault-dt-add-row-bar {
  flex-shrink: 0;
  width: 100%;
  padding: 0.6rem 0.75rem;
  padding-left: calc(2.25rem + 0.75rem);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--vault-bg, #fff);
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-sizing: border-box;
}
.vault-dt-add-row-input-wrap {
  flex: 1 1 0;
  min-width: 0;
}
.vault-dt-add-row-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: transparent;
  color: #111;
  box-sizing: border-box;
}
.vault-dt-add-row-input--bordered {
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  min-height: 2.5rem;
  background: #fff;
}
.vault-dt-add-row-input--bordered:focus {
  border-color: #9ca3af;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}
.vault-dt-add-row-enter-btn {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: var(--vault-primary-light, rgba(4, 146, 181, 0.12));
  color: var(--vault-primary, #0492b5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-add-row-enter-btn:hover {
  background: var(--vault-primary, #0492b5);
  color: #fff;
}
.vault-dt-add-row-enter-btn svg {
  width: 20px;
  height: 20px;
}
.vault-dt-add-row-enter-btn.vault-dt-row-add-enter-btn--loading,
.vault-dt-add-sub-enter-btn.vault-dt-row-add-enter-btn--loading {
  background: var(--vault-primary-light, rgba(4, 146, 181, 0.12));
}
.vault-dt-add-row-enter-btn.vault-dt-row-add-enter-btn--loading .vault-loader--button,
.vault-dt-add-sub-enter-btn.vault-dt-row-add-enter-btn--loading .vault-loader--button {
  margin: 0;
}
.vault-dt-add-row-enter-btn.vault-dt-row-add-enter-btn--loading .vault-loader__spinner,
.vault-dt-add-sub-enter-btn.vault-dt-row-add-enter-btn--loading .vault-loader__spinner {
  border-top-color: var(--vault-primary, #0492b5);
}
.vault-dt-add-row-bar--busy {
  opacity: 0.72;
  pointer-events: none;
}

/* Data table grid fullscreen: use full column height; breathing room between chrome rows; add-row clears home indicator */
.vault-app--panel-datatable-fullscreen .vault-dt {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}
.vault-app--panel-datatable-fullscreen .vault-dt__header-row {
  padding-top: 0.35rem;
  padding-bottom: 0.28rem;
}
.vault-app--panel-datatable-fullscreen .vault-dt__header-row.vault-dt__header-row--linked-tables-strip,
.vault-app--panel-datatable-fullscreen .vault-dt__header-row.vault-dt__header-row--bundle-nav {
  row-gap: 0.42rem;
}
.vault-app--panel-datatable-fullscreen .vault-panel-datatable-body .vault-dt--project-page.vault-dt--chrome-table-name .vault-dt__header-row--linked-tables-strip .vault-dt-linked-tables-strip-host,
.vault-app--panel-datatable-fullscreen .vault-panel-datatable-body .vault-dt--project-page.vault-dt--chrome-table-name .vault-dt__header-row--bundle-nav .vault-dt-inventory-bundle-nav-host {
  margin-top: 0.18rem;
}
.vault-app--panel-datatable-fullscreen .vault-dt__main-body {
  padding-top: 0.45rem;
}
.vault-app--panel-datatable-fullscreen .vault-dt-add-row-bar {
  padding-bottom: max(0.85rem, calc(env(safe-area-inset-bottom, 0px) + 0.55rem));
  margin-bottom: max(0.15rem, env(safe-area-inset-bottom, 0px));
}
.vault-dt__main-body--row-mutation-loading {
  position: relative;
}
.vault-dt-table-scroll--row-mutation-loading {
  position: relative;
}
.vault-dt__row-mutation-loader {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vault-bg, #fff) 86%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}
.vault-dt-row-actions-delete--busy {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
}
.vault-dt-row-actions-delete--busy::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--vault-primary, #0492b5);
  border-radius: 50%;
  animation: vault-dt-row-delete-spin 0.65s linear infinite;
}
@keyframes vault-dt-row-delete-spin {
  to {
    transform: rotate(360deg);
  }
}
.vault-dt-grid__row--add-sub-busy {
  opacity: 0.72;
  pointer-events: none;
}
.vault-dt__list--loading {
  min-height: 4rem;
}
/* Collapsed sub-row branches (visibility applied from JS; !important beats stray layout rules) */
.vault-dt-grid--has-subrows .vault-dt-grid__body tr.vault-dt-grid__row--subrow-hidden {
  display: none !important;
}
/* Subrows: full colspan row to add sibling at same level */
.vault-dt-grid__row--add-sub {
  background: #fafbfc;
}
.vault-dt-grid__cell--add-sub {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid #f3f4f6;
  border-right: 1px solid #e5e7eb;
  vertical-align: middle;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  min-width: 0;
}
.vault-dt-grid__cell--add-sub > .vault-dt-add-sub-input-wrap,
.vault-dt-grid__cell--add-sub > .vault-dt-add-sub-enter-btn {
  flex-shrink: 0;
}
.vault-dt-grid__cell--add-sub > .vault-dt-add-sub-input-wrap {
  flex-shrink: 1;
  min-width: 0;
}
.vault-dt-add-sub-input-wrap {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  order: 1;
  width: clamp(12rem, 45vw, 22rem);
  max-width: 22rem;
}
.vault-dt-add-sub-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.9375rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  background: #fff;
}
.vault-dt-add-sub-input:focus {
  border-color: #9ca3af;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}
.vault-dt-add-sub-enter-btn {
  flex-shrink: 0;
  order: 2;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: var(--vault-primary-light, rgba(4, 146, 181, 0.12));
  color: var(--vault-primary, #0492b5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-add-sub-enter-btn:hover {
  background: var(--vault-primary, #0492b5);
  color: #fff;
}
.vault-dt-add-sub-enter-btn svg {
  width: 16px;
  height: 16px;
}
.vault-dt-grid__cell--add-sub-empty {
  padding: 0.25rem 0.6rem;
  border-bottom: 1px solid #f3f4f6;
  border-right: 1px solid #e5e7eb;
  background: #fafbfc;
}
.vault-dt-table-toolbar {
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.vault-dt-table-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vault-dt-table-action-btn {
  flex-shrink: 0;
}
.vault-dt-dropdown {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.25rem;
  max-height: 16rem;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10000;
  position: fixed;
}
.vault-dt-col-dropdown.vault-dt-dropdown {
  min-width: 11rem;
}
.vault-dt-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: #111;
  font-size: 0.8125rem;
  cursor: pointer;
}
.vault-dt-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Tags column: single line chips, xs size, content-aware dropdown */
.vault-dt-tags-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  min-width: 0;
}
.vault-dt-tags-chips .vault-note-tag-chip--xs {
  flex-shrink: 0;
  font-size: 0.6875rem;
  padding: 0.15rem 0.35rem;
  line-height: 1.2;
}
/* Square tags in table; keep solid colored circle on the left (::before uses currentColor = tag color) */
.vault-dt-tags-chips--square .vault-note-tag-chip {
  border-radius: 4px;
}
.vault-dt-tags-chips--square .vault-note-tag-chip::before {
  border-radius: 50%;
  background-color: currentColor;
}

/* Tags cell: plus button to add tags (opens modal; no inline dropdown) */
.vault-dt-tags-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--vault-success, #22c55e) 18%, transparent);
  color: var(--vault-success, #16a34a);
  cursor: pointer;
  flex-shrink: 0;
}
.vault-dt-tags-plus-btn:hover {
  background: color-mix(in srgb, var(--vault-success, #22c55e) 28%, transparent);
  color: var(--vault-success, #15803d);
}
.vault-dt-cell-tags-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.vault-dt-cell-tags-wrap .vault-dt-tags-chips {
  flex: 1;
  min-width: 0;
}
.vault-dt-cell-tags-wrap .vault-dt-tags-plus-btn {
  margin-left: auto;
  flex-shrink: 0;
}

/* New tag modal: bigger swatches, smaller color selector with + */
.vault-dt-new-tag-colors .vault-dt-new-tag-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #475569);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.vault-dt-new-tag-colors .vault-dt-new-tag-swatch:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.vault-dt-new-tag-custom-row {
  margin-top: 0.5rem;
}
.vault-dt-new-tag-custom-trigger {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #475569);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.vault-dt-new-tag-custom-plus {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  pointer-events: none;
}
.vault-dt-new-tag-color-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.vault-dt-tags-input-wrap {
  flex: 1;
  min-width: 4rem;
}
.vault-dt-tags-dropdown.vault-dt-dropdown {
  min-width: 10rem;
  max-height: 12rem;
}
.vault-dt-tags-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
}
.vault-dt-tags-dropdown-item-color {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.vault-dt-tags-dropdown-item--disabled,
.vault-dt-tags-dropdown-item:disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}
.vault-dt-tags-dropdown-msg {
  cursor: default;
  pointer-events: none;
}
.vault-dt-tags-added-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 18%, transparent);
  color: var(--vault-primary, #6366f1);
}
.vault-dt-tags-modal-added-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.vault-dt-tags-modal-added .vault-dt-tags-modal-added-label {
  margin-bottom: 0.5rem;
}

/* Reminder rules cell: badge (icon + default/custom/silent/no reminder), clickable to open modal */
.vault-dt-cell-reminder-wrap {
  padding: 0.25rem 0.35rem;
  border-radius: 0.25rem;
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.vault-dt-cell-reminder-left {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.vault-dt-cell-reminder-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.vault-dt-cell-reminder-badge--default {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.vault-dt-cell-reminder-badge--custom {
  color: var(--vault-primary, #10b981);
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.vault-dt-cell-reminder-badge--silent {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.vault-dt-cell-reminder-badge--clickable {
  cursor: pointer;
}
.vault-dt-cell-reminder-badge--clickable:hover {
  opacity: 0.9;
}
.vault-dt-cell-reminder-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}
.vault-dt-cell-reminder-badge-icon svg {
  display: block;
  vertical-align: middle;
}
.vault-dt-cell-reminder-change {
  flex-shrink: 0;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
  color: #64748b;
  background: transparent;
  border: none;
}
.vault-dt-cell-reminder-change:hover {
  color: var(--vault-text);
  background: rgba(0, 0, 0, 0.06);
}
.vault-dt-cell-reminder-wrap:hover {
  background: rgba(0, 0, 0, 0.04);
}
.vault-dt-cell-reminder-popover {
  padding: 0.5rem;
  min-width: 18rem;
  max-height: 20rem;
  overflow-y: auto;
}

/* Add column dropdown: sections + icon left, label right (same row order as gear menu) */
.vault-dt-col-dropdown-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
  padding: 0.35rem 0.6rem 0.15rem;
  margin-top: 0.25rem;
  border-bottom: none;
}
.vault-dt-col-dropdown-section-title:first-child {
  margin-top: 0;
  padding-top: 0.2rem;
}
.vault-dt-col-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
}
.vault-dt-col-dropdown-item-label {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.vault-dt-col-dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #6b7280;
}
.vault-dt-col-dropdown-item-icon svg {
  width: 100%;
  height: 100%;
}
.vault-dt-col-dropdown-item-icon.vault-dt-col-dropdown-item-icon--user-currency {
  width: auto;
  min-width: 1rem;
  max-width: 3.25rem;
  padding: 0 0.05rem;
}
.vault-dt-user-currency-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: inherit;
}

.vault-dt-reorder-list .vault-dt-reorder-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  cursor: default;
}
.vault-dt-reorder-list .vault-dt-reorder-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
.vault-dt-reorder-drag {
  cursor: grab;
  color: #6b7280;
  font-size: 1rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
.vault-dt-reorder-dragging {
  opacity: 0.7;
  user-select: none;
  -webkit-user-select: none;
}
.vault-dt-reorder-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
}
.vault-dt-reorder-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.5rem 0.2rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.2rem;
}
.vault-dt-reorder-section + .vault-dt-reorder-section .vault-dt-reorder-section-title {
  padding-top: 0.5rem;
}
.vault-dt-reorder-visibility {
  padding: 0.2rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-reorder-visibility--shown {
  color: #374151;
}
.vault-dt-reorder-visibility--hidden {
  color: #9ca3af;
}
.vault-dt-reorder-visibility:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
.vault-dt-reorder-visibility--shown:hover {
  color: #111;
}
.vault-dt-reorder-visibility--locked,
.vault-dt-reorder-visibility:disabled {
  opacity: 0.7;
  cursor: default;
  color: #9ca3af;
}
.vault-dt-reorder-visibility--locked:hover,
.vault-dt-reorder-visibility:disabled:hover {
  background: transparent;
  color: #9ca3af;
}
.vault-dt-reorder-settings {
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}
.vault-dt-reorder-settings:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
.vault-dt-grid__th--editable {
  cursor: pointer;
}
.vault-dt-grid__th--editable.vault-dt-grid__th--header-readonly {
  cursor: default;
}
.vault-dt-grid__th--editable.vault-dt-grid__th--header-settings-hover:hover,
.vault-dt-grid__th--recurring-add.vault-dt-grid__th--header-settings-hover:hover {
  background: rgba(0, 0, 0, 0.055);
}
.vault-modal--settings .vault-dt-option-drag-handle {
  flex-shrink: 0;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  padding: 0.15rem 0.2rem 0.15rem 0;
  color: #94a3b8;
  font-size: 0.65rem;
  line-height: 1.1;
  letter-spacing: -0.08em;
}
.vault-modal--settings .vault-dt-option-drag-handle:active {
  cursor: grabbing;
}
.vault-modal--settings .vault-dt-option-row--dragging {
  opacity: 0.9;
}
.vault-dt-grid__th-input {
  min-width: 4rem;
}
.vault-dt-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  background: transparent;
  color: #111;
}
/* Match global smart-text editor (0.875rem) to grid body size */
.vault-dt-grid .vault-smart-text-editor {
  font-size: inherit;
}
.vault-dt-grid--row-sync {
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.vault-dt-grid__head {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--vault-bg, #fff);
  border-bottom: 1px solid #e5e7eb;
}
.vault-dt-grid--flat .vault-dt-grid__head-row .vault-dt-grid__th {
  border-bottom: 1px solid #e5e7eb;
}
.vault-dt-grid__head-row {
  border: none;
}
.vault-dt-grid__th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  min-width: 8rem;
  position: relative;
}
.vault-dt-grid--flat .vault-dt-grid__th:not(.vault-dt-grid__th--actions) {
  min-width: 100px;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  box-sizing: border-box;
}
/* Name column (first data column): resizable like others; default 220px from JS, min for readability */
.vault-dt-grid--flat .vault-dt-grid__th--name-col,
.vault-dt-grid--flat .vault-dt-grid__cell--name-col {
  min-width: 100px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--name-col {
  min-width: 100px;
}

/* Type-based min-widths for headers (match cells to prevent overlap) */
.vault-dt-grid--flat .vault-dt-grid__th--text {
  min-width: 140px;
}
.vault-dt-grid--flat .vault-dt-grid__th--number {
  min-width: 80px;
}
.vault-dt-grid--flat .vault-dt-grid__th--tel,
.vault-dt-grid--flat .vault-dt-grid__th--email,
.vault-dt-grid--flat .vault-dt-grid__th--date,
.vault-dt-grid--flat .vault-dt-grid__th--time {
  min-width: 0;
  width: 10rem;
}
.vault-dt-grid--flat .vault-dt-grid__th--datetime {
  min-width: 0;
  width: 12rem;
}
.vault-dt-grid--flat .vault-dt-grid__th--date-range {
  min-width: 280px;
  width: 280px;
}
.vault-dt-grid--flat .vault-dt-grid__th--select {
  min-width: 100px;
}
.vault-dt-grid--flat .vault-dt-grid__th--multiselect {
  min-width: 120px;
}
.vault-dt-grid--flat .vault-dt-grid__th--toggle {
  min-width: 80px;
}
.vault-dt-grid--flat .vault-dt-grid__th--media,
.vault-dt-grid--flat .vault-dt-grid__th--relation,
.vault-dt-grid--flat .vault-dt-grid__th--auto-id {
  min-width: 100px;
}
.vault-dt-grid--flat .vault-dt-grid__th--actions {
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.vault-dt-grid__th-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 1.5rem;
  min-width: 0;
  width: 100%;
  /* Isolate header label / pie / calendar / automation so their z-index cannot stack above sibling .vault-dt-grid__th-resize */
  position: relative;
  z-index: 0;
}
.vault-dt-grid__th:not(.vault-dt-grid__th--actions) .vault-dt-grid__th-inner {
  padding-right: 12px;
}
.vault-dt-grid__th-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-grid__th-doc {
  flex-shrink: 0;
  padding: 0.2rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--vault-text-muted, #6b7280);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.15rem;
}
.vault-dt-grid__th-doc:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--vault-text, #111);
}
/* Select / multiselect / status / payment_status: pie chart opens value-distribution modal (sticky on horizontal scroll).
   Date/datetime columns: calendar button reuses the same sticky styles via .vault-dt-grid__th-column-chart-btn. */
.vault-dt-grid__th-column-chart-btn {
  flex-shrink: 0;
  position: sticky;
  right: 0;
  z-index: 3;
  margin-left: auto;
  padding: 0.15rem;
  border: none;
  border-radius: 0.25rem;
  background: var(--vault-bg, #fff);
  box-shadow: -8px 0 10px -4px var(--vault-bg, #fff);
  color: var(--vault-text-muted, #6b7280);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}
.vault-dt-grid__th-column-chart-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--vault-text, #111);
}
.vault-dt-grid__th-column-chart-btn:focus-visible {
  outline: 2px solid var(--vault-primary, #10b981);
  outline-offset: 1px;
}
.vault-dt-column-dist-modal__host {
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.vault-dt-column-dist-modal__host .vault-loader--inline {
  align-self: center;
  margin: 1.25rem auto;
}
.vault-dt-grid__th-settings {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
  padding: 0.2rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-grid__th:hover .vault-dt-grid__th-settings {
  opacity: 1;
}
.vault-dt-grid__th-settings:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
/* Column resize handle: absolute on right edge of th for reliable hit target; width saved in DB */
.vault-dt-grid__th:not(.vault-dt-grid__th--actions) .vault-dt-grid__th-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  min-width: 12px;
  cursor: col-resize;
  z-index: 6;
  pointer-events: auto;
  border-radius: 0 2px 2px 0;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  .vault-dt-grid__th:not(.vault-dt-grid__th--actions) .vault-dt-grid__th-resize {
    width: 24px;
    min-width: 24px;
  }
}
.vault-dt-grid__th:not(.vault-dt-grid__th--actions) .vault-dt-grid__th-resize:hover {
  background: rgba(0, 0, 0, 0.08);
}
.vault-dt-grid__th:not(.vault-dt-grid__th--actions) .vault-dt-grid__th-resize::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 1px;
  margin-left: -1px;
  background: #d1d5db;
  border-radius: 1px;
}
.vault-dt-grid__body .vault-dt-grid__row {
  border-bottom: 1px solid #e5e7eb;
  background-color: var(--vault-bg, #fff);
}
.vault-dt-grid__body .vault-dt-grid__row:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
.vault-dt-grid__body .vault-dt-grid__row:hover > .vault-dt-grid__cell--actions {
  /* Opaque stack: semi-transparent tint over solid page bg (single rgba on td lets scrolled cells show through) */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)), var(--vault-bg, #fff) !important;
}
.vault-dt-grid__cell {
  padding: 0.35rem 0.6rem;
  vertical-align: middle;
  color: #111;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
/* Content fills cell: 100% width with padding; truncate so text stays inside */
.vault-dt-grid__cell > div,
.vault-dt-grid__cell > span,
.vault-dt-grid__cell > button,
.vault-dt-grid__cell > a {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.vault-dt-grid--flat .vault-dt-grid__cell:not(.vault-dt-grid__cell--actions) {
  min-width: 100px;
  border-right: 1px solid #e5e7eb;
}
/* Type-based min-widths: text 140px, number 80px; name column overridden to 160px above */
.vault-dt-grid--flat .vault-dt-grid__cell--col-text {
  min-width: 140px;
}
.vault-dt-grid--flat .vault-dt-grid__cell--col-number {
  min-width: 80px;
}
.vault-dt-grid--flat .vault-dt-grid__cell--col-tel,
.vault-dt-grid--flat .vault-dt-grid__cell--col-email,
.vault-dt-grid--flat .vault-dt-grid__cell--col-date {
  min-width: 0;
  width: 10rem;
}
.vault-dt-grid--flat .vault-dt-grid__cell--col-date-range {
  min-width: 280px;
  width: 280px;
}
.vault-dt-grid--flat .vault-dt-grid__cell--col-select {
  min-width: 100px;
}
.vault-dt-grid--flat .vault-dt-grid__cell--col-multiselect {
  min-width: 120px;
}
.vault-dt-grid--flat .vault-dt-grid__cell--col-toggle {
  min-width: 80px;
}
.vault-dt-grid--flat .vault-dt-grid__cell--col-media,
.vault-dt-grid--flat .vault-dt-grid__cell--col-relation,
.vault-dt-grid--flat .vault-dt-grid__cell--col-auto-id {
  min-width: 100px;
}
.vault-dt-grid--flat .vault-dt-grid__cell--actions {
  border-right: 1px solid #e5e7eb;
}
.vault-dt-grid--flat .vault-dt-grid__body .vault-dt-grid__row {
  border-bottom: 1px solid #e5e7eb;
}
/* Text cell: input fills cell; on edit only input/related field visible */
/* Email / phone: value + optional validity icon (flex row; icon stays right) */
.vault-dt-cell-emailtel-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2rem;
  box-sizing: border-box;
}
.vault-dt-cell-emailtel-wrap .vault-dt-cell-text-wrap {
  flex: 1;
  min-width: 0;
}
.vault-dt-cell-validity-icon--invalid {
  flex-shrink: 0;
  align-self: center;
  color: var(--vault-warning, #d97706);
  line-height: 0;
  pointer-events: none;
}
.vault-dt-cell-validity-icon--invalid svg {
  display: block;
  vertical-align: middle;
}

.vault-dt-cell-text-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2rem;
  box-sizing: border-box;
}
.vault-dt-cell-text-wrap .vault-dt-grid__cell--editable-display {
  display: flex;
  align-items: center;
}
.vault-dt-cell-text-wrap .vault-dt-grid__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.vault-dt-cell-text-wrap .vault-dt-grid__input:focus {
  outline: none;
}
.vault-dt-cell-plain-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
.vault-dt-readonly-select-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  flex: 0 1 auto;
  box-sizing: border-box;
}
.vault-dt-cell-info {
  flex-shrink: 0;
}
.vault-dt-cell-info .vault-info__btn {
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  font-size: 0.6875rem;
}
.vault-dt-cell-decimal-wrap {
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  box-sizing: border-box;
}
.vault-dt-cell-decimal-wrap .vault-dt-grid__cell--editable-display {
  display: flex;
  align-items: center;
}
/* Table header row: on top of sticky cols; same bg as header for left sticky col */
.vault-dt-grid__head {
  background: var(--vault-bg, #fff);
}
.vault-dt-grid__head-row {
  background: var(--vault-bg, #fff);
  position: relative;
  z-index: 3;
}
.vault-dt-grid__th {
  position: relative;
  z-index: 2;
  background: var(--vault-bg, #fff);
}
.vault-dt-grid__th--actions {
  position: sticky;
  left: 0;
  z-index: 9;
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  padding: 0.4rem 0.2rem;
  background: var(--vault-bg, #fff);
  border-right: 1px solid #e5e7eb;
  border-bottom: none;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}
.vault-dt-grid__cell--actions {
  position: sticky;
  left: 0;
  /* Above scrolling name column; below thead + th--actions; opaque like th--actions so row data never shows through on horizontal scroll */
  z-index: 4;
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  padding: 0.25rem 0.2rem;
  /* Same solid base as .vault-dt-grid__th--actions; hover uses tint layered on white (see tr:hover > .cell--actions) */
  background: var(--vault-bg, #fff);
  border: none;
  border-right: 1px solid #e5e7eb;
  vertical-align: middle;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.03);
}
/* Parent row name cell: text starts from start; toggle absolute, show on row hover */
.vault-dt-grid__cell--name-parent {
  min-width: 0;
  position: relative;
}
.vault-dt-name-cell-wrap {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}
.vault-dt-name-cell-wrap .vault-dt-cell-text-wrap,
.vault-dt-name-cell-wrap .vault-dt-name-cell-content {
  width: 100%;
  min-width: 0;
  padding-left: 0;
}
.vault-dt-toggle-children {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Stay above name text in-cell only; must stay below sticky .vault-dt-grid__cell--actions (z-index 4) on horizontal scroll */
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #111827;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: color 0.15s ease;
}
.vault-dt-grid__row.vault-dt-grid__row--editing-name .vault-dt-toggle-children {
  opacity: 0;
  pointer-events: none;
}
.vault-dt-toggle-children:hover {
  color: #374151;
}
.vault-dt-name-cell-wrap .vault-dt-grid__input {
  width: 100%;
  min-width: 0;
}
.vault-dt-name-cell-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Name column: text + row doc icon */
.vault-dt-cell-name-with-doc {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}
.vault-dt-name-cell-wrap .vault-dt-cell-name-with-doc {
  width: 100%;
  padding-left: 1.65rem;
}
.vault-dt-cell-name-with-doc .vault-dt-cell-text-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.vault-dt-cell-name-with-doc .vault-dt-cell-text-wrap .vault-dt-grid__cell--name-display {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.vault-dt-cell-row-doc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  border-radius: 0.25rem;
  opacity: 0.85;
}
.vault-dt-cell-row-doc:hover {
  color: var(--vault-primary, #10b981);
  opacity: 1;
}

/* Date / select / toggle cells */
.vault-dt-cell-date-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
/* Due / total-days helper text under the date control (not beside it). */
.vault-dt-cell-date-wrap:has(.vault-dt-date-supplement),
.vault-dt-cell-date-wrap:has(.vault-dt-date-total-days) {
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
}
/* Plain date display: vertically center the value in the clickable row (min-height matches editable-display). */
.vault-dt-cell-date-wrap .vault-dt-cell-date-plain-display.vault-dt-grid__cell--editable-display {
  display: flex;
  align-items: center;
  min-height: 2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Date picker + plain display stay inside the column (no fixed 10.5rem stretch). */
.vault-dt-cell-date-wrap .vault-dt-cell-date-picker,
.vault-dt-cell-date-wrap .vault-dtp {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.vault-dt-cell-date-wrap .vault-dtp-trigger {
  max-width: 100%;
  min-width: 0;
}
.vault-dt-cell-date-wrap .vault-dtp-trigger-inner {
  min-width: 0;
}
.vault-dt-cell-date-wrap .vault-dtp-input {
  min-width: 0;
}
.vault-dt-date-input {
  width: 10.5rem;
  min-width: 10.5rem;
  max-width: 10.5rem;
  box-sizing: border-box;
}
.vault-dt-date-supplement,
.vault-dt-date-total-days {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: normal;
  max-width: 100%;
}
.vault-dt-date-supplement--warning {
  color: #b45309;
}
.vault-dt-date-supplement--urgent {
  color: #dc2626;
}
.vault-dt-date-supplement--overdue {
  color: #b91c1c;
  font-weight: 500;
}
.vault-dt-select-input,
.vault-dt-multiselect-input {
  width: 100%;
  max-width: 100%;
  min-height: 1.75rem;
}
.vault-dt-multiselect-input {
  min-height: 2.5rem;
}
.vault-dt-toggle-input {
  margin: 0;
  cursor: pointer;
}

.vault-dt-cell-select-wrap,
.vault-dt-cell-multiselect-wrap {
  overflow: hidden;
  min-width: 0;
}
.vault-dt-cell-multiselect-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}
.vault-dt-cell-multiselect-wrap.vault-dropdown:not(:has(.vault-dt-multiselect-badges)) {
  justify-content: flex-end;
}
.vault-dt-cell-multiselect-wrap .vault-dt-multiselect-badges {
  flex: 1 1 auto;
  min-width: 0;
}
.vault-dt-cell-multiselect-wrap.vault-dropdown--trigger-angle-only > .vault-dropdown-trigger {
  flex-shrink: 0;
  align-self: center;
  border: none;
  background: transparent;
  box-shadow: none;
  min-width: auto;
  padding: 0.2rem 0.35rem;
}
@media (hover: hover) {
  /* Match .vault-dt__icon-btn:hover (e.g. URL column plus) */
  .vault-dt-cell-multiselect-wrap.vault-dropdown--trigger-angle-only > .vault-dropdown-trigger:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
    border-color: transparent;
  }
}
.vault-dt-cell-multiselect-wrap.vault-dropdown--trigger-angle-only > .vault-dropdown-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #0492b5) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt-cell-multiselect-wrap.vault-dropdown--trigger-angle-only .vault-dropdown-trigger-angle svg {
  width: 16px;
  height: 16px;
}
.vault-dt-cell-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.vault-dt-cell-select-wrap .vault-dt-select-input {
  flex: 1;
  min-width: 0;
}
.vault-dt-option-color-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.vault-dt-multiselect-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.vault-dt-cell-multiselect-wrap .vault-dt-multiselect-badges .vault-dt-option-badge {
  flex-shrink: 0;
}
.vault-dt-cell-multiselect-wrap.vault-dropdown--trigger-angle-only .vault-dt-multiselect-badges .vault-dt-option-badge {
  cursor: pointer;
}
.vault-dt-option-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: #6366f1;
  background: color-mix(in srgb, #6366f1 12%, white);
}
.vault-dt-option-row {
  margin-bottom: 0.25rem;
}
.vault-modal--settings .vault-dt-option-row--hidden-default {
  opacity: 0.55;
}
.vault-modal--settings .vault-dt-option-visibility-btn {
  flex-shrink: 0;
}
.vault-dt-btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  cursor: pointer;
}
.vault-dt-btn-remove-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  min-width: 1.75rem;
  border: none;
  background: color-mix(in srgb, var(--vault-error, #dc2626) 14%, transparent);
  color: var(--vault-error, #dc2626);
  border-radius: 4px;
  cursor: pointer;
}
.vault-dt-btn-remove-option:hover {
  background: color-mix(in srgb, var(--vault-error, #dc2626) 22%, transparent);
}
.vault-dt-add-opt-input {
  margin-top: 0.5rem;
}
.vault-dt-add-opt-input::placeholder {
  color: #9ca3af;
}

.vault-dt-autoid-prefix-suffix-row {
  display: flex;
  gap: 0.5rem;
}
.vault-dt-autoid-prefix-suffix-row .flex-1 {
  flex: 1;
  min-width: 0;
}

/* Monday-style: child rows — same columns, bottom border; no different background */
.vault-dt-grid__row--child .vault-dt-grid__cell {
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}
/* Name column: indent for hierarchy; left border as subtle connector (resize-friendly) */
.vault-dt-grid__cell--name-indent {
  box-sizing: border-box;
  border-left: 2px solid #e5e7eb;
}
.vault-dt-grid__cell--name-indent[data-depth="1"] {
  border-left-color: #d1d5db;
}
.vault-dt-grid__cell--name-indent[data-depth="2"] {
  border-left-color: #9ca3af;
}

/* Tree structure (allow_subrows): name column only — padding + left border by depth */
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col {
  box-sizing: border-box;
  border-left: 2px solid #e5e7eb;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col[data-depth="0"] {
  padding-left: 0.25rem;
  border-left-color: #e5e7eb;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col[data-depth="1"] {
  padding-left: 0.85rem;
  border-left-color: color-mix(in srgb, var(--vault-primary, #10b981) 50%, white);
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col[data-depth="2"] {
  padding-left: 1.45rem;
  border-left-color: #9ca3af;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col[data-depth="3"] {
  padding-left: 2.05rem;
  border-left-color: #6b7280;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col[data-depth="4"],
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col[data-depth="5"] {
  padding-left: 2.65rem;
  border-left-color: #6b7280;
}

/* Rows without toggle: add padding to match toggle button spacing (1.65rem) */
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="0"] {
  padding-left: 1.9rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="1"] {
  padding-left: 2.5rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="2"] {
  padding-left: 3.1rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="3"] {
  padding-left: 3.7rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="4"],
.vault-dt-grid--has-subrows .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="5"] {
  padding-left: 4.3rem;
}

/* Add-sub row: match last-level border color (primary mid-tone) + inner line on cell so it spans full row height; keep input and button inline */
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col {
  box-sizing: border-box;
  border-left: 2px solid color-mix(in srgb, var(--vault-primary, #10b981) 50%, white);
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
/* Second level (depth 1) add-sub: no toggle, so use same left padding as depth-1 with toggle (no extra compensation) */
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="1"] {
  padding-left: 0.85rem;
}
/* Adding under a depth-1 parent → new row is depth 2: match .vault-dt-grid__cell--name-no-toggle[data-depth="2"] (3.1rem), not generic name-col depth-2 (1.45rem) */
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="2"] {
  padding-left: 3.1rem;
}

/* Last-level subrows: column left border primary mid-tone (match add-sub); inner line on cell so it always touches row top/bottom */
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle {
  position: relative;
  border-left-color: color-mix(in srgb, var(--vault-primary, #10b981) 50%, white);
}

/* Inner vertical line: on cell (td) so it spans full row height; left per depth. Last-level: all depths. Add-sub: no inner line at depth 1 (second level). */
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
  pointer-events: none;
}
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="0"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="2"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="3"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="4"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="5"]::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
  pointer-events: none;
}
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="0"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="0"]::before {
  left: 0.4rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="1"]::before {
  left: 1rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="2"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="2"]::before {
  left: 1.6rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="3"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="3"]::before {
  left: 2.2rem;
}
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="4"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="4"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__row--child .vault-dt-grid__cell--name-col.vault-dt-grid__cell--name-no-toggle[data-depth="5"]::before,
.vault-dt-grid--has-subrows .vault-dt-grid__cell--add-sub.vault-dt-grid__cell--name-col[data-depth="5"]::before {
  left: 2.8rem;
}

/* Colgroup: fixed actions column (dropdown icon only) */
.vault-dt-grid .vault-dt-grid__colgroup .vault-dt-grid__col--actions {
  width: 2.25rem;
  min-width: 2.25rem;
}
/* Colgroup: type-based widths so columns don't overlap */
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col:not(.vault-dt-grid__col--actions) {
  min-width: 100px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--text {
  min-width: 140px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--number {
  min-width: 80px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--tel,
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--email,
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--date {
  width: 10rem;
  min-width: 0;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--date-range {
  width: 280px;
  min-width: 280px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--select {
  min-width: 100px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--multiselect {
  min-width: 120px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--toggle {
  min-width: 80px;
}
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--media,
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--relation,
.vault-dt-grid--flat .vault-dt-grid__colgroup .vault-dt-grid__col--auto-id {
  min-width: 100px;
}
.vault-dt-grid__cell--actions {
  width: 2.25rem;
  min-width: 2.25rem;
  box-sizing: border-box;
}

.vault-dt-grid__th--tree {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  padding: 0.4rem 0.2rem;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  vertical-align: middle;
}
.vault-dt-grid__cell--tree {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  padding: 0.25rem 0.2rem;
  vertical-align: middle;
  border-right: 1px solid #e5e7eb;
}
.vault-dt-tree-cell {
  position: relative;
  width: 100%;
  height: 1.5rem;
  min-height: 1.5rem;
}
.vault-dt-tree-cell[data-depth="0"][data-has-children="true"]::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  bottom: -0.25rem;
  width: 1px;
  background: #94a3b8;
}
.vault-dt-tree-cell[data-depth="1"]::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  height: 50%;
  width: 0;
  border-left: 1px solid #94a3b8;
}
.vault-dt-tree-cell[data-depth="1"]::after {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  height: 0;
  width: 1rem;
  border-bottom: 1px solid #94a3b8;
}
.vault-dt-tree-v-down {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  bottom: -0.25rem;
  width: 1px;
  background: #94a3b8;
  pointer-events: none;
}
.vault-dt-tree-cell[data-depth="2"] .vault-dt-tree-v-down {
  left: 1rem;
}
.vault-dt-tree-v-down--root {
  left: 0.5rem;
  top: 50%;
}
.vault-dt-tree-cell[data-depth="2"]::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  height: 50%;
  width: 0;
  border-left: 1px solid #94a3b8;
}
.vault-dt-tree-cell[data-depth="2"]::after {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  height: 0;
  width: 0.75rem;
  border-bottom: 1px solid #94a3b8;
}
.vault-dt-row-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 1;
}
.vault-dt-row-action-btn {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vault-dt-row-action-btn svg {
  width: 1rem;
  height: 1rem;
}
.vault-dt-row-actions .vault-actions-dropdown {
  flex-shrink: 0;
}
.vault-dt-row-actions-dropdown-trigger {
  position: relative;
  z-index: 1;
  min-width: 1.5rem !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 !important;
  background: #f9fafb !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 0.25rem;
}
.vault-dt-row-actions-dropdown-trigger:hover {
  background: #f3f4f6 !important;
  color: #030712 !important;
}
.vault-dt-row-actions-dropdown-trigger .vault-actions-dropdown-trigger-icon svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
}
.vault-dt-row-action-btn:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.06);
}
.vault-dt-row-action-btn--danger {
  color: var(--vault-error, #dc2626);
  background: transparent;
}
.vault-dt-row-action-btn--danger:hover {
  color: #fff;
  background: var(--vault-error, #dc2626);
}

/* Sticky tools column at end: Add column + Reorder in header only */
.vault-dt-grid__th--tools {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 5rem;
  min-width: 5rem;
  padding: 0.4rem 0.35rem;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  vertical-align: middle;
}
.vault-dt-grid__th-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}
.vault-dt-grid__th-tools .vault-dt__icon-btn {
  width: 1.75rem;
  height: 1.75rem;
}
.vault-dt-grid__cell--tools {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 5rem;
  min-width: 5rem;
  padding: 0;
  border: none;
  border-left: 1px solid #e5e7eb;
  background: transparent;
  vertical-align: middle;
}

/* Trailing “add column” header + empty body cells (not sticky — scrolls with grid) */
.vault-dt-grid__th--add-column-trail {
  padding: 0.25rem 0.15rem;
  vertical-align: middle;
  text-align: center;
  background: #fff;
  border-left: 1px solid #e5e7eb;
}
.vault-dt-grid__th-inner--add-column-trail {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
}
.vault-dt-grid__th-add-column-btn {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border-radius: 0.25rem;
  color: var(--vault-text-muted, #64748b);
  background: transparent;
  border: none;
  box-shadow: none;
}
.vault-dt-grid__th-add-column-btn:hover {
  color: var(--vault-text, #111827);
  background: transparent;
}
.vault-dt-grid__cell--add-column-trail {
  padding: 0;
  border-left: 1px solid #e5e7eb;
  background: #fff;
  vertical-align: middle;
}
.vault-dt-column-settings-add-adjacent {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.vault-dt-column-settings-add-adjacent-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: #374151;
  background: #f3f4f6;
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
  text-align: center;
}
.vault-dt-column-settings-add-adjacent-btn:hover {
  background: #e5e7eb;
  color: #111827;
}
.vault-dt-column-settings-add-adjacent-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #6366f1) 55%, transparent);
  outline-offset: 1px;
}
.vault-dt-column-settings-add-adjacent-btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.vault-dt-column-settings-add-adjacent-btn-ic {
  display: inline-flex;
  flex-shrink: 0;
}
.vault-dt-column-settings-add-adjacent-btn-ic svg {
  display: block;
}

.vault-dt-pagination-wrap {
  flex-shrink: 0;
  padding: 0.35rem 0;
}
.vault-dt-pagination-wrap--top {
  border-top: none;
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0.15rem;
  margin-bottom: 0.1rem;
}
.vault-dt-pagination-wrap:not(.vault-dt-pagination-wrap--top) {
  border-top: 1px solid #e5e7eb;
  margin-top: 0.15rem;
  padding-top: 0.25rem;
}
@media (max-width: 639px) {
  .vaultside-pwa .vault-dt-pagination-wrap:not(.vault-dt-pagination-wrap--top) {
    padding-bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
  }
}
.vault-dt-pagination {
  min-height: 2rem;
}
.vault-dt-pagination .vault-pagination__row {
  flex-wrap: nowrap;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  justify-content: flex-start;
  align-items: center;
}
.vault-dt-pagination .vault-pagination__nav {
  flex: 0 0 auto;
  min-width: 0;
}
.vault-dt-pagination .vault-pagination__rows-wrap {
  margin-left: auto;
  flex: 0 0 auto;
}
.vault-dt-grid__input {
  width: 100%;
  min-width: 6rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  background: transparent;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  outline: none;
}
.vault-dt-grid__input:focus {
  border-color: #9ca3af;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}
/* Quantity / number input without spinner buttons */
.vault-dt-grid__input--no-spinner {
  -moz-appearance: textfield;
}
.vault-dt-grid__input--no-spinner::-webkit-outer-spin-button,
.vault-dt-grid__input--no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vault-dt-cell-password-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  width: 100%;
}
.vault-dt-cell-password-wrap .vault-dt-cell-plain-text {
  flex: 1;
  min-width: 0;
}
.vault-dt-cell-password-icons {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.vault-dt-cell-password-copy,
.vault-dt-cell-password-eye {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: #64748b;
  cursor: pointer;
}
.vault-dt-cell-password-copy svg,
.vault-dt-cell-password-eye svg {
  display: block;
}
.vault-dt-cell-password-copy:hover,
.vault-dt-cell-password-eye:hover {
  color: #0ea5e9;
  background: rgba(0, 0, 0, 0.04);
}
.vault-dt-grid__cell--plain {
  color: #111;
}
.vault-dt-grid__cell--editable-display {
  cursor: pointer;
  display: block;
  min-height: 2rem;
  width: 100%;
  box-sizing: border-box;
}
.vault-dt-grid__cell--editable-display:hover {
  background: rgba(0, 0, 0, 0.04);
}
.vault-dt-grid__cell--editable-display:empty::before {
  content: '\00a0';
  visibility: hidden;
}

/* Address: same vertical alignment as text/email — block editable-display sits at top in tall rows */
.vault-dt-grid__cell--address.vault-dt-grid__cell {
  vertical-align: middle;
}
.vault-dt-cell-address-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2rem;
  height: 100%;
  box-sizing: border-box;
}
.vault-dt-cell-address-wrap .vault-dt-grid__cell--editable-display {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

/* Date / time cells: plain display matches text until click (picker mounts on demand) */
.vault-dt-cell-date-plain-display--empty {
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-recurring-occurrence-wrap .vault-dt-cell-date-plain-display,
.vault-dt-recurring-onetime-pay-inline .vault-dt-cell-date-plain-display {
  min-height: 1.5rem;
  line-height: 1.5;
}

/* Doc modal */
.vault-dt-doc-modal-body {
  min-height: 12rem;
}

/* Row/table doc: editor shell + overlay while getDoc loads */
.vault-dt-doc-drawer-editor-shell,
.vault-dt-doc-modal-editor-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.vault-dt-doc-drawer-editor-shell > .vault-dt-doc-drawer-editor,
.vault-dt-doc-modal-editor-shell > .vault-dt-doc-modal-editor-mount {
  flex: 1;
  min-height: 0;
}
.vault-dt-doc-editor-load-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--vault-bg, #0f172a) 88%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.vault-dt-doc-editor-load-overlay--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Row doc drawer: columns section at top */
.vault-dt-doc-drawer-cols {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--vault-border, #334155);
}
.vault-dt-doc-drawer-cols-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 0.5rem 0;
}
.vault-dt-doc-drawer-cols-toggle-btn {
  flex: 0 0 auto;
  max-width: 100%;
}
.vault-dt-doc-drawer-cols-toggle-btn .vault-btn__icon svg {
  display: block;
}
/* Fallback when createVaultButton is unavailable */
.vault-dt-doc-drawer-cols-title-row.vault-dt-doc-drawer-cols-toggle-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--vault-primary, #0492b5) 35%, transparent);
  border-radius: 0.375rem;
  background: var(--vault-primary-light);
  color: var(--vault-primary, #0492b5);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.vault-dt-doc-drawer-cols-title-row.vault-dt-doc-drawer-cols-toggle-fallback:hover {
  background: color-mix(in srgb, var(--vault-primary, #0492b5) 18%, var(--vault-bg-elevated, #fff));
  border-color: color-mix(in srgb, var(--vault-primary, #0492b5) 55%, transparent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--vault-primary, #0492b5) 20%, transparent);
}
.vault-dt-doc-drawer-cols-title-row.vault-dt-doc-drawer-cols-toggle-fallback:focus-visible {
  outline: 2px solid var(--vault-primary, #0492b5);
  outline-offset: 2px;
}
.vault-dt-doc-drawer-cols-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vault-primary, #0492b5);
}
.vault-dt-doc-drawer-cols-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-primary, #0492b5);
  pointer-events: none;
}
.vault-dt-doc-drawer-cols-chevron svg {
  stroke: currentColor;
}
/* Row doc drawer: time total matches grid; clickable opens time log modal (global overlay z-index above drawer) */
.vault-dt-doc-drawer-time-tracker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 2rem;
}
.vault-dt-doc-drawer-cols--collapsed .vault-dt-doc-drawer-cols-body {
  display: none;
}
.vault-dt-doc-drawer-col-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2rem;
  margin-bottom: 0.625rem;
  padding: 0.125rem 0;
  box-sizing: border-box;
}
.vault-dt-doc-drawer-col-row:last-child {
  margin-bottom: 0;
}
.vault-dt-doc-drawer-col-label {
  flex-shrink: 0;
  min-width: 8rem;
  font-size: 0.8125rem;
  color: var(--vault-text-subtle, #94a3b8);
}
.vault-dt-doc-drawer-col-value {
  flex: 1;
  min-width: 0;
  min-height: 2rem;
  display: flex;
  align-items: center;
}
.vault-dt-doc-drawer-col-value--price {
  align-items: flex-start;
}
.vault-dt-doc-drawer-col-value--price .vault-dt-cell-price-wrap {
  width: 100%;
  min-width: 0;
}
/* Select / multiselect / status-style fields: width follows content (row doc drawer only). */
.vault-dt-doc-drawer-col-value--compact {
  flex: 0 1 auto;
  max-width: 100%;
}
.vault-dt-doc-drawer-col-value--compact > .vault-dt-doc-drawer-col-display,
.vault-dt-doc-drawer-col-value--compact > .vault-dt-doc-drawer-col-edit {
  flex: 0 1 auto;
  min-width: 0;
}
.vault-dt-doc-drawer-col-value--compact > .vault-dt-doc-drawer-col-display {
  width: fit-content;
  max-width: min(100%, 22rem);
}
.vault-dt-doc-drawer-col-value--compact > .vault-dt-doc-drawer-col-edit {
  max-width: min(100%, 22rem);
}
.vault-dt-doc-drawer-col-value--compact .vault-dt-cell-select-wrap,
.vault-dt-doc-drawer-col-value--compact .vault-dt-cell-multiselect-wrap {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
.vault-dt-doc-drawer-col-value--compact .vault-dropdown {
  width: auto;
  max-width: min(100%, 22rem);
}
.vault-dt-doc-drawer-col-value--compact .vault-dropdown-trigger {
  width: auto;
  max-width: 100%;
}
.vault-dt-doc-drawer-col-value--compact .vault-dt-doc-drawer-col-input {
  width: auto;
  max-width: min(100%, 22rem);
  flex: 0 1 auto;
}
/* Display: plain text look until clicked; no box */
.vault-dt-doc-drawer-col-display {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--vault-text, #e2e8f0);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  min-height: 2rem;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.vault-dt-doc-drawer-col-display:hover:not(.vault-dt-doc-drawer-col-display--option) {
  border-bottom-color: var(--vault-border, #475569);
  background: rgba(255, 255, 255, 0.03);
}
/* CSS unicode escape (not \\u2014 — that is invalid here and prints the literal "u2014") */
.vault-dt-doc-drawer-col-display:empty::before,
.vault-dt-doc-drawer-col-display.vault-dt-doc-drawer-col-display--empty::before {
  content: '\2014';
  color: var(--vault-text-muted, #64748b);
}
/* Status / priority / colored option: match grid pill; horizontal padding in read-only view */
.vault-dt-doc-drawer-col-display.vault-dt-doc-drawer-col-display--option {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.25rem;
  border-bottom: none;
}
.vault-dt-doc-drawer-col-display.vault-dt-doc-drawer-col-display--option:hover {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06);
}
.vault-dt-doc-drawer-col-display.vault-dt-doc-drawer-col-display--readonly {
  cursor: default;
}
.vault-dt-doc-drawer-col-display.vault-dt-doc-drawer-col-display--readonly:hover {
  border-bottom-color: transparent;
  background: transparent;
}
.vault-dt-doc-drawer-col-edit {
  flex: 1;
  min-width: 0;
  min-height: 2rem;
  display: flex;
  align-items: center;
}
.vault-dt-doc-drawer-col-edit .vault-dt-doc-drawer-col-input,
.vault-dt-doc-drawer-col-edit .vault-dt-grid__input {
  min-height: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
}
.vault-dt-doc-drawer-col-edit > div {
  min-height: 2rem;
  display: flex;
  align-items: center;
}

.vault-dt-doc-drawer-col-input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid var(--vault-border, #334155);
  border-radius: 0.25rem;
  background: var(--vault-bg, #0f172a);
  color: var(--vault-text, #f1f5f9);
}
.vault-dt-doc-drawer-col-input[type="checkbox"] {
  flex: none;
  width: auto;
}

/* Row/table doc (drawer + modal): SmartText / SmartText+tags — same surface as plain editor (no card chrome) */
.vault-dt-doc-drawer-editor.vault-smart-text-wrap,
.vault-dt-doc-modal-editor-mount.vault-smart-text-wrap {
  border: none;
  background: transparent;
}
.vault-dt-doc-drawer-editor.vault-smart-text-wrap .vault-smart-text-content-block,
.vault-dt-doc-modal-editor-mount.vault-smart-text-wrap .vault-smart-text-content-block {
  border: none;
  background: transparent;
  overflow: visible;
}
.vault-dt-doc-drawer-editor.vault-smart-text-wrap .vault-smart-text-tags-row,
.vault-dt-doc-modal-editor-mount.vault-smart-text-wrap .vault-smart-text-tags-row {
  border-top: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.vault-dt-doc-drawer-editor .vault-smart-text-editor,
.vault-dt-doc-modal-editor-mount .vault-smart-text-editor {
  border: none;
  background: transparent;
  min-height: 6rem;
}
.vault-dt-doc-drawer-editor .vault-smart-text-editor:focus,
.vault-dt-doc-modal-editor-mount .vault-smart-text-editor:focus {
  border: none;
  outline: none;
}
/* Toolbar stays visible on scroll; transparent so it matches drawer body */
.vault-dt-doc-drawer-body .vault-smart-text-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: transparent;
  padding: 0.35rem 0;
}
.vault-dt-doc-modal-body .vault-smart-text-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: transparent;
  padding: 0.35rem 0;
}

/* Relation column */
.vault-dt-relation-cell-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}
.vault-dt-relation-cell-wrap--picking {
  position: relative;
}
.vault-dt-relation-cell-pick-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--vault-bg, #fff) 88%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 0.25rem;
  pointer-events: none;
}
.vault-dt-relation-cell-pick-loading-fallback {
  font-size: 0.75rem;
  color: #6b7280;
}
.vault-dt-relation-cell-wrap .vault-dt-relation-cell {
  flex: 1;
  min-width: 0;
}
.vault-dt-relation-cell-change {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  color: #6b7280;
}
.vault-dt-relation-cell-change:hover {
  background: #f3f4f6;
  color: #374151;
}
.vault-dt-relation-cell {
  background: transparent;
  border: 1px dashed #d1d5db;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  color: #374151;
  width: 100%;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-relation-cell:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.vault-dt-relation-cell--inherited {
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 0.8125rem;
  cursor: default;
}
.vault-dt-relation-cell--inherited:hover {
  background: transparent;
}
.vault-dt-grid__cell--saving {
  position: relative;
}
.vault-dt-grid__cell--saving::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--vault-bg-elevated, #fff) 55%, transparent);
  pointer-events: none;
}
.vault-dt-grid__cell--saving::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  margin-top: -0.375rem;
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-top-color: rgba(59, 130, 246, 0.95);
  border-radius: 50%;
  animation: vault-dt-cell-saving-spin 0.7s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes vault-dt-cell-saving-spin {
  to { transform: rotate(360deg); }
}
.vault-dt-relation-cell--linkable,
.vault-dt-relation-cell--inverse.vault-dt-relation-cell--linkable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}
.vault-dt-relation-cell--linkable:hover,
.vault-dt-relation-cell--inverse.vault-dt-relation-cell--linkable:hover {
  text-decoration-color: currentColor;
}
.vault-dt-relation-cell--linkable:focus-visible,
.vault-dt-relation-cell--inverse.vault-dt-relation-cell--linkable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #0ea5e9) 55%, transparent);
  outline-offset: 2px;
  border-radius: 0.2rem;
  text-decoration-color: currentColor;
}
.vault-dt-relation-cell--inverse {
  border: none;
  background: transparent;
}
.vault-dt-relation-cell--semantic-aggregate {
  font-weight: 600;
  color: rgb(148 163 184);
}
.vault-dt-cell-price-list-struck {
  margin-top: 0;
}
.vault-dt-cell-price-wrap--clickable {
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  margin: -0.125rem -0.25rem;
}
.vault-dt-cell-price-wrap--clickable:hover {
  background-color: rgba(148, 163, 184, 0.08);
}
.vault-dt-cell-price-wrap--clickable:focus {
  outline: 2px solid rgb(59 130 246 / 0.5);
  outline-offset: 1px;
}
.vault-dt-cell-price-wrap--readonly {
  cursor: default;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  padding: 0.125rem 0.25rem;
  margin: -0.125rem -0.25rem;
}
.vault-dt-cell-price-row--primary {
  line-height: 1.25;
}
/* Amount + VAT on one row (no discount): grouped left with spacing */
.vault-dt-cell-price-row--primary:not(.vault-dt-cell-price-row--split) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.5rem 0.75rem;
}
.vault-dt-cell-price-amount--primary {
  font-weight: 600;
  color: var(--vault-text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.vault-dt-cell-price-vat-inline {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--vault-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}
/* Discounted: two columns grouped toward the start (not stretched to cell edges) */
.vault-dt-cell-price-row--primary.vault-dt-cell-price-row--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.15rem 1rem;
}
.vault-dt-cell-price-row--primary .vault-dt-cell-price-amount--discounted {
  text-align: left;
}
.vault-dt-cell-price-row--primary.vault-dt-cell-price-row--split .vault-dt-cell-price-list-struck {
  text-align: left;
}
.vault-dt-cell-price-row--vat {
  line-height: 1.2;
}
/* Second row (discount + VAT): grouped left with gap between columns */
.vault-dt-cell-price-row--meta:not(.vault-dt-cell-price-row--split) {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}
.vault-dt-cell-price-row--meta:not(.vault-dt-cell-price-row--split) .vault-dt-cell-price-vat-pct {
  margin-left: 0;
  text-align: left;
}
.vault-dt-cell-price-row--meta.vault-dt-cell-price-row--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.1rem 1rem;
}
.vault-dt-cell-price-row--meta.vault-dt-cell-price-row--split .vault-dt-cell-price-discount-hint {
  min-width: 0;
  text-align: left;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-cell-price-row--meta.vault-dt-cell-price-row--split .vault-dt-cell-price-vat-pct {
  text-align: left;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-cell-price-vat-pct {
  font-variant-numeric: tabular-nums;
}
.vault-dt-price-edit-modal__detail-row:last-child {
  border-bottom: none;
}
/* Inverse relation cell (auto column on linked table): label + sticky detail chevron */
.vault-dt-inverse-relation-row {
  display: flex;
  align-items: stretch;
  gap: 0.125rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Order lines: amounts on the left (flex), + button sticky to the cell’s right */
.vault-dt-inverse-relation-row--order-lines {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.35rem;
}
.vault-dt-inverse-relation-row--order-lines .vault-dt-inverse-relation-row__text {
  flex: 1 1 auto;
  min-width: 0;
}
.vault-dt-inverse-relation-row__toolbar {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
  width: auto;
}
.vault-dt-inverse-relation-row--order-lines .vault-dt-inverse-relation-row__toolbar {
  position: sticky;
  right: -0.35rem;
  z-index: 2;
  align-self: flex-start;
  padding-left: 0.35rem;
  margin-left: 0.25rem;
  background: var(--vault-surface, #ffffff);
  box-shadow: -8px 0 12px -6px var(--vault-surface, #ffffff);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
}
.vault-dt-order-lines-count-badge:empty {
  display: none !important;
}
.vault-dt-order-lines-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  background: var(--vault-primary-light, rgba(4, 146, 181, 0.15));
  color: var(--vault-primary, #0492b5);
  box-sizing: border-box;
}
.vault-dt-grid__body .vault-dt-grid__row:hover .vault-dt-inverse-relation-row--order-lines .vault-dt-inverse-relation-row__toolbar {
  background: var(--vault-surface, #ffffff);
  box-shadow: -8px 0 12px -6px var(--vault-surface, #ffffff);
}
.vault-dt-inverse-relation-row--order-lines .vault-dt-order-lines-add-btn {
  align-self: center;
  margin-left: 0;
}
/* Clients → Projects inverse: ⋮ must stay success-light (overrides .vault-dt-linked-rows-detail-btn base) */
.vault-dt-inverse-relation-row--clients-projects .vault-dt-order-lines-add-btn.vault-dt-linked-rows-detail-btn {
  background: var(--vault-success-light, rgba(22, 163, 74, 0.12));
  border: 1px solid color-mix(in srgb, var(--vault-success, #22c55e) 22%, var(--vault-border, #e5e7eb));
  color: var(--vault-success, #16a34a);
}
.vault-dt-inverse-relation-row--clients-projects .vault-dt-order-lines-add-btn.vault-dt-linked-rows-detail-btn:hover {
  background: color-mix(in srgb, var(--vault-success, #22c55e) 18%, transparent);
  color: var(--vault-success-hover, #15803d);
  border-color: color-mix(in srgb, var(--vault-success, #22c55e) 32%, var(--vault-border, #e5e7eb));
}
.vault-dt-inverse-relation-row--clients-projects .vault-dt-order-lines-add-btn.vault-dt-linked-rows-detail-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-success, #22c55e) 45%, transparent);
  outline-offset: 1px;
}
/* Projects → Tasks inverse: only show completed/total (progress); count lives in relation attrs only */
.vault-dt-inverse-relation-row--projects-tasks {
  position: relative;
}
.vault-dt-inverse-relation-row--projects-tasks .vault-dt-relation-cell--projects-tasks-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
}
.vault-dt-projects-tasks-progress {
  flex: 1 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  color: var(--vault-muted-foreground, #64748b);
  font-size: 0.8125rem;
  line-height: 1.25;
  align-self: center;
  user-select: none;
}
.vault-dt-projects-tasks-progress.vault-dt-relation-cell--linkable {
  color: var(--vault-primary, #0492b5);
  text-decoration: underline;
  cursor: pointer;
}
.vault-dt-projects-tasks-progress.vault-dt-relation-cell--linkable:hover {
  color: var(--vault-primary-hover, #037a96);
}
.vault-dt-projects-tasks-progress.vault-dt-relation-cell--linkable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #0492b5) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt-projects-milestones-progress {
  flex: 1 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  color: var(--vault-muted-foreground, #64748b);
  font-size: 0.8125rem;
  line-height: 1.25;
  align-self: center;
  user-select: none;
}
.vault-dt-projects-milestones-progress.vault-dt-relation-cell--linkable {
  color: var(--vault-primary, #0492b5);
  text-decoration: underline;
  cursor: pointer;
}
.vault-dt-projects-milestones-progress.vault-dt-relation-cell--linkable:hover {
  color: var(--vault-primary-hover, #037a96);
}
.vault-dt-projects-milestones-progress.vault-dt-relation-cell--linkable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #0492b5) 45%, transparent);
  outline-offset: 1px;
}
/* Clients → Projects: same success-light kebab as order lines (no primary override) */
.vault-dt-inverse-relation-row__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-inverse-relation-infocard-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.vault-dt-inverse-relation-info-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 1.375rem;
  min-width: 1.375rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #6b7280;
  border-radius: 0.25rem;
  cursor: pointer;
  flex-shrink: 0;
}
.vault-dt-inverse-relation-info-btn:hover {
  background: #f3f4f6;
  color: #374151;
}
.vault-dt-inverse-relation-row__text--order-lines {
  white-space: normal;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}
/* Inverse relation (non–order-lines): count + sticky linked-rows detail (⋮) */
.vault-dt-inverse-relation-row--linked-detail {
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}
.vault-dt-inverse-relation-row--linked-detail .vault-dt-inverse-relation-row__toolbar--linked-detail {
  position: sticky;
  right: -0.35rem;
  z-index: 2;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.35rem;
  background: var(--vault-surface, #ffffff);
  box-shadow: -8px 0 12px -6px var(--vault-surface, #ffffff);
  display: flex;
  align-items: center;
}
.vault-dt-linked-rows-detail-btn {
  flex: 0 0 auto;
  width: 1.625rem;
  height: 1.625rem;
  min-width: 1.625rem;
  padding: 0;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--vault-surface-muted, #f8fafc) 92%, var(--vault-border, #e5e7eb));
  color: #64748b;
}
.vault-dt-linked-rows-detail-btn:hover {
  background: color-mix(in srgb, var(--vault-primary, #0ea5e9) 10%, var(--vault-surface, #fff));
  border-color: color-mix(in srgb, var(--vault-primary, #0ea5e9) 28%, var(--vault-border, #e5e7eb));
  color: var(--vault-primary, #0ea5e9);
}
.vault-dt-linked-rows-detail-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #0ea5e9) 45%, transparent);
  outline-offset: 1px;
}
/* Clients & Project Management bundle: forward relation ⋮ (only .vault-dt-linked-rows-detail-btn) */
.vault-dt-linked-rows-detail-btn.vault-dt-linked-rows-detail-btn--clients-bundle {
  background: var(--vault-success-light, rgba(22, 163, 74, 0.12));
  border: 1px solid color-mix(in srgb, var(--vault-success, #22c55e) 22%, var(--vault-border, #e5e7eb));
  color: var(--vault-success, #16a34a);
}
.vault-dt-linked-rows-detail-btn.vault-dt-linked-rows-detail-btn--clients-bundle:hover {
  background: color-mix(in srgb, var(--vault-success, #22c55e) 18%, transparent);
  color: var(--vault-success-hover, #15803d);
  border-color: color-mix(in srgb, var(--vault-success, #22c55e) 32%, var(--vault-border, #e5e7eb));
}
.vault-dt-linked-rows-detail-btn.vault-dt-linked-rows-detail-btn--clients-bundle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-success, #22c55e) 45%, transparent);
  outline-offset: 1px;
}
/* Clients / Projects / Tasks bundle: relation-column ⋮ styling (row-actions ⋮ uses default .vault-dt-row-actions-dropdown-trigger) */
.vault-dt-grid--clients-project-mgmt-bundle .vault-dt-linked-rows-detail-btn {
  background: var(--vault-success-light, rgba(22, 163, 74, 0.12));
  border: 1px solid color-mix(in srgb, var(--vault-success, #22c55e) 22%, var(--vault-border, #e5e7eb));
  color: var(--vault-success, #16a34a);
}
.vault-dt-grid--clients-project-mgmt-bundle .vault-dt-linked-rows-detail-btn:hover {
  background: color-mix(in srgb, var(--vault-success, #22c55e) 18%, transparent);
  color: var(--vault-success-hover, #15803d);
  border-color: color-mix(in srgb, var(--vault-success, #22c55e) 32%, var(--vault-border, #e5e7eb));
}
.vault-dt-grid--clients-project-mgmt-bundle .vault-dt-linked-rows-detail-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-success, #22c55e) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt-linked-rows-detail-btn svg {
  display: block;
  flex-shrink: 0;
}
/* Linked rows modal: flex host + scrollable exchange table; sticky header row */
.vault-linked-rows-modal-body {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
}
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid .vault-dt-exchange-table__scroll.vault-dt-table-scroll {
  flex: 1 1 auto;
  min-height: 0 !important;
  min-width: 0;
  max-height: min(78vh, calc(95vh - 12rem));
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}
/* Same as export modal (vault-datatable-export.css): without max-content, flat + width:100% squeezes columns and hides leading cols on narrow / WebKit. */
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid.vault-tools-page--datatable .vault-dt-exchange-table.vault-dt-grid.vault-dt-exchange-table--linked-preview {
  width: max-content !important;
  min-width: 100%;
  table-layout: fixed !important;
}
/* Sticky header: transparent (override .vault-tools-page--datatable white !important on head/th) */
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid.vault-tools-page--datatable .vault-dt-grid__head {
  position: sticky !important;
  top: 0;
  z-index: 6;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 1px 0 var(--vault-border, #e5e7eb);
}
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid.vault-tools-page--datatable .vault-dt-grid__head-row {
  background: transparent !important;
  background-color: transparent !important;
}
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid.vault-tools-page--datatable .vault-dt-grid__head .vault-dt-grid__th {
  background: transparent !important;
  background-color: transparent !important;
}
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid.vault-tools-page--datatable .vault-dt-grid__head .vault-dt-grid__th-inner,
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid.vault-tools-page--datatable .vault-dt-grid__head .vault-dt-grid__th-label {
  background: transparent !important;
  background-color: transparent !important;
}
.vault-linked-rows-modal__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.15rem 0 0.35rem;
}
.vault-linked-rows-modal__pagination-host {
  width: 100%;
  min-width: 0;
}
.vault-linked-rows-modal__pager--vault-pagination .vault-pagination {
  width: 100%;
}
.vault-linked-rows-modal__pager-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vault-linked-rows-modal__visit-row {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.2rem 0 0.55rem;
  margin-bottom: 0.1rem;
  box-sizing: border-box;
}
.vault-linked-rows-modal__visit-table-btn {
  font-size: 0.8125rem;
}
.vault-linked-rows-modal__visit-row .vault-btn--link,
.vault-linked-rows-modal__visit-row .vault-btn--outlined {
  padding: 0.35rem 0.7rem;
  margin: 0;
}
.vault-linked-rows-modal__visit-fallback-btn {
  padding: 0.35rem 0.7rem;
}
/* Linked rows modal: keep column resize handles usable above header content */
.vault-modal--linked-rows .vault-linked-rows-modal-body__grid .vault-dt-exchange-table__data-th .vault-dt-grid__th-resize {
  z-index: 12;
}

/* Linked preview cell borders: see vault-dt-connected-rows-table.css (left/right grid + compact padding). */
.vault-dt-inverse-orders-lines-sum {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.vault-dt-inverse-orders-lines-sum__price-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
}
.vault-dt-inverse-orders-lines-sum__nav {
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: min-content;
  max-width: 100%;
  width: 100%;
  text-decoration: none;
}
/* Line total + struck list price: same row, gap; list price never truncated */
.vault-dt-inverse-orders-lines-sum__amounts {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.5rem;
  flex: 0 0 auto;
  min-width: min-content;
  max-width: none;
}
.vault-dt-inverse-orders-lines-sum__main {
  color: var(--vault-text, #0f172a);
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(51, 65, 85, 0.4);
  text-underline-offset: 2px;
}
.vault-dt-inverse-orders-lines-sum__nav > .vault-dt-inverse-orders-lines-sum__main:only-child {
  flex: 1 1 auto;
}
.vault-dt-inverse-orders-lines-sum__amounts .vault-dt-inverse-orders-lines-sum__main {
  flex: 0 1 auto;
  min-width: 0;
}
.vault-dt-inverse-orders-lines-sum__list {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--vault-text-muted, #94a3b8);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(148, 163, 184, 0.9);
}
.vault-dt-inverse-orders-lines-sum__amounts .vault-dt-inverse-orders-lines-sum__list {
  flex: 0 0 auto;
  overflow: visible;
  max-width: none;
}
.vault-dt-inverse-orders-lines-sum__meta {
  color: var(--vault-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-inverse-orders-lines-sum__discount-label {
  font-variant-numeric: tabular-nums;
}
.vault-dt-inverse-orders-lines-sum__discount-label--lines,
.vault-dt-inverse-orders-lines-sum__discount-label--order {
  color: var(--vault-primary, #0492b5);
  font-weight: 600;
}
/* Order lines composer + column settings: whole-order discount block (theme tokens from styles.css :root) */
.vault-dt-olc-order-discount-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 1.125rem 1.25rem;
  border-radius: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--vault-primary, #0492b5) 24%, var(--vault-border, #e2e8f0));
  /* :root --vault-primary-light + slight wash from --vault-bg-section-subtle (styles.css) */
  background: color-mix(in srgb, var(--vault-primary-light, rgba(4, 146, 181, 0.12)) 78%, var(--vault-bg-section-subtle, var(--vault-bg-card, #fafbfc)) 22%);
}
.vault-dt-olc-order-disc-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.125rem 0 0.125rem;
  margin: 0;
}
.vault-dt-olc-order-disc-summary .vault-btn {
  margin-top: 0.125rem;
}
/* Column settings modal: same summary spacing as composer */
.vault-dt-olc-order-disc-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vault-dt-olc-order-disc-apply-row {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--vault-border, #e2e8f0) 85%, var(--vault-primary, #0492b5) 15%);
}
.vault-modal--order-lines-composer .vault-dt-olc-order-discount-panel {
  box-sizing: border-box;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem 0.7rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-form {
  gap: 0.35rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-apply-row {
  margin-top: 0.3rem;
  padding-top: 0.45rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-radio-row {
  margin-top: 0;
  gap: 0.4rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-radio-row__opt {
  padding: 0.4rem 0.35rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-summary {
  gap: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 0;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-summary-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.65rem;
  width: 100%;
  min-width: 0;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-value__kind {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--vault-text, #e2e8f0) 68%, transparent);
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-value__amount {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--vault-primary, #38bdf8);
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-summary .vault-btn {
  margin-top: 0;
  flex-shrink: 0;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-summary-actions {
  flex: 0 0 auto;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-collapsed {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.vault-dt-olc-order-disc-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
.vault-dt-olc-order-disc-title-text {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-olc-order-disc-infocard-wrap {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-help-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--vault-text, #e2e8f0) 55%, transparent);
  border-radius: 0.25rem;
  cursor: pointer;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-help-btn:hover {
  background: color-mix(in srgb, var(--vault-text, #e2e8f0) 10%, transparent);
  color: var(--vault-text, #e2e8f0);
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-help-btn:focus-visible {
  outline: 2px solid var(--vault-primary, #3b82f6);
  outline-offset: 1px;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-help-btn svg {
  display: block;
  flex-shrink: 0;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-help-fallback {
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.85;
}
.vault-dt-olc-order-disc-radio-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.25rem;
  box-sizing: border-box;
}
.vault-dt-olc-order-disc-radio-row__opt {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.5rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--vault-primary, #0492b5) 24%, var(--vault-border, #e2e8f0));
  background: color-mix(in srgb, var(--vault-bg-elevated, #ffffff) 86%, var(--vault-primary-light, rgba(4, 146, 181, 0.12)) 14%);
  box-sizing: border-box;
}
.vault-dt-olc-order-disc-radio-row__inner {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
}
.vault-dt-olc-order-disc-radio-row__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* One line box: keeps the radio vertically centered with the first line when the label wraps */
  height: 1.25rem;
  height: 1lh;
  box-sizing: border-box;
}
.vault-dt-olc-order-disc-radio-row__ctrl input[type="radio"] {
  margin: 0;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.vault-dt-olc-order-disc-radio-row__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  line-height: 1.25rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-disc-radio-row__opt {
  background: color-mix(in srgb, var(--vault-bg-elevated, #1e293b) 88%, var(--vault-primary, #0492b5) 7%);
  border-color: color-mix(in srgb, var(--vault-primary, #0492b5) 32%, var(--vault-border, #475569));
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-order-lines-composer__totals-discount {
  color: var(--vault-primary, #0492b5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__totals-final {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--vault-border, #475569);
}
.vault-dt-inverse-orders-lines-sum__nav:focus-visible {
  outline: 2px solid var(--vault-primary, #0ea5e9);
  outline-offset: 2px;
  border-radius: 2px;
}
.vault-dt-order-lines-add-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0;
  margin-left: 0.125rem;
  border: 1px solid color-mix(in srgb, var(--vault-success, #22c55e) 22%, var(--vault-border, #e5e7eb));
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--vault-success-light, rgba(22, 163, 74, 0.12));
  color: var(--vault-success, #16a34a);
}
.vault-dt-order-lines-add-btn:hover {
  background: color-mix(in srgb, var(--vault-success, #22c55e) 18%, transparent);
  color: var(--vault-success-hover, #15803d);
  border-color: color-mix(in srgb, var(--vault-success, #22c55e) 32%, var(--vault-border, #e5e7eb));
}
.vault-dt-order-lines-add-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-success, #22c55e) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt-order-lines-add-btn svg {
  display: block;
  flex-shrink: 0;
}
/* Linked tables strip (inventory bundle or relation targets) — header row */
.vault-dt-linked-tables-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.1rem 0 0.2rem;
  box-sizing: border-box;
}
.vault-dt-linked-tables-strip__viewport {
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vault-dt-linked-tables-strip__viewport::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}
.vault-dt-linked-tables-strip__track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.05rem 0;
  min-height: 2rem;
  box-sizing: border-box;
}
.vault-dt-linked-tables-strip__chev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--vault-bg-muted, #f3f4f6);
  color: var(--vault-text-muted, #64748b);
  cursor: pointer;
  box-sizing: border-box;
}
.vault-dt-linked-tables-strip__chev:hover:not(:disabled) {
  background: var(--vault-bg-hover, #e5e7eb);
  color: var(--vault-text, #0f172a);
}
.vault-dt-linked-tables-strip__chev:disabled {
  opacity: 0.35;
  cursor: default;
}
.vault-dt-linked-tables-strip__chev svg {
  display: block;
  flex-shrink: 0;
}
.vault-dt-linked-tables-strip--no-overflow .vault-dt-linked-tables-strip__chev {
  display: none !important;
}
.vault-dt-linked-tables-strip__btn {
  flex-shrink: 0;
  border: none;
  border-radius: 0.375rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  background: var(--vault-bg-muted, #f3f4f6);
  color: var(--vault-text, #0f172a);
  max-width: 100%;
  white-space: nowrap;
}
.vault-dt-linked-tables-strip__btn:hover:not(.vault-dt-linked-tables-strip__btn--active) {
  background: var(--vault-bg-hover, #e5e7eb);
  color: var(--vault-text, #0f172a);
}
.vault-dt-linked-tables-strip__btn--active {
  border: none;
  background: var(--vault-primary-light, rgba(16, 185, 129, 0.15));
  color: var(--vault-text, #0f172a);
}
.vault-dt-linked-tables-strip__btn--active:hover {
  background: var(--vault-primary-light, rgba(16, 185, 129, 0.22));
  color: var(--vault-text, #0f172a);
}
.vault-dt-order-lines-composer__table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.25rem;
  border: 1px solid var(--vault-border, #e2e8f0);
}
.vault-dt-order-lines-composer__tbl {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.vault-dt-order-lines-composer__tbl th,
.vault-dt-order-lines-composer__tbl td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--vault-border, #e2e8f0);
  vertical-align: top;
  white-space: nowrap;
}
.vault-dt-order-lines-composer__tbl th.vault-dt-olc-name-col,
.vault-dt-order-lines-composer__tbl td.vault-dt-olc-name-col {
  white-space: normal;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sticky delete column (horizontal scroll) */
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__tbl th.vault-dt-olc-actions-col,
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__tbl td.vault-dt-olc-actions-col {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.75rem;
  padding: 0.25rem 0.35rem;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  background: var(--vault-bg-elevated, #1e293b);
  box-shadow: 1px 0 0 var(--vault-border, #334155);
}
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__tbl thead th.vault-dt-olc-actions-col {
  z-index: 3;
}
.vault-modal--order-lines-composer .vault-dt-olc-line-del {
  margin: 0 auto;
}
.vault-dt-order-lines-composer__tbl th.vault-dt-order-lines-composer__tbl-num,
.vault-dt-order-lines-composer__tbl td.vault-dt-order-lines-composer__tbl-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vault-dt-order-lines-composer__tbl th {
  position: relative;
  font-weight: 600;
  color: var(--vault-text-muted, #64748b);
}
/* Order-lines composer: th does not use .vault-dt-grid__th — duplicate main grid resize affordance so handles are visible/hittable */
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__tbl thead th .vault-dt-grid__th-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  min-width: 12px;
  cursor: col-resize;
  z-index: 12;
  pointer-events: auto;
  border-radius: 0 2px 2px 0;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  .vault-modal--order-lines-composer .vault-dt-order-lines-composer__tbl thead th .vault-dt-grid__th-resize {
    width: 24px;
    min-width: 24px;
  }
}
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__tbl thead th .vault-dt-grid__th-resize:hover {
  background: rgba(255, 255, 255, 0.06);
}
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__tbl thead th .vault-dt-grid__th-resize::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 1px;
  margin-left: -1px;
  background: var(--vault-border, #475569);
  border-radius: 1px;
}
.vault-modal.vault-modal--order-lines-composer {
  width: min(28rem, 94vw);
  max-height: min(85vh, 720px);
}
.vault-modal.vault-modal--order-lines-composer .vault-modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  max-width: 36rem;
}
/* Fill modal body; inner __scroll owns vertical scrolling */
.vault-dt-order-lines-composer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.vault-dt-order-lines-composer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Reserve space for the vertical scrollbar so content does not sit under it */
  scrollbar-gutter: stable;
}
.vault-dt-olc-vat-readout {
  display: inline;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  user-select: none;
  padding: 0;
  border: none;
  background: transparent;
}
.vault-modal.vault-modal--order-lines-composer .vault-dropdown-panel {
  z-index: 99999 !important;
}
/* Order lines composer: single column (discount → table → add item → panel → totals) */
.vault-modal--order-lines-composer .vault-dt-olc-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 0.75rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-main > * {
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__lines {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-discount-block {
  box-sizing: border-box;
}
.vault-modal--order-lines-composer .vault-dt-olc-order-discount-save .vault-btn,
.vault-modal--order-lines-composer .vault-dt-olc-add-item-actions .vault-btn,
.vault-modal--order-lines-composer .vault-dt-olc-add-item-trigger .vault-btn {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}
.vault-modal--order-lines-composer .vault-dt-olc-table-area {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__lines-table {
  min-width: 0;
  width: 100%;
}
.vault-modal--order-lines-composer .vault-dt-order-lines-composer__table-scroll {
  max-width: 100%;
}
/* Add-item form: inline panel on same scroll page (not a second modal / overlay) */
.vault-modal--order-lines-composer .vault-dt-olc-add-item-panel {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #334155);
  padding: 0.65rem 0.75rem;
  background: color-mix(in srgb, var(--vault-bg-elevated, #1e293b) 94%, var(--vault-border, #475569) 6%);
}
.vault-modal--order-lines-composer .vault-dt-olc-add-item-panel.hidden {
  display: none !important;
}
.vault-modal--order-lines-composer .vault-dt-olc-add-item-panel__close {
  border: none;
  background: transparent;
  cursor: pointer;
}
/* Order details lines table — inline qty / unit price (primary-light edit chrome) */
.vault-modal--order-lines-composer .vault-dt-olc-inline-display {
  cursor: pointer;
  display: inline-block;
  border-radius: 0.25rem;
  padding: 0.15rem 0.4rem;
  margin: 0;
  outline: none;
  background: var(--vault-olc-editable-col-bg, color-mix(in srgb, var(--vault-border, #e2e8f0) 50%, var(--vault-bg-elevated, #f1f5f9) 50%));
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-display:hover {
  background: color-mix(in srgb, var(--vault-primary, #3b82f6) 14%, var(--vault-olc-editable-col-bg, #e8edf2));
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-display:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vault-primary, #3b82f6) 45%, transparent);
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-field {
  width: 100%;
  min-width: 3.25rem;
  max-width: 6.5rem;
  margin: 0;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--vault-primary, #3b82f6) 35%, var(--vault-border, #e2e8f0));
  background: var(--vault-olc-editable-col-bg, color-mix(in srgb, var(--vault-border, #e2e8f0) 50%, var(--vault-bg-elevated, #f1f5f9) 50%));
  color: var(--vault-text, #0f172a);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-field:focus {
  outline: none;
  border-color: var(--vault-primary, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vault-primary, #3b82f6) 25%, transparent);
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-wrap--price {
  min-width: 4.5rem;
  max-width: 7rem;
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-wrap--price .vault-decimal-input {
  background: transparent;
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-wrap--price .vault-decimal-input__field {
  background: var(--vault-olc-editable-col-bg, color-mix(in srgb, var(--vault-border, #e2e8f0) 50%, var(--vault-bg-elevated, #f1f5f9) 50%));
  border: 1px solid color-mix(in srgb, var(--vault-primary, #3b82f6) 35%, var(--vault-border, #e2e8f0));
  border-radius: 0.25rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
  min-height: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.vault-modal--order-lines-composer .vault-dt-olc-inline-wrap--price .vault-decimal-input__field:focus {
  outline: none;
  border-color: var(--vault-primary, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vault-primary, #3b82f6) 25%, transparent);
}
.vault-modal--order-lines-composer tr.vault-dt-olc-row--saving {
  opacity: 0.65;
  pointer-events: none;
}
.vault-dt-inverse-relation-info-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}
.vault-dt-inverse-relation-info-btn svg {
  display: block;
  flex-shrink: 0;
}
.vault-dt-inverse-info-list {
  padding: 0.25rem 0;
  max-height: 12rem;
  overflow-y: auto;
}
.vault-dt-inverse-info-item {
  padding: 0.2rem 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.vault-dt-inverse-info-item:last-child {
  border-bottom: none;
}
.vault-dt-relation-picker-list {
  max-height: 16rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}
.vault-dt-relation-picker-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-size: 0.875rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.25rem;
}
.vault-dt-relation-picker-item:hover {
  background: #f3f4f6;
}
.vault-dt-relation-picker-clear {
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  color: #6b7280;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  cursor: pointer;
}
.vault-dt-relation-picker-clear:hover {
  background: #f3f4f6;
}

/* Link to row modal: dropdown of DbSmartSelect must sit on top of all elements and not be clipped */
.vault-modal.vault-modal--relation-picker .vault-modal-body {
  overflow: visible !important;
}
.vault-modal.vault-modal--relation-picker .vault-dropdown-panel {
  z-index: 99999 !important;
}

/* Sync to calendar — Remove from calendar when: layout, spacing, clear button vs field distinction */
.vault-dt-sync-remove-rules-wrap {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vault-border, rgba(148, 163, 184, 0.35));
}
.vault-dt-sync-remove-rules-wrap .vault-dt-sync-remove-rules-title {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-sync-remove-rules-wrap .vault-dt-sync-remove-groups-intro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--vault-text-muted, #94a3b8);
}
.vault-dt-sync-remove-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.vault-dt-sync-remove-group {
  border: 1px solid var(--vault-border, rgba(148, 163, 184, 0.45));
  border-left-width: 3px;
  border-left-color: var(--vault-secondary, #64748b);
  border-radius: 0.5rem;
  background: var(--vault-bg-elevated, rgba(30, 41, 59, 0.5));
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.vault-dt-sync-remove-group-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vault-text, #e2e8f0);
  width: 100%;
}
.vault-dt-sync-remove-group-header .vault-dt-sync-remove-icon-btn--group {
  margin-left: auto;
}
.vault-dt-sync-remove-group-conditions {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.vault-dt-sync-remove-cond-row {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.25rem 0;
  width: 100%;
}
.vault-dt-sync-remove-cond-row > .vault-dt-sync-remove-col-wrap {
  min-width: 110px;
  flex: 0 0 auto;
}
.vault-dt-sync-remove-cond-row > .vault-dt-sync-remove-val-wrap {
  min-width: 120px;
  flex: 1 1 140px;
  display: flex;
  align-items: center;
}
.vault-dt-sync-remove-cond-row > .vault-dt-sync-remove-op-wrap {
  flex: 0 0 auto;
}
.vault-dt-sync-remove-cond-row > .vault-dt-sync-remove-icon-btn--cond {
  flex-shrink: 0;
  margin-left: auto;
}
.vault-dt-sync-remove-cond-row select {
  width: 100%;
  min-width: 110px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--vault-border, #475569);
  border-radius: 0.375rem;
  background: var(--vault-bg-elevated, #1e293b);
  color: var(--vault-text, #e2e8f0);
  outline: none;
}
.vault-dt-sync-remove-cond-row select:focus {
  border-color: var(--vault-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
/* Reminder rules: date operator and value inputs */
.vault-dt-reminder-date-op,
.vault-dt-reminder-num-input,
.vault-dt-reminder-date-input,
.vault-dt-reminder-time-input {
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border-radius: 0.25rem;
  border: 1px solid var(--vault-border, #475569);
  background: var(--vault-bg-elevated, #1e293b);
  color: var(--vault-text, #e2e8f0);
  min-width: 5rem;
}
.vault-dt-reminder-num-input { width: 4rem; }
.vault-dt-reminder-date-input { min-width: 8.5rem; }
.vault-dt-reminder-time-input { min-width: 6rem; }
/* Button groups (Any/All, Equals/Not equals): inactive = outline, active = primary fill */
.vault-dt-sync-btn-group {
  display: inline-flex;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #475569);
  overflow: hidden;
}
.vault-dt-sync-btn-group button {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  border-right: 1px solid var(--vault-border, #475569);
  background: var(--vault-bg-elevated, rgba(30, 41, 59, 0.6));
  color: var(--vault-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vault-dt-sync-btn-group button:last-child {
  border-right: none;
}
.vault-dt-sync-btn-group button:hover {
  background: rgba(51, 65, 85, 0.8);
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-sync-btn-group button.vault-dt-sync-btn-active {
  background: var(--vault-primary, #3b82f6);
  color: #fff;
  border-color: var(--vault-primary, #3b82f6);
}
.vault-dt-sync-btn-group button.vault-dt-sync-btn-active:hover {
  background: var(--vault-primary-hover, #2563eb);
  color: #fff;
}
.vault-dt-sync-remove-add-condition {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid var(--vault-border, #475569);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--vault-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vault-dt-sync-remove-add-condition:hover {
  background: rgba(51, 65, 85, 0.5);
  color: var(--vault-text, #e2e8f0);
}
/* Requirement warning: bolder text + danger-light background (e.g. when no date column for sync) */
.vault-dt-sync-requirement-warn {
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin: 0;
  background: color-mix(in srgb, var(--vault-danger, #dc2626) 14%, transparent);
  color: var(--vault-danger, #b91c1c);
}

.vault-dt-sync-remove-add-group {
  margin-top: 1.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--vault-success, #22c55e) 18%, transparent);
  color: var(--vault-success, #16a34a);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vault-dt-sync-remove-add-group:hover {
  background: color-mix(in srgb, var(--vault-success, #22c55e) 28%, transparent);
  color: var(--vault-success, #15803d);
}
.vault-dt-sync-remove-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--vault-border, #475569);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--vault-text-muted, #94a3b8);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.vault-dt-sync-remove-icon-btn:hover {
  border-color: var(--vault-error, #ef4444);
  color: var(--vault-error, #ef4444);
}
.vault-dt-sync-remove-icon-btn svg {
  display: block;
}
.vault-dt-sync-remove-icon-btn--cond {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.vault-dt-sync-remove-hint {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--vault-text-muted, #94a3b8);
  line-height: 1.45;
}

/* Table settings modal: relations section (border, padding, tight title-to-content spacing) */
.vault-dt-table-settings-relations {
  margin-top: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
}
.vault-dt-table-settings-relations-title {
  margin: 0 0 0.375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.vault-dt-table-relations-list {
  margin: 0;
}
.vault-dt-table-relations-list .vault-dt-relation-line {
  margin-top: 0.25rem;
}
.vault-dt-table-relations-list .vault-dt-relation-line:first-child {
  margin-top: 0;
}

/* Table settings modal: consistent spacing between sections, title/content, and within sections */
.vault-dt-table-settings-modal {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.vault-dt-table-settings-modal .vault-dt-table-settings-name-input {
  margin-bottom: 0;
}
.vault-dt-settings-card {
  padding: 1.25rem;
  border-radius: 0.5rem;
  margin-bottom: 0;
  border: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vault-dt-settings-card:last-of-type {
  margin-bottom: 0;
}
.vault-dt-settings-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  padding-bottom: 0;
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-settings-card__title + *,
.vault-dt-settings-card .vault-dt-table-settings-relations,
.vault-dt-settings-card .space-y-2 {
  margin-top: 0;
}
.vault-dt-settings-card .space-y-2 > * + * {
  margin-top: 0.5rem;
}
.vault-dt-settings-card .space-y-3 > * + * {
  margin-top: 0.75rem;
}
.vault-dt-settings-tabs {
  margin-top: 0;
  margin-bottom: 0;
}
.vault-dt-settings-tab-panel--active .vault-dt-settings-card {
  margin-top: 0;
}
.vault-dt-settings-card--name { background: rgba(148, 163, 184, 0.06); }
.vault-dt-settings-card--home-pin { background: rgba(16, 185, 129, 0.08); }
.vault-dt-settings-home-pin-btn__ico {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--vault-primary, #34d399);
}
.vault-dt-settings-home-pin-btn__ico svg {
  display: block;
}
.vault-dt-settings-card--project { background: rgba(100, 116, 139, 0.08); }
.vault-dt-settings-card--subrows,
.vault-dt-settings-card--row-structure,
.vault-dt-settings-recurring-schedule { background: rgba(148, 163, 184, 0.06); }

/* Create table modal: template vs row structure */
.vault-dt-create-modal__section {
  padding: 0.75rem 0.85rem;
  border-radius: 0.5rem;
  background: rgba(148, 163, 184, 0.09);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.vault-dt-create-modal__section-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vault-text, #1e293b);
  margin: 0 0 0.45rem 0;
}

/* Modal radio rows: control left (top-aligned), title + description stacked (Create table, default row type, table settings) */
.vault-dt-radio-option-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  margin: 0 -0.25rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
}
/* Create table modal: flex row — title grows so info stays at section right (not beside label text) */
.vault-dt-radio-option-row.vault-dt-radio-option-row--create-modal {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.vault-dt-create-modal__section > .vault-dt-radio-option-row--create-modal {
  align-self: stretch;
}
/* Match native control to first text line when label wraps */
.vault-dt-radio-option-row--create-modal .vault-dt-radio-option-row__control {
  flex: 0 0 auto;
  margin-top: 0.35em;
  opacity: 1;
  width: auto;
  height: auto;
  min-width: 1rem;
  min-height: 1rem;
}
.vault-dt-radio-option-row--create-modal .vault-dt-radio-option-row__control:disabled {
  opacity: 1;
  cursor: not-allowed;
}
.vault-dt-radio-option-row--create-modal .vault-dt-radio-option-row__title--create-modal {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.vault-dt-radio-option-row--create-modal .vault-info {
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: 0.35em;
  align-self: flex-start;
}
.vault-dt-radio-option-row:hover {
  background: rgba(148, 163, 184, 0.1);
}
.vault-dt-radio-option-row--selected {
  background: color-mix(in srgb, var(--vault-primary, #0ea5e9) 14%, transparent);
  border-color: color-mix(in srgb, var(--vault-primary, #0ea5e9) 28%, transparent);
}
.vault-dt-radio-option-row__control {
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.vault-dt-radio-option-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.vault-dt-radio-option-row__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--vault-text, #1e293b);
}
.vault-dt-radio-option-row__desc {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--vault-text-muted, #64748b);
}

.vault-dt-grid__th--recurring-add {
  min-width: 4.5rem;
  padding: 0.25rem 0.35rem;
  vertical-align: middle;
  text-align: left;
  position: relative;
  cursor: pointer;
}
.vault-dt-grid__th-inner--recurring-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 1.5rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.vault-dt-recurring-th-heading-label {
  cursor: inherit;
  text-align: left;
}
.vault-dt-recurring-row-type-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
  margin-right: 0.2rem;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: center;
}
.vault-dt-grid__cell--recurring-add {
  min-width: 4.5rem;
  vertical-align: middle;
  padding: 0.25rem 0.35rem;
}
.vault-dt-grid__cell--recurring-add:not(.vault-dt-grid__cell--recurring-occurrence) {
  text-align: right;
  overflow: hidden;
  box-sizing: border-box;
}
.vault-dt-recurring-cell-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.vault-dt-recurring-cell-actions--nowrap {
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
}
.vault-dt-recurring-cell-actions .vault-dt-recurring-gear {
  flex-shrink: 0;
}
.vault-dt-recurring-onetime-pay-inline {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 2rem);
  overflow: hidden;
}
.vault-dt-recurring-onetime-pay-inline .vault-dt-date-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.2rem 0.25rem;
  font-size: 0.75rem;
}
.vault-dt-grid__cell--recurring-add .vault-btn--icon-only {
  min-width: 1.75rem;
}
.vault-dt-recurring-gear--active {
  color: var(--vault-primary, #0492b5);
}
.vault-dt-grid__cell--recurring-occurrence {
  min-width: 0;
  max-width: 100%;
  text-align: center;
}
.vault-dt-recurring-occurrence-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.vault-dt-recurring-occurrence-wrap .vault-dt-cell-date-picker,
.vault-dt-recurring-occurrence-wrap .vault-dtp {
  max-width: 100%;
}
.vault-dt-recurring-occurrence-wrap .vault-dt-date-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.vault-dt-settings-card--sync { background: rgba(100, 116, 139, 0.08); }
.vault-dt-settings-card--relations { background: rgba(148, 163, 184, 0.06); }
.vault-dt-settings-card--tags { background: rgba(100, 116, 139, 0.08); }
.vault-dt-settings-card--reminder { background: rgba(59, 130, 246, 0.06); }
.vault-dt-settings-card--progress { background: rgba(34, 197, 94, 0.06); }
.vault-dt-settings-card--delete { background: rgba(220, 38, 38, 0.06); }

/* Table settings modal: tabs (Reminder | Progress bar) */
.vault-dt-settings-tab-bar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  padding-bottom: 0;
}
.vault-dt-settings-tab {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--vault-text-muted, #94a3b8);
  border-radius: 0.25rem 0.25rem 0 0;
}
.vault-dt-settings-tab:hover {
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-settings-tab--active {
  font-weight: 600;
  color: var(--vault-text, #e2e8f0);
  border-bottom-color: var(--vault-primary, #6366f1);
}
.vault-dt-settings-tab-panel {
  display: none;
}
.vault-dt-settings-tab-panel--active {
  display: block;
}

/* Table settings modal: more space between relations section and delete button */
.vault-dt-table-settings-delete {
  margin-top: 0.5rem;
}

.vault-dt-media-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.vault-dt-media-previews {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  flex: 1 1 0;
  min-width: 0;
}
.vault-dt-media-preview-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  /* Do not use overflow:hidden here — it clips the thumb’s box-shadow */
}
.vault-dt-media-preview-trigger:hover {
  background: rgba(0, 0, 0, 0.06);
}
.vault-dt-media-thumb-link {
  display: inline-block;
  line-height: 0;
}
.vault-dt-media-thumb {
  vertical-align: middle;
  display: block;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.vault-dt-media-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--vault-text, #111);
  background: var(--vault-bg-elevated, #f1f5f9);
  border: 1px solid var(--vault-border, #e2e8f0);
}
.vault-dt-media-more-badge {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vault-text, #111);
  background: var(--vault-bg-elevated, #e2e8f0);
  border: 1px solid var(--vault-border, #cbd5e1);
}
.vault-dt-media-more-badge:hover {
  background: var(--vault-bg-hover, #cbd5e1);
}
.vault-dt-media-link {
  color: var(--vault-primary, #2563eb);
  text-decoration: none;
  font-size: 0.8125rem;
}
.vault-dt-media-link:hover {
  text-decoration: underline;
}
.vault-dt-media-image-count-badge {
  flex-shrink: 0;
  min-width: 1.125rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  margin-left: auto;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--vault-text, #111);
  background: var(--vault-primary-light, rgba(4, 146, 181, 0.15));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-media-image-count-badge:hover {
  filter: brightness(0.97);
}
.vault-dt-media-image-count-badge:focus-visible {
  outline: 2px solid var(--vault-focus-ring);
  outline-offset: 1px;
}
.vault-dt-media-image-count-badge ~ .vault-dt-media-upload-btn {
  margin-left: 0;
}
.vault-dt-media-upload-btn {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.25rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.25rem;
  background: var(--vault-bg-elevated, #f8fafc);
  color: var(--vault-text, #111);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-media-upload-btn:hover {
  background: var(--vault-bg-hover, #f1f5f9);
}
.vault-dt-media-upload-btn svg {
  display: block;
}

/* Upload modal: two-step (upload form | screenshot tool) for extension */
.vault-dt-media-upload-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vault-dt-media-take-screenshot-btn {
  align-self: flex-end;
}
.vault-dt-media-take-screenshot-btn__icon {
  display: block;
  flex-shrink: 0;
}
.vault-dt-media-take-screenshot-btn:not(.vault-btn) {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--vault-bg-elevated, #f8fafc);
  color: var(--vault-text, #111);
  cursor: pointer;
}
.vault-dt-media-take-screenshot-btn:not(.vault-btn):hover {
  background: var(--vault-bg-hover, #f1f5f9);
}
.vault-dt-media-screenshot-step {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.vault-dt-media-screenshot-step:not(.hidden) {
  width: 100%;
}
.vault-dt-media-screenshot-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Upload media modal: larger when screenshot tool is open */
.vault-modal.vault-modal--media-screenshot-open {
  width: 90%;
  max-width: 90%;
  max-height: 90vh;
}
/* Toolbar fixed, only image area scrolls: modal body no scroll, content fills and scrolls inside canvas */
.vault-modal.vault-modal--media-screenshot-open .vault-modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.vault-modal.vault-modal--media-screenshot-open .vault-media-input-modal-body.vault-media-input-modal-body--screenshot-open {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vault-dt-media-screenshot-step:not(.hidden) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Column settings: type badge next to header title */
.vault-dt-column-type-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--vault-primary, #6366f1);
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 12%, transparent);
  border-radius: 0.25rem;
  border: none;
}

/* Column settings: Change column type */
.vault-dt-column-settings-change-type {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.vault-dt-column-settings-change-type-btn {
  background: transparent;
  border: none;
  padding: 0.15rem 0.1rem;
  font-weight: 800;
  font-style: italic;
  text-decoration: underline;
  color: var(--vault-primary, #6366f1);
  cursor: pointer;
}
.vault-dt-column-settings-change-type-btn:hover {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 14%, transparent);
}

/* Column settings: block field / section labels (sentence case in markup; not ALL CAPS) */
.vault-modal--settings .vault-dt-column-type-settings > label.block,
.vault-modal--settings .vault-dt-column-type-settings label.block.text-sm.font-medium {
  font-weight: 600;
  color: var(--vault-text-muted, #64748b);
  text-transform: none;
  letter-spacing: normal;
}
/* Inline checkbox / radio row labels: normal body text */
.vault-modal--settings .vault-dt-column-type-settings label.flex {
  font-weight: 400;
  color: var(--vault-text, #334155);
  text-transform: none;
  letter-spacing: normal;
}
.vault-modal--settings .vault-dt-column-type-settings label {
  text-transform: none;
  letter-spacing: normal;
}

/* Status custom: plus button on the right */
.vault-dt-column-status-add-row {
  width: 100%;
}
.vault-dt-column-status-add-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--vault-success, #22c55e) 16%, transparent);
  color: var(--vault-success, #16a34a);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vault-dt-column-status-add-btn:hover {
  border-color: rgba(34, 197, 94, 0.6);
  background: color-mix(in srgb, var(--vault-success, #22c55e) 26%, transparent);
  color: var(--vault-success, #15803d);
}
.vault-dt-column-status-add-btn svg {
  display: block;
}

/* Column settings: rules automation panel */
.vault-dt-column-rules-auto-section {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  margin-top: 1.25rem;
}
.vault-dt-column-rules-auto-section.border-t {
  border-top: none !important;
}
.vault-dt-column-rules-auto-title {
  text-transform: none;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--vault-text-muted, #64748b) !important;
  margin-bottom: 0.5rem;
}
.vault-dt-column-rules-auto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.vault-dt-column-rules-auto-config-btn {
  background: transparent;
  border: none;
  padding: 0.15rem 0.1rem;
  font-weight: 800;
  font-style: italic;
  text-decoration: underline;
  color: var(--vault-primary, #6366f1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.vault-dt-column-rules-auto-config-btn:hover {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 14%, transparent);
}
.vault-dt-column-rules-auto-config-btn__gear {
  display: inline-flex;
}
.vault-dt-column-rules-auto-config-btn__gear svg {
  display: block;
}
.vault-dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.vault-dt-btn--secondary {
  background-color: var(--vault-bg-muted, #f1f5f9);
  color: var(--vault-text-secondary, #64748b);
  border-color: var(--vault-border, #e2e8f0);
}
.vault-dt-btn--secondary:hover {
  background-color: var(--vault-bg-muted-hover, #e2e8f0);
  color: var(--vault-text, #334155);
  border-color: var(--vault-border-hover, #cbd5e1);
}
.vault-dt-change-type-list {
  max-height: 16rem;
  overflow-y: auto;
}
/* When change-type list is inside modal, don't use fixed position from .vault-dt-dropdown */
.vault-dt-change-type-list.vault-dt-dropdown {
  position: static;
}
.vault-dt-change-type-option {
  transition: background-color 0.15s ease;
}

/* URL column: scrollable URL chips + sticky add; bubble = add field only */
.vault-dt-cell-url-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  min-width: 0;
}
.vault-dt-cell-url-wrap--compact {
  justify-content: center;
  align-items: center;
  min-height: 2rem;
}
.vault-dt-url-scroll-host {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.vault-dt-url-scroll-host .vault-dt-url-chips {
  overflow-x: visible;
  overflow-y: visible;
  max-width: none;
}
.vault-dt-url-input-wrap--hidden {
  display: none !important;
}
.vault-dt-url-edit-bubble {
  min-width: min(18rem, calc(100vw - 1.5rem));
  max-width: min(24rem, calc(100vw - 1rem));
  padding: 0.5rem 0.6rem;
  background: var(--vault-bg-elevated, #fff);
  border: 1px solid var(--vault-border, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 10060;
}
.vault-dt-url-edit-bubble .vault-dt-url-input-wrap {
  width: 100%;
  min-width: 0;
}
.vault-dt-url-main-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vault-dt-url-add-btn {
  flex-shrink: 0;
  align-self: center;
}
/* URL count: fixed next to scroll area; same hover gray as .vault-dt__icon-btn */
.vault-dt-url-count-badge {
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: 9999px;
  background: var(--vault-bg-muted, #f1f5f9);
  color: var(--vault-text-secondary, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .vault-dt-url-count-badge:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
  }
}
.vault-dt-url-count-badge:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vault-primary, #0492b5) 45%, transparent);
  outline-offset: 1px;
}
.vault-dt-url-add-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.vault-dt-url-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  min-width: 0;
}
.vault-dt-url-chip {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--vault-bg-muted, #f1f5f9);
  color: var(--vault-link, #3b82f6);
  text-decoration: none;
  border: 1px solid var(--vault-border, #e2e8f0);
  cursor: pointer;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-url-chip:hover {
  text-decoration: underline;
  background: var(--vault-bg-muted-hover, #e2e8f0);
}
.vault-dt-url-input-wrap {
  min-width: 0;
  position: relative;
}
.vault-dt-url-current-tab-dropdown {
  position: fixed;
  z-index: 10001;
  min-width: 10rem;
  background: var(--vault-bg-elevated, #fff);
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.vault-dt-url-current-tab-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vault-dt-url-current-tab-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--vault-link, #3b82f6);
  background: none;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}
.vault-dt-url-current-tab-opt:hover:not(:disabled) {
  background: var(--vault-bg-muted, #f1f5f9);
}
.vault-dt-url-current-tab-opt:disabled,
.vault-dt-url-current-tab-opt.vault-dt-url-current-tab-opt--added {
  cursor: default;
  opacity: 0.85;
}
.vault-dt-url-current-tab-added {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  color: var(--vault-success, #16a34a);
  font-weight: 500;
}
.vault-dt-url-dropdown-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.vault-dt-url-dropdown-row .vault-dt-url-dropdown-item {
  flex: 1;
  min-width: 0;
}
.vault-dt-url-dropdown-copy {
  flex-shrink: 0;
  padding: 0.2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--vault-text-muted, #64748b);
  border-radius: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-url-dropdown-copy:hover {
  color: var(--vault-primary, #0492b5);
  background: var(--vault-primary-light, rgba(4, 146, 181, 0.12));
}
.vault-dt-url-dropdown-remove {
  flex-shrink: 0;
  padding: 0.2rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--vault-text-muted, #64748b);
  border-radius: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-url-dropdown-remove:hover {
  color: var(--vault-error, #dc2626);
  background: var(--vault-bg-muted, #f1f5f9);
}
.vault-dt-url-dropdown {
  position: fixed;
  z-index: 10001;
  min-width: 14rem;
  max-width: 20rem;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--vault-bg-elevated, #fff);
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* In-flow panel (e.g. calendar row detail): same inner list as floating dropdown; no outer box */
.vault-dt-url-dropdown.vault-dt-url-dropdown--inline {
  position: static;
  z-index: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.vault-dt-url-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--vault-link, #3b82f6);
  text-decoration: none;
  border-radius: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-url-dropdown-item:hover {
  background: var(--vault-bg-muted, #f1f5f9);
  text-decoration: underline;
}
.vault-dt-url-dropdown-empty {
  padding: 0.5rem 0.75rem;
}

/* URL dropdown: hover preview popover (above .vault-modal-overlay z-index 10050) */
.vault-dt-url-preview-popover {
  position: fixed;
  z-index: 11000;
  background: var(--vault-bg-elevated, #fff);
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  /* Click-through: preview must not block gallery / tools underneath (iframes need this on descendants too). */
  pointer-events: none;
}
.vault-dt-url-preview-popover * {
  pointer-events: none;
}
.vault-dt-url-preview-img {
  display: block;
  border-radius: 0.375rem;
}
.vault-dt-url-preview-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  width: 100%;
  background: var(--vault-bg-muted, #f1f5f9);
  border-radius: 0.375rem 0.375rem 0 0;
}
.vault-dt-url-preview-loader--meta {
  min-height: 72px;
  border-radius: 0.375rem;
}
.vault-dt-url-preview-card--meta {
  min-height: 0;
}
.vault-dt-url-preview-meta-og {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  background: var(--vault-bg-muted, #f1f5f9);
}
.vault-dt-url-preview-meta-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem 0.35rem;
  border-bottom: 1px solid var(--vault-border, #e2e8f0);
  background: var(--vault-bg-elevated, #fff);
}
.vault-dt-url-preview-meta-favicon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  margin-top: 0.1rem;
  object-fit: contain;
  background: var(--vault-bg-muted, #f1f5f9);
}
.vault-dt-url-preview-meta-title {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vault-text, #0f172a);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.vault-dt-url-preview-meta-desc {
  padding: 0.4rem 0.6rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--vault-text-secondary, #64748b);
  max-height: 5.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  word-break: break-word;
}
.vault-dt-url-preview-card--meta .vault-dt-url-preview-url-text {
  border-top: 1px solid var(--vault-border, #e2e8f0);
}
.vault-dt-url-preview-loader::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid var(--vault-border, #e2e8f0);
  border-top-color: var(--vault-primary, #0492b5);
  border-radius: 50%;
  animation: vault-dt-url-preview-spin 0.7s linear infinite;
}
@keyframes vault-dt-url-preview-spin {
  to {
    transform: rotate(360deg);
  }
}
.vault-dt-url-preview-fallback {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--vault-text-secondary, #64748b);
  word-break: break-all;
}
.vault-dt-url-preview-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 80px;
}
.vault-dt-url-preview-label {
  padding: 0.35rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--vault-text-muted, #94a3b8);
  background: var(--vault-bg-muted, #f8fafc);
  border-bottom: 1px solid var(--vault-border, #e2e8f0);
}
.vault-dt-url-preview-iframe-wrap {
  flex: 1;
  min-height: 0;
}
.vault-dt-url-preview-iframe {
  display: block;
  border-radius: 0 0 0.375rem 0.375rem;
}
.vault-dt-url-preview-url-text {
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  color: var(--vault-link, #3b82f6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px solid var(--vault-border, #e2e8f0);
  background: var(--vault-bg-elevated, #fff);
}

/* Disable URL hover preview on touch devices (no hover) */
@media (hover: none) {
  .vault-dt-url-preview-popover {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Doc drawer URL column: multiple links */
.vault-dt-doc-drawer-url-display.vault-dt-doc-drawer-col-display--empty::before {
  content: '\2014';
  color: var(--vault-text-muted, #94a3b8);
}
.vault-dt-doc-drawer-url-link {
  font-size: 0.8125rem;
  color: var(--vault-link, #3b82f6);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vault-dt-doc-drawer-url-link:hover {
  text-decoration: underline;
}
/* Row schedule modal: Save while generating installment sub-rows */
#vault-modal-footer .vault-modal-btn-primary.vault-dt-installment-save--busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 4.5rem;
  min-height: 2.25rem;
}
#vault-modal-footer .vault-modal-btn-primary.vault-dt-installment-save--busy .vault-loader__spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
#vault-modal-footer .vault-modal-btn-primary.vault-dt-create-table--busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 4.5rem;
  min-height: 2.25rem;
}
#vault-modal-footer .vault-modal-btn-primary.vault-dt-create-table--busy .vault-loader__spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

.vault-modal-footer .vault-modal-btn-warning {
  background-color: #d97706;
  border-color: #b45309;
}
.vault-modal-footer .vault-modal-btn-warning:hover {
  background-color: #b45309;
  border-color: #92400e;
}

/* Column settings: Remove column */
.vault-dt-column-settings-remove {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
}
.vault-dt-btn-remove-col {
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  color: #b91c1c;
  background: transparent;
  border: 1px solid #fecaca;
  border-radius: 0.25rem;
  cursor: pointer;
}
.vault-dt-btn-remove-col:hover {
  background: #fef2f2;
  border-color: #f87171;
}

/* Filters modal */
.vault-dt-filters-modal .vault-dt-filters-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.vault-dt-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.vault-dt-filter-col,
.vault-dt-filter-op {
  min-width: 8rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  background: #fff;
}
.vault-dt-filter-val-wrap {
  flex: 1;
  min-width: 6rem;
  display: flex;
}
.vault-dt-filter-val-wrap .vault-dt-filter-val,
.vault-dt-filter-val {
  flex: 1;
  min-width: 6rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
}
.vault-dt-filter-val-wrap input[type="hidden"].vault-dt-filter-val {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.vault-dt-filter-date-picker-wrap {
  flex: 1;
  min-width: 8rem;
}
.vault-dt-cell-date-picker {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.vault-dt-installment-sum-diff--danger {
  color: var(--vault-danger, #b91c1c);
  font-weight: 700;
}
.vault-dt-filter-default-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
}
.vault-dt-filter-default-label input {
  margin: 0;
}
.vault-dt-filter-rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1rem;
  color: var(--vault-danger, #b91c1c);
  background: color-mix(in srgb, var(--vault-danger, #b91c1c) 14%, transparent);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}
.vault-dt-filter-rm:hover {
  background: color-mix(in srgb, var(--vault-danger, #b91c1c) 22%, transparent);
  color: var(--vault-danger, #b91c1c);
}
.vault-dt-filter-add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--vault-primary, #10b981);
  background: color-mix(in srgb, var(--vault-primary, #10b981) 14%, transparent);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}
.vault-dt-filter-add:hover {
  background: color-mix(in srgb, var(--vault-primary, #10b981) 22%, transparent);
}
/* Multiselect / dropdown: selected options primary light background, no border */
.vault-dt-column-settings .vault-dropdown-option-selected,
.vault-dt-relation-display-columns-dropdown .vault-dropdown-option-selected,
.vault-dt-filters-modal .vault-dropdown-option-selected {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 18%, transparent);
  border: none;
  outline: none;
}
/* Dropdown list is portaled to body; keep option text sentence case */
.vault-dropdown-panel--multiselect .vault-dropdown-option-label,
.vault-dropdown-panel--multiselect .vault-dropdown-option-subtitle {
  text-transform: none;
}

/* Time tracker column — allow column shrink: nowrap only on the total line, cell clips */
.vault-dt-grid__cell--time-tracker {
  vertical-align: middle;
}
.vault-dt-time-tracker-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.vault-dt-time-tracker-total {
  font-size: inherit;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-time-tracker-total .vault-time-tracker-util__unit {
  color: var(--vault-text-muted, #94a3b8);
}
.vault-dt-time-tracker-total--clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.vault-dt-time-tracker-total--clickable:hover {
  text-decoration: underline;
}
.vault-dt-grid__th-column-chart-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.vault-dt-time-tracker-pct { font-weight: 400; margin-left: 0.1rem; }
.vault-dt-time-tracker-btns {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  flex-shrink: 0;
}
.vault-dt-time-tracker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: var(--vault-bg-muted, #f1f5f9);
  color: var(--vault-text, #334155);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vault-dt-time-tracker-btn:hover {
  background: var(--vault-bg-muted, #e2e8f0);
  color: inherit;
}
.vault-dt-time-tracker-btn--start,
.vault-dt-time-tracker-btn--resume { color: var(--vault-success, #16a34a); }
.vault-dt-time-tracker-btn--start:hover,
.vault-dt-time-tracker-btn--resume:hover { color: var(--vault-success, #16a34a); }
.vault-dt-time-tracker-btn--pause { color: var(--vault-warning, #ca8a04); }
.vault-dt-time-tracker-btn--pause:hover { color: var(--vault-warning, #ca8a04); }
.vault-dt-time-tracker-btn--stop { color: var(--vault-danger, #dc2626); }
.vault-dt-time-tracker-btn--stop:hover { color: var(--vault-danger, #dc2626); }

/* Floating time tracker bubble (when timer is running) — same layout as stopwatch chip */
/* z-index above .vault-modal-overlay (10050) so PWA / web still show the chip when overlays are present */
.vault-dt-time-tracker-bubble {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10060;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  background: var(--vault-bg-elevated, #1e293b);
  border: 1px solid var(--vault-border, #334155);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: default;
  user-select: none;
  min-width: 8rem;
  max-width: 16rem;
  resize: none;
  overflow: visible;
}
.vault-dt-time-tracker-bubble__drag {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.vault-dt-time-tracker-bubble__drag:active {
  cursor: grabbing;
}
.vault-dt-time-tracker-bubble {
  user-select: none;
  -webkit-user-select: none;
}
.vault-dt-time-tracker-bubble__left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.vault-dt-time-tracker-bubble__right {
  flex-shrink: 0;
}
.vault-dt-time-tracker-bubble__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
}
.vault-dt-time-tracker-bubble__table-name {
  font-size: 0.75rem;
  color: var(--vault-text-muted, #94a3b8);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-dt-time-tracker-bubble__row2 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.vault-dt-time-tracker-bubble__row-id {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--vault-text-muted, #64748b);
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
}
.vault-dt-time-tracker-bubble__row-id-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.15rem 0.25rem;
  background: none;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: var(--vault-primary, #0492b5);
  text-decoration: underline;
  cursor: pointer;
  border-radius: 2px;
}
.vault-dt-time-tracker-bubble__row-id-btn:hover {
  color: var(--vault-primary-hover, #03819f);
}
.vault-dt-time-tracker-bubble__btn-details {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.2rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-text-muted, #94a3b8);
}
.vault-dt-time-tracker-bubble__btn-details:hover {
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-time-tracker-bubble__btns {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.vault-dt-time-tracker-bubble__btns .vault-dt-time-tracker-btn {
  padding: 0.2rem;
  margin: 0;
  min-width: 1.5rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Time format: digits bold darker, units (h, m, s) light gray normal */
.vault-time-tracker-util__num {
  font-weight: 700;
  color: var(--vault-text, #e2e8f0);
}
.vault-time-tracker-util__unit {
  color: var(--vault-text-muted, #94a3b8);
  font-weight: 400;
}
.vault-dt-time-tracker-bubble__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--vault-text, #e2e8f0);
  font-size: 1.1rem;
}
.vault-dt-time-tracker-bubble:hover {
  border-color: var(--vault-primary, #6366f1);
}
/* Active timer / Timer left running: table icon + table name (lighter, bold), then row name */
.vault-dt-time-tracker-bubble-modal__table-line,
.vault-dt-forgot-stop__table-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.25rem 0;
  font-weight: 700;
  color: var(--vault-text-muted, #94a3b8);
}
.vault-dt-time-tracker-bubble-modal__table-line .vault-dt-table-icon,
.vault-dt-forgot-stop__table-line .vault-dt-table-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--vault-text-muted, #94a3b8);
}
.vault-dt-time-tracker-bubble-modal__row-name,
.vault-dt-forgot-stop__row-name { margin-bottom: 0.25rem; color: var(--vault-text, #e2e8f0); font-weight: 600; }
.vault-dt-time-tracker-bubble-modal__time { margin: 0; }
.vault-dt-time-tracker-bubble-modal__time .vault-time-tracker-util__unit { color: var(--vault-text-muted, #94a3b8); }
.vault-dt-time-tracker-bubble-modal__btns .vault-dt-time-tracker-btn { margin: 0; }

/* Time log modal: range (date only, black), task (bigger), timeline cards by date */
.vault-dt-time-log-modal__range { margin: 0 0 0.6rem 0; color: #64748b; font-size: 0.75rem; }
.vault-dt-time-log-modal__range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}
.vault-dt-time-log-modal__range-row .vault-dt-time-log-modal__row-total { flex-shrink: 0; }
.vault-dt-time-log-modal__task-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  color: var(--vault-text, #0f172a);
}
.vault-dt-time-log-modal__task-row .vault-dt-time-log-modal__task-name { flex: 1; min-width: 0; word-break: break-word; }
.vault-dt-time-log-modal__task-row .vault-dt-time-log-modal__task-id { flex-shrink: 0; }
.vault-dt-time-log-modal__task { margin: 0 0 0.75rem 0; font-size: 1.1rem; color: #0f172a; }
.vault-dt-time-log-modal__task-id.vault-dt-time-log-modal__muted { color: #64748b; font-weight: 400; }
.vault-dt-time-log-modal__timeline-scroll {
  margin-top: 0.5rem;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.vault-dt-time-log-modal__timeline { margin: 0; }
.vault-dt-time-log-modal__label { color: #64748b; font-weight: 400; }
.vault-dt-time-log-modal__value { color: #0f172a; font-weight: 500; }
.vault-dt-time-log-modal__log-row {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
  margin: 0;
  border: none;
  align-items: start;
  min-height: 2.5rem;
}
.vault-dt-time-log-modal__log-date {
  padding: 0.35rem 0.5rem 0.35rem 0;
  border-right: 1px solid var(--vault-border, #334155);
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  font-size: 0.8rem;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 1;
}
.vault-dt-time-log-modal__day-total { font-size: 0.75rem; }
.vault-dt-time-log-modal__row-id-right {
  align-self: flex-end;
  margin-top: 0.15rem;
  font-size: 0.7rem;
}
.vault-dt-time-log-modal__dur--highlight {
  background: var(--vault-primary-light, rgba(56, 189, 248, 0.2));
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}
.vault-dt-time-log-modal__line--pause .vault-dt-time-log-modal__dur--highlight {
  background: rgba(148, 163, 184, 0.2);
}
.vault-dt-time-log-modal__log-details {
  padding: 0.35rem 0 0.35rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vault-dt-time-log-modal__from-to { margin: 0; }
.vault-dt-time-log-modal__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
}
.vault-dt-time-log-modal__line .vault-dt-time-log-modal__range {
  flex: 1;
  min-width: 0;
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-time-log-modal__line .vault-dt-time-log-modal__dur {
  flex-shrink: 0;
  min-width: 4.5rem;
  text-align: right;
  font-weight: 600;
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-time-log-modal__line--pause .vault-dt-time-log-modal__range,
.vault-dt-time-log-modal__line--pause .vault-dt-time-log-modal__dur {
  color: #94a3b8;
  font-weight: normal;
}
.vault-dt-time-log-modal__log-divider {
  margin: 0.25rem 0;
  border: none;
  border-top: 1px dashed var(--vault-border, #cbd5e1);
  flex-shrink: 0;
}
.vault-dt-time-log-modal__line--top .vault-dt-time-log-modal__range--bold { font-weight: 700; }
.vault-dt-time-log-modal__time-sec {
  color: var(--vault-text-muted, #94a3b8);
  font-weight: normal;
}
.vault-dt-time-log-modal__log-note { margin: -0.3rem 0 0 0; word-break: break-word; color: #475569; }
.vault-dt-time-log-modal__log-note--bg {
  background: rgba(148, 163, 184, 0.15);
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
}
.vault-dt-time-log-modal__note-content { font-size: 0.9em; display: block; }
.vault-dt-time-log-modal__note-content.vault-dt-time-log-modal__note-content--collapsed {
  max-height: 7.5em;
  overflow: hidden;
}
.vault-dt-time-log-modal__expand-note {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--vault-primary, #0492b5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15rem 0;
  text-decoration: underline;
}
.vault-dt-time-log-modal__expand-note:hover { color: var(--vault-primary-hover, #03819f); }
.vault-dt-time-log-modal__line--pause .vault-dt-time-log-modal__pause-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25rem;
  vertical-align: middle;
  color: #94a3b8;
}
.vault-dt-time-log-modal__note-content ul,
.vault-dt-time-log-modal__note-content ol {
  padding-left: 1rem;
  margin: 0.25em 0;
}
.vault-dt-time-log-modal__note-content li { margin-left: 0; }

/* Table header: ⋮ before title; recurring summary chart sits after title (see datatable.js) */
.vault-dt__table-name-lead {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

/* Recurring table — summary modal (lives in global modal overlay: use --vault-* for light + dark) */
.vault-dt-recurring-analytics-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--vault-border, #e5e7eb);
}
.vault-dt-recurring-analytics-modal__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  width: 100%;
}
.vault-dt-recurring-analytics-modal__filter-item {
  flex: 1 1 11rem;
  min-width: 0;
  max-width: 22rem;
}
.vault-dt-recurring-analytics-modal__filter-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vault-text-muted, #64748b);
  margin-bottom: 0.3rem;
}
.vault-dt-recurring-analytics-modal__line-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.vault-dt-recurring-analytics-line-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
}
.vault-dt-recurring-analytics-line-toolbar .vault-dt-recurring-analytics-modal__range-host {
  flex: 1 1 220px;
  min-width: 180px;
}
.vault-dt-recurring-analytics-modal__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.vault-dt-recurring-analytics-modal__preset {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--vault-border, #e5e7eb);
  background: var(--vault-bg-elevated, #fff);
  color: var(--vault-text, #111827);
  cursor: pointer;
}
.vault-dt-recurring-analytics-modal__preset:hover {
  background: color-mix(in srgb, var(--vault-text, #111827) 6%, var(--vault-bg-elevated, #fff));
}
.vault-dt-recurring-analytics-modal__range-host {
  flex: 1;
  min-width: 200px;
  color: var(--vault-text, #111827);
}
.vault-dt-recurring-analytics-modal__muted {
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-recurring-analytics-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 720px) {
  .vault-dt-recurring-analytics-modal__grid {
    grid-template-columns: 1fr;
  }
}
.vault-dt-recurring-analytics-card {
  background: color-mix(in srgb, var(--vault-text, #111827) 4%, var(--vault-bg-elevated, #fff));
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--vault-text, #111827);
}
.vault-dt-recurring-analytics-card--wide {
  grid-column: 1 / -1;
}
.vault-dt-recurring-analytics-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vault-text, #111827);
  margin: 0 0 0.5rem 0;
}
.vault-dt-recurring-analytics-card__hint {
  color: var(--vault-text-secondary, #475569);
  line-height: 1.45;
}
.vault-dt-recurring-analytics-card__metrics {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.vault-dt-recurring-analytics-metric__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vault-text-muted, #64748b);
  font-weight: 600;
}
.vault-dt-recurring-analytics-metric__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vault-text, #111827);
  font-variant-numeric: tabular-nums;
}
.vault-dt-recurring-analytics-type-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--vault-border, #e5e7eb) 80%, transparent);
}
.vault-dt-recurring-analytics-type-row:last-child {
  border-bottom: none;
}
.vault-dt-recurring-analytics-type-row--total {
  font-weight: 600;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--vault-border, #e5e7eb);
}
.vault-dt-recurring-analytics-type-row__swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.vault-dt-recurring-analytics-type-row__label {
  color: var(--vault-text, #374151);
  font-weight: 500;
}
.vault-dt-recurring-analytics-type-row__amt {
  color: var(--vault-text, #111827);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vault-dt-recurring-analytics-type-row__amt-num {
  color: var(--vault-text, #111827);
  font-weight: 600;
}
.vault-dt-recurring-analytics-type-row__sep,
.vault-dt-recurring-analytics-type-row__pct {
  color: var(--vault-text-muted, #64748b);
  font-weight: 500;
}
.vault-dt-recurring-analytics-type-row__amt--total-only {
  font-weight: 700;
}
.vault-dt-recurring-analytics-line-wrap .vault-line-chart__svg text {
  fill: var(--vault-text-muted, #64748b);
}
.vault-line-chart {
  position: relative;
  width: 100%;
  overflow-x: auto;
}
.vault-line-chart__svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  color: var(--vault-text-muted, #64748b);
}
.vault-line-chart__tooltip {
  position: fixed;
  z-index: 1000010;
  max-width: 16rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vault-text, #1e293b);
  background: var(--vault-bg-elevated, #fff);
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 0.375rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.vault-line-chart__hit:focus {
  outline: 2px solid var(--vault-focus-ring, #0492b5);
  outline-offset: 2px;
}
.vault-dt-recurring-analytics-card .vault-pie-chart__legend-label {
  color: var(--vault-text, #111827);
}
.vault-dt-recurring-analytics-card .vault-pie-chart__legend-meta {
  color: var(--vault-text-muted, #64748b);
}

/* Formula / rule automation: sparkles on column header; formula-driven cells stay read-only */
.vault-dt-grid__cell--formula-automation-readonly {
  pointer-events: none;
  user-select: text;
}
.vault-dt-th-automation-indicator {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0.2rem;
  opacity: 0.92;
  color: rgba(167, 139, 250, 0.98);
}
.vault-dt-th-automation-indicator svg {
  display: block;
}
.vault-dt-column-formula-section .vault-formula {
  border-color: rgba(148, 163, 184, 0.35);
}

/* Order items (semantic): Add item above pagination; sheet = bottom full-width on small viewports, centered modal on wide */
.vault-dt-add-row-bar--order-items {
  padding-left: 0.75rem;
}
.vault-dt-add-row-bar--order-items-hidden {
  display: none !important;
}
.vault-dt-oi-add-item-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0 0.15rem;
  flex-shrink: 0;
}
.vault-dt-oi-add-row-hint {
  margin: 0;
  max-width: 100%;
  text-align: right;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-add-row-oi-trigger {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.vault-dt-oi-add-sheet {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.vault-dt-oi-add-sheet--open {
  display: flex;
}
.vault-dt-oi-add-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--vault-ui-overlay-backdrop-bg, rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(var(--vault-ui-overlay-backdrop-blur, 10px));
  -webkit-backdrop-filter: blur(var(--vault-ui-overlay-backdrop-blur, 10px));
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
}
.vault-dt-oi-add-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  max-height: min(78vh, 640px);
  margin: 0;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  border-radius: 0.75rem 0.75rem 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vault-dt-oi-add-sheet__panel--elevated {
  background: var(--vault-bg-elevated, #1e293b);
  border: 1px solid color-mix(in srgb, var(--vault-border, #475569) 70%, transparent);
  border-bottom: none;
  color: var(--vault-text, #e2e8f0);
}
@media (min-width: 640px) {
  .vault-dt-oi-add-sheet {
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }
  .vault-dt-oi-add-sheet__panel {
    width: min(100%, 500px);
    max-width: 500px;
    max-height: min(85vh, 720px);
    margin: 0;
    border-radius: 0.75rem;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38);
    padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .vault-dt-oi-add-sheet__panel--elevated {
    border-bottom: 1px solid color-mix(in srgb, var(--vault-border, #475569) 70%, transparent);
  }
}
.vault-dt-oi-add-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}
.vault-dt-oi-add-sheet__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}
.vault-dt-oi-add-sheet__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: color-mix(in srgb, var(--vault-text, #e2e8f0) 55%, transparent);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vault-dt-oi-add-sheet__close:hover {
  color: var(--vault-text, #e2e8f0);
  background: color-mix(in srgb, var(--vault-text, #e2e8f0) 8%, transparent);
}
.vault-dt-oi-add-sheet__body {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.vault-dt-oi-add-sheet__section {
  margin-bottom: 0.75rem;
}
.vault-dt-oi-add-sheet__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: inherit;
}
.vault-dt-oi-add-sheet__hint {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--vault-text, #e2e8f0) 58%, transparent);
}
.vault-dt-oi-add-sheet__smart-host {
  width: 100%;
  min-width: 0;
}
.vault-dt-oi-add-sheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--vault-border, #475569) 55%, transparent);
}
.vault-dt-relation-cell--oi-product-readonly.vault-dt-relation-cell:not(.vault-dt-relation-cell--linkable) {
  color: color-mix(in srgb, var(--vault-text, #64748b) 72%, transparent);
  cursor: default;
}
.vault-dt-relation-cell-wrap--oi-product-readonly .vault-dt-relation-cell--oi-product-readonly.vault-dt-relation-cell--linkable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Row highlight (classic + neon SmartText palette) — tint from data-vault-dt-row-color + CSS vars on tr.
   !important: beats .vault-tools-page--datatable .vault-dt-grid__cell { background: transparent !important } */
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]) > td {
  background-color: var(--vault-dt-row-neon-bg, transparent) !important;
}
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]):hover > td {
  background-color: var(--vault-dt-row-neon-bg-hover, var(--vault-dt-row-neon-bg, transparent)) !important;
}
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]).vault-dt-row--selected > td,
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]).vault-dt-row-selected > td {
  background-color: var(--vault-dt-row-neon-bg-selected, var(--vault-dt-row-neon-bg, transparent)) !important;
}
/* Sticky actions column: row tints are often rgba; paint tint over solid vault-bg so horizontal scroll never bleeds through (matches header opacity). */
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]) > td.vault-dt-grid__cell--actions {
  background: linear-gradient(0deg, var(--vault-dt-row-neon-bg), var(--vault-dt-row-neon-bg)), var(--vault-bg, #fff) !important;
}
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]):hover > td.vault-dt-grid__cell--actions {
  background: linear-gradient(0deg, var(--vault-dt-row-neon-bg-hover), var(--vault-dt-row-neon-bg-hover)), var(--vault-bg, #fff) !important;
}
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]).vault-dt-row--selected > td.vault-dt-grid__cell--actions,
.vault-dt-grid tbody tr[data-vault-dt-row-color]:not([data-vault-dt-row-color=""]).vault-dt-row-selected > td.vault-dt-grid__cell--actions {
  background: linear-gradient(0deg, var(--vault-dt-row-neon-bg-selected), var(--vault-dt-row-neon-bg-selected)), var(--vault-bg, #fff) !important;
}
.vault-dt-row-highlight-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.vault-dt-row-highlight-swatch-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--vault-border, #475569) 60%, transparent);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.vault-dt-row-highlight-swatch-btn:hover,
.vault-dt-row-highlight-swatch-btn--selected {
  outline: 2px solid color-mix(in srgb, var(--vault-text, #e2e8f0) 35%, transparent);
  outline-offset: 2px;
}
/* Clear override: last control in the same flex row as swatches (refresh icon) */
.vault-dt-row-highlight-picker-grid .vault-dt-row-highlight-clear-btn.vault-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 0.375rem;
  flex-shrink: 0;
  box-sizing: border-box;
  color: var(--vault-text-muted, #64748b);
  border-color: color-mix(in srgb, var(--vault-border, #475569) 60%, transparent);
  align-self: flex-start;
}
.vault-dt-row-highlight-picker-grid .vault-dt-row-highlight-clear-btn.vault-btn:hover:not(:disabled) {
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-row-highlight-picker-grid .vault-dt-row-highlight-clear-btn .vault-btn__icon svg {
  width: 1rem;
  height: 1rem;
}
.vault-dt-row-highlight-picker-grid .vault-dt-row-highlight-clear-btn--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--vault-text-muted, #64748b);
  border: 1px solid color-mix(in srgb, var(--vault-border, #475569) 60%, transparent);
}
.vault-dt-row-highlight-picker-grid .vault-dt-row-highlight-clear-btn--fallback:hover {
  color: var(--vault-text, #e2e8f0);
}
/* Per-row highlight: square color badge in row ⋮ menu (fixed size — % height collapsed inside flex icon slot) */
.vault-actions-dropdown-item-icon .vault-dt-row-actions-highlight-badge {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  min-height: 0.875rem;
  border-radius: 2px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
  box-sizing: border-box;
  flex-shrink: 0;
  align-self: center;
  background-clip: padding-box;
}
/* Row colors tab — tight vertical rhythm, light gray rule panels */
.vault-dt-settings-card--row-colors {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vault-dt-row-color-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.5rem;
}
.vault-dt-row-color-card-header__title {
  margin: 0;
  line-height: 1.25;
}
.vault-dt-row-color-card-header__info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.vault-dt-row-color-card-header__info .vault-info__btn {
  color: color-mix(in srgb, var(--vault-text, #e2e8f0) 55%, transparent);
  padding: 0.2rem;
  border-radius: 0.25rem;
}
.vault-dt-row-color-card-header__info .vault-info__btn:hover,
.vault-dt-row-color-card-header__info .vault-info__btn:focus-visible {
  color: var(--vault-text, #e2e8f0);
  background: color-mix(in srgb, var(--vault-text, #e2e8f0) 8%, transparent);
  outline: none;
}
.vault-dt-row-color-rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.vault-dt-row-color-empty {
  margin: 0;
  padding: 0.2rem 0;
  line-height: 1.4;
}
/* Row colors: white rule / editor panels (border unchanged) */
.vault-dt-settings-card--row-colors .vault-dt-row-color-rule-card,
.vault-dt-settings-card--row-colors .vault-dt-row-color-inline-editor {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-rule-summary {
  color: #334155;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-enable {
  color: #475569;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-inline-editor__title,
.vault-dt-settings-card--row-colors .vault-dt-row-color-inline-editor__conds-title {
  color: #0f172a;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-inline-editor__field > label {
  color: #64748b;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-empty {
  color: #64748b;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-empty {
  color: #64748b;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-card-header__title {
  color: #0f172a;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-hint {
  margin: 0.2rem 0 0;
  font-size: 0.625rem;
  line-height: 1.35;
  color: #64748b;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-val-host--date {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-date-val {
  width: 100%;
  align-items: center;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-input--days {
  width: 4.25rem;
  min-width: 4.25rem;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-date-info {
  display: inline-flex;
  align-items: center;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-date-info .vault-info__btn {
  color: #64748b;
  padding: 0.2rem;
  border-radius: 0.25rem;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-date-info .vault-info__btn:hover,
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-date-info .vault-info__btn:focus-visible {
  color: #0f172a;
  background: color-mix(in srgb, #64748b 14%, transparent);
  outline: none;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-remove {
  color: #64748b;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-remove:hover {
  color: #0f172a;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-row {
  padding: 0.45rem 0.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-op-select,
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-input,
.vault-dt-settings-card--row-colors .vault-dt-row-color-fallback-select {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-row .vault-dropdown-trigger {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-cond-row .vault-dropdown-trigger:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-inline-editor__footer {
  border-top-color: #e2e8f0;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-inline-editor__btn-cancel {
  color: #334155;
  border-color: #cbd5e1;
  background: #ffffff;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-inline-editor__btn-cancel:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.vault-dt-row-color-rule-card {
  padding: 0.5rem 0.65rem;
  border-radius: 0.45rem;
}
.vault-dt-row-color-rule-card__top {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.vault-dt-row-color-rule-actions {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-rule-btn--edit.vault-btn--outlined.vault-btn--light {
  color: #334155;
  border-color: #cbd5e1;
}
.vault-dt-settings-card--row-colors .vault-dt-row-color-rule-btn--delete.vault-btn--outlined.vault-btn--light {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 35%, #cbd5e1);
}
@media (hover: hover) {
  .vault-dt-settings-card--row-colors .vault-dt-row-color-rule-btn--delete.vault-btn--outlined.vault-btn--light:hover:not(:disabled) {
    color: #b91c1c;
    border-color: color-mix(in srgb, #b91c1c 45%, #cbd5e1);
    background: color-mix(in srgb, #dc2626 6%, #ffffff);
  }
}
.vault-dt-row-color-swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #cbd5e1;
  box-sizing: border-box;
}
.vault-dt-row-color-add-btn {
  margin-top: 0.1rem;
  align-self: flex-start;
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 22%, transparent);
  color: var(--vault-text, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--vault-primary, #6366f1) 45%, transparent);
}
.vault-dt-row-color-add-btn:hover {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 32%, transparent);
}
.vault-dt-row-color-inline-editor {
  margin-top: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 0.45rem;
}
.vault-dt-row-color-inline-editor[hidden] {
  display: none !important;
}
.vault-dt-row-color-inline-editor__head {
  margin-bottom: 0.35rem;
}
.vault-dt-row-color-inline-editor__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}
.vault-dt-row-color-inline-editor__field {
  margin-bottom: 0.15rem;
}
.vault-dt-row-color-inline-editor__field > label {
  margin-bottom: 0.25rem;
}
.vault-dt-row-color-inline-editor__conds-title {
  margin: 0.45rem 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.vault-dt-row-color-inline-editor__add-cond {
  margin-top: 0.35rem;
}
.vault-dt-row-color-inline-editor__footer {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--vault-border, #64748b) 35%, transparent);
  gap: 0.45rem;
}
.vault-dt-row-color-inline-editor__btn-cancel {
  cursor: pointer;
}
.vault-dt-row-color-inline-editor__color-dd .vault-dropdown {
  width: 100%;
  max-width: 100%;
}
.vault-dt-row-color-inline-editor__color-dd .vault-dropdown-trigger {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vault-primary, #6366f1) 32%, transparent);
  border-radius: 0.375rem;
  color: var(--vault-text, #e2e8f0);
}
.vault-dt-row-color-inline-editor__color-dd .vault-dropdown-trigger:hover {
  background: color-mix(in srgb, var(--vault-primary, #6366f1) 22%, transparent);
}
.vault-dt-row-color-inline-editor__save {
  background: var(--vault-primary, #6366f1);
  color: #fff;
  border: none;
  cursor: pointer;
}
.vault-dt-row-color-inline-editor__save:hover {
  filter: brightness(1.06);
}
.vault-dt-row-color-palette-panel.vault-dropdown-panel {
  min-width: min(280px, 92vw);
}
.vault-dt-row-color-cond-list {
  gap: 0.35rem !important;
  background: transparent;
}

/* Incoming shared tables: optional compact surface (filters hidden via share.include_filters_in_ui=false) */
.vault-dt__main-body--share-nofilters .vault-dt-filters-section {
  display: none !important;
}
.vault-dt-header-share-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 0.65rem !important;
  min-width: auto;
}

.vault-dt-share-settings-modal .vault-dt-share-settings__title {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__hint,
.vault-dt-share-settings-modal .vault-dt-share-settings__muted {
  font-size: 0.8125rem;
  color: var(--vault-text-muted, #94a3b8);
  margin: 0 0 1rem 0;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  margin: 0.5rem 0 0.25rem 0;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin: 0.75rem 0;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__error {
  color: #f87171;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

.vault-dt-share-settings-modal .vault-dt-share-settings__field {
  margin: 0.35rem 0 0.5rem 0;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__email-wrap .vault-input {
  margin-bottom: 0.65rem;
  max-width: 100%;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__dropdown-host {
  width: 100%;
  max-width: 100%;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__dropdown-host .vault-dropdown {
  width: 100%;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__native-select {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.35rem;
  box-sizing: border-box;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__datepicker-wrap .vault-dtp {
  margin-bottom: 0.35rem;
  max-width: 100%;
}
/* Share modal: reuse table-settings tab strip (readable on light modal chrome) */
.vault-dt-share-settings-modal .vault-dt-share-settings__tabs-wrap {
  margin-bottom: 0.35rem;
}
.vault-dt-share-settings-modal .vault-dt-settings-tab-bar {
  border-bottom-color: rgba(148, 163, 184, 0.35);
}
.vault-dt-share-settings-modal .vault-dt-settings-tab {
  color: var(--vault-text-muted, #64748b);
}
.vault-dt-share-settings-modal .vault-dt-settings-tab:hover {
  color: var(--vault-text, #0f172a);
}
.vault-dt-share-settings-modal .vault-dt-settings-tab--active {
  color: var(--vault-text, #0f172a);
  border-bottom-color: var(--vault-primary, #6366f1);
}
.vault-dt-share-settings__pane--list.vault-dt-settings-tab-panel--active {
  min-height: 3rem;
  max-height: min(62vh, 28rem);
  overflow-y: auto;
}
.vault-dt-share-settings__list-hint,
.vault-dt-share-settings__list-empty {
  font-size: 0.8125rem;
  color: var(--vault-text-muted, #94a3b8);
  margin: 0.35rem 0;
}
.vault-dt-share-settings__outgoing-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  background: transparent;
  box-sizing: border-box;
}
.vault-dt-share-settings__outgoing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
}
.vault-dt-share-settings__outgoing-head-main {
  flex: 1 1 12rem;
  min-width: 0;
}
.vault-dt-share-settings__outgoing-email {
  font-weight: 600;
  font-size: 0.875rem;
  word-break: break-all;
}
.vault-dt-share-settings__outgoing-sub {
  width: 100%;
  font-size: 0.72rem;
  color: var(--vault-text-muted, #94a3b8);
}
.vault-dt-share-settings__outgoing-panel {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}
.vault-dt-share-settings__outgoing-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: stretch;
}
.vault-dt-share-settings__outgoing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
  align-items: center;
}
.vault-dt-share-settings__linked-panel--read-only .vault-dt-share-settings__linked-row input[type='checkbox'] {
  pointer-events: none;
}

.vault-dt-share-settings-modal .vault-dt-share-settings__hint--tight {
  margin-bottom: 0.5rem;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__col-panel {
  margin-bottom: 0.65rem;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__col-scroll {
  max-height: 10.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__linked-panel .vault-dt-share-settings__col-scroll {
  max-height: 11rem;
  gap: 0.5rem;
  padding: 0.125rem;
  margin-right: -0.125rem;
}
.vault-dt-share-settings-modal .vault-dt-export__chip {
  font-size: 0.8125rem;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__linked-chip--locked {
  cursor: default;
  opacity: 0.95;
}
.vault-dt-share-settings-modal .vault-dt-export__chip--muted {
  color: var(--vault-text-secondary, #64748b);
}
.vault-dt-share-settings-modal .vault-dt-share-settings__linked-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.62rem 0.72rem;
  background: var(--vault-bg-card, #fafbfc);
  border: 1px solid var(--vault-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.vault-dt-share-settings-modal .vault-dt-share-settings__linked-row .vault-dt-export__chip {
  margin: 0;
  background: var(--vault-bg-elevated, #fff);
  border-color: var(--vault-border, #e5e7eb);
}
.vault-dt-share-settings-modal .vault-dt-share-settings__linked-edit-sub {
  font-size: 0.76rem;
  margin-left: 0;
  padding-left: 1.42rem;
  color: var(--vault-text-secondary, #64748b);
  cursor: pointer;
}
.vault-dt-share-settings-modal .vault-dt-share-settings__linked-edit-sub input {
  margin-right: 0.3rem;
  vertical-align: middle;
}