/*
  SFS admin: admin, file-manager, library, and grid page specifics.
  Public landing-page and chrome rules stay out of this file.
  Docs: _deploy/css-compartmentalisation-readable-map-20260704.md
  Related: _deploy/css-compartmentalisation-worklog-20260704.md; _deploy/css-compartmentalisation-verification-20260704.md
*/

/* file-manager-phase-a: two-pane Library landing page.
   This is a navigation mechanism, not a decorative dashboard. */

.fm-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
}

.fm-page-head h2 {
  margin-bottom: 5px;
}

.fm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.fm-shell {
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) minmax(0, 2.15fr);
  gap: 14px;
  align-items: start;
}

.fm-pane {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.fm-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.fm-pane-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.2;
}

.fm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.fm-workspace-list {
  display: grid;
  gap: 0;
  max-height: min(62vh, 680px);
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.fm-workspace-list li {
  border-bottom: 1px solid var(--line-soft);
}

.fm-workspace-list li:last-child {
  border-bottom: 0;
}

.fm-workspace-link,
.fm-workspace-link:visited {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  color: var(--text);
  text-decoration: none;
}

.fm-workspace-link:hover,
.fm-workspace-link:focus {
  background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
  color: var(--text);
  text-decoration: none;
}

.fm-workspace-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.2;
}

.fm-workspace-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.fm-workspace-desc {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-file-table {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fm-file-table th {
  top: 0;
}

.fm-file-table td:first-child {
  width: auto;
  white-space: normal;
}

.fm-file-table td:nth-child(1) {
  min-width: 260px;
}

.fm-file-table td:nth-child(2) {
  min-width: 180px;
  max-width: 360px;
}

.fm-file-table td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
}

.fm-file-table td:nth-child(4) {
  width: 1%;
  white-space: nowrap;
}

.fm-location {
  color: var(--muted);
  font-size: 12px;
}

.fm-empty {
  margin: 0;
  padding: 14px 10px;
  color: var(--muted);
  font-size: 13px;
}

@media (prefers-color-scheme: dark) {
  .fm-pane {
    background: var(--surface);
    border-color: var(--line);
  }

  .fm-pane-head {
    background: #1b1f1b;
  }

  .fm-workspace-link:hover,
  .fm-workspace-link:focus {
    background: #20231f;
  }
}

@media (max-width: 900px) {
  .fm-shell {
    grid-template-columns: 1fr;
  }

  .fm-workspace-list {
    max-height: none;
  }
}

/* file-manager-phase-b: workspace detail layout. */

.fm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.fm-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.fm-breadcrumb a:hover {
  color: var(--accent-warm);
  text-decoration: underline;
}

.fm-summary-list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fm-summary-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  border-bottom: 1px solid var(--line-soft);
}

.fm-summary-list div:last-child {
  border-bottom: 0;
}

.fm-summary-list dt,
.fm-summary-list dd {
  border-bottom: 0;
}

.fm-note {
  margin: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
  color: var(--muted);
  font-size: 13px;
}

.fm-note strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
}

.fm-note p {
  margin: 0;
}

.fm-management {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.fm-management summary {
  padding: 9px 11px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
}

.fm-management summary:hover {
  color: var(--accent-warm);
}

.fm-management-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.fm-management-grid form {
  margin: 0;
}

@media (max-width: 900px) {
  .fm-management-grid {
    grid-template-columns: 1fr;
  }
}

/* style-pass-2p: calm workspace management panels.
   Management is secondary. Navigation and files stay visually dominant. */

.fm-management {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}

.fm-management summary {
  background: color-mix(in srgb, var(--surface-soft) 56%, transparent);
  color: var(--muted);
  font-size: 13px;
}

.fm-management[open] summary {
  border-bottom: 1px solid var(--line);
}

.fm-management-grid {
  background: transparent;
}

.fm-management-grid form {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: none;
}

.fm-management-grid form h3 {
  margin-top: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 620;
}

.fm-management-grid label {
  color: var(--muted);
  font-weight: 560;
}

.fm-management-grid input,
.fm-management-grid textarea {
  background: var(--surface-soft);
  color: var(--text);
  border-color: var(--line);
}

.fm-management-grid button {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

.fm-management-grid button:hover {
  color: var(--accent-warm);
  border-color: color-mix(in srgb, var(--accent-warm) 45%, var(--line));
}

.fm-management-grid form[action*="archive"] button {
  color: color-mix(in srgb, var(--danger) 72%, var(--muted)) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--danger-line) 70%, var(--line)) !important;
}

