/* =====================================================================
   Workplan v2 – gemensam design
   Källa: workplan-prototyp.html (datorvyn). Alla mallsidor (mall-*.html)
   och nya Blazor-sidor ska använda dessa klasser. Ersätter workplan.css.
   Prefix: wp-  (krockar inte med Radzen/Bootstrap eller gamla workplan.css:
   .wp-box/.wp-msg/.wp-content heter så för att .wp-card/.wp-alert/.wp-main
   redan finns i gamla workplan.css). Kan laddas parallellt under övergången.
   ===================================================================== */

:root{
  --primary:#20a29d; --primary-hover:#1a8a85; --primary-light:#e8f5f4;
  --navy:#192734; --mint:#c6e2df;
  --page:#f4f7f6; --card:#ffffff; --muted:#5f7a8a; --border:#d1dbd9; --row:#e8f0ee; --text:#192734;
  --success:#16a34a; --success-bg:#f0fdf4;
  --warning:#d97706; --warning-bg:#fffbeb;
  --error:#dc2626;   --error-bg:#fef2f2;
  --info:#0e7490;    --info-bg:#ecfeff;
  --shell:#192734; --shell-text:#c6e2df;
  --photo1:#b9c9c6; --photo2:#d4dfdc;
  --side-w:224px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#151f27; --card:#1d2a35; --muted:#93a9b5; --border:#2f4150; --row:#243441; --text:#e6eeec; --navy:#e6eeec;
  --primary-light:#1c3a3a; --success-bg:#12301c; --warning-bg:#3a2a0e; --error-bg:#3d1a1a; --info-bg:#0f2f38;
  --shell:#0b1218; --photo1:#2b3c46; --photo2:#34474f;
}}
:root[data-theme="dark"]{
  --page:#151f27; --card:#1d2a35; --muted:#93a9b5; --border:#2f4150; --row:#243441; --text:#e6eeec; --navy:#e6eeec;
  --primary-light:#1c3a3a; --success-bg:#12301c; --warning-bg:#3a2a0e; --error-bg:#3d1a1a; --info-bg:#0f2f38;
  --shell:#0b1218; --photo1:#2b3c46; --photo2:#34474f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--page);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
h1,h2,h3,p{margin:0}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---------- applayout: sidomeny + innehåll ---------- */
.wp-app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.wp-side{background:var(--shell);color:var(--mint);padding:22px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.wp-side .wp-brand{font-weight:700;font-size:17px;padding:0 10px 18px;color:#c6e2df}
.wp-side .wp-brand small{display:block;font-weight:400;font-size:11px;opacity:.6}
.wp-side a,.wp-side button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:8px;text-align:left;font-size:13.5px;font-weight:500;color:#c6e2df;opacity:.75;text-decoration:none;width:100%}
.wp-side a:hover,.wp-side button:hover{opacity:1;background:rgba(198,226,223,.08);text-decoration:none}
.wp-side a.on,.wp-side button.on{opacity:1;background:rgba(32,162,157,.18);color:#20a29d}
.wp-side .wp-cnt{font-size:11px;background:rgba(217,119,6,.3);color:#fcd9a3;padding:1px 7px;border-radius:100px}
.wp-side .wp-grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.45;padding:14px 11px 4px}
.wp-side .wp-tenant{margin-top:auto;padding:12px 11px;border-top:1px solid rgba(198,226,223,.15);font-size:12px;opacity:.8;cursor:pointer;border-radius:8px}
.wp-side .wp-tenant:hover{background:rgba(198,226,223,.08)}
.wp-side .wp-tenant b{display:block;font-size:13px;opacity:1}
.wp-content{min-width:0;padding:26px 30px 48px}

/* ---------- sidhuvud ---------- */
.wp-crumb{font-size:12.5px;color:var(--muted);margin-bottom:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wp-crumb:empty{display:none}
.wp-crumb a{color:var(--muted)}
.wp-crumb a:hover{color:var(--primary)}
/* Kompatibilitet med gamla brödsmulor (topbar-breadcrumb-sektionen):
   ersätt Material-symbols-separatorn med › så sidor från v1 ser rätt ut. */
.wp-crumb .wp-breadcrumb-sep{display:inline-flex;align-items:center}
.wp-crumb .wp-breadcrumb-sep .material-symbols-outlined{display:none}
.wp-crumb .wp-breadcrumb-sep::before{content:"›";color:var(--muted)}
.wp-crumb .wp-breadcrumb-current{color:var(--muted)}
.wp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.wp-head h1{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.wp-sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.wp-sub.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.wp-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wp-note{font-size:12px;color:var(--muted)}

/* ---------- nyckeltal ---------- */
.wp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.wp-tile{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;text-decoration:none;color:inherit;display:block}
a.wp-tile:hover,.wp-tile.tap:hover{background:var(--row);text-decoration:none;cursor:pointer}
.wp-tile .l{font-size:12px;color:var(--muted)}
.wp-tile .v{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.wp-tile .v small{font-size:13px;font-weight:500;color:var(--muted)}
.wp-tile.hot .v{color:var(--warning)}
.wp-tile.bad .v{color:var(--error)}
.wp-tile.good .v{color:var(--success)}

/* ---------- kolumner ---------- */
.wp-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wp-cols.wide{grid-template-columns:1.6fr 1fr}
.wp-stack{display:flex;flex-direction:column;gap:18px}
.wp-rp{display:flex;flex-direction:column;gap:14px}

/* ---------- panel (kort med rubrikrad) ---------- */
.wp-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.wp-panel+.wp-panel{margin-top:18px}
.wp-ph{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:14px}
.wp-ph span{font-size:12px;color:var(--muted);font-weight:500}
.wp-body{padding:12px 16px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.wp-body.form{gap:14px;padding:16px}
.wp-pf{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--page)}

/* ---------- enkel lista i panel ---------- */
.wp-list>div,.wp-list>a{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13.5px;color:inherit;text-decoration:none}
.wp-list>*:last-child{border-bottom:0}
.wp-list>.tap,.wp-list>a{cursor:pointer}
.wp-list>.tap:hover,.wp-list>a:hover{background:var(--row);text-decoration:none}
.wp-list .t{font-weight:500}
.wp-list .s{font-size:12px;color:var(--muted)}

/* ---------- tabell ---------- */
.wp-table-wrap{overflow-x:auto}
table.wp-table{width:100%;border-collapse:collapse;font-size:13.5px}
.wp-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--border);font-weight:600;white-space:nowrap}
.wp-table tbody td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.wp-table tbody tr:last-child td{border-bottom:0}
.wp-table tbody tr.tap{cursor:pointer}
.wp-table tbody tr.tap:hover td{background:var(--row)}
.wp-table td.r,.wp-table th.r{text-align:right}
.wp-table td.c,.wp-table th.c{text-align:center}
.wp-table td.mono,.wp-table .mono{white-space:nowrap}
.wp-table th.sort{cursor:pointer}
.wp-table th.sort.asc::after{content:" ↑"}
.wp-table th.sort.desc::after{content:" ↓"}
.wp-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}
.wp-pager .pg{display:flex;gap:4px}
.wp-pager .pg button{min-width:28px;height:28px;border-radius:6px;padding:0 6px;font-size:12.5px}
.wp-pager .pg button:hover{background:var(--row)}
.wp-pager .pg button.on{background:var(--navy);color:var(--page);font-weight:600}

/* ---------- filterrad + sök ---------- */
.wp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.wp-filters{display:flex;gap:6px;flex-wrap:wrap}
.wp-filters button,.wp-filters a{padding:5px 12px;border-radius:100px;border:1px solid var(--border);font-size:12.5px;background:var(--card);color:var(--text);text-decoration:none}
.wp-filters button:hover,.wp-filters a:hover{background:var(--row);text-decoration:none}
.wp-filters button.on,.wp-filters a.on{background:var(--navy);color:var(--page);border-color:var(--navy)}
.wp-search{position:relative;width:260px;max-width:100%}
.wp-search input{width:100%;padding-left:34px}
.wp-search::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;line-height:1}

/* ---------- statusetiketter ---------- */
.wp-pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:100px;white-space:nowrap;line-height:1.6}
.wp-pill.p{background:var(--primary-light);color:var(--primary)}
.wp-pill.w{background:var(--warning-bg);color:var(--warning)}
.wp-pill.s{background:var(--success-bg);color:var(--success)}
.wp-pill.i{background:var(--info-bg);color:var(--info)}
.wp-pill.e{background:var(--error-bg);color:var(--error)}
.wp-pill.g{background:var(--row);color:var(--muted)}
/* alias för befintliga komponenter (CaseStatusPill m.fl.) */
.wp-pill-primary{background:var(--primary-light);color:var(--primary)}
.wp-pill-warning{background:var(--warning-bg);color:var(--warning)}
.wp-pill-success{background:var(--success-bg);color:var(--success)}
.wp-pill-info{background:var(--info-bg);color:var(--info)}
.wp-pill-danger{background:var(--error-bg);color:var(--error)}
.wp-pill-neutral{background:var(--row);color:var(--muted)}

/* ---------- knappar ---------- */
.wp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:8px;font-weight:600;font-size:13px;background:var(--primary);color:#fff;text-decoration:none;white-space:nowrap;line-height:1.2}
.wp-btn:hover{background:var(--primary-hover);text-decoration:none}
.wp-btn.o{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.wp-btn.o:hover{background:var(--row)}
.wp-btn.danger{background:var(--error)}
.wp-btn.danger:hover{background:#b91c1c}
.wp-btn.danger.o{background:transparent;color:var(--error);border-color:var(--error)}
.wp-btn.danger.o:hover{background:var(--error-bg)}
.wp-btn.sm{padding:6px 11px;font-size:12px}
.wp-btn.wide{width:100%;padding:12px}
.wp-btn:disabled{opacity:.5;cursor:not-allowed}
.wp-icon{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.wp-icon:hover{background:var(--row);color:var(--text)}

/* ---------- formulär ---------- */
.wp-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.wp-field label{font-size:12px;font-weight:600}
.wp-field label .req{color:var(--error);margin-left:2px}
.wp-field .help{font-size:12px;color:var(--muted)}
.wp-field .err{font-size:12px;color:var(--error)}
.wp-inp,.wp-field input,.wp-field select,.wp-field textarea{font:inherit;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--card);color:var(--text);min-height:36px;width:100%}
.wp-field textarea{min-height:80px;resize:vertical}
.wp-field input:focus,.wp-field select:focus,.wp-field textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(32,162,157,.18)}
.wp-field.invalid input,.wp-field.invalid select,.wp-field.invalid textarea{border-color:var(--error)}
.wp-field input[readonly]{background:var(--row);color:var(--muted)}
.wp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wp-check{display:flex;align-items:center;gap:8px;font-size:13.5px}
.wp-check input{width:16px;height:16px;accent-color:var(--primary)}
.wp-opt{display:flex;gap:6px}
.wp-opt button{flex:1;padding:8px 6px;white-space:nowrap;border:1.5px solid var(--border);border-radius:8px;font-size:12.5px;background:var(--card);color:var(--text)}
.wp-opt button.on{border-color:var(--primary);background:var(--primary-light);color:var(--primary);font-weight:600}
.wp-fieldset-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:4px}

/* ---------- nyckel/värde-rader ---------- */
.wp-kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}
.wp-kv>span:last-child{text-align:right}
.wp-kv.tot{border-top:1px solid var(--border);margin-top:4px;padding-top:7px;font-weight:600}

/* ---------- tidslinje (tråden) ---------- */
.wp-tl{padding:16px;display:flex;flex-direction:column;gap:12px}
.wp-day{font-size:11px;color:var(--muted);text-align:center;margin:4px 0 -4px}
.wp-ev{display:flex;gap:9px}
.wp-ev .ic{width:30px;height:30px;border-radius:50%;background:var(--primary-light);color:var(--primary);flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.wp-ev.warn .ic{background:var(--warning-bg);color:var(--warning)}
.wp-ev.warn .wp-box{border-color:var(--warning);background:var(--warning-bg)}
.wp-ev.ok .ic{background:var(--success-bg);color:var(--success)}
.wp-ev.info .ic{background:var(--info-bg);color:var(--info)}
.wp-ev .wp-box{flex:1}
.wp-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 13px}
.wp-box .m{font-size:11.5px;color:var(--muted);margin-bottom:3px}
.wp-box h3{font-size:14.5px;font-weight:600;line-height:1.3}
.wp-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wp-photo{border-radius:8px;background:repeating-linear-gradient(135deg,var(--photo1),var(--photo1) 7px,var(--photo2) 7px,var(--photo2) 14px);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11.5px;height:72px}

/* ---------- träd (fastighet → anläggning) ---------- */
.wp-tree{padding:12px 16px;font-size:13.5px}
.wp-tree>div{padding:6px 0}
.wp-tree .lvl1{padding-left:18px;border-left:2px solid var(--border);margin-left:6px}
.wp-tree .lvl2{padding-left:18px;border-left:2px solid var(--border);margin-left:24px}
.wp-tree .n{display:flex;justify-content:space-between;gap:10px;align-items:center}

/* ---------- meddelanden, tomt läge ---------- */
.wp-msg{border-radius:12px;padding:12px 14px;font-size:13.5px;border:1px solid;display:flex;gap:10px;align-items:flex-start}
.wp-msg.info{background:var(--primary-light);border-color:var(--primary)}
.wp-msg.warn{background:var(--warning-bg);border-color:var(--warning)}
.wp-msg.error{background:var(--error-bg);border-color:var(--error)}
.wp-msg.ok{background:var(--success-bg);border-color:var(--success)}
.wp-msg b{color:var(--primary)}
.wp-msg.warn b{color:var(--warning)} .wp-msg.error b{color:var(--error)} .wp-msg.ok b{color:var(--success)}
.wp-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.wp-empty b{display:block;color:var(--text);font-size:15px;margin-bottom:4px}
.wp-steps{display:flex;gap:6px;font-size:11px;color:var(--muted);margin-bottom:16px}
.wp-steps span{flex:1;padding:4px 0;border-top:3px solid var(--border);text-align:center}
.wp-steps span.on{border-color:var(--primary);color:var(--primary);font-weight:600}
.wp-steps span.done{border-color:var(--success);color:var(--success)}
.wp-hit{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--card)}
.wp-hit.on{border-color:var(--primary);background:var(--primary-light)}

