:root{--bg:#0a1220;--card:#111e33;--card2:#16263f;--line:rgba(140,180,220,.16);--tx:#e9f2fc;--mut:#93a9c4;--acc:#67d4ff;--ok:#3ddc84;--warn:#ffc94d;--err:#ff6b6b;--pur:#d8a7ff}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-size:15px;line-height:1.45;min-height:100vh}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin-bottom:4px}
h2{font-size:18px;margin:0 0 8px}
h3{font-size:15px;margin:0 0 6px}
p{margin:0 0 8px}
.muted{color:var(--mut)} .small{font-size:12.5px} .mt{margin-top:14px} .mb{margin-bottom:14px} .right{margin-left:auto} .nowrap{white-space:nowrap}
.pre{white-space:pre-wrap;word-break:break-word}
.sub{color:var(--mut);font-size:13px;margin-bottom:14px}

/* header + nav */
header.top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 16px;background:linear-gradient(90deg,#0d1930,#12233d);border-bottom:1px solid var(--line)}
.brand{font-size:17px;font-weight:700;letter-spacing:.3px;color:var(--tx)}
.brand small{color:var(--acc);font-weight:600;font-size:12px}
.brand:hover{text-decoration:none}
.duty-strip{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px}
.duty-chip{background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;color:var(--mut)}
.duty-chip b{color:var(--tx)} .duty-chip b.warn{color:var(--warn)} .duty-chip small{font-size:11px}
.me{margin-left:auto;font-size:13px;color:var(--mut);display:flex;gap:10px;align-items:center}
nav.main-nav{display:flex;gap:4px;padding:6px 12px;background:#0c1728;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;overflow-x:auto;scrollbar-width:none}
nav.main-nav::-webkit-scrollbar{display:none}
nav.main-nav a{color:var(--mut);border:1px solid transparent;border-radius:8px;padding:9px 13px;font-size:14px;font-weight:600;white-space:nowrap;flex:none}
nav.main-nav a:hover{color:var(--tx);text-decoration:none}
nav.main-nav a.active{background:var(--card2);color:var(--acc);border-color:var(--line)}
.cnt{background:var(--err);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;margin-left:3px;vertical-align:middle}
main{padding:16px;max-width:1200px;margin:0 auto}
.page-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.page-head h1{margin:0}
.page-head .actions{margin-left:auto}

/* flash + toast */
.flash{border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px;border:1px solid}
.flash.ok{background:rgba(61,220,132,.1);border-color:rgba(61,220,132,.4);color:#cdf7de}
.flash.err{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.5);color:#ffd2d2}
.flash.warn{background:rgba(255,201,77,.1);border-color:rgba(255,201,77,.45);color:#ffe9b3}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#1d3b2a;color:#d7ffe6;border:1px solid var(--ok);border-radius:10px;padding:10px 16px;font-size:14px;z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.4)}

/* cards, grids, chips */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.card.warn{border-color:rgba(255,201,77,.5)} .card.err{border-color:rgba(255,107,107,.6)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 14px;min-width:110px;flex:1 0 110px}
.chip .v{font-size:22px;font-weight:700} .chip .l{font-size:12px;color:var(--mut)}
.chip.err .v{color:var(--err)} .chip.ok .v{color:var(--ok)} .chip.warn .v{color:var(--warn)} .chip.acc .v{color:var(--acc)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:8px}
.kv .k{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px} .kv .vv{font-size:14px;margin-top:2px}
ul.clean{list-style:none} ul.clean li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px} ul.clean li:last-child{border:none}

/* buttons + forms */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--card2);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;min-height:42px;font-family:inherit;text-decoration:none;line-height:1.2}
.btn:hover{border-color:var(--acc);text-decoration:none}
.btn.primary{background:rgba(103,212,255,.16);border-color:var(--acc);color:var(--acc)}
.btn.ok{background:rgba(61,220,132,.14);border-color:var(--ok);color:var(--ok)}
.btn.danger{background:rgba(255,107,107,.14);border-color:var(--err);color:#ffb3b3}
.btn.warn{background:rgba(255,201,77,.14);border-color:var(--warn);color:var(--warn)}
.btn.small{padding:5px 10px;font-size:12.5px;min-height:32px}
.btn.big{padding:13px 18px;font-size:15px;min-height:50px}
.btn.block{width:100%}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed}
button.link{background:none;border:none;color:var(--acc);cursor:pointer;font:inherit;padding:0}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
form.inline{display:inline}
label{display:block;font-size:12.5px;color:var(--mut);margin:10px 0 4px}
label.check{display:flex;align-items:center;gap:8px;color:var(--tx);font-size:14px;margin:8px 0}
label.check input{width:18px;height:18px}
input,select,textarea{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--tx);border-radius:8px;padding:10px;font-size:15px;font-family:inherit}
input[type=checkbox],input[type=radio]{width:auto}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
.row{display:flex;flex-wrap:wrap;gap:10px} .row>*{flex:1 1 160px} .row>.auto{flex:0 0 auto}
fieldset{border:1px solid var(--line);border-radius:10px;padding:8px 14px 14px;margin-top:12px}
legend{color:var(--mut);font-size:12.5px;padding:0 6px}
details.card>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:"▸";color:var(--mut)} details.card[open]>summary::before{content:"▾"}

