/* Värit Aival Oy:n logosta: sininen #077ecf ja turkoosi #62dcfe. */
:root { --bg:#f3f8fc; --card:#fff; --text:#16283a; --muted:#5b6b7d; --line:#dde7f0;
        --brand:#077ecf; --brand-light:#62dcfe; --brand-dark:#05375e;
        --accent:#066db3; --accent-hover:#055a94; --accent-soft:#e6f4fc;
        --auth-bg:#031d33;
        --ok:#1a7f45; --warn:#a86500; --bad:#b42318; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--brand-dark); color:#fff; border-bottom:3px solid var(--brand-light); padding:0 16px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
header .brand { font-weight:700; padding:12px 0; margin-right:auto; }
header a, header button.link { color:#bfeeff; text-decoration:none; padding:12px 4px; background:none; border:0; font:inherit; cursor:pointer; }
header a:hover, header button.link:hover { color:#fff; }
a { color:var(--accent); }
a:hover { color:var(--accent-hover); }
main { max-width:1100px; margin:24px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 20px; margin-bottom:16px; }
h1 { font-size:22px; margin:0 0 16px; }
h2 { font-size:17px; margin:0 0 12px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; color:var(--muted); font-weight:600; }
.table-wrap { overflow-x:auto; }
.plate { font-family:ui-monospace, monospace; font-weight:700; background:#fff; border:2px solid #222; border-radius:4px; padding:1px 6px; white-space:nowrap; }
.muted { color:var(--muted); font-size:13px; }
.nowrap { white-space:nowrap; }
.badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:10px; background:var(--accent-soft); white-space:nowrap; }
.badge.ok { background:#e3f4ea; color:var(--ok); }
.badge.warn { background:#fff4dd; color:var(--warn); }
.badge.bad { background:#fde8e6; color:var(--bad); }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:12px; }
.flash.ok { background:#e3f4ea; color:var(--ok); }
.flash.error { background:#fde8e6; color:var(--bad); }
.flash.warn { background:#fff4dd; color:var(--warn); }
form.inline { display:inline; }
label { display:block; font-weight:600; margin:10px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=file], select, textarea {
  width:100%; max-width:420px; padding:8px 10px; border:1px solid #c3d2df; border-radius:6px; font:inherit; background:#fff; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand-light); outline-offset:0; border-color:var(--brand); }
textarea { min-height:90px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.row > * { flex:0 1 auto; }
.row input, .row select { width:auto; }
button, .btn { display:inline-block; padding:7px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; font:inherit; cursor:pointer; text-decoration:none; }
button:hover, .btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
button.secondary, .btn.secondary { background:#fff; color:var(--accent); }
button.secondary:hover, .btn.secondary:hover { background:var(--accent-soft); color:var(--accent-hover); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.danger:hover { background:#fde8e6; color:var(--bad); border-color:var(--bad); }
header button.link:hover { background:none; }
button.ok { background:var(--ok); border-color:var(--ok); }
button.ok:hover { background:#156638; border-color:#156638; }
.review { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, max-content)); gap:6px 10px; align-items:end; margin-top:8px; }
.review label { margin:0; font-size:13px; font-weight:500; }
.review input, .review select { width:100%; }
.review label.check { display:flex; gap:6px; align-items:center; grid-column:1 / -1; }
.review label.check input { width:auto; }
select.decision[data-d=approve] { border-color:var(--ok); color:var(--ok); }
select.decision[data-d=reject] { border-color:var(--bad); color:var(--bad); }
select.decision[data-d=skip] { color:var(--muted); }
label.check-inline { display:flex; gap:6px; align-items:center; font-weight:400; margin:0; }
/* Kirjautumissivut: tumma logon sävyinen tausta, jolla sekä logon sininen
   (4,0:1) että vaalea turkoosi (10,7:1) erottuvat; valkoisella turkoosi 1,6:1. */
body.auth { min-height:100vh; background:var(--auth-bg) fixed;
  background-image:radial-gradient(ellipse 80% 60% at 50% 0%, #0a4672 0%, rgba(10,70,114,0) 70%),
                   linear-gradient(180deg, #031d33 0%, #021526 100%); }
body.auth main { margin-top:0; padding-top:32px; padding-bottom:32px; }
.auth-hero { text-align:center; margin:24px auto 20px; }
.auth-hero .logo { display:block; width:170px; max-width:50%; height:auto; margin:0 auto 12px; }
.auth-title { color:#fff; font-size:22px; font-weight:700; letter-spacing:.02em; }
.login { max-width:380px; margin:0 auto; position:relative; overflow:hidden; border:0; box-shadow:0 12px 40px rgba(0,0,0,.35); }
.login::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--brand), var(--brand-light)); }
body.auth .flash { max-width:380px; margin-left:auto; margin-right:auto; }

/* Kielivalinta */
.lang { display:flex; gap:2px; }
.lang a { color:#bfeeff; text-decoration:none; font-size:13px; font-weight:600; padding:4px 7px; border-radius:4px; }
.lang a:hover { color:#fff; background:rgba(255,255,255,.08); }
.lang a[aria-current] { color:#021526; background:var(--brand-light); }
header .lang a { padding:4px 7px; }
.lang-corner { display:flex; justify-content:flex-end; padding:12px 16px 0; }
body:not(.auth) .lang-corner .lang a { color:var(--accent); }