/* OptiCOP portaali — yhteinen tyylitiedosto */

:root {
  --color-primary: #1f2937;
  --color-primary-dark: #111827;
  --color-accent: #f97316;
  --color-accent-dark: #c2410c;
  --color-ok: #16a34a;
  --color-warn: #d97706;
  --color-danger: #dc2626;
  --color-bg: #f7f9fb;
  --color-text: #111827;
  --color-muted: #5a6472;
  --font-display: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Vaihe 1 -ulkoasu-uudistuksen semanttiset tokenit (ks. opticop-portaali-uudistus-ohje.md) */
  --surface-1: var(--color-bg);
  --surface-2: #ffffff;
  --border: #e5e7eb;
  --text-secondary: var(--color-muted);
  --text-muted: #9ca3af;
  --text-accent: var(--color-accent-dark);
  --bg-accent: #ffedd5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b0f14;
    --color-text: #e5e7eb;
    --color-muted: #9ca3af;
    --surface-1: #0b0f14;
    --surface-2: #151b23;
    --border: #262f3a;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-accent: #fb923c;
    --bg-accent: #3a2412;
  }
}

/* Inline SVG -ikonit (_icons.html) eivät sisällä width/height-attribuutteja,
   vain viewBox - ilman selkeää oletuskokoa selain renderöi ne "korvattujen
   elementtien" oletuskoossa (~300x150px) aina kun ikoni ei ole flex-lapsi
   jonka koko on muuten rajattu (esim. tavallisessa h2/button-tekstivirtauksessa).
   Perussääntö kokoi ikonit tekstin mukaan (1em); tarkemmat säännöt alempana
   (esim. .alanavi-kohde svg, .pikakortti svg) ohittavat tämän tarkkuudella. */
svg { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.15em; }

