/*
 * jSentinel design system - the brand of jsentinel.eu for Vaadin Flow on the Aura theme.
 *
 * Load after Aura:  @StyleSheet(Aura.STYLESHEET) @StyleSheet(JSentinelTheme.STYLESHEET)
 * Light and dark follow the operating system (color-scheme: light dark); an application
 * can switch with Page.setColorScheme(...) - see ColorSchemeToggle.
 *
 * Brand hues are taken from jsentinel.eu (assets/css/custom.css, "single source of truth
 * for brand hues"). Aura computes text, border and surface colors from the background and
 * accent set here, so contrast stays within Aura's checked range.
 */
html {
  color-scheme: light dark;

  /* brand palette */
  --js-lime: #a3e635;
  --js-lime-soft: #bef264;
  --js-lime-mid: #84cc16;
  --js-lime-deep: #65a30d;
  --js-lime-ink: #4d7c0f;
  --js-gold: #facc15;
  --js-amber: #f59e0b;
  --js-teal: #14b8a6;
  --js-violet: #8b5cf6;
  --js-on-lime: #14210a;
  --js-brand-gradient: linear-gradient(90deg, var(--js-lime), var(--js-lime-deep) 55%, var(--js-gold));

  /* Aura: background and accent per scheme */
  --aura-background-color-light: #f7f9f1;
  --aura-background-color-dark: #14151a;
  --aura-accent-color-light: var(--js-lime-ink);
  --aura-accent-color-dark: var(--js-lime);
  --aura-accent-contrast-color-light: #ffffff;
  --aura-accent-contrast-color-dark: var(--js-on-lime);
  --aura-green: var(--js-lime-deep);
  --aura-yellow: var(--js-gold);
  --aura-orange: var(--js-amber);

  /* typography and shape: system fonts as on jsentinel.eu, generous radii */
  --aura-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --aura-base-radius: 6;
}

/* ---- brand components -------------------------------------------------- */

/* the thin gradient bar the website puts on top of cards and the hero */
.js-brand-bar {
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: var(--js-brand-gradient);
}

.js-card {
  background: var(--aura-surface-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  padding: var(--vaadin-padding-m);
  box-sizing: border-box;
}

.js-card.js-card--accent {
  border-top: 3px solid var(--aura-accent-color);
}

.js-muted {
  color: var(--vaadin-text-color-secondary);
  font-size: var(--aura-font-size-s);
}

.js-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.1em 0.65em;
  border-radius: 999px;
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-medium);
  line-height: var(--aura-line-height-s);
  white-space: nowrap;
  background: color-mix(in srgb, var(--js-pill-color, var(--vaadin-text-color-secondary)) 16%, transparent);
  /* text darkened (light) or lightened (dark) far enough for 4.5:1 on the tinted pill,
     also for amber and gold, whose plain hue is too light on a light background */
  color: light-dark(color-mix(in srgb, var(--js-pill-color, var(--vaadin-text-color)) 42%, black),
                    color-mix(in srgb, var(--js-pill-color, var(--vaadin-text-color)) 80%, white));
}

.js-pill--neutral  { --js-pill-color: var(--vaadin-text-color-secondary); }
.js-pill--success  { --js-pill-color: var(--js-lime-deep); }
.js-pill--warning  { --js-pill-color: var(--js-amber); }
.js-pill--danger   { --js-pill-color: var(--aura-red); }
.js-pill--info     { --js-pill-color: var(--js-teal); }
.js-pill--accent   { --js-pill-color: var(--js-gold); }
.js-pill--active   { --js-pill-color: var(--js-lime-mid); }
.js-pill--model    { --js-pill-color: var(--js-violet); }

/* brand header: mark + product name in the navbar */
.js-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--vaadin-gap-s);
  text-decoration: none;
  color: inherit;
}

.js-brand img {
  height: 28px;
  width: auto;
}

.js-brand-name {
  font-size: var(--aura-font-size-xl);
  font-weight: var(--aura-font-weight-semibold);
  letter-spacing: -0.01em;
}

.js-brand-name .js-brand-j {
  color: var(--aura-accent-text-color);
}

/* a quiet, branded page for sign-in */
.js-login-page {
  min-height: 100vh;
  background:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--js-lime) 22%, transparent), transparent 70%),
    radial-gradient(40rem 25rem at 110% 110%, color-mix(in srgb, var(--js-gold) 16%, transparent), transparent 70%),
    var(--aura-app-background);
}

/* empty states and hints */
.js-empty {
  color: var(--vaadin-text-color-secondary);
  font-style: italic;
  padding: var(--vaadin-padding-s) 0;
}

/* ---- 00.02.00: building blocks of the reworked views ------------------- */

.js-section-title {
  margin: var(--vaadin-gap-l, 18px) 0 var(--vaadin-gap-s, 8px);
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vaadin-text-color-secondary);
}

