/* =====================================================================
   Paket E – dokumentarkivet. Mobil först.
   ===================================================================== */
.arkiv { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) {
  .arkiv { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; }
  .arkiv-trad { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
}

.arkiv-sok { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 700px) { .arkiv-sok { grid-template-columns: 2fr 1fr auto; align-items: end; } .arkiv-sok .falt { margin-bottom: 0; } }

/* Mappträd */
.trad-ram { background: var(--vit); border-radius: var(--radie); padding: .75rem 1rem; }
.trad-ram > summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.mapptrad, .mapptrad ul { list-style: none; margin: 0; padding: 0; }
.mapptrad ul { padding-left: 1rem; border-left: 1px solid var(--linje); margin-left: .45rem; }
.mapptrad li { margin: 0; }
.mapptrad summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .3rem; min-height: 36px; }
.mapptrad summary::-webkit-details-marker { display: none; }
.mapptrad summary::before { content: "▸"; color: var(--salvia); width: 1rem; flex: none; }
.mapptrad details[open] > summary::before { content: "▾"; }
.trad-lov { display: flex; align-items: center; gap: .3rem; min-height: 36px; padding-left: 1.3rem; }
.mapptrad > li > a { display: flex; align-items: center; min-height: 36px; padding-left: 1.3rem; }
.mapptrad a { color: var(--text); text-decoration: none; padding: .15rem .3rem; border-radius: 6px; }
.mapptrad a:hover { background: var(--ljus); }
.mapptrad a[aria-current="page"] { background: var(--mork); color: var(--vit); font-weight: 700; }
.las-ikon { font-size: .8rem; }

/* Innehåll */
.brodsmulor { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .5rem; font-size: .95rem; }
.brodsmulor a { color: var(--mork); }
.brodsmulor a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.brodsmulor span { color: var(--salvia); }
.mapp-huvud { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
.mapp-huvud h2 { margin: 0; word-break: break-word; }
.las-marke {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: #FFF6D6; color: #5C4800; font-weight: 700; font-size: .9rem;
}
.las-marke.liten { font-size: .78rem; padding: .15rem .55rem; white-space: nowrap; }
p.las-marke { border-radius: 10px; padding: .7rem 1rem; display: block; }

.mappatgarder { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin: .75rem 0 1rem; }
.mappatgarder form { margin: 0; }
.atgard > summary { list-style: none; }
.atgard > summary::-webkit-details-marker { display: none; }
.atgard[open] > summary { background: #E3EAE5; }
.atgard-form {
  margin-top: .5rem; padding: 1rem; min-width: min(320px, 90vw);
  background: var(--vit); border-radius: var(--radie); box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}
.inline-form { display: inline-block; margin: 0 0 0 .75rem; }

.mapplista { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mapplista a {
  display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .6rem .9rem;
  background: var(--vit); border-radius: 10px; border: 1.5px solid transparent;
  color: var(--text); text-decoration: none; font-weight: 700; word-break: break-word;
}
.mapplista a:hover { border-color: var(--salvia); }
.mapp-ikon { font-size: 1.3rem; }

/* Filtypsikoner */
.dokumentnamn { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--text); text-decoration: none; }
.dokumentnamn:hover span:last-child { text-decoration: underline; }
.filikon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 2.6rem; height: 1.7rem; padding: 0 .3rem; border-radius: 5px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--vit); background: #6B6B6B;
}
.filikon-pdf { background: #B3261E; }
.filikon-doc { background: #2B579A; }
.filikon-xls { background: #217346; }
.filikon-csv { background: #3E7D5A; }
.filikon-txt { background: #5B6B64; }
.filikon-bild { background: #7A4FA0; }
h1 .filikon { vertical-align: middle; margin-right: .3rem; }
.sokvag { display: block; margin-top: .2rem; }
.kontrollsumma { font-size: .8rem; }
@media (max-width: 760px) { .dokumenttabell td.bryt { flex-direction: column; } .dokumenttabell td.bryt > * { text-align: left; } }

/* Uppladdning */
.uppladdning { margin: 0 0 1.25rem; }
.slappyta {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 120px; padding: 1.25rem; cursor: pointer;
  background: var(--vit); border: 2px dashed var(--salvia); border-radius: var(--radie);
}
.slappyta.over { background: #E3EFE8; border-color: var(--mork); }
.slappyta:focus-within { outline: 3px solid rgba(111, 142, 128, .55); outline-offset: 2px; }
.slappyta-text { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.uppladdningslista { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; }
.uppladdningslista li {
  display: grid; grid-template-columns: 1fr; gap: .35rem;
  padding: .7rem .9rem; background: var(--vit); border-radius: 10px; border-left: 5px solid var(--salvia);
}
.uppladdningslista li.ok { border-left-color: var(--mork); }
.uppladdningslista li.fel { border-left-color: var(--fel); }
.uppladdningslista li.fel .uppladdning-status { color: var(--fel); font-weight: 700; }
.uppladdning-namn { font-weight: 700; word-break: break-word; }
.uppladdningslista progress { width: 100%; height: 10px; accent-color: var(--mork); }
.val-knappar { margin-top: .25rem; }
.uppdatera { margin-top: .75rem; }

/* Områdena: flikarna Gemensamma dokument och Admin/VD överst. */
.arkiv-flikar { display: flex; gap: .4rem; margin: 0 0 1rem; border-bottom: 2px solid var(--linje, #d8dfdb); overflow-x: auto; }
.arkiv-flikar .flik { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem; font-weight: 700; text-decoration: none;
  color: inherit; border-radius: 8px 8px 0 0; white-space: nowrap; }
.arkiv-flikar .flik.aktiv { background: var(--mork); color: #fff; }

/* Stora knappar för mobilen: Ta foto och Välj filer. */
.stor-knapp { min-height: 3.25rem; padding-left: 1.4rem; padding-right: 1.4rem; font-size: 1.1rem; }
.foto-knapp { display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 0 .6rem; cursor: pointer; }
@media (max-width: 899px) {
  .bara-dator { display: none; }
  .uppladdning .slappyta { padding: .6rem; }
  .uppladdning .slappyta .knapp { width: 100%; justify-content: center; }
  .mappatgarder .knapp, .mapplista a { min-height: 2.75rem; }
}