/* K43 Chatbot – hallinta. Ei inline-tyylejä (CSP: style-src 'self'). */

:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --fg: #16191d;
  --muted: #5a6370;
  --line: #dfe3e8;
  --primary: #1f5eff;
  --primary-fg: #ffffff;
  --primary-soft: #e8eeff;
  --ok: #137a36;
  --ok-soft: #e3f4e8;
  --warn: #8a5b00;
  --warn-soft: #fdf2d6;
  --danger: #c4221c;
  --danger-soft: #fde6e4;
  --info: #0b5cad;
  --info-soft: #e3effb;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sidebar: 240px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1d222a;
    --fg: #e7ebf0;
    --muted: #9aa4b1;
    --line: #2b313a;
    --primary: #5b8cff;
    --primary-fg: #0b0f16;
    --primary-soft: #1b2744;
    --ok: #4cc774;
    --ok-soft: #13301d;
    --warn: #e0b04a;
    --warn-soft: #33290f;
    --danger: #ff6b63;
    --danger-soft: #3a1714;
    --info: #6cb2ff;
    --info-soft: #132a44;
    --shadow: none;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--font); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; line-height: 1.25; }
h2 { font-size: 1.125rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
code, pre, .mono { font-family: var(--mono); font-size: .875em; }
pre { white-space: pre-wrap; word-break: break-word; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--radius); }
.skip-link:focus { left: 8px; }

/* ---------- Rakenne ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; padding: 4px 8px 16px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: var(--primary-fg); display: grid; place-items: center; font-size: .85rem; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 16px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--fg); }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.topbar .spacer { flex: 1; }
.topbar .tenant { font-weight: 600; }
.menu-toggle { display: none; }
.content { padding: 24px; max-width: 1200px; width: 100%; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin: 0; }
.banner { background: var(--warn-soft); color: var(--warn); padding: 8px 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-weight: 500; }
.banner form { margin: 0; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 40; }
  .menu-toggle { display: inline-flex; }
  .topbar { padding: 10px 16px; }
  .content { padding: 16px; }
  .banner { padding: 8px 16px; }
}

/* ---------- Komponentit ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.stat .label { color: var(--muted); font-size: .85rem; }
.stat .value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.stat .sub { color: var(--muted); font-size: .8rem; }
.meter { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin-top: 8px; }
.meter > span { display: block; height: 100%; background: var(--primary); }
.meter.is-warn > span { background: var(--warn); }
.meter.is-danger > span { background: var(--danger); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.inline { display: inline; margin: 0; }
.empty { text-align: center; color: var(--muted); padding: 32px 16px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td.actions { white-space: nowrap; text-align: right; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; }

.alert { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid transparent; word-break: break-word; }
.alert-success { background: var(--ok-soft); color: var(--ok); }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-info { background: var(--info-soft); color: var(--info); }
.alert-warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- Lomakkeet ---------- */
.form { max-width: 720px; }
.field { margin-bottom: 16px; }
.field > label, .label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.hint { color: var(--muted); font-size: .82rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], input[type=color], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); font: inherit;
}
input[type=color] { padding: 2px; height: 40px; max-width: 80px; }

/* Päivämäärä: sama korkeus kuin muilla kentillä, kalenterikuvake teeman mukaan */
input[type=date] { min-height: 40px; line-height: 1.3; cursor: text; }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; border-radius: 4px; padding: 2px; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--primary-soft); }
input[type=date]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=date]:invalid, input[type=date]:not([value]), input[type=date][value=""] { color: var(--muted); }
input[type=date]:focus { color: var(--fg); }

