:root {
  --text: #1b2027;
  --dim: #6b7684;
  --linje: #e3e7ec;
  --linje-stark: #c3cad3;
  --bakgrund: #f6f7f9;
  --panel: #ffffff;
  --accent: #1f5fa8;
  --varning: #a1341f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--bakgrund);
  color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Sidhuvud ---------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--linje);
}

.bolag strong { font-size: 1.05rem; }
.bolag .dim { margin-left: 0.6rem; }

nav { display: flex; align-items: center; gap: 1.2rem; }
nav a { color: var(--dim); padding-bottom: 2px; border-bottom: 2px solid transparent; }
nav a.aktiv { color: var(--text); border-bottom-color: var(--accent); }

nav input[type=search] {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--linje-stark);
  border-radius: 5px;
  font: inherit;
  min-width: 13rem;
}

/* --- Filterrad --------------------------------------------------------- */

.filter {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--linje);
  font-size: 0.9rem;
  color: var(--dim);
}

.filter select {
  margin-left: 0.4rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--linje-stark);
  border-radius: 5px;
  font: inherit;
  color: var(--text);
  background: var(--panel);
}

.filter .kryss { display: flex; align-items: center; gap: 0.4rem; }
.filter .knapp { color: var(--accent); }

/* --- Innehåll ---------------------------------------------------------- */

main { max-width: 66rem; margin: 0 auto; padding: 1.8rem 1.5rem; }

h1 { font-size: 1.5rem; margin: 0 0 0.2rem; }
h2 { font-size: 1.05rem; margin: 2.2rem 0 0.6rem; }

.period { margin: 0 0 1.4rem; color: var(--dim); }
.brodsmula { margin: 0 0 1rem; font-size: 0.9rem; }
.dim { color: var(--dim); }
.tomt, .hjalp { color: var(--dim); font-size: 0.9rem; }
.hjalp { margin-top: 1.6rem; }
.varning { color: var(--varning); font-weight: 600; }

/* --- Tabeller ---------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--linje);
  border-radius: 7px;
  overflow: hidden;
}

th, td { padding: 0.42rem 0.9rem; text-align: left; vertical-align: top; }
thead th {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
  border-bottom: 1px solid var(--linje-stark);
}

.tal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.datum { white-space: nowrap; color: var(--dim); font-variant-numeric: tabular-nums; }
.kontonr { font-variant-numeric: tabular-nums; color: var(--dim); }

/* Rapport: rubrik / grupp / konton / summa */

.rapport tbody.rubrik th {
  padding-top: 1.1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
  font-weight: 600;
}

