/* stylelint-disable selector-class-pattern, selector-id-pattern, declaration-block-single-line-max-declarations, no-descending-specificity, comment-empty-line-before */

/* === GHPanel: push drawer (wysuw z prawej, przepycha stronę) === */

/* body dostaje padding-right równy szerokości panelu, żeby „przepchnąć” treść */
html, body { transition: padding-right .28s ease; }
body { --ghpanel-w: 70px; --ghpanel-top: 70px; --ghpanel-rail: 56px; }

/* ZAREZERWUJ miejsce na szynę nawet przy zamkniętym panelu (nie zasłania treści) */
body.ghpanel-has-rail { padding-right: calc(var(--ghpanel-rail, 56px) + 1em); }
body.ghpanel-open { padding-right: calc(var(--ghpanel-w, 0px) + 1em); } /* + 1em luzu */

/* kontener – zawsze przyjmuje zdarzenia (rail ma działać, gdy panel zamknięty) */
.ghpanel-container{
  position: fixed;
  inset: 0 0 0 auto;
  width: 0;
  z-index: 999997;
  pointer-events: auto;
}

/* Overlay: używamy visibility/opacity, NIE display. Z-index: overlay < handle < panel */
.ghpanel-container .ghpanel-overlay{
  position: fixed;
  inset: 0; /* pełnoekranowy */
  background: rgb(0 0 0 / 35%);
  transition: opacity .2s ease, visibility .2s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10010; /* poniżej handle i panelu */
}

.ghpanel-container.is-open .ghpanel-overlay{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Gdy element ma atrybut [hidden], w tym zakresie nie wymuszamy display:none – neutralizacja WP global */
.ghpanel-container [hidden]{ display: unset !important; visibility: hidden; }
/* Gdy panel jest otwarty, elementy z [hidden] mogą stać się widoczne (np. overlay kontrolowany przez JS) */
.ghpanel-container.is-open [hidden]{ visibility: visible; }

/* panel – ukrywamy wyłącznie przez transform
   Gdy zamknięty, przesuwamy o (szerokość panelu - szerokość szyny), żeby szyna była widoczna i klikalna. */
.ghpanel-container .ghpanel-panel{
  position: fixed;
  top: var(--ghpanel-top, 4.4em);
  right: 1em;
  height: calc(100vh - var(--ghpanel-top, 4.4em));
  width: 340px;
  background: #0a1a3f; color:#fff;
  transform: translateX(calc(100% - var(--ghpanel-rail, 56px))); /* schowany: widoczna szyna */
  transition: transform .28s ease;
  box-shadow: -10px 0 20px rgb(0 0 0 / 28%);
  border-left: 1px solid rgb(255 255 255 / 12%);
  display: flex; flex-direction: column;
  z-index: 10012; pointer-events: auto; /* ponad overlay i handle */
}
.ghpanel-container.is-open .ghpanel-panel{ transform: translateX(0); }
/* Panel pozostaje wyświetlony nawet przy aria-hidden=true – ukrywanie wyłącznie przez transform */
.ghpanel-container .ghpanel-panel[aria-hidden="true"]{ display: flex; }

/* treść panelu */
.ghpanel-tabs{
  display:flex; flex:1 1 auto; min-height:100vh;
  position: relative;            /* stacking context dla nav/content */
  background: #081533;           /* ciemne tło pod całą kolumną */
}

/* szyna ikon – szerokość spięta ze zmienną, zawsze aktywna */
.ghpanel-tabs-nav{
  width: var(--ghpanel-rail, 56px);
  flex: 0 0 var(--ghpanel-rail, 56px);
  background:#081533;
  border-left:1px solid rgb(255 255 255 / 6%);
  padding:.75rem .5rem;
  display:flex; flex-direction:column; gap:.5rem; align-items:center;
  pointer-events: auto;
  position: relative;
  z-index: 10011;               /* kolumna nad overlay (10010), pod panelem (10012) */
  align-self: stretch;      /* pełna wysokość */
  min-height: 100%;
  box-shadow: inset -1px 0 0 rgb(255 255 255 / 6%);
}

.ghpanel-tab-btn{
  width:56px; height:56px; border-radius:12px;
  border:1px solid rgb(255 255 255 / 8%);
  background:rgb(255 255 255 / 4%); color:#e6edff;
  display:grid; place-items:center; cursor:pointer;
  touch-action: manipulation;
  transition:.2s ease;
}
.ghpanel-tab-btn:hover{ background:rgb(255 255 255 / 10%); }
.ghpanel-icon{ width:24px; height:24px; filter:brightness(1.2); }

.ghpanel-tabs-content{
  flex:1; padding:1rem; overflow:auto; background:#0f214d; min-width:0;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;               /* treść pod kolumną */
}
.ghpanel-tab{ display:none; }
.ghpanel-tab.active{ display:block; }

/* zaznaczony przycisk tabów */
.ghpanel-tabs-nav .ghpanel-tab-btn.selected{
  filter: brightness(1.25);
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 28%);
}

