/* App-layout: formulär till vänster, sticky förhandsvisning till höger. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem 1rem;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  flex-wrap: wrap;
}
.brand small { color: var(--pico-muted-color); font-weight: 400; }
.topactions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.topactions input, .topactions select, .topactions button { margin: 0; width: auto; }
.topactions input#decName { min-width: 12rem; }
.topactions button { padding: .4rem .7rem; }
.themebtn { display: inline-flex; align-items: center; justify-content: center; }
.themebtn svg { display: block; }

.layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; padding: 1rem; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.formpane article { margin-bottom: 1rem; padding: .8rem 1rem; }
.formpane article > header { margin: -.8rem -1rem .8rem; padding: .5rem 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color); }
.formpane label { font-size: .85rem; }
.formpane input, .formpane textarea, .formpane select { margin-bottom: .5rem; font-size: .9rem; }
.formpane textarea { min-height: 2.2rem; }

/* 276: autosize via JS - dölj scroll, tillåt inte manuell resize (höjden styrs av innehållet) */
.formpane textarea, table.form-op textarea {
  overflow: hidden;
  resize: none;
}
.hint { display: block; color: var(--pico-muted-color); margin-top: .3rem; }

.tablewrap { overflow-x: auto; }
table.form-op { font-size: .8rem; }
table.form-op th, table.form-op td { padding: .2rem .3rem; vertical-align: middle; }
table.form-op .budcell { font-weight: 700; white-space: nowrap; font-size: .95rem; }
table.form-op input.mini { width: 3.2rem; text-align: center; margin: 0; }
table.form-op textarea { margin: 0; min-height: 1.8rem; width: 100%; }

/* 269: mobil - staplade kort istället för bred tabell. Desktop oförändrad. */
@media (max-width: 560px) {
  table.form-op thead { display: none; }
  table.form-op, table.form-op tbody { display: block; }
  table.form-op tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
    border: 1px solid var(--pico-muted-border-color); border-radius: 8px;
    padding: .55rem .6rem; margin-bottom: .6rem;
  }
  table.form-op td { display: block; border: none; padding: 0; }
  table.form-op td.budcell { font-size: 1.25rem; font-weight: 700; margin-right: auto; }
  table.form-op td.mcell {
    display: flex; align-items: center; gap: .3rem;
    font-size: .72rem; color: var(--pico-muted-color);
  }
  table.form-op td.mcell::before { content: attr(data-label); }
  table.form-op td.mcell input.mini { width: 2.8rem; }
  table.form-op td.wide { flex: 0 0 100%; }
  table.form-op td.wide::before {
    content: attr(data-label); display: block;
    font-size: .72rem; color: var(--pico-muted-color); margin-bottom: .1rem;
  }
  table.form-op td.wide textarea { width: 100%; }
}

.fbgrid { display: grid; grid-template-columns: 1fr; gap: 0; }
.fbrow { display: grid; grid-template-columns: 10rem 1fr; align-items: center; gap: .5rem; }
.fbrow .fblbl { font-weight: 600; }
.fbrow input { margin-bottom: .35rem; }
@media (max-width: 500px) { .fbrow { grid-template-columns: 1fr; } }

/* Färgpalett */
.suitpalette {
  position: sticky; top: 3.6rem; z-index: 10;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .4rem .6rem; margin-bottom: .8rem;
  background: var(--pico-card-background-color, var(--pico-background-color));
  border: 1px solid var(--pico-muted-border-color); border-radius: 8px;
}
.suitpalette .sp-lbl { font-size: .85rem; font-weight: 600; }
.suitpalette .sp-hint { font-size: .75rem; color: var(--pico-muted-color); }
.suitbtn {
  --pico-background-color: transparent;
  --pico-border-color: var(--pico-muted-border-color);
  --pico-color: var(--pico-color);
  width: 2rem; height: 2rem; margin: 0; padding: 0;
  font-size: 1.15rem; line-height: 1; border-radius: 6px;
}
.suitbtn.suit-d, .suitbtn.suit-h { --pico-color: var(--svk-red); }
.suitbtn.nt { width: auto; padding: 0 .5rem; font-size: .95rem; font-weight: 700; }
.suitbtn:hover { --pico-border-color: var(--svk-accent); }
.fourcolor-toggle {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 0 auto;
  font-size: .8rem; white-space: nowrap;
}
.fourcolor-toggle input { margin: 0; }

/* Överflödesvarning */
.warnbox {
  padding: .5rem .8rem; margin-bottom: .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--svk-warn) 18%, transparent);
  border: 1px solid var(--svk-warn); font-size: .85rem;
}

.previewbar .exactbtn { margin: 0 0 0 auto; padding: .4rem .7rem; }
.previewpane { position: sticky; top: 4rem; align-self: start; }
.previewbar { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.previewbar .pdfbtn { margin: 0; width: auto; padding: .4rem .9rem; }
#previewFrame { width: 100%; height: 78vh; border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px; background: #e9e9ef; }
@media (max-width: 900px) { .previewpane { position: static; } #previewFrame { height: 60vh; } }

/* Färgsymboler i formuläret. Tvåfärg som default (läsbart mot Pico-färgen). */
.suit-d, .suit-h { color: var(--svk-red); }
.suit-c, .suit-s { color: var(--pico-color); }

/* Fyrfärgslek i editorn: följer samma toggle och SBF-schema som panel/PDF
   (klöver grön, ruter orange, hjärter röd, spader blå). */
body.fourcolor .suit-c { color: #1f7a44; }
body.fourcolor .suit-d { color: #d97706; }
body.fourcolor .suit-h { color: #c23b30; }
body.fourcolor .suit-s { color: #2059a8; }

/* Palettknapparna (.suitbtn) styrs via --pico-color, annars vinner Pico. */
body.fourcolor .suitbtn.suit-c { --pico-color: #1f7a44; }
body.fourcolor .suitbtn.suit-d { --pico-color: #d97706; }
body.fourcolor .suitbtn.suit-h { --pico-color: #c23b30; }
body.fourcolor .suitbtn.suit-s { --pico-color: #2059a8; }

/* Mörkt läge: mörkblå/mörkgrön ger för dålig kontrast mot editorns mörka
   bakgrund - ljusare SBF-tolkning i stället. Panel/PDF påverkas inte
   (papper är alltid vitt), bara editorns etiketter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body.fourcolor .suit-c { color: #3fa06a; }
  :root:not([data-theme]) body.fourcolor .suit-d { color: #e8991f; }
  :root:not([data-theme]) body.fourcolor .suit-h { color: #e0655a; }
  :root:not([data-theme]) body.fourcolor .suit-s { color: #5b9bd5; }
  :root:not([data-theme]) body.fourcolor .suitbtn.suit-c { --pico-color: #3fa06a; }
  :root:not([data-theme]) body.fourcolor .suitbtn.suit-d { --pico-color: #e8991f; }
  :root:not([data-theme]) body.fourcolor .suitbtn.suit-h { --pico-color: #e0655a; }
  :root:not([data-theme]) body.fourcolor .suitbtn.suit-s { --pico-color: #5b9bd5; }
}
:root[data-theme="dark"] body.fourcolor .suit-c { color: #3fa06a; }
:root[data-theme="dark"] body.fourcolor .suit-d { color: #e8991f; }
:root[data-theme="dark"] body.fourcolor .suit-h { color: #e0655a; }
:root[data-theme="dark"] body.fourcolor .suit-s { color: #5b9bd5; }
:root[data-theme="dark"] body.fourcolor .suitbtn.suit-c { --pico-color: #3fa06a; }
:root[data-theme="dark"] body.fourcolor .suitbtn.suit-d { --pico-color: #e8991f; }
:root[data-theme="dark"] body.fourcolor .suitbtn.suit-h { --pico-color: #e0655a; }
:root[data-theme="dark"] body.fourcolor .suitbtn.suit-s { --pico-color: #5b9bd5; }

/* Spinner + toast */
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -.15em; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(2rem);
  padding: .6rem 1.1rem; border-radius: 8px; color: #fff; opacity: 0; pointer-events: none;
  transition: all .25s; z-index: 50; font-size: .9rem; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { background: var(--svk-ok); }
#toast.err { background: var(--svk-err); }