/* ============================================================
   Kaivo theme — Web Awesome design token overrides
   ============================================================ */

/* --- Link decoration --- */
:root,
.wa-light,
.wa-dark .wa-invert {
  --wa-link-decoration-default: underline
    color-mix(in oklab, var(--wa-color-text-link) 40%, transparent);
  --wa-link-decoration-hover: underline;
}

/* --- Color palette ---
   Override WebAwesome's default gray scale to match Kaivo brand guidelines.
   Anchored to the designer's values at gray-10 (Dark), gray-20 (Dark Gray),
   gray-40 (Mid Gray), and gray-95 (Light Gray). Intermediate tints are
   interpolated for a smooth ramp. */
:root {
  --wa-color-gray-05: #090a11;
  --wa-color-gray-10: #16171d; /* Dark */
  --wa-color-gray-20: #303035; /* Dark Gray */
  --wa-color-gray-30: #424245;
  --wa-color-gray-40: #555555; /* Mid Gray */
  --wa-color-gray-50: #737373;
  --wa-color-gray-60: #919191;
  --wa-color-gray-70: #afafaf;
  --wa-color-gray-80: #cdcdcd;
  --wa-color-gray-90: #ebebeb;
  --wa-color-gray-95: #fafafa; /* Light Gray */
}

:root {
  /* ==========================================================
     Typography tokens
     ========================================================== */

  /* --- Font families --- */
  --wa-font-family-body: "PT Mono", ui-monospace, monospace;
  --wa-font-family-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-code: "PT Mono", ui-monospace, monospace;
  --wa-font-family-longform: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* --- Font weights --- */
  --wa-font-weight-light: 400;
  --wa-font-weight-normal: 400;
  --wa-font-weight-semibold: 600;
  --wa-font-weight-bold: 700;

  --wa-font-weight-body: var(--wa-font-weight-normal);
  --wa-font-weight-heading: var(--wa-font-weight-bold);
  --wa-font-weight-code: var(--wa-font-weight-normal);
  --wa-font-weight-longform: var(--wa-font-weight-normal);
  --wa-font-weight-action: var(--wa-font-weight-semibold);

  /* --- Line heights --- */
  --wa-line-height-condensed: 1.2;
  --wa-line-height-normal: 1.6;
  --wa-line-height-expanded: 2;

  /* --- Kaivo custom: letter-spacing tokens --- */
  --kaivo-letter-spacing-heading: -0.02em;
  --kaivo-letter-spacing-heading-lg: -0.025em;
  --kaivo-letter-spacing-label: 0.06em;
  --kaivo-letter-spacing-nav: -0.01em;

  /* ==========================================================
     Brand color scale
     ========================================================== */
  --wa-color-brand-95: #f8f8f9;
  --wa-color-brand-90: #ededef;
  --wa-color-brand-80: #d4d4d8;
  --wa-color-brand-70: #a1a1aa;
  --wa-color-brand-60: #71717a;
  --wa-color-brand-50: #52525b;
  --wa-color-brand-40: #3f3f46;
  --wa-color-brand-30: #303035;
  --wa-color-brand-20: #27272a;
  --wa-color-brand-10: #1e1e22;
  --wa-color-brand-05: #16171d;

  /* ==========================================================
     Foundational colors
     ========================================================== */

  /* --- Surfaces --- */
  --wa-color-surface-raised: #ffffff;
  --wa-color-surface-default: #fafafa;
  --wa-color-surface-lowered: #f0f1f3;
  --wa-color-surface-border: #e5e7eb;

  /* --- Text --- */
  --wa-color-text-normal: #16171d;
  --wa-color-text-quiet: #555555;
  --wa-color-text-link: #7c5cbf;

  /* --- Overlays --- */
  --wa-color-overlay-modal: rgba(22, 23, 29, 0.5);
  --wa-color-overlay-inline: rgba(22, 23, 29, 0.06);

  /* --- Shadow color --- */
  --wa-color-shadow: rgba(22, 23, 29, 0.06);

  /* --- Focus --- */
  --wa-color-focus: #7c5cbf;

  /* --- Kaivo custom: info / purple semantic tokens --- */
  --kaivo-info-fill-quiet: #f3ebff;
  --kaivo-info-fill-normal: #e0d4f5;
  --kaivo-info-fill-loud: #7c5cbf;
  --kaivo-info-border-quiet: #e0d4f5;
  --kaivo-info-border-normal: #c4b0e6;
  --kaivo-info-border-loud: #7c5cbf;
  --kaivo-info-on-quiet: #7c5cbf;
  --kaivo-info-on-normal: #5b3d9e;
  --kaivo-info-on-loud: #ffffff;

  /* --- Kaivo custom: tinted surface tokens --- */
  --kaivo-surface-green: #b3fff1;
  --kaivo-surface-green-tint: #b3fff1;
  --kaivo-surface-green-subtle: #e6fff9;
  --kaivo-surface-purple: #f3ebff;
  --kaivo-surface-purple-tint: #f3ebff;
  --kaivo-surface-purple-subtle: #f8f4ff;

  /* ==========================================================
     Border and radius tokens
     ========================================================== */
  --wa-border-radius-scale: 1.3;

  /* ==========================================================
     Shadow tokens
     ========================================================== */
  --wa-shadow-spread-scale: -0.75;
  --wa-shadow-s: 0 1px 3px rgba(22, 23, 29, 0.04);
  --wa-shadow-m: 0 6px 24px rgba(22, 23, 29, 0.07);
  --wa-shadow-l: 0 8px 32px rgba(22, 23, 29, 0.12);

  /* ==========================================================
     Form control tokens
     ========================================================== */
  --wa-form-control-background-color: var(--wa-color-surface-raised);
  --wa-form-control-border-color: var(--wa-color-surface-border);
  --wa-form-control-border-style: var(--wa-border-style);
  --wa-form-control-border-width: var(--wa-border-width-s);
  --wa-form-control-border-radius: var(--wa-border-radius-m);

  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

  --wa-form-control-label-color: var(--wa-color-text-normal);
  --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
  --wa-form-control-label-line-height: var(--wa-line-height-normal);

  --wa-form-control-value-color: var(--wa-color-text-normal);
  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
  --wa-form-control-value-line-height: var(--wa-line-height-condensed);

  --wa-form-control-hint-color: var(--wa-color-text-quiet);
  --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
  --wa-form-control-hint-line-height: var(--wa-line-height-normal);

  --wa-form-control-placeholder-color: var(--wa-color-gray-60);

  --wa-form-control-required-content: "*";
  --wa-form-control-required-content-color: var(
    --wa-color-danger-on-normal
  );

  --wa-form-control-padding-block: 0.75em;
  --wa-form-control-padding-inline: 1em;

  /* ==========================================================
     Panel and tooltip tokens
     ========================================================== */
  --wa-panel-border-style: var(--wa-border-style);
  --wa-panel-border-width: var(--wa-border-width-s);
  --wa-panel-border-radius: var(--wa-border-radius-l);

  --wa-tooltip-background-color: var(--wa-color-text-normal);
  --wa-tooltip-border-color: var(--wa-tooltip-background-color);
  --wa-tooltip-border-style: var(--wa-border-style);
  --wa-tooltip-border-width: 0;
  --wa-tooltip-border-radius: var(--wa-border-radius-m);
  --wa-tooltip-content-color: var(--wa-color-surface-raised);
  --wa-tooltip-font-size: var(--wa-font-size-xs);
  --wa-tooltip-line-height: var(--wa-line-height-normal);

  /* ==========================================================
     Layout variables
     ========================================================== */

  /* Breakpoints */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;

  --container-padding: 1rem;
  --container-small-size: 32rem;
  --container-medium-size: 54rem;
}