/* Tiedoston valinta: katkoviivakehys ja painikkeen näköinen valintanappi */
input[type=file] {
  width: 100%; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; background: var(--surface-2);
  color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer;
}
input[type=file]:hover { border-color: var(--primary); background: var(--primary-soft); }
input[type=file]:focus-visible { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 1px solid var(--primary); border-radius: 6px;
  background: var(--primary); color: var(--primary-fg); font: inherit; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { filter: brightness(1.08); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.input-row { display: flex; gap: 8px; }
.input-row > * { flex: 1; }
.input-row > .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .input-row { flex-direction: column; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary); filter: brightness(1.08); }
.btn-danger { color: var(--danger); border-color: var(--danger-soft); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 4px 10px; font-size: .85rem; }
.btn-link { border: 0; background: none; color: var(--primary); padding: 0; font-weight: 500; cursor: pointer; font: inherit; }
.btn-link:hover { text-decoration: underline; background: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.copy-box { display: flex; gap: 8px; align-items: stretch; }
.copy-box code, .copy-box input { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: .85rem; color: var(--fg); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tabs a:hover { color: var(--fg); text-decoration: none; }
.tabs a.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin: 0; min-width: 160px; }

.chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.chart .bar { flex: 1; background: var(--primary); opacity: .8; border-radius: 3px 3px 0 0; min-height: 2px; }
.chart .bar:hover { opacity: 1; }

.chat-log { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 80%; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.msg-visitor { align-self: flex-end; background: var(--primary-soft); border-color: transparent; }
.msg-meta { font-size: .75rem; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.msg .content { white-space: pre-wrap; word-break: break-word; padding: 0; max-width: none; width: auto; }
.msg-correction { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--ok); background: var(--ok-soft); border-radius: 0 6px 6px 0; }
.msg-correction .label { font-size: .75rem; font-weight: 600; color: var(--ok); margin-bottom: 4px; }

details.box { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: var(--surface-2); }
details.box summary { cursor: pointer; font-weight: 600; }

/* ---------- Kirjautumissivut ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; box-shadow: var(--shadow); }
.auth-card .brand { justify-content: center; padding-bottom: 20px; }
.auth-card h1 { font-size: 1.3rem; text-align: center; margin-bottom: 16px; }
.auth-card .btn-primary { width: 100%; padding: 10px; }
.auth-foot { text-align: center; margin-top: 16px; font-size: .9rem; }
.locale-switch { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.qr { display: block; margin: 8px auto 12px; width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.code-input { font-size: 1.4rem !important; letter-spacing: .3em; text-align: center; font-family: var(--mono); }

.page-plain .container { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.log { background: var(--surface-2); border: 1px solid var(--line); padding: 12px; border-radius: 6px; }

/* Prosenttiluokat mittareille ja kaavioille (CSP estää inline-tyylit). */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.h-0{height:0%}.h-1{height:1%}.h-2{height:2%}.h-3{height:3%}.h-4{height:4%}.h-5{height:5%}.h-6{height:6%}.h-7{height:7%}.h-8{height:8%}.h-9{height:9%}.h-10{height:10%}.h-11{height:11%}.h-12{height:12%}.h-13{height:13%}.h-14{height:14%}.h-15{height:15%}.h-16{height:16%}.h-17{height:17%}.h-18{height:18%}.h-19{height:19%}.h-20{height:20%}.h-21{height:21%}.h-22{height:22%}.h-23{height:23%}.h-24{height:24%}.h-25{height:25%}.h-26{height:26%}.h-27{height:27%}.h-28{height:28%}.h-29{height:29%}.h-30{height:30%}.h-31{height:31%}.h-32{height:32%}.h-33{height:33%}.h-34{height:34%}.h-35{height:35%}.h-36{height:36%}.h-37{height:37%}.h-38{height:38%}.h-39{height:39%}.h-40{height:40%}.h-41{height:41%}.h-42{height:42%}.h-43{height:43%}.h-44{height:44%}.h-45{height:45%}.h-46{height:46%}.h-47{height:47%}.h-48{height:48%}.h-49{height:49%}.h-50{height:50%}.h-51{height:51%}.h-52{height:52%}.h-53{height:53%}.h-54{height:54%}.h-55{height:55%}.h-56{height:56%}.h-57{height:57%}.h-58{height:58%}.h-59{height:59%}.h-60{height:60%}.h-61{height:61%}.h-62{height:62%}.h-63{height:63%}.h-64{height:64%}.h-65{height:65%}.h-66{height:66%}.h-67{height:67%}.h-68{height:68%}.h-69{height:69%}.h-70{height:70%}.h-71{height:71%}.h-72{height:72%}.h-73{height:73%}.h-74{height:74%}.h-75{height:75%}.h-76{height:76%}.h-77{height:77%}.h-78{height:78%}.h-79{height:79%}.h-80{height:80%}.h-81{height:81%}.h-82{height:82%}.h-83{height:83%}.h-84{height:84%}.h-85{height:85%}.h-86{height:86%}.h-87{height:87%}.h-88{height:88%}.h-89{height:89%}.h-90{height:90%}.h-91{height:91%}.h-92{height:92%}.h-93{height:93%}.h-94{height:94%}.h-95{height:95%}.h-96{height:96%}.h-97{height:97%}.h-98{height:98%}.h-99{height:99%}.h-100{height:100%}

.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .25rem 0; }

/* ---------- Live chat ---------- */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); vertical-align: middle; }
.live-dot.is-online { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
tr.live-waiting td { background: var(--warn-soft); }
tr.live-new td { animation: live-flash 2s ease-out; }
@keyframes live-flash { from { background: var(--primary-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.live-new td { animation: none; } }
#live-presence { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.live-log { max-height: 60vh; overflow-y: auto; padding: 4px 2px 12px; }
.msg-agent { background: var(--ok-soft); border-color: transparent; }
.msg-who { font-size: .75rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.msg-system { align-self: center; margin: 0; padding: 3px 10px; font-size: .78rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; }
.live-controls { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; display: grid; gap: 8px; }
.live-controls form { display: grid; gap: 8px; }
#live-takeover { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#live-takeover[hidden], #live-compose[hidden] { display: none; }
.nav-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 99px; background: var(--ok); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 18px; }