:root{
  --bg:#0e1110;
  --panel:#151a17;
  --panel2:#1a201c;
  --text:#f3f6f4;
  --muted:#9ba8a1;
  --yellow:#2fa8a7;
  --green:#58c9c8;
  --blue:#2fa8a7;
  --border:#29332e;
  --teal:#2fa8a7;
  --teal2:#58c9c8;
}
*{box-sizing:border-box}body{margin:0;background:#000;color:var(--text);font-family:Arial,Helvetica,sans-serif}
.hidden{display:none!important}.app{min-height:100vh;background:linear-gradient(#101112,#090a0b);padding-bottom:82px}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top,#252525,#090909 62%)}
.login-card{width:min(440px,100%);background:#151719;border:1px solid var(--border);border-radius:20px;padding:24px}
.login-card h1{margin-bottom:6px}.brand.large span{font-size:42px}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px 16px;background:#111;border-bottom:1px solid var(--border)}
.brand{font-weight:800;font-size:14px}.brand span{font-size:30px;color:var(--yellow);font-style:italic;margin-right:6px}.sub{font-size:12px;color:var(--muted)}
main{max-width:760px;margin:auto;padding:16px}.view{display:none}.view.active{display:block}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}.stat{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}.stat strong{display:block;font-size:28px;color:var(--yellow)}.stat span{font-size:12px;color:#ddd}
.section-title{font-weight:800;margin:18px 0 10px;text-transform:uppercase;font-size:13px}.job-list{display:grid;gap:10px}.job{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px}.job-top{display:flex;justify-content:space-between;gap:12px}.job-reg{font-size:20px;font-weight:800}.muted{color:var(--muted);font-size:13px}.badge{display:inline-block;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:700}.badge.ready{background:#5b4511;color:#ffd65a}.badge.ongoing{background:#18356f;color:#77a5ff}.badge.billed{background:#24472b;color:#84d98d}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}button{font:inherit}.primary,.secondary,.ghost,.back{border:0;border-radius:10px;padding:12px 14px;font-weight:800;cursor:pointer}.primary{background:var(--yellow);color:#111}.primary.big,.secondary.big{width:100%;margin-top:14px;padding:16px}.secondary{background:#2a2c2f;color:#fff;border:1px solid var(--border)}.ghost{background:#1e2022;color:#fff;border:1px solid var(--border);font-size:12px}.back{background:transparent;color:white;font-size:22px;padding:6px}
.view-head{display:flex;align-items:center;gap:10px}.view-head h1{font-size:21px;margin:8px 0 18px}label{display:block;font-size:13px;color:#ddd;margin:12px 0}input,textarea{width:100%;margin-top:6px;background:#16181a;color:#fff;border:1px solid #3a3d41;border-radius:10px;padding:13px;font-size:16px}textarea{resize:vertical}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reg-row{display:grid;grid-template-columns:1fr auto;gap:8px}.reg-row input{margin-top:0;text-transform:uppercase}.material-row{display:grid;grid-template-columns:80px 1fr 44px;gap:8px;margin:8px 0}.material-row button{background:#2b2d30;color:#fff;border:1px solid var(--border);border-radius:9px}.search{margin:0 0 14px}.bottomnav{position:fixed;left:0;right:0;bottom:0;background:#111;border-top:1px solid var(--border);display:flex;justify-content:center;z-index:10}.bottomnav button{flex:1;max-width:250px;background:transparent;color:#bbb;border:0;padding:10px 4px;font-size:22px}.bottomnav button span{display:block;font-size:11px;margin-top:3px}.hint{color:var(--muted);font-size:12px;margin-top:6px;min-height:15px}
.vehicle-card{background:#151719;border:1px solid #3b3e42;border-radius:14px;padding:14px;margin-top:12px}.vehicle-title{font-size:18px;font-weight:800;margin-bottom:12px}.vehicle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.vehicle-grid div{background:#202225;border-radius:10px;padding:10px;min-width:0}.vehicle-grid span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}.vehicle-grid strong{font-size:13px;word-break:break-word}
dialog{background:#151719;color:#fff;border:1px solid var(--border);border-radius:16px;max-width:600px;width:92%}dialog::backdrop{background:#000a}.detail-lines{line-height:1.55}
@media(max-width:500px){.grid2,.vehicle-grid{grid-template-columns:1fr 1fr}.material-row{grid-template-columns:70px 1fr 40px}.reg-row{grid-template-columns:1fr}.reg-row .primary{width:100%}}


/* V5 – samma visuella språk som PL Bil & Maskintjänst-hemsidan */
body{background:#090b0a}
.app{
  background:
    radial-gradient(circle at 75% -10%,rgba(47,168,167,.10),transparent 35%),
    linear-gradient(180deg,#0e1110 0%,#0a0d0b 100%);
}
.topbar{
  background:rgba(14,17,16,.96);
  border-bottom:1px solid rgba(88,201,200,.18);
  backdrop-filter:blur(10px);
}
.brand span{color:var(--teal2)}
.sub{color:#aeb9b3}
.stat{
  background:linear-gradient(145deg,#151a17,#111512);
  border-color:#26312b;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.stat strong{color:var(--teal2)}
.primary{
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#07100e;
  box-shadow:0 8px 22px rgba(47,168,167,.15);
}
.primary:hover{filter:brightness(1.06)}
.secondary,.ghost{
  background:#18201c;
  border-color:#2a3932;
}
.job{
  background:linear-gradient(145deg,#151a17,#111512);
  border-color:#27332d;
}
.badge.ready{background:rgba(47,168,167,.14);color:#72ddda;border:1px solid rgba(47,168,167,.25)}
.badge.ongoing{background:rgba(87,137,214,.12);color:#8ab3f1}
.badge.billed{background:rgba(80,183,130,.12);color:#83d6a8;border:1px solid rgba(80,183,130,.20)}
input,textarea{
  background:#101411;
  border-color:#303b35;
}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(47,168,167,.11);
}
.vehicle-card{
  background:linear-gradient(145deg,#151a17,#111512);
  border-color:#2a3932;
}
.bottomnav{
  background:rgba(12,15,13,.97);
  border-top:1px solid rgba(88,201,200,.16);
  backdrop-filter:blur(10px);
}
.bottomnav button{
  color:#89968f;
  transition:.18s ease;
}
.bottomnav button.active{
  color:var(--teal2);
}
.bottomnav button.active::before{
  content:"";
  display:block;
  width:24px;
  height:2px;
  border-radius:2px;
  background:var(--teal2);
  margin:0 auto 5px;
}
.section-title,.eyebrow{
  color:var(--teal2);
  letter-spacing:.08em;
}
.eyebrow{
  font-size:11px;
  font-weight:800;
  margin-top:8px;
}
.view-intro{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  margin:-8px 0 15px;
}
.archive-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 14px;
}
.archive-summary .archive-box{
  background:#131815;
  border:1px solid #26312b;
  border-radius:12px;
  padding:12px;
}
.archive-summary strong{
  display:block;
  font-size:22px;
  color:var(--teal2);
}
.archive-summary span{
  color:var(--muted);
  font-size:11px;
}
.login-screen{
  background:
    radial-gradient(circle at top,rgba(47,168,167,.13),transparent 36%),
    #0a0d0b;
}
.login-card{
  background:#111512;
  border-color:#27332d;
}


/* V6 – appikon och startsplash */
.startup-splash{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 25%,rgba(47,168,167,.18),transparent 34%),
    linear-gradient(180deg,#0e1110,#090b0a);
  opacity:1;
  visibility:visible;
  transition:opacity .38s ease,visibility .38s ease;
}
.startup-splash.hide{
  opacity:0;
  visibility:hidden;
}
.startup-logo{text-align:center;transform:translateY(-2vh)}
.startup-pl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:116px;
  height:116px;
  border-radius:28px;
  margin-bottom:18px;
  background:linear-gradient(145deg,#151a17,#101411);
  border:2px solid #2fa8a7;
  color:#58c9c8;
  font-size:58px;
  line-height:1;
  font-weight:900;
  font-style:italic;
  letter-spacing:-5px;
  box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 40px rgba(47,168,167,.10);
}
.startup-title{
  color:#f3f6f4;
  font-size:15px;
  font-weight:900;
  letter-spacing:.14em;
}
.startup-sub{
  margin-top:8px;
  color:#58c9c8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
}


/* V7 – gemensam verkstadskalender */
.calendar-toolbar{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  gap:8px;
  align-items:center;
  margin:4px 0 12px;
}
.cal-nav{font-size:28px;padding:8px}
.calendar-title-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:0;
}
.calendar-title-btn strong{font-size:16px}
.calendar-title-btn span{font-size:10px;color:var(--muted);font-weight:400}
.calendar-weekdays,.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}
.calendar-weekdays{
  margin-bottom:6px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.calendar-day{
  position:relative;
  min-height:64px;
  padding:7px 4px;
  border:1px solid #26312b;
  border-radius:10px;
  background:#111512;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.calendar-day.other-month{opacity:.38}
.calendar-day.today{border-color:var(--teal2)}
.calendar-day.selected{
  background:rgba(47,168,167,.13);
  border-color:var(--teal);
  box-shadow:inset 0 0 0 1px rgba(88,201,200,.16);
}
.calendar-day-number{font-size:12px;font-weight:800}
.calendar-dots{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  margin-top:7px;
}
.calendar-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--teal2);
}
.calendar-count{
  display:block;
  margin-top:5px;
  font-size:9px;
  color:var(--muted);
}
.selected-day-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin:22px 0 10px;
}
.selected-day-head h2{margin:2px 0 0;font-size:19px}
.booking-list{display:grid;gap:9px}
.booking-card{
  background:linear-gradient(145deg,#151a17,#111512);
  border:1px solid #27332d;
  border-radius:14px;
  padding:13px;
}
.booking-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.booking-time{
  color:var(--teal2);
  font-weight:900;
  font-size:17px;
}
.booking-reg{font-size:18px;font-weight:900}
.booking-status{
  font-size:10px;
  border-radius:999px;
  padding:5px 8px;
  background:rgba(47,168,167,.12);
  color:#72ddda;
  border:1px solid rgba(47,168,167,.22);
}
.booking-status.done{background:rgba(80,183,130,.12);color:#83d6a8}
.booking-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px;
}
.booking-actions button{padding:9px 10px;font-size:11px}
.booking-dialog{max-width:520px}
.dialog-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.dialog-head h2{margin:2px 0 8px}
.dialog-x{
  background:transparent;
  border:0;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
@media(max-width:500px){
  .bottomnav button{font-size:19px;padding-left:2px;padding-right:2px}
  .bottomnav button span{font-size:9px}
  .calendar-grid{gap:3px}
  .calendar-day{min-height:56px;padding:6px 3px}
  .selected-day-head{align-items:center}
  .selected-day-head .primary{padding:10px 11px;font-size:11px}
}

.article-pick,.article-toolbar{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.article-pick input,.article-toolbar input{margin:0}
.article-quick-results{display:grid;gap:6px;margin:8px 0 10px}
.article-result,.article-card{background:#121713;border:1px solid #27332d;border-radius:12px;padding:11px}
.article-result{display:flex;justify-content:space-between;gap:10px;align-items:center}
.article-result strong,.article-card strong{color:var(--teal2)}
.article-list{display:grid;gap:8px}
.article-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.article-meta{color:var(--muted);font-size:12px;margin-top:4px}
.article-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.job-actions-danger{background:#2a1717!important;border-color:#5a2828!important;color:#ffb3b3!important}
@media(max-width:560px){.bottomnav button{font-size:17px}.bottomnav button span{font-size:8px}.article-pick,.article-toolbar{grid-template-columns:1fr}}

.check-label select{width:100%;margin-top:6px;background:#101411;color:#fff;border:1px solid #303b35;border-radius:10px;padding:13px;font-size:16px}
.article-stock{font-size:11px;color:var(--muted);margin-top:3px}


/* V10 – komplett arbetsorderredigering och statusflytt */
.wide-dialog{max-width:720px}
#editStatus{
  width:100%;
  margin-top:6px;
  background:#101411;
  color:#fff;
  border:1px solid #303b35;
  border-radius:10px;
  padding:13px;
  font-size:16px;
}
.locked-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,180,80,.08);
  border:1px solid rgba(255,180,80,.20);
  color:#e7c99c;
  font-size:12px;
  line-height:1.5;
}
.edit-material-row{
  display:grid;
  grid-template-columns:80px 1fr 44px;
  gap:8px;
  margin:8px 0;
}
.edit-material-row input{margin:0}
.edit-material-row button{
  background:#2b2d30;color:#fff;border:1px solid var(--border);
  border-radius:9px;
}
.readonly-locked input,
.readonly-locked textarea{
  opacity:.58;
  cursor:not-allowed;
}
@media(max-width:500px){
  .edit-material-row{grid-template-columns:70px 1fr 40px}
}


/* V11 – låsta fordonsuppgifter + automatisk prisräkning */
input[readonly]{
  background:#0c100d;
  color:#aeb9b3;
  cursor:not-allowed;
}
.price-summary{
  margin-top:14px;
  border:1px solid #2a3932;
  border-radius:12px;
  overflow:hidden;
  background:#101411;
}
.price-summary>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border-bottom:1px solid #222c27;
}
.price-summary>div:last-child{border-bottom:0}
.price-summary span{color:var(--muted);font-size:12px}
.price-summary strong{color:#eef7f3}
.price-summary .price-total{background:rgba(47,168,167,.10)}
.price-summary .price-total strong{color:var(--teal2);font-size:17px}
.material-row,.edit-material-row{
  grid-template-columns:72px minmax(0,1fr) 105px 44px !important;
}
.material-line-total{
  grid-column:2 / 4;
  text-align:right;
  color:var(--muted);
  font-size:11px;
  margin-top:-3px;
}
.material-price{text-align:right}
@media(max-width:500px){
  .material-row,.edit-material-row{
    grid-template-columns:62px minmax(0,1fr) 88px 40px !important;
  }
}


/* V12.3 – tydlig uppdateringsknapp för iPhone/PWA */
.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.refresh-btn{
  border:1px solid rgba(88,201,200,.35);
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#07100e;
  border-radius:10px;
  padding:11px 14px;
  font-weight:900;
  letter-spacing:.03em;
  cursor:pointer;
  min-height:44px;
}
.refresh-btn.loading{
  opacity:.72;
  pointer-events:none;
}
.sync-time{
  margin-top:3px;
  font-size:10px;
  color:#7f8c85;
}
@media(max-width:520px){
  .topbar{align-items:flex-start}
  .top-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .refresh-btn,.top-actions .ghost{
    padding:9px 10px;
    min-height:38px;
    font-size:11px;
  }
}

.print-underlag-btn{
  border-color:rgba(88,201,200,.4)!important;
  color:var(--teal2)!important;
}


/* V13 – kundregister */
.customer-pick,.customer-toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.customer-pick input,.customer-toolbar input{margin:0}
.customer-quick-results{display:grid;gap:6px;margin:8px 0 12px}
.customer-quick-result,.customer-card{
  background:#121713;
  border:1px solid #27332d;
  border-radius:12px;
  padding:11px;
}
.customer-quick-result{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.customer-list{display:grid;gap:8px}
.customer-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.customer-card strong{color:var(--teal2)}
.customer-meta{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.customer-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
#customerDialog select{
  width:100%;
  margin-top:6px;
  background:#101411;
  color:#fff;
  border:1px solid #303b35;
  border-radius:10px;
  padding:13px;
  font-size:16px;
}
@media(max-width:620px){
  .customer-pick,.customer-toolbar{grid-template-columns:1fr}
  .bottomnav button{font-size:15px}
  .bottomnav button span{font-size:7.5px}
}


/* V13.2 – bottenikoner i samma färg som knapparna */
.bottomnav button{
  color:var(--teal2) !important;
}
.bottomnav button span{
  color:var(--teal2) !important;
}
.bottomnav button.active{
  color:var(--teal) !important;
}
.bottomnav button.active span{
  color:var(--teal) !important;
}


/* V13.3 – vita bottenikoner och texter */
.bottomnav button,
.bottomnav button span,
.bottomnav button.active,
.bottomnav button.active span{
  color:#fff !important;
}


/* V13.5 – bilregister kopplat till kund */
.customer-vehicles-wrap{
  margin:10px 0 14px;
}
.customer-vehicles{
  display:grid;
  gap:7px;
}
.customer-vehicle-btn{
  width:100%;
  text-align:left;
  background:#121713;
  border:1px solid #27332d;
  border-radius:11px;
  padding:10px 12px;
  color:#fff;
}
.customer-vehicle-btn strong{
  color:var(--teal2);
  font-size:15px;
}
.customer-vehicle-btn .muted{
  font-size:11px;
  margin-top:3px;
}
.vehicle-list{display:grid;gap:8px}
.vehicle-reg-card{
  background:#121713;
  border:1px solid #27332d;
  border-radius:12px;
  padding:12px;
}
.vehicle-reg-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.vehicle-reg-top strong{
  color:var(--teal2);
  font-size:17px;
}
.vehicle-reg-meta{
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
  line-height:1.45;
}


/* V13.6 – intern marginal + Spiris-liknande fakturaunderlag */
.internal-summary{
  margin-top:12px;
  padding:12px;
  background:#0d120f;
  border:1px dashed #2e4137;
  border-radius:12px;
}
.internal-summary>div:not(.section-title){
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:5px 0;
}
.internal-summary span{
  color:var(--muted);
  font-size:12px;
}
.internal-summary strong{
  color:#fff;
}
.internal-summary #newTbSum,
.internal-summary #editTbSum{
  color:var(--teal2);
}

/* V13.9 – fordonshistorik */
.vehicle-history-modal{max-width:760px}
.vh-info{background:#0d120f;border:1px solid #27332d;border-radius:12px;padding:12px;margin:10px 0 12px;line-height:1.55}
.vh-info strong{color:var(--teal2)}
.vh-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px}
.vh-stat{background:#121713;border:1px solid #27332d;border-radius:11px;padding:10px}
.vh-stat strong{display:block;font-size:18px;color:var(--teal2)}
.vh-stat span{font-size:11px;color:var(--muted)}
.vh-jobs{display:grid;gap:9px}
.vh-job{background:#121713;border:1px solid #27332d;border-radius:12px;padding:12px}
.vh-job-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.vh-job-date{font-weight:800;color:#fff}.vh-status{font-size:11px;padding:4px 7px;border-radius:7px;border:1px solid #2c463b;color:var(--teal2)}
.vh-job-work{margin:8px 0;white-space:pre-wrap}.vh-materials{font-size:12px;color:#d8dfdb;margin-top:7px}.vh-materials div{padding:2px 0}
.vh-comment{font-size:12px;color:var(--muted);margin-top:7px}.vh-job-total{font-weight:800;margin-top:8px}
@media(max-width:600px){.vh-summary{grid-template-columns:1fr 1fr}.vehicle-history-modal{width:calc(100vw - 20px)}}

/* V14.0 – 6 huvudval + Mer */
.bottomnav button{min-width:0;padding-left:2px;padding-right:2px}
.bottomnav button span{white-space:nowrap}
.more-menu{
 position:fixed;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));
 z-index:90;width:min(250px,calc(100vw - 20px));padding:8px;
 background:#111713;border:1px solid #2b3932;border-radius:15px;
 box-shadow:0 14px 40px rgba(0,0,0,.55)
}
.more-menu.hidden{display:none}
.more-menu button{
 width:100%;display:flex;align-items:center;gap:12px;padding:14px 12px;
 border:0;border-bottom:1px solid #27332d;background:transparent;color:#fff;text-align:left
}
.more-menu button:last-child{border-bottom:0}
.more-menu button strong{width:30px;text-align:center;font-size:20px;color:#fff}
.more-menu button span{font-size:15px;font-weight:800}
@media(max-width:560px){
 .bottomnav button{font-size:19px}
 .bottomnav button span{font-size:9px}
}


/* V14.1 – Spiris */
.spiris-card{
  background:#121713;
  border:1px solid #27332d;
  border-radius:15px;
  padding:15px;
  margin:0 0 12px;
}
.spiris-status-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.spiris-status-text{
  font-size:14px;
  font-weight:800;
}
.spiris-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.spiris-badge.pending{
  background:#252a27;
  color:#bdc6c1;
}
.spiris-badge.connected{
  background:rgba(55,196,119,.12);
  border:1px solid rgba(55,196,119,.28);
  color:#76dfa2;
}
.spiris-badge.disconnected{
  background:rgba(255,175,70,.10);
  border:1px solid rgba(255,175,70,.25);
  color:#ffc477;
}
.spiris-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.spiris-action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  min-height:45px;
}
.spiris-test-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.spiris-result{
  margin-top:12px;
  background:#0c100d;
  border:1px solid #243029;
  border-radius:11px;
  padding:12px;
  min-height:55px;
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.spiris-result strong{color:var(--teal2)}
.spiris-preview{
  margin-top:9px;
  display:grid;
  gap:5px;
}
.spiris-preview div{
  padding:6px 8px;
  border-radius:8px;
  background:#151c18;
}
.spiris-plan{
  display:grid;
  gap:8px;
}
.spiris-plan>div{
  display:flex;
  gap:9px;
  align-items:flex-start;
}
.spiris-plan strong{color:var(--teal2)}
@media(max-width:520px){
  .spiris-test-grid{grid-template-columns:1fr}
  .spiris-actions>*{width:100%}
}
.overview-periods{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px}.overview-periods button{white-space:nowrap;padding:9px;background:#121713;border:1px solid #29372f;color:#fff;border-radius:9px}.overview-periods button.active{color:var(--teal2);border-color:var(--teal2)}.overview-custom{display:grid;grid-template-columns:1fr 1fr;gap:8px}.overview-kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}.overview-kpi,.overview-card{background:#121713;border:1px solid #27332d;border-radius:13px;padding:12px}.overview-kpi span{display:block;font-size:11px;color:var(--muted)}.overview-kpi strong{font-size:19px}.overview-kpi.hero strong{color:var(--teal2)}.overview-card{margin-bottom:12px}.overview-chart{height:180px;display:flex;align-items:flex-end;gap:7px}.ovg{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.ovbars{height:145px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}.ovbar{width:34%;background:#fff;border-radius:4px 4px 0 0;min-height:2px}.ovbar.tb{background:var(--teal2)}.ovmonth{font-size:9px;color:var(--muted);margin-top:4px}.overview-legend{font-size:10px;color:var(--muted);display:flex;gap:12px;margin-top:8px}@media(min-width:700px){.overview-kpis{grid-template-columns:repeat(3,1fr)}}

/* V14.3 – förbättrad verkstadsdashboard */
.dashboard-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:13px;
}
.dashboard-head h1{margin:2px 0 1px}
.dashboard-refresh{
  width:43px;height:43px;border-radius:12px;
  border:1px solid #2e4037;background:#121713;color:#fff;
  font-size:22px;font-weight:800;
}
.dashboard-kpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:12px;
}
.dash-kpi{
  min-width:0;
  text-align:left;
  background:#121713;
  border:1px solid #27332d;
  border-radius:14px;
  padding:12px;
  color:#fff;
}
.dash-kpi span{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:5px;
}
.dash-kpi strong{
  display:block;
  font-size:22px;
  line-height:1.1;
  overflow-wrap:anywhere;
}
.dash-kpi small{
  display:block;
  color:#8f9b95;
  margin-top:5px;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dash-kpi.accent{
  border-color:#28534a;
  background:linear-gradient(145deg,#10201c,#121713);
}
.dash-kpi.accent strong{color:var(--teal2)}
.dashboard-actions{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:7px;
  margin:0 0 16px;
}
.dashboard-actions button{
  margin:0;
  min-height:43px;
  padding:9px 7px;
  font-size:10px;
}
.dashboard-section{
  margin:0 0 16px;
}
.dashboard-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:7px;
}
.dashboard-section-head .section-title{margin:0}
.dashboard-link{
  border:0;
  background:transparent;
  color:var(--teal2);
  font-size:10px;
  padding:4px 0;
}
.dash-bookings,.dash-work-list{
  display:grid;
  gap:7px;
}
.dash-booking{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  background:#121713;
  border:1px solid #27332d;
  border-radius:12px;
  padding:10px;
}
.dash-booking-time{
  font-size:17px;
  font-weight:900;
  color:var(--teal2);
}
.dash-booking-main{min-width:0}
.dash-booking-reg{
  font-size:14px;
  font-weight:900;
}
.dash-booking-desc{
  font-size:10px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-status-dot{
  width:9px;height:9px;border-radius:50%;background:var(--teal2);
}
.dash-job{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:#121713;
  border:1px solid #27332d;
  border-radius:12px;
  padding:10px;
}
.dash-job-main{min-width:0}
.dash-job-reg{
  font-weight:900;
  color:#fff;
}
.dash-job-desc{
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:55vw;
}
.dash-job-right{
  text-align:right;
  flex:0 0 auto;
}
.dash-job-value{
  color:var(--teal2);
  font-weight:800;
  font-size:12px;
}
.dash-empty{
  background:#0f1411;
  border:1px dashed #26332d;
  border-radius:12px;
  padding:13px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}
@media(min-width:700px){
  .dashboard-kpis{grid-template-columns:repeat(4,1fr)}
  .dash-job-desc{max-width:420px}
}
@media(max-width:380px){
  .dashboard-actions{grid-template-columns:1fr 1fr}
  .dashboard-actions button:last-child{grid-column:1 / -1}
}

/* V14.4 – flytta arbetsorder till kalender */
.schedule-job-summary{
  background:#101511;
  border:1px solid #28372f;
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
  line-height:1.5;
}
.schedule-job-summary strong{color:var(--teal2)}
#scheduleJobDialog select{
  width:100%;
  margin-top:6px;
  background:#101411;
  color:#fff;
  border:1px solid #303b35;
  border-radius:10px;
  padding:13px;
  font-size:16px;
}


/* V14.5 – Offerter */
.offer-toolbar,.offer-customer-pick{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.offer-filter-row{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:2px 0 10px;
}
.offer-filter-row button{
  white-space:nowrap;
  padding:8px 10px;
  border-radius:9px;
  background:#121713;
  border:1px solid #29372f;
  color:#fff;
  font-size:11px;
}
.offer-filter-row button.active{
  color:var(--teal2);
  border-color:var(--teal2);
}
.offer-list{display:grid;gap:9px}
.offer-card{
  background:#121713;
  border:1px solid #27332d;
  border-radius:13px;
  padding:12px;
}
.offer-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.offer-number{color:var(--teal2);font-weight:900}
.offer-title{font-weight:800;margin-top:3px}
.offer-meta{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.45}
.offer-status{
  font-size:10px;
  font-weight:900;
  padding:5px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.offer-status.draft{background:#222925;color:#b8c3bd}
.offer-status.sent{background:#16271f;color:#7fdfac}
.offer-status.accepted{background:#102b25;color:var(--teal2)}
.offer-status.rejected{background:#2a1717;color:#ffb1b1}
.offer-total{
  margin-top:9px;
  font-weight:900;
  color:#fff;
}
.offer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.offer-actions button{margin:0}
.offer-material-row{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 110px 44px;
  gap:7px;
  margin:7px 0;
}
.offer-material-row input{margin:0}
.offer-line-total{
  grid-column:2 / 4;
  text-align:right;
  font-size:10px;
  color:var(--muted);
}
#offerStatus{
  width:100%;
  margin-top:6px;
  background:#101411;
  color:#fff;
  border:1px solid #303b35;
  border-radius:10px;
  padding:13px;
  font-size:16px;
}
@media(max-width:560px){
  .offer-toolbar,.offer-customer-pick{grid-template-columns:1fr}
  .offer-material-row{grid-template-columns:62px minmax(0,1fr) 88px 40px}
}


/* V14.6 – verkstadsstatus, delstatus, jobblogg, offertutskrift */
#editWorkshopStatus{
  width:100%;
  margin-top:6px;
  background:#101411;
  color:#fff;
  border:1px solid #303b35;
  border-radius:10px;
  padding:13px;
  font-size:16px;
}
.workshop-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  margin-top:5px;
}
.workshop-badge.active{background:#1d2521;color:#c7d0cb}
.workshop-badge.waiting_parts{background:#2c2311;color:#ffd27c;border:1px solid #5b4720}
.workshop-badge.waiting_customer{background:#211c2f;color:#d7c4ff;border:1px solid #493d69}
.workshop-badge.test_drive{background:#10272a;color:#80e3e1;border:1px solid #23565a}
.workshop-badge.ready{background:#10281d;color:#91eab4;border:1px solid #255b3c}

.material-part-status{
  grid-column:2 / 4;
  width:100%;
  background:#0f1411;
  color:#fff;
  border:1px solid #2a3831;
  border-radius:8px;
  padding:7px 9px;
  font-size:11px;
  margin-top:-2px;
}
.part-status-pill{
  display:inline-block;
  margin-left:5px;
  padding:2px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}
.part-status-pill.needed{background:#2a1717;color:#ffb1b1}
.part-status-pill.ordered{background:#2c2311;color:#ffd27c}
.part-status-pill.arrived{background:#10281d;color:#91eab4}
.part-status-pill.none{display:none}

.job-log{
  display:grid;
  gap:7px;
  margin:7px 0 10px;
}
.job-log-entry{
  background:#0f1411;
  border:1px solid #27332d;
  border-radius:9px;
  padding:9px;
}
.job-log-time{
  font-size:9px;
  color:var(--muted);
  margin-bottom:3px;
}
.job-log-text{
  font-size:12px;
  white-space:pre-wrap;
}
.job-log-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
}
.offer-print-btn{
  border-color:rgba(88,201,200,.35)!important;
  color:var(--teal2)!important;
}

.invoice-sync-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:8px}
.invoice-sync-row .search{margin:0}
@media(max-width:640px){.invoice-sync-row{grid-template-columns:1fr}.invoice-sync-row button{width:100%}}

.auto-consumable-row{opacity:.94}
.auto-consumable-row input[readonly]{font-weight:700}
.auto-consumable-row button:disabled{cursor:default;opacity:.7}

.material-row,.edit-material-row{position:relative}
.article-typeahead{
  grid-column:2 / 4;
  position:relative;
  z-index:40;
  margin-top:-5px;
  background:#101613;
  border:1px solid rgba(88,201,200,.45);
  border-radius:10px;
  overflow:hidden;
  max-height:260px;
  overflow-y:auto;
}
.article-typeahead[hidden]{display:none}
.article-typeahead-option{
  width:100%;min-height:46px;display:grid;
  grid-template-columns:minmax(70px,auto) minmax(0,1fr) auto;
  align-items:center;gap:9px;padding:9px 11px;border:0;
  border-bottom:1px solid #25302b;border-radius:0;
  background:#101613;color:#eef7f3;text-align:left;
}
.article-typeahead-option:last-child{border-bottom:0}
.article-typeahead-option strong{color:var(--teal2)}
.article-typeahead-option span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article-typeahead-option small{color:var(--muted);white-space:nowrap}
.article-typeahead-option:hover,.article-typeahead-option:focus{background:#18221e;outline:1px solid var(--teal2);outline-offset:-1px}


/* v14.28 – mobilfix för artikelsök */
.material-row,.edit-material-row{position:relative}

.article-typeahead{
  position:absolute !important;
  left:80px !important;
  right:76px !important;
  top:58px !important;
  width:auto !important;
  z-index:1000 !important;
  margin:0 !important;
  max-height:250px !important;
  overflow-y:auto !important;
  background:#101613 !important;
  border:1px solid rgba(88,201,200,.55) !important;
  border-radius:10px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}

.article-typeahead-option{
  width:100% !important;
  min-height:48px !important;
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
  padding:9px 10px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid #25302b !important;
  border-radius:0 !important;
  background:#101613 !important;
  color:#eef7f3 !important;
  text-align:left !important;
  white-space:normal !important;
  font-size:14px !important;
  line-height:1.2 !important;
}

.article-typeahead-option strong{
  font-size:14px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.article-typeahead-option span{
  font-size:14px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.article-typeahead-option small{
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

@media(max-width:600px){
  .article-typeahead{
    left:110px !important;
    right:76px !important;
    top:62px !important;
    max-height:220px !important;
  }
  .article-typeahead-option{
    grid-template-columns:58px minmax(0,1fr) !important;
    min-height:46px !important;
    padding:8px 9px !important;
  }
  .article-typeahead-option small{
    grid-column:2 !important;
    margin-top:-3px !important;
  }
}

@media(max-width:390px){
  .article-typeahead{
    left:96px !important;
    right:62px !important;
  }
}


/* v14.29 – visa artikelnummer + benämning tydligt på mobil */
@media(max-width:600px){
  .article-typeahead{
    left:0 !important;
    right:0 !important;
    top:62px !important;
    width:100% !important;
    max-height:260px !important;
  }

  .article-typeahead-option{
    display:grid !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:10px !important;
    row-gap:2px !important;
    padding:10px 12px !important;
    min-height:58px !important;
  }

  .article-typeahead-option strong{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    font-size:16px !important;
  }

  .article-typeahead-option span{
    grid-column:2 !important;
    grid-row:1 !important;
    display:block !important;
    font-size:15px !important;
    font-weight:600 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .article-typeahead-option small{
    grid-column:2 !important;
    grid-row:2 !important;
    display:block !important;
    font-size:12px !important;
  }
}


/* v14.30 – bredare och tydligare artikelträffar på mobil */
@media(max-width:600px){
  .article-typeahead{
    left:-136px !important;
    right:-94px !important;
    width:auto !important;
    max-width:none !important;
    top:62px !important;
  }

  .article-typeahead-option{
    grid-template-columns:130px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:16px !important;
    row-gap:3px !important;
    min-height:64px !important;
    padding:10px 14px !important;
  }

  .article-typeahead-option strong{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    font-size:16px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .article-typeahead-option span{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    min-width:0 !important;
  }

  .article-typeahead-option small{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }
}

@media(max-width:390px){
  .article-typeahead{
    left:-120px !important;
    right:-82px !important;
  }
  .article-typeahead-option{
    grid-template-columns:116px minmax(0,1fr) !important;
    column-gap:12px !important;
  }
}


/* v14.31 – lagom bred artikelsök, hålls inom mobilskärmen */
@media(max-width:600px){
  .article-typeahead{
    left:-136px !important;
    right:auto !important;
    width:min(520px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    top:62px !important;
    transform:none !important;
  }

  .article-typeahead-option{
    grid-template-columns:112px minmax(0,1fr) !important;
    column-gap:12px !important;
    padding:10px 12px !important;
    min-height:60px !important;
  }

  .article-typeahead-option strong{
    font-size:15px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .article-typeahead-option span{
    font-size:14px !important;
    line-height:1.2 !important;
  }
}

@media(max-width:390px){
  .article-typeahead{
    left:-128px !important;
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
  }
  .article-typeahead-option{
    grid-template-columns:104px minmax(0,1fr) !important;
    column-gap:10px !important;
  }
}


/* v14.32 – slutlig mobilfix för artikelsök */
@media(max-width:600px){
  .material-row,
  .edit-material-row{
    position:relative !important;
    overflow:visible !important;
  }

  .article-typeahead{
    position:absolute !important;
    left:20% !important;
    right:auto !important;
    top:64px !important;
    width:60% !important;
    max-width:60% !important;
    min-width:0 !important;
    transform:none !important;
    margin:0 !important;
    z-index:2000 !important;
    max-height:230px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:10px !important;
  }

  .article-typeahead-option{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:10px !important;
    row-gap:2px !important;
    min-height:58px !important;
    padding:9px 10px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  .article-typeahead-option strong{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    font-size:15px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .article-typeahead-option span{
    grid-column:2 !important;
    grid-row:1 !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    min-width:0 !important;
  }

  .article-typeahead-option small{
    grid-column:2 !important;
    grid-row:2 !important;
    font-size:12px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }
}

@media(max-width:390px){
  .article-typeahead{
    left:18% !important;
    width:64% !important;
    max-width:64% !important;
  }
  .article-typeahead-option{
    grid-template-columns:82px minmax(0,1fr) !important;
  }
}


/* v14.33 – artikelsök: samma bredd som Antal + Artikel + Pris */
@media(max-width:600px){
  .material-row,
  .edit-material-row{
    position:relative !important;
    overflow:visible !important;
  }

  .article-typeahead{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:64px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    transform:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    z-index:2500 !important;
    max-height:240px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:10px !important;
  }

  .article-typeahead-option{
    width:100% !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:120px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:2px !important;
    align-items:center !important;
    min-height:58px !important;
    padding:10px 14px !important;
  }

  .article-typeahead-option strong{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    min-width:0 !important;
    font-size:16px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .article-typeahead-option span{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .article-typeahead-option small{
    grid-column:2 !important;
    grid-row:2 !important;
    min-width:0 !important;
    font-size:12px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
}

@media(max-width:390px){
  .article-typeahead-option{
    grid-template-columns:105px minmax(0,1fr) !important;
    column-gap:12px !important;
    padding:9px 12px !important;
  }
  .article-typeahead-option strong{font-size:15px !important}
  .article-typeahead-option span{font-size:14px !important}
}