/* Planbo · Bokföring. Ett avgränsat arbetslager över appens gemensamma komponenter.
   Alla färger följer semantiska tokens i ljust och mörkt läge. */
@media screen {
  #bokfInnehall { min-width:0; }
  #bokfInnehall .bokf-connection-details { margin-top:8px; }
  #bokfInnehall .bokf-connection-details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--brand); font-size:13px; font-weight:600; }
  #bokfInnehall .bokf-connection-details summary::before { content:"+"; margin-right:8px; }
  #bokfInnehall .bokf-connection-details[open] summary::before { content:"−"; }
  #bokfInnehall > .card { margin-bottom:16px; }
  #bokfInnehall :is(h2,h3) { line-height:1.35; }
  #bokfInnehall h2 { font-size:19px; font-weight:600; letter-spacing:-.025em; }
  #bokfInnehall :is(.help,.t-cat) { line-height:1.65; }
  #bokfInnehall :is(button,select,input:not([type=checkbox]):not([type=radio])),
  #bokfVerktyg button { min-height:44px; }
  #bokfInnehall :is(button,select,input,summary):focus-visible,
  #bokfVerktyg button:focus-visible {
    outline:2px solid var(--brand); outline-offset:3px;
  }
  #bokfInnehall :is(input[type=checkbox],input[type=radio]),
  .modal:has(#bfRader) input[type=checkbox] { width:18px; height:18px; flex-shrink:0; accent-color:var(--fyll); }
  #bokfInnehall label:has(> input[type=checkbox]) { min-height:44px; }
  #bokfInnehall .bokf-nav {
    display:flex; align-items:stretch; gap:4px; flex-wrap:wrap; width:fit-content;
    max-width:100%; padding:4px; margin:24px 0 16px;
    background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-sm);
  }
  #bokfInnehall .bokf-nav button {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:44px; padding:10px 16px; border:1px solid transparent;
    border-radius:8px; background:transparent; color:var(--muted); box-shadow:none;
    font:inherit; font-size:13px; font-weight:500; line-height:1.4; cursor:pointer;
  }
  #bokfInnehall .bokf-nav button:hover { color:var(--ink); background:var(--hover); }
  #bokfInnehall .bokf-nav button[aria-pressed=true] {
    color:var(--brand); background:var(--card); border-color:var(--line); font-weight:600;
  }
  #bokfInnehall .bokf-nav .badge {
    position:static; min-width:22px; padding:2px 6px; border-radius:6px;
    background:var(--brand-soft); color:var(--brand); font-size:11px; line-height:1.5;
    font-variant-numeric:tabular-nums;
  }
  #bokfInnehall .bokf-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
  #bokfInnehall .bokf-stat {
    display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0;
    padding:20px 24px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  }
  #bokfInnehall .bokf-stat strong {
    display:block; color:var(--ink); font-size:clamp(24px,2.4vw,32px); line-height:1.2;
    font-weight:550; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
  }
  #bokfInnehall .bokf-stat span { color:var(--muted); font-size:13px; line-height:1.5; }
  #bokfInnehall .bokf-next {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
    margin:16px 0; padding:20px 24px; background:var(--brand-soft); color:var(--ink);
    border:1px solid var(--brand-kant,var(--line)); border-radius:var(--radius);
    font-size:14px; line-height:1.6;
  }
  #bokfInnehall .bokf-next > div { min-width:0; flex:1 1 240px; }
  #bokfInnehall .bokf-next :is(p,h3) { margin:0; }
  #bokfInnehall .bokf-next p + p { margin-top:4px; }
  #bokfInnehall .bokf-table { width:100%; border-collapse:collapse; }
  #bokfInnehall .bokf-table :is(td,th) { padding:16px 12px; vertical-align:top; }
  #bokfInnehall .bokf-table :is(td,th).num { white-space:nowrap; font-variant-numeric:tabular-nums; }
  #bokfInnehall .bokf-table td b { font-weight:600; }
  #bokfInnehall .bokf-table td .t-cat { margin-top:4px; white-space:normal; overflow-wrap:anywhere; }
  #bokfInnehall .bokf-table .t-fast { position:static; width:auto; min-width:0; white-space:normal; }
  #bokfInnehall .bokf-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  #bokfInnehall .bokf-actions .btn { white-space:nowrap; }
  #bokfInnehall .bokf-table tbody tr:focus-within td { background:var(--field); }
  #bokfInnehall select { max-width:100%; color:var(--ink); background-color:var(--field); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font:inherit; }
  #bokfInnehall details > summary { cursor:pointer; min-height:44px; padding-block:12px; color:var(--ink-2); font-size:13px; }
  #bokfInnehall .empty { padding-block:40px; }
  #bokfInnehall [aria-busy=true] { color:var(--muted); }

  /* Fördelningen hör till bokföringen men ligger i den gemensamma dialogen. */
  .modal:has(#bfRader) { width:min(760px,100%); }
  .modal:has(#bfRader) .modal-body { min-width:0; }
  .modal:has(#bfRader) #bfRader { display:grid; gap:12px; margin-block:16px; }
  .modal:has(#bfRader) .bf-row {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,.42fr) auto;
    gap:12px; align-items:end; margin:0; padding:16px; background:var(--soft);
    border:1px solid var(--line); border-radius:var(--radius-sm);
  }
  .modal:has(#bfRader) :is(.bf-choice,.bf-amount) { min-width:0; margin:0; }
  .modal:has(#bfRader) .bf-row label { display:block; margin:0 0 6px; color:var(--ink-2); font-size:12px; font-weight:500; line-height:1.5; }
  .modal:has(#bfRader) .bf-row :is(input:not([type=checkbox]),select) {
    display:block; width:100%; min-width:0; min-height:44px; box-sizing:border-box;
    padding:10px 12px; border:1px solid var(--line); border-radius:8px;
    background:var(--card); color:var(--ink); font:inherit; font-size:14px;
  }
  .modal:has(#bfRader) .bf-amount input { text-align:right; font-variant-numeric:tabular-nums; }
  .modal:has(#bfRader) .bf-registration { grid-column:1/-1; border-top:1px solid var(--line); padding-top:12px; }
  .modal:has(#bfRader) .bf-registration > label { display:flex; align-items:center; gap:8px; min-height:44px; margin:0; font-size:13px; cursor:pointer; }
  .modal:has(#bfRader) .bf-registration > label:has(input:disabled) { color:var(--muted); cursor:default; }
  .modal:has(#bfRader) .bf-registration > .field { width:min(100%,220px); margin:8px 0 0; }
  .modal:has(#bfRader) .bf-registration > .help { margin:8px 0 0; }
  .modal:has(#bfRader) .bf-registration [hidden] { display:none !important; }
  .modal:has(#bfRader) .bf-registration input[type=checkbox] { width:18px; height:18px; min-height:18px; padding:0; margin:0; flex-shrink:0; }
  #bokfInnehall .bokf-pages { margin-top:16px; align-items:center; }
  #bokfInnehall .bokf-pages span { flex:1; color:var(--muted); font-size:13px; }
  .modal:has(#bfRader) .bf-remove { grid-column:3; grid-row:1; min-height:44px; align-self:end; }
  .modal:has(#bfRader) :is(input,select,button):focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
  .modal:has(#bfRader) #bfSumma {
    padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--soft); color:var(--ink); font-size:14px; line-height:1.6; font-variant-numeric:tabular-nums;
  }
  .modal:has(#bfRader) #bfForslag { line-height:1.7; }
  .modal:has(#bfRader) #bfForslag .btn { min-height:44px; margin:4px 4px 4px 0; white-space:normal; text-align:left; }
  .modal:has(#bfRader) .modal-foot .btn { min-height:44px; }

  @media (max-width:760px) {
    #bokfInnehall .bokf-summary { gap:8px; }
    #bokfInnehall .bokf-stat { padding:16px 12px; gap:6px; }
    #bokfInnehall .bokf-stat strong { font-size:24px; }
    #bokfInnehall .bokf-stat span { font-size:12px; }
    #bokfInnehall .bokf-next { padding:16px; }
    /* Beslut 505: fyra flikar, två och två. */
    #bokfInnehall .bokf-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; box-sizing:border-box; }
    #bokfInnehall .bokf-nav button { padding:8px; flex-wrap:wrap; gap:4px; }
    #bokfInnehall .card-scroll:has(.bokf-table) { overflow:visible; }
    #bokfInnehall .bokf-table { display:block; min-width:0; }
    #bokfInnehall .bokf-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
    #bokfInnehall .bokf-table tbody { display:grid; gap:12px; }
    #bokfInnehall .bokf-table tbody tr { display:grid; min-width:0; padding:12px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); }
    #bokfInnehall .bokf-table tbody td {
      display:grid; grid-template-columns:80px minmax(0,1fr); column-gap:12px;
      min-width:0; padding:8px 0; border:0; background:transparent; text-align:left; white-space:normal;
    }
    #bokfInnehall .bokf-table tbody td::before { content:attr(data-label); color:var(--muted); font-size:12px; font-weight:500; line-height:1.6; }
    #bokfInnehall .bokf-table tbody td > * { min-width:0; }
    #bokfInnehall .bokf-table tbody td > :nth-child(n+2) { grid-column:2; }
    #bokfInnehall .bokf-table tbody td.num { white-space:normal; }
    #bokfInnehall .bokf-table tbody td[data-label=""] { display:block; padding-top:12px; border-top:1px solid var(--line); margin-top:4px; }
    #bokfInnehall .bokf-table tbody td[data-label=""]::before { display:none; }
    #bokfInnehall .bokf-actions .btn { flex:1 1 auto; }
    .modal:has(#bfRader) .bf-row { grid-template-columns:minmax(0,1fr) auto; padding:12px; }
    .modal:has(#bfRader) .bf-choice { grid-column:1/-1; }
    .modal:has(#bfRader) .bf-remove { grid-column:2; grid-row:2; }
    .modal:has(#bfRader) .bf-row :is(input:not([type=checkbox]),select) { font-size:16px; }
  }
  @media (max-width:380px) {
    #bokfInnehall .bokf-summary { grid-template-columns:1fr; }
    #bokfInnehall .bokf-stat { flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px; }
    #bokfInnehall .bokf-stat span { text-align:right; }
    #bokfInnehall .bokf-nav button { font-size:12px; }
  }
}

/* Kostnadsställen: tydlig arbetsyta för stora kontokartor, även med långa namn. */
@media screen {
  #bokfInnehall .bokf-dim-head { border-top:3px solid var(--brand); }
  #bokfInnehall .bokf-dim-progress { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
  #bokfInnehall .bokf-dim-progress .help { margin:0; }
  #bokfInnehall .bokf-dim-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
  #bokfInnehall .bokf-dim-heading :is(h2,p) { margin:0; }
  #bokfInnehall .bokf-dim-heading p { margin-top:4px; }
  #bokfInnehall .bokf-dim-help { margin-top:12px; border-bottom:1px solid var(--line); }
  #bokfInnehall .bokf-dim-help p { max-width:78ch; margin:0 0 16px; }
  #bokfInnehall .bokf-dim-tools { display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding-block:20px; }
  #bokfInnehall .bokf-dim-tools .field { flex:1 1 200px; margin:0; }
  #bokfInnehall .bokf-dim-tools .field:first-child { flex:2 1 260px; }
  #bokfInnehall .bokf-dim-tools :is(input,select) { width:100%; box-sizing:border-box; }
  #bokfInnehall .bokf-dim-tools p { margin:0; padding-block:12px; font-variant-numeric:tabular-nums; }
  #bokfInnehall .bokf-dim-map td select { min-width:160px; width:100%; }
  #bokfInnehall .bokf-dim-map .bokf-actions .t-cat { flex:1 1 100%; margin:0 0 4px; }
  #bokfInnehall .bokf-dim-empty { text-align:center; padding:32px 16px; background:var(--soft); border:1px dashed var(--line); border-radius:var(--radius-sm); }
  #bokfInnehall .bokf-dim-empty h3 { margin:0; }
  #bokfInnehall .bokf-dim-empty p { margin:8px 0 16px; }
  @media(max-width:760px) {
    #bokfInnehall .bokf-dim-map td select { min-width:0; font-size:16px; }
    #bokfInnehall .bokf-dim-heading > .btn { width:100%; }
    #bokfInnehall .bokf-dim-map .bokf-table tbody td { grid-template-columns:96px minmax(0,1fr); }
    #bokfInnehall .bokf-dim-tools { gap:12px; }
    #bokfInnehall .bokf-dim-tools p { flex-basis:100%; padding:0; }
  }
}

@media screen {
  #bokfInnehall .bokf-dim-swipe { display:none; }
  #bokfInnehall .bokf-dim-hus:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
  @media(max-width:760px) {
    #bokfInnehall .bokf-dim-swipe { display:block; margin:0 0 8px; }
    #bokfInnehall .bokf-dim-hus :is(td,th):first-child { position:sticky; left:0; z-index:1; background:var(--card); box-shadow:1px 0 var(--line); min-width:120px; }
  }
}