html, body { height: 100%; }
body { font-family: var(--font-display); margin: 0; background: var(--surface-1); color: var(--color-text); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

header { background: var(--color-primary-dark); color: #fff; padding: 0; flex-shrink: 0; position: sticky; top: 0; z-index: 10; }
header h1 { margin: 0; font-size: 1.1rem; }
.nav { margin: .3rem 0 0; font-size: .85rem; color: #9ca3af; }
.nav a { color: var(--color-accent); text-decoration: none; }

/* Vaihe 1: uusi otsikkorivi (logo + OptiCOP + kello + avatar), korvaa vanhan tekstinavin */
.otsikkorivi { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.otsikkorivi .brandi { display: flex; align-items: center; gap: 8px; }
.oc-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-accent); color: var(--text-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.otsikkorivi .brandi span { font-weight: 500; font-size: 15px; color: #fff; }
.otsikkorivi .toiminnot { display: flex; align-items: center; gap: 14px; position: relative; }
.otsikkorivi .kello { color: #d1d5db; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.oc-avatar { width: 30px; height: 30px; border-radius: 50%; background: #374151; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 0; cursor: pointer; font-family: inherit; }
.oc-pudotus { position: absolute; top: 46px; right: 0; background: var(--surface-2); color: var(--color-text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15); min-width: 180px; padding: 6px; z-index: 20; }
.oc-pudotus a, .oc-pudotus button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; font-weight: 400; color: var(--color-text); background: none; border: 0; margin: 0; cursor: pointer; font-family: inherit; font-size: .9rem; }
.oc-pudotus a:hover, .oc-pudotus button:hover { background: var(--surface-1); text-decoration: none; }

/* Sisältöalue vierii itsenäisesti headerin ja alanavigaation välissä */
main { flex: 1 1 auto; overflow-y: auto; max-width: 760px; width: 100%; margin: 0 auto; padding: 1rem; box-sizing: border-box; }

a { color: var(--color-accent-dark); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.kortti { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1rem 0; }
h2 { font-size: 1rem; margin: 0 0 .6rem; }
label { display: block; font-size: .8rem; font-weight: 600; margin: .5rem 0 .15rem; }
input, select, textarea { width: 100%; padding: .45rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; box-sizing: border-box; background: var(--surface-2); color: var(--color-text); }
input[type="range"] { accent-color: var(--color-accent); }
button { margin-top: .8rem; padding: .5rem 1.2rem; border: 0; border-radius: 6px; background: var(--color-accent); color: #fff; font-weight: 600; cursor: pointer; font-family: inherit; }
button:hover { background: var(--color-accent-dark); }
button.vaara { background: var(--color-danger); }
button.pieni { font-size: .75rem; padding: .25rem .6rem; margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
td, th { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--border); }
.pieni { font-size: .8rem; color: var(--color-muted); }
.salasana { background: #fef3c7; border: 1px solid var(--color-warn); padding: .8rem; border-radius: 8px; font-family: var(--font-mono); }
.checkbox-label { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 400; }
.checkbox-label input[type=checkbox] { width: 1.2rem; height: 1.2rem; }

/* Vaihe 1: alanavigaatio */
.alanavi { display: flex; justify-content: space-around; padding: 6px 2px; border-top: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; position: sticky; bottom: 0; z-index: 10; }
.alanavi-kohde { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-muted); text-decoration: none; font-weight: 400; min-width: 44px; min-height: 44px; padding: 4px; }
.alanavi-kohde svg { width: 20px; height: 20px; }
.alanavi-kohde span { font-size: 10px; }
.alanavi-kohde.aktiivi { color: var(--text-accent); }

/* Vaihe 1: etusivun pikakortti ("Puhu tai kirjoita") */
.pikakortti { display: flex; align-items: center; gap: 10px; background: var(--bg-accent); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0 0 1rem; text-decoration: none; color: var(--color-text); }
.pikakortti svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--text-accent); }
.pikakortti .pikakortti-teksti { display: flex; flex-direction: column; }
.pikakortti .pikakortti-teksti strong { font-size: .9rem; font-weight: 500; }
.pikakortti .pikakortti-teksti span { font-size: .78rem; color: var(--text-secondary); }

/* Vaihe 1: kiinteistökortit laajennettavina (details/summary) */
.kohde-kortti { padding: 0; overflow: hidden; }
.kohde-kortti summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 1rem; min-height: 44px; }
.kohde-kortti summary::-webkit-details-marker { display: none; }
.kohde-kortti summary svg.koti-ikoni { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; }
.kohde-kortti summary .kohde-nimi { flex: 1; font-size: .95rem; font-weight: 500; }
.kohde-kortti summary svg.chevron { width: 16px; height: 16px; color: var(--text-muted); transition: transform .15s ease; flex-shrink: 0; }
.kohde-kortti[open] summary svg.chevron { transform: rotate(180deg); }
.kohde-kortti .kohde-sisalto { padding: 0 1rem 1rem; border-top: 1px solid var(--border); }
.kohde-kortti .kohde-sisalto table { margin-top: .6rem; }
.laite-linkit { display: flex; flex-wrap: wrap; gap: .25rem .5rem; justify-content: flex-end; }
.laite-linkit a { font-size: .82rem; }

/* Vaihe 1: chat-viestikuplat (agentti.html, Chat-tab) */
.viestit { display: flex; flex-direction: column; gap: 10px; margin: 1rem 0; }
.viesti { max-width: 80%; padding: .6rem .8rem; border-radius: 12px; font-size: .9rem; line-height: 1.35; }
.viesti-kayttaja { align-self: flex-end; background: var(--color-accent); color: #fff; border-bottom-right-radius: 4px; }
.viesti-ai { align-self: flex-start; background: var(--surface-1); border: 1px solid var(--border); border-bottom-left-radius: 4px; }

/* Vaihe 2b: Chat-sivun oma ylapalkki (takaisin + otsikko + historia, base.html: block header) */
.otsikkorivi-chat { display: flex; align-items: center; gap: 6px; width: 100%; }
.otsikkorivi-chat .oc-ikoninappi { color: #fff; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; border: 0; cursor: pointer; }
.otsikkorivi-chat .otsikkorivi-chat-nimi { flex: 1; color: #fff; font-weight: 500; font-size: 15px; text-align: center; }

/* Vaihe 2b: Chat-sivun oma alapalkki - syotepalkki korvaa alanavigaation (base.html: block alapalkki) */
.chat-syote { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-top: 1px solid var(--border); }
.chat-syote textarea { flex: 1; resize: none; max-height: 6rem; margin: 0; }
.chat-syote-nappi { flex-shrink: 0; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-1); color: var(--text-secondary); }
.chat-syote-nappi.chat-laheta { background: var(--color-accent); color: #fff; }
.chat-syote-nappi.tallentaa { background: var(--color-danger); color: #fff; }
.chat-syote-nappi:disabled { opacity: .5; }

/* Vaihe 2b: keskusteluhistoria-lista */
.keskustelu-rivi { display: block; padding: .8rem 1rem; }
.keskustelu-rivi .otsikko { font-weight: 500; }
.keskustelu-rivi .aika { display: block; font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }

/* Poytakirjat (Phase A): kenttarivi + "i"-tayttoohjenappi */
.pk-kentta { margin: .8rem 0; }
.pk-kentta label { display: inline-block; margin: 0 .4rem 0 0; }
.pk-info-nappi { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0 0 .3rem 0; border-radius: 50%; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); font-size: .75rem; font-style: italic; font-weight: 700; cursor: pointer; vertical-align: middle; }
.pk-ohje { margin: .3rem 0; padding: .5rem .7rem; background: var(--bg-accent); border-radius: 6px; }
.pk-kentta input[type="checkbox"] { width: 1.2rem; height: 1.2rem; vertical-align: middle; }

/* Kohteen yhteinen ohjaussivu (asiakas_kohde.html): tilaa mittareille ja pistorasioille */
.kohde-linkit { margin: .8rem 0 0; }
.kohde-linkit a { font-size: .95rem; }
.mittariruudukko { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mittari-ruutu { display: flex; flex-direction: column; gap: 2px; padding: .7rem .8rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; }
.mittari-otsikko { font-size: .78rem; color: var(--text-secondary); }
.mittari-arvo { font-size: 1.5rem; font-weight: 500; }
.pistorasia-lohko { border-bottom: 1px solid var(--border); }
.pistorasia-lohko:last-child { border-bottom: 0; }
.pistorasia-rivi { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; min-height: 44px; }
.pistorasia-tila, .pistorasia-teho { color: var(--text-secondary); font-size: .9rem; min-width: 3.5em; text-align: right; }
/* Kytkentälaskuri (releen kuluman seuranta): sama fontti kuin Pois/teho-arvot,
   vain admin/asentajalle (ks. asiakas_kohde.html) */
.pistorasia-kytkennat { color: var(--text-secondary); font-size: .9rem; text-align: right; margin: 0 0 .5rem; }
.mittari-ruutu-leveä { grid-column: 1 / -1; }
/* Tuulen suunta: nuoli osoittaa mihin tuuli puhaltaa; kääntö tulee inline-tyylillä (rotate) */
.tuulinuoli { display: inline-block; margin-left: .3em; color: var(--text-muted); }
.kortti-aika { margin: -.3rem 0 .6rem; }
.tuulinuoli.aktiivi { color: var(--color-text); }
.pistorasia-tila.tila-paalla { color: var(--color-ok); font-weight: 600; }
.pistorasia-tila { min-width: 6em; }

/* Lämmitys-kortin differenssikentät: lyhyt numerosyöte ja yksikkö samalle
   riville, kaksi kenttää rinnakkain (asiakas_kohde.html) */
.differenssirivi { display: flex; gap: 1.2rem; margin: .6rem 0 0; }
.differenssirivi label { flex: 1; margin: 0; }
.differenssi-syote { display: inline-flex; align-items: baseline; gap: .3em; }
.differenssi-syote input[type="number"] { width: 4.2em; flex: none; }

/* Pieni kuvakenappi Grafana-historian avaamiseen (asiakas_laite.html:n
   mittaritaulukko, asiakas_kohde.html:n mittari-ruudut) */
.historia-ikoni { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 8px;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-secondary); }
.historia-ikoni:hover { background: var(--bg-accent); color: var(--text-accent); }
.historia-ikoni svg { width: 16px; height: 16px; }
.mittari-arvorivi { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }