/* v0288 — 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}
}