/*
 * Aiklava UI core
 *
 * Functional, brand-neutral primitives shared by product modules. Module
 * compatibility CSS and replaceable visual themes are loaded in later cascade
 * layers. Keep client branding and product-specific decoration out of this file.
 */

:root {
  --ui-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-heading: var(--ui-font-body);
  --ui-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ui-color-bg: var(--color-bg, var(--bg, #f7f7f7));
  --ui-color-surface: var(--color-surface, var(--surface, #ffffff));
  --ui-color-surface-subtle: var(--surface-2, #f1f1f1);
  --ui-color-text: var(--color-text, var(--ink, #202020));
  --ui-color-muted: var(--ink-soft, #686868);
  --ui-color-faint: var(--ink-faint, #888888);
  --ui-color-line: var(--color-divider, var(--line, #d7d7d7));
  --ui-color-accent: var(--color-accent, var(--accent, #4a4a4a));
  --ui-color-accent-soft: var(--accent-soft, color-mix(in srgb, var(--ui-color-accent) 10%, transparent));
  --ui-color-danger: var(--danger, #b42318);
  --ui-color-danger-soft: var(--danger-soft, #fef3f2);
  --ui-color-success: var(--success, var(--ok, #217a3c));
  --ui-color-success-soft: var(--ok-soft, #edf8f0);
  --ui-color-warning: var(--warn, #946200);
  --ui-color-warning-soft: var(--warn-soft, #fff7df);
  --ui-color-backdrop: var(--backdrop, rgb(0 0 0 / 42%));

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;

  --ui-radius-sm: 3px;
  --ui-radius-md: 5px;
  --ui-radius-lg: 7px;
  --ui-control-height: 38px;
  --ui-icon-button-size: 38px;
  --ui-sidebar-width: 320px;
  --ui-content-max: 1240px;
  --ui-nav-height: var(--aiklava-nav-height, 0px);
  --ui-app-height: calc(100dvh - var(--ui-nav-height));
  --ui-shadow-dialog: 0 18px 48px rgb(0 0 0 / 18%);
  --ui-transition-fast: 120ms;
}

:where([data-aiklava-ui], [data-aiklava-ui] *, [data-aiklava-ui] *::before, [data-aiklava-ui] *::after) {
  box-sizing: border-box;
}

:where([data-aiklava-ui]) {
  min-width: 0;
  background: var(--ui-color-bg);
  color: var(--ui-color-text);
  font-family: var(--ui-font-body);
  text-rendering: optimizeLegibility;
}

:where([data-aiklava-ui] button, [data-aiklava-ui] input, [data-aiklava-ui] select, [data-aiklava-ui] textarea) {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

:where([data-aiklava-ui] button, [data-aiklava-ui] [role="button"]) {
  touch-action: manipulation;
}

:where([data-aiklava-ui] [hidden]) {
  display: none !important;
}

:where([data-aiklava-ui] :focus) {
  outline: none;
}

:where([data-aiklava-ui] :focus-visible) {
  outline: 2px solid var(--ui-color-accent);
  outline-offset: 2px;
}

:where([data-aiklava-ui] [aria-disabled="true"], [data-aiklava-ui] :disabled) {
  cursor: not-allowed;
  opacity: .52;
}

:where([data-aiklava-ui] [aria-busy="true"]) {
  cursor: progress;
}

.ui-shell {
  width: 100%;
  min-width: 0;
  min-height: var(--ui-app-height);
  background: var(--ui-color-bg);
  color: var(--ui-color-text);
}

.ui-app-layout {
  display: grid;
  grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
  width: 100%;
  height: var(--ui-app-height);
  min-height: 0;
}

.ui-sidebar,
.ui-main,
.ui-panel {
  min-width: 0;
  min-height: 0;
}

.ui-sidebar {
  overflow: auto;
  border-right: 1px solid var(--ui-color-line);
  background: var(--ui-color-surface-subtle);
}

.ui-main {
  overflow: auto;
  background: var(--ui-color-bg);
}

.ui-content {
  width: min(100%, var(--ui-content-max));
  margin-inline: auto;
  padding: var(--ui-space-6);
}

.ui-topbar,
.ui-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-topbar {
  min-height: var(--ui-control-height);
  border-bottom: 1px solid var(--ui-color-line);
  background: var(--ui-color-surface);
}

.ui-toolbar {
  flex-wrap: wrap;
}

.ui-toolbar-spacer {
  margin-left: auto;
}

.ui-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--ui-space-3);
}

.ui-cluster {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.ui-grid {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-4);
}

.ui-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--ui-color-line);
}

.ui-panel,
.ui-card {
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-surface);
}

.ui-panel {
  padding: var(--ui-space-4);
}

.ui-card {
  padding: var(--ui-space-3);
}

.ui-button,
.ui-icon-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  cursor: pointer;
  text-decoration: none;
}

.ui-button {
  padding: 0 var(--ui-space-4);
}

.ui-icon-button {
  width: var(--ui-icon-button-size);
  height: var(--ui-icon-button-size);
  padding: 0;
}

.ui-button:hover,
.ui-icon-button:hover {
  background: var(--ui-color-surface-subtle);
}

.ui-button[data-variant="primary"] {
  border-color: var(--ui-color-accent);
  color: var(--ui-color-accent);
}

.ui-button[data-variant="ghost"],
.ui-icon-button[data-variant="ghost"] {
  border-color: transparent;
  background: transparent;
}

.ui-button[data-variant="danger"],
.ui-icon-button[data-variant="danger"] {
  border-color: color-mix(in srgb, var(--ui-color-danger) 42%, var(--ui-color-line));
  color: var(--ui-color-danger);
}

.ui-field {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
}

.ui-field > label,
.ui-label {
  color: var(--ui-color-muted);
  font-size: .82rem;
  font-weight: 600;
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
}

.ui-input,
.ui-select {
  padding: 0 var(--ui-space-3);
}

.ui-textarea {
  min-height: 88px;
  padding: var(--ui-space-2) var(--ui-space-3);
  resize: vertical;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--ui-color-faint);
}

.ui-tabs {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: var(--ui-space-1);
  border-bottom: 1px solid var(--ui-color-line);
}

.ui-tab {
  min-height: var(--ui-control-height);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ui-color-muted);
  cursor: pointer;
  padding: 0 var(--ui-space-3);
}

.ui-tab[aria-selected="true"],
.ui-tab[data-state="active"] {
  border-bottom-color: var(--ui-color-accent);
  color: var(--ui-color-text);
}

.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: var(--ui-space-6);
  background: var(--ui-color-backdrop);
}

.ui-modal,
.ui-dialog {
  width: min(100%, 640px);
  max-height: calc(100dvh - (2 * var(--ui-space-6)));
  overflow: auto;
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-dialog);
}

.ui-dialog-head,
.ui-dialog-body,
.ui-dialog-actions {
  padding: var(--ui-space-4);
}

.ui-dialog-head,
.ui-dialog-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-dialog-head {
  border-bottom: 1px solid var(--ui-color-line);
}

.ui-dialog-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--ui-color-line);
}

.ui-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-md);
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
}

.ui-table th,
.ui-table td {
  padding: var(--ui-space-2) var(--ui-space-3);
  border-bottom: 1px solid var(--ui-color-line);
  text-align: left;
  vertical-align: top;
}

.ui-table th {
  background: var(--ui-color-surface-subtle);
  color: var(--ui-color-muted);
  font-size: .82rem;
  font-weight: 600;
}

.ui-status {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
}

.ui-status[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--ui-color-danger) 30%, var(--ui-color-line));
  background: var(--ui-color-danger-soft);
  color: var(--ui-color-danger);
}

.ui-status[data-tone="success"] {
  border-color: color-mix(in srgb, var(--ui-color-success) 30%, var(--ui-color-line));
  background: var(--ui-color-success-soft);
  color: var(--ui-color-success);
}

.ui-status[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--ui-color-warning) 30%, var(--ui-color-line));
  background: var(--ui-color-warning-soft);
  color: var(--ui-color-warning);
}

.ui-skeleton {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--ui-color-surface-subtle),
    color-mix(in srgb, var(--ui-color-surface) 72%, var(--ui-color-line)),
    var(--ui-color-surface-subtle)
  );
  background-size: 220% 100%;
  animation: ui-skeleton 1.35s linear infinite;
}

.ui-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes ui-skeleton {
  to {
    background-position: -220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-aiklava-ui] *, [data-aiklava-ui] *::before, [data-aiklava-ui] *::after) {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}