/*
 * Wspólna szerokość treści SWD: jak w spisie, koncie i dokumentach.
 * Nowy kontener strony może używać klasy swd-content-width.
 * Reguły dotyczą tylko zewnętrznych kontenerów: siatki, karty, modale
 * i podglądy dokumentów zachowują własne wymiary. Wydruki są niezależne.
 * Warstwa z regułami !important ma pierwszeństwo przed dawnymi stylami
 * modułów i Bootstrapem, niezależnie od kolejności ich ładowania.
 */
@layer swd-layout {
  @media screen {
    :root {
      --swd-page-gutter: 16px;
      --swd-scrollbar-track: #e7eef6;
      --swd-scrollbar-thumb: #8aa0b5;
      --swd-scrollbar-thumb-hover: #667f98;
      --swd-scrollbar-width: 12px;
    }

    /* Jednakowe miejsce na przewijanie zapobiega skokom paska między modułami. */
    html {
      scrollbar-color: var(--swd-scrollbar-thumb) var(--swd-scrollbar-track);
      scrollbar-gutter: stable;
      scrollbar-width: thin;
    }

    html::-webkit-scrollbar {
      width: var(--swd-scrollbar-width);
      height: var(--swd-scrollbar-width);
    }

    html::-webkit-scrollbar-track {
      background: var(--swd-scrollbar-track);
    }

    html::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #a7b8c9 0%, var(--swd-scrollbar-thumb) 100%);
      border: 3px solid var(--swd-scrollbar-track);
      border-radius: 999px;
    }

    html::-webkit-scrollbar-thumb:hover {
      background: var(--swd-scrollbar-thumb-hover);
    }

    @media (min-width: 768px) {
      :root {
        --swd-page-gutter: 50px;
      }
    }

    body {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body > :is(
      .container,
      .container-fluid,
      .swd-page-shell,
      .dashboard-new,
      .events-new,
      .event-view,
      .order-module-page,
      .files-page,
      .security-page,
      .security-public-shell,
      .qr-generator,
      .qr-updater
    ),
    body .swd-content-width,
    body > .hero-section > :is(.container, .container-fluid) {
      box-sizing: border-box !important;
      /* Nadpisują limity modułów, style inline oraz narzędzia px-* Bootstrapa. */
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: var(--swd-page-gutter) !important;
      padding-right: var(--swd-page-gutter) !important;
    }

    /* Osobny panel nagłówka musi mieć te same zewnętrzne krawędzie co karty. */
    body > .page-header.swd-page-head {
      box-sizing: border-box !important;
      width: calc(100% - 2 * var(--swd-page-gutter)) !important;
      max-width: none !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    body > .page-header.swd-page-head > :is(.container, .container-fluid) {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .swd-page-shell .swd-rank-card-row {
      width: 100% !important;
      max-width: none !important;
    }
  }
}