@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@import "./branding.css";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f3f4f6;
  --color-sidebar: #f7f8fa;
  --color-sidebar-muted: #4b5563;
  --color-sidebar-active: #e7ebf0;
  --color-sidebar-active-fg: #111827;

  --color-fg: #0b0f0e;
  --color-fg-muted: #4b5563;

  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  --color-primary: #0b0f0e;
  --color-primary-hover: #111827;
  --color-primary-fg: #ffffff;

  --color-brand: #47e07a;
  --color-brand-950: #1f2c1b;
  --color-brand-soft: #eafae6;

  --color-focus: #64748b;

  --shadow-tint-rgb: 15 23 42;
  --shadow-elevation-1: 0 18px 40px -30px rgb(var(--shadow-tint-rgb) / 0.08);
  --shadow-elevation-2: 0 24px 52px -30px rgb(var(--shadow-tint-rgb) / 0.1),
    0 12px 24px -18px rgb(var(--shadow-tint-rgb) / 0.06);
  --shadow-elevation-3: 0 42px 90px -42px rgb(var(--shadow-tint-rgb) / 0.18),
    0 20px 34px -24px rgb(var(--shadow-tint-rgb) / 0.1);

  --shadow-press-rest: 0 0 0 0 rgb(var(--shadow-tint-rgb) / 0);
  --shadow-press-hover: 0 14px 32px -24px rgb(var(--shadow-tint-rgb) / 0.14);
  --shadow-press-active: inset 0 1px 0 rgb(255 255 255 / 0.38),
    0 10px 20px -20px rgb(var(--shadow-tint-rgb) / 0.1);

  --overlay-backdrop: rgb(15 23 42 / 0.28);
  --overlay-surface: rgb(255 255 255 / 0.9);
  --overlay-border: rgb(255 255 255 / 0.68);
  --lume-top-border: rgb(255 255 255 / 0.28);
}