/* filters + badges */
.filt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center}
.filt a,.filt select{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;white-space:nowrap}
.filt a:hover{text-decoration:none;color:var(--tx)}
.filt a.active{color:var(--acc);border-color:var(--acc)}
.filt select{width:auto;padding:6px 10px}
.filt .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.badge{font-size:11px;font-weight:700;border-radius:20px;padding:2px 9px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.badge.st-uusi{color:var(--warn);border-color:rgba(255,201,77,.5)}
.badge.st-tyon_alla{color:var(--acc);border-color:rgba(103,212,255,.5)}
.badge.st-selvityksessa{color:var(--pur);border-color:rgba(216,167,255,.5)}
.badge.st-ratkaistu{color:var(--ok);border-color:rgba(61,220,132,.5)}
.badge.sos{background:var(--err);color:#fff;border-color:var(--err)}
.badge.new{background:rgba(61,220,132,.18);color:var(--ok);border-color:transparent}
.badge.leo{color:var(--pur);border-color:rgba(216,167,255,.5)}
.badge.tiedoksi{color:var(--mut)}

/* ticket cards */
.tk{display:block;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--mut);border-radius:12px;padding:12px 14px;margin-bottom:8px;color:var(--tx)}
.tk:hover{border-color:var(--acc);border-left-color:var(--acc);text-decoration:none}
.tk.st-uusi{border-left-color:var(--warn)} .tk.st-tyon_alla{border-left-color:var(--acc)} .tk.st-selvityksessa{border-left-color:var(--pur)} .tk.st-ratkaistu{border-left-color:var(--ok);opacity:.85}
.tk.sos{border-left-color:var(--err);box-shadow:inset 0 0 0 1px rgba(255,107,107,.35)}
.tk-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14px}
.tk-head b{font-size:15px}
.tk-meta{color:var(--mut);font-size:12.5px;margin-top:4px}
.tk-desc{margin-top:6px;font-size:14px}
.countdown{font-weight:700;color:var(--warn)} .countdown.late{color:var(--err)}
.timer-box{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:rgba(255,201,77,.08);border:1px solid rgba(255,201,77,.4);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:14px}
.timer-box.late{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.5)}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:6px}
.ev{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px;max-width:92%}
.ev.viesti_in{background:#1f3b31;border-color:#2c5646;align-self:flex-start}
.ev.viesti_out,.ev.auto_ack{background:#14324a;border-color:#22557a;align-self:flex-end}
.ev.eskalointi_sos{border-color:var(--err);background:rgba(255,107,107,.1)}
.ev.eskalointi_leo{border-color:var(--pur)}
.ev.muistiinpano{border-color:rgba(255,201,77,.4);background:rgba(255,201,77,.06)}
.ev.ratkaisu{border-color:var(--ok);background:rgba(61,220,132,.08)}
.ev.huom,.ev.tila,.ev.tyon_alle,.ev.tiedoksi,.ev.puhelu{align-self:center;max-width:100%;font-size:13px;color:var(--mut);background:transparent;border-style:dashed}
.ev-meta{font-size:11.5px;color:var(--mut);margin-bottom:2px}
.ev-text{white-space:pre-wrap;word-break:break-word}
.ev img{max-width:100%;max-height:320px;border-radius:8px;display:block;margin-top:6px}

/* language switch */
.lang-switch{display:inline-flex;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:3px}
.lang-switch button{background:transparent;border:none;color:var(--mut);border-radius:16px;padding:5px 10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.lang-switch button.active{background:var(--card);color:var(--acc)}
.copy-block{position:relative;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0;font-size:14px;white-space:pre-wrap}
.copy-block .btn{position:absolute;right:8px;top:8px}
.copy-block.padded{padding-right:110px}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
tr.today td{background:rgba(103,212,255,.07)}
tr.inactive td{opacity:.55}

/* week calendar */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week .day{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;min-height:90px;font-size:12.5px}
.week .day.today{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.week .day h4{font-size:12px;color:var(--mut);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.week .day.today h4{color:var(--acc)}
.evt{border-left:3px solid var(--acc);padding:2px 6px;margin-bottom:4px;background:var(--card2);border-radius:0 6px 6px 0;line-height:1.3}
.evt.ottelu{border-left-color:var(--err)} .evt.harjoitus{border-left-color:var(--warn)} .evt.muu{border-left-color:var(--acc)}
.evt b{font-variant-numeric:tabular-nums}
.duty-card{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:200px;flex:1}
.duty-card .dl{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.duty-card .dn{font-size:19px;font-weight:800;margin-top:2px} .duty-card .dn.none{color:var(--warn)}
.duty-card .dc{font-size:12px;color:var(--mut);margin-top:2px}
.duty-card.tuuraus{border-color:rgba(255,201,77,.5)}
.shift{display:flex;gap:6px;align-items:center;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:4px 8px;margin:3px 0;font-size:12.5px}
.shift.tuuraus{border-color:rgba(255,201,77,.6);background:rgba(255,201,77,.08)}
.shift b{font-variant-numeric:tabular-nums;white-space:nowrap}
.shift .edit{margin-left:auto;background:none;border:none;color:var(--mut);cursor:pointer;font-size:14px;padding:0 2px}

/* dialogs */
dialog{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:14px;padding:20px;max-width:560px;width:calc(100% - 24px);max-height:90vh;overflow:auto}
dialog::backdrop{background:rgba(4,10,20,.75)}
dialog h3{font-size:17px;margin-bottom:8px}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

/* reports */
.bar-row{display:flex;align-items:center;gap:10px;font-size:13px;margin:5px 0}
.bar-row .lbl{width:64px;color:var(--mut);flex:none} .bar-row .n{width:32px;text-align:right;flex:none;font-weight:700}
.bar-fill{height:16px;background:linear-gradient(90deg,#2b7fb8,#67d4ff);border-radius:4px;min-width:2px}

/* login */
.login-wrap{max-width:400px;margin:8vh auto}
footer{padding:20px;color:var(--mut);font-size:12px;text-align:center}

@media (max-width:760px){
  main{padding:10px}
  header.top{padding:8px 10px}
  .brand small{display:none}
  .me span.name{display:none}
  .me form{display:none}
  .duty-card{flex:1 1 200px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .week .day{min-height:0}
  .week .day.empty{display:none}
  .hide-m{display:none}
  .ev{max-width:100%}
  .btn.big{width:100%}
  .chip{min-width:0;flex:1 0 42%}
}