. */
.ks-table-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--ks-space-2); text-align: center;
padding: var(--ks-space-8) var(--ks-space-4);
color: var(--ks-text-muted);
}
.ks-table-empty-icon { color: var(--ks-text-subtle); }
.ks-table-empty-title { font-weight: var(--ks-weight-semibold); color: var(--ks-text-default); }
.ks-table-empty-message { font-size: var(--ks-text-sm); color: var(--ks-text-muted); max-width: 40ch; }
/* Row form: the | is transparent so the flex block centers across the width. */
.ks-table td.ks-table-empty-cell { padding: 0; background: none; }
/* Responsive stack — below a narrow breakpoint each row becomes a labeled card.
Consumers add data-label="Column name" to each | ; the header row hides and
each cell shows its label. Opt-in per table via .ks-table--stack. */
@media (max-width: 640px) {
.ks-table--stack thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ks-table--stack, .ks-table--stack tbody, .ks-table--stack tr, .ks-table--stack td { display: block; width: auto; }
.ks-table--stack tbody tr {
margin-bottom: var(--ks-space-3);
padding: var(--ks-space-1);
border-radius: var(--ks-radius-md);
background: var(--ks-surface-default);
box-shadow: var(--ks-shadow-sm), var(--ks-light-top);
}
.ks-table--stack tbody tr:nth-child(even) { background: var(--ks-surface-default); }
.ks-table--stack td {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--ks-space-4);
padding: var(--ks-space-2) var(--ks-space-3);
text-align: right;
}
.ks-table--stack td + td { box-shadow: inset 0 1px 0 rgb(var(--ks-shadow-color) / 0.06); }
.ks-table--stack td[data-label]::before {
content: attr(data-label);
font-weight: var(--ks-weight-semibold);
color: var(--ks-text-muted);
text-align: left; margin-right: auto;
}
/* Alignment helpers are neutralized in stack mode (label-left, value-right). */
.ks-table--stack td.ks-table-num,
.ks-table--stack td.ks-table-cell--right,
.ks-table--stack td.ks-table-cell--center,
.ks-table--stack td.ks-table-actions { text-align: right; }
/* A sticky column can't freeze in a single-column card; drop it back to flow. */
.ks-table--stack.ks-table--sticky-col td:first-child,
.ks-table--stack.ks-table--sticky-col th:first-child { position: static; box-shadow: none; }
}
/* ---- Navbar ---- */
.ks-navbar {
display: flex; align-items: center; gap: var(--ks-gap-md);
height: var(--ks-topbar-height); padding: 0 var(--ks-pad-md);
background: var(--ks-surface-default);
box-shadow: var(--ks-shadow-sm), var(--ks-light-top);
}
.ks-navbar-brand { font-weight: var(--ks-weight-bold); font-size: var(--ks-text-lg); }
.ks-navbar-nav { display: flex; gap: var(--ks-space-2); align-items: center; }
.ks-navbar-link { padding: var(--ks-space-2) var(--ks-space-3); border-radius: var(--ks-radius-md); color: var(--ks-text-muted); text-decoration: none; transition: var(--ks-transition-colors), box-shadow var(--ks-duration-fast) var(--ks-ease-default); }
.ks-navbar-link:hover { color: var(--ks-text-default); background: rgb(var(--ks-shadow-color) / 0.05); }
.ks-navbar-link.is-active { color: var(--ks-text-default); background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen); box-shadow: var(--ks-shadow-xs), var(--ks-light-top); }
/* ---- Tabs ---- (a recessed track; the active tab rises out of it) */
.ks-tabs-list {
position: relative;
display: inline-flex; gap: var(--ks-space-1);
padding: var(--ks-space-1); border-radius: var(--ks-radius-lg);
background: var(--ks-surface-subtle); box-shadow: var(--ks-well);
}
.ks-tabs-tab {
position: relative; z-index: 1;
appearance: none; background: transparent; border: 0; cursor: pointer;
padding: var(--ks-space-2) var(--ks-space-4); font: inherit; font-size: var(--ks-text-sm);
color: var(--ks-text-muted); border-radius: var(--ks-radius-md);
transition: var(--ks-transition-colors), box-shadow var(--ks-duration-fast) var(--ks-ease-default), transform var(--ks-duration-fast) var(--ks-ease-spring);
}
.ks-tabs-tab:hover { color: var(--ks-text-default); }
.ks-tabs-tab.is-active {
color: var(--ks-text-default); font-weight: var(--ks-weight-medium);
background-color: var(--ks-surface-default);
box-shadow: var(--ks-edge);
}
.ks-tabs-panel { padding: var(--ks-pad-md) 0; }
/* Animated sliding indicator — enabled only once the JS `tabs` behavior sets
data-ks-indicator + measures --ks-tab-x/--ks-tab-w on the list. The raised
steel key then rides on the ::before instead of the active tab, so it glides
between tabs. Without JS the .is-active tab keeps its own static key above. */
.ks-tabs-list[data-ks-indicator]::before {
content: ""; position: absolute; z-index: 0; top: var(--ks-space-1); bottom: var(--ks-space-1);
left: 0; width: var(--ks-tab-w, 0); transform: translateX(var(--ks-tab-x, 0));
background-color: var(--ks-surface-default); box-shadow: var(--ks-edge);
border-radius: var(--ks-radius-md);
}
/* Animate only after the first measurement (JS adds -ready next frame), so the
indicator appears in place on load instead of sliding in from the left edge. */
.ks-tabs-list[data-ks-indicator-ready]::before {
transition: transform var(--ks-duration-normal) var(--ks-ease-spring),
width var(--ks-duration-normal) var(--ks-ease-spring);
}
.ks-tabs-list[data-ks-indicator] .ks-tabs-tab.is-active {
background-color: transparent; box-shadow: none;
}
/* Soft cross-fade for the tab panel swap driven by document.startViewTransition. */
::view-transition-old(ks-tabpanel),
::view-transition-new(ks-tabpanel) {
animation-duration: var(--ks-duration-normal);
animation-timing-function: var(--ks-ease-default);
}
/* ---- Breadcrumb ---- */
.ks-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-2); font-size: var(--ks-text-sm); list-style: none; padding: 0; margin: 0; }
.ks-breadcrumb li { display: flex; align-items: center; gap: var(--ks-space-2); color: var(--ks-text-muted); }
.ks-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--ks-text-subtle); }
.ks-breadcrumb a { color: var(--ks-text-link); text-decoration: none; }
/* ---- Pagination ---- */
.ks-pagination { display: inline-flex; gap: var(--ks-space-1\.5); list-style: none; padding: 0; margin: 0; }
.ks-pagination a, .ks-pagination span, .ks-pagination button {
display: inline-flex; align-items: center; justify-content: center;
min-width: var(--ks-control-height-sm); height: var(--ks-control-height-sm); padding: 0 var(--ks-space-2);
border-radius: var(--ks-radius-md);
background-color: var(--ks-surface-default);
box-shadow: var(--ks-edge);
color: var(--ks-text-default); text-decoration: none; font-size: var(--ks-text-sm);
transition: background-color var(--ks-duration-fast) var(--ks-ease-default), color var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-pagination a:hover, .ks-pagination button:not(:disabled):hover { background-color: var(--ks-surface-subtle); }
.ks-pagination .is-active span, .ks-pagination a.is-active, .ks-pagination button.is-active {
color: #fff; background-color: var(--ks-blue-700);
box-shadow: none;
}
/* Generated controls are real |