.fm-management-grid form[action*="archive"] button:hover {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger-soft) 50%, transparent) !important;
}

/* Dark mode: remove white panels completely. */
@media (prefers-color-scheme: dark) {
  .fm-management summary {
    background: #151815;
    color: #a6aaa4;
  }

  .fm-management-grid form {
    background: #151815;
    border-color: #30342f;
  }

  .fm-management-grid form h3,
  .fm-management-grid label {
    color: #a6aaa4;
  }

  .fm-management-grid input,
  .fm-management-grid textarea {
    background: #20231f;
    color: #f2f1eb;
    border-color: #30342f;
  }

  .fm-management-grid button {
    background: transparent;
    color: #a6aaa4;
    border-color: #30342f;
  }
}

/* tabulator-poc-2: calm CFTS table styling for Library Browser. */

.browser-tabulator {
  min-height: 420px;
}

.browser-grid-fallback {
  margin: 8px 10px 10px;
  color: var(--muted);
  font-size: 12px;
}

.tabulator {
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.tabulator .tabulator-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.tabulator .tabulator-header .tabulator-col {
  border-right: 1px solid var(--line-soft);
  background: var(--surface-soft);
}

.tabulator .tabulator-header .tabulator-col-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

.tabulator .tabulator-header-filter input {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}

.tabulator .tabulator-tableholder {
  background: var(--surface);
}

.tabulator .tabulator-row {
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text);
}

.tabulator .tabulator-row.tabulator-row-even {
  background: var(--surface);
}

.tabulator .tabulator-row:hover {
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

.tabulator .tabulator-cell {
  border-right: 1px solid var(--line-soft);
}

.tabulator a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.tabulator a:hover {
  color: var(--accent-warm);
  text-decoration: underline;
}

.tabulator .tabulator-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.tabulator .tabulator-page,
.tabulator .tabulator-page-size {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  .tabulator,
  .tabulator .tabulator-tableholder,
  .tabulator .tabulator-row,
  .tabulator .tabulator-row.tabulator-row-even {
    background: var(--surface);
    color: var(--text);
  }

  .tabulator .tabulator-header,
  .tabulator .tabulator-header .tabulator-col,
  .tabulator .tabulator-footer {
    background: #1b1f1b;
  }

  .tabulator .tabulator-row:hover {
    background: #20231f;
  }

  .tabulator .tabulator-header-filter input {
    background: #20231f;
    color: #f2f1eb;
    border-color: #30342f;
  }
}

/* tabulator-poc-3: tidy Library Browser layout and grid tone. */

.browser-head {
  margin: 0 0 12px;
}

.browser-head h2 {
  margin: 0 0 5px;
}

.browser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.library-browser {
  display: grid;
  grid-template-columns: minmax(270px, 0.8fr) minmax(0, 2.4fr);
  gap: 14px;
  align-items: start;
}

.browser-tree,
.browser-files {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.browser-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.browser-pane-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 680;
}

.browser-pane-head p {
  margin: 2px 0 0;
  font-size: 12px;
}

.browser-pane-head > a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.browser-pane-head > a:hover {
  color: var(--accent-warm);
  text-decoration: underline;
}

.browser-tree-list,
.browser-folder-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.browser-tree-list {
  max-height: min(68vh, 760px);
  overflow: auto;
}

.browser-workspace {
  border-bottom: 1px solid var(--line-soft);
}

.browser-workspace-link,
.browser-workspace-link:visited {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  color: var(--text);
  text-decoration: none;
}

.browser-workspace-link span {
  font-size: 13px;
  font-weight: 620;
  line-height: 1.2;
}

.browser-workspace-link small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 480;
}

.browser-folder-list {
  padding: 0 0 6px 13px;
}

.browser-folder-list a,
.browser-folder-list a:visited {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 5px 10px 5px 11px;
  border-left: 1px solid var(--line-soft);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}

