/* ==========================================================================================================================
   AP 93 Beställningar (skiss 1b): rubrik med huvudknapp, urvalsrad, flikar, siffror, tabeller, steg och formulär med förhandsvisning.
   Bara fasta värden ur stilrent.md avsnitt 5: tre textstorlekar, två gråtoner, en linjefärg, inga ramar, kort eller skuggor.
   ========================================================================================================================== */
.best-urval{margin:.25rem 0 1rem; color:var(--farg-stod)}   /* 14 px som urvalsraden i övriga sidhuvuden (kollbar.css) */
/* Flikarna: samma som i Analys (ram.css, .vyflikar): egen rad, blå linje 2 px, vald flik med blå ram och bakgrund #F0F3FB. */
.best-flikar{border-bottom:2px solid var(--kollbar-bla); margin:16px 0 16px}
.best-flikar ul{display:flex; flex-wrap:wrap; gap:.15rem; margin:0; padding:0; list-style:none}
.best-flikar a{display:block; padding:.45rem .9rem; white-space:nowrap}
.best-delrubrik{font-size:var(--text-brod); font-weight:600; margin:1.5rem 0 .5rem; color:var(--farg-text)}
.best-tabell{width:100%}
.best-tabell td{vertical-align:top}
.best-tabell td.h,.best-tabell th.h{text-align:right}
.best-kod{font-size:var(--text-liten); color:var(--farg-stod); white-space:nowrap}
.best-fot{margin:.5rem 0 0; font-size:var(--text-liten)}
.best-fot a{text-decoration:underline}
.best-lank{display:inline; padding:0; border:0; background:none; font:inherit; color:var(--kollbar-bla); text-align:left; cursor:pointer}
.best-lank:hover{text-decoration:underline}
.best-lank--text{color:var(--farg-text)}
.best-historik td{padding:0 0 1rem 1rem; font-size:var(--text-liten); color:var(--farg-stod)}
.best-historik ol{margin:0; padding-left:1rem}
.best-historik p{margin:.5rem 0 0}
.best-verktyg{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 1rem; margin:0 0 1rem}
.best-verktyg-hoger{display:flex; align-items:center; gap:.5rem; margin-left:auto}
.best-snabb{margin:0; display:flex; flex-wrap:wrap; gap:0 1rem}
.best-snabb a{color:var(--farg-stod)}
.best-snabb a.ar-vald{color:var(--farg-text); font-weight:600}
.best-val{display:flex; align-items:center; gap:.5rem; margin:0 0 1rem}
.best-val--rad{margin:0}
.best-val .form-select{width:auto; max-width:16rem}
.best-statusform{display:flex; align-items:center; gap:.5rem; margin:0}
.best-js .best-spara{display:none}
.best-stval{width:auto; max-width:15rem}
.best-forslag{margin:.25rem 0 0; font-size:var(--text-liten); color:var(--farg-stod)}
.best-steg{display:flex; flex-wrap:wrap; gap:0 1.5rem; margin:0 0 1.5rem; padding:0; list-style:none; font-size:var(--text-brod); color:var(--farg-stod)}
.best-steg li.nu{color:var(--farg-text); font-weight:600; border-bottom:2px solid var(--kollbar-bla); padding-bottom:.25rem}
.best-steg li.klar,.best-steg li.klar .best-lank,.best-steg a{color:var(--farg-text)}
.best-steg .best-lank{color:inherit; font-weight:inherit}
.best-formular{display:grid; grid-template-columns:1fr 1fr; gap:0}
.best-vanster{padding-right:2rem; min-width:0}
.best-hoger{align-self:start; min-width:0}
.best-form label{display:block; font-size:var(--text-liten); font-weight:600; margin:1rem 0 .25rem}
.best-form label:first-child{margin-top:0}
.best-form .form-check label{display:inline; font-weight:400; margin:0}
.best-smal{max-width:14rem}
.best-hjalp{margin:.25rem 0 0; font-size:var(--text-liten); color:var(--farg-stod)}
.best-radrubrik{margin:1rem 0 .25rem; font-size:var(--text-liten); font-weight:600}
.best-rad + .best-rad{margin-top:1rem; padding-top:.5rem; border-top:1px solid var(--farg-linje)}
.best-knapprad{display:flex; justify-content:space-between; margin-top:1.5rem}
.best-forhandsvisning + .best-forhandsvisning{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--farg-linje)}
.best-fraga{font-weight:600; margin:0 0 .5rem}
.best-alt{display:flex; gap:.5rem; align-items:center; margin:.5rem 0}
.best-alt i{width:14px; height:14px; border:1px solid var(--farg-stod); border-radius:50%; flex:0 0 auto}
.best-val-lista{margin:0; padding:0; list-style:none; max-width:36rem}
.best-val-lista li{display:flex; flex-direction:column; padding:.75rem 0; border-top:1px solid var(--farg-linje)}
.best-val-lista li:last-child{border-bottom:1px solid var(--farg-linje)}
.best-fakta{display:grid; grid-template-columns:9rem 1fr; gap:.25rem 1rem; margin:0 0 1rem; max-width:48rem}
.best-fakta dt{font-size:var(--text-liten); font-weight:600}
.best-fakta dd{margin:0}
.best-fakta--rad{padding-top:.75rem; border-top:1px solid var(--farg-linje)}
.best-rad-detalj{padding:.75rem 0; border-top:1px solid var(--farg-linje)}
.best-historik-lista{margin:0 0 1rem; padding-left:1rem; font-size:var(--text-liten); color:var(--farg-stod)}
.best-intern{font-style:italic}
.best-radform{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.5rem 0 0}
.best-radform label{margin:0}
.best-radform input[name=notering]{flex:1 1 14rem; max-width:24rem}
.best-redigera{max-width:40rem}
.best-radknappar{display:flex; gap:.5rem; margin:0 0 1rem}
@media (max-width:860px){
  .best-formular{grid-template-columns:1fr}
  .best-vanster{padding-right:0}
  .best-hoger{margin-top:1.5rem}
  .best-fakta{grid-template-columns:1fr}
}
.best-sok{gap:.5rem}
.best-sok .form-control,.best-sok .form-select{width:auto; max-width:16rem}
.best-sok input[type=search]{min-width:12rem}
.best-meny{display:inline-block}
.best-meny .kortmeny-panel{width:11rem; box-shadow:none}
.best-meny .kortmeny-panel form{margin:0}
button.kortmeny-post{width:100%; border:0; background:none; text-align:left; font:inherit}
.best-bank td{vertical-align:top}
.arende-delad{display:grid; grid-template-columns:20rem 1fr; gap:0}
.arende-delad > div:first-child{padding-right:1rem; border-right:1px solid var(--farg-linje)}
.arende-trad{padding-left:1.5rem; min-width:0}
.arende-rad{display:flex; flex-direction:column; padding:.5rem 0; border-bottom:1px solid var(--farg-linje); color:var(--farg-text)}
.arende-rad:hover{text-decoration:none}
.arende-rad.ar-vald .arende-text{font-weight:600}
.medd{margin:0 0 1rem}
@media (max-width:860px){
  .arende-delad{grid-template-columns:1fr}
  .arende-delad > div:first-child{padding-right:0; border-right:0; border-bottom:1px solid var(--farg-linje); padding-bottom:1rem}
  .arende-trad{padding:1rem 0 0}
}
.best-flikar li a,p.best-snabb a,ol.best-steg a,.best-val-lista a,.arende-rad{text-decoration:none}
.best-flikar li a:hover,p.best-snabb a:hover,ol.best-steg a:hover,.best-val-lista a:hover{text-decoration:underline}
.best-flikar li a.ar-aktiv:hover{text-decoration:none}
.best-tabell th{white-space:nowrap}
.arende-rad,.arende-rad .arende-text{color:var(--farg-text)}
@media (max-width:600px){.best-sek{display:none}}
.best-fel{margin:.25rem 0 0; padding-left:.5rem; border-left:2px solid var(--status-rod); font-size:var(--text-liten); color:var(--farg-text)}
/* Mobil (AP 93): Mina beställningar blir två rader per fråga, status och Nästa steg syns och inget klipps */
@media (max-width:600px){
  .best-mina.table.tabell{display:block; overflow:visible}
  .best-mina thead{display:none}
  .best-mina tbody{display:block}
  .best-mina tr.best-fraga-rad{display:grid; grid-template-columns:1fr 1fr; gap:.125rem 1rem; padding:.5rem 0; border-bottom:1px solid var(--farg-linje)}
  .best-mina tr.best-fraga-rad > td{display:block; padding:0; border:0; min-width:0; overflow-wrap:anywhere}
  .best-mina tr.best-fraga-rad > td:first-child{grid-column:1 / -1}
  .best-mina tr.best-historik{display:block}
  .best-mina tr.best-historik > td{display:block; padding:.5rem 0 .75rem 0; border-bottom:1px solid var(--farg-linje)}
  .best-mina .status{white-space:normal}
}
.best-mina tr.best-historik[hidden]{display:none}
/* ==========================================================================================================================
   AP 127: beställningsportalen i omtagets stil. Korten är omtagets `.vykort` (vit yta, 1 px #dfe3e8, radie 8, 16 px luft).
   ========================================================================================================================== */
