@mshuja288/aksuicore 0.2.0

package/dist/aksui.css

@@ -0,0 +1,1633 @@
+/* src\theme\aksui.css */
+:root {
+  /* Canonical aksui tokens */
+  --aks-brand: #1e2735;
+  --aks-accent: #e67e22;
+  --aks-ink: #1e2735;
+  --aks-muted: #667085;
+  --aks-line: #e6e4df;
+  --aks-field: #f6f5f3;
+  --aks-card: #ffffff;
+  --aks-danger: #b42318;
+  --aks-danger-bg: #fff1f0;
+  --aks-ok: #067647;
+  --aks-ok-bg: #ecfdf3;
+  --aks-radius: 8px;
+  --aks-row-height: 34px;
+  --aks-table-header-height: 36px;
+  --aks-side-rail-collapsed: 52px;
+  --aks-side-rail-expanded: 280px;
+  --aks-preview-panel-width: 300px;
+
+  /*
+   * Compatibility aliases for apps migrating from aksconfigurator_ui tokens.
+   * Prefer --aks-* in new code.
+   */
+  --brand: var(--aks-brand);
+  --accent: var(--aks-accent);
+  --ink: var(--aks-ink);
+  --muted: var(--aks-muted);
+  --line: var(--aks-line);
+  --field: var(--aks-field);
+  --card: var(--aks-card);
+  --danger: var(--aks-danger);
+  --danger-bg: var(--aks-danger-bg);
+  --ok: var(--aks-ok);
+  --ok-bg: var(--aks-ok-bg);
+  --radius: var(--aks-radius);
+  --row-height: var(--aks-row-height);
+  --table-header-height: var(--aks-table-header-height);
+  --side-rail-collapsed: var(--aks-side-rail-collapsed);
+  --side-rail-expanded: var(--aks-side-rail-expanded);
+  --preview-panel-width: var(--aks-preview-panel-width);
+
+  color-scheme: light;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+}
+
+body {
+  min-height: 100dvh;
+  color: var(--aks-ink);
+  background: #f3f2ef;
+}
+
+.aksui-root {
+  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+  color: var(--aks-ink);
+  background: #f3f2ef;
+}
+
+/* src\theme\primitives.css */
+/* Base controls */
+button,
+.aks-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--aks-radius);
+  padding: 12px 16px;
+  background: var(--aks-brand);
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 10px 18px rgba(30, 39, 53, 0.18);
+  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
+}
+
+button:hover,
+.aks-button:hover {
+  transform: translateY(-1px);
+  background: #2a3546;
+  box-shadow: 0 14px 22px rgba(30, 39, 53, 0.22);
+}
+
+/* Keep utility / chrome buttons from picking up the primary filled look */
+button.ghost:hover,
+button.app-select-trigger:hover,
+button.date-field-trigger:hover,
+button.avatar-button:hover,
+button.sort-header:hover,
+button.row-action:hover,
+button.date-picker-day:hover,
+button.side-rail-toggle:hover,
+button.side-rail-icon:hover,
+button.filter-clear:hover,
+button.snackbar-close:hover {
+  transform: none;
+}
+
+button:active,
+.aks-button:active {
+  transform: translateY(0);
+}
+
+button:disabled,
+.aks-button:disabled {
+  cursor: default;
+  transform: none;
+  opacity: 0.55;
+}
+
+button.secondary,
+.aks-button.secondary {
+  background: var(--aks-accent);
+  color: #fff;
+  box-shadow: 0 10px 18px rgba(230, 126, 34, 0.24);
+}
+
+button.secondary:hover,
+.aks-button.secondary:hover {
+  background: #d06d16;
+}
+
+button.ghost,
+.aks-button.ghost {
+  background: transparent;
+  color: var(--aks-muted);
+  box-shadow: none;
+}
+
+button.ghost:hover,
+.aks-button.ghost:hover {
+  background: #f4f2ef;
+  color: var(--aks-brand);
+}
+
+/* Solid danger only for explicit Button variant — not row-action "danger" text links */
+button.aks-button.danger {
+  background: var(--aks-danger);
+  color: #fff;
+}
+
+button.aks-button.danger:hover {
+  background: #912018;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  color: var(--aks-muted);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  min-height: 44px;
+  padding: 12px 14px;
+  border: 1px solid transparent;
+  border-radius: var(--aks-radius);
+  background: var(--aks-field);
+  color: var(--aks-ink);
+  font: inherit;
+}
+
+input:hover,
+textarea:hover,
+select:hover {
+  background: #fff;
+  border-color: #ddd9d3;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  background: #fff;
+  border-color: var(--aks-accent);
+  box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.18);
+}
+
+input[readonly],
+select:disabled {
+  color: var(--aks-brand);
+  background: #f3f1ee;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+/* Topbar */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 20px;
+  background: var(--aks-card);
+  border-bottom: 1px solid var(--aks-line);
+}
+
+.topbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.topbar-logo {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.topbar h1 {
+  margin: 0;
+  font-size: 20px;
+  color: var(--aks-brand);
+}
+
+.topbar-actions {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+button.avatar-button {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: none;
+}
+
+button.avatar-button:hover {
+  transform: none;
+  background: transparent;
+}
+
+.avatar {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--aks-brand);
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.avatar-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 30;
+  min-width: 160px;
+  padding: 6px;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  box-shadow: 0 16px 32px rgba(30, 39, 53, 0.16);
+}
+
+.avatar-name {
+  margin: 0;
+  padding: 6px 10px 4px;
+  color: var(--aks-brand);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.avatar-menu button,
+.avatar-menu .aks-button {
+  width: 100%;
+  min-height: 34px;
+  padding: 6px 10px;
+  justify-content: flex-start;
+  background: transparent;
+  color: var(--aks-muted);
+  font-size: 13px;
+  font-weight: 600;
+  box-shadow: none;
+  text-align: left;
+}
+
+.avatar-menu button:hover,
+.avatar-menu .aks-button:hover {
+  transform: none;
+  background: #f4f2ef;
+  color: var(--aks-brand);
+}
+
+/* Side nav */
+.side-nav {
+  display: grid;
+  align-content: start;
+  gap: 5px;
+  padding: 14px 12px;
+  background: var(--aks-card);
+  border-right: 1px solid var(--aks-line);
+}
+
+.side-nav button {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+  min-height: 38px;
+  padding: 8px 14px;
+  border-radius: var(--aks-radius);
+  background: transparent;
+  color: var(--aks-muted);
+  font-size: 14px;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+.side-nav button:hover {
+  transform: none;
+  background: #f4f2ef;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+.side-nav button.active {
+  background: var(--aks-brand);
+  color: #fff;
+}
+
+/* Select + DateField */
+.app-select,
+.date-field {
+  position: relative;
+  width: 100%;
+}
+
+.app-select-mirror {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+button.app-select-trigger,
+button.date-field-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px 14px;
+  border: 1px solid transparent;
+  border-radius: var(--aks-radius);
+  background: var(--aks-field);
+  color: var(--aks-ink);
+  font: inherit;
+  font-weight: 400;
+  text-align: left;
+  box-shadow: none;
+}
+
+button.app-select-trigger:hover,
+button.date-field-trigger:hover {
+  transform: none;
+  background: #fff;
+  border-color: #ddd9d3;
+  box-shadow: none;
+}
+
+button.app-select-trigger.open,
+button.app-select-trigger:focus-visible,
+button.date-field-trigger.open,
+button.date-field-trigger:focus-visible {
+  outline: none;
+  background: #fff;
+  border-color: var(--aks-accent);
+  box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.18);
+}
+
+button.app-select-trigger:disabled,
+.date-field.read-only button.date-field-trigger,
+button.date-field-trigger:disabled {
+  color: var(--aks-brand);
+  background: #f3f1ee;
+  cursor: default;
+}
+
+.app-select-value,
+.date-field-value,
+.app-select-placeholder,
+.date-field-placeholder {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-select-placeholder,
+.date-field-placeholder {
+  color: #98a2b3;
+}
+
+.app-select-chevron,
+.date-field-icon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  color: var(--aks-muted);
+}
+
+.app-select-menu,
+.date-picker {
+  position: fixed;
+  z-index: 70;
+  overflow: auto;
+  padding: 6px;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  box-shadow:
+    0 18px 40px rgba(30, 39, 53, 0.16),
+    0 2px 8px rgba(30, 39, 53, 0.06);
+  animation: aks-snackbar-in 140ms ease-out;
+}
+
+.app-select-empty {
+  padding: 8px 10px;
+  color: var(--aks-muted);
+  font-size: 12px;
+  text-align: left;
+}
+
+button.app-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--aks-brand);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  text-align: left;
+  box-shadow: none;
+}
+
+button.app-select-option > span {
+  min-width: 0;
+  text-align: left;
+}
+
+button.app-select-option:hover {
+  transform: none;
+  background: #f4f2ef;
+  box-shadow: none;
+}
+
+button.app-select-option.active {
+  background: rgba(230, 126, 34, 0.12);
+  color: var(--aks-brand);
+}
+
+button.app-select-option.active:hover {
+  background: rgba(230, 126, 34, 0.16);
+}
+
+.app-select-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: #98a2b3;
+}
+
+.app-select-dot.ok { background: var(--aks-ok); }
+.app-select-dot.warn { background: #d97706; }
+.app-select-dot.danger { background: var(--aks-danger); }
+.app-select-dot.accent { background: var(--aks-accent); }
+.app-select-dot.neutral { background: #98a2b3; }
+
+.app-select-check {
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+  color: var(--aks-accent);
+}
+
+.date-picker {
+  padding: 12px;
+  width: min(300px, calc(100vw - 24px));
+}
+
+.date-picker-head,
+.date-picker-footer,
+.date-picker-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.date-picker-head {
+  margin-bottom: 10px;
+}
+
+.date-picker-head strong {
+  color: var(--aks-brand);
+  font-size: 14px;
+}
+
+.date-picker-nav button.ghost {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.date-picker-weekdays,
+.date-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.date-picker-weekdays {
+  margin-bottom: 6px;
+}
+
+.date-picker-weekdays span {
+  text-align: center;
+  color: var(--aks-muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+button.date-picker-day {
+  aspect-ratio: 1;
+  min-width: 0;
+  padding: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--aks-brand);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: none;
+}
+
+button.date-picker-day:hover {
+  transform: none;
+  background: #f4f2ef;
+  box-shadow: none;
+}
+
+button.date-picker-day.outside {
+  color: #b0b7c3;
+}
+
+button.date-picker-day.today:not(.selected) {
+  box-shadow: inset 0 0 0 1px rgba(230, 126, 34, 0.55);
+}
+
+button.date-picker-day.selected,
+button.date-picker-day.selected:hover {
+  background: var(--aks-accent);
+  color: #fff;
+  box-shadow: none;
+}
+
+.date-picker-footer {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--aks-line);
+}
+
+.date-picker-footer button.ghost {
+  padding: 6px 10px;
+  color: var(--aks-accent);
+  font-size: 13px;
+}
+
+/* Dialog */
+.dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 24px 16px;
+  background: rgba(30, 39, 53, 0.42);
+}
+
+.dialog {
+  width: min(480px, 100%);
+  display: grid;
+  gap: 16px;
+  padding: 20px;
+  border-radius: var(--aks-radius);
+  background: var(--aks-card);
+  box-shadow: 0 24px 60px rgba(30, 39, 53, 0.24);
+}
+
+.form-dialog {
+  width: min(760px, 100%);
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+}
+
+.dialog-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.dialog-head h2 {
+  margin: 0;
+  font-size: 18px;
+  color: var(--aks-brand);
+}
+
+.dialog .wide {
+  grid-column: 1 / -1;
+}
+
+/* Snackbar */
+.snackbar-host {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  left: auto;
+  z-index: 60;
+  transform: none;
+  width: min(380px, calc(100% - 32px));
+  pointer-events: none;
+}
+
+.snackbar {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: var(--aks-radius);
+  background: #fff;
+  color: var(--aks-brand);
+  border: 1px solid var(--aks-line);
+  box-shadow:
+    0 12px 28px rgba(30, 39, 53, 0.14),
+    0 2px 8px rgba(30, 39, 53, 0.06);
+  animation: aks-snackbar-in 180ms ease-out;
+}
+
+.snackbar.success {
+  border-color: rgba(6, 118, 71, 0.22);
+  background: #f7fcf9;
+}
+
+.snackbar:not(.success) {
+  border-color: rgba(180, 35, 24, 0.22);
+  background: #fff8f7;
+}
+
+.snackbar p {
+  margin: 0;
+  flex: 1;
+  padding-top: 1px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--aks-brand);
+}
+
+.snackbar-icon {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
+.snackbar.success .snackbar-icon {
+  color: var(--aks-ok);
+}
+
+.snackbar:not(.success) .snackbar-icon {
+  color: var(--aks-danger);
+}
+
+button.snackbar-close {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--aks-muted);
+  box-shadow: none;
+  font-size: 18px;
+  line-height: 1;
+}
+
+button.snackbar-close:hover {
+  transform: none;
+  background: rgba(30, 39, 53, 0.06);
+  color: var(--aks-brand);
+}
+
+@keyframes aks-snackbar-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Pagination */
+.table-pagination {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  height: var(--aks-table-header-height);
+  min-height: var(--aks-table-header-height);
+  padding: 0 12px;
+  border-top: 1px solid var(--aks-line);
+  background: #faf9f7;
+  overflow: hidden;
+}
+
+.page-size,
+.page-buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--aks-muted);
+}
+
+.page-size .page-size-select {
+  width: 72px;
+  min-width: 72px;
+}
+
+.page-size .app-select-trigger {
+  min-height: 28px;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.page-summary,
+.page-indicator {
+  margin: 0;
+  color: var(--aks-muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.page-buttons .ghost {
+  min-height: 28px;
+  padding: 2px 8px;
+  font-size: 12px;
+  box-shadow: none;
+}
+
+/* src\theme\patterns.css */
+@keyframes aks-fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.hint {
+  color: var(--aks-muted);
+  font-size: 13px;
+}
+
+.workspace,
+.list-workspace {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  align-items: stretch;
+}
+
+.list-workspace {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.list-body {
+  display: flex;
+  gap: 12px;
+  min-height: 0;
+  flex: 1 1 auto;
+  align-items: stretch;
+}
+
+.list-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.table-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  overflow: hidden;
+}
+
+.table-card-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 0 0 auto;
+  min-height: 44px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--aks-line);
+  background: #faf9f7;
+}
+
+.table-card-context {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.list-filter {
+  display: block;
+  max-width: none;
+}
+
+.preview-panel {
+  width: var(--aks-preview-panel-width);
+  flex: 0 0 var(--aks-preview-panel-width);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background:
+    linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  overflow: hidden;
+  animation: aks-fade-up 160ms ease-out;
+}
+
+.preview-panel-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 14px 12px;
+  border-bottom: 1px solid var(--aks-line);
+  background: #faf9f7;
+}
+
+.preview-panel-head h3 {
+  margin: 2px 0 0;
+  color: var(--aks-brand);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.preview-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 14px;
+  overflow: auto;
+}
+
+.preview-kicker {
+  margin: 0;
+  color: var(--aks-accent);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.preview-empty {
+  margin: 0;
+  color: var(--aks-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.preview-check:has(input:checked) {
+  color: var(--aks-accent);
+}
+
+.preview-check:has(input:checked) svg {
+  color: var(--aks-accent);
+}
+
+.record-detail-list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.record-detail-row {
+  display: grid;
+  gap: 2px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(230, 228, 223, 0.9);
+}
+
+.record-detail-row:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.record-detail-row dt {
+  color: var(--aks-muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.record-detail-row dd {
+  margin: 0;
+  color: var(--aks-brand);
+  font-size: 13px;
+  font-weight: 500;
+  word-break: break-word;
+}
+
+.record-tooltip {
+  position: fixed;
+  z-index: 80;
+  width: min(280px, calc(100vw - 24px));
+  padding: 12px;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  box-shadow:
+    0 18px 40px rgba(30, 39, 53, 0.16),
+    0 2px 8px rgba(30, 39, 53, 0.06);
+  pointer-events: none;
+  animation: aks-fade-up 120ms ease-out;
+}
+
+.record-tooltip-title {
+  margin: 0 0 10px;
+  color: var(--aks-brand);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.data-table tbody tr.data-row {
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.data-table tbody tr.data-row:hover td {
+  background: rgba(30, 39, 53, 0.03);
+}
+
+.data-table tbody tr.data-row.selected td {
+  background: rgba(230, 126, 34, 0.1);
+}
+
+.data-table tbody tr.data-row.selected:hover td {
+  background: rgba(230, 126, 34, 0.14);
+}
+
+.preview-check {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  margin: 0;
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: var(--aks-brand);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: default;
+}
+
+.preview-check input[type="checkbox"],
+.preview-check-icon input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  min-width: 15px;
+  min-height: 15px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  box-shadow: none;
+  accent-color: var(--aks-accent);
+  cursor: pointer;
+}
+
+.preview-check input[type="checkbox"]:hover,
+.preview-check input[type="checkbox"]:focus,
+.preview-check-icon input[type="checkbox"]:hover,
+.preview-check-icon input[type="checkbox"]:focus {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.preview-check svg {
+  width: 16px;
+  height: 16px;
+  color: var(--aks-muted);
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+
+.preview-check > span {
+  pointer-events: none;
+}
+
+label.preview-check-icon {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  border-radius: var(--aks-radius);
+  color: var(--aks-brand);
+  cursor: pointer;
+}
+
+label.preview-check-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+label.preview-check-icon:hover {
+  background: #fff;
+}
+
+label.preview-check-icon input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+label.preview-check-icon:has(input:checked) {
+  background: rgba(230, 126, 34, 0.14);
+  color: var(--aks-accent);
+}
+
+.side-rail {
+  width: var(--aks-side-rail-collapsed);
+  flex: 0 0 var(--aks-side-rail-collapsed);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  min-height: 0;
+  padding: 8px 6px;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background: #faf9f7;
+  overflow: hidden;
+  transition: width 160ms ease, flex-basis 160ms ease;
+}
+
+.side-rail.open {
+  width: var(--aks-side-rail-expanded);
+  flex-basis: var(--aks-side-rail-expanded);
+}
+
+button.side-rail-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 36px;
+  padding: 6px;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+button.side-rail-toggle:hover {
+  transform: none;
+  background: #fff;
+}
+
+.side-rail-chevron {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  transform: rotate(180deg);
+  transition: transform 160ms ease;
+}
+
+.side-rail-chevron.open {
+  transform: rotate(0deg);
+}
+
+.side-rail-icons {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+}
+
+button.side-rail-icon {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+button.side-rail-icon:hover {
+  transform: none;
+  background: #fff;
+}
+
+button.side-rail-icon svg,
+.side-rail-add svg {
+  width: 18px;
+  height: 18px;
+}
+
+.side-rail-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  overflow: auto;
+  padding: 2px;
+}
+
+button.side-rail-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: var(--aks-radius);
+  background: var(--aks-brand);
+  color: #fff;
+  box-shadow: none;
+}
+
+button.side-rail-add:hover {
+  transform: none;
+  background: #2a3546;
+}
+
+.side-rail-filters {
+  display: grid;
+  gap: 12px;
+}
+
+.filter-badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--aks-accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.filter-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.filter-panel-head h3 {
+  margin: 0;
+  color: var(--aks-brand);
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+button.filter-clear {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  box-shadow: none;
+}
+
+button.filter-clear svg {
+  width: 14px;
+  height: 14px;
+}
+
+button.side-rail-icon:disabled,
+button.filter-clear:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.filter-panel-stack {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.filter-panel-stack label {
+  gap: 4px;
+}
+
+button.record-button {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  text-align: left;
+  background: transparent;
+  color: var(--aks-brand);
+  box-shadow: none;
+  border-radius: 16px;
+}
+
+button.record-button strong {
+  font-size: 14px;
+}
+
+button.record-button span {
+  color: var(--aks-muted);
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.table-card > .table-wrap {
+  width: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+  height: auto;
+  max-height: none;
+  overflow: auto;
+  border: 0;
+  border-radius: 0;
+  background: #fff;
+}
+
+.table-card > .table-pagination {
+  flex: 0 0 auto;
+  height: var(--aks-table-header-height);
+  min-height: var(--aks-table-header-height);
+  padding: 0 12px;
+  border-top: 1px solid var(--aks-line);
+  background: #faf9f7;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 640px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 6px 12px;
+  height: var(--aks-row-height);
+  text-align: left;
+  border-bottom: 1px solid var(--aks-line);
+  vertical-align: middle;
+  font-size: 13px;
+}
+
+.data-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  height: var(--aks-table-header-height);
+  background: #f6f5f3;
+  color: var(--aks-brand);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+button.sort-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: left;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+button.sort-header:hover {
+  transform: none;
+  color: var(--aks-accent);
+  background: transparent;
+  box-shadow: none;
+}
+
+button.sort-header.active {
+  color: var(--aks-accent);
+}
+
+.sort-indicator {
+  color: #b0b7c3;
+  font-size: 10px;
+  line-height: 1;
+}
+
+button.sort-header.active .sort-indicator {
+  color: var(--aks-accent);
+}
+
+.data-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.data-table tbody tr:hover td {
+  background: #fffcf8;
+}
+
+.data-table .actions-col {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.row-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+button.row-action {
+  padding: 4px 8px;
+  font-size: 12px;
+  box-shadow: none;
+}
+
+button.row-action.danger:not(:disabled) {
+  color: #a33b2b;
+}
+
+.table-empty {
+  margin: 0;
+  padding: 28px 8px;
+  text-align: center;
+}
+
+.table-pagination {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.data-table thead button.sort-header,
+button.sort-header {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  width: 100%;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: left;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.data-table thead button.sort-header:hover,
+button.sort-header:hover {
+  transform: none;
+  color: var(--aks-accent);
+  background: transparent;
+  box-shadow: none;
+}
+
+.data-table thead button.sort-header.active,
+button.sort-header.active {
+  color: var(--aks-accent);
+  background: transparent;
+  box-shadow: none;
+}
+
+.data-table .row-actions button.row-action,
+button.row-action {
+  min-height: 0;
+  padding: 4px 8px;
+  border-radius: var(--aks-radius);
+  background: transparent;
+  color: var(--aks-muted);
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+.data-table .row-actions button.row-action:hover,
+button.row-action:hover {
+  transform: none;
+  background: #f4f2ef;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+.data-table .row-actions button.row-action.danger:not(:disabled),
+button.row-action.danger:not(:disabled) {
+  background: transparent;
+  color: #a33b2b;
+  box-shadow: none;
+}
+
+.data-table .row-actions button.row-action.danger:not(:disabled):hover,
+button.row-action.danger:not(:disabled):hover {
+  background: #fff1f0;
+  color: #a33b2b;
+  box-shadow: none;
+}
+
+@media (max-width: 900px) {
+  .list-body.side-open,
+  .list-body.preview-open {
+    flex-direction: column;
+  }
+
+  .preview-panel,
+  .side-rail,
+  .side-rail.open {
+    width: 100%;
+    flex-basis: auto;
+  }
+
+  .side-rail:not(.open) {
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    flex-basis: auto;
+  }
+
+  .side-rail:not(.open) .side-rail-icons {
+    display: inline-flex;
+    margin-left: auto;
+  }
+
+  .table-card-bar {
+    flex-wrap: wrap;
+  }
+}
+
+/* src\theme\shell.css */
+/* App shell — matches aksconfigurator_ui chrome */
+
+.app-shell {
+  width: 100%;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  background: #f3f2ef;
+}
+
+.app-body {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
+
+.app-shell .screen {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  padding: 12px;
+}
+
+.app-shell .screen > .list-workspace {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.bottom-nav {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .app-body {
+    grid-template-columns: 1fr;
+  }
+
+  .app-shell .side-nav {
+    display: none;
+  }
+
+  .app-shell .screen {
+    padding: 10px 10px 88px;
+  }
+
+  .bottom-nav {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    gap: 6px;
+    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
+    border-radius: 20px 20px 0 0;
+    background: var(--aks-brand);
+    box-shadow: 0 -8px 24px rgba(30, 39, 53, 0.18);
+  }
+
+  .bottom-nav button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-width: 0;
+    padding: 10px 4px;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 10px;
+    line-height: 1.1;
+    white-space: nowrap;
+    box-shadow: none;
+  }
+
+  .bottom-nav button.active,
+  .bottom-nav button:hover {
+    transform: none;
+    background: var(--aks-accent);
+    color: #fff;
+    box-shadow: none;
+  }
+
+  .snackbar-host {
+    right: 16px;
+    bottom: calc(78px + env(safe-area-inset-bottom));
+  }
+}