@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-secondary {
    @apply rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-800 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-50 dark:hover:border-slate-500 dark:hover:bg-slate-800;
  }

  .btn-secondary-compact {
    @apply rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-800 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-50 dark:hover:border-slate-500 dark:hover:bg-slate-800;
  }

  .btn-secondary-inline {
    @apply inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-800 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-50 dark:hover:border-slate-500 dark:hover:bg-slate-800;
  }

  .btn-secondary-small {
    @apply inline-flex items-center rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-800 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-50 dark:hover:border-slate-500 dark:hover:bg-slate-800;
  }

  .btn-secondary-icon {
    @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-800 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-50 dark:hover:border-slate-500 dark:hover:bg-slate-800;
  }

  .link-card-secondary {
    @apply flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-800 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-50 dark:hover:border-slate-500 dark:hover:bg-slate-800;
  }

  .surface-card {
    @apply rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900;
  }

  .surface-card-sm {
    @apply rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900;
  }

  .surface-card-subtle {
    @apply rounded-2xl border border-slate-200 bg-slate-50 p-5 dark:border-slate-700 dark:bg-slate-800;
  }

  .telemetry-row {
    @apply transition-colors duration-150;
  }

  .telemetry-row:hover > td {
    @apply bg-indigo-50/50 dark:bg-slate-800/70;
  }

  .telemetry-row-alert {
    @apply bg-rose-50/40 dark:bg-rose-950/10;
  }

  .telemetry-row-alert:hover > td {
    @apply bg-rose-50/80 dark:bg-rose-950/20;
  }
}

trix-toolbar [data-trix-button-group="file-tools"] {
  display: none;
}

trix-toolbar .trix-button-group {
  border-radius: 0.9rem;
}

trix-toolbar .trix-button {
  min-width: 2.25rem;
}

trix-editor {
  @apply mt-2 min-h-48 w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100;
}

trix-editor:focus-visible {
  outline: none;
}

.trix-content {
  @apply prose prose-slate max-w-none dark:prose-invert;
}

.dark trix-toolbar .trix-button-group {
  border-color: rgb(51 65 85 / 1);
  background-color: rgb(15 23 42 / 1);
}

.dark trix-toolbar .trix-button {
  color: rgb(226 232 240 / 1);
  border-bottom-color: rgb(51 65 85 / 1);
}

.dark trix-toolbar .trix-button--icon::before {
  filter: invert(1) brightness(1.15);
  opacity: 0.85;
}

.dark trix-toolbar .trix-button:not(:first-child) {
  border-left-color: rgb(51 65 85 / 1);
}

.dark trix-toolbar .trix-button.trix-active {
  background: rgb(49 46 129 / 1);
  color: rgb(255 255 255 / 1);
}

.dark trix-toolbar .trix-button.trix-active::before {
  opacity: 1;
}

.dark trix-toolbar .trix-dialog {
  background: rgb(15 23 42 / 1);
  border-top-color: rgb(71 85 105 / 1);
  box-shadow: 0 10px 30px rgb(2 6 23 / 0.45);
}

.dark trix-toolbar .trix-input--dialog {
  color: rgb(241 245 249 / 1);
  border-color: rgb(51 65 85 / 1);
  background-color: rgb(2 6 23 / 1);
}