/* ==========================================================
   Application-level typography rules
   ========================================================== */

/* Navigation uses Inter (heading font) */
nav,
nav a,
nav button,
.kaivo-nav-item {
  font-family: var(--wa-font-family-heading);
}

/* Buttons use Inter */
wa-button::part(base) {
  font-family: var(--wa-font-family-heading);
  letter-spacing: var(--kaivo-letter-spacing-nav);
}

/* Tab labels use Inter */
wa-tab::part(base) {
  font-family: var(--wa-font-family-heading);
}

/* Card titles / section headings */
.kaivo-card-title,
.kaivo-section-title {
  font-family: var(--wa-font-family-heading);
  letter-spacing: var(--kaivo-letter-spacing-heading);
}

/* Page titles (largest headings) */
h1,
.kaivo-page-title {
  letter-spacing: var(--kaivo-letter-spacing-heading-lg);
}

/* Uppercase labels (e.g. "LAST SYNCED", "DATASETS") */
.kaivo-label {
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-2xs);
  font-weight: var(--wa-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--kaivo-letter-spacing-label);
  color: var(--wa-color-text-quiet);
}

/* Metric values (large numbers like "68" or "1.77M") */
.kaivo-metric-value {
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-bold);
  letter-spacing: var(--kaivo-letter-spacing-heading);
}

/* Small mono text for dataset IDs, column names, code-like values */
.kaivo-mono {
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-xs);
}

/* Badge / tag text */
wa-badge::part(base),
wa-tag::part(base) {
  font-family: var(--wa-font-family-body);
}

/* Selection highlight color */
::selection {
  background: var(--kaivo-info-fill-quiet);
  color: var(--wa-color-text-normal);
}

/* ==========================================================
   Global styles
   ========================================================== */

