/* ==========================================================================
   Plane.css — Stylus userstílus a Plane.so (self-hosted) webalkalmazáshoz
   Cél: a munkaelem-lista státusz-jelzőinek (kör/vonal SVG ikon + szín)
        vizuális kiemelése, illetve a "+ New work item" placeholder sorok
        halványítása.
   Betöltés: Chrome Stylus bővítmény -> "Új stílus" -> ez a fájl tartalma.
   Megjegyzés: minden szelektor a Plane jelenlegi (2026-as) DOM-szerkezetére
   és Tailwind-osztályaira épül, ezért egy Plane-frissítés után könnyen
   elromolhat (lásd a fájl végén az összefoglaló megjegyzést).
   ========================================================================== */

/* "New work item" sor halványítása a Todo/In Progress stb. csoportok alján
   (a csoport lista alján megjelenő, kattintható "hozzáadás" sor).
   Részleges (contains) attribútum-egyezésekkel a néhány kulcs-osztályra,
   nem a teljes class-stringre — így ha a Plane sorrendet cserél vagy egy-két
   kiegészítő osztályt hozzáad/elvesz, a szabály még mindig illeszkedik. */
div.px-page-x[class*="cursor-pointer"][class*="bg-layer-transparent"][class*="hover:bg-layer-transparent-hover"] {
  opacity: 0.2;
}

/* opcionális: a bal oldali sidebar "+ New work item" gombja is halványítva,
   de csak enyhén (0.9), mert az egy önálló, jól látható gomb */
button:has(span.max-w-\[145px\].truncate.text-13.font-medium) {
  opacity: 0.9;
}

/* --- Kiválasztott work item sor kiemelése ---
   Amikor egy work item sorra kattintunk, megnyílik a peek/side panel,
   és a Plane a listasor .px-page-x elemére natívan ráteszi a
   "border-accent-strong" osztályt (ezt jelöli ki, melyik sor van
   éppen megnyitva). Ezt használjuk ki: nincs szükség saját "kattintva"
   állapot-követésre, csak erre a natív jelzőre színezünk rá. */
.px-page-x.border-accent-strong {
  background-color: rgba(96, 165, 250, 0.2) !important;
  box-shadow: inset 3px 0 0 0 #60A5FA;
}

/* --- Csoportfejléc (Todo, In Progress, stb.) formázás ---
   Alap tipográfia minden csoportfejléc-feliratra: kisebb, vékonyabb,
   nagybetűs, ritkított betűkép, kis padding + lekerekítés a háttérszínhez */
.px-page-x .line-clamp-1.font-medium {
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Az egyes státuszokhoz tartozó szín a csoportfejlécen.
   A Plane a státusz típusát nem CSS class-ban, hanem az SVG ikon
   stroke/fill színében kódolja, ezért a szelektorok a beágyazott
   SVG elem [stroke=...] / [fill=...] attribútumára illesztenek
   (a ":has()" segítségével a szülő .px-page-x sávot választjuk ki,
   majd azon belül színezzük a feliratot). Az "i" a case-insensitive
   attribútum-egyezést jelenti (pl. #60646C vs #60646c is illeszkedik). */

/* --- Nyitott (szürke, alap Plane státusz) --- */
.px-page-x:has(line[stroke="#60646C" i]) .line-clamp-1,
.px-page-x:has(circle[stroke="#60646C" i]) .line-clamp-1 {
  color: #C0C4CC !important;
  background-color: rgba(154, 164, 188, 0.18);
}

/* --- Megbeszélendő (sárga/borostyán, alap Plane státusz) --- */
.px-page-x:has(circle[stroke="#F59E0B" i]) .line-clamp-1 {
  color: #FCD34D !important;
  background-color: rgba(245, 158, 11, 0.22);
}

/* --- Lezárva / Kész (zöld pipa ikon, alap Plane státusz) --- */
.px-page-x:has(path[fill="#46A758" i]) .line-clamp-1 {
  color: #86EFAC !important;
  background-color: rgba(70, 167, 88, 0.22);
}

/* --- Törölve / Cancelled (szürke X ikon, alap Plane státusz) --- */
.px-page-x:has(path[fill="#9AA4BC" i]) .line-clamp-1 {
  color: #D7DCE5 !important;
  background-color: rgba(154, 164, 188, 0.18);
}

/* --- Egyedi státusz: "Folyamatban" (lila, csak az ETVWin projektben
   használt, testre szabott státuszszín, nem Plane-alapértelmezett) --- */
.px-page-x:has(line[stroke="#9900EF" i]) .line-clamp-1,
.px-page-x:has(circle[stroke="#9900EF" i]) .line-clamp-1 {
  color: #D8B4FE !important;
  background-color: rgba(153, 0, 239, 0.22);
}

/* --- Státusz-ikon a task cím elé beszúrva ---
   Mivel a lista-nézetben (kompakt sorban) nincs mindig hely / nem mindig
   látszik jól a natív státusz-ikon, ez a szabály egy ::before pszeudo-elembe
   rajzol egy saját, base64/URL-encode-olt inline SVG kört/pipát/X-et
   közvetlenül a task cím elé. */
.group\/list-block p.text-body-xs-medium.text-primary::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

/* Nyitott -> üres szürke kör */
.group\/list-block:has(line[stroke="#60646C" i]) p.text-body-xs-medium.text-primary::before,
.group\/list-block:has(circle[stroke="#60646C" i]) p.text-body-xs-medium.text-primary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%239AA4BC' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Megbeszélendő -> üres sárga kör */
.group\/list-block:has(circle[stroke="#F59E0B" i]) p.text-body-xs-medium.text-primary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23F59E0B' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Lezárva -> kitöltött zöld kör pipával */
.group\/list-block:has(path[fill="#46A758" i]) p.text-body-xs-medium.text-primary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%2346A758' d='M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.3587 6.18828C11.6007 5.85214 11.5244 5.38343 11.1882 5.14141C10.8521 4.89938 10.3834 4.97568 10.1414 5.31183L7.03706 9.62335L5.25956 7.97751C4.95563 7.69609 4.4811 7.71434 4.19968 8.01828C3.91826 8.32221 3.93651 8.79673 4.24045 9.07815L6.64045 11.3004C6.79816 11.4464 7.01095 11.5178 7.22481 11.4963C7.43868 11.4749 7.63307 11.3627 7.75865 11.1883L11.3587 6.18828Z'/%3E%3C/svg%3E");
}

/* Törölve -> kitöltött szürke kör X-szel */
.group\/list-block:has(path[fill="#9AA4BC" i]) p.text-body-xs-medium.text-primary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%239AA4BC' d='M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.1018 4.89826C11.3947 5.19115 11.3947 5.66603 11.1018 5.95892L9.06068 8.00002L11.1018 10.0411C11.3947 10.334 11.3947 10.8089 11.1018 11.1018C10.8089 11.3947 10.334 11.3947 10.0411 11.1018L8.00002 9.06068L5.95892 11.1018C5.66603 11.3947 5.19115 11.3947 4.89826 11.1018C4.60537 10.8089 4.60537 10.334 4.89826 10.0411L6.93936 8.00002L4.89826 5.95892C4.60537 5.66603 4.60537 5.19115 4.89826 4.89826C5.19115 4.60537 5.66603 4.60537 5.95892 4.89826L8.00002 6.93936L10.0411 4.89826C10.334 4.60537 10.8089 4.60537 11.1018 4.89826Z'/%3E%3C/svg%3E");
}

