:root{color-scheme:dark;--bg:#0b1512;--panel:#14231d;--line:#294438;--text:#f1f8f3;--muted:#a2b5a9;--green:#7fdc91;--green2:#143b24}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#173a26 0,transparent 40%),var(--bg);font:15px/1.5 system-ui,-apple-system,sans-serif;color:var(--text)}header{max-width:1100px;margin:auto;padding:20px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;letter-spacing:2px}.brand strong{display:block;font-size:21px;line-height:1.1}.brand small{display:block;font-size:9px;color:var(--green);letter-spacing:2px}.logo{width:43px;height:43px;border:2px solid var(--green);background:var(--green2);color:var(--green);border-radius:12px;display:grid;place-items:center;font-size:26px}main{max-width:1100px;margin:24px auto 50px;padding:0 16px}h1{font-size:clamp(25px,4vw,34px);margin:3px 0 16px}h2{font-size:19px;margin:0 0 16px}p{color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;margin:0 0 22px;box-shadow:0 8px 35px #0002}#auth{max-width:470px;margin:35px auto}.tabs,nav,.actions{display:flex;gap:9px;flex-wrap:wrap}.tabs{margin:18px 0}button{border:1px solid var(--line);background:#21382b;color:var(--text);padding:11px 15px;border-radius:10px;cursor:pointer;font:inherit;font-weight:650}button:disabled{opacity:.5;cursor:not-allowed}button.active,.primary{background:var(--green);border-color:var(--green);color:#0c2416}.secondary{background:#1b3326}.ghost{background:transparent}form{display:grid;gap:14px}label{display:grid;gap:6px;font-weight:600;color:#dbe9df}input,textarea{width:100%;border:1px solid #3c5b48;background:#0e1d16;color:white;border-radius:9px;padding:12px;font:inherit;outline:none}input:focus,textarea:focus{border-color:var(--green)}.optional,small{color:var(--muted);font-weight:400}.cols{display:grid;grid-template-columns:1fr 1fr;gap:13px}.hidden{display:none!important}.topline{display:flex;justify-content:space-between;align-items:center;gap:12px}.topline small{letter-spacing:2px;color:var(--green)}.pill{font-size:10px;letter-spacing:.7px;font-weight:800;color:var(--green);background:#244631;padding:7px 10px;border-radius:99px}nav{margin:18px 0 24px;border-bottom:1px solid var(--line);padding-bottom:13px}nav button{flex:1;min-width:80px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 20px}.metric{background:#1b3024;border:1px solid var(--line);border-radius:13px;padding:18px}.metric small{display:block}.metric strong{display:block;font-size:24px;margin-top:7px;color:var(--green);font-variant-numeric:tabular-nums}.paneltitle{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.stack{display:grid;gap:10px;margin:12px 0 24px}.job,.user{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:16px}.jobhead{display:flex;justify-content:space-between;gap:12px}.job h3,.user h3{margin:0;font-size:16px}.meta{font-size:13px;color:var(--muted);margin:5px 0}.jobnums{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0}.jobnums b{color:var(--green)}.smallbtn{padding:6px 10px;font-size:12px}.user{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.message{min-height:20px;color:#ffcf88}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#335940;color:white;border-radius:12px;padding:12px 18px;display:none;z-index:5;max-width:90vw}footer{text-align:center;font-size:11px;letter-spacing:2px;color:#668374;padding:25px}@media(max-width:600px){.cols{grid-template-columns:1fr}.metrics{gap:7px}.metric{padding:12px}.metric strong{font-size:18px}.panel{padding:16px}.pill{font-size:9px}.brand strong{font-size:18px}}

.header-actions{display:flex;align-items:center;gap:6px}.language-gate{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at top,#1e5232,#0b1512 65%);display:grid;place-items:center;padding:20px}.language-gate.hidden{display:none}.language-card{width:min(100%,420px);padding:35px 25px;border:1px solid #41634c;border-radius:22px;background:#14231d;text-align:center;box-shadow:0 25px 80px #0007}.language-symbol{font-size:48px}.language-card h1{letter-spacing:3px;color:#7fdc91}.language-card p{margin:15px 0 24px}.language-option{display:block;width:100%;margin:12px 0;padding:17px;text-align:left;font-size:18px}.language-option:hover,.language-option:focus{border-color:#7fdc91;background:#234c31}#changeLanguage{white-space:nowrap}@media(max-width:420px){header{padding:16px 10px}.header-actions button{padding:9px}.brand{gap:6px}}

.logo img{width:42px;height:42px;object-fit:cover;border-radius:11px}.toggle-row{display:flex;align-items:center;gap:10px}.toggle-row input{width:22px;height:22px}@media(max-width:700px){body{overflow-x:hidden}main{padding-left:12px;padding-right:12px}#nav{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none}#nav button{flex-shrink:0;min-height:44px;white-space:nowrap}input,select,textarea{font-size:16px!important;min-height:44px}.actions button{min-height:44px}.cols{grid-template-columns:1fr}.panel{padding:16px}header{padding-left:12px;padding-right:12px}}

/* Storre, tydligare Voegele 1303-logotyp */
.brand-banner{display:block;width:clamp(245px,38vw,450px);height:auto;object-fit:contain}.brand{gap:0;letter-spacing:normal}header{min-height:100px}@media(max-width:600px){.brand-banner{width:clamp(210px,65vw,315px)}header{min-height:82px}}

/* Originalfoto av Vögele 1303, tydligt synlig i sidhuvudet */
.brand{display:flex;align-items:center;gap:16px;min-width:0}.brand-machine{display:block;width:clamp(150px,24vw,270px);height:auto;object-fit:contain;background:#fff;border-radius:12px}.brand-copy strong{font-size:clamp(22px,3vw,38px);font-weight:900;letter-spacing:1px;color:#f4fff5}.brand-copy small{font-size:clamp(9px,1.2vw,12px);color:#7fdc91;letter-spacing:1.5px}.brand-banner{display:none}header{min-height:140px}@media(max-width:600px){.brand{gap:9px}.brand-machine{width:clamp(118px,34vw,175px)}.brand-copy strong{font-size:clamp(16px,4.8vw,24px)}.brand-copy small{font-size:9px;letter-spacing:.5px}header{min-height:95px}}


/* PaveTrack 2.0 – approved clean header and mobile-friendly login */
header{max-width:1100px;min-height:132px;padding:18px 22px}
.brand{gap:14px;letter-spacing:normal;min-width:0}
.brand-machine{width:clamp(145px,22vw,245px);height:auto;max-height:132px;object-fit:contain;background:transparent;border:0;border-radius:0;filter:drop-shadow(0 9px 11px #0007)}
.brand-copy{min-width:0}
.brand-copy strong{font-size:clamp(27px,4.5vw,57px);font-weight:950;font-style:italic;letter-spacing:-1.8px;line-height:1.03;white-space:nowrap}
.brand-pave{color:#f1f6f3}.brand-track{color:#50e676}
.brand-copy small{font-size:clamp(9px,1.15vw,13px);letter-spacing:2px;color:#d3dfd8;white-space:nowrap;margin-top:9px}
.brand-copy small span{color:#50e676}
#auth{max-width:500px;margin:36px auto;background:linear-gradient(145deg,#18392c,#12271f);border:1px solid #386e4d;box-shadow:0 20px 65px #0004}
#auth .primary,#auth .tabs button.active{background:#79f398;color:#092317}
#auth input{border-color:#4b9c6c;background:#10271e}
#auth input:focus{border-color:#7af39a;box-shadow:0 0 0 2px #7af39a33}
@media(max-width:650px){
 header{min-height:94px;padding:12px 10px;gap:6px}
 .brand{gap:6px}
 .brand-machine{width:clamp(85px,27vw,155px);max-height:94px}
 .brand-copy strong{font-size:clamp(19px,5vw,31px);letter-spacing:-.8px}
 .brand-copy small{font-size:clamp(7px,1.7vw,10px);letter-spacing:.15px;white-space:normal;margin-top:4px}
 .header-actions button{padding:7px}
 #auth{margin:22px auto}
}
@media(max-width:370px){.brand-machine{width:76px}.brand-copy strong{font-size:18px}.brand-copy small{font-size:7px}}

/* Final approved brand artwork – no artificial white/rose edges */
header{max-width:1100px;min-height:0;padding:0 12px;gap:8px;background:#092d22;overflow:hidden}
.brand{flex:1;min-width:0;max-width:100%}.approved-brand{display:block;width:100%;max-width:980px;height:auto;object-fit:contain}
.header-actions{flex-shrink:0}
@media(max-width:650px){header{padding:0 4px;min-height:0}.approved-brand{width:100%;height:auto}.header-actions button{font-size:12px;padding:6px}}

/* Compact brand lockup – transparent Voegele and responsive typography */
header{background:transparent;max-width:1100px;min-height:0;padding:10px 18px;gap:12px;overflow:visible}
.brand{flex:1;display:flex;align-items:center;gap:12px;min-width:0;max-width:none;letter-spacing:normal}
.brand-machine{display:block;width:clamp(100px,15vw,164px);max-height:110px;object-fit:contain;flex-shrink:0;background:transparent;border:0;border-radius:0;filter:drop-shadow(0 5px 7px #0006)}
.brand-copy{min-width:0}.brand-copy strong{display:block;font-size:clamp(25px,3.8vw,46px);font-weight:950;font-style:italic;line-height:1;letter-spacing:-1.4px;white-space:nowrap}
.brand-pave{color:#f1f6f3}.brand-track{color:#50e676}.brand-copy small{display:block;margin-top:7px;font-size:clamp(8px,.9vw,11px);letter-spacing:1px;color:#d3dfd8;white-space:normal}.brand-copy small span{color:#50e676}
.approved-brand{display:none}.header-actions{flex-shrink:0}
main{margin-top:12px}#auth{margin:16px auto 26px}
@media(max-width:650px){header{padding:8px 10px;gap:5px}.brand{gap:6px}.brand-machine{width:clamp(74px,23vw,115px);max-height:85px}.brand-copy strong{font-size:clamp(19px,5.1vw,30px);letter-spacing:-.6px}.brand-copy small{font-size:clamp(6px,1.5vw,9px);letter-spacing:0;margin-top:4px}.header-actions button{font-size:11px;padding:7px 6px}main{margin-top:8px}#auth{margin:10px auto 20px}}
@media(max-width:380px){.brand-machine{width:68px}.brand-copy strong{font-size:18px}.brand-copy small{font-size:6px}}

/* Voegele 1803 – transparent machine beside live, responsive wordmark */
.brand-machine{width:clamp(110px,17vw,195px);max-height:135px;object-fit:contain;filter:drop-shadow(0 6px 9px #0008)}
@media(max-width:650px){.brand-machine{width:clamp(76px,24vw,118px);max-height:90px}.brand{gap:6px}}

/* Keep me signed in: only shown on the login tab */
#auth .remember-login{display:flex;align-items:center;gap:10px;margin:10px 0 15px;cursor:pointer;font-size:14px;color:#e3f2e8}
#auth .remember-login input{width:18px;height:18px;margin:0;accent-color:#79f398;flex-shrink:0}
#auth .remember-login.hidden{display:none}

.owner-mode-switch{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px;padding:6px;border:1px solid #35574a;border-radius:14px;background:#10251e}
.owner-mode-switch.hidden{display:none}
.owner-mode-switch button{flex:1 1 145px;border-radius:10px;padding:12px 14px;border:1px solid transparent;background:transparent;color:#d6e7dc;font-weight:700;cursor:pointer}
.owner-mode-switch button.active{background:#286747;border-color:#55ad7b;color:white}

/* Fakturering: text och kryssruta intill varandra, högerställda */
.job .invoice-toggle{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%;margin:12px 0 8px;text-align:right;cursor:pointer}
.job .invoice-toggle span{white-space:nowrap}
.job .invoice-toggle input[type="checkbox"]{width:20px;height:20px;flex:0 0 20px;margin:0;cursor:pointer}

#repairJoin{margin-top:18px;padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:12px}#repairJoin form{display:grid;gap:12px}#repairJoin input{width:100%}