/* v0411 — kundkortet och enhetssidan.
 *
 * Två sidor med samma byggstenar: ett brödsmulespår, ett huvud med
 * knapparna, ett faktakort, en eller två listor, och en streckad utgång
 * längst ned.
 *
 * MÄTTA FÄLLOR SOM DEN HÄR FILEN MÅSTE HANTERA
 *
 * 1. .span-2 gör INGENTING i .admin-form. Portalen definierar den per
 *    formulär (.customer-org-detail-form .span-2 och så vidare), aldrig
 *    generellt. Utan regeln nedan står varenda "bred" rad i modalerna
 *    som en halv kolumn. Mätt i v0393.
 * 2. .portal-modal h3{font-size:24px} (assignment-v0088.css). Mina h3 är
 *    avsnittsrubriker inne i en modal och ska vara små.
 * 3. .app-shell table th,td{height:28px} och th,td{white-space:nowrap}
 *    klipper text. Rör inte tabeller här — listorna är rutnät, inte
 *    tabeller, just därför.
 * 4. .page-head .eyebrow är display:none portalen över. Ingen eyebrow.
 */

.kundkort{ display:block }

/* ---- brödsmulan ------------------------------------------------------- */
.kundkort .k-smula{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0 0 6px; font-size:12px; color:var(--muted,#68756d);
}
.kundkort .k-smula a{ color:var(--muted,#68756d); text-decoration:none }
.kundkort .k-smula a:hover{ text-decoration:underline }
.kundkort .k-smula strong{ color:var(--ink,#173f2b); font-weight:700 }

/* ---- huvudet ---------------------------------------------------------- */
.kundkort .k-huvud{ margin-bottom:12px }
.kundkort .k-huvud h1{ margin:0 }
.k-huvudknappar{ display:flex; flex-wrap:wrap; gap:8px }

/* ---- faktakortet ------------------------------------------------------ */
.kundkort .k-kort{ margin:0 0 12px }
.k-falt{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px 18px; margin:0;
}
.k-falt>div{ display:grid; gap:2px; min-width:0 }
.k-falt .k-bred{ grid-column:span 2 }
.k-falt dt{
  font-size:10px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted,#68756d);
}
.k-falt dd{
  margin:0; font-size:14px; color:var(--ink,#173f2b);
  min-height:20px; overflow-wrap:anywhere;
}
.k-falt dd.k-tom{ color:#b6c0b9 }
.k-falt dd.k-arvd small{ display:block; color:#9aa8a0; font-size:11.5px }
.k-flagga{
  display:inline-block; padding:1px 9px; border-radius:20px;
  background:#e3f2e8; color:#1f5c3a; font-size:11px; font-weight:700;
}
.k-flagga-av{ background:#eef1ee; color:#4b5a52 }

/* ---- listorna --------------------------------------------------------- */
.kundkort .k-lista{ margin:0 0 12px; overflow:hidden }
.k-listhuvud{
  display:flex; align-items:baseline; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--line,#e6ece7);
}
.k-listhuvud h2{ margin:0; font-size:15px }
.k-antal{ color:var(--muted,#68756d); font-size:13px }

.k-rad{
  display:grid; grid-template-columns:1fr auto auto 14px;
  align-items:center; gap:16px;
  padding:12px 16px; border-bottom:1px solid var(--line,#e6ece7);
  text-decoration:none; color:inherit;
}
.k-rad:last-child{ border-bottom:0 }
.k-rad:hover{ background:#f4f8f5 }
.k-rad-person{ cursor:pointer }
.k-rad-person:focus-visible{ outline:3px solid #dce77b88; outline-offset:-3px }
.k-radnamn{ font-weight:650; min-width:0; overflow-wrap:anywhere }
.k-radmeta{ color:var(--muted,#68756d); font-size:12.5px; overflow-wrap:anywhere }
.k-radpil{ color:#9aa8a0 }
.k-roll{
  display:inline-block; margin-left:6px; padding:1px 8px; border-radius:20px;
  background:#e3f2e8; color:#1f5c3a; font-size:10.5px; font-weight:700;
}
.k-roll-b{ background:#eef1ee; color:#4b5a52 }
.k-varning{ color:#8e2f2f; font-weight:600 }
.k-vantar{ color:#7a5c17; font-weight:600 }
.k-ok{ color:#1f5c3a }

.k-tomrad{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 16px; color:var(--muted,#68756d); font-size:13.5px;
}

/* Raden med flyttväljaren: namn, e-post och formuläret på en rad. */
.k-rad-flytt{ grid-template-columns:1fr auto auto }
.k-flyttform{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 }
.k-flyttform select{
  min-height:36px; padding:6px 10px; border:1px solid var(--line,#dce3dc);
  border-radius:8px; background:#fff; font:inherit; color:var(--ink,#173f2b);
  max-width:100%;
}
.k-doldetikett{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- utgången --------------------------------------------------------- */
.k-utgang{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; border:1px dashed var(--line,#dce3dc); border-radius:10px;
  text-decoration:none; color:inherit; font-size:13.5px;
}
.k-utgang:hover{ background:#f4f8f5 }

/* ---- modalerna -------------------------------------------------------- */
/* Fälla 1: utan den här raden är .span-2 en tom klass. */
.k-modal .admin-form .span-2{ grid-column:1/-1 }
.k-modal .admin-form{ gap:14px 16px }
.k-modal .k-faltrubrik{
  grid-column:1/-1; margin:8px 0 -4px; padding-top:8px;
  border-top:1px solid #eef2ee;
  font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#245b3e;
}
.k-modal .k-faltrubrik:first-of-type{ margin-top:0; padding-top:0; border-top:0 }
.k-modal .land-kod{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted,#68756d) }
.k-modal .k-kryss{ display:flex; align-items:center; gap:8px }
.k-modal .k-kryss input{ width:auto; min-height:0 }

.k-modal .k-falt-modal{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin-bottom:14px;
}
.k-modal .k-falt-modal>div{
  padding:7px 10px; border:1px solid #e6ece7; border-radius:8px; background:#fbfcfa;
}

.k-modal .k-modalform{
  display:flex; flex-wrap:wrap; gap:9px 12px; align-items:flex-end;
  margin:0; padding-top:10px; border-top:1px solid #f0f4f1;
}
/* Fälla 2: portalens modal-h3 är 24 px. Här är h3 en avsnittsrubrik. */
.k-modal .k-modalform h3{
  flex:1 0 100%; margin:0;
  font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted,#68756d);
}
.k-modal .k-modalform label{ display:grid; gap:3px; margin:0; font-size:11.5px; color:var(--muted,#68756d) }
.k-modal .k-modalform select{
  min-height:38px; padding:7px 10px; border:1px solid var(--line,#dce3dc);
  border-radius:8px; background:#fff; font:inherit;
}

/* ---- smal skärm ------------------------------------------------------- */
@media (max-width:760px){
  .k-falt{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .k-falt .k-bred{ grid-column:span 2 }

  /* Raderna staplar: namnet överst, uppgifterna under, pilen till höger.
     Ingen nowrap — e-postadresser är långa och ska brytas, inte klippas. */
  .k-rad{ grid-template-columns:1fr 14px; gap:2px 10px }
  .k-rad>.k-radmeta{ grid-column:1 }
  .k-radpil{ grid-row:1; grid-column:2 }
  .k-rad-flytt{ grid-template-columns:1fr }
  .k-flyttform{ grid-column:1; margin-top:6px }
  .k-flyttform select{ flex:1 1 160px }

  .k-huvudknappar .button{ flex:1 1 auto; justify-content:center }
}

@media (max-width:620px){
  .k-modal .admin-form .span-2,
  .k-modal .k-faltrubrik{ grid-column:1 }
}

/* ---- enheterna, öppna på samma sida ----------------------------------- */
/* v0411 — Ulf: "kan vi inte bara ha ett kundkort där alla uppgifter står?"
   Enheterna ligger alltså inte bakom ett klick utan under företaget, var
   och en med sina fält och sina beställare. */
.k-avdelning{ display:flex; align-items:baseline; gap:8px; margin:18px 0 8px }
.k-avdelning h2{ margin:0; font-size:15px }

.kundkort .k-enhet{ margin:0 0 12px; overflow:hidden }
.k-enhetshuvud{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px; border-bottom:1px solid var(--line,#e6ece7);
  background:#fbfcfa;
}
.k-enhetshuvud h3{ margin:0; font-size:14.5px; overflow-wrap:anywhere }
.k-enhetsknappar{ display:flex; flex-wrap:wrap; gap:6px }
.k-enhetsfalt{ padding:12px 16px; border-bottom:1px solid var(--line,#e6ece7) }
/* Enheten har få fält — de ska inte glesas ut över hela bredden. */
.k-enhetsfalt .k-falt{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.k-enhet .k-rad{ padding:11px 16px }

.k-tomruta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:16px; color:var(--muted,#68756d); font-size:13.5px;
}

@media (max-width:760px){
  .k-enhetsfalt .k-falt{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .k-enhetsknappar .button{ flex:1 1 auto; justify-content:center }
}

/* ---- den farliga raden i menyn ---------------------------------------- */
/* v0411 — Nollställ portalen står i menyn nu. Den ska gå att hitta OCH
   synas som det den är: skild från de andra med en linje, och i rött.
   Skydden ligger på sidan, inte i att posten är gömd. */
.top-dropdown-menu .top-farlig{
  margin-top:6px; padding-top:8px;
  border-top:1px solid var(--line,#e6ece7);
  color:#8e2f2f;
}
.top-dropdown-menu .top-farlig:hover{ color:#6f2323 }

/* ---- formuläret Nytt företag ------------------------------------------ */
/* v0411 — Ulf: "Varför kan vi inte bara skriva in all information på en
   gång när vi ska skapa en kund?" Allt i ett formulär, med avsnitt.
   Fälla 1 igen: .span-2 gör ingenting i .admin-form utan den här raden. */
.k-nyform .admin-form .span-2{ grid-column:1/-1 }
.k-nyform .k-faltrubrik{
  grid-column:1/-1; margin:10px 0 -4px; padding-top:10px;
  border-top:1px solid #eef2ee;
  font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#245b3e;
}
.k-nyform .k-faltrubrik:first-of-type{ margin-top:0; padding-top:0; border-top:0 }
.k-nyform .land-kod{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted,#68756d) }
@media (max-width:700px){
  .k-nyform .admin-form .span-2,
  .k-nyform .k-faltrubrik{ grid-column:1 }
}

/* ---- fyra kolumner: formuläret ska RYMMAS, inte skrollas -------------- */
/* v0411 — Ulf: "Denna blir toppen, men inte så man behöver skrolla."
   .admin-form är tvåkolumnig i admin.css. Ett företagsformulär med korta
   fält blir då dubbelt så högt som det behöver. Här: fyra kolumner på bred
   skärm, två på mellan, en på telefon. .span-2 betyder "dubbelt så bred som
   ett fält" — halva raden av fyra, hela raden av två. */
@media (min-width:1000px){
  .k-modal .admin-form,
  .k-nyform .admin-form{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px 14px;
  }
  .k-modal .admin-form .span-2,
  .k-nyform .admin-form .span-2{ grid-column:span 2 }
  /* MÄTT: rubriken bär BÅDE .k-faltrubrik och .span-2. Regeln
     .k-modal .admin-form .span-2 har högre specificitet (0,3,0) än
     .k-modal .k-faltrubrik (0,2,0) och vann — rubriken blev en halv rad
     och nästa fält hamnade bredvid den. Samma väg in i selektorn löser det. */
  .k-modal .admin-form .k-faltrubrik,
  .k-nyform .admin-form .k-faltrubrik{ grid-column:1/-1; margin:6px 0 -2px; padding-top:6px }
}
@media (min-width:701px) and (max-width:999px){
  .k-modal .admin-form,
  .k-nyform .admin-form{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px }
  .k-modal .admin-form .span-2,
  .k-nyform .admin-form .span-2{ grid-column:1/-1 }
  .k-modal .admin-form .k-faltrubrik,
  .k-nyform .admin-form .k-faltrubrik{ grid-column:1/-1 }
}
@media (max-width:700px){
  .k-modal .admin-form .k-faltrubrik,
  .k-nyform .admin-form .k-faltrubrik{ grid-column:1/-1 }
}

/* Luftigare än nödvändigt är samma sak som att skrolla. */
.k-modal .admin-form label>span,
.k-nyform .admin-form label>span{ margin-bottom:4px; font-size:12px }
.k-modal .admin-form input,
.k-modal .admin-form select,
.k-nyform .admin-form input,
.k-nyform .admin-form select{ padding:9px 11px }
.k-modal .admin-form small,
.k-nyform .admin-form small{ margin-top:3px }
.k-modal .admin-form .form-actions,
.k-nyform .admin-form .form-actions{ padding-top:4px }

/* ---- offerten: vad kunden vill ha ------------------------------------- */
/* v0411 — offerten prissätter en beställning. Beställningen står överst,
   och EN rad svarar på frågan man har: räcker perioden? Talen bakom
   (ekipage, moment, spår, pass) bor kvar i rutan Planering — de får inte ta
   över sidan. Ulf 10 sep: "det får verkligen inte ta över så allt blir
   förvirrat." */
.quote-ask{ margin:0 0 12px }
.quote-ask h2{ margin:0 0 10px; font-size:15px }
.quote-ask-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px 18px; margin:0;
}
.quote-ask-facts>div{ display:grid; gap:2px; min-width:0 }
.quote-ask-facts .is-wide{ grid-column:span 2 }
.quote-ask-facts dt{
  font-size:10px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted,#68756d);
}
.quote-ask-facts dd{ margin:0; font-size:14px; color:var(--ink,#173f2b); overflow-wrap:anywhere }
.quote-ask-text{
  margin:12px 0 0; padding:11px 13px; border-radius:9px; background:#f6f9f6;
  font-size:13.5px; line-height:1.55; color:#3c4a41;
}
.quote-ask-days{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line,#e6ece7);
  font-size:13.5px; color:#3c4a41;
}
.quote-ask-days b{ color:var(--ink,#173f2b) }
.quote-ask-verdict{ font-weight:700 }
.quote-ask-days.is-ok .quote-ask-verdict{ color:#1f5c3a }
.quote-ask-days.is-tight .quote-ask-verdict{ color:#8e2f2f }
.quote-ask-plan{
  margin-left:auto; padding:5px 11px; border:1px solid var(--line,#dce3dc);
  border-radius:8px; background:#fff; font:inherit; font-size:12.5px;
  color:#2f6a4a; cursor:pointer;
}
.quote-ask-plan:hover{ background:#f4f8f5 }
@media (max-width:760px){
  .quote-ask-facts .is-wide{ grid-column:1/-1 }
  .quote-ask-plan{ margin-left:0; width:100% }
}