@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(/fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-display:swap;src:url(/fonts/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url(/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

.theme-dark{--bg:#0F1419;--surface:#171D24;--surface2:#1F2730;--hover:#1B222B;--line:#2A333D;--line2:#6B7785;--ink:#E8ECEF;--muted:#9AA6B2;--accent:#FF7A5C;--on-accent:#1A0A06;--sel-bg:#E8ECEF;--sel-fg:#0F1419;--ja:#4CC38A;--on-ja:#06140D;--ja-text:#5BD39A;--kanske:#F2C94C;--on-kanske:#2A1F00;--kanske-text:#F2C94C;--nej:#EF6461;--on-nej:#1E0505;--nej-text:#FF8A87;--none:#3A444F;--warn-bg:#3A201A;--warn-fg:#FFB4A2;--urgent:#FF9B7F;--input-bg:#0F1419;--toast-bg:#E8ECEF;--toast-fg:#0F1419;--panel-bg:#171D24;--panel-fg:#E8ECEF;--panel-sub:#9AA6B2;--mine:#2A1D1A;--link:#FF9B7F;--focus:#E8ECEF;color-scheme:dark}
.theme-light{--bg:#F4F3EE;--surface:#FFFFFF;--surface2:#F4F3EE;--hover:#FAF9F5;--line:#E6E3DB;--line2:#8A867C;--ink:#15202B;--muted:#5B6672;--accent:#C2381A;--on-accent:#FFFFFF;--sel-bg:#15202B;--sel-fg:#FFFFFF;--ja:#1E6B45;--on-ja:#FFFFFF;--ja-text:#1E6B45;--kanske:#F2C94C;--on-kanske:#3B2A00;--kanske-text:#6B5300;--nej:#C93B3B;--on-nej:#FFFFFF;--nej-text:#A82F2F;--none:#D3D0C7;--warn-bg:#FBE9E4;--warn-fg:#8F2A12;--urgent:#8F2A12;--input-bg:#FFFFFF;--toast-bg:#15202B;--toast-fg:#FFFFFF;--panel-bg:#15202B;--panel-fg:#FFFFFF;--panel-sub:#D8DDE3;--mine:#FBF1EE;--link:#9E2B12;--focus:#15202B;color-scheme:light}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 16px/1.4 'Barlow',system-ui,sans-serif;-webkit-text-size-adjust:100%}
#root{min-height:100vh;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a{color:var(--link)}
h1,h2{margin:0}
.h1{font:700 38px/1 'Barlow Condensed','Barlow',sans-serif}
.h2{font:700 26px/1.1 'Barlow Condensed','Barlow',sans-serif}
.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.col{display:flex;flex-direction:column;gap:14px}
.sp{justify-content:space-between}
.wrap{max-width:1120px;margin:0 auto;padding:20px 16px 56px}

/* knappar */
.btn{min-height:44px;padding:0 18px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:600;font-size:15px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.danger{color:var(--nej-text)}
.btn.small{min-height:36px;padding:0 12px;font-size:14px;border-radius:6px}
.link{background:none;border:0;padding:0 2px;min-height:36px;color:var(--link);text-decoration:underline;font-weight:600;font-size:14px}
.link.danger{color:var(--nej-text)}
.chip{min-height:36px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;font-size:14px}
.chip[aria-pressed=true]{background:var(--sel-bg);border-color:var(--sel-bg);color:var(--sel-fg)}
.chip.sq{border-radius:6px}

/* formulär */
.fld{height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--input-bg);width:100%;font-size:16px}
textarea.fld{height:auto;min-height:84px;padding:10px 12px;resize:vertical}
.lbl{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px}
.err{color:var(--nej-text);font-size:14px;font-weight:600}
.ok{color:var(--ja-text);font-size:14px;font-weight:600}
.hint{font-size:13px;color:var(--muted)}

/* inloggning */
.lg{min-height:100vh;display:flex;flex-wrap:wrap}
.lg-panel{flex:1 1 420px;background:var(--panel-bg);color:var(--panel-fg);padding:64px 48px;display:flex;flex-direction:column;gap:48px}
.lg-brand{display:flex;align-items:center;gap:16px}
.lg-brand img{width:104px;height:104px}
.lg-brand h1{font:700 72px/.95 'Barlow Condensed',sans-serif}
.lg-brand p{margin:4px 0 0;font:500 24px 'Barlow Condensed',sans-serif;color:var(--panel-sub)}
.lg-form{flex:1 1 420px;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.lg-form form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px}

/* sidhuvud + meny */
header.top{background:var(--surface);border-bottom:1px solid var(--line);position:relative}
.avatar.umb{border:0;cursor:pointer}
.upop{position:absolute;right:16px;top:54px;z-index:40;background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.top-row{max-width:1120px;margin:0 auto;padding:6px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px}
.brand span{font:700 26px 'Barlow Condensed',sans-serif;white-space:nowrap}
.tabs{display:flex;gap:4px;margin:0 auto}
.tab{background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:0 12px;min-height:48px;font-weight:700;font-size:16px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.tab svg{display:none}
.tab .short{display:none}
.user{display:flex;align-items:center;gap:8px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--sel-bg);color:var(--sel-fg);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.role{padding:2px 10px;border-radius:999px;background:var(--surface2);font-size:13px;font-weight:600}

/* svarsknappar, stapel */
.opt{min-height:44px;min-width:64px;padding:0 14px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);font-weight:600;font-size:15px}
.opt.ja.on{background:var(--ja);border-color:var(--ja);color:var(--on-ja)}
.opt.kanske.on{background:var(--kanske);border-color:var(--kanske);color:var(--on-kanske)}
.opt.nej.on{background:var(--nej);border-color:var(--nej);color:var(--on-nej)}
.bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--none);min-width:100px;width:100%}
.bar i{display:block;min-width:3px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}

/* listor */
.list{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.grp{background:var(--surface2);padding:6px 16px;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.item{border-top:1px solid var(--line)}
.item.past{opacity:.6}
.item.mine{background:var(--mine)}
.rx{display:grid;grid-template-columns:56px minmax(180px,1.3fr) auto minmax(190px,1fr);gap:12px;align-items:center;padding:10px 16px}
.dt .d{display:block;font:700 30px/1 'Barlow Condensed',sans-serif}
.dt .w{display:block;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--muted)}
.nm{font-weight:700;font-size:17px}
.meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 10px;align-items:center}
.pill{padding:1px 8px;border-radius:6px;background:var(--surface2);font-size:12px;font-weight:600;color:var(--ink)}
.urgent{color:var(--urgent);font-weight:600}
.desc{font-size:14px;margin-top:2px}
.ans{display:flex;gap:6px}
.st{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.tg{display:flex;justify-content:space-between;align-items:center;gap:8px;background:none;border:0;padding:2px 0;min-height:32px;font-size:13px;color:var(--muted);text-align:left}
.tg b{color:var(--ja-text);font-size:15px}
.names{background:var(--surface2);border-radius:8px;padding:10px 12px;margin:0 14px 10px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:12px}

/* översikt */
.grid2{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.badge{background:var(--accent);color:var(--on-accent);border-radius:999px;min-width:28px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.todo{padding:10px 0 10px 10px;border-top:1px solid var(--line);border-left:3px solid transparent;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px}
.todo.need{border-left-color:var(--accent)}
.todo-info{min-width:0;overflow-wrap:anywhere}
.pop{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.rank{width:26px;font:700 20px 'Barlow Condensed',sans-serif;color:var(--muted)}

/* matris */
.hscroll{overflow-x:auto}
table.mx{border-collapse:separate;border-spacing:0;font-size:14px;min-width:100%}
.mx th,.mx td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:center}
.mx th.vn{height:110px;vertical-align:bottom;font-weight:600}
.mx th.vn span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;display:inline-block}
.mx td.f,.mx th.f{position:sticky;left:0;background:var(--surface);text-align:left;min-width:190px;max-width:230px;z-index:1}
.mx .cell{display:inline-block;width:22px;height:22px;border-radius:5px;background:var(--none)}
.cell.ja{background:var(--ja)}.cell.kanske{background:var(--kanske)}.cell.nej{background:var(--nej)}
.mx .tot{white-space:nowrap;font-weight:600}

/* admin */
.arow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line)}

/* modal + toast */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-fg);padding:12px 18px;border-radius:10px;font-weight:600;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
#toast.on{opacity:1}

@media (max-width:860px){
  .rx{grid-template-columns:48px 1fr;gap:8px 12px}
  .rx .ans{grid-column:1 / -1}
  .rx .ans .opt{flex:1}
  .rx .st{grid-column:1 / -1}
}
@media (max-width:640px){
  .todo{grid-template-columns:1fr}
  .todo .ans{width:100%}
  .todo .ans .opt{flex:1}
  .wrap{padding:14px 12px 112px}
  .h1{font-size:32px}
  .top-row{padding:6px 12px;gap:6px 8px}
  .brand{flex:1 1 auto}
  .brand span{font-size:22px}
  .udesk{display:none !important}
  .tabs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;margin:0;gap:2px;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--surface) 62%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 color-mix(in srgb,var(--ink) 14%,transparent)}
  .tab{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:6px 2px;border:0;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink);transition:background .15s}
  .tab[aria-current=page]{color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent);border:0}
  .tab svg{display:block}
  .tab .long{display:none}
  .tab .short{display:inline}
  .lg-panel{padding:28px 20px;gap:0;flex-basis:auto}
  .lg-brand img{width:64px;height:64px}
  .lg-brand h1{font-size:44px;white-space:nowrap}
  .lg-brand p{font-size:18px}
  .lg-form{padding:24px 16px;align-items:flex-start}
  .lg{min-height:0}
}

#banner{background:#f5b301;color:#1a1400;text-align:center;font-size:13px;font-weight:600;padding:5px 10px;letter-spacing:.2px}