/* ============================================================ Database — Items Library redesign (prototype: "Items Library.dc.html") Loads AFTER database.css. Retints the page to cobalt / Plus Jakarta Sans and styles the new `dbl-` shell (hero + tab rail + workspace). The old .database-layout / .database-sidebar / .database-hero rules in database.css go dormant because that markup no longer exists. ============================================================ */ body[data-page="database"] { /* Prototype palette */ --dbl-bg: #f8f9fb; --dbl-surface: #ffffff; --dbl-surface-soft: #fafbfc; --dbl-line: #eceef2; --dbl-line-strong: #e0e3e9; --dbl-ink: #17191f; --dbl-ink-soft: #4a4f59; --dbl-muted: #6c7280; --dbl-faint: #a8adb8; --dbl-accent: #4c6ef5; --dbl-accent-hover: #4260e6; --dbl-accent-ink: #3a55cc; --dbl-accent-deep: #2f3fa8; --dbl-accent-soft: #eef2ff; --dbl-accent-line: #dde4ff; --dbl-green: #1f9d6b; --dbl-red: #c23b38; --dbl-red-soft: #fdecec; --dbl-red-line: #f6d4d3; --dbl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* Row metrics are tokens so the density toggle can flip all of them at once. Unlike Estimating — whose cells have no vertical padding, so height alone is enough — these cells pad 9px, which would fight a shorter row height. */ --dbl-row-h: 44px; --dbl-row-pad-y: 9px; --dbl-row-pad-x: 12px; --dbl-row-fs: 14px; --dbl-head-h: 34px; --dbl-head-pad-y: 8px; --dbl-star-size: 30px; /* Retint the shared --dbx-* tokens so the editors/modals in database.css follow the same cobalt language. */ --dbx-ink: #17191f; --dbx-ink-soft: #4a4f59; --dbx-muted: #6c7280; --dbx-subtle: #a8adb8; --dbx-line: #eceef2; --dbx-line-strong: #e0e3e9; --dbx-bg: #f8f9fb; --dbx-surface: #ffffff; --dbx-surface-soft: #fafbfc; --dbx-hover: #f5f6f9; --dbx-navy: #4c6ef5; --dbx-navy-hover: #4260e6; --dbx-navy-soft: #eef2ff; --dbx-green: #1f9d6b; --dbx-green-soft: #ecf7f2; --dbx-red: #c23b38; --dbx-red-soft: #fdecec; --dbx-shadow: 0 1px 2px rgba(17, 20, 30, 0.04); --dbx-shadow-pop: 0 18px 44px rgba(17, 20, 30, 0.16); background: var(--dbl-bg); color: var(--dbl-ink); font-family: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif; } /* Compact density. Two selectors, deliberately. The `-boot` one is stamped on by the inline script in database.html so a compact grid is compact on the very first paint; the plain one is set on by initDatabaseFeature and owns the value from then on. Both must be listed — the boot attribute is never removed, so a switch back to comfortable has to out-specify it, which the body-level attribute does not do on its own. Hence the :not() below. */ html[data-dbl-density-boot="compact"] body[data-page="database"]:not([data-dbl-density="comfortable"]), body[data-page="database"][data-dbl-density="compact"] { --dbl-row-h: 32px; --dbl-row-pad-y: 3px; --dbl-row-pad-x: 10px; --dbl-row-fs: 13px; --dbl-head-h: 28px; --dbl-head-pad-y: 4px; --dbl-star-size: 24px; } body[data-page="database"] ::selection { background: rgba(76, 110, 245, 0.18); } body[data-page="database"] :focus-visible { outline: 2px solid var(--dbl-accent); outline-offset: 2px; } body[data-page="database"] input::placeholder { color: var(--dbl-faint); } /* ---------- Shell ---------- */ body[data-page="database"] .dbl-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--dbl-line); border-radius: 14px; background: var(--dbl-surface); box-shadow: 0 1px 2px rgba(17, 20, 30, 0.04); } /* ---------- Hero ---------- */ body[data-page="database"] .dbl-head { padding: 18px 24px 0; border-bottom: 1px solid var(--dbl-line); background: var(--dbl-surface); } body[data-page="database"] .dbl-head-main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; row-gap: 14px; } body[data-page="database"] .dbl-head-copy { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; margin-right: auto; } body[data-page="database"] .dbl-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dbl-muted); } body[data-page="database"] .dbl-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body[data-page="database"] .dbl-title-row h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--dbl-ink); } body[data-page="database"] .dbl-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: #f1f2f6; color: var(--dbl-muted); font-size: 11px; font-weight: 600; white-space: nowrap; } body[data-page="database"] .dbl-note { margin: 0; font-size: 13px; color: var(--dbl-muted); text-wrap: pretty; } body[data-page="database"] .dbl-tiles { display: flex; align-items: stretch; gap: 10px; flex: none; } body[data-page="database"] .dbl-tile { min-width: 108px; padding: 10px 14px; border: 1px solid var(--dbl-line); border-radius: 11px; background: var(--dbl-bg); } body[data-page="database"] .dbl-tile.is-accent { border-color: var(--dbl-accent-line); background: var(--dbl-accent-soft); } body[data-page="database"] .dbl-tile-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dbl-muted); white-space: nowrap; } body[data-page="database"] .dbl-tile.is-accent .dbl-tile-label { color: var(--dbl-accent-ink); } body[data-page="database"] .dbl-tile-value { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--dbl-ink); } body[data-page="database"] .dbl-tile.is-accent .dbl-tile-value { color: var(--dbl-accent-deep); } /* ---------- Tab rail (replaces the old collection sidebar) ---------- */ body[data-page="database"] .dbl-tabs { display: flex; align-items: center; gap: 22px; margin-top: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } body[data-page="database"] .dbl-tabs::-webkit-scrollbar { height: 4px; } body[data-page="database"] .dbl-tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--dbl-line-strong); } body[data-page="database"] .dbl-tabs .dbl-tab-sep { flex: none; width: 1px; height: 16px; background: var(--dbl-line); } /* Overrides the old sidebar `.db-nav-btn` rules in database.css, including the `:not(.db-sidebar-expanded)` collapsed-rail variant that now matches because the body no longer carries that class. */ body[data-page="database"] .dbl-tabs .db-nav-btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; flex: none; height: 38px; min-height: 0; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: var(--dbl-muted); white-space: nowrap; text-align: left; cursor: pointer; transform: none; transition: color 140ms ease; } body[data-page="database"] .dbl-tabs .db-nav-btn:hover, body[data-page="database"] .dbl-tabs .db-nav-btn.active { box-shadow: none; transform: none; } body[data-page="database"] .dbl-tabs .db-nav-btn::before, body[data-page="database"] .dbl-tabs .db-nav-btn::after { content: none; } body[data-page="database"] .dbl-tabs .db-nav-btn:hover { color: var(--dbl-ink); background: transparent; } body[data-page="database"] .dbl-tabs .db-nav-btn.active { color: var(--dbl-ink); background: transparent; } /* Always absolute so it never contributes to the button's flex gap — only its colour changes between active and inactive tabs. */ body[data-page="database"] .dbl-tabs .dbl-tab-underline { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: transparent; pointer-events: none; } body[data-page="database"] .dbl-tabs .db-nav-btn.active .dbl-tab-underline { background: var(--dbl-accent); } body[data-page="database"] .dbl-tabs .dbl-tab-count { font-size: 12px; font-weight: 600; color: var(--dbl-faint); font-variant-numeric: tabular-nums; } body[data-page="database"] .dbl-tabs .db-nav-btn.active .dbl-tab-count { color: var(--dbl-muted); } /* Icons came from the old sidebar; the rail is text-only. */ body[data-page="database"] .dbl-tabs .db-nav-btn .db-icon { display: none; } /* ---------- Body / workspace card ---------- */ body[data-page="database"] .dbl-body { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; padding: 20px 24px 24px; background: var(--dbl-bg); } /* Flex column rather than fixed grid tracks: the bulk bar comes and goes, and only the table body should absorb the leftover height. */ body[data-page="database"] .dbl-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--dbl-line); border-radius: 14px; background: var(--dbl-surface); box-shadow: 0 1px 2px rgba(17, 20, 30, 0.04); } body[data-page="database"] .dbl-card > .dbl-toolbar, body[data-page="database"] .dbl-card > .dbl-bulkbar, body[data-page="database"] .dbl-card > .dbl-foot { flex: none; } body[data-page="database"] .dbl-card > .dbl-table-wrap { flex: 1 1 auto; min-height: 0; } body[data-page="database"] .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body[data-page="database"] .dbl-card[hidden] { display: none !important; } /* ---------- Toolbar ---------- */ body[data-page="database"] .dbl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; row-gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--dbl-line); background: var(--dbl-surface); } /* Row density toggle. Mirrors the Estimating page's .ev2-seg so the same control reads identically on both pages. */ body[data-page="database"] .dbl-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--dbx-hover); border-radius: 999px; flex: none; } body[data-page="database"] .dbl-seg button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--dbl-muted); padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background 140ms ease, color 140ms ease; } body[data-page="database"] .dbl-seg button:hover { color: var(--dbl-ink-soft); } body[data-page="database"] .dbl-seg button.is-on { background: var(--dbl-surface); color: var(--dbl-ink); box-shadow: var(--dbx-shadow); } body[data-page="database"] .dbl-toolbar-context { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; } body[data-page="database"] .dbl-live { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--dbl-ink); } body[data-page="database"] .dbl-live i { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--dbl-green); box-shadow: 0 0 0 3px rgba(31, 157, 107, 0.15); } body[data-page="database"] .dbl-toolbar-context small { font-size: 12px; color: var(--dbl-muted); } body[data-page="database"] .dbl-search { position: relative; flex: 0 1 240px; min-width: 170px; } body[data-page="database"] .dbl-search input { width: 100%; height: 38px; padding: 8px 12px 8px 32px; border: 1px solid var(--dbl-line-strong); border-radius: 9px; background: var(--dbl-surface); font-family: inherit; font-size: 14px; color: var(--dbl-ink); } body[data-page="database"] .dbl-search input:focus { border-color: var(--dbl-accent); box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.16); outline: none; } body[data-page="database"] .dbl-search input::-webkit-search-cancel-button { cursor: pointer; } body[data-page="database"] .dbl-search-key { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--dbl-faint); pointer-events: none; } body[data-page="database"] .dbl-filter { display: flex; align-items: center; gap: 8px; flex: none; margin: 0; padding: 0; border: 0; background: transparent; } body[data-page="database"] .dbl-filter[hidden] { display: none !important; } body[data-page="database"] .dbl-filter > label { font-size: 12px; font-weight: 500; color: var(--dbl-muted); white-space: nowrap; } body[data-page="database"] .dbl-filter select { appearance: none; height: 38px; padding: 0 26px 0 12px; border: 1px solid var(--dbl-line-strong); border-radius: 9px; background: var(--dbl-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236c7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 7px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--dbl-ink); cursor: pointer; } body[data-page="database"] .dbl-filter select:focus-visible { border-color: var(--dbl-accent); } /* The group-by select is upgraded to a custom listbox by init.js. */ body[data-page="database"] .database-custom-listbox-native { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body[data-page="database"] .database-custom-listbox-host { position: relative; display: inline-flex; } body[data-page="database"] .database-custom-listbox-trigger { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--dbl-line-strong); border-radius: 9px; background: var(--dbl-surface); font-family: inherit; font-size: 13px; font-weight: 500; color: var(--dbl-ink); cursor: pointer; white-space: nowrap; } body[data-page="database"] .database-custom-listbox-host.is-open .database-custom-listbox-trigger, body[data-page="database"] .database-custom-listbox-trigger:hover { border-color: var(--dbl-accent); } body[data-page="database"] .database-custom-listbox-chevron { display: inline-flex; color: var(--dbl-muted); } body[data-page="database"] .database-custom-listbox-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: flex; flex-direction: column; min-width: 100%; padding: 6px; border: 1px solid var(--dbl-line); border-radius: 11px; background: var(--dbl-surface); box-shadow: 0 18px 44px rgba(17, 20, 30, 0.16); } body[data-page="database"] .database-custom-listbox-option { padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--dbl-ink); text-align: left; white-space: nowrap; cursor: pointer; } body[data-page="database"] .database-custom-listbox-option.is-focused { background: #f5f6f9; } body[data-page="database"] .database-custom-listbox-option.is-selected { background: var(--dbl-accent-soft); color: var(--dbl-accent-deep); } body[data-page="database"] .dbl-actions { display: flex; align-items: center; gap: 8px; flex: none; } body[data-page="database"] .dbl-actions .assembly-open-btn { height: 38px; margin: 0; padding: 0 18px; border: 1px solid var(--dbl-accent); border-radius: 10px; background: var(--dbl-accent); color: #ffffff; font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(76, 110, 245, 0.35); transition: background 140ms ease; } body[data-page="database"] .dbl-actions .assembly-open-btn:hover { background: var(--dbl-accent-hover); border-color: var(--dbl-accent-hover); } body[data-page="database"] .dbl-actions .assembly-open-btn[hidden] { display: none !important; } /* ---------- Bulk selection bar ---------- */ body[data-page="database"] .dbl-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--dbl-accent-line); background: var(--dbl-accent-soft); } body[data-page="database"] .dbl-bulkbar[hidden] { display: none !important; } body[data-page="database"] .dbl-bulk-label { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--dbl-accent-deep); } body[data-page="database"] .dbl-bulkbar button { height: 30px; padding: 0 12px; border: 1px solid var(--dbl-accent-line); border-radius: 9px; background: var(--dbl-surface); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--dbl-accent-ink); cursor: pointer; } body[data-page="database"] .dbl-bulkbar button:hover { background: #f5f6f9; } body[data-page="database"] .dbl-bulkbar button[hidden] { display: none !important; } body[data-page="database"] .dbl-bulkbar button.is-danger { border-color: var(--dbl-red-line); color: var(--dbl-red); } body[data-page="database"] .dbl-bulkbar button.is-danger:hover { background: var(--dbl-red-soft); } body[data-page="database"] .dbl-bulkbar button.is-ghost { padding: 0 10px; border-color: transparent; background: transparent; } /* ---------- Table ---------- */ body[data-page="database"] .dbl-table-wrap { min-height: 0; margin: 0; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--dbl-surface); box-shadow: none; } body[data-page="database"] .dbl-table-wrap[hidden] { display: none !important; } body[data-page="database"] .dbl-table-wrap .data-table { width: 100%; min-width: 840px; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--dbl-ink); } /* NOTE ON !important IN THIS SECTION css/styles.css used to restyle `.data-table` here with !important in the old teal-blue theme, which forced every contested property below to carry the flag too. Those `.data-table` selectors were removed from styles.css (the modal tables that shared a rule with them kept theirs), so the flags are no longer needed for plain table properties and have been dropped. Flags that REMAIN are load-bearing against rules that still exist — chiefly `.assembly-open-btn`, which styles.css still paints with `background: var(--dbx-navy) !important`. Verify before removing one. */ body[data-page="database"] .dbl-table-wrap .data-table thead th { position: sticky; top: 0; z-index: 3; height: var(--dbl-head-h); line-height: 1.2; padding: var(--dbl-head-pad-y) var(--dbl-row-pad-x); border: 0; border-bottom: 1px solid var(--dbl-line); background: var(--dbl-bg); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dbl-muted); text-align: left; white-space: nowrap; } body[data-page="database"] .dbl-table-wrap .data-table tbody td { height: var(--dbl-row-h); min-height: 0; padding: var(--dbl-row-pad-y) var(--dbl-row-pad-x); border: 0; border-bottom: 0; border-top: 1px solid #f2f3f6; background: transparent; color: var(--dbl-ink); font-size: var(--dbl-row-fs); line-height: 1.35; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-page="database"] .dbl-table-wrap .data-table tbody tr.db-data-row:hover td { background: var(--dbl-surface-soft); } body[data-page="database"] .dbl-table-wrap .data-table tbody tr.db-data-row.is-selected td { background: var(--dbl-accent-soft); } /* styles.css paints a 4px legacy-accent bar on the first cell of a selected row; the prototype uses a flat tint across the whole row. */ body[data-page="database"] .dbl-table-wrap .data-table tbody tr.db-data-row.is-selected td:first-child { box-shadow: none; } /* Column roles — set by render.js via data-cell-role */ body[data-page="database"] .dbl-table-wrap .data-table td[data-cell-role="name"] { font-weight: 500; color: var(--dbl-ink); max-width: 340px; } body[data-page="database"] .dbl-table-wrap .data-table td[data-cell-role="mono"] { font-family: var(--dbl-mono) !important; font-size: 12.5px; color: var(--dbl-ink-soft); } body[data-page="database"] .dbl-table-wrap .data-table td[data-cell-role="num"], body[data-page="database"] .dbl-table-wrap .data-table th[data-cell-role="num"] { text-align: right; font-variant-numeric: tabular-nums; } body[data-page="database"] .dbl-table-wrap .data-table td[data-cell-role="money"], body[data-page="database"] .dbl-table-wrap .data-table th[data-cell-role="money"] { text-align: right; font-variant-numeric: tabular-nums; } body[data-page="database"] .dbl-table-wrap .data-table td[data-cell-role="money-strong"], body[data-page="database"] .dbl-table-wrap .data-table th[data-cell-role="money-strong"] { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } body[data-page="database"] .dbl-table-wrap .data-table td[data-cell-role="unit"] { font-size: 13px; font-weight: 500; color: var(--dbl-ink-soft); } body[data-page="database"] .dbl-table-wrap .data-table td[data-cell-role="money-strong"] { color: var(--dbl-ink); } body[data-page="database"] .dbl-table-wrap .data-table td.db-cell-empty { color: var(--dbl-faint); } /* Selection + star gutters. These cells hold a control, not text, so the truncation set on `tbody td` above must be switched off here — otherwise the browser paints a stray ellipsis next to the checkbox/star and clips their focus rings. The width triplet is declared in full because css/styles.css pins these cells to max-width:42px at a lower specificity. */ body[data-page="database"] .dbl-table-wrap .data-table th.database-selection-col, body[data-page="database"] .dbl-table-wrap .data-table td.database-selection-col { width: 42px; min-width: 42px; max-width: 42px; padding-left: 14px !important; padding-right: 0 !important; overflow: visible; text-overflow: clip; text-align: left; } body[data-page="database"] .dbl-table-wrap .data-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--dbl-accent); cursor: pointer; } body[data-page="database"] .dbl-table-wrap .data-table th.dbl-star-col, body[data-page="database"] .dbl-table-wrap .data-table td.dbl-star-col { width: 48px; min-width: 48px; max-width: 48px; padding-left: 0 !important; padding-right: 10px !important; overflow: visible; text-overflow: clip; text-align: center; } body[data-page="database"] .dbl-star-btn { display: grid; place-items: center; width: var(--dbl-star-size); height: var(--dbl-star-size); margin: 0 auto; border: 0; border-radius: 8px; background: transparent; color: #cbd0dc; font-size: 14px; line-height: 1; cursor: pointer; transition: color 140ms ease, background 140ms ease; } body[data-page="database"] .dbl-star-btn:hover { background: #f1f2f6; } body[data-page="database"] .dbl-star-btn.is-on { color: var(--dbl-accent); } /* Grid interaction states from gridInteractions.js. styles.css paints these in the legacy teal (--db-teal) with !important. */ body[data-page="database"] .dbl-table-wrap .data-table td.db-cell-active { background: rgba(76, 110, 245, 0.1); box-shadow: inset 0 0 0 2px var(--dbl-accent); } body[data-page="database"] .dbl-table-wrap .data-table td.db-cell-drag-selected { background: rgba(76, 110, 245, 0.1); } body[data-page="database"] .dbl-table-wrap .data-table td.db-cell-drag-edge-top { box-shadow: inset 0 2px 0 0 var(--dbl-accent); } body[data-page="database"] .dbl-table-wrap .data-table td.db-cell-drag-edge-bottom { box-shadow: inset 0 -2px 0 0 var(--dbl-accent); } body[data-page="database"] .dbl-table-wrap .data-table td.db-cell-drag-edge-left { box-shadow: inset 2px 0 0 0 var(--dbl-accent); } body[data-page="database"] .dbl-table-wrap .data-table td.db-cell-drag-edge-right { box-shadow: inset -2px 0 0 0 var(--dbl-accent); } /* Group bands */ body[data-page="database"] .dbl-table-wrap .data-table tr.group-row td { height: auto; padding: 10px 14px 2px; border-top: 0; border-bottom: 0; background: transparent; overflow: visible; } body[data-page="database"] .dbl-group-band { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: #f1f2f6; font-family: inherit; cursor: pointer; text-align: left; } body[data-page="database"] .dbl-group-band:hover { background: #e9ebf1; } body[data-page="database"] .dbl-group-caret { flex: none; font-size: 9px; color: var(--dbl-muted); transition: transform 140ms ease; } body[data-page="database"] .dbl-group-band[aria-expanded="true"] .dbl-group-caret { transform: rotate(90deg); } body[data-page="database"] .dbl-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dbl-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-page="database"] .dbl-group-count { font-size: 11px; font-weight: 600; color: var(--dbl-muted); white-space: nowrap; } body[data-page="database"] .dbl-group-subtotal { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--dbl-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Totals row */ body[data-page="database"] .dbl-table-wrap .data-table tfoot td { position: sticky; bottom: 0; z-index: 2; height: auto; padding: 11px 12px; border: 0; border-bottom: 0; border-top: 1px solid var(--dbl-line); background: var(--dbl-bg); white-space: nowrap; } body[data-page="database"] .dbl-totals-label { font-size: 13px; font-weight: 600; color: var(--dbl-ink-soft); } body[data-page="database"] .dbl-totals-note { font-size: 12px; font-weight: 400; color: var(--dbl-muted); } /* These two are classes on the itself. They used to collide with a `.data-table td { font-size/color !important }` rule in styles.css; that selector has been removed, so plain specificity settles it now. */ body[data-page="database"] .dbl-table-wrap .data-table tfoot td.dbl-totals-caption { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dbl-muted); text-align: right; } body[data-page="database"] .dbl-table-wrap .data-table tfoot td.dbl-totals-value { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--dbl-ink); font-variant-numeric: tabular-nums; text-align: right; } /* Empty state */ body[data-page="database"] .dbl-table-wrap .data-table tr.dbl-empty-row td { height: auto; padding: 0; border: 0; background: transparent; white-space: normal; overflow: visible; } body[data-page="database"] .dbl-empty { margin: 14px; padding: 44px 24px; border: 1px dashed #cbd0dc; border-radius: 12px; background: var(--dbl-surface-soft); text-align: center; font-size: 13px; color: var(--dbl-muted); } body[data-page="database"] .dbl-empty button { margin-left: 6px; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--dbl-accent); cursor: pointer; text-decoration: underline; } /* Column header menu (from render.js) */ body[data-page="database"] .dbl-table-wrap .data-table th.has-column-menu { position: sticky; padding-right: 26px; } body[data-page="database"] .column-header-menu-trigger { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 6px; background: transparent; color: var(--dbl-faint); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 140ms ease; } body[data-page="database"] .data-table th:hover .column-header-menu-trigger { opacity: 1; } body[data-page="database"] .column-header-menu-panel { z-index: 60; min-width: 200px; padding: 10px; border: 1px solid var(--dbl-line); border-radius: 11px; background: var(--dbl-surface); box-shadow: 0 18px 44px rgba(17, 20, 30, 0.16); } /* ---------- Footer ---------- */ body[data-page="database"] .dbl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--dbl-line); background: var(--dbl-surface); } body[data-page="database"] .dbl-range { margin-right: auto; font-size: 13px; color: var(--dbl-muted); } body[data-page="database"] .dbl-keys { font-size: 12px; color: var(--dbl-muted); } /* The `.lists-workspace` block that used to sit here is gone with its markup — Lists now renders into #database-table like every other collection. */ /* ---------- Lists: toolbar chrome ---------- */ /* Secondary toolbar actions (Add row / Edit columns) — same geometry as the primary "New ..." button, quieter fill so the primary action still leads. !important is required, not stylistic: database.css (~L654) paints every .assembly-open-btn with `background: var(--dbx-navy) !important`, which beats any non-important rule no matter how specific. See the note above the table section — same trap. */ body[data-page="database"] .dbl-actions .assembly-open-btn.is-secondary { border-color: var(--dbl-line-strong) !important; background: var(--dbl-surface) !important; color: var(--dbl-ink-soft) !important; box-shadow: var(--dbx-shadow) !important; } body[data-page="database"] .dbl-actions .assembly-open-btn.is-secondary:hover { border-color: var(--dbl-line-strong) !important; background: var(--dbx-hover) !important; color: var(--dbl-ink) !important; } body[data-page="database"] .dbl-actions .assembly-open-btn.is-secondary:disabled { opacity: 0.5; cursor: not-allowed; background: var(--dbl-surface) !important; color: var(--dbl-faint) !important; } /* Inline note under the grid (e.g. "Create a list first"). */ body[data-page="database"] .dbl-inline-feedback { margin: 0; padding: 8px 16px; border-top: 1px solid var(--dbl-line); background: var(--dbl-surface); color: var(--dbl-muted); font-size: 12.5px; } body[data-page="database"] .dbl-inline-feedback[hidden] { display: none !important; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { body[data-page="database"] .dbl-tiles { order: 3; width: 100%; overflow-x: auto; } } @media (max-width: 900px) { body[data-page="database"] .dbl-head { padding: 16px 16px 0; } body[data-page="database"] .dbl-body { padding: 14px 16px 16px; } body[data-page="database"] .dbl-title-row h1 { font-size: 21px; } body[data-page="database"] .dbl-toolbar-context { flex-basis: 100%; } body[data-page="database"] .dbl-search { flex: 1 1 100%; } } @media (max-width: 640px) { body[data-page="database"] .dbl-shell { border-radius: 12px; } body[data-page="database"] .dbl-tabs { gap: 16px; } body[data-page="database"] .dbl-tile { min-width: 92px; padding: 8px 12px; } body[data-page="database"] .dbl-tile-value { font-size: 18px; } }