/* ==========================================================================
   Szkielet aplikacji: sidebar · topbar · treść · nawigacja mobilna
   ========================================================================== */
@layer rp-layout {

  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100dvh;
    transition: grid-template-columns var(--dur-3) var(--ease-out);
  }
  :root[data-sidebar="rail"] .app { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }

  .main-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
  }

  /* ------------------------------------------------------------------
     SIDEBAR
     ------------------------------------------------------------------ */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow: hidden;
  }

  .sb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    height: var(--topbar-h);
    padding: 0 var(--s-3) 0 var(--s-5);
    flex-shrink: 0;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border-radius: var(--r-sm);
    color: var(--text);
  }
  .brand-mark { width: 30px; height: 30px; }
  .brand-word {
    font-family: var(--font-display);
    font-size: 1.22rem;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    & span { font-weight: 500; color: var(--text-2); }
    & b { font-weight: 700; }
  }

  .sb-search {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 var(--s-3) var(--s-2);
    height: 38px;
    padding: 0 var(--s-2) 0 var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-3);
    font-size: var(--fs-13);
    text-align: left;
    flex-shrink: 0;
    transition: border-color var(--dur-1), background var(--dur-1);
    &:hover { border-color: var(--border-strong); color: var(--text-2); }
    & .sb-label { flex: 1; }
    & kbd { font-size: 0.66rem; }
  }

  .sb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--s-1) var(--s-3) var(--s-4);
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }

  .sb-section { margin-top: var(--s-4); }
  .sb-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    padding: 0 var(--s-3);
    color: var(--text-3);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sb-list, .sb-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
  .sb-row { position: relative; }

  .sb-item {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 40px;
    padding: 0 var(--s-3);
    border-radius: var(--r-md);
    color: var(--text-2);
    font-size: var(--fs-14);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    transition: color var(--dur-1), background-color var(--dur-1);

    &:hover { background: var(--surface-3); color: var(--text); }
    &[aria-current="page"], &.is-active { color: var(--accent-ink); font-weight: 650; }
    &[aria-current="page"] .sb-ico, &.is-active .sb-ico { color: var(--accent); }
  }

  /* Element „pigułki” aktywnej pozycji — animowany przez View Transitions */
  .sb-active-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--accent-soft);
    view-transition-name: nav-active;
    &::before {
      content: "";
      position: absolute;
      left: -12px;
      top: 9px;
      bottom: 9px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--accent);
    }
  }

  .sb-ico {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--text-3);
    transition: color var(--dur-1);
    & svg { width: 20px; height: 20px; }
  }
  .sb-item:hover .sb-ico { color: var(--text-2); }

  .sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  .sb-meta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }

  .sb-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 0.7rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    &[data-tone="warn"] { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
    &[data-tone="danger"] { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
    &[data-tone="accent"] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
  }

  .sb-new {
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--violet-soft);
    color: var(--violet);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .sb-chevron {
    display: grid;
    place-items: center;
    width: 18px;
    color: var(--text-3);
    transition: transform var(--dur-2) var(--ease-out);
    & svg { width: 16px; height: 16px; }
  }
  .sb-group.is-open > .sb-item .sb-chevron { transform: rotate(90deg); }

  /* Rozwijanie grupy: animacja wysokości przez grid-template-rows */
  .sb-sub-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-2);
    opacity: 0;
  }
  .sb-group.is-open > .sb-sub-wrap { grid-template-rows: 1fr; opacity: 1; }
  .sb-sub-wrap > .sb-sub { overflow: hidden; min-height: 0; }
  .sb-sub {
    position: relative;
    padding: 2px 0 6px 44px;
    &::before {
      content: "";
      position: absolute;
      left: 23px;
      top: 4px;
      bottom: 10px;
      width: 1px;
      background: var(--border);
    }
  }

  .sb-subitem {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 34px;
    padding: 0 var(--s-3);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--fs-13);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--dur-1), background-color var(--dur-1);
    &:hover { color: var(--text); background: var(--surface-3); }
    &[aria-current="page"] { color: var(--accent-ink); font-weight: 650; }
    & .sb-active-bg::before { left: -23px; top: 0; bottom: 0; width: 5px; height: 5px; margin-block: auto; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
    & .sb-badge { min-width: 20px; height: 18px; font-size: 0.66rem; }
  }

  /* Przypinanie ulubionych */
  .sb-pin {
    position: absolute;
    right: 6px;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-xs);
    color: var(--text-3);
    opacity: 0;
    transition: opacity var(--dur-1), background var(--dur-1), color var(--dur-1);
    & svg { width: 15px; height: 15px; }
    &:hover { background: var(--surface); color: var(--accent); }
    &[aria-pressed="true"] { color: var(--accent); }
  }
  .sb-row:hover > .sb-pin, .sb-pin:focus-visible { opacity: 1; }
  .sb-row:hover > .sb-item .sb-meta, .sb-row:focus-within > .sb-item .sb-meta { opacity: 0; }
  .sb-row:has(> .sb-pin:hover) > .sb-item { background: var(--surface-3); }

  .sb-foot {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-3);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  .sb-balance {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    & .sb-balance-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
    & .sb-balance-ico svg { width: 18px; height: 18px; }
    & .sb-balance-txt { flex: 1; min-width: 0; line-height: 1.25; }
    & small { display: block; color: var(--text-3); font-size: var(--fs-12); }
    & strong { font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
  }

  .sb-status {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px var(--s-3);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: var(--fs-12);
    white-space: nowrap;
    &:hover { color: var(--text); background: var(--surface-3); }
    & .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); color: var(--ok); animation: pulse-ring 2.4s infinite; }
  }

  /* --- Tryb „rail”: sidebar zwinięty do ikon --- */
  @media (min-width: 900px) {
    :root[data-sidebar="rail"] {
      & .sb-head { padding: 0; justify-content: center; flex-direction: column; gap: 6px; height: auto; padding-block: 14px 8px; }
      & .brand-word, & .sb-label, & .sb-meta, & .sb-chevron, & .sb-pin, & .sb-search kbd,
      & .sb-balance-txt, & .sb-balance .btn, & .sb-status span:not(.status-dot), & .sb-new { display: none; }
      & .sb-toggle svg { rotate: 180deg; }
      & .sb-search { width: 44px; margin-inline: auto; padding: 0; justify-content: center; }
      & .sb-nav { padding-inline: 10px; }
      & .sb-section { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
      & .sb-section-label { display: none; }
      & .sb-item { justify-content: center; padding: 0; width: 48px; min-height: 44px; margin-inline: auto; }
      & .sb-item .sb-active-bg::before { left: -10px; }
      & .sb-sub-wrap { display: none; }
      & .sb-item[data-dot]::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 9px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--text-3);
        box-shadow: 0 0 0 2px var(--surface);
      }
      & .sb-item[data-dot="warn"]::after { background: var(--warn-strong); }
      & .sb-item[data-dot="danger"]::after { background: var(--danger); }
      & .sb-item[data-dot="accent"]::after { background: var(--accent); }
      & .sb-foot { padding: var(--s-2); }
      & .sb-balance { justify-content: center; padding: 6px; background: none; border: 0; }
      & .sb-status { justify-content: center; }
    }
  }

  /* Wysuwane podpowiedzi i podmenu w trybie rail (Popover API) */
  .rail-flyout {
    position: fixed;
    inset: auto;
    margin: 0;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
    opacity: 0;
    translate: -4px 0;
    transition: opacity var(--dur-1), translate var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
    &:popover-open { opacity: 1; translate: 0 0; }
    @starting-style { &:popover-open { opacity: 0; translate: -4px 0; } }
    &.is-tip { min-width: 0; padding: 6px 10px; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; display: none; }
    &.is-tip:popover-open { display: flex; align-items: center; gap: var(--s-2); }
    & .fly-title { padding: 6px 10px 4px; color: var(--text-3); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    & a {
      display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
      padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-13); font-weight: 500;
      &:hover, &:focus-visible { background: var(--surface-3); color: var(--text); }
      &[aria-current="page"] { color: var(--accent-ink); background: var(--accent-soft); font-weight: 650; }
    }
  }

  /* ------------------------------------------------------------------
     TOPBAR
     ------------------------------------------------------------------ */
  .topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: var(--topbar-h);
    padding: 0 var(--gutter);
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    container-type: inline-size;
    container-name: topbar;
  }
  /* mniej przezroczystości / więcej kontrastu (ustawienia systemu): pasek pełny, bez rozmycia */
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
  /* Pasek dopasowuje się do własnej szerokości (a nie okna) — działa też przy zwiniętym menu */
  @container topbar (max-width: 980px) {
    .tb-search { width: 40px; padding: 0; justify-content: center; }
    .tb-search span, .tb-search kbd { display: none; }
  }
  @container topbar (max-width: 820px) {
    .tb-user { padding: 0 4px; }
    .tb-user-name, .tb-user > svg { display: none; }
  }
  @container topbar (max-width: 600px) {
    .tb-add-label { display: none; }
    .tb-add { padding: 0; width: 40px; height: 40px; & svg { width: 20px; height: 20px; margin: 0; } }
  }
  /* Scroll-driven: po przewinięciu pojawia się linia pod topbarem */
  @supports (animation-timeline: scroll()) {
    .topbar {
      animation: topbar-edge linear both;
      animation-timeline: scroll(root);
      animation-range: 0 64px;
    }
    @keyframes topbar-edge { to { border-bottom-color: var(--border); } }
  }

  .tb-menu { display: none; }
  .tb-brand { display: none; }

  .crumbs {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
    font-size: var(--fs-13);
    color: var(--text-3);
    & ol { display: flex; align-items: center; gap: 2px; min-width: 0; list-style: none; margin: 0; padding: 0; }
    & li { display: flex; align-items: center; gap: 2px; min-width: 0; }
    & li + li::before { content: "/"; color: var(--border-strong); padding: 0 4px; }
    & a, & button {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: 240px;
      padding: 4px 8px;
      border-radius: var(--r-sm);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-2);
      &:hover { background: var(--surface-3); color: var(--text); }
      & svg { width: 14px; height: 14px; opacity: 0.7; }
    }
    & [aria-current="page"] { color: var(--text); font-weight: 600; }
  }

  .tb-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

  .tb-search {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: clamp(200px, 22vw, 320px);
    height: 40px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-3);
    font-size: var(--fs-13);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-1), box-shadow var(--dur-1);
    & span { flex: 1; text-align: left; }
    & svg { width: 17px; height: 17px; }
    &:hover { border-color: var(--border-strong); color: var(--text-2); }
  }

  .tb-user {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 40px;
    padding: 0 10px 0 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--fs-13);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-1);
    &:hover, &[aria-expanded="true"] { border-color: var(--accent); }
    & .tb-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & > svg { width: 16px; height: 16px; color: var(--text-3); }
  }

  .avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--info)));
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    &.lg { width: 44px; height: 44px; font-size: 0.9rem; }
  }

  .count-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.62rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--bg);
    &.is-danger { background: var(--danger); color: #fff; }
  }

  /* ------------------------------------------------------------------
     TREŚĆ
     ------------------------------------------------------------------ */
  .page {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-4) var(--gutter) var(--s-12);
    view-transition-name: page;
    outline: none;
    container-type: inline-size;
    container-name: page;
  }

  .app-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-6);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-5) var(--gutter) var(--s-8);
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: var(--fs-12);
    & nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
    & a:hover { color: var(--text); }
  }

  /* ------------------------------------------------------------------
     MOBILE: szuflada + dolna nawigacja
     ------------------------------------------------------------------ */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--backdrop);
    opacity: 0;
    transition: opacity var(--dur-2);
  }
  .sidebar-backdrop.is-visible { opacity: 1; }

  .bottom-nav { display: none; }

  @media (max-width: 899px) {
    .app, :root[data-sidebar="rail"] .app { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: var(--z-drawer);
      width: min(320px, 86vw);
      height: 100dvh;
      padding-top: env(safe-area-inset-top, 0px);
      transform: translateX(-104%);
      transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
      visibility: hidden;
      box-shadow: var(--shadow-lg);
    }
    .app.is-drawer-open .sidebar { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
    .sb-toggle { display: none; }

    .tb-menu { display: inline-grid; }
    .tb-brand { display: inline-flex; }
    .tb-brand .brand-word { display: none; }
    .crumbs { display: none; }
    .tb-actions { flex: 1; justify-content: flex-end; }
    .tb-search { width: 40px; padding: 0; justify-content: center; }
    .tb-search span, .tb-search kbd { display: none; }
    .tb-user { padding: 0 4px; border: 0; background: none; box-shadow: none; }
    .tb-user-name, .tb-user > svg { display: none; }
    .tb-add-label { display: none; }

    .page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    .app-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

    .bottom-nav {
      position: fixed;
      inset: auto 0 0 0;
      z-index: var(--z-sticky);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
      background: color-mix(in oklab, var(--surface) 90%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid var(--border);
      & a, & button {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 2px;
        padding: 6px 0 4px;
        border-radius: var(--r-md);
        color: var(--text-3);
        font-size: 0.66rem;
        font-weight: 600;
        & svg { width: 22px; height: 22px; }
        &[aria-current="page"] { color: var(--accent); }
        &[aria-current="page"]::before {
          content: "";
          position: absolute;
          top: -7px;
          width: 28px;
          height: 3px;
          border-radius: 0 0 3px 3px;
          background: var(--accent);
        }
      }
    }
  }

  @media (max-width: 480px) {
    .tb-cart { display: none; }
  }
}