/* kb panel - detail view (side panel B, dialog A). Mockup 07-detalje.html, without its tool-coloured header:
   tools have no colour, the sweep behind the title is the primary colour. Markup is built by panel.js.
   The dialog variant also carries .kb-dialog (box, backdrop, open animation) from dialog.css.
   Side mode docks at the right inside the workspace: panel.js adds html.kb-panel-docked, which sets
   --kb-panel-inset; shell.css adds that inset to the right padding of .kb-main so the list stays visible.
   Motion lives in no-preference only; reduced motion gets plain open/close/swap. */
@layer kb.components {
  :root {
    --kb-panel-w: clamp(380px, 42vw, 520px);
  }
  @media (min-width: 1900px) {
    :root { --kb-panel-w: 720px; }
  }

  html.kb-panel-docked {
    --kb-panel-inset: calc(var(--kb-panel-w) + 16px);
  }
  /* below 769 px the panel covers the screen: nothing to make room for, and the page behind does not scroll */
  @media (max-width: 768px) {
    html.kb-panel-docked {
      --kb-panel-inset: 0px;
      overflow: hidden;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .kb-main { transition: padding-inline-end .42s var(--kb-ease-out); }
  }

  /* ---------- the box ---------- */
  .kb-panel {
    box-sizing: border-box;
    color: var(--kb-text);
    font: inherit;
  }
  .kb-panel *, .kb-panel *::before, .kb-panel *::after { box-sizing: border-box; }

  .kb-panel--side {
    position: fixed;
    z-index: 40;           /* under the topbar (50), so its menus open over the panel */
    top: var(--kb-panel-top, 16px);
    right: 16px;
    bottom: 16px;
    width: var(--kb-panel-w);
    background: var(--kb-card);
    border-radius: var(--kb-radius-card);
    box-shadow: var(--kb-shadow);
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .kb-panel--side {
      z-index: 90;          /* over the topbar, under the off-canvas menu (100) */
      inset: 0;
      width: auto;
      border-radius: 0;
      box-shadow: none;
    }
  }

  .kb-dialog.kb-panel-dialog {
    width: min(640px, calc(100vw - 32px));
  }

  .kb-panel__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  .kb-panel-dialog .kb-panel__inner { max-height: calc(100dvh - 32px); }

  /* ---------- head ---------- */
  .kb-panel__head {
    position: relative;
    overflow: hidden;
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--kb-line);
  }
  /* soft primary sweep behind the title; static and very faint without motion */
  .kb-panel__head::before {
    content: "";
    position: absolute;
    inset: 0 -40px;
    opacity: .1;
    background: linear-gradient(100deg, var(--kb-primary), transparent 85%);
    transform: skewX(var(--kb-skew));
    pointer-events: none;
  }
  .kb-panel__heading { position: relative; min-width: 0; flex: 1; }
  .kb-panel__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .kb-panel__title:focus { outline: none; }  /* programmatic focus target, not a control */
  .kb-panel__subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--kb-text-muted);
    overflow-wrap: anywhere;
  }
  .kb-panel__subtitle[hidden] { display: none; }

  .kb-panel__nav {
    position: relative;
    flex: none;
    display: flex;
    gap: 4px;
  }
  .kb-panel__icon-btn {
    width: 32px;
    height: 32px;
    padding: 0 !important;           /* !important: unlayered legacy CSS styles plain `button` (display, padding) */
    display: grid !important;
    place-items: center;
    border: 0;
    border-radius: var(--kb-radius);
    background: transparent;
    color: var(--kb-text-muted);
    cursor: pointer;
    font: inherit;
  }
  .kb-panel__icon-btn svg { width: 18px; height: 18px; }
  .kb-panel__icon-btn:hover:not(:disabled) { background: var(--kb-hover); color: var(--kb-text); }
  .kb-panel__icon-btn:disabled { opacity: .4; cursor: default; }
  .kb-panel__icon-btn:focus-visible {
    outline: 2px solid var(--kb-focus-ring);
    outline-offset: 2px;
  }

  /* ---------- body ---------- */
  .kb-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 18px;
  }
  .kb-panel__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

  /* content helpers for pages (mockup: .kv, .sec, .tl) */
  .kb-panel__kv {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 18px;
    margin: 0 0 14px;
  }
  .kb-panel__kv dt { color: var(--kb-text-muted); }
  .kb-panel__kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .kb-panel__sec {
    margin: 12px 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kb-text-muted);
  }
  .kb-panel__tl { list-style: none; margin: 0; padding: 0; }
  .kb-panel__tl li { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; }
  .kb-panel__tl li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--kb-primary);
  }
  .kb-panel__tl li.is-past::before { background: var(--kb-text-muted); }
  .kb-panel__tl small { color: var(--kb-text-muted); }

  /* ---------- foot ---------- */
  .kb-panel__foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--kb-line);
  }
  .kb-panel__keys {
    margin-right: auto;
    font-size: 12px;
    color: var(--kb-text-muted);
  }
  .kb-panel__keys kbd {
    font: inherit;
    padding: 0 5px;
    border: 1px solid var(--kb-line-strong);
    border-radius: 3px;
  }
  .kb-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
  }
  .kb-panel__actions:empty { display: none; }
  @media (max-width: 768px) {
    .kb-panel__keys { display: none; }                      /* touch-sized screens: no keyboard hint */
    .kb-panel__foot:not(.has-actions) { display: none; }
    .kb-panel__actions { flex: 1; }
  }

  /* ---------- kb.select inside the panel ----------
     The body scrolls, so an absolutely placed dropdown would be clipped and would grow the scroll area. Fixed escapes both
     (in side and dialog mode); panel.js gives it left / width / top or bottom from the trigger while it is open. */
  .kb-panel .kb-select__panel,
  .kb-panel .kb-select__more { position: fixed; }

  /* ---------- selected row ---------- */
  .kb-row--selected {
    background: var(--kb-chip);
    scroll-margin-block: 56px;
  }
  tr.kb-row--selected > :first-child { box-shadow: inset 3px 0 0 var(--kb-status-new); }
  :not(tr).kb-row--selected { box-shadow: inset 3px 0 0 var(--kb-status-new); }

  /* ---------- motion ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .kb-panel[open] .kb-panel__head::before,
    .kb-panel--side .kb-panel__head::before {
      transform: translateX(-100%) skewX(var(--kb-skew));
      animation: kb-panel-sweep .6s var(--kb-ease-out) .08s forwards;
    }
    .kb-row--selected { transition: background-color .15s; }
    .kb-panel__icon-btn { transition: background-color .2s, color .2s; }
  }
  @keyframes kb-panel-sweep { to { transform: translateX(0) skewX(var(--kb-skew)); } }
}