/* Hide Chrome autofill overlay on token/credential inputs */
input[data-no-autofill]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-base-100) inset !important;
}

/* HTMX loading indicators */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; }

/* HTMX swap transitions */
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease-in; }

html {
  overflow-x: hidden;
}

body {
  font-family: "Inter", "Segoe UI", sans-serif;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.workspace-display,
.workspace-brand-title,
.auth-brand-title,
.auth-card-title {
  font-family: "Inter", "Segoe UI", sans-serif;
}

/* ===== Utility classes from redesign ===== */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 50%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow-btn {
  box-shadow: 0 0 20px color-mix(in oklab, var(--color-primary) 25%, transparent);
  transition: all 0.3s ease;
}

.glow-btn:hover {
  box-shadow: 0 0 32px color-mix(in oklab, var(--color-primary) 40%, transparent);
  transform: translateY(-1px);
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

/* ===== Soft focus for all form controls (redesign style) ===== */
/* Remove harsh black outline/border on focus — keep subtle existing border */
select:focus,
input:focus,
textarea:focus,
.select:focus,
.select:focus-within,
.input:focus,
.input:focus-within,
select,
input,
textarea {
  outline: none !important;
  outline-style: none !important;
  --tw-outline-style: none !important;
}

.select,
.input,
textarea.textarea {
  --input-color: color-mix(in oklab, var(--color-base-content) 15%, transparent);
}

.select:focus,
.select:focus-within,
.input:focus,
.input:focus-within,
textarea:focus {
  --input-color: color-mix(in oklab, var(--color-primary) 40%, transparent) !important;
  border-color: color-mix(in oklab, var(--color-primary) 40%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 10%, transparent) !important;
}

/* ===== Sidebar navigation ===== */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  transition: all 0.15s ease;
}

.nav-link:hover {
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
  color: var(--color-base-content);
}

.nav-link.active {
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.nav-link .nav-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.nav-link .nav-badge-coming {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--color-warning) 15%, transparent);
  color: color-mix(in oklab, var(--color-warning) 80%, black 20%);
  letter-spacing: 0.02em;
}

/* ===== Auth screens ===== */
.auth-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at top left, color-mix(in oklab, var(--color-primary) 18%, transparent), transparent 28%),
    radial-gradient(circle at 82% 18%, color-mix(in oklab, var(--color-accent) 16%, transparent), transparent 24%),
    radial-gradient(circle at bottom right, color-mix(in oklab, var(--color-secondary) 16%, transparent), transparent 26%),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-200) 88%, white 12%),
      var(--color-base-200)
    );
}

.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(72px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}

.auth-shell::before {
  width: 26rem;
  height: 26rem;
  top: -8rem;
  left: -7rem;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-primary) 30%, transparent) 0%,
    transparent 70%
  );
}

.auth-shell::after {
  width: 30rem;
  height: 30rem;
  right: -10rem;
  bottom: -12rem;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-secondary) 28%, transparent) 0%,
    transparent 70%
  );
}

.auth-scene,
.auth-grid {
  position: relative;
}

.auth-scene::before,
.auth-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-base-content) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-base-content) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 85%);
  pointer-events: none;
  z-index: -1;
}

.auth-topbar {
  position: relative;
  backdrop-filter: blur(18px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 92%, transparent),
      color-mix(in oklab, var(--color-base-100) 82%, transparent)
    );
  box-shadow:
    0 16px 48px color-mix(in oklab, var(--color-base-content) 8%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 38%, transparent);
}

.auth-layout,
.auth-hero,
.auth-form-card {
  width: 100%;
  min-width: 0;
}

.auth-brand-mark,
.auth-theme-toggle,
.auth-inline-note,
.auth-metric,
.auth-pillar {
  backdrop-filter: blur(16px);
}

.auth-body-text,
.auth-card-copy,
.auth-form,
.auth-footnote {
  font-family: "Inter", "Segoe UI", sans-serif;
}

.auth-card {
  backdrop-filter: blur(22px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-base-100) 92%, transparent),
    color-mix(in oklab, var(--color-base-100) 82%, transparent)
  );
  box-shadow:
    0 30px 80px color-mix(in oklab, var(--color-base-content) 18%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 55%, transparent);
}

