wasmeld/crates/wasmeld-console/web/src/styles/app.css

@import "tailwindcss";

@theme {
  --color-canvas: #f3f6f5;
  --color-surface: #ffffff;
  --color-line: #d8e0de;
  --color-ink: #17211f;
  --color-muted: #64716e;
  --color-brand: #1f775e;
  --color-brand-strong: #155a46;
  --color-brand-soft: #e7f3ef;
  --color-cyan-soft: #e5f5f7;
  --color-cyan-strong: #147386;
  --color-amber-soft: #fff3d8;
  --color-amber-strong: #9b6507;
  --color-coral-soft: #ffebe5;
  --color-coral-strong: #b9492f;
  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
    sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

@layer base {
  * {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  html,
  body,
  #app {
    min-height: 100%;
    margin: 0;
  }

  body {
    @apply bg-canvas font-sans text-ink antialiased;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply outline-2 outline-offset-2 outline-brand;
  }

  .frame-root,
  .frame-document {
    @apply overflow-x-hidden bg-canvas;
  }
}

@layer components {
  .btn {
    @apply inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 text-sm font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-45;
  }

  .btn-primary {
    @apply border-brand bg-brand text-white hover:border-brand-strong hover:bg-brand-strong;
  }

  .btn-secondary {
    @apply border-line bg-white text-ink hover:bg-canvas;
  }

  .btn-danger {
    @apply border-coral-strong bg-white text-coral-strong hover:bg-coral-soft;
  }

  .icon-btn {
    @apply inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-line bg-white text-muted transition-colors hover:bg-canvas hover:text-ink disabled:cursor-not-allowed disabled:opacity-45;
  }

  .panel {
    @apply border-line bg-surface rounded-md border;
  }

  .panel-header {
    @apply border-line flex min-h-16 items-center justify-between gap-4 border-b px-5 py-3;
  }

  .panel-header h2 {
    @apply text-base font-semibold;
  }

  .panel-header p {
    @apply mt-0.5 text-xs text-muted;
  }

  .page {
    @apply mx-auto w-full max-w-[1480px] px-4 py-5 sm:px-6 lg:px-8 lg:py-7;
  }

  .page-heading {
    @apply mb-5 flex flex-col justify-between gap-4 sm:flex-row sm:items-end;
  }

  .page-heading h1 {
    @apply mt-1 text-2xl font-bold text-ink;
  }

  .page-heading p {
    @apply mt-1 max-w-3xl text-sm text-muted;
  }

  .eyebrow {
    @apply text-cyan-strong text-[11px] font-bold uppercase;
  }

  .heading-actions {
    @apply flex shrink-0 items-center gap-2;
  }

  .metric-grid {
    @apply mb-5 grid grid-cols-1 border-l border-t border-line sm:grid-cols-2 xl:grid-cols-4;
  }

  .metric {
    @apply flex min-h-24 items-center gap-3 border-b border-r border-line bg-white px-4 py-3;
  }

  .metric-icon {
    @apply flex size-10 shrink-0 items-center justify-center rounded-md;
  }

  .metric-copy {
    @apply min-w-0 flex-1;
  }

  .metric-copy span {
    @apply block text-xs text-muted;
  }

  .metric-copy strong {
    @apply mt-1 block text-2xl font-bold;
  }

  .metric > small {
    @apply self-end whitespace-nowrap pb-1 text-[11px] text-muted;
  }

  .table-wrap {
    @apply w-full overflow-x-auto;
  }

  .data-table {
    @apply w-full min-w-[760px] border-collapse text-left text-sm;
  }

  .data-table th {
    @apply border-line bg-canvas border-b px-4 py-2.5 text-[11px] font-semibold uppercase text-muted;
  }

  .data-table td {
    @apply border-line border-b px-4 py-3 align-middle;
  }

  .data-table tbody tr {
    @apply transition-colors hover:bg-[#f8faf9];
  }

  .data-table tbody tr:last-child td {
    @apply border-b-0;
  }

  .status-badge {
    @apply inline-flex items-center gap-1.5 whitespace-nowrap text-xs font-semibold;
  }

  .status-badge::before {
    content: "";
    @apply size-1.5 rounded-full bg-current;
  }

  .status-running {
    @apply text-brand;
  }

  .status-stopped {
    @apply text-muted;
  }

  .status-faulted {
    @apply text-coral-strong;
  }

  .row-actions {
    @apply flex items-center justify-end gap-1;
  }

  .row-actions button {
    @apply inline-flex size-8 items-center justify-center rounded-md text-muted hover:bg-canvas hover:text-ink disabled:cursor-not-allowed disabled:opacity-35;
  }

  .empty-state {
    @apply flex min-h-56 flex-col items-center justify-center gap-2 px-6 text-center text-muted;
  }

  .empty-state strong {
    @apply text-sm text-ink;
  }

  .empty-state span {
    @apply text-xs;
  }

  .code {
    @apply font-mono text-xs;
  }

  .field {
    @apply block;
  }

  .field > span {
    @apply mb-1.5 block text-xs font-semibold text-muted;
  }

  .input,
  .select,
  .textarea {
    @apply border-line w-full rounded-md border bg-white px-3 text-sm text-ink outline-none transition-colors focus:border-brand;
  }

  .input,
  .select {
    @apply h-10;
  }

  .textarea {
    @apply min-h-36 resize-y py-3 font-mono;
  }

  .dialog-backdrop {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-[#0d1715]/55 p-3 backdrop-blur-[1px];
  }

  .dialog {
    @apply border-line max-h-[calc(100dvh-24px)] w-full max-w-3xl overflow-auto rounded-md border bg-white p-0 shadow-2xl;
  }

  .dialog-header {
    @apply border-line flex items-start justify-between gap-4 border-b px-5 py-4 sm:px-7 sm:py-5;
  }

  .dialog-title {
    @apply flex min-w-0 items-start gap-3;
  }

  .dialog-title > span {
    @apply bg-brand-soft text-brand flex size-10 shrink-0 items-center justify-center rounded-md;
  }

  .dialog-title h2 {
    @apply text-lg font-bold sm:text-xl;
  }

  .dialog-title p {
    @apply mt-1 text-sm text-muted;
  }

  .dialog-body {
    @apply px-5 py-5 sm:px-7;
  }

  .dialog-footer {
    @apply border-line flex items-center justify-end gap-2 border-t bg-[#fafbfb] px-5 py-4 sm:px-7;
  }

  .upload-zone {
    @apply border-line flex min-h-48 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed bg-[#fbfcfc] px-5 text-center text-muted transition-colors hover:border-brand hover:bg-brand-soft;
  }

  .upload-zone input {
    @apply sr-only;
  }

  .upload-zone strong {
    @apply text-sm text-ink;
  }

  .upload-zone span {
    @apply text-xs;
  }

  .form-error {
    @apply border-coral-strong/30 bg-coral-soft text-coral-strong mt-3 rounded-md border px-3 py-2 text-sm;
  }

  .segmented {
    @apply border-line inline-flex rounded-md border bg-canvas p-1;
  }

  .segmented button {
    @apply h-8 rounded-sm px-3 text-xs font-semibold text-muted;
  }

  .segmented button.active {
    @apply bg-white text-ink shadow-sm;
  }

  .skeleton-line {
    @apply h-3 animate-pulse rounded-sm bg-[#dfe6e4];
  }

  .spin {
    animation: spin 0.8s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}