/* Planbo · kundens arbetsyta. Visuell förfining, utan ändrad funktion eller data.
   Färger ärver appens semantiska tokens, inklusive nattläge. Utskrift berörs inte. */
@media screen {
  /* Navigation: läsbara avdelningar och tydlig position utan visuell tyngd. */
  .sidebar .nav-rubrik {
    min-height: 36px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .045em;
    color: var(--ink-2);
  }
  .sidebar .nav-sek:not(.forsta) { margin-top: 12px; }
  .sidebar .nav-item { line-height: 1.4; }
  .sidebar .nav-item.active { font-weight: 600; }
  .sidebar .nav-item:not(.active):hover { color: var(--ink); }
  .nav-scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .nav-fot-knapp { font-size: 12px; color: var(--muted); }

  /* Skannbar text: hjälp och tabellhuvuden måste också vara läsbara. */
  .main .help, .modal .help { line-height: 1.65; }
  .main .card-h3 { line-height: 1.4; }
  .page-head .sub { line-height: 1.65; max-width: 86ch; }
  .stat .val, .cell, .num, .fc-readout-value { font-variant-numeric: tabular-nums; }
  .stat .label { font-size: 12px; letter-spacing: .01em; }
  .main .card.stat .meta { font-size: 12px; }

  /* Konsekvent feedback även i mindre använda verktyg och dialoger. */
  :is(.btn, .icon-btn, .las-btn, .seg button, .lib-chip, .ov-knapp) {
    transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
  }
  :is(.btn, .icon-btn, .las-btn, .seg button, .lib-chip, .nav-item,
      .nav-rubrik, .nav-fot-knapp, .grp-tog, .t-namn-knapp,
      .ov-knapp, summary):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
  }
  .sidebar :is(.nav-item, .nav-rubrik, .nav-fot-knapp):focus-visible {
    outline-offset: -2px;
  }
  .btn { justify-content: center; line-height: 1.4; }
  .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
  .icon-btn:hover { background: var(--hover); color: var(--ink); }
  .icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
  .btn:disabled, .icon-btn:disabled { cursor: not-allowed; transform: none; }
  .row-actions:focus-within { opacity: 1; }

  /* Formulär: neutralt grundläge, skarp fokusmarkering och synligt läsläge. */
  .field :is(input, select, textarea), .lib-search, .cell {
    color: var(--ink);
    background-color: var(--field);
    border-color: var(--line);
    line-height: 1.45;
  }
  .field textarea { resize: vertical; }
  .field label { line-height: 1.45; }
  .field input::placeholder, .field textarea::placeholder, .lib-search::placeholder {
    color: var(--muted);
    opacity: 1;
  }
  :is(.field input, .field select, .field textarea, .lib-search, .cell):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-color: var(--brand);
    box-shadow: none;
    animation: none;
  }
  .field :is(input, textarea)[readonly] { background: var(--soft); }
  .field :is(input, select, textarea):disabled { cursor: not-allowed; }
  .field :is(input, select, textarea):user-invalid { border-color: var(--danger); }
  .field input:is([type=checkbox], [type=radio]) { accent-color: var(--fyll); }

  /* Tät information: större etiketter, tydlig sortering och orörd statusfärg. */
  .main table th { font-size: 11px; letter-spacing: .035em; line-height: 1.5; }
  .main table td { line-height: 1.5; }
  .main table th.sortable[aria-sort]:not([aria-sort=none]) { color: var(--brand); }
  .main table .t-name { font-weight: 550; }
  .t-namn-knapp { text-underline-offset: 4px; }
  .main .card-scroll { overscroll-behavior-x: contain; }
  .main .card-scroll:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
  }
  .main .grp-tog { min-height: 28px; }
  .seg { padding: 3px; gap: 2px; background: var(--soft); border-radius: 11px; }
  .seg button { border-radius: 7px; font-weight: 500; line-height: 1.4; }
  .seg button.active { background: var(--fyll); color: var(--pa-fyll); }
  .seg button:not(.active):hover { background: var(--hover); color: var(--ink); }

  /* Dialogen behåller rubrik och beslut inom räckhåll när formuläret rullas. */
  .modal-bg { background: rgb(16 20 19 / 38%); backdrop-filter: blur(5px); }
  .modal-bg .modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    border: 1px solid var(--line);
  }
  .modal-head, .modal-foot { flex-shrink: 0; background: var(--card); }
  .modal-head { gap: 16px; }
  .modal-head h3 { line-height: 1.35; font-weight: 550; }
  .modal-body {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .modal-foot { align-items: center; gap: 8px; }
  .empty { padding: clamp(32px, 5vw, 56px) 24px; }
  .empty h3 { font-size: 18px; font-weight: 550; line-height: 1.4; }
  .empty p { max-width: 52ch; margin-inline: auto; line-height: 1.7; }
  .empty .btn { margin-top: 8px; }
  .client-dock { display: none; }
  .client-skip {
    position: fixed; top: 8px; left: 16px; z-index: 100;
    padding: 12px 16px; border-radius: 10px;
    background: var(--fyll); color: var(--pa-fyll); transform: translateY(-160%);
  }
  .client-skip:focus { transform: none; outline: 2px solid var(--brand); outline-offset: 3px; }
  .doc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
  .doc-search {
    flex: 1 1 240px; min-width: 0; padding: 11px 13px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--field); color: var(--ink); font: inherit;
  }
  .doc-search:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .doc-summary { color: var(--muted); font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums; }
  .kom-next { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

  @media (max-width: 860px) {
    #app .main { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
    .client-dock {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
      padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line); background: var(--card);
    }
    .client-dock-item {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 4px; min-height: 52px; padding: 6px 4px; border: 0; border-radius: 10px;
      background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 500;
    }
    .client-dock-item svg { width: 20px; height: 20px; }
    .client-dock-item[aria-current=page] { color: var(--brand); background: var(--brand-soft); }
    .client-dock-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    body:has(.client-dock) #demoBadge { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
    .doc-tools { gap: 8px; }
    .doc-search { flex-basis: 100%; font-size: 16px; }
    .kom-next .btn { width: 100%; }
    .sidebar .nav-rubrik { min-height: 44px; font-size: 12px; }
    .sidebar .nav-item { min-height: 46px; }
    .main .toolbar { row-gap: 8px; }
    .main .toolbar .btn { white-space: normal; }
    .main .seg { max-width: 100%; flex-wrap: wrap; }
    .main .seg button { min-height: 38px; }
    .main .comp-tools .lib-search { min-width: 0; flex-basis: 100%; }
    .field :is(input, select, textarea), .lib-search { font-size: 16px; }
    .field :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 44px; }
    .modal-bg { padding: 12px 8px; }
    .modal-bg .modal { max-height: calc(100dvh - 24px); border-radius: 18px; }
    .modal-head { padding: 18px 20px; }
    .modal-body { padding: 20px; }
    .modal-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
    .modal-foot .btn { min-height: 44px; }
    .empty { padding-inline: 20px; }
    .main table[data-stack] .t-name { font-size: 14px; }
    .row-actions { opacity: 1; }
  }
  @media (hover: none) {
    .row-actions, .pf-row .btn.sm { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.btn, .icon-btn, .las-btn, .seg button, .lib-chip, .ov-knapp) { transition: none; }
  }
}