/* --- Work item részletes nézet: fix elválasztó a title alatt ---
   A title-input (textarea#title-input) körüli wrapper div
   (.flex.flex-col.gap-1.5) után közvetlenül jön a description
   editor (.editor-container) — a kettő közé szúrunk egy fix
   vízszintes vonalat. Chrome DevTools-szal ellenőrzött DOM alapján. */
div.flex.flex-col.gap-1\.5:has(#title-input) + .editor-container {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
  margin-top: 8px;
}

/* Egyedi "Folyamatban" (lila) -> szaggatott vonalú lila félkör,
   vizuálisan megkülönböztetve a natív Plane státuszoktól */
.group\/list-block:has(line[stroke="#9900EF" i]) p.text-body-xs-medium.text-primary::before,
.group\/list-block:has(circle[stroke="#9900EF" i]) p.text-body-xs-medium.text-primary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%239900EF' stroke-width='1.5' stroke-dasharray='18.85 37.7' transform='rotate(-90 8 8)'/%3E%3C/svg%3E");
}

/* Reakció hozzáadás mosolygó ikon eltüntetése */
button[data-slot="popover-trigger"]:has(path[d^="M7.74205 1.11803"]) {
    display: none !important;
}

/* Felső egész sávot (projektválasztó + "..." menü + Work items/Pages fülek) halványítja */
div.flex.size-full.items-center.gap-3.overflow-hidden:has(button[aria-label="Toggle quick actions menu"]) {
    opacity: 0.2;
}

/* Felső Work Items + Item számláló badge halványítás */
div.flex.items-center.gap-2\.5:has(a[href$="/issues/"]) {
    opacity: 0.2;
}

/* Item részletes leírás alatti gombok halványítása */
div.flex.flex-wrap.items-center.gap-2:has(svg.lucide-paperclip) {
    opacity: 0.2;
}

/* Bal oldalt alul "Community" gomb eltüntetése */
div.border-t.bg-surface-1:has(button[aria-label="Open paid plans' modal"]) {
    display: none !important;
}

/* Jobb felső "Subscribe" gomb eltüntetése */
button:has(svg.lucide-bell) {
    display: none !important;
}

/* Jobb felső "Star us on GitHub" eltüntetése */
a[aria-label="Star us on GitHub"] {
    display: none !important;
}

/* Részletes nézet alsó szakasz. State, assignees, stb */
div:has(> h6.text-body-xs-medium):has(> div.mt-3.w-full.space-y-3) > div.mt-3.w-full.space-y-3 > div.flex.items-start.gap-2 {
    opacity: 0.2;
}

/* Részletes nézet egyedül a "State" legyen normál */
div:has(> h6.text-body-xs-medium):has(> div.mt-3.w-full.space-y-3) > div.mt-3.w-full.space-y-3 > div.flex.items-start.gap-2:has(circle[stroke-dasharray]) {
    opacity: 1;
}

/* Részletes nézet - utoljára szerkesztette */
div.flex-shrink-0:has(svg.lucide-history) {
    opacity: 0.2;
}

/* Részletes nézet egyedi azonosító kiírás */

button.text-caption-md-medium.text-tertiary.cursor-pointer {
    opacity: 0.2;
}

/* --- Lista-nézet: work item sorok magasságának csökkentése ---
   A sorok id-je "issue_<...>_<...>_undefined" mintát követ, a link
   id-je "issue-<uuid>", ez alatt van a tényleges tartalmi div (min-h-11,
   py-3). Az id-prefix alapú illesztés stabilabb, mint a Tailwind
   class-lista, mert az nem függ a slash-es class-nevek escape-elésétől. */
div[id^="issue_"] a[id^="issue-"] > div {
    min-height: 24px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    gap: 4px !important;
}