/* Helpparibotti — värijärjestelmä. Yksi lähde kaikille sivuille (CSP: style-src 'self').
   Lähiduplikaatit on tarkoituksella romautettu kanonisiin arvoihin (design-audit 2026-07-23).
   Logon inline-SVG:t ja data-URI:t pidetään literaaleina (kiinteä artwork, ei teemaa).

   BREAKPOINT-SKAALA (uusille komponenteille — @media ei voi käyttää var():ia,
   joten tämä on ohje, ei muuttuja). Pidä UUSI työ näissä arvoissa:
     - 480px   puhelin
     - 640px   iso puhelin / pieni tabletti
     - 768px   tabletti
     - 1024px  pieni työpöytä
     - 1280px  leveä (sisältökatto)
   HUOM: olemassa olevat sivukohtaiset katkot (esim. ohjeet-sivupalkki 900,
   hinnoittelu-korttiruudukko 940, landing-hero 1100) ovat KUNKIN komponentin
   sisältörajoja, ei mielivaltaisia — niitä ei romauteta, koska väärä taittokohta
   tuottaa ylivuodon tai turhaa tyhjää. Yhtenäisyys koskee uutta työtä. */
:root {
  /* Teksti */
  --ink: #071126;            /* markkinointisivujen teksti/otsikot */
  --ink-app: #111827;        /* admin-SPA:n teksti (Tailwind-perhe, tietoinen toinen konteksti) */
  --text-muted: #4b5565;
  --text-muted-2: #697386;
  --text-faint: #8a94a6;
  --text-body-soft: #45536a; /* markkinoinnin leipäteksti-harmaa */

  /* Brändi */
  --brand-from: #3b50e7;     /* CTA-gradientin alku */
  --brand-to: #2437bd;       /* CTA-gradientin loppu */
  --brand-mark-from: #1b34b9;/* logomerkin gradientti */
  --brand-mark-to: #4657f0;
  --link: #2338c8;
  --link-strong: #14246f;
  --nav-current: #1f3696;

  /* Admin-SPA:n aksentit */
  --app-accent: #3949ef;        /* aktiivisen navin/subtabin teksti */
  --app-accent-bright: #5260ff; /* reuna/fokus — tarkoituksellinen kaksisävy */
  --app-link: #4b5cf0;
  --app-btn-from: #5d6aff;
  --app-btn-to: #3548df;
  --indigo-500: #6366F1;     /* legacy .btn-järjestelmä + widget-oletusaksentti; konsolidoidaan admin-refaktoroinnissa */

  /* Reunat ja pinnat */
  --border: #d8deea;
  --border-soft: #e5e9f2;
  --border-app: #dde3ee;
  --bg-page: #f9fafb;
  --surface-raised: #fff;
  --surface-interactive-hover: #f5f7fb;
  --surface-selected: #f2f4ff;

  /* Info/tilat */
  --info-ink: #1e3a8a;
  --danger: #dc2626;
}

/* Botin työtila: tehtäväpohjainen navigaatio. Ryhmäotsikot tekevät rakenteen
   näkyväksi ilman kuvakkeita, ja aktiivinen kohde erottuu sekä värillä että
   vasemman reunan merkillä. */
.admin-bot-nav-shell {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-app);
}

.admin-bot-nav-summary {
  display: none;
}

.admin-subnav.admin-bot-nav {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  padding: 14px 24px 12px;
  border-bottom: 0;
  overflow: visible;
}

.admin-bot-nav-group {
  min-width: 0;
  padding: 0 18px;
  border-left: 1px solid var(--border-soft);
}

.admin-bot-nav-group:first-child {
  padding-left: 0;
  border-left: 0;
}

.admin-bot-nav-heading {
  margin: 0 0 5px;
  color: var(--text-muted-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.admin-bot-nav-items {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}

.admin-bot-nav .admin-subtab {
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 4px;
  text-align: left;
}

.admin-bot-nav .admin-subtab:hover {
  color: var(--ink-app);
  background: var(--surface-interactive-hover);
}

.admin-bot-nav .admin-subtab.active {
  color: var(--app-accent);
  border-left-color: var(--app-accent-bright);
  background: var(--surface-selected);
  font-weight: 600;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .admin-subnav.admin-bot-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .admin-bot-nav-group:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .admin-bot-nav .admin-subtab {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  .admin-bot-nav-summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 18px;
    color: var(--ink-app);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  .admin-bot-nav-summary::-webkit-details-marker {
    display: none;
  }

  .admin-bot-nav-summary::after {
    content: "Avaa";
    color: var(--app-link);
    font-size: 12px;
    font-weight: 600;
  }

  .admin-bot-nav-shell[open] .admin-bot-nav-summary::after {
    content: "Sulje";
  }

  .admin-bot-nav-current {
    min-width: 0;
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-subnav.admin-bot-nav {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 6px 18px 14px;
    overflow: visible;
  }

  .admin-bot-nav-group,
  .admin-bot-nav-group:first-child {
    padding: 12px 0;
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }

  .admin-bot-nav-group:first-child {
    border-top: 0;
  }

  .admin-bot-nav-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
  }

  .admin-bot-nav .admin-subtab {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .admin-bot-nav-items {
    grid-template-columns: 1fr;
  }
}

/* AI-ehdotuksen hyväksyntänäkymä (#/bots/:id/setup, issue #135): yksi rivi
   per kenttä, nykyinen arvo vasemmalla ja ehdotus oikealla. */
.setup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-app);
}

.setup-row:last-child {
  border-bottom: 0;
}

.setup-row-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setup-row-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-app);
}

.setup-col-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted-2);
}

.setup-row-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Rivinsisäinen kielivalitsin (fi/en) — vaihtaa vain esikatselun, ei sitä
   mitä apply tallentaa (molemmat kielet tallentuvat aina yhdessä). */
.setup-lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border-app);
  border-radius: 6px;
  overflow: hidden;
}

.setup-lang-toggle button {
  border: 0;
  background: var(--surface-raised);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.setup-lang-toggle button.active {
  background: var(--app-accent);
  color: #fff;
}

/* Ohjeen löydöslista (renderSetupFindings) — sama rivikuvio kuin kenttärivit,
   mutta yksi sarake: löydös on havainto, ei kenttä jota hyväksytään. */
.setup-finding {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-app);
}

.setup-finding:last-child {
  border-bottom: 0;
}

.setup-finding.ignored {
  opacity: .55;
}

.setup-finding-quote {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-app);
  border-radius: 6px;
  background: var(--bg-page);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .setup-row {
    grid-template-columns: 1fr;
  }
}