@media screen {
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
  .table-sort { display:inline-flex; align-items:center; gap:4px; padding:4px 0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; text-align:inherit; cursor:pointer; }
  .table-sort:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:2px; }
  .doc-metrics { gap:12px; }
  .doc-metrics .card.stat { padding:14px 18px; }
  .doc-metrics .val { font-size:22px; }
  [data-doc-group][hidden], [data-doc-search][hidden], .doc-lager-tr[hidden] { display:none!important; }
}

/* Levande arbetsyta: menyn ligger still, innehållet visar vart man kommit. */
@media screen {
 #main{view-transition-name:planbo-content}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 @media(prefers-reduced-motion:no-preference){
  ::view-transition-old(planbo-content){animation:clientViewOut 130ms ease-out both}
  ::view-transition-new(planbo-content){animation:clientViewIn 300ms cubic-bezier(.22,1,.36,1) both}
  @keyframes clientViewOut{to{opacity:0;transform:translateY(-4px)}}
  @keyframes clientViewIn{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}
  .nav-item.active .ico{animation:clientNavIn 240ms cubic-bezier(.22,1,.36,1)}
  @keyframes clientNavIn{from{transform:scale(.86)}to{transform:scale(1)}}
  .fc-tooltip:not([hidden]){animation:clientTipIn 150ms ease-out}
  @keyframes clientTipIn{from{opacity:.5;translate:0 4px}to{opacity:1;translate:0 0}}
  .fc-cursor circle{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--brand),transparent 65%))}
  .fc-cursor.negative circle{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--danger),transparent 65%))}
  :is(.btn,.icon-btn,.client-dock-item,.t-namn-knapp){transition:background-color 160ms,color 160ms,border-color 160ms,box-shadow 200ms,transform 180ms cubic-bezier(.22,1,.36,1)}
  .client-dock-item:active{transform:scale(.95)}
  .btn:active:not(:disabled),.icon-btn:active:not(:disabled){transform:scale(.98)}
  @media(hover:hover) and (pointer:fine){
   .main .card.stat[onclick],.main .card.stat[role=button]{transition:transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms,border-color 200ms}
   .main .card.stat[onclick]:hover,.main .card.stat[role=button]:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-kant)}
   .main .btn:hover:not(:disabled),.modal .btn:hover:not(:disabled){transform:translateY(-1px)}
   .main .icon-btn:hover:not(:disabled){transform:translateY(-1px)}
   .nav-item .ico{transition:transform 200ms cubic-bezier(.22,1,.36,1)}
   .nav-item:hover .ico{transform:translateX(2px)}
  }
 }
 @media(prefers-reduced-motion:reduce){
  ::view-transition-old(planbo-content),::view-transition-new(planbo-content){animation:none!important}
 }
}
@media screen {
 /* Mobilens fasta reglage ligger ovanför huvudytans ögonblicksbild även under bytet. */
 .client-dock{view-transition-name:planbo-dock}
 ::view-transition-group(planbo-content){z-index:1}
 ::view-transition-group(planbo-dock){z-index:2;animation:none}
 ::view-transition-old(planbo-dock){animation:none;opacity:0}
 ::view-transition-new(planbo-dock){animation:none}
}