.auth-feature-card,
.auth-side-panel,
.auth-fieldset,
.auth-inline-note,
.auth-metric,
.auth-pillar {
  backdrop-filter: blur(14px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 84%, transparent),
      color-mix(in oklab, var(--color-base-100) 74%, transparent)
    );
}

.auth-form-card {
  align-self: center;
  justify-self: stretch;
}

.auth-side-panel {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 80%, transparent),
      color-mix(in oklab, var(--color-base-100) 68%, transparent)
    );
}

.auth-input {
  min-height: 3.5rem;
  padding-inline: 1rem;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.auth-input:focus,
.auth-input:focus-visible {
  border-color: color-mix(in oklab, var(--color-primary) 55%, var(--color-base-300));
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--color-primary) 14%, transparent),
    0 10px 26px color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.auth-form .fieldset {
  gap: 0.5rem;
}

.auth-form .fieldset-legend {
  margin-bottom: 0.2rem;
}

.auth-form .label {
  margin-top: 0.15rem;
  line-height: 1.45;
}

.auth-submit {
  min-height: 3.5rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-primary) 92%, white 8%),
    color-mix(in oklab, var(--color-secondary) 28%, var(--color-primary))
  );
  border: 1px solid color-mix(in oklab, var(--color-primary) 74%, white 26%);
  box-shadow: 0 18px 35px color-mix(in oklab, var(--color-primary) 24%, transparent);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 22px 40px color-mix(in oklab, var(--color-primary) 30%, transparent);
}

.auth-submit:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-primary) 52%, transparent);
  outline-offset: 3px;
}

/* ===== Workspace (dashboard) ===== */
.workspace-shell {
  position: relative;
  min-height: 100vh;
}

.workspace-main {
  position: relative;
}

.workspace-page {
  position: relative;
  z-index: 1;
}

.workspace-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.workspace-panel,
.workspace-stat-card,
.workspace-step,
.workspace-dialog .modal-box {
  backdrop-filter: blur(20px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 93%, transparent),
      color-mix(in oklab, var(--color-base-100) 84%, transparent)
    );
  box-shadow:
    0 22px 60px color-mix(in oklab, var(--color-base-content) 10%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 45%, transparent);
}

.workspace-hero {
  overflow: hidden;
  position: relative;
}

.workspace-hero::after {
  content: "";
  position: absolute;
  inset: auto -4rem -6rem auto;
  width: 14rem;
  height: 14rem;
  border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent 68%);
  pointer-events: none;
}

/* Legacy nav-link styles (for pages that still use workspace-nav-link) */
.workspace-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 0.85rem 0.95rem;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
  transition: background 150ms ease, transform 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.workspace-nav-link:hover {
  background: color-mix(in oklab, var(--color-base-200) 86%, transparent);
  color: var(--color-base-content);
  transform: translateX(2px);
}

.workspace-nav-link-active {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-neutral) 90%, black 10%),
    color-mix(in oklab, var(--color-base-content) 86%, var(--color-neutral))
  );
  color: var(--color-neutral-content);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--color-base-content) 18%, transparent);
}

.workspace-nav-link-active:hover {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-neutral) 88%, black 12%),
    color-mix(in oklab, var(--color-base-content) 84%, var(--color-neutral))
  );
  color: var(--color-neutral-content);
  transform: none;
}

.workspace-project-card {
  position: relative;
  overflow: hidden;
}

.workspace-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-primary) 8%, transparent),
    transparent 34%,
    color-mix(in oklab, var(--color-secondary) 7%, transparent)
  );
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.workspace-project-card:hover::before {
  opacity: 1;
}

.workspace-channel-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.workspace-channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px color-mix(in oklab, var(--color-base-content) 8%, transparent);
}

.workspace-channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.workspace-tabs {
  isolation: isolate;
}

.workspace-tabs .tab {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  background: color-mix(in oklab, var(--color-base-100) 72%, transparent);
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
}

