/* v0299 — offertsidan. (Hette quote-v0279.css t.o.m. v0287; namnet byttes
   för att webbläsaren annars serverar den gamla filen ur cachen.) Samma verktygsrad som kalendern, en hylla med det som
   sällan ändras, och sedan bara raderna.

   Modalerna använder portalens egen .portal-modal (samma som bemanningen och
   projektplanen), inte något eget. Här ligger bara innehållet i dem. */

/* ---- verktygsraden -------------------------------------------------- */
/* Raden ärver allt från calendar-toolbar-v0276.css. Här bara det som är
   offertens eget: summan i mitten och statusväljaren till höger. */
.app-shell .quote-toolbar .quote-toolbar-sum{
  display:flex;
  align-items:baseline;
  gap:7px;
  white-space:nowrap;
}
.app-shell .quote-toolbar .quote-toolbar-sum span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#68756d;
}
.app-shell .quote-toolbar .quote-toolbar-sum strong{
  font-size:19px;
  font-variant-numeric:tabular-nums;
}
/* controls-v0115.css tvingar .calendar-head-actions till ett tvåkolumnsrutnät
   (display:grid!important). Det var därför knapparna staplades i tre rader mitt
   på offertsidan medan högra halvan stod tom. Här blir de en rad igen. */
.app-shell .resource-calendar-toolbar .calendar-head-actions{
  display:flex!important;
  flex:0 0 auto;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  width:auto!important;
  grid-template-columns:none!important;
  margin-left:auto;
}
.app-shell .resource-calendar-toolbar .calendar-head-actions .button{width:auto!important;min-width:0}
.app-shell .quote-toolbar .calendar-head-actions form{margin:0}
.app-shell .quote-toolbar select{
  min-height:32px;
  padding:4px 8px;
  border:1px solid #cfd8d2;
  border-radius:8px;
  font:inherit;
  font-size:13px;
  background:#fff;
}

/* ---- hyllan ---------------------------------------------------------- */
.quote-shelf{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 18px;
  margin:0 0 8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbfcfb;
}
.quote-shelf-facts{
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px;
  margin:0;
  min-width:0;
}
.quote-shelf-facts > div{min-width:0}
.quote-shelf-facts dt{
  margin:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8a968f;
}
.quote-shelf-facts dd{
  margin:1px 0 0;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:26ch;
}
.quote-shelf-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.quote-shelf-actions .button{min-height:32px;padding:0 12px;font-size:12.5px}

/* ---- raderna --------------------------------------------------------- */
.quote-lines-panel{padding:10px 12px;margin-bottom:8px}
.quote-lines-panel > h2{display:none}
/* En rad är en rad: beskrivning och typ bredvid varandra, inte staplade. */
.quote-lines{gap:4px}
.quote-line{padding:5px 8px}
.quote-line-main{grid-template-columns:minmax(0,1fr) 132px;gap:6px;align-items:center}
.quote-line .quote-line-kind{min-height:32px;font-size:12px}
.quote-line input{min-height:32px}
.quote-line .button-small{min-height:32px}
.quote-line-new{margin-top:10px;padding-top:10px;gap:8px}
.quote-line-new input,.quote-line-new select{min-height:34px;padding:6px 9px}
.quote-totals{margin-top:10px;padding-top:8px;gap:3px}
.quote-totals div{font-size:12.5px}
.quote-totals .is-total{font-size:15px}
@media(max-width:1100px){
  .quote-line{grid-template-columns:minmax(0,1fr) 62px 62px 84px;row-gap:4px}
  .quote-line .quote-amount{grid-column:1 / 3;text-align:left;align-self:center}
  .quote-line .button-small{grid-column:3;width:auto!important}
  .quote-line .link-button{grid-column:4}
  .quote-line-main{grid-template-columns:minmax(0,1fr) 120px}
}

/* ---- signeringsremsan ------------------------------------------------ */
.quote-sign-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin:0 0 12px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbfcfb;
}
.quote-sign-strip .quote-sign-state{margin:0;padding:4px 10px;font-size:12px}
.quote-sign-strip .quote-sign-note{margin:0;min-width:0;flex:1 1 240px;font-size:12px;color:var(--muted)}
.quote-sign-strip .quote-approval-link{font-size:11px;word-break:break-all}
.quote-sign-strip-actions{display:flex;gap:6px;margin-left:auto}
.quote-sign-strip-actions .button{min-height:32px;padding:0 12px;font-size:12.5px}