@layer base {
  :root {
    color-scheme: light;
  }

  html,
  body {
    background-color: var(--color-canvas);
    color: var(--color-fg);
  }

  button:not(:disabled),
  [type="button"]:not(:disabled),
  [type="submit"]:not(:disabled),
  [type="reset"]:not(:disabled) {
    cursor: pointer;
  }

  button:disabled,
  [type="button"]:disabled,
  [type="submit"]:disabled,
  [type="reset"]:disabled {
    cursor: not-allowed;
  }

  #modal-container dialog.opacity-0,
  #peek-container dialog.opacity-0 {
    pointer-events: none;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: #0f1114;
    --color-surface: #171a1f;
    --color-surface-2: #1f2329;
    --color-sidebar: #1b2026;
    --color-sidebar-muted: #c3cad3;
    --color-sidebar-active: #2a3038;
    --color-sidebar-active-fg: #f8fafc;
    --color-fg: #f3f5f7;
    --color-fg-muted: #c3cad3;
    --color-border: #313740;
    --color-border-strong: #444b55;
    --color-primary: #f3f5f7;
    --color-primary-hover: #ffffff;
    --color-primary-fg: #0f1114;
    --color-focus: #a0a8b3;

    --shadow-elevation-1: inset 0 1px 0 rgb(255 255 255 / 0.1);
    --shadow-elevation-2: inset 0 1px 0 rgb(255 255 255 / 0.14),
      0 22px 45px -35px rgb(0 0 0 / 0.62);
    --shadow-elevation-3: inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 32px 64px -42px rgb(0 0 0 / 0.74);
    --shadow-press-rest: inset 0 1px 0 rgb(255 255 255 / 0.1);
    --shadow-press-hover: inset 0 1px 0 rgb(255 255 255 / 0.16),
      0 14px 28px -24px rgb(0 0 0 / 0.6);
    --shadow-press-active: inset 0 1px 0 rgb(255 255 255 / 0.24),
      inset 0 -1px 0 rgb(0 0 0 / 0.28);

    --overlay-backdrop: rgb(3 5 7 / 0.6);
    --overlay-surface: rgb(24 28 34 / 0.9);
    --overlay-border: rgb(255 255 255 / 0.16);
    --lume-top-border: rgb(255 255 255 / 0.18);
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    textarea,
    select
  ) {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-fg);
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    textarea
  )::placeholder {
    color: color-mix(in srgb, var(--color-fg-muted) 88%, transparent);
    opacity: 1;
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    textarea,
    select
  ):focus {
    border-color: var(--color-focus);
    --tw-ring-color: var(--color-focus);
    --tw-ring-offset-color: var(--color-surface);
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    textarea,
    select
  ):disabled {
    background-color: var(--color-surface-2);
    color: var(--color-fg-muted);
  }
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@layer components {
  .elevation-1 {
    box-shadow: var(--shadow-elevation-1);
  }

  .elevation-2 {
    box-shadow: var(--shadow-elevation-2);
  }

  .elevation-3 {
    box-shadow: var(--shadow-elevation-3);
  }

  .elevation-pressable {
    box-shadow: var(--shadow-press-rest);
    transition: box-shadow 150ms ease, transform 150ms ease, background-color 120ms ease;
  }

  .elevation-pressable:hover {
    box-shadow: var(--shadow-press-hover);
    transform: translateY(-1px);
  }

  .elevation-pressable:active {
    box-shadow: var(--shadow-press-active);
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .elevation-pressable {
      transition: background-color 120ms ease;
    }

    .elevation-pressable:hover,
    .elevation-pressable:active {
      transform: none;
    }
  }

  .overlay-dialog::backdrop {
    background-color: var(--overlay-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .overlay-panel {
    background-color: var(--overlay-surface);
    border: 1px solid var(--overlay-border);
    box-shadow: var(--shadow-elevation-3), inset 0 1px 0 var(--lume-top-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  @media (min-width: 640px) {
    .peek-panel-shell {
      border-top-width: 0;
    }
  }

  .sidebar-footer-dropup[open] .sidebar-footer-dropup-menu {
    animation: sidebar-dropup-in 120ms ease-out;
  }

  .account-utility-item {
    @apply flex h-8 w-full items-center gap-x-2 rounded-md px-2 text-[13px] font-medium text-fg transition hover:bg-surface-2 focus:outline-none focus:ring-2 focus:ring-focus focus:ring-offset-2 focus:ring-offset-surface;
  }

  @keyframes sidebar-dropup-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .affiliate-theme-scope {}

  .affiliate-portal-page {
    @apply bg-canvas text-fg;
  }

  .affiliate-portal-accent-border {
    @apply border-border;
  }

  .affiliate-portal-accent-text {
    @apply text-fg;
  }

  .affiliate-portal-accent-fill {
    @apply bg-primary text-primary-fg;
  }

  .affiliate-portal-outline {
    @apply border-border text-fg;
  }

  .btn {
    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg border border-transparent px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-sm {
    @apply px-3 py-1.5;
  }

  .btn-primary {
    @apply bg-primary text-primary-fg hover:bg-primary-hover;
  }

  .btn-secondary {
    @apply border-border bg-surface text-fg hover:bg-surface-2;
  }

  .btn-ghost {
    @apply bg-transparent text-fg-muted hover:bg-surface-2 hover:text-fg;
  }

  .btn-danger {
    border-color: color-mix(in srgb, var(--color-border) 56%, var(--color-rose-500) 44%);
    background-color: color-mix(in srgb, var(--color-surface) 92%, var(--color-rose-500) 8%);
    color: color-mix(in srgb, var(--color-fg) 68%, var(--color-rose-700) 32%);
  }

  .btn-danger:hover {
    background-color: color-mix(in srgb, var(--color-surface) 84%, var(--color-rose-500) 16%);
  }

  .shell-topbar-actions {
    @apply flex min-w-0 items-center justify-end gap-x-2 sm:gap-x-3;
  }

  .shell-topbar-page-actions {
    @apply flex w-max items-center gap-2 sm:w-auto;
  }

  .shell-topbar-page-actions > .btn,
  .shell-topbar-page-actions > a.rounded-lg,
  .shell-topbar-page-actions > button.rounded-lg,
  .shell-topbar-page-actions > form > .btn,
  .shell-topbar-page-actions > form > button.rounded-lg {
    @apply px-3 py-1.5 shadow-none;
  }

  .form-actions {
    @apply flex flex-wrap items-center gap-2;
  }

  .form-actions-end {
    @apply w-full justify-end;
  }

  .form-actions-split {
    @apply w-full justify-between;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    box-shadow: var(--shadow-press-rest);
    transition: box-shadow 150ms ease, transform 150ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-danger:hover {
    box-shadow: var(--shadow-press-hover);
    transform: translateY(-1px);
  }

  .btn-primary:active,
  .btn-secondary:active,
  .btn-danger:active {
    box-shadow: var(--shadow-press-active);
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-secondary,
    .btn-danger {
      transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-danger:hover,
    .btn-primary:active,
    .btn-secondary:active,
    .btn-danger:active {
      transform: none;
    }
  }

  .link {
    @apply text-fg underline decoration-border underline-offset-4 hover:decoration-border-strong;
  }

  .link-muted {
    @apply text-fg-muted underline decoration-border underline-offset-4 hover:text-fg hover:decoration-border-strong;
  }

  .status-chip {
    @apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium;
  }

  .status-chip-neutral {
    @apply border-border bg-surface-2 text-fg-muted;
  }

  .status-chip-success {
    border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-emerald-500) 40%);
    background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-emerald-500) 12%);
    color: color-mix(in srgb, var(--color-fg) 68%, var(--color-emerald-700) 32%);
  }

  .status-chip-warning {
    border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-amber-500) 40%);
    background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-amber-500) 12%);
    color: color-mix(in srgb, var(--color-fg) 68%, var(--color-amber-700) 32%);
  }

  .status-chip-error {
    border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-rose-500) 40%);
    background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-rose-500) 12%);
    color: color-mix(in srgb, var(--color-fg) 68%, var(--color-rose-700) 32%);
  }

  .status-chip-info {
    border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-blue-500) 40%);
    background-color: color-mix(in srgb, var(--color-surface) 88%, var(--color-blue-500) 12%);
    color: color-mix(in srgb, var(--color-fg) 72%, var(--color-blue-700) 28%);
  }

  .status-dot {
    @apply mr-1.5 h-1.5 w-1.5 rounded-full;
  }

  .status-dot-neutral {
    @apply bg-fg-muted;
  }

  .status-dot-success {
    background-color: color-mix(in srgb, var(--color-emerald-500) 78%, var(--color-fg) 22%);
  }

  .status-dot-warning {
    background-color: color-mix(in srgb, var(--color-amber-500) 78%, var(--color-fg) 22%);
  }

  .status-dot-error {
    background-color: color-mix(in srgb, var(--color-rose-500) 78%, var(--color-fg) 22%);
  }

  .status-dot-info {
    background-color: color-mix(in srgb, var(--color-blue-500) 78%, var(--color-fg) 22%);
  }

  .status-flash-success {
    border-color: color-mix(in srgb, var(--color-border) 58%, var(--color-emerald-500) 42%);
    background-color: color-mix(in srgb, var(--color-surface) 90%, var(--color-emerald-500) 10%);
    color: color-mix(in srgb, var(--color-fg) 72%, var(--color-emerald-700) 28%);
  }

  .status-flash-warning {
    border-color: color-mix(in srgb, var(--color-border) 58%, var(--color-amber-500) 42%);
    background-color: color-mix(in srgb, var(--color-surface) 90%, var(--color-amber-500) 10%);
    color: color-mix(in srgb, var(--color-fg) 72%, var(--color-amber-700) 28%);
  }

  .status-flash-error {
    border-color: color-mix(in srgb, var(--color-border) 58%, var(--color-rose-500) 42%);
    background-color: color-mix(in srgb, var(--color-surface) 90%, var(--color-rose-500) 10%);
    color: color-mix(in srgb, var(--color-fg) 72%, var(--color-rose-700) 28%);
  }

  .status-flash-info {
    border-color: var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-fg);
  }

  .sidebar-link-active {
    background: var(--color-sidebar-active);
    color: var(--color-sidebar-active-fg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-strong) 58%, transparent);
  }

  .sidebar-link-inactive {
    color: var(--color-sidebar-muted);
  }

  .sidebar-link-inactive:hover {
    background: color-mix(in srgb, var(--color-sidebar-active) 38%, transparent);
    color: var(--color-fg);
  }

  /* Dark-mode bridge for legacy neutral utility classes in older views. */
  html[data-theme="dark"] :is(
    .text-gray-900,
    .text-gray-800,
    .text-gray-700,
    .text-slate-900,
    .text-slate-800,
    .text-zinc-900,
    .text-zinc-800,
    .text-neutral-900,
    .text-neutral-800
  ) {
    color: var(--color-fg) !important;
  }

  html[data-theme="dark"] :is(
    .text-gray-600,
    .text-gray-500,
    .text-gray-400,
    .text-slate-700,
    .text-slate-600,
    .text-slate-500,
    .text-zinc-700,
    .text-zinc-600,
    .text-zinc-500,
    .text-neutral-700,
    .text-neutral-600,
    .text-neutral-500
  ) {
    color: var(--color-fg-muted) !important;
  }

  html[data-theme="dark"] :is(
    .bg-gray-50,
    .bg-gray-100,
    .bg-slate-50,
    .bg-slate-100,
    .bg-zinc-50,
    .bg-zinc-100,
    .bg-neutral-50,
    .bg-neutral-100
  ) {
    background-color: var(--color-surface-2) !important;
  }

  html[data-theme="dark"] .bg-white {
    background-color: var(--color-surface) !important;
  }

  html[data-theme="dark"] .bg-white\/80 {
    background-color: color-mix(in srgb, var(--color-surface) 80%, transparent) !important;
  }

  html[data-theme="dark"] .bg-white\/70 {
    background-color: color-mix(in srgb, var(--color-surface) 70%, transparent) !important;
  }

  html[data-theme="dark"] .bg-white\/60 {
    background-color: color-mix(in srgb, var(--color-surface) 60%, transparent) !important;
  }

  html[data-theme="dark"] :is(
    .border-gray-100,
    .border-gray-200,
    .border-gray-300,
    .border-slate-100,
    .border-slate-200,
    .border-slate-300,
    .border-zinc-100,
    .border-zinc-200,
    .border-zinc-300,
    .border-neutral-100,
    .border-neutral-200,
    .border-neutral-300
  ) {
    border-color: var(--color-border) !important;
  }

  html[data-theme="dark"] :is(
    .hover\:bg-gray-50:hover,
    .hover\:bg-gray-100:hover,
    .hover\:bg-slate-50:hover,
    .hover\:bg-slate-100:hover
  ) {
    background-color: var(--color-surface-2) !important;
  }

  html[data-theme="dark"] :is(
    .hover\:text-gray-700:hover,
    .hover\:text-gray-800:hover,
    .hover\:text-slate-700:hover,
    .hover\:text-slate-800:hover
  ) {
    color: var(--color-fg) !important;
  }

  .app-main-copy {
    @apply text-[15px] leading-6 sm:text-sm sm:leading-6;
  }

  .index-table-card {
    @apply overflow-hidden rounded-xl border border-border bg-surface;
  }

  .index-table {
    @apply min-w-full divide-y divide-border;
  }

  .index-table-head {
    @apply bg-surface-2;
  }

  .index-table-header {
    @apply px-4 py-2.5 text-left text-[12px] font-medium tracking-[0.01em] text-fg-muted;
  }

  .index-table-body {
    @apply divide-y divide-border bg-surface;
  }

  .index-table-cell {
    @apply px-4 py-3 align-middle text-sm leading-5 text-fg;
  }

  .index-table-summary {
    @apply border-b border-border px-4 py-3 text-sm leading-5 text-fg cursor-pointer hover:bg-surface-2;
  }

  .dense-table-card {
    @apply overflow-hidden rounded-xl border border-border bg-surface;
  }

  .dense-table {
    @apply min-w-full divide-y divide-border;
  }

  .dense-table-head {
    @apply bg-surface-2;
  }

  .dense-table-header {
    @apply px-3 py-2 text-left text-[12px] font-medium tracking-[0.01em] text-fg-muted;
  }

  .dense-table-body {
    @apply divide-y divide-border bg-surface;
  }

  .dense-table-cell {
    @apply px-3 py-2.5 align-middle text-sm leading-5 text-fg;
  }

  .dense-table-summary {
    @apply border-b border-border px-3 py-2.5 text-sm leading-5 text-fg cursor-pointer hover:bg-surface-2;
  }

  .dense-table-actions {
    @apply inline-flex flex-wrap items-center justify-end gap-1.5;
  }

  .dense-table-action {
    @apply inline-flex min-h-7 items-center justify-center whitespace-nowrap rounded-md border border-border-strong bg-surface px-2 py-1 text-xs font-medium text-fg transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-surface;
  }

  .dense-table-action-primary {
    @apply border-transparent bg-primary text-primary-fg hover:bg-primary-hover;
  }

  @media (max-width: 639px) {
    .app-main-copy :where(
      input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="file"]),
      select,
      textarea
    ) {
      font-size: 16px !important;
      line-height: 1.5;
    }
  }

  .index-filters {
    @apply mt-4 rounded-xl border border-border bg-surface p-4;
  }

  .index-filters-grid {
    @apply grid gap-3;
  }

  .index-filter-field {
    @apply block text-sm;
  }

  .index-filter-label {
    @apply mb-1 block text-fg-muted;
  }

  .index-filter-input {
    @apply block w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-fg placeholder:text-fg-muted;
  }

  .index-filter-clear-link {
    @apply inline-flex items-center gap-1 rounded-full border border-border bg-surface px-2 py-0.5 text-[11px] font-medium text-fg-muted transition-colors hover:border-border-strong hover:bg-surface hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-surface;
  }

  .index-filters-chips {
    @apply mt-3 flex flex-wrap items-center gap-2;
  }

  .index-filter-chip {
    @apply inline-flex items-center gap-1 rounded-full border border-border bg-surface-2 px-2 py-0.5 text-[11px] font-medium transition-colors hover:border-border-strong hover:bg-surface;
  }

  .app-table {
    @apply w-full text-left text-sm;
  }

  .app-table thead {
    @apply bg-surface-2 text-fg-muted;
  }

  .app-table th {
    @apply px-4 py-2.5 text-left text-[12px] font-medium tracking-[0.01em] text-fg-muted;
  }

  .app-table td {
    @apply px-4 py-3 align-middle text-sm leading-5 text-fg;
  }

  .app-table tbody tr {
    @apply border-t border-border;
  }

  .app-table-row-link {
    @apply cursor-pointer transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset;
  }

  .pagy.info {
    @apply text-sm text-fg-muted;
  }

  .pagy.nav {
    @apply flex flex-wrap items-center gap-1;
  }

  .pagy.nav a {
    @apply inline-flex min-h-8 min-w-8 items-center justify-center rounded-lg border border-border bg-surface px-2 text-xs font-medium text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2;
  }

  .pagy.nav a:hover {
    @apply bg-surface-2 text-fg;
  }

  .pagy.nav a.current {
    @apply border-primary bg-primary text-primary-fg;
  }

  .pagy.nav a.gap {
    @apply min-w-6 border-transparent bg-transparent px-1 text-xs text-fg-muted;
  }

  .pagy.nav a.gap:hover {
    @apply bg-transparent text-fg-muted;
  }

  .pagy.nav a[aria-disabled="true"]:not(.current):not(.gap) {
    @apply cursor-default border-border bg-surface-2 text-fg-muted;
  }

  .ops-surface {
    @apply rounded-2xl border border-border bg-surface p-5 sm:p-6;
  }

  .ops-card-header {
    @apply flex flex-col gap-1;
  }

  .ops-card-title {
    @apply text-lg font-semibold text-fg;
  }

  .ops-card-subtitle {
    @apply text-sm text-fg-muted;
  }

  .ops-metric-card {
    @apply rounded-xl border border-border bg-surface-2 px-4 py-3;
  }

  .ops-metric-label {
    @apply text-[11px] font-semibold text-fg-muted;
  }

  .ops-metric-value {
    @apply mt-1 text-2xl font-semibold text-fg;
  }

  .ops-metric-footnote {
    @apply mt-1 text-xs text-fg-muted;
  }

  .ops-alert {
    @apply rounded-xl border p-4 text-sm;
  }

  .ops-alert-warning {
    @apply border-amber-200 bg-amber-50 text-amber-900;
  }

  .ops-alert-error {
    @apply border-rose-200 bg-rose-50 text-rose-800;
  }

  .nav-section-label {
    @apply px-3 text-xs font-semibold text-fg-muted;
  }

  .section-label {
    @apply text-[11px] font-semibold text-fg-muted;
  }

  .metric-label {
    @apply text-xs font-semibold text-fg-muted;
  }

  .ops-table-wrap {
    @apply overflow-x-auto rounded-xl border border-border;
  }

  .ops-table {
    @apply w-full min-w-full divide-y divide-border bg-surface text-sm;
  }

  .ops-table thead {
    @apply bg-surface-2;
  }

  .ops-table tbody {
    @apply divide-y divide-border;
  }

  .ops-table-head-cell {
    @apply px-3 py-2 text-left text-[12px] font-medium tracking-[0.01em] text-fg-muted;
  }

  .ops-table-cell {
    @apply px-3 py-2.5 align-top text-sm leading-5 text-fg;
  }

  .ops-table-empty {
    @apply px-3 py-7 text-center text-sm text-fg-muted;
  }

  .ops-table-actions {
    @apply inline-flex flex-wrap items-center justify-end gap-1.5;
  }

  .ops-table-action {
    @apply inline-flex min-h-7 items-center justify-center whitespace-nowrap rounded-md border border-border-strong bg-surface px-2 py-1 text-xs font-medium text-fg transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-surface;
  }

  .ops-table-action-primary {
    @apply border-transparent bg-primary text-primary-fg hover:bg-primary-hover;
  }
}