.workspace-tabs .tab-active {
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: 0 -8px 30px color-mix(in oklab, var(--color-base-content) 8%, transparent);
}

.workspace-dialog::backdrop {
  background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
  backdrop-filter: blur(4px);
}

/* ===== Coming soon stub ===== */
.coming-soon-card {
  text-align: center;
  padding: 4rem 2rem;
  border: 2px dashed color-mix(in oklab, var(--color-base-content) 15%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in oklab, var(--color-base-100) 60%, transparent);
}

/* ===== Theme transition ===== */
html * {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

html .btn,
html .badge {
  transition: none;
}

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  .auth-scene::before,
  .auth-grid::before {
    opacity: 0.45;
  }

  .auth-form-card {
    align-self: stretch;
  }

  .auth-shell::before {
    width: 18rem;
    height: 18rem;
  }

  .auth-shell::after {
    width: 20rem;
    height: 20rem;
  }
}

@media (max-width: 640px) {
  .auth-scene {
    padding-inline: 0.75rem;
    padding-block: 0.75rem;
  }

  .auth-topbar {
    border-radius: 1.15rem;
  }

  .auth-layout {
    gap: 0.9rem;
    padding-block: 0.9rem;
  }

  .auth-form-card {
    order: -1;
  }

  .auth-hero,
  .auth-form-card .card-body {
    padding: 1rem;
  }

  .auth-hero .workspace-display,
  .auth-form-card .auth-card-title {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.02;
  }

  .auth-hero .workspace-display + p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .auth-feature-card,
  .auth-side-panel,
  .auth-fieldset,
  .auth-inline-note,
  .auth-metric,
  .auth-pillar {
    border-radius: 1rem;
  }
}

@media (max-width: 360px) {
  .auth-scene {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: 0;
  }

  .auth-layout,
  .auth-topbar,
  .auth-hero,
  .auth-form-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .auth-topbar,
  .auth-hero,
  .auth-form-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .auth-topbar {
    padding-inline: 0.75rem;
    padding-block: 0.7rem;
  }

  .auth-hero {
    padding-inline: 0.9rem;
    padding-block: 1rem;
  }

  .auth-form-card .card-body {
    padding-inline: 0.9rem;
    padding-block: 1rem;
  }

  .auth-hero .workspace-display {
    font-size: clamp(1.75rem, 9vw, 2.2rem);
  }

  .auth-feature-card,
  .auth-side-panel,
  .auth-inline-note {
    display: none;
  }

  .auth-form .label,
  .auth-card-copy,
  .auth-footnote {
    font-size: 0.875rem;
  }
}

/* ===== Signal theme tokens — daisyUI light/dark ===== */
html[data-theme="light"] {
  color-scheme: light;
  --color-primary: #235dff;
  --color-primary-content: #ffffff;
  --color-secondary: #0e7490;
  --color-secondary-content: #ffffff;
  --color-accent: #38bdf8;
  --color-accent-content: #082f49;
  --color-neutral: #19324b;
  --color-neutral-content: #f4f8ff;
  --color-base-100: #f4f8ff;
  --color-base-200: #eef4ff;
  --color-base-300: #dde9ff;
  --color-base-content: #102033;
  --color-info: #1d4ed8;
  --color-info-content: #ffffff;
  --color-success: #0f9d73;
  --color-success-content: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-content: #3b2300;
  --color-error: #e34d61;
  --color-error-content: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #5b84ff;
  --color-primary-content: #08111f;
  --color-secondary: #22b8cf;
  --color-secondary-content: #051b21;
  --color-accent: #7dd3fc;
  --color-accent-content: #082235;
  --color-neutral: #d9e7ff;
  --color-neutral-content: #08111f;
  --color-base-100: #08111f;
  --color-base-200: #0f1b30;
  --color-base-300: #13243b;
  --color-base-content: #eaf2ff;
  --color-info: #60a5fa;
  --color-info-content: #08111f;
  --color-success: #36d399;
  --color-success-content: #08111f;
  --color-warning: #fbbf24;
  --color-warning-content: #221400;
  --color-error: #fb7185;
  --color-error-content: #290a12;
}