.rapport tr.gruppen { cursor: pointer; }
.rapport tr.gruppen:hover { background: #f2f6fb; }
.rapport tr.gruppen.utan-konton { cursor: default; }
.rapport tr.gruppen.utan-konton:hover { background: none; }

.rapport .pil { color: var(--linje-stark); display: inline-block; transition: transform .12s; }
.rapport tbody.utfalld .pil { transform: rotate(90deg); color: var(--dim); }

.rapport tr.kontorad { display: none; background: #fafbfc; }
.rapport tbody.utfalld tr.kontorad { display: table-row; }
.rapport tr.kontorad td:first-child { padding-left: 2rem; }
.rapport tr.kontorad td { font-size: 0.9rem; }

.rapport tbody.summa td,
.rapport tbody.total td {
  border-top: 1px solid var(--linje-stark);
  font-weight: 600;
}
.rapport tbody.total td {
  border-top: 2px solid var(--linje-stark);
  border-bottom: 2px solid var(--linje-stark);
}

/* Transaktionslistor */

.transaktioner tbody tr:hover { background: #f2f6fb; }
.transaktioner tbody td { border-top: 1px solid var(--linje); font-size: 0.92rem; }
.transaktioner tfoot td { border-top: 2px solid var(--linje-stark); font-weight: 600; }
a.ver { font-variant-numeric: tabular-nums; font-weight: 600; }
.bilaga { color: var(--dim); font-size: 0.85rem; white-space: nowrap; }

/* --- Nyckeltal --------------------------------------------------------- */

.nyckeltal { display: flex; gap: 1px; margin-bottom: 1.5rem; background: var(--linje);
             border: 1px solid var(--linje); border-radius: 7px; overflow: hidden; }
.nyckeltal div { flex: 1; padding: 0.8rem 1rem; background: var(--panel); }
.nyckeltal span { display: block; font-size: 0.8rem; color: var(--dim); }
.nyckeltal strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.nyckeltal .stark strong { color: var(--accent); }

/* --- Underlag ---------------------------------------------------------- */

ul.underlag { list-style: none; margin: 0 0 1rem; padding: 0; }
ul.underlag li { padding: 0.35rem 0; border-bottom: 1px solid var(--linje); }
ul.underlag .dim { margin-left: 0.6rem; font-size: 0.85rem; }

.forhandsvisning {
  width: 100%;
  height: 78vh;
  border: 1px solid var(--linje);
  border-radius: 7px;
  background: var(--panel);
}

/* --- Sidfot ------------------------------------------------------------ */

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 66rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  color: var(--dim);
  font-size: 0.85rem;
}

footer button {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--linje-stark);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
footer button:hover { background: #eef2f7; }

.felsida { text-align: center; padding-top: 6rem; }
.felsida h1 { font-size: 3rem; color: var(--dim); }

/* --- Utskrift ---------------------------------------------------------- */

@media print {
  header, .filter, footer, .hjalp, .brodsmula { display: none; }
  body { background: #fff; }
  .rapport tr.kontorad { display: table-row; }
  table { border-radius: 0; }
}

/* --- Kundfaktura som underlag ------------------------------------------ */

.faktura { max-width: 52rem; }
.fakturahuvud { display: flex; justify-content: space-between; gap: 2rem;
                align-items: flex-start; flex-wrap: wrap; }
.fakturahuvud h1 { margin-bottom: 0.2rem; }
.fakturafakta { width: auto; border: none; background: none; }
.fakturafakta td { padding: 0.15rem 0 0.15rem 1.2rem; }

/* --- Användarväljare och adminflik -------------------------------------- */

nav .anvandare select,
.filter select { font: inherit; }

nav .anvandare select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--linje-stark);
  border-radius: 5px;
  color: var(--text);
  background: var(--panel);
}

.pling {
  display: inline-block;
  min-width: 1.2rem;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

/* --- Notiser ------------------------------------------------------------ */

.notis {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linje-stark);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--panel);
}
.notis.ok { border-left-color: #2f7a4d; }
.notis.fel { border-left-color: var(--varning); color: var(--varning); }

/* --- Status ------------------------------------------------------------- */

.status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}
.status-vantar { background: #fdf1d6; color: #7a5b12; }
.status-bokford { background: #e3f2e8; color: #235c3b; }
.status-avslagen { background: #f7e2de; color: #7d2f1e; }

.forfragningsband { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.forfragningsband li {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--linje-stark);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--panel);
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}
.forfragningsband li.status-vantar { border-left-color: #d8a520; }
.forfragningsband li.status-bokford { border-left-color: #2f7a4d; }
.forfragningsband li.status-avslagen { border-left-color: var(--varning); }

/* --- Formulär för flytt ------------------------------------------------- */

th.markering, td.markering { width: 3.6rem; text-align: center; }
td.markering input { cursor: pointer; }
.transaktioner td label { cursor: pointer; display: block; }

.begar, .beslut {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linje);
  border-radius: 7px;
  background: var(--panel);
}
.begar h2, .beslut h2 { margin-top: 0; }

.faltrad { display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; }
.begar label, .beslut label {
  display: block;
  font-size: 0.85rem;
  color: var(--dim);
  margin-top: 0.8rem;
}
.begar label.brett, .beslut label.brett { flex: 1 1 20rem; }

.begar input, .begar select, .begar textarea,
.beslut input, .beslut select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--linje-stark);
  border-radius: 5px;
  font: inherit;
  color: var(--text);
  background: var(--panel);
}
.begar textarea { resize: vertical; }

.begar button, .beslut button {
  padding: 0.45rem 1rem;
  border: 1px solid var(--linje-stark);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.begar button:hover, .beslut button:hover { background: #eef2f7; }

.beslut button.primar {
  margin-top: 0.9rem;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.beslut button.primar:hover { background: #17497f; }
.beslut .hjalp { margin-left: 0.8rem; }
.beslut .avsla {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linje);
}
.beslut .avsla button { margin-top: 0.7rem; }

.citat {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--linje-stark);
  background: var(--panel);
}

.nyckeltal a { font-weight: inherit; }

/* --- Radmarkering: flytt begärd / genomförd ----------------------------- */

.markning {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 1px;
}
a.markning { text-decoration: none; }
.markning.vantar { background: #fdf1d6; color: #7a5b12; }
.markning.bokford { background: #e3f2e8; color: #235c3b; }
.markning.avslagen { background: #f7e2de; color: #7d2f1e; }

.transaktioner td .status { margin-right: 0.35rem; }

/* --- Sidhuvud med knapp -------------------------------------------------- */

.sidhuvud { display: flex; justify-content: space-between; align-items: flex-start;
            gap: 1.5rem; flex-wrap: wrap; }
.sidhuvud .period { margin-bottom: 1rem; }

/* --- Knappar (gemensamt) ------------------------------------------------- */

button.primar, .kort-beslut button.primar, .dialog button.primar {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
button.primar:hover { background: #17497f; }
button.primar:disabled { opacity: 0.45; cursor: not-allowed; }

.knapp-liten {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--linje-stark);
  border-radius: 5px;
  background: var(--panel);
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.knapp-liten:hover { background: #eef2f7; border-color: var(--accent); }
td.atgard, th.atgard { width: 5.5rem; text-align: right; }
.transaktioner tbody tr:not(:hover) .knapp-liten { opacity: 0.55; }

button.lank {
  border: none; background: none; padding: 0; margin-left: 0.4rem;
  color: var(--accent); font: inherit; font-size: inherit; cursor: pointer;
  text-decoration: underline;
}
form.inline { display: inline; }
.liten { font-size: 0.8rem; }

/* --- Kort (förfrågningar) ------------------------------------------------ */

.kortlista { display: grid; gap: 1rem; margin-bottom: 2rem; }

.kort {
  padding: 1.1rem 1.3rem 1rem;
  background: var(--panel);
  border: 1px solid var(--linje);
  border-left: 4px solid var(--linje-stark);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 30, 45, 0.04);
}
.kort.status-vantar { border-left-color: #d8a520; }
.kort.status-bokford { border-left-color: #2f7a4d; }
.kort.status-avslagen { border-left-color: var(--varning); }

.kort-huvud { display: flex; justify-content: space-between; align-items: baseline;
              gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.kort-huvud .status { margin-right: 0.4rem; }

.kort-flytt { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin: 0.3rem 0 0.5rem; }
.kort-belopp { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
               letter-spacing: -0.01em; }
.kort-belopp .dim { font-size: 1rem; font-weight: 400; }
.kort-konton { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.kort-konton .fran, .kort-konton .till {
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background: var(--bakgrund);
  border: 1px solid var(--linje);
}
.kort-konton .till { background: #e9f1fb; border-color: #c9dbf2; font-weight: 600; }
.kort-konton .pil { color: var(--dim); font-size: 1.2rem; }

.kort-verifikat { margin: 0.2rem 0; color: var(--dim); font-size: 0.92rem; }
.kort-motivering {
  margin: 0.6rem 0;
  padding: 0.5rem 0.9rem;
  border-left: 3px solid var(--linje-stark);
  background: var(--bakgrund);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}
.kort-underlag { margin: 0.4rem 0; font-size: 0.9rem; }
.kort-underlag a { margin-right: 0.9rem; }

.kort-mail { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--dim); }
.kort-mail.fel { color: var(--varning); }

.kort-beslut {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linje);
}
.kort-beslut form.boka { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.kort-beslut label { display: block; font-size: 0.82rem; color: var(--dim); }
.kort-beslut label.vaxer { flex: 1 1 14rem; }
.kort-beslut input[type=text] {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linje-stark); border-radius: 6px;
  font: inherit; color: var(--text); background: var(--panel);
}
.kort-beslut form.boka input[name=nytt_konto] { width: 7rem; font-weight: 600; }
.kort-plan { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--dim); }
.kort-beslut details.avsla { margin-top: 0.6rem; font-size: 0.9rem; }
.kort-beslut details.avsla summary { cursor: pointer; color: var(--dim); }
.kort-beslut details.avsla form { display: flex; gap: 1rem; align-items: flex-end;
                                  flex-wrap: wrap; margin-top: 0.6rem; }
.kort-beslut details.avsla button {
  padding: 0.45rem 0.9rem; border: 1px solid var(--linje-stark); border-radius: 6px;
  background: var(--panel); color: var(--varning); font: inherit; cursor: pointer;
}
.kort-utfall { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--linje);
               font-size: 0.9rem; }

.tomt-kort {
  padding: 1.6rem;
  text-align: center;
  color: var(--dim);
  background: var(--panel);
  border: 1px dashed var(--linje-stark);
  border-radius: 8px;
  margin-bottom: 2rem;
}
.tomt-kort p { margin: 0; }

table.kompakt td { font-size: 0.88rem; padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* --- Dialogen "Flytta kostnad" ----------------------------------------- */

.dialog {
  width: min(34rem, 92vw);
  padding: 0;
  border: none;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(20, 30, 45, 0.25);
  color: var(--text);
}
.dialog::backdrop { background: rgba(20, 30, 45, 0.35); }
.flyttform { padding: 1.3rem 1.5rem 1.4rem; }
.flyttform header { display: flex; justify-content: space-between; align-items: center; }
.flyttform h2 { margin: 0; font-size: 1.2rem; }
.flyttform .stang {
  border: none; background: none; font-size: 1.5rem; line-height: 1;
  color: var(--dim); cursor: pointer; padding: 0.2rem 0.4rem;
}
.fd-sammanfattning {
  margin: 0.8rem 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--bakgrund);
  border-radius: 6px;
  line-height: 1.55;
}
.flyttform label { display: block; margin-top: 0.9rem; font-size: 0.85rem; color: var(--dim); }
.flyttform input[type=text], .flyttform textarea {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linje-stark); border-radius: 6px;
  font: inherit; color: var(--text); background: var(--panel);
}
.flyttform input[type=text]:focus, .flyttform textarea:focus {
  outline: 2px solid #c9dbf2; border-color: var(--accent);
}
.flyttform textarea { resize: vertical; }
.flyttform fieldset { margin: 0.9rem 0 0; padding: 0; border: none; }
.flyttform legend { font-size: 0.85rem; color: var(--dim); margin-bottom: 0.3rem; }
.flyttform .val {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 1.2rem 0 0; color: var(--text); font-size: 0.95rem; cursor: pointer;
}
.flyttform footer { display: flex; justify-content: space-between; align-items: center;
                    gap: 1rem; margin-top: 1.3rem; }

/* --- Inloggning (E3:s mörka profil) ------------------------------------ */

body.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #3b3b3b;
  color: #f2f2f2;
}
.loginruta {
  width: min(26rem, 100%);
  padding: 2.4rem 2.2rem 2rem;
  background: #2f2f2f;
  border: 1px solid #4a4a4a;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.loginruta .marke { margin-bottom: 1rem; }
.loginruta .over { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em;
                   text-transform: uppercase; color: #9fc7cf; }
.loginruta h1 { margin: 0.3rem 0 0.4rem; font-size: 1.45rem; color: #fff; }
.loginruta .under { margin: 0 0 1.6rem; color: #bdbdbd; font-size: 0.95rem; }
.loginruta .loginfel {
  margin: 0 0 1.2rem; padding: 0.7rem 0.9rem;
  background: #4a2b26; border: 1px solid #7d2f1e; border-radius: 6px;
  color: #ffd9d2; font-size: 0.9rem; text-align: left;
}
.ms-knapp {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1.3rem;
  background: #fff; color: #1b2027;
  border-radius: 6px; font-weight: 600; text-decoration: none;
}
.ms-knapp:hover { background: #e9f1fb; text-decoration: none; }
.loginruta .fot { margin: 1.5rem 0 0; font-size: 0.82rem; color: #9a9a9a; }
.loginruta .fot a { color: #9fc7cf; }

nav .inloggad { color: var(--dim); font-size: 0.9rem; }
nav .inloggad a { margin-left: 0.6rem; }

/* --- Undernav i administrationen --------------------------------------- */

.undernav { display: flex; gap: 1.4rem; margin: -0.4rem 0 1.4rem; border-bottom: 1px solid var(--linje); }
.undernav a { padding: 0.4rem 0 0.55rem; color: var(--dim); border-bottom: 2px solid transparent; }
.undernav a.aktiv { color: var(--text); border-bottom-color: var(--accent); }
.undernav a:hover { text-decoration: none; color: var(--text); }

.rollform select { padding: 0.25rem 0.4rem; border: 1px solid var(--linje-stark);
                   border-radius: 5px; font: inherit; background: var(--panel); }
tr.rad-vantande td { background: #fdf6e3; }

/* =======================================================================
   Mobil (PWA) – tabbar i botten, kompakt filter, rullbara tabeller
   ======================================================================= */

.tabbar { display: none; }
.filter .kort-text { display: none; }
.tabellrulle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (hover: none) {
  .transaktioner tbody tr:not(:hover) .knapp-liten { opacity: 1; }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); font-size: 15px; }

  header {
    position: sticky; top: 0; z-index: 20;
    padding: 0.6rem 1rem calc(0.6rem);
    padding-top: calc(0.6rem + env(safe-area-inset-top));
    gap: 0.6rem;
  }
  .bolag strong { font-size: 0.95rem; }
  .bolag .dim { display: none; }
  nav > a, nav .sok { display: none; }              /* huvudmenyn ersätts av tabbaren */
  nav .inloggad { font-size: 0.8rem; }
  nav .anvandare select { font-size: 0.8rem; padding: 0.2rem 0.3rem; }

  .filter {
    padding: 0.5rem 1rem;
    gap: 0.6rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
  }
  .filter label { white-space: nowrap; }
  .filter select { margin-left: 0.2rem; padding: 0.35rem 0.3rem; font-size: 0.85rem; }
  .filter .lang { display: none; }
  .filter .kort-text { display: inline; }

  main { padding: 1rem 0.9rem 1.5rem; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1rem; margin-top: 1.6rem; }
  .period { margin-bottom: 1rem; font-size: 0.9rem; }

  th, td { padding: 0.5rem 0.55rem; }
  .rapport th, .rapport td { font-size: 0.92rem; }
  .rapport .jmf { display: none; }                  /* jämförelsen får plats på desktop */
  .rapport tr.kontorad td:first-child { padding-left: 1.1rem; }
  .transaktioner tbody td { font-size: 0.88rem; }
  .transaktioner td.datum { font-size: 0.8rem; }
  table { border-radius: 6px; }

  .nyckeltal { flex-direction: column; }
  .nyckeltal div { padding: 0.6rem 0.9rem; display: flex; justify-content: space-between; align-items: baseline; }
  .nyckeltal span { font-size: 0.78rem; }
  .nyckeltal strong { font-size: 1.05rem; }

  .sidhuvud { flex-direction: column; align-items: stretch; }
  .sidhuvud button.primar { width: 100%; }

  .kort { padding: 0.9rem 1rem 0.8rem; }
  .kort-belopp { font-size: 1.35rem; }
  .kort-konton { gap: 0.5rem; }
  .kort-konton .pil { display: none; }
  .kort-konton .till::before { content: "→ "; color: var(--dim); }
  .kort-beslut form.boka { flex-direction: column; align-items: stretch; }
  .kort-beslut form.boka input[name=nytt_konto] { width: 100%; }
  .kort-beslut button.primar { width: 100%; }
  .kort-beslut .hjalp { display: block; margin: 0.5rem 0 0; }

  .dialog {
    width: 100vw; max-width: 100vw; max-height: 92vh;
    margin: auto 0 0; border-radius: 16px 16px 0 0;
    overflow-y: auto;
  }
  .flyttform { padding: 1.1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .flyttform footer { flex-direction: column-reverse; align-items: stretch; }
  .flyttform footer .primar { width: 100%; padding: 0.8rem; }

  .forhandsvisning { height: 55vh; }
  ul.underlag a { font-weight: 600; }
  .notis { font-size: 0.9rem; }
  footer { flex-direction: column; align-items: flex-start; font-size: 0.8rem; gap: 0.5rem; }

  /* Tabbar */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--panel);
    border-top: 1px solid var(--linje);
    padding: 0.35rem 0.3rem calc(0.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(20, 30, 45, 0.06);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.25rem 0; color: var(--dim); font-size: 0.68rem; font-weight: 600;
    text-decoration: none; border-radius: 8px;
  }
  .tabbar a svg { width: 22px; height: 22px; fill: currentColor; }
  .tabbar a.aktiv { color: var(--accent); }
  .tabbar a:active { background: #eef2f7; }
  .tabbar .pling { font-size: 0.6rem; min-width: 1rem; margin-left: 0.15rem; vertical-align: top; }

  .loginruta { padding: 2rem 1.4rem 1.6rem; }
}

@media (max-width: 400px) {
  .rapport th, .rapport td { font-size: 0.86rem; }
  .filter label:nth-child(3) { margin-left: -0.3rem; }
}

/* Installerad som app: dölj det som bara hör webbläsaren till */
@media (display-mode: standalone) {
  .hjalp.installera { display: none; }
}

/* Mobil: transaktionslistor som staplade rader i stället för breda tabeller */
@media (max-width: 760px) {
  .transaktioner thead { display: none; }
  .transaktioner tbody tr {
    display: block;
    padding: 0.6rem 0.85rem 0.55rem;
    border-top: 1px solid var(--linje);
  }
  .transaktioner tbody tr:first-child { border-top: none; }
  .transaktioner tbody td {
    display: inline;
    padding: 0;
    border: 0;
    font-size: 0.9rem;
    vertical-align: baseline;
  }
  .transaktioner tbody td:empty { display: none; }
  .transaktioner tbody td.datum { font-size: 0.78rem; margin-right: 0.35rem; }
  .transaktioner tbody td.text { display: block; margin: 0.15rem 0 0.25rem; line-height: 1.4; }
  .transaktioner tbody td.text label { display: inline; }
  .transaktioner tbody td.ks { display: block; font-size: 0.8rem; margin-bottom: 0.2rem; }
  .transaktioner tbody td.ks:empty { display: none; }
  .transaktioner tbody td.tal:not(:empty) {
    display: inline-block;
    margin-right: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .transaktioner tbody td.tal[data-e]:not(:empty)::before {
    content: attr(data-e) " ";
    font-weight: 400;
    color: var(--dim);
    font-size: 0.78rem;
  }
  .transaktioner tbody td.bilagor { display: inline; margin-right: 0.6rem; }
  .transaktioner tbody td.markering { display: inline-block; margin-right: 0.5rem; width: auto; }
  .transaktioner tbody td.markering input { width: 1.15rem; height: 1.15rem; vertical-align: -2px; }
  .transaktioner tbody td.atgard { display: block; text-align: right; margin-top: 0.4rem; width: auto; }
  .transaktioner tbody td.atgard .knapp-liten { padding: 0.35rem 0.9rem; font-size: 0.85rem; opacity: 1; }
  .transaktioner tbody tr.rad-vantande td { background: transparent; }
  .transaktioner tbody tr.rad-vantande { background: #fdf6e3; }
  .transaktioner tfoot td { display: inline-block; padding: 0.5rem 0.85rem; border-top: 1px solid var(--linje-stark); }
  .transaktioner tfoot td.tal[data-e]::before { content: attr(data-e) " "; font-weight: 400; color: var(--dim); }
  .transaktioner .status { margin-right: 0.3rem; }
  .filter label:nth-child(2) { font-size: 0; }          /* "Period"-etiketten behövs inte på mobil */
  .filter label:nth-child(2) select { font-size: 0.85rem; }
}
@media (max-width: 760px) {
  .sidhuvud button.primar { margin-bottom: 0.8rem; }
}

/* --- Filvisaren (underlag inne i appen) -------------------------------- */

.filhuvud { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.2rem; }
.filhuvud .tillbaka { font-weight: 600; white-space: nowrap; }
.filhuvud .filnamn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.filinfo { margin: 0 0 1rem; }
.filsidor { display: flex; flex-direction: column; gap: 0.8rem; }
.filsida, .filbild { display: block; max-width: 100%; margin: 0 auto; background: #fff;
                     border-radius: 6px; box-shadow: 0 1px 4px rgba(20, 30, 45, 0.12); }
a.knapp-visa-underlag { display: none; }

@media (max-width: 760px) {
  .forhandsvisning { display: none; }          /* iOS visar bara första sidan i en iframe */
  a.knapp-visa-underlag {
    display: block; text-align: center; margin: 0.6rem 0 0.4rem;
    padding: 0.7rem; border-radius: 6px; background: var(--accent); color: #fff;
    font-weight: 600; text-decoration: none;
  }
  main:has(.filsidor) { padding-left: 0.5rem; padding-right: 0.5rem; }
}