@jerco/ui 0.2.0

package/dist/styles.css

@@ -0,0 +1,1289 @@
+@import "@jerco/tokens/styles.css";
+@import "@jerco/theme-base/styles.css";
+@import "@jerco/theme-jerco/styles.css";
+
+.j-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;
+}
+
+.j-icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+.j-button {
+  display: inline-flex;
+  min-height: var(--control-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  padding-inline: var(--control-padding-x);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color var(--motion-fast) var(--ease-standard),
+    border-color var(--motion-fast) var(--ease-standard),
+    color var(--motion-fast) var(--ease-standard),
+    transform var(--motion-fast) var(--ease-standard);
+}
+
+.j-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.j-button:disabled,
+.j-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.j-button--primary {
+  background: var(--action-primary);
+  color: var(--action-primary-foreground);
+}
+
+.j-button--primary:hover:not(:disabled) {
+  background: var(--action-primary-hover);
+}
+
+.j-button--secondary {
+  background: var(--action-secondary);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+.j-button--secondary:hover:not(:disabled),
+.j-button--outline:hover:not(:disabled),
+.j-button--ghost:hover:not(:disabled) {
+  background: var(--action-secondary-hover);
+}
+
+.j-button--outline {
+  background: transparent;
+  color: var(--foreground);
+  border-color: var(--border-strong);
+}
+
+.j-button--ghost {
+  background: transparent;
+  color: var(--foreground-muted);
+}
+
+.j-button--destructive {
+  background: var(--status-danger);
+  color: var(--primitive-white);
+}
+
+.j-button--destructive:hover:not(:disabled) {
+  background: color-mix(in oklch, var(--status-danger), black 12%);
+}
+
+.j-button--sm {
+  min-height: calc(var(--control-height) - 8px);
+  padding-inline: calc(var(--control-padding-x) - 0.125rem);
+}
+
+.j-button--lg {
+  min-height: calc(var(--control-height) + 8px);
+  padding-inline: calc(var(--control-padding-x) + 0.25rem);
+}
+
+.j-button--icon {
+  width: var(--control-height);
+  padding: 0;
+}
+
+.j-input,
+.j-select {
+  width: 100%;
+  min-height: var(--control-height);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  color: var(--foreground);
+  padding-inline: var(--control-padding-x);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  transition:
+    border-color var(--motion-fast) var(--ease-standard),
+    box-shadow var(--motion-fast) var(--ease-standard);
+}
+
+.j-input::placeholder {
+  color: var(--foreground-subtle);
+}
+
+.j-input:hover,
+.j-select:hover {
+  border-color: var(--border-strong);
+}
+
+.j-input[aria-invalid="true"] {
+  border-color: var(--status-danger);
+}
+
+.j-textarea {
+  min-height: calc(var(--control-height) * 2);
+  padding-block: var(--space-3);
+  resize: vertical;
+}
+
+.j-label {
+  display: inline-block;
+  margin-bottom: var(--space-2);
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.j-separator {
+  height: 1px;
+  width: 100%;
+  background: var(--border);
+}
+
+.j-select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.j-native-select {
+  appearance: auto;
+}
+
+.j-select-content {
+  z-index: var(--z-dropdown);
+  min-width: var(--radix-select-trigger-width);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+  color: var(--foreground);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-1);
+}
+
+.j-select-item {
+  position: relative;
+  display: flex;
+  min-height: 2rem;
+  align-items: center;
+  border-radius: var(--radius-sm);
+  padding: var(--space-2) calc(var(--space-3) + 1rem) var(--space-2) var(--space-3);
+  outline: none;
+  font-size: var(--font-size-sm);
+  cursor: default;
+  user-select: none;
+}
+
+.j-select-item[data-highlighted] {
+  background: var(--surface-hover);
+}
+
+.j-select-item[data-disabled] {
+  opacity: 0.5;
+}
+
+.j-select-check {
+  position: absolute;
+  right: var(--space-2);
+}
+
+.j-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
+  padding: 0.125rem var(--space-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.4;
+}
+
+.j-badge--neutral {
+  border-color: var(--border);
+  background: var(--action-secondary);
+  color: var(--foreground-muted);
+}
+
+.j-badge--success {
+  background: color-mix(in oklch, var(--status-success), transparent 84%);
+  color: color-mix(in oklch, var(--status-success), var(--foreground) 28%);
+}
+
+.j-badge--warning {
+  background: color-mix(in oklch, var(--status-warning), transparent 82%);
+  color: color-mix(in oklch, var(--status-warning), var(--foreground) 35%);
+}
+
+.j-badge--danger {
+  background: color-mix(in oklch, var(--status-danger), transparent 84%);
+  color: color-mix(in oklch, var(--status-danger), var(--foreground) 24%);
+}
+
+.j-badge--info {
+  background: color-mix(in oklch, var(--status-info), transparent 84%);
+  color: color-mix(in oklch, var(--status-info), var(--foreground) 28%);
+}
+
+.j-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  color: var(--foreground);
+  box-shadow: var(--shadow-sm);
+}
+
+.j-card-header,
+.j-card-content,
+.j-card-footer {
+  padding: var(--space-5);
+}
+
+.j-card-header + .j-card-content,
+.j-card-content + .j-card-footer {
+  padding-top: 0;
+}
+
+.j-card-title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-tight);
+}
+
+.j-card-description,
+.j-metric-description {
+  margin: var(--space-2) 0 0;
+  color: var(--foreground-muted);
+  font-size: var(--font-size-sm);
+}
+
+.j-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.j-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--z-dialog) - 1);
+  background: oklch(8% 0.02 255 / 0.66);
+  animation: j-fade-in var(--motion-normal) var(--ease-standard);
+}
+
+.j-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: var(--z-dialog);
+  width: min(92vw, 32rem);
+  max-height: 85vh;
+  overflow: auto;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  color: var(--foreground);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-6);
+  animation: j-dialog-in var(--motion-normal) var(--ease-standard);
+}
+
+.j-dialog-close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+}
+
+.j-dialog-header {
+  padding-right: var(--space-8);
+}
+
+.j-dialog-title {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  line-height: var(--line-height-tight);
+}
+
+.j-dialog-description {
+  margin: var(--space-2) 0 0;
+  color: var(--foreground-muted);
+}
+
+.j-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-6);
+}
+
+.j-tooltip {
+  z-index: var(--z-dropdown);
+  max-width: 18rem;
+  border-radius: var(--radius-sm);
+  background: var(--foreground);
+  color: var(--background);
+  padding: var(--space-2) var(--space-3);
+  box-shadow: var(--shadow-md);
+  font-size: var(--font-size-xs);
+}
+
+.j-tabs-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--border);
+}
+
+.j-tabs-trigger {
+  min-height: var(--control-height);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--foreground-muted);
+  padding-inline: var(--control-padding-x);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+}
+
+.j-tabs-trigger[data-state="active"] {
+  border-bottom-color: var(--action-primary);
+  color: var(--foreground);
+}
+
+.j-tabs-content {
+  padding-top: var(--space-4);
+}
+
+.j-spinner-wrap {
+  display: inline-flex;
+}
+
+.j-spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: j-spin 0.8s linear infinite;
+}
+
+.j-skeleton {
+  min-height: 1rem;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, var(--surface-hover), var(--border), var(--surface-hover));
+  background-size: 200% 100%;
+  animation: j-shimmer 1.5s ease-in-out infinite;
+}
+
+.j-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--foreground-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.j-status-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.j-status-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--radius-full);
+  background: currentColor;
+}
+
+.j-status--online,
+.j-status--healthy {
+  color: var(--status-success);
+}
+
+.j-status--degraded,
+.j-status--warning {
+  color: var(--status-warning);
+}
+
+.j-status--offline {
+  color: var(--status-offline);
+}
+
+.j-status--error {
+  color: var(--status-danger);
+}
+
+.j-status--unknown {
+  color: var(--status-unknown);
+}
+
+.j-metric-card {
+  min-height: 10.5rem;
+  padding: var(--space-5);
+}
+
+.j-metric-card-header,
+.j-metric-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.j-metric-label {
+  color: var(--foreground-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.j-metric-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--foreground-subtle);
+}
+
+.j-metric-value {
+  margin-block: var(--space-3);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.02em;
+}
+
+.j-metric-trend {
+  color: var(--foreground-muted);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+}
+
+.j-metric-skeleton-value {
+  width: 45%;
+  height: 2rem;
+  margin-block: var(--space-4);
+}
+
+.j-metric-skeleton-text {
+  width: 70%;
+}
+
+.j-brand-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.j-brand-logo--placeholder {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-sm);
+  background: var(--action-primary);
+  color: var(--action-primary-foreground);
+  font-weight: var(--font-weight-bold);
+}
+
+.j-checkbox,
+.j-radio,
+.j-switch {
+  flex: 0 0 auto;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--action-primary-foreground);
+  cursor: pointer;
+}
+
+.j-checkbox {
+  display: inline-flex;
+  width: 1.125rem;
+  height: 1.125rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-xs);
+}
+
+.j-checkbox[data-state="checked"],
+.j-checkbox[data-state="indeterminate"],
+.j-radio[data-state="checked"],
+.j-switch[data-state="checked"] {
+  border-color: var(--action-primary);
+  background: var(--action-primary);
+}
+
+.j-checkbox-indicator,
+.j-checkbox-indicator svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.j-choice-field,
+.j-switch-field {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.j-choice-label {
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+}
+
+.j-choice-description {
+  margin-top: var(--space-1);
+  color: var(--foreground-muted);
+  font-size: var(--font-size-xs);
+}
+
+.j-radio-group {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.j-radio {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: var(--radius-full);
+}
+
+.j-radio-indicator::after {
+  position: absolute;
+  inset: 4px;
+  border-radius: var(--radius-full);
+  background: var(--action-primary-foreground);
+  content: "";
+}
+
+.j-switch-field {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.j-switch {
+  position: relative;
+  width: 2.5rem;
+  height: 1.375rem;
+  border-radius: var(--radius-full);
+  transition: background-color var(--motion-fast) var(--ease-standard);
+}
+
+.j-switch-thumb {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  transform: translateX(2px);
+  border-radius: var(--radius-full);
+  background: var(--primitive-white);
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--motion-fast) var(--ease-standard);
+}
+
+.j-switch[data-state="checked"] .j-switch-thumb {
+  transform: translateX(18px);
+}
+
+.j-dropdown-content {
+  z-index: var(--z-dropdown);
+  min-width: 12rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+  color: var(--foreground);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-1);
+}
+
+.j-dropdown-item {
+  position: relative;
+  display: flex;
+  min-height: 2rem;
+  align-items: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2) var(--space-3);
+  outline: none;
+  font-size: var(--font-size-sm);
+  cursor: default;
+  user-select: none;
+}
+
+.j-dropdown-item[data-highlighted] {
+  background: var(--surface-hover);
+}
+
+.j-dropdown-item[data-disabled] {
+  opacity: 0.5;
+}
+
+.j-dropdown-check-item {
+  padding-left: var(--space-8);
+}
+
+.j-dropdown-indicator {
+  position: absolute;
+  left: var(--space-3);
+  display: inline-flex;
+  width: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.j-dropdown-indicator svg {
+  width: 0.875rem;
+}
+
+.j-dropdown-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  background: currentColor;
+}
+
+.j-dropdown-label {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+}
+
+.j-dropdown-separator {
+  height: 1px;
+  margin: var(--space-1) 0;
+  background: var(--border);
+}
+
+.j-dropdown-chevron {
+  width: 1rem;
+  margin-left: auto;
+}
+
+.j-toast-viewport {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-toast);
+  display: flex;
+  width: min(100%, 26rem);
+  max-height: 100vh;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: 0;
+  padding: var(--space-5);
+  list-style: none;
+}
+
+.j-toast {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-1) var(--space-3);
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-4);
+}
+
+.j-toast--success {
+  border-left-color: var(--status-success);
+}
+.j-toast--warning {
+  border-left-color: var(--status-warning);
+}
+.j-toast--danger {
+  border-left-color: var(--status-danger);
+}
+.j-toast-title {
+  font-weight: var(--font-weight-semibold);
+}
+.j-toast-description {
+  color: var(--foreground-muted);
+  font-size: var(--font-size-sm);
+}
+.j-toast-close {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  border: 0;
+  background: transparent;
+  color: var(--foreground-muted);
+  cursor: pointer;
+}
+.j-toast-close svg {
+  width: 1rem;
+}
+
+.j-data-table {
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.j-data-table-toolbar,
+.j-data-table-selection,
+.j-data-table-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+}
+
+.j-data-table-toolbar {
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--border);
+}
+
+.j-data-table-toolbar > .j-native-select {
+  width: auto;
+  min-width: 10rem;
+}
+.j-data-table-search {
+  position: relative;
+  min-width: min(100%, 18rem);
+  flex: 1;
+}
+.j-data-table-search > svg {
+  position: absolute;
+  top: 50%;
+  left: var(--space-3);
+  width: 1rem;
+  transform: translateY(-50%);
+  color: var(--foreground-subtle);
+}
+.j-data-table-search .j-input {
+  padding-left: var(--space-8);
+}
+.j-data-table-selection {
+  justify-content: space-between;
+  background: color-mix(in oklch, var(--action-primary), transparent 90%);
+  font-size: var(--font-size-sm);
+}
+.j-data-table-scroll {
+  overflow: auto;
+}
+.j-data-table-scroll--virtual {
+  overscroll-behavior: contain;
+}
+.j-data-table table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.j-data-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  height: var(--row-height);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-raised);
+  color: var(--foreground-muted);
+  padding: 0 var(--space-3);
+  text-align: left;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+}
+.j-data-table td {
+  height: var(--row-height);
+  border-bottom: 1px solid var(--border);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.j-data-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.j-data-table tbody tr[data-selected="true"] {
+  background: color-mix(in oklch, var(--action-primary), transparent 92%);
+}
+.j-data-table-sort {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--space-1);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  font: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+}
+.j-data-table-sort svg {
+  width: 0.875rem;
+}
+.j-data-table-resizer {
+  position: absolute;
+  top: 20%;
+  right: -2px;
+  width: 5px;
+  height: 60%;
+  cursor: col-resize;
+}
+.j-data-table-empty {
+  height: 8rem !important;
+  color: var(--foreground-muted);
+  text-align: center;
+  white-space: normal !important;
+}
+.j-data-table-skeleton {
+  width: 100%;
+}
+.j-data-table-footer {
+  justify-content: space-between;
+  border-top: 1px solid var(--border);
+  color: var(--foreground-muted);
+  font-size: var(--font-size-sm);
+}
+.j-data-table-pagination {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.j-device-card {
+  min-height: 12rem;
+  padding: var(--space-5);
+}
+.j-device-card-header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--space-3);
+}
+.j-device-card-header h3,
+.j-service-health h3,
+.j-operational-state h3 {
+  margin: 0;
+  font-size: var(--font-size-md);
+}
+.j-device-card-header p,
+.j-service-health p,
+.j-operational-state p {
+  margin: var(--space-1) 0 0;
+  color: var(--foreground-muted);
+  font-size: var(--font-size-sm);
+}
+.j-device-card-icon,
+.j-service-health-icon {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: var(--action-secondary);
+  color: var(--foreground-muted);
+}
+.j-device-card-icon svg,
+.j-service-health-icon svg {
+  width: 1.25rem;
+}
+.j-device-card-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: var(--space-5);
+}
+.j-device-card-status > span:last-child {
+  color: var(--foreground-muted);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+}
+.j-device-card-address,
+.j-service-health code {
+  display: block;
+  margin-top: var(--space-3);
+  color: var(--foreground-muted);
+  font-size: var(--font-size-xs);
+}
+.j-device-card-description {
+  margin: var(--space-3) 0 0;
+  color: var(--foreground-muted);
+  font-size: var(--font-size-sm);
+}
+.j-device-card-line {
+  width: 70%;
+  margin: var(--space-4) 0;
+}
+.j-device-card-line--short {
+  width: 45%;
+}
+
+.j-service-health {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: start;
+  gap: var(--space-4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  padding: var(--space-4);
+}
+.j-service-health-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+.j-service-health-meta {
+  display: grid;
+  justify-items: end;
+  gap: var(--space-2);
+  color: var(--foreground-muted);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+}
+
+.j-operational-state {
+  display: grid;
+  justify-items: center;
+  padding: var(--space-10);
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  text-align: center;
+}
+.j-operational-state-icon {
+  width: 2rem;
+  height: 2rem;
+  margin-bottom: var(--space-3);
+  color: var(--foreground-subtle);
+}
+.j-operational-state--error .j-operational-state-icon {
+  color: var(--status-danger);
+}
+.j-operational-state-action {
+  margin-top: var(--space-5);
+}
+.j-operational-state--compact {
+  padding: var(--space-5);
+}
+
+.j-app-shell {
+  display: grid;
+  min-height: 100vh;
+  grid-template-columns: minmax(13rem, 16rem) 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar main";
+  background: var(--background);
+}
+
+.j-app-shell--collapsed {
+  grid-template-columns: 4.5rem 1fr;
+}
+
+.j-header {
+  grid-area: header;
+  display: flex;
+  min-height: 3.5rem;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  padding-inline: var(--space-5);
+}
+
+.j-sidebar {
+  grid-area: sidebar;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  padding: var(--space-4);
+}
+
+.j-app-shell--collapsed .j-sidebar {
+  padding-inline: var(--space-2);
+}
+
+.j-sidebar-overlay,
+.j-sidebar-mobile-header,
+.j-app-shell-menu {
+  display: none;
+}
+
+.j-app-shell-collapse {
+  display: inline-flex;
+}
+
+.j-app-navigation {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.j-app-navigation-list {
+  display: grid;
+  gap: var(--space-1);
+}
+.j-app-navigation-sublist {
+  margin-block: var(--space-1) var(--space-2);
+  margin-left: calc(var(--space-3) + 0.5rem);
+  border-left: 1px solid var(--border);
+  padding-left: var(--space-2);
+}
+.j-app-navigation-link {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: var(--control-height);
+  border-radius: var(--radius-md);
+  color: var(--foreground-muted);
+  padding: var(--space-2) var(--space-3);
+  text-decoration: none;
+}
+.j-app-navigation-group-trigger {
+  width: 100%;
+  border: 0;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.j-app-navigation-link:hover,
+.j-app-navigation-link[aria-current="page"] {
+  background: var(--surface-hover);
+  color: var(--foreground);
+}
+.j-app-navigation-link > svg {
+  width: 1.125rem;
+}
+.j-app-navigation-badge {
+  font-size: var(--font-size-xs);
+}
+.j-app-navigation-chevron {
+  width: 1rem !important;
+  transition: transform var(--motion-fast) var(--ease-standard);
+}
+.j-app-navigation-group-trigger[aria-expanded="true"] .j-app-navigation-chevron {
+  transform: rotate(180deg);
+}
+.j-app-navigation-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--border);
+  margin-top: var(--space-4);
+  padding-top: var(--space-4);
+}
+
+.j-app-shell--collapsed .j-app-navigation-link {
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding-inline: var(--space-2);
+}
+.j-app-shell--collapsed .j-app-navigation-link > span,
+.j-app-shell--collapsed .j-app-navigation-chevron,
+.j-app-shell--collapsed .j-app-navigation-sublist {
+  display: none;
+}
+.j-app-shell--collapsed .j-app-navigation-footer {
+  display: flex;
+  justify-content: center;
+}
+.j-app-shell--collapsed .j-app-navigation-footer > :not(.j-app-shell-collapse) {
+  display: none;
+}
+
+.j-main-content {
+  grid-area: main;
+  min-width: 0;
+  padding: var(--space-6);
+}
+
+.j-page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
+}
+
+.j-page-title {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-tight);
+}
+
+.j-page-description {
+  margin: var(--space-2) 0 0;
+  color: var(--foreground-muted);
+}
+
+.j-page-eyebrow {
+  margin-bottom: var(--space-1);
+  color: var(--foreground-subtle);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.j-page-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+@media (max-width: 720px) {
+  .j-app-shell {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main";
+  }
+
+  .j-app-shell--collapsed {
+    grid-template-columns: 1fr;
+  }
+
+  .j-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: var(--z-dialog);
+    display: block;
+    width: min(86vw, 19rem);
+    transform: translateX(-105%);
+    box-shadow: var(--shadow-lg);
+    transition: transform var(--motion-normal) var(--ease-standard);
+  }
+
+  .j-app-shell--collapsed .j-sidebar {
+    padding: var(--space-4);
+  }
+
+  .j-app-shell--nav-open .j-sidebar {
+    transform: translateX(0);
+  }
+
+  .j-sidebar-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-dialog) - 1);
+    display: block;
+    border: 0;
+    background: oklch(8% 0.02 255 / 0.66);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--motion-normal) var(--ease-standard);
+  }
+
+  .j-app-shell--nav-open .j-sidebar-overlay {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .j-sidebar-mobile-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-4);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .j-app-shell-menu {
+    display: inline-flex;
+  }
+
+  .j-app-shell-collapse {
+    display: none;
+  }
+
+  .j-app-shell--collapsed .j-app-navigation-link {
+    grid-template-columns: auto 1fr auto;
+    justify-items: stretch;
+    padding: var(--space-2) var(--space-3);
+  }
+  .j-app-shell--collapsed .j-app-navigation-link > span,
+  .j-app-shell--collapsed .j-app-navigation-chevron,
+  .j-app-shell--collapsed .j-app-navigation-sublist {
+    display: initial;
+  }
+  .j-app-shell--collapsed .j-app-navigation-footer {
+    display: block;
+  }
+  .j-app-shell--collapsed .j-app-navigation-footer > :not(.j-app-shell-collapse) {
+    display: initial;
+  }
+
+  .j-main-content {
+    padding: var(--space-4);
+  }
+
+  .j-page-header {
+    flex-direction: column;
+  }
+
+  .j-data-table-toolbar > * {
+    width: 100%;
+  }
+
+  .j-service-health {
+    grid-template-columns: auto 1fr;
+  }
+
+  .j-service-health-meta {
+    grid-column: 2;
+    justify-items: start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@keyframes j-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes j-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes j-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes j-dialog-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.98);
+  }
+}