/* Styling to make Alpine x-cloak directive work. */
[x-cloak] {
  display: none !important;
}

/* TODO: Move to a separate layout.css file once we have organized our global stylesheets. */
/* Layout */
main {
  padding-block: var(--wa-space-2xl);
}

header.wa-split {
  align-items: start;
}

/* Container utilities */
.kaivo-container {
  width: 100%;
  padding-inline: var(--container-padding);
  margin-inline: auto;
}

/* On smaller screens we use as much of the screen estate as possible. */
@media (min-width: 64rem) {
  .kaivo-container {
    max-width: var(--breakpoint-lg);
  }
}

/* Restrict contained elements to a specific width */
.kaivo-container-medium {
  width: 100%;
}

@media (min-width: 32rem) {
  .kaivo-container-medium {
    max-width: var(--container-medium-size);
    margin-inline: auto;
  }
}

/* Restrict contained elements to a specific width */
.kaivo-container-small {
  width: 100%;
}

@media (min-width: 32rem) {
  .kaivo-container-small {
    max-width: var(--container-small-size);
    margin-inline: auto;
  }
}

.kaivo-truncated-text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Typography — default heading sizes using WebAwesome's type scale */
h1 {
  font-size: var(--wa-font-size-xl);
}

h2 {
  font-size: var(--wa-font-size-l);
}

h3 {
  font-size: var(--wa-font-size-m);
}

h4 {
  font-size: var(--wa-font-size-s);
}

/* Forms */

/* Prevent user interaction with a form while it's processing. */
[aria-busy="true"] form,
form[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.6;
}

/* Make sure form fields inside Details component don't exceed the container width. */
wa-details input,
wa-details select {
  box-sizing: border-box;
}

fieldset:not(:has(legend)) {
  border: none;
  padding: 0;
}

/*
Make sure empty fieldsets do not render any whitespace. Ideally empty fieldsets
wouldn't be rendered at all, but with our current logic, ServerOnly* fields can
produce them.
*/
fieldset:not(:has(*)) {
  display: none;
}

.kaivo-screenshot {
  display: block;
  border: 1px solid var(--wa-color-gray-50);
}

/*
Make sure the rightmost pixels of Google login button are not cut off on
Firefox (Chrome doesn't need this). This styles the button's inner iframe
rendered by Google.
*/
.g_id_signin iframe {
  width: 220px !important;
  min-width: 220px !important;
}

/* ==========================================================
   Sidebar layout
   ========================================================== */

.kaivo-app-layout {
  display: flex;
  min-height: 100vh;
}

.kaivo-sidebar {
  width: 16rem;
  flex-shrink: 0;
  background: var(--wa-color-surface-raised);
  border-right: 1px solid var(--wa-color-surface-border);
  display: none;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

@media (min-width: 64rem) {
  .kaivo-sidebar {
    display: flex;
  }
}

.kaivo-sidebar-content {
  padding: var(--wa-space-l);
}

.kaivo-app-main {
  flex: 1;
  min-width: 0;
}

@media (min-width: 64rem) {
  .kaivo-app-main {
    padding-inline: var(--wa-space-l);
  }
}

/* Align main content with sidebar: same top padding, left-aligned, no extra
   container padding so every page has identical spacing from the sidebar. */
.kaivo-app-main main {
  padding-inline: var(--wa-space-m);
  padding-block-start: var(--wa-space-l);
}

@media (min-width: 64rem) {
  .kaivo-app-main main {
    padding-inline: 0;
  }
}

.kaivo-app-main .kaivo-container,
.kaivo-app-main .kaivo-container-medium {
  margin-inline: 0;
  padding-inline: 0;
}

/* Mobile top bar — visible below 64rem */
.kaivo-mobile-topbar {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m);
  background: var(--wa-color-surface-raised);
  border-bottom: 1px solid var(--wa-color-surface-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Mobile navigation drawer */
.kaivo-app-layout > wa-drawer {
  --spacing: 0;
}

@media (min-width: 64rem) {
  .kaivo-mobile-topbar {
    display: none;
  }
}

/* Sidebar nav links */
.kaivo-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-normal);
  font-family: var(--wa-font-family-heading);
  text-decoration: none;
  transition: all 0.12s ease;
}

.kaivo-sidebar-link:hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.kaivo-sidebar-link[aria-current="page"] {
  background: var(--kaivo-info-fill-quiet);
  color: var(--kaivo-info-on-quiet);
  font-weight: var(--wa-font-weight-semibold);
}

/* Sidebar organization dropdown trigger */
.kaivo-org-trigger {
  width: 100%;
}

.kaivo-org-trigger::part(base) {
  width: 100%;
  justify-content: start;
}

.kaivo-org-trigger::part(label) {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar user section */
.kaivo-sidebar-user-email {
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-text-quiet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}