/* ---------- responsivt ---------- */
@media (max-width:1100px){.wp-cols.wide{grid-template-columns:1fr}}
@media (max-width:900px){
  .wp-app{grid-template-columns:1fr}
  .wp-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:10px 14px}
  .wp-side .wp-brand{padding:6px 10px;width:100%}
  .wp-side .wp-grp,.wp-side .wp-tenant{display:none}
  .wp-side a,.wp-side button{width:auto}
  .wp-content{padding:18px 16px 40px}
  .wp-cols{grid-template-columns:1fr}
  .wp-head{flex-direction:column}
  .wp-act{justify-content:flex-start}
  .wp-grid2,.wp-grid3{grid-template-columns:1fr}
}

/* =====================================================================
   MOBIL (fältappen) – prefix wp-m-. Källa: prototypens mobilvy.
   Sidan är fullbredd på telefon; på större skärm visas den som en
   centrerad kolumn (max 480px) mot en mörkare bakgrund.
   ===================================================================== */
.wp-m{min-height:100vh;background:var(--page);display:flex;flex-direction:column;max-width:480px;margin:0 auto;position:relative;box-shadow:0 0 40px rgba(15,28,39,.15)}
@media (min-width:600px){body.wp-m-stage{background:#dfe7e5}@media (prefers-color-scheme:dark){body.wp-m-stage:not([data-theme="light"]){background:#0f171d}}}
.wp-m-scroll{flex:1;padding-bottom:88px}
/* topp */
.wp-m-top{background:var(--shell);color:#fff;padding:18px 18px 14px;position:sticky;top:0;z-index:5}
.wp-m-top .k{font-size:11.5px;color:var(--mint);opacity:.85;letter-spacing:.02em;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wp-m-top h1{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin-top:2px;text-wrap:balance}
.wp-m-top .chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.wp-m-top .back{display:inline-flex;align-items:center;gap:4px;color:var(--mint);font-size:13px;margin-bottom:6px;text-decoration:none}
.wp-m-top .bar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wp-m-top .bar .wp-btn{background:rgba(255,255,255,.12);color:#fff}
.wp-chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:100px;background:rgba(198,226,223,.18);color:var(--mint);white-space:nowrap}
.wp-chip.warn{background:rgba(217,119,6,.28);color:#fcd9a3}
.wp-chip.ok{background:rgba(22,163,74,.28);color:#bbf0cb}
.wp-chip.err{background:rgba(220,38,38,.3);color:#fecaca}
/* kropp */
.wp-m-body{padding:14px 14px 20px;display:flex;flex-direction:column;gap:12px}
.wp-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between;align-items:center}
.wp-sec a{font-size:11px;text-transform:none;letter-spacing:0;font-weight:600}
.wp-box.tap{cursor:pointer;display:block;color:inherit;text-decoration:none}
.wp-box.tap:hover{background:var(--row);text-decoration:none}
.wp-box p{font-size:13px}
.wp-box.dashed{border-style:dashed}
.wp-box.hi{border-color:var(--primary)}
.wp-box.warn{border:2px solid var(--warning);background:var(--warning-bg)}
.wp-timer{font-size:26px;font-weight:600;letter-spacing:-.02em}
.wp-banner{background:var(--primary-light);border:1px solid var(--primary);border-radius:12px;padding:12px 13px;font-size:13px}
.wp-banner b{color:var(--primary)}
/* snabbknappar */
.wp-acts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wp-acts.four{grid-template-columns:repeat(4,1fr)}
.wp-acts button,.wp-acts a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:var(--text);padding:8px 2px;background:var(--card);border:1px solid var(--border);border-radius:10px;text-decoration:none}
.wp-acts button b,.wp-acts a b{font-size:17px}
.wp-acts button:hover,.wp-acts a:hover{background:var(--row);text-decoration:none}
/* mobil lista: sökfält + filterchips (horisontellt skroll) */
.wp-m-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.wp-m-filters::-webkit-scrollbar{display:none}
.wp-m-filters button{flex:none;padding:5px 12px;border-radius:100px;border:1px solid var(--border);font-size:12.5px;background:var(--card);color:var(--text)}
.wp-m-filters button.on{background:var(--navy);color:var(--page);border-color:var(--navy)}
.wp-m-list{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.wp-m-list>a,.wp-m-list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--border);color:inherit;text-decoration:none}
.wp-m-list>*:last-child{border-bottom:0}
.wp-m-list>a:hover{background:var(--row);text-decoration:none}
.wp-m-list .t{font-weight:600;font-size:14px;line-height:1.3}
.wp-m-list .s{font-size:12px;color:var(--muted);margin-top:1px}
.wp-m-list .chev{color:var(--muted);font-size:16px;flex:none}
.wp-m-list .end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
/* bottenmeny */
.wp-m-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:78px;background:var(--card);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:flex-start;padding-top:9px;z-index:6;padding-bottom:env(safe-area-inset-bottom)}
.wp-m-bar a,.wp-m-bar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);width:64px;text-decoration:none}
.wp-m-bar a b,.wp-m-bar button b{width:40px;height:40px;border-radius:50%;background:var(--row);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;color:var(--text)}
.wp-m-bar .on{color:var(--primary)}
.wp-m-bar .on b{background:var(--primary-light);color:var(--primary)}
.wp-m-bar .mic b{background:var(--primary);color:#fff;width:52px;height:52px;margin-top:-16px;box-shadow:0 6px 16px rgba(32,162,157,.4)}
.wp-m-bar a:hover{text-decoration:none}
/* fast knapprad nederst i formulär (ovanför bottenmenyn eller utan) */
.wp-m-foot{position:sticky;bottom:0;background:var(--page);padding:10px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border)}
.wp-m-scroll.nobar{padding-bottom:0}
/* röst */
.wp-wave{display:flex;align-items:center;gap:3px;height:56px;justify-content:center}
.wp-wave i{display:block;width:4px;border-radius:2px;background:var(--primary);animation:wpw 1.1s ease-in-out infinite}
@keyframes wpw{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.wp-wave i{animation:none}}
.wp-quote{font-size:15px;line-height:1.45}
.wp-sugg{border-left:3px solid var(--primary);padding-left:10px}

/* =====================================================================
   RADZEN DATA GRID – kompatibilitetsblock så en RadzenDataGrid inuti
   en .wp-panel får samma rad-/rubrikutseende som .wp-table. Används
   där vi behöver Radzens sortering/paging (för nya sidor är .wp-table
   att föredra).
   ===================================================================== */
.wp-panel .rz-data-grid,.wp-panel .rz-grid-table{background:transparent;border:0;box-shadow:none;font-family:inherit;font-size:13.5px;color:inherit}
.wp-panel .rz-data-grid .rz-grid-table-thead th,.wp-panel .rz-data-grid .rz-grid-table-header-row th{background:transparent;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.06em;font-weight:600;border-bottom:1px solid var(--border);padding:10px 16px;text-align:left}
.wp-panel .rz-data-grid .rz-grid-table-tbody td,.wp-panel .rz-data-grid td.rz-cell-data{padding:11px 16px;border-bottom:1px solid var(--border);background:transparent;color:inherit}
.wp-panel .rz-data-grid .rz-grid-table-tbody tr:last-child td{border-bottom:0}
.wp-panel .rz-data-grid .rz-grid-table-tbody tr:hover td,.wp-panel .rz-data-grid tr.rz-state-hover td{background:var(--row)}
.wp-panel .rz-pager,.wp-panel .rz-paginator{border-top:1px solid var(--border);background:transparent;padding:10px 16px;color:var(--muted);font-size:12.5px}

/* =====================================================================
   INLOGGNING / KONTO (utan sidomeny) – .wp-auth. Källa: mall-inloggning.html
   ===================================================================== */
.wp-auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;background:var(--shell);background-image:radial-gradient(60% 50% at 50% 0%,rgba(32,162,157,.25),transparent)}
.wp-auth-brand{color:var(--mint);font-weight:700;font-size:22px;letter-spacing:-.01em;margin-bottom:18px;text-align:center}
.wp-auth-brand small{display:block;font-weight:400;font-size:12px;opacity:.7}
.wp-auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px 24px 20px;box-shadow:0 20px 50px rgba(15,28,39,.35);display:flex;flex-direction:column;gap:14px}
.wp-auth-card h1{font-size:20px;font-weight:700;letter-spacing:-.01em}
.wp-auth-card .lead{font-size:13.5px;color:var(--muted);margin-top:-8px}
.wp-auth-who{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--row);font-size:13.5px}
.wp-auth-who b{display:block;font-size:12px;color:var(--muted);font-weight:500}
.wp-auth-links{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;flex-wrap:wrap}
.wp-auth-foot{margin-top:18px;font-size:12px;color:var(--mint);opacity:.6;text-align:center}
.wp-auth-or{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.wp-auth-or::before,.wp-auth-or::after{content:"";flex:1;border-top:1px solid var(--border)}