.browser-folder-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-folder-list small {
  color: var(--muted);
  font-size: 12px;
}

.browser-workspace-link:hover,
.browser-folder-list a:hover,
.browser-workspace.is-selected > .browser-workspace-link,
.browser-folder-list li.is-selected a {
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  color: var(--text);
  text-decoration: none;
}

.browser-folder-list li.is-selected a {
  border-left-color: var(--accent-warm);
}

.browser-files-head {
  align-items: flex-start;
}

.browser-empty {
  margin: 0;
  padding: 14px 10px;
  color: var(--muted);
  font-size: 13px;
}

/* Tabulator: make it look native to the app, not pasted in. */

.browser-tabulator {
  min-height: 520px;
}

.tabulator {
  border: 0 !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 13px !important;
}

.tabulator .tabulator-header {
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

.tabulator .tabulator-header .tabulator-col {
  border-right: 1px solid var(--line-soft) !important;
  background: var(--surface-soft) !important;
}

.tabulator .tabulator-header .tabulator-col-title {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: uppercase;
}

.tabulator .tabulator-col-sorter {
  opacity: 0.45;
}

.tabulator .tabulator-header-filter {
  padding-top: 4px !important;
}

.tabulator .tabulator-header-filter input {
  height: 24px !important;
  padding: 3px 6px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 12px !important;
}

.tabulator .tabulator-tableholder {
  background: var(--surface) !important;
}

.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-even,
.tabulator .tabulator-row.tabulator-row-odd {
  min-height: 30px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.tabulator .tabulator-row:hover {
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent) !important;
}

.tabulator .tabulator-cell {
  padding: 6px 7px !important;
  border-right: 1px solid var(--line-soft) !important;
}

.tabulator a {
  color: var(--text) !important;
  font-weight: 520 !important;
  text-decoration: none !important;
}

.tabulator a:hover {
  color: var(--accent-warm) !important;
  text-decoration: underline !important;
}

.tabulator .tabulator-footer {
  border-top: 1px solid var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

.tabulator .tabulator-page,
.tabulator .tabulator-page-size {
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.browser-grid-fallback {
  margin: 8px 10px 10px;
  color: var(--muted);
  font-size: 12px;
}

@media (prefers-color-scheme: dark) {
  .browser-tree,
  .browser-files,
  .tabulator,
  .tabulator .tabulator-tableholder,
  .tabulator .tabulator-row,
  .tabulator .tabulator-row.tabulator-row-even,
  .tabulator .tabulator-row.tabulator-row-odd {
    background: #151815 !important;
    color: #f2f1eb !important;
  }

  .browser-pane-head,
  .tabulator .tabulator-header,
  .tabulator .tabulator-header .tabulator-col,
  .tabulator .tabulator-footer {
    background: #1b1f1b !important;
  }

  .browser-workspace-link:hover,
  .browser-folder-list a:hover,
  .browser-workspace.is-selected > .browser-workspace-link,
  .browser-folder-list li.is-selected a,
  .tabulator .tabulator-row:hover {
    background: #20231f !important;
  }

  .tabulator .tabulator-header-filter input {
    background: #20231f !important;
    color: #f2f1eb !important;
    border-color: #30342f !important;
  }
}

@media (max-width: 950px) {
  .library-browser {
    grid-template-columns: 1fr;
  }

  .browser-tree-list {
    max-height: none;
  }
}

/* tabulator-poc-4: grid daily-use tidy pass. */

.browser-grid-meta {
  margin: 8px 10px 7px;
  color: var(--muted);
  font-size: 12px;
}

.browser-grid-meta span {
  display: inline-block;
}

.tabulator .tabulator-header-filter input {
  height: 22px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
}

.tabulator .tabulator-cell {
  line-height: 1.25 !important;
}

.tabulator .grid-file-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.tabulator .grid-download-link {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 520 !important;
}

.tabulator .grid-download-link:hover {
  color: var(--accent-warm) !important;
}

.tabulator .tabulator-footer {
  min-height: 32px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

.tabulator .tabulator-paginator {
  gap: 4px;
}

.tabulator .tabulator-page {
  min-width: 26px !important;
  padding: 3px 6px !important;
}

.tabulator .tabulator-page-size {
  height: 25px !important;
  padding: 2px 6px !important;
}

@media (prefers-color-scheme: dark) {
  .browser-grid-meta {
    color: #a6aaa4;
  }
}

/* tabulator-poc-5: compact columns and reduce right-side waste. */

.tabulator .tabulator-cell {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.tabulator .tabulator-header .tabulator-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.tabulator .tabulator-header .tabulator-col-title {
  padding-left: 6px !important;
  padding-right: 4px !important;
}

.tabulator .tabulator-header-filter {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.tabulator .grid-download-link {
  font-size: 11px !important;
}

.browser-files {
  max-width: 100%;
}

.browser-tabulator {
  overflow: hidden;
}

/* tabulator-poc-6: reduce empty grid height and make fallback quieter. */

.browser-grid-fallback {
  margin: 8px 10px 10px;
  color: var(--muted);
  font-size: 12px;
}

.browser-grid-fallback summary {
  display: inline-block;
  cursor: pointer;
  color: var(--muted);
  font-weight: 520;
}

.browser-grid-fallback summary:hover {
  color: var(--accent-warm);
}

.browser-grid-fallback a {
  display: inline-block;
  margin-top: 6px;
  color: var(--muted);
}

.browser-grid-fallback a:hover {
  color: var(--accent-warm);
}

.browser-tabulator {
  min-height: 260px;
}

/* Let Tabulator height changes feel intentional. */
.tabulator {
  transition: height 120ms ease;
}

/* tabulator-poc-7: /admin/files grid page. */

.files-grid-page {
  max-width: 100%;
}

.files-grid-page .browser-tabulator {
  min-height: 260px;
}

/* tabulator: left-align action/download column. */

.tabulator .grid-download-link {
  display: inline-block;
  text-align: left !important;
}

.tabulator .tabulator-cell:has(.grid-download-link) {
  text-align: left !important;
}

/* tabulator-poc-8: shared file grid component.
   Page-specific grids now use .sfs-file-grid with data attributes. */

.sfs-file-grid {
  width: 100%;
}

/* file-grid-fix-right-margin: keep action column compact; let Name absorb spare width. */

.tabulator .tabulator-cell:has(.grid-download-link) {
  width: 76px !important;
  max-width: 76px !important;
  min-width: 76px !important;
  text-align: left !important;
}

.tabulator .grid-download-link {
  display: inline-block;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* file-grid-compact-workspace-folder: reduce metadata column visual weight. */

.tabulator .tabulator-cell[tabulator-field="workspace"],
.tabulator .tabulator-cell[tabulator-field="folder"] {
  max-width: 115px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabulator .tabulator-col[tabulator-field="workspace"],
.tabulator .tabulator-col[tabulator-field="folder"] {
  max-width: 115px;
}

/* file-grid-name-fill-width: full panel grid, spare width goes to Name. */

.tabulator .tabulator-table {
  min-width: 100% !important;
}

.tabulator .tabulator-tableholder {
  overflow-x: hidden;
}

.tabulator .tabulator-cell[tabulator-field="name"] {
  overflow: hidden;
}

/* tabulator-poc-9: folder detail page uses shared file grid. */

.files-grid-page + .fm-management {
  margin-top: 14px;
}

/* tabulator-poc-10: archived files grid restore action. */

.grid-inline-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.grid-restore-button {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 520;
}

.grid-restore-button:hover {
  color: var(--accent-warm);
  border-color: color-mix(in srgb, var(--accent-warm) 45%, var(--line));
}

/* tabulator-poc-11: workspace management grid. */

.sfs-workspace-grid {
  width: 100%;
}

.workspace-grid-page .tabulator .tabulator-cell[tabulator-field="folder_count"],
.workspace-grid-page .tabulator .tabulator-cell[tabulator-field="file_count"] {
  font-variant-numeric: tabular-nums;
}

.workspace-grid-page .tabulator .tabulator-cell[tabulator-field="description"] {
  color: var(--muted);
}

/* cfts-chrome-admin-theme: admin surfaces follow the explicit header theme. */

html[data-theme="light"] .browser-tree,
html[data-theme="light"] .browser-files,
html[data-theme="light"] .tabulator,
html[data-theme="light"] .tabulator .tabulator-table,
html[data-theme="light"] .tabulator .tabulator-tableholder,
html[data-theme="light"] .tabulator .tabulator-row,
html[data-theme="light"] .tabulator .tabulator-row.tabulator-row-even,
html[data-theme="light"] .tabulator .tabulator-row.tabulator-row-odd {
  background: var(--surface) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .browser-pane-head,
html[data-theme="light"] .tabulator .tabulator-header,
html[data-theme="light"] .tabulator .tabulator-header .tabulator-col,
html[data-theme="light"] .tabulator .tabulator-footer {
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

html[data-theme="light"] .browser-tree,
html[data-theme="light"] .browser-files,
html[data-theme="light"] .browser-pane-head,
html[data-theme="light"] .browser-workspace,
html[data-theme="light"] .tabulator .tabulator-header,
html[data-theme="light"] .tabulator .tabulator-header .tabulator-col,
html[data-theme="light"] .tabulator .tabulator-cell,
html[data-theme="light"] .tabulator .tabulator-footer,
html[data-theme="light"] .tabulator .tabulator-row,
html[data-theme="light"] .tabulator .tabulator-row.tabulator-row-even,
html[data-theme="light"] .tabulator .tabulator-row.tabulator-row-odd {
  border-color: var(--line) !important;
}

html[data-theme="light"] .tabulator .tabulator-header-filter input,
html[data-theme="light"] .tabulator .tabulator-page,
html[data-theme="light"] .tabulator .tabulator-page-size {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .browser-workspace-link,
html[data-theme="light"] .browser-workspace-link:visited,
html[data-theme="light"] .tabulator a {
  color: var(--text) !important;
}

html[data-theme="light"] .browser-workspace-link small,
html[data-theme="light"] .browser-folder-list a,
html[data-theme="light"] .browser-folder-list a:visited,
html[data-theme="light"] .browser-folder-list small,
html[data-theme="light"] .browser-pane-head > a,
html[data-theme="light"] .browser-grid-meta,
html[data-theme="light"] .browser-grid-fallback,
html[data-theme="light"] .tabulator .tabulator-header .tabulator-col-title,
html[data-theme="light"] .tabulator .grid-download-link,
html[data-theme="light"] .tabulator .tabulator-page,
html[data-theme="light"] .tabulator .tabulator-page-size {
  color: var(--muted) !important;
}

html[data-theme="light"] .browser-workspace-link:hover,
html[data-theme="light"] .browser-folder-list a:hover,
html[data-theme="light"] .browser-workspace.is-selected > .browser-workspace-link,
html[data-theme="light"] .browser-folder-list li.is-selected a,
html[data-theme="light"] .tabulator .tabulator-row:hover {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--brand-soft)) !important;
  color: var(--text) !important;
}

html[data-theme="light"] .grid-file-link,
html[data-theme="light"] .tabulator .grid-file-link {
  color: var(--brand-strong, var(--brand)) !important;
}

html[data-theme="dark"] .browser-tree,
html[data-theme="dark"] .browser-files,
html[data-theme="dark"] .tabulator,
html[data-theme="dark"] .tabulator .tabulator-table,
html[data-theme="dark"] .tabulator .tabulator-tableholder,
html[data-theme="dark"] .tabulator .tabulator-row,
html[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-even,
html[data-theme="dark"] .tabulator .tabulator-row.tabulator-row-odd {
  background: var(--surface) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .browser-pane-head,
html[data-theme="dark"] .tabulator .tabulator-header,
html[data-theme="dark"] .tabulator .tabulator-header .tabulator-col,
html[data-theme="dark"] .tabulator .tabulator-footer {
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

html[data-theme="dark"] .browser-workspace-link:hover,
html[data-theme="dark"] .browser-folder-list a:hover,
html[data-theme="dark"] .browser-workspace.is-selected > .browser-workspace-link,
html[data-theme="dark"] .browser-folder-list li.is-selected a,
html[data-theme="dark"] .tabulator .tabulator-row:hover {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--brand-soft)) !important;
}