/* Status: fem färger. Grå, gul, grön och röd finns i den gemensamma stilen. Blå (pågår) behövs också där: se rapporten. */
/* De fyra talen i tunna kort */
.best-tal{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1rem; margin:0 0 1.5rem}
.best-tal .vykort{display:flex; flex-direction:column; gap:.25rem}
.best-tal dt{order:1; font-size:var(--text-liten); font-weight:400; color:var(--farg-stod)}
.best-tal dd{order:2; margin:0}
.best-tal dd.v{font-size:var(--text-xl); font-weight:600; line-height:1.3}
.best-tal dd.best-dagar{order:3; font-size:var(--text-liten); color:var(--farg-stod)}
.best-andel{order:3; appearance:none; -webkit-appearance:none; width:100%; height:6px; margin-top:.25rem; border:0; border-radius:3px; background:var(--farg-linje); overflow:hidden}
.best-andel::-webkit-progress-bar{background:var(--farg-linje); border-radius:3px}
.best-andel::-webkit-progress-value{background:var(--kollbar-bla); border-radius:3px}
.best-andel::-moz-progress-bar{background:var(--kollbar-bla); border-radius:3px}
/* Tabeller i ett kort med rubrikrad: titeln till vänster och ⋯ till höger */
.best-kort{padding:1rem 1rem .5rem}
.best-kort-huvud{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 .5rem}
.best-kort-huvud .vykort-rubrik{margin:0}
.best-kort .tabell-rullning{margin:0 -.25rem}
.best-kort .best-tabell tr:last-child td{border-bottom:0}
.best-kort .best-fot{margin:.5rem 0 0}
/* Stegen 1 till 7 under frågan: de klara har färg, det nuvarande är fetstil */
.best-stegrad{display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin:0 0 .5rem; padding:0; list-style:none; font-size:var(--text-liten); color:var(--farg-stod)}
.best-stegrad li{display:inline-flex; align-items:baseline; gap:.375rem}
.best-stegrad-prick{flex:0 0 auto; width:.5rem; height:.5rem; border-radius:50%; background:var(--farg-linje)}
.best-stegrad-klar{color:var(--farg-text)}
.best-stegrad-klar .best-stegrad-prick{background:var(--status-gron)}
.best-stegrad-nu{color:var(--farg-text); font-weight:600}
.best-stegrad-nu .best-stegrad-prick{background:var(--kollbar-bla)}
.best-handelser{margin:0; padding-left:1rem}
/* Svarsalternativen: ett fält per rad */
.best-alt-lista{margin:0; padding:0; list-style:none; display:grid; gap:.5rem; max-width:28rem}
.best-alt-rad{display:flex; gap:.5rem; align-items:center}
.best-alt-rad .form-control{flex:1 1 auto; min-width:0}
.best-ta-bort{flex:0 0 auto; width:var(--knapp-hojd-liten); height:var(--knapp-hojd-liten); padding:0; border:1px solid var(--farg-linje); border-radius:4px; background:#fff; color:var(--farg-stod); font-size:1.25rem; line-height:1; cursor:pointer}
.best-ta-bort:hover,.best-ta-bort:focus-visible{color:var(--status-rod); border-color:var(--status-rod)}
.best-form label .forklaring-ikon{vertical-align:baseline}
.best-statusform{margin:.25rem 0 0}
.best-historik > td{padding:.5rem 0 .75rem .25rem}
.best-kort .best-lank--text{text-decoration:none}
.best-kort .best-lank--text:hover{text-decoration:underline}
@media (max-width:600px){
  .best-kort .table.tabell,.best-kort .table.tabell tbody{display:block; width:100%}
  .best-kort tr.best-historik{display:block}
  .best-kort tr.best-historik > td{display:block; text-align:left; width:100%}
  .best-stegrad{flex-direction:column}
}
/* Sidhuvudet är portalens gemensamma (_sidhuvud.html). Huvudknappen står till höger under flikarna. */
.best-urval{margin:.25rem 0 0}
.best-knapprad-ovan{display:flex; justify-content:flex-end; align-items:center; gap:.5rem; margin:0}
/* Länkar i tabeller och listor: accentfärg utan understrykning. Understrykning bara i löptext. */
.best-kort a,.best-kort .best-fot a,.best-kort .best-lank,.best-kort .best-lank--text{color:var(--kollbar-bla); text-decoration:none}
.best-kort p a:not([class]){text-decoration:none}
.best-kort a:hover,.best-kort .best-lank:hover,.best-kort p a:not([class]):hover{text-decoration:underline}
.best-tabell a,.best-tabell .best-lank{text-decoration:none}
.best-tabell a:hover,.best-tabell .best-lank:hover{text-decoration:underline}
@media (max-width:600px){
  .best-kort .table.tabell td{flex-wrap:wrap}
  .best-kort .best-statusform{flex:1 1 100%; justify-content:flex-end; margin:.25rem 0 0}
  .best-kort .best-stval{max-width:100%; width:100%}
  .best-verktyg-hoger .btn{white-space:nowrap}
}

/* Ansvarig (AP 130): rullistan och Ta själv, samma form i Ärenden och Hantera beställningar */
.ansvarig-form{flex-wrap:wrap}
.ansvarig-form .best-lank{white-space:nowrap}
nav.tidsniva.ansvarig-filter{margin:0; display:flex; align-items:center; gap:.5rem}
.filter-etikett{color:var(--gra-500); font-size:var(--text-sm)}
.best-snabb .filter-etikett{align-self:center}