/* status stepper: done, current, ahead; gates (a person's step) with a dashed ring */
.js-steps { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.js-step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--aura-font-size-s); color: var(--vaadin-text-color-secondary); }
.js-step + .js-step::before { content: ""; width: 22px; height: 2px; margin: 0 6px; background: var(--vaadin-border-color-secondary); }
.js-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* light surfaces need darker rings to reach 3:1 against the background (WCAG 1.4.11) */
.js-steps { --js-step-done: light-dark(var(--js-lime-ink), var(--js-lime-deep)); --js-step-gate: light-dark(#b45309, var(--js-amber)); }
.js-step-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--vaadin-border-color); background: var(--aura-surface-color); box-sizing: border-box; }
.js-step--done .js-step-dot { background: var(--js-step-done); border-color: var(--js-step-done); }
.js-step--current { color: var(--vaadin-text-color); font-weight: var(--aura-font-weight-semibold); }
.js-step--current .js-step-dot { border-color: var(--aura-accent-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aura-accent-color) 22%, transparent); }
.js-step--gate .js-step-dot { border-style: dashed; border-color: var(--js-step-gate); }
.js-step--gate.js-step--done .js-step-dot { border-style: solid; border-color: var(--js-step-done); }

/* progress: stages as segments, the rest is open */
.js-progress { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--vaadin-text-color) 9%, transparent); }
.js-progress-part { display: block; flex-shrink: 0; height: 100%; background: var(--js-pill-color); }

/* stat tile */
.js-stat { display: flex; flex-direction: column; gap: 2px; }
.js-stat-label { font-size: var(--aura-font-size-s); color: var(--vaadin-text-color-secondary); }
.js-stat-value { font-size: 26px; font-weight: 700; line-height: 1.2; }
.js-stat-hint { font-size: var(--aura-font-size-xs); color: var(--vaadin-text-color-secondary); }

/* who did it */
.js-actor { display: inline-flex; align-items: center; gap: 6px; font-size: var(--aura-font-size-s); }
.js-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.js-avatar--person { background: var(--js-gold); color: #3a2a00; }
.js-avatar--ai { background: color-mix(in srgb, var(--js-teal) 70%, white); color: #06302b; }

/* filter chips */
.js-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.js-chip {
  font: inherit; font-size: var(--aura-font-size-s); cursor: pointer;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--vaadin-border-color-secondary);
  background: var(--aura-surface-color); color: var(--vaadin-text-color-secondary);
}
.js-chip:hover { color: var(--vaadin-text-color); }
.js-chip--on { border-color: var(--aura-accent-color); color: var(--aura-accent-text-color); background: color-mix(in srgb, var(--aura-accent-color) 14%, transparent); }

/* lists of rows */
.js-list { border: 1px solid var(--vaadin-border-color-secondary); border-radius: var(--vaadin-radius-l); background: var(--aura-surface-color); overflow: hidden; }
.js-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--vaadin-border-color-secondary); }
.js-row:first-child { border-top: none; }
.js-row:hover { background: color-mix(in srgb, var(--vaadin-text-color) 4%, transparent); }
.js-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.js-row-title { font-weight: var(--aura-font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-row-meta { font-size: var(--aura-font-size-xs); color: var(--vaadin-text-color-secondary); }

/* conversation threads: open questions marked amber, answered ones teal */
.js-thread { border-left: 3px solid var(--js-teal); padding-left: 12px; display: flex; flex-direction: column; gap: 8px; }
.js-thread--open { border-left-color: var(--js-amber); }
.js-thread--settled { opacity: .72; }
.js-message-body { background: color-mix(in srgb, var(--vaadin-text-color) 5%, transparent); border-radius: var(--vaadin-radius-m); padding: 8px 12px; }

/* change marks in a diff */
.js-del { background: color-mix(in srgb, var(--aura-red) 14%, transparent); text-decoration: line-through; border-radius: 4px; padding: 0 2px; }
.js-ins { background: color-mix(in srgb, var(--js-lime-deep) 22%, transparent); border-radius: 4px; padding: 0 2px; }

/* the decision bar stays at the bottom of the viewport */
.js-decision-bar {
  position: sticky; bottom: 12px; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vaadin-gap-s, 8px);
  padding: 12px 14px; border-radius: var(--vaadin-radius-l);
  background: var(--aura-surface-color-solid, var(--aura-surface-color));
  border: 1px solid var(--vaadin-border-color-secondary);
  box-shadow: var(--aura-shadow-m, 0 12px 30px -16px rgb(0 0 0 / .45));
}
/* on a narrow screen a sticky bar would cover a third of the view, more with the keyboard open */
@media (max-width: 600px) { .js-decision-bar { position: static; } }
.js-decision-copy { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.js-decision-title { font-weight: var(--aura-font-weight-semibold); }