/* v0405 — Kalenderkoll och notisen om den tomma veckan.
   Inga nya färger uppfinns: --line, --muted och portalens gröna/röda toner
   används som i övriga sidor. Tabellen har en egen rullbar behållare i
   stället för att bredda sidan — samma grepp som andra breda tabeller. */

/* ── notisen i kalendern ─────────────────────────────────────────────────── */
.app-shell .kalender-tomnotis{
  border-left:4px solid #b8860b;
  background:#fffdf5;
  margin:0 0 12px;
}
.app-shell .kalender-tomnotis p{ margin:0 0 8px }
.app-shell .kalender-tomnotis .button{ margin-right:6px }

/* ── Kalenderkoll ────────────────────────────────────────────────────────── */
.app-shell .kkoll-panel{ margin:0 0 12px }
.app-shell .kkoll-panel h2{ margin:0 0 4px; font-size:16px }
.app-shell .kkoll-panel > p.muted{ margin:0 0 10px }

.app-shell .kkoll-slutsats{ margin:0 0 14px; border-left:4px solid var(--line) }
.app-shell .kkoll-slutsats h2{ margin:0 0 6px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.app-shell .kkoll-slutsats p{ margin:0; font-size:16px; line-height:1.5 }
.app-shell .kkoll-slutsats.kkoll-fel{  border-left-color:#b42318; background:#fff6f5 }
.app-shell .kkoll-slutsats.kkoll-svar{ border-left-color:#b8860b; background:#fffdf5 }
.app-shell .kkoll-slutsats.kkoll-ok{   border-left-color:#2f7a4f; background:#f4fbf7 }

.app-shell p.kkoll-fel{ color:#b42318 }
.app-shell p.kkoll-ok{ color:#1f5c3a }

/* ── tabellerna ──────────────────────────────────────────────────────────── */
.app-shell .kkoll-tabell{ width:100%; border-collapse:collapse; font-size:13px }
/* height:auto är INTE överflödigt: density-v0104.css sätter
   .app-shell table th,.app-shell table td{height:28px} för hela portalen.
   Med en fast höjd klipps en cell som brutit sin text till två rader, och
   texten lägger sig ovanpå raden under. Mätt: cellen 28 px hög, innehållet
   79 px. Samma fälla ligger i team-list-v0198.css (42px). */
.app-shell .kkoll-tabell th,
.app-shell .kkoll-tabell td{ padding:6px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; height:auto }
.app-shell .kkoll-tabell th{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600 }
.app-shell .kkoll-tabell td.tal,
.app-shell .kkoll-tabell th.tal{ text-align:right; font-variant-numeric:tabular-nums }
.app-shell .kkoll-tabell tr.ar-struken td{ color:var(--muted); text-decoration:line-through }
.app-shell .kkoll-tabell tr.ar-stoppad{ background:#fff6f5 }
/* app.css sätter th,td{white-space:nowrap} för hela portalen. Skälstexten är
   en mening och måste brytas — utan den här raden låg den på EN rad, 861 px
   bred i en 366 px cell, och sköt in över nästa rad. Mätt i Chromium. */
.app-shell .kkoll-tabell td.kkoll-dom{ white-space:normal; max-width:320px }
.app-shell .kkoll-tabell small{ display:block; white-space:normal; color:var(--muted); line-height:1.4; margin-top:2px }
.app-shell .kkoll-tabell .mono.ar-varning{ color:#b42318; font-weight:600 }

/* Bred tabell rullar i sin egen ruta. Sidan ska aldrig bli bredare än
   skärmen — användartabellen gör redan det felet, och det ska inte spridas. */
.app-shell .kkoll-rullbar{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.app-shell .kkoll-personer{ min-width:720px }

.app-shell .kkoll-ja{  color:#1f5c3a; font-weight:600 }
.app-shell .kkoll-nej{ color:#b42318; font-weight:600 }

/* ── de två veckorna ─────────────────────────────────────────────────────── */
.app-shell .kkoll-veckor{ display:flex; gap:10px; flex-wrap:wrap }
.app-shell .kkoll-vecka{
  flex:1 1 240px; min-width:0;
  border:1px solid var(--line); border-radius:8px; padding:10px 12px;
}
.app-shell .kkoll-vecka.ar-samma{ opacity:.6 }
.app-shell .kkoll-vecka h3{ margin:0 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.app-shell .kkoll-vecka p{ margin:0 0 6px }
.app-shell .kkoll-datum{ font-weight:600 }
.app-shell .kkoll-siffra strong{ font-size:20px }
.app-shell .kkoll-fotnot{ margin:10px 0 0 }

.app-shell .kkoll-villkor ol{ margin:0; padding-left:20px; font-size:13px; line-height:1.7 }

@media (max-width:600px){
  /* flex-basis gäller HÖJDEN när riktningen är kolumn, så 240px sträckte
     korten till 240 px höga tomrum. Mätt i 430 px innan/efter. */
  .app-shell .kkoll-veckor{ flex-direction:column }
  .app-shell .kkoll-vecka{ flex:0 0 auto }

  /* Persontabellen blir kort, en per person — samma mönster som teamlistan
     (evaluation-v0195.css: tbody som rutnät, td::before med attr(data-label)).
     Som rullbar tabell hamnade kolumnen "syns i kalendern" utanför skärmen,
     och den är hela sidans poäng. */
  .app-shell .kkoll-rullbar{ overflow-x:visible }
  .app-shell .kkoll-personer{ min-width:0 }
  .app-shell .kkoll-personer,
  .app-shell .kkoll-personer tbody{ display:block }
  .app-shell .kkoll-personer thead{ display:none }
  .app-shell .kkoll-personer tr{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px;
    padding:12px; margin:0 0 10px;
    border:1px solid var(--line); border-radius:12px; background:#fff;
  }
  .app-shell .kkoll-personer tr.ar-stoppad{ border-color:#e6b4ad; background:#fff6f5 }
  /* white-space:normal krävs här också — app.css nowrap slår annars igenom
     på varje cell, och kortet blir en rad text som rinner ut åt höger. */
  /* max-width återställs med samma tyngd som regeln ovan (0,3,1) — annars
     vinner .kkoll-tabell td.kkoll-dom{max-width:320px} också i smal vy. */
  .app-shell .kkoll-personer td.kkoll-dom{ max-width:none }
  .app-shell .kkoll-personer td{ display:block; padding:0; border:0; text-align:left; white-space:normal; height:auto }
  .app-shell .kkoll-personer td.tal{ text-align:left }
  .app-shell .kkoll-personer td::before{
    content:attr(data-label); display:block; margin-bottom:2px;
    color:var(--muted); font-size:9px; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
  }
  /* Namnet och domen får hela bredden — de är det man läser. */
  .app-shell .kkoll-personer td.kkoll-namn,
  .app-shell .kkoll-personer td.kkoll-dom{ grid-column:1/-1 }
  .app-shell .kkoll-personer td.kkoll-namn::before{ display:none }
}