/* A11y / neutralizacje: nie chowamy panelu przez [hidden]/[aria-hidden] – musi być mierzalny */
.visually-hidden{
  position:absolute!important;
  /* removed deprecated clip */
  clip-path: inset(50%)!important;
  padding:0!important; border:0!important;
  height:1px!important; width:1px!important;
  overflow:hidden!important; white-space:nowrap!important;
}
/* Keep role-gated elements hidden until JS verifies role */
.ghpanel-container [data-role-required][hidden] { display: none !important; }

/* Schowaj stary, pływający przycisk MENU, który zachodzi na treść */
.ghpanel-handle { display: none !important; }

/* === Handle na kolumnie (rail) === */
.ghpanel-tabs-nav .ghpanel-handle--rail{
  position: absolute;
  bottom: 12px;                   /* na dole kolumny */
  left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 48px;
  border: 0; border-radius: 999px;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 10011;                      /* między overlay (10010) a panelem (10012) */
  padding: 0;
  transition: transform .25s ease, box-shadow .2s ease, opacity .2s ease;
}

.ghpanel-tabs-nav .ghpanel-handle--rail:hover{
  box-shadow: 0 8px 22px rgb(0 0 0 / 28%);
}

.ghpanel-handle--rail .ghpanel-handle__icon{
  transition: transform .25s ease;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 35%));
}

/* kierunek strzałki – w stanie zamkniętym „w lewo” (pokazuje kierunek otwarcia), po otwarciu obraca się */
.ghpanel-handle--rail.arrow-closed .ghpanel-handle__icon{ transform: rotate(0deg); }
.ghpanel-handle--rail.arrow-open   .ghpanel-handle__icon{ transform: rotate(180deg); }
.ghpanel-container.is-open .ghpanel-handle--rail.arrow-closed .ghpanel-handle__icon{ transform: rotate(180deg); }

/* Mobile: panel jako % szerokości; zachowujemy zasadę „szyna widoczna, gdy zamknięty” */
@media (width <= 680px){
  .ghpanel-container .ghpanel-panel{
    width: 92vw; right: .5rem;
    transform: translateX(calc(100% - var(--ghpanel-rail, 56px)));
  }

  .ghpanel-tabs-nav .ghpanel-handle--rail{
    bottom: 10px;
    width: 44px; height: 44px;
  }
}

/* Debug: dodaj klasę .ghpanel-debug na <body>, żeby zobaczyć obrys panelu */
body.ghpanel-debug .ghpanel-panel{ outline:2px solid magenta; }

/* Wygaszenie całego formularza w trybie tylko-odczyt */
.user-profile-form.is-readonly {
  pointer-events: none; /* blokada interakcji z całym formularzem */
  opacity: 0.5;         /* wizualne wygaszenie */
  filter: grayscale(0.4);
}

/* Opcjonalnie przywrócenie interakcji dla przycisku "Edytuj" */
.user-profile-form.is-readonly #editUserData {
  pointer-events: auto;
  opacity: 1;
  filter: none;
}