/* ---- innehåll i modalerna ------------------------------------------- */
/* Skalet — kort, huvud, kropp, stängkryss, klistrad fot — kommer från
   portal-modal. Nedan bara det som är offertens eget. */
.portal-modal .quote-meta-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:700px){.portal-modal .quote-meta-cols{grid-template-columns:1fr}}
.portal-modal .quote-meta-form{display:grid;gap:8px;margin:0}
.portal-modal .quote-meta-form label{display:grid;gap:3px;min-width:0;font-size:12px;font-weight:600}
.portal-modal .quote-meta-form input,
.portal-modal .quote-meta-form select,
.portal-modal .quote-meta-form textarea{
  width:100%;min-width:0;min-height:34px;padding:6px 9px;
  border:1px solid #cfd8d2;border-radius:8px;font:inherit;background:#fff;
}
.portal-modal .quote-meta-form textarea{min-height:64px;padding:7px 9px;font-size:13px}
.portal-modal .quote-meta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Kund, enhet och kontaktperson på en rad — annars äter vänsterspalten upp
   höjden och texterna hamnar utanför bild. */
.portal-modal .party-picker{display:grid;grid-template-columns:1.15fr .8fr 1.05fr;gap:8px;margin:0}
.portal-modal .party-picker label{display:grid;gap:3px;min-width:0;font-size:12px;font-weight:600}
.portal-modal .party-picker select{width:100%;min-width:0;min-height:34px;padding:6px 9px;border:1px solid #cfd8d2;border-radius:8px;font:inherit;background:#fff}
@media(max-width:900px){
  .portal-modal .party-picker{grid-template-columns:1fr 1fr}
  .portal-modal .party-picker label:last-child{grid-column:1 / -1}
}

.quote-plan-box .quote-plan-lead{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--muted);max-width:none}
.quote-plan-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:8px 12px}
.quote-plan-grid label{display:grid;gap:3px;font-size:12px;font-weight:600}
.quote-plan-grid label>span{font-size:11.5px;line-height:1.25}
.quote-plan-grid input{min-height:34px;padding:6px 9px;border:1px solid #cfd8d2;border-radius:8px;font:inherit;background:#fff;text-align:right;font-variant-numeric:tabular-nums}
.quote-plan-box .quote-plan-result{
  display:flex!important;align-items:baseline;gap:8px;text-align:left;
  margin-top:10px;padding:8px 12px;border-radius:9px;background:#eef3ee;
}
.quote-plan-box .quote-plan-result b{font-size:20px}
.quote-plan-box .quote-plan-result small{color:var(--muted)}
@media(max-width:560px){.quote-plan-grid{grid-template-columns:1fr}}

[data-modal=quote-send] form{display:grid;gap:8px;margin:0;justify-items:start}
[data-modal=quote-send] label{display:grid;gap:4px;font-size:12px;font-weight:600;width:100%;max-width:280px}
[data-modal=quote-send] select{min-height:34px;padding:6px 9px;border:1px solid #cfd8d2;border-radius:8px;font:inherit;background:#fff}
[data-modal=quote-send] .quote-sign-note{margin:0}
[data-modal=quote-send] .quote-sign-divider{margin:12px 0;border:0;border-top:1px solid var(--line)}

/* ---- prislistan ------------------------------------------------------ */
.rate-lead{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.45}
.rate-rows{display:grid;gap:6px}
.rate-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 92px;gap:8px;align-items:center;margin:0}
.rate-row.is-head{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a968f}
.rate-row.is-head span:nth-child(2){text-align:right}
.rate-row input{width:100%;min-width:0;min-height:34px;padding:6px 9px;border:1px solid #cfd8d2;border-radius:8px;font:inherit;background:#fff}
.rate-row input[name=day_rate]{text-align:right;font-variant-numeric:tabular-nums}
.rate-row .button{min-height:34px;width:100%}
.rate-row.is-new{margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:560px){
  .rate-row{grid-template-columns:minmax(0,1fr) 96px}
  .rate-row.is-head{display:none}
  .rate-row .button{grid-column:1 / -1}
}

/* ---- uträkningen i klartext ------------------------------------------ */
/* Antal × dagar per person × dagspris. Står under nya raden medan man
   skriver, så att ingen behöver räkna i huvudet. */
.quote-calc{
  grid-column:1 / -1;
  margin:0;
  min-height:16px;
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.quote-line .quote-amount.is-changed{color:#245b3e}
.quote-line .quote-amount.is-changed:after{content:' •';color:#b08b1e}
.quote-calc.is-ready{color:#245b3e;font-weight:600}

/* ---- tom offert ------------------------------------------------------ */
/* Raderna ÄR offerten. När det inte finns någon ska sidan säga vad man gör
   härnäst, inte bara konstatera att det är tomt. */
.quote-lines-empty{
  margin:0;padding:12px 16px;text-align:left;
  border:1px dashed var(--line);border-radius:10px;background:#fbfcfb;
}
.quote-lines-empty strong{display:block;font-size:14px}
.quote-lines-empty p{margin:3px 0 6px;color:var(--muted);font-size:12.5px}
.quote-lines-empty ol{margin:0;padding-left:20px;color:var(--ink);font-size:12.5px;line-height:1.6}
.quote-lines-empty li+li{margin-top:2px}
.quote-line-new.is-first{border-top-color:transparent;margin-top:8px;padding-top:0}
.quote-sign-strip-actions .button[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ---- bekräftelserutan ------------------------------------------------ */
/* Portalens egen, i stället för webbläsarens confirm() som ser ut som Chrome. */
.portal-modal-confirm{width:min(460px,calc(100% - 30px))}
.portal-modal-confirm .lp-confirm-text{margin:0;color:var(--ink);font-size:13.5px;line-height:1.55}
.portal-modal-confirm .form-actions{margin-top:14px;padding-top:0;border:0}

/* ---- publika sidor --------------------------------------------------- */
/* Godkännandesidan är varken portalen eller inloggningen. Den låg tidigare i
   login-shell, vars dekorativa :before är position:fixed över hela fönstret —
   ett osynligt lager som slukade varje klick, inklusive Godkänn-knappen. */
body.public-shell{
  min-height:100vh;
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
}
body.public-shell:before{content:none}
/* Dekorativa lager ska aldrig ta emot klick, var de än ligger. */
.login-shell:before{pointer-events:none}

/* ---- låst offert ----------------------------------------------------- */
/* Innehållet ligger fast så snart offerten lämnat huset. Sidan ska då se
   låst ut, inte bara vägra spara. */
.quote-lock{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;
  margin:0 0 8px;padding:10px 14px;
  border:1px solid #e0d6ae;border-radius:10px;background:#fdf8e8;
}
.quote-lock strong{display:block;font-size:13.5px;color:#6d5000}
.quote-lock p{margin:2px 0 0;max-width:78ch;color:#6d5000;font-size:12.5px;line-height:1.45}
.quote-lock form{margin:0}
.quote-lock .button{min-height:32px;padding:0 12px;font-size:12.5px}
.quote-line.is-locked{background:#fbfcfb;align-items:center}
.quote-line.is-locked .quote-line-main{grid-template-columns:minmax(0,1fr)}
.quote-line.is-locked .quote-line-main span{font-size:13px}
.quote-line.is-locked .quote-line-kind{
  border:0;background:none;padding:0;min-height:0;
  font-size:11px;color:var(--muted);
}
.quote-line.is-locked .num{text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.quote-lock.is-alarm{border-color:#e5c3bb;background:#fdf1ee}
.quote-lock.is-alarm strong,.quote-lock.is-alarm p{color:#8d2f22}
.approval-sent-note{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.5}

/* ---- typväljaren på en rad ------------------------------------------- */
/* Den var pastellfärgad med tunn ram och läste sig som en knapp. Ett fält
   som går att ändra ska se ut som fälten bredvid — samma höjd, samma ram,
   samma vita botten. Ingen egen form för samma sorts sak. */
.quote-line .quote-line-kind{
  min-height:32px;
  padding:5px 9px;
  border:1px solid #cfd8d2;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:12.5px;
}
/* I läsläge är den ingen kontroll alls, bara en etikett. */
.quote-line.is-locked .quote-line-kind{
  border:0;
  border-radius:0;
  padding:0;
  min-height:0;
  background:none;
  color:var(--muted);
  font-size:11px;
}

/* ---- summorna i samma kolumn som radernas belopp --------------------- */
/* Sammanställningen låg som ett eget högerställt block mot panelkanten,
   medan radernas belopp låg i BELOPP-kolumnen — som slutar tidigare, för
   raderna har två kolumner till för Spara och krysset. Samma rutnät här
   lägger talen rakt under varandra. */
.quote-totals div{
  display:grid;
  grid-template-columns:minmax(0,1fr) 74px 74px 96px 120px 92px 34px;
  gap:8px;
  /* Samma lådmått som en rad — 1 px ram och 8 px indrag — så att kolumnerna
     hamnar på exakt samma ställe oavsett hur många kolumner rutnätet har. */
  border:1px solid transparent;
  padding:0 8px;
  align-items:baseline;
}
.quote-totals div>span{grid-column:1 / 5}
.quote-totals div>b{grid-column:5;text-align:right}
/* Under 1100 px bryts raderna och beloppet flyttar ned till vänster under
   beskrivningen. Då finns ingen beloppskolumn att ligga i linje med, och
   summorna ställs som förut mot panelens högerkant. */
@media(max-width:1100px){
  .quote-totals div{display:flex;justify-content:space-between;padding:0}
}

/* ---- låst offert: inga tomma knappkolumner --------------------------- */
/* Raderna reserverar två kolumner för Spara och krysset. På en låst offert
   finns ingen av dem, och då ska beloppen inte dras in från sidans kant för
   att ge plats åt knappar som inte finns. */
.quote-lines-panel.is-locked .quote-line{
  grid-template-columns:minmax(0,1fr) 74px 74px 96px 120px;
}
.quote-lines-panel.is-locked .quote-line>span:nth-child(6),
.quote-lines-panel.is-locked .quote-line>span:nth-child(7){display:none}
.quote-lines-panel.is-locked .quote-totals div{
  grid-template-columns:minmax(0,1fr) 74px 74px 96px 120px;
}
@media(max-width:1100px){
  .quote-lines-panel.is-locked .quote-line{grid-template-columns:minmax(0,1fr) 62px 62px 84px}
}

/* ---- prislistan med kategori ----------------------------------------- */
.rate-row{grid-template-columns:minmax(0,1fr) 150px 110px}
.rate-row select{
  width:100%;min-width:0;min-height:34px;padding:6px 9px;
  border:1px solid #cfd8d2;border-radius:8px;font:inherit;font-size:12.5px;background:#fff;
}
.rate-row.is-head span:nth-child(3){text-align:right}
.rate-row.is-new input::placeholder{color:#9aa79f}
.rate-new-lead{margin:10px 0 2px;color:var(--muted);font-size:11.5px;font-weight:600}
@media(max-width:560px){
  .rate-row{grid-template-columns:minmax(0,1fr) 96px}
  .rate-row select{grid-column:1 / -1}
}
[data-modal=quote-rate-card] .portal-modal-body{display:block}
[data-modal=quote-rate-card] .form-actions{margin-top:14px}
/* Rollväljaren på en offertrad är samma sorts fält som beskrivningen. */
.quote-line .quote-line-kind{font-size:12.5px}
/* Nya raden: fasta kolumner nu när Typ-väljaren är borta. Auto-fit gav
   Antal lika mycket plats som Beskrivning. */
.quote-line-new{grid-template-columns:200px minmax(0,1fr) 90px 110px 132px}
.quote-line-new .button{grid-column:1}
@media(max-width:900px){.quote-line-new{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}

/* Etiketten "ur prislistan" ska förklara, inte konkurrera. */
.quote-line-new label>span small{
  font-weight:600;color:var(--muted);font-size:10.5px;letter-spacing:.02em;
}

.quote-lines-empty form{margin:8px 0 0}
.quote-lines-empty .button{min-height:32px;padding:0 12px;font-size:12.5px}
.quote-lines-empty-alt{margin:8px 0 0!important;font-size:12px}

/* ---- raderna som ett formulär ---------------------------------------- */
/* Ingen Spara-knapp per rad längre, alltså en kolumn mindre. Beloppen kan
   flytta ut mot kanten igen, och summorna med dem. */
.quote-lines-form{margin:0}
.quote-lines-panel:not(.is-locked) .quote-line,
.quote-lines-panel:not(.is-locked) .quote-totals div{
  grid-template-columns:minmax(0,1fr) 74px 74px 96px 120px 34px;
}
.quote-lines-panel:not(.is-locked) .quote-line-head span:nth-child(7){display:none}
.quote-lines-panel:not(.is-locked) .quote-totals div{padding-right:6px}
.quote-lines-save{display:flex;justify-content:flex-end;margin-top:10px}
.quote-lines-save .button{min-height:34px}

/* Krysset: portalens eget, som i resurskalendern. */
.quote-line .place-remove{position:static;margin:0;display:flex;justify-content:center}
.quote-line .place-remove button{
  border:0;background:transparent;color:#68756d;font-size:15px;line-height:1;
  padding:2px 5px;cursor:pointer;border-radius:6px;
}
.quote-line .place-remove button:hover{background:#eef1ef;color:#b42318}
@media(max-width:1100px){
  .quote-lines-panel:not(.is-locked) .quote-line,
  .quote-lines-panel:not(.is-locked) .quote-totals div{grid-template-columns:minmax(0,1fr) 62px 62px 84px}
  .quote-line .place-remove{grid-column:4;justify-content:flex-end}
}

/* ---- förhandsgranskning i modal -------------------------------------- */
.quote-preview-modal{width:min(940px,calc(100% - 30px))}
.quote-preview-frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f4f6f3}
.quote-preview-frame iframe{display:block;width:100%;height:min(70vh,760px);border:0}
.quote-preview-modal .form-actions{margin-top:12px}

/* ---- Ny offert: samma täthet som resten ------------------------------ */
/* Panelen var byggd med de gamla luftiga måtten — 40 px fält och en egen rad
   per grupp. Nu samma mått som offertsidans övriga formulär. */
.quote-new-panel{padding:10px 12px;margin-bottom:8px}
.quote-new-panel h2{margin:0 0 8px;font-size:15px}
.quote-new-form{grid-template-columns:minmax(170px,1.1fr) repeat(3,minmax(0,1fr)) minmax(0,.8fr) 110px auto;gap:8px 10px}
.quote-new-form label{font-size:12px;gap:3px}
.quote-new-form input,
.quote-new-form select{min-height:34px;padding:6px 9px;font-size:13px}
.quote-new-form .party-picker{display:contents}
.quote-new-form .party-picker label{display:grid;gap:3px;min-width:0;font-size:12px;font-weight:600}
.quote-new-form .party-picker select{width:100%;min-width:0;min-height:34px;padding:6px 9px;font-size:13px}
.quote-new-form .quote-currency{max-width:none}
.quote-new-form .button{min-height:34px;align-self:end}
@media(max-width:1200px){.quote-new-form{grid-template-columns:repeat(3,minmax(0,1fr)) auto}}
@media(max-width:760px){
  .quote-new-form{grid-template-columns:1fr 1fr}
  .quote-new-form .button{grid-column:1 / -1}
}

/* Förhandsgranskningen visar utskriftsvyn, som är en vanlig sida — vit botten
   och en tydlig ram, så att det syns att det är dokumentet man tittar på. */
.quote-preview-frame{background:#fff}

/* ---- dokumentet i förhandsgranskningen -------------------------------- */
/* Ingen iframe: dokumentet skrivs in i modalen. Samma vy som utskriften, i en
   egen skrollruta så att modalen inte växer förbi skärmen. */
.quote-preview-doc{
  max-height:min(66vh,720px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:#eef1ee;
  padding:16px;
}
.quote-preview-doc .quote-doc{margin:0 auto;box-shadow:0 6px 24px rgba(17,48,30,.10)}
.quote-preview-doc .quote-doc-actions{display:none}

/* Omfattningen i dokumentet — samma uppställning som i PDF:en. */
.quote-doc-scope{margin:22px 0 18px}
.quote-doc-scope>strong{
  display:block;font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:#173f2b;margin-bottom:8px;
}
.quote-doc-scope-lead{margin:0 0 12px}
.quote-doc-scope dl{
  display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;margin:0;
}
.quote-doc-scope dl>div{display:flex;justify-content:space-between;gap:14px;padding:2px 0}
.quote-doc-scope dt{margin:0;color:#4a5a51}
.quote-doc-scope dd{margin:0;font-weight:700;text-align:right}
@media(max-width:700px){.quote-doc-scope dl{grid-template-columns:1fr}}