/* =============================================================================
 * POLISH.CSS: Refinements 2026 (Cleanup + Polish)
 * Layer i lartë mbi modern.css. NUK zëvendëson, vetëm shton konsistencë,
 * tokens, dark mode pa flash, skeleton loading, transitions të buta.
 * ========================================================================== */

:root {
  /* Spacing scale (4px grid) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;

  /* Radius scale */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;

  /* Type scale */
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 0.95rem;
  --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;

  /* Line heights */
  --lh-tight: 1.25; --lh-normal: 1.55; --lh-relaxed: 1.7;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* Focus ring, Partizani red me alfa */
  --focus-ring: 0 0 0 3px rgba(227, 6, 19, 0.18);
  --focus-ring-dark: 0 0 0 3px rgba(227, 6, 19, 0.32);

  /* Dark palette (single source of truth për dark mode).
     --dm-bg është i njëjtë me --bg-main e body.dark-mode te modern.css (#151823):
     dy vlera të ndryshme jepnin një kërcim toni në çdo ngarkim faqeje në dark,
     sepse anti-flash-i pikturonte njërën dhe gjendja përfundimtare tjetrën. */
  --dm-bg: #151823;
  --dm-surface: #252a3a;
  --dm-surface-alt: #2d3244;
  --dm-text: #e2e8f0;
  --dm-text-muted: #94a3b8;
  --dm-border: rgba(255, 255, 255, 0.08);
  --dm-hover: rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------------------
 * TYPOGRAPHY REFINEMENTS
 * -------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3 { font-size: var(--fs-lg); font-weight: 600; }
p, li, td, th { line-height: var(--lh-normal); }
.small, small { line-height: var(--lh-normal); }
.card-title { letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------------
 * DARK MODE: PA FLASH LOAD
 * Kombinim me script inline te <head> që vendos data-preload-dark në <html>
 * PARA se body të renderohet. Sapo JS të ekzekutohet në body start,
 * atributi hiqet dhe body.dark-mode aktivizohet siç ishte më parë.
 * -------------------------------------------------------------------------*/
html[data-preload-dark="1"] {
  background: var(--dm-bg);
  color-scheme: dark;
}
html[data-preload-dark="1"] body,
html[data-preload-dark="1"] .content-wrapper,
html[data-preload-dark="1"] .wrapper {
  background: var(--dm-bg) !important;
  color: var(--dm-text);
}
html[data-preload-dark="1"] .main-header,
html[data-preload-dark="1"] .card {
  /* #1e2230 është --bg-card i body.dark-mode (modern.css): parangjyrosja duhet të
     përputhet me ngjyrën përfundimtare, ndryshe kartat kërcejnë ton sapo ngarkohet JS. */
  background: #1e2230 !important;
}

/* Smooth transition kur toggle-ohet dark mode */
body, .content-wrapper, .main-header, .card, .main-sidebar,
.table, .form-control, .modal-content, .dropdown-menu, .list-group-item {
  transition: background-color var(--dur-base) var(--ease-in-out),
              color var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
}

/* Dark mode konsistencë shtesë (mbush zbrazëtitë e modern.css) */
body.dark-mode .modal-content { background: var(--dm-surface); color: var(--dm-text); }
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color: var(--dm-border); }
body.dark-mode .dropdown-menu { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
body.dark-mode .dropdown-item { color: var(--dm-text); }
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus { background: var(--dm-hover); color: var(--dm-text); }
body.dark-mode .dropdown-divider { border-color: var(--dm-border); }
body.dark-mode .close,
body.dark-mode .btn-close { color: var(--dm-text); opacity: 0.8; text-shadow: none; }
body.dark-mode .card-header { border-bottom-color: var(--dm-border); background: transparent; }
body.dark-mode .card-footer { border-top-color: var(--dm-border); background: rgba(0,0,0,0.15); }
body.dark-mode .breadcrumb { background: transparent; }
body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a { color: var(--dm-text-muted); }
body.dark-mode .breadcrumb-item.active { color: var(--dm-text); }
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #64748b; }
body.dark-mode .input-group-text { background: var(--dm-bg); border-color: var(--dm-border); color: var(--dm-text-muted); }
body.dark-mode .badge-light { background: var(--dm-surface-alt); color: var(--dm-text); }
body.dark-mode .badge-secondary { background: #4b5563; color: #e2e8f0; }
body.dark-mode .list-group-item { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }
body.dark-mode .list-group-item-action:hover { background: var(--dm-hover); color: var(--dm-text); }
body.dark-mode hr { border-color: var(--dm-border); }
body.dark-mode code { background: var(--dm-surface-alt); color: #fca5a5; padding: 0.1em 0.35em; border-radius: var(--r-xs); }

/* Alerts: soft dark versions (mbi Bootstrap default). Pa border-color: modern.css
   i mban alertet me `border: none`, ndaj ajo veti s'kishte asnjë efekt. */
body.dark-mode .alert-info    { background: rgba(59, 130, 246, 0.12);  color: #93c5fd; }
body.dark-mode .alert-warning { background: rgba(245, 158, 11, 0.12);  color: #fcd34d; }
body.dark-mode .alert-danger  { background: rgba(239, 68, 68, 0.12);   color: #fca5a5; }
body.dark-mode .alert-success { background: rgba(16, 185, 129, 0.12);  color: #6ee7b7; }
body.dark-mode .alert-secondary { background: rgba(100, 116, 139, 0.12); color: #cbd5e1; }

/* Card headers me bg-primary etj. në dark mode: mbaji ngjyrat, mos i mbulo */
body.dark-mode .card-header.bg-danger,
body.dark-mode .card-header.bg-primary,
body.dark-mode .card-header.bg-success,
body.dark-mode .card-header.bg-info,
body.dark-mode .card-header.bg-warning,
body.dark-mode .card-header.bg-dark {
  filter: brightness(0.85); /* pak më i butë në dark */
}

/* Dropdowns në navbar */
body.dark-mode .main-header .nav-link { color: var(--dm-text-muted); }
body.dark-mode .main-header .nav-link:hover { color: var(--dm-text); }

/* ---------------------------------------------------------------------------
 * PAGE TRANSITIONS: fade i butë kur ndryshon faqja
 * -------------------------------------------------------------------------*/
.content-wrapper > .content,
.content-wrapper > .content-header {
  animation: pageFadeIn var(--dur-base) var(--ease-out) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
 * FOCUS RINGS moderne (accessibility)
 * -------------------------------------------------------------------------*/
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before,
.nav-link:focus-visible,
a:focus-visible {
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}
body.dark-mode .btn:focus-visible,
body.dark-mode .form-control:focus-visible,
body.dark-mode .nav-link:focus-visible,
body.dark-mode a:focus-visible {
  box-shadow: var(--focus-ring-dark) !important;
}

/* ---------------------------------------------------------------------------
 * BUTTON REFINEMENTS: press effect subtile
 * -------------------------------------------------------------------------*/
.btn {
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.97); }

/* ---------------------------------------------------------------------------
 * CUSTOM SWITCH (Bootstrap 4)
 *
 * Pamja e çelësit rri te modern.css, në një bllok të vetëm bashkë me .modern-switch,
 * që të dy llojet e çelësave të panelit të duken njësoj. Këtu kishte rregulla që e
 * bënin çelësin e ndezur TË KUQ, kurse .modern-switch (Funksionalitetet, ku ndizen
 * veçoritë e app-it) e ka jeshil: i njëjti veprim dukej dy ngjyra sipas faqes.
 * U hoqën me qëllim; mos i rikthe pa e ndryshuar edhe modern.css.
 * -------------------------------------------------------------------------*/
body.dark-mode .custom-control-label { color: var(--dm-text); }

/* ---------------------------------------------------------------------------
 * TABLE POLISH: hover subtile
 * Kokat e tabelave i stilon modern.css në një vend të vetëm; kopja që rrinte
 * këtu përsëriste të njëjtat veti dhe ia ndryshonte madhësinë pa dashje.
 * -------------------------------------------------------------------------*/
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }

/* ---------------------------------------------------------------------------
 * MOTION PREFERENCE: respekto users me reduced-motion
 * -------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * TEAM BADGE (global), përdoret nga partial _team_badge.blade.php
 * (fixtures, standings, team-logos). Përcaktim BAZË këtu; faqet vetëm
 * override-ojnë width/height nëse duan madhësi tjetër.
 * KRITIKE: pa overflow:hidden + img{max-width/max-height} logot e mëdha
 * (disa nga TheSportsDB janë 500x500+) bëjnë overflow mbi gjithë layout-in.
 * -------------------------------------------------------------------------*/
.team-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  background: var(--bg-main, #f5f7fb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-light, #e2e8f0);
  line-height: 0;
}
.team-badge img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.team-badge-placeholder {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.05em;
}
body.dark-mode .team-badge {
  background: var(--dm-surface-alt, #2d3244);
  border-color: var(--dm-border, rgba(255,255,255,0.08));
}
body.dark-mode .team-badge-placeholder { color: var(--dm-text-muted, #94a3b8); }

/* ---------------------------------------------------------------------------
 * SPACING KONSISTENCE: cards, forms, sections
 * -------------------------------------------------------------------------*/
.card + .card { margin-top: 0; } /* mos dublikohet gap */
.card-body > .form-group:last-child,
.card-body > .row:last-child { margin-bottom: 0; }

/* Fluid container padding responsive */
@media (min-width: 992px) {
  .content > .container-fluid { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ASHENSORI I MENUSE
   Rregulli i pergjithshem i modern.css e ben shiritin 8px me gri te ndritur
   (#cbd5e1). Mbi sfondin e erret te menuse ai del si nje vije e bardhe qe te
   bie ne sy sa here levizesh. Ketu behet i holle dhe gati i padukshem; del pak
   me shume vetem kur miu eshte brenda menuse, aq sa ta shohesh ku ndodhesh.
   ═══════════════════════════════════════════════════════════════════════ */
.main-sidebar .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.10) transparent; }
.main-sidebar .sidebar:hover { scrollbar-color: rgba(255,255,255,.22) transparent; }

.main-sidebar .sidebar::-webkit-scrollbar { width: 4px; }
.main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
  border-radius: 4px;
  transition: background .18s ease;
}
.main-sidebar .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }

/* Menuja e hapur mbi celular ka sfond te njejte, ndaj vlen e njejta gje. */
body.dark-mode .main-sidebar .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); }
body.dark-mode .main-sidebar .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); }

/* ═══════════════════════════════════════════════════════════════════════
   RRESHQITESIT
   Shfletuesi i vizaton blu si parazgjedhje dhe Bootstrap-i e forcon #007bff.
   Ngjyra jone baze eshte e kuqja, ndaj mbushja dhe kokrra jane te kuqe.
   Shiriti bosh mbahet i qete: nje gri e ftohte ne driten, nje blu-gri e
   erret ne dark mode. I bardhe fare lodh syrin kur rrezitesi rri gjate ne ekran.
   Perqindja e mbushjes vjen nga panel-ui.js si --pz-range-pct.
   ═══════════════════════════════════════════════════════════════════════ */
input[type="range"] {
  --pz-range-fill: var(--partizani-red, #e30613);
  --pz-range-track: #e2e8f0;
  --pz-range-ring: #fff;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; height: 22px; padding: 0;
  background: transparent; cursor: pointer;
}
input[type="range"]:disabled { cursor: not-allowed; opacity: .55; }
input[type="range"]:focus { outline: none; }

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; border: 0;
  background: linear-gradient(to right,
    var(--pz-range-fill) 0, var(--pz-range-fill) var(--pz-range-pct, 50%),
    var(--pz-range-track) var(--pz-range-pct, 50%), var(--pz-range-track) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5px;
  border-radius: 50%; border: 2px solid var(--pz-range-ring);
  background: var(--pz-range-fill);
  box-shadow: 0 1px 4px rgba(227,6,19,.45);
  transition: transform .12s ease;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(227,6,19,.25); }

input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; border: 0; background: var(--pz-range-track);
}
input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: 999px; background: var(--pz-range-fill);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--pz-range-ring); background: var(--pz-range-fill);
  box-shadow: 0 1px 4px rgba(227,6,19,.45);
}
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(227,6,19,.25); }

body.dark-mode input[type="range"] {
  --pz-range-track: #3a4051;
  --pz-range-ring: #1c2030;
}

/* Kutizat dhe radio-t marrin te njejten ngjyre baze, qe te mos mbetet asnje blu. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--partizani-red, #e30613); }

/* ═══════════════════════════════════════════════════════════════════════
   SHTRESA E PERBASHKET: RRESHTAT E TABELAVE

   Auditi gjeti tre stile te ndryshme butonash veprimi ne tre module. Ketu
   percaktohen nje here, qe cdo modul i ri te marre te njejten pamje pa e
   rishpikur. Vizitoret e kishin bere sakte te paret; ky eshte i njejti stil,
   thjesht i nxjerre nga faqja e tyre ne nje vend qe e sheh i gjithe paneli.
   ═══════════════════════════════════════════════════════════════════════ */
/* Ne ekran te gjere butonat rrine ne nje rresht: "Fshi" i shkeputur poshte "Redakto"
   dukej si dy veprime te palidhura. Nen 992px lejohet te thyhet, se atje tabela
   rreshqet horizontalisht dhe nje rresht i vetem do te dilte jashte ekranit. */
.pz-row-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.pz-row-actions form { display: inline-flex; margin: 0; }
@media (max-width: 991.98px) { .pz-row-actions { flex-wrap: wrap; } }

/* Butonat e rreshtit: cip i qete, jo bloke te ngjyrosura.
   Deri me 26 gusht 2026 "Redakto" ishte nje drejtkendesh portokalli dhe "Fshi" nje i
   kuq, te dy me ngjyre te plote ne cdo rresht. Nje tabele me dhjete rreshta ishte
   njezet blloqe ngjyre qe therrisnin njesoj sa titulli i videos, dhe asnje prej tyre
   s'ishte gje qe duhej pare i pari. Ketu ngjyra i mbetet vetem ikones; sfondi i plote
   vjen kur miu qendron mbi buton, pra kur ngjyra do te thote dicka. */
.pz-row-actions .btn {
  --pz-act: #64748b;
  --pz-act-soft: rgba(100,116,139,.12);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* Madhesia, rrezja dhe lartesia lihen te cilesimet e panelit, jo te fiksuara ketu.
     Marku e ka panelin me shkronja 16px dhe rreze 24; nje buton i ngurte 12.5px me
     rreze 9px do te dukej i huaj mes gjithe te tjereve, pra pikerisht ankesa qe u nis
     kjo pune. Vetem gjeresia horizontale shtrengohet, se rreshti s'ka aq vend. */
  font-size: calc(var(--pz-fs-btn, 15px) * .85) !important;
  padding-left: .72rem !important;
  padding-right: .72rem !important;
  line-height: 1;
  white-space: nowrap;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pz-row-actions .btn > i {
  margin: 0 !important;
  color: var(--pz-act);
  transition: color .15s ease;
}
.pz-row-actions .btn:hover,
.pz-row-actions .btn:focus {
  background: var(--pz-act-soft) !important;
  color: var(--pz-act) !important;
  border-color: var(--pz-act-soft) !important;
  transform: none !important;
  box-shadow: none !important;
}
.pz-row-actions .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pz-act-soft) !important;
}
.pz-row-actions .btn:active { transform: translateY(1px) !important; }

/* Nje veprim qe s'lejohet duhet te duket i palejuar edhe para se te klikohet.
   P.sh. "Anulo" te nje abonim qe ka mbaruar tashme. */
.pz-row-actions .btn:disabled,
.pz-row-actions .btn.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.pz-row-actions .btn-warning,
.pz-row-actions .btn-outline-warning { --pz-act: #b45309; --pz-act-soft: rgba(180,83,9,.13); }

/* Ylli i kanaleve TV nuk eshte veprim, eshte gjendje: aty ngjyra duhet te duket
   pa e afruar miun, perndryshe s'dallohet dot kanali i veçuar nga i paveçuari. */
.pz-row-actions .btn-toggle-featured.btn-warning {
  background: var(--pz-act-soft) !important;
  color: var(--pz-act) !important;
}
.pz-row-actions .btn-danger,
.pz-row-actions .btn-outline-danger { --pz-act: #dc2626; --pz-act-soft: rgba(220,38,38,.13); }
.pz-row-actions .btn-success,
.pz-row-actions .btn-outline-success { --pz-act: #047857; --pz-act-soft: rgba(4,120,87,.13); }
.pz-row-actions .btn-primary,
.pz-row-actions .btn-info { --pz-act: #c00511; --pz-act-soft: rgba(227,6,19,.12); }
.pz-row-actions .btn-secondary,
.pz-row-actions .btn-outline-secondary { --pz-act: #475569; --pz-act-soft: rgba(71,85,105,.12); }

body.dark-mode .pz-row-actions .btn { background: #2a3042 !important; color: #b9c0cf !important; }
body.dark-mode .pz-row-actions .btn-warning { --pz-act: #f0a742; --pz-act-soft: rgba(240,167,66,.18); }
body.dark-mode .pz-row-actions .btn-danger,
body.dark-mode .pz-row-actions .btn-outline-danger { --pz-act: #ff8a94; --pz-act-soft: rgba(255,138,148,.18); }
body.dark-mode .pz-row-actions .btn-success,
body.dark-mode .pz-row-actions .btn-outline-success { --pz-act: #4ade9f; --pz-act-soft: rgba(74,222,159,.18); }
body.dark-mode .pz-row-actions .btn-primary,
body.dark-mode .pz-row-actions .btn-info { --pz-act: #ff8a94; --pz-act-soft: rgba(227,6,19,.24); }
body.dark-mode .pz-row-actions .btn-secondary,
body.dark-mode .pz-row-actions .btn-outline-secondary { --pz-act: #cbd5e1; --pz-act-soft: rgba(203,213,225,.14); }

/* ═══════════════════════════════════════════════════════════════════════
   TERHEQJA BRENDA TABELES

   Faqja e vecante "Rendit" i kerkonte adminit te dilte nga lista, ta gjente
   rreshtin dy here dhe te kthehej. Doreza rri tani ne vend te vet, ne krah te
   numrit. Del e zbehte kur renditja s'eshte ajo e app-it, sepse atehere rreshtat
   nuk jane ne radhen qe ruhet dhe terheqja do te ruante nje rend te rreme.
   ═══════════════════════════════════════════════════════════════════════ */
.pz-nrcol { white-space: nowrap; }
.pz-drag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 26px; margin-right: 6px;
  border-radius: 7px;
  color: #cbd5e1; cursor: grab;
  vertical-align: middle;
  transition: color .15s ease, background-color .15s ease;
}
.pz-drag:hover { color: var(--partizani-red, #e30613); background: rgba(227,6,19,.09); }
.pz-drag:active { cursor: grabbing; }
.pz-nr { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary, #5d6b83); }

.pz-drag-off .pz-drag { color: #e6ebf2; cursor: default; pointer-events: none; }
body.dark-mode .pz-drag { color: #454c60; }
body.dark-mode .pz-drag-off .pz-drag { color: #333949; }

tr.pz-drag-ghost { opacity: .35; }
tr.pz-drag-chosen { box-shadow: 0 8px 22px rgba(15,23,42,.16); }
tr.pz-drag-chosen td { background: rgba(227,6,19,.05) !important; }
body.dark-mode tr.pz-drag-chosen td { background: rgba(227,6,19,.14) !important; }

/* Shpjegimi i kontrolleve te nje liste.
   Ekziston sepse "rendit sipas kategorise" dhe "filtro sipas kategorise" duken si e njejta
   gje, po njeri e ndryshon rendin qe ruhet e tjetri jo. Marku pyeti pikerisht per kete. */
/* Nje kuti njoftimi me tri fjali, njera poshte tjetres.
   Ishte ne tri kolona; Marku nuk e pelqeu dhe kishte te drejte: emri i kontrollit dilte
   si qelize me vete majtas dhe fjalia thyhej ne dy-tri fjale per rresht. */
.pz-hint {
  margin: .9rem 1.5rem 0;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: #f6f8fb;
  border: 1px solid var(--border-light, #e2e8f0);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-secondary, #5d6b83);
}
.pz-hint-i { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .45rem; }
.pz-hint-i:last-child { margin-bottom: 0; }
.pz-hint-i > i { margin-top: .28em; opacity: .55; flex: 0 0 1em; text-align: center; }
.pz-hint-i b { color: var(--text-primary, #1e293b); font-weight: 700; }
/* Rreshti qe prek tifozin shenohet me te kuqen e klubit: eshte i vetmi me pasoja jashte panelit. */
.pz-hint-live > i { color: var(--partizani-red, #e30613); opacity: 1; }
.pz-hint-live b { color: var(--partizani-red, #e30613); }

body.dark-mode .pz-hint { background: rgba(255,255,255,.03); border-color: var(--dm-border, rgba(255,255,255,.08)); }
body.dark-mode .pz-hint-i b { color: var(--dm-text, #e7e9ef); }
body.dark-mode .pz-hint-live b { color: #ff8a94; }
body.dark-mode .pz-hint-live > i { color: #ff8a94; }

.pz-drag-note {
  margin: .85rem 1.5rem -.4rem;
  padding: .55rem .8rem;
  border-radius: 9px;
  font-size: .82rem;
  background: rgba(180,83,9,.09);
  color: #92400e;
}
body.dark-mode .pz-drag-note { background: rgba(240,167,66,.13); color: #f0a742; }

/* ═══════════════════════════════════════════════════════════════════════
   SHIRITI I KERKIMIT DHE I FILTRAVE MBI NJE TABELE
   ═══════════════════════════════════════════════════════════════════════ */
/* Nje fushe = nje element. Ikona noton brenda saj.
   Versioni i pare i ngjiste dy elemente: `input-group-prepend` me kutizen gri dhe fushen.
   Duheshin te perputheshin ne lartesi dhe ne rreze, po tema e panelit ia jep fushes
   `--r1-radius-sm` ne te KATER qoshet me !important dhe nje lartesi fikse, ndersa kutiza
   mbeti me 8px dhe me lartesine e vet. Prandaj dukej e prere. Me nje element te vetem
   s'ka dy gjera qe duhet t'i bien ne fjale. */
.card-header.pz-tools {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: .9rem 1.5rem;
}
.pz-tools .pz-tool {
  position: relative;
  display: flex; align-items: center;
  flex: 1 1 190px; min-width: 0;
}
.pz-tools .pz-tool-search { flex: 2 1 250px; }

.pz-tools .pz-tool .form-control {
  width: 100%;
  /* Vendi majtas i lihet ikones; djathtas fushes se kerkimit s'i duhet. */
  padding-left: 2.2rem !important;
  padding-right: .85rem !important;
  font-size: .85rem !important;
}
.pz-tools .pz-tool-select .form-control {
  padding-right: 2.1rem !important;
  cursor: pointer;
  /* Shigjeta e sistemit hiqet qe te mbetet vetem `pz-tool-caret`: ajo e sistemit
     duket ndryshe ne Chrome, ne Firefox dhe ne Safari, dhe s'ndjek dot ngjyrat tona. */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: none !important;
}

/* Ikonat s'i kapin klikimet: klikimi kudo mbi fushe hap listen. */
.pz-tools .pz-tool-ico,
.pz-tools .pz-tool-caret {
  position: absolute; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-secondary, #5d6b83);
  transition: color .15s ease;
}
.pz-tools .pz-tool-ico { left: .85rem; font-size: .82rem; opacity: .65; }
.pz-tools .pz-tool-caret { right: .9rem; font-size: .62rem; opacity: .45; }

/* Fusha ku je duke shkruar e shenon veten me te kuqen e klubit. */
.pz-tools .pz-tool:focus-within .pz-tool-ico,
.pz-tools .pz-tool:focus-within .pz-tool-caret {
  color: var(--partizani-red, #e30613);
  opacity: 1;
}

/* Butoni i pastrimit e ndjek lartesine e fushave me `stretch`, jo me nje piksel te shkruar
   me dore: temat dhe cilesimet e shkronjave ia ndryshojne lartesine fushes, dhe cdo numer
   i ngurte do te dilte jashte radhe here pas here. Pa klasen `.btn` me qellim, qe rrezja
   e personalizuesit (`body .btn { border-radius: !important }`) te mos e beje rrethore. */
.pz-tools .pz-tool-reset {
  flex: 0 0 auto; margin-left: auto; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; padding: 0;
  background: transparent;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px;
  color: var(--text-secondary, #5d6b83);
  font-size: .82rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.pz-tools .pz-tool-reset:hover {
  color: var(--partizani-red, #e30613);
  border-color: var(--partizani-red, #e30613);
  background: rgba(227,6,19,.06);
}
.pz-tools .pz-tool-reset:focus-visible {
  outline: none;
  border-color: var(--partizani-red, #e30613);
  box-shadow: 0 0 0 3px rgba(227,6,19,.16);
}

body.dark-mode .pz-tools .pz-tool-reset { border-color: var(--dm-border, rgba(255,255,255,.12)); color: #a9b2c6; }
body.dark-mode .pz-tools .pz-tool-reset:hover { color: #ff8a94; border-color: #ff8a94; background: rgba(255,138,148,.10); }
body.dark-mode .pz-tools .pz-tool-ico,
body.dark-mode .pz-tools .pz-tool-caret { color: #a9b2c6; }
body.dark-mode .pz-tools .pz-tool:focus-within .pz-tool-ico,
body.dark-mode .pz-tools .pz-tool:focus-within .pz-tool-caret { color: #ff8a94; }

.pz-date { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-secondary, #5d6b83); font-size: .85rem; }

/* Distinktivet e gjendjes: forma flet para se te lexohet teksti. */
.pz-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .32em .72em; border-radius: 999px; white-space: nowrap;
  background: #f1f5f9; color: #5b6172;
}
.pz-pill i { font-size: .58em; }
.pz-pill-new  { background: rgba(227,6,19,.12);  color: #c00511; }
.pz-pill-read { background: rgba(16,185,129,.14); color: #0b7a5b; }
.pz-pill-done { background: #10b981; color: #fff; }
.pz-pill-done i { font-size: .74em; }

body.dark-mode .pz-pill      { background: #2d3244; color: #b9c0cf; }
body.dark-mode .pz-pill-new  { background: rgba(227,6,19,.22);  color: #ff8a94; }
body.dark-mode .pz-pill-read { background: rgba(16,185,129,.20); color: #4ade9f; }
body.dark-mode .pz-pill-done { background: #0f9d6b; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   RRESHTI I VEPRIMEVE: baza e pavarur nga tema
   Pa keto, klasat pz-actions do te punonin vetem te Revolution 1 dhe do te
   binin poshte kur tema kthehet ne AdminLTE 3. Pa !important, qe tema ta
   mbivendose lirisht.
   ═══════════════════════════════════════════════════════════════════════ */
.pz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.pz-actions > form { display: contents; }
.pz-actions:not(.card-footer):not(.modal-footer) {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}
body.dark-mode .pz-actions:not(.card-footer):not(.modal-footer) { border-top-color: var(--dm-border, rgba(255,255,255,.08)); }

.pz-actions-stack { display: flex; flex-direction: column; gap: 10px; }
.pz-actions-stack > form { display: contents; }
.pz-actions-stack > .btn,
.pz-actions-stack > form > .btn,
.pz-actions-stack > .btn-group { width: 100%; margin: 0; }

.pz-float-save { position: fixed; right: 24px; bottom: 24px; z-index: 1035; display: flex; align-items: center; gap: 10px; }

/* Mesazhi te lista e komenteve: lidhje qe nuk duket si lidhje derisa ta prekesh.
   Nje nenvijezim i perhershem do ta bente tabelen te zhurmshme, kurse pa asnje
   shenje askush s'e merr me mend qe klikohet. */
.fb-msg { color: inherit; text-decoration: none; }
.fb-msg:hover { color: var(--partizani-red, #e30613); text-decoration: underline; }
body.dark-mode .fb-msg:hover { color: #ff8a94; }

/* ═══════════════════════════════════════════════════════════════════════
   DRIDHJA KUR HAPET NJE DRITARE

   Bootstrap-i, kur hap nje modal, i vendos `overflow: hidden` trupit. Ashensori
   zhduket, faqja fiton 15px gjeresi, dhe gjithcka rreshqet djathtas — pastaj
   kthehet mbrapsht kur mbyllet. Me nje meny te fiksuar si e jona, ajo mbetet
   ku ishte kurse permbajtja levizi, ndaj dridhja duket dyfish.

   `scrollbar-gutter: stable` e rezervon ate hapesire GJITHMONE, edhe kur
   ashensori s'eshte aty. Kur zhduket, s'ka cfare te fitohet, ndaj s'ka cfare
   te leviz. Pastaj hiqet edhe mbushja qe Bootstrap-i shton si kompensim, e
   cila tani do te ishte nje zhvendosje e dyte pa asnje arsye.
   ═══════════════════════════════════════════════════════════════════════ */
html { scrollbar-gutter: stable; }
body.modal-open { padding-right: 0 !important; }
body.modal-open .main-header,
body.modal-open .main-sidebar { padding-right: 0 !important; }

/* ── Zgjedhja e skedarit ───────────────────────────────────────────────
   Kutia "Choose File / No file chosen" e vizaton vetë shfletuesi: nuk merr stil,
   nuk përkthehet, dhe ndryshon pamje nga një sistem te tjetri. Kudo ku përdoret
   `.pz-file-input` + `.pz-file-btn`, ajo fshihet dhe klikimi vjen nga etiketa.

   Fshihet me `clip` e jo me `display:none`, që fusha të mbetet e arritshme nga
   tastiera; përndryshe butoni do të ishte i paprekshëm pa mausin. */
.pz-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pz-file-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 8px 16px; cursor: pointer; max-width: 100%;
  font-size: .84rem; font-weight: 600; line-height: 1.2;
  color: #5b6172; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 999px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pz-file-btn i { font-size: .82rem; flex: 0 0 auto; }
.pz-file-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-file-btn:hover { background: rgba(227,6,19,.06); border-color: rgba(227,6,19,.45); color: var(--partizani-red, #e30613); }
.pz-file-input:focus-visible + .pz-file-btn { box-shadow: 0 0 0 3px rgba(227,6,19,.25); }

body.dark-mode .pz-file-btn {
  background: var(--dm-surface, #252a3a);
  border-color: var(--dm-border, rgba(255,255,255,.1));
  color: #b9c0cf;
}
body.dark-mode .pz-file-btn:hover { background: rgba(227,6,19,.16); color: #ff8a94; }

/* ═══════════════════════════════════════════════════════════════════════════
   Koka e kartës me veprim djathtas

   AdminLTE e mban `.card-header` me një clearfix: `::after { display: block; clear: both }`.
   Te një kokë `d-flex`, ai pseudo-element bëhet element i tretë i rreshtit, ndaj
   `justify-content: space-between` ndan hapësirën mes titullit, butonit DHE tij, dhe butoni
   përfundon në mes të ekranit. Duket sikur dikush e ka lënë aty pa vend, dhe kështu ishte te
   Skuadrat derisa Marku e kapi. Prek çdo kokë flex të panelit, ndaj ndreqja rri këtu.
   ═══════════════════════════════════════════════════════════════════════════ */
.card-header.d-flex::after { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Butoni "shto" te koka e një liste

   I kuqi i mbushur i takon veprimit kryesor të faqes (importi, ruajtja). Kur në të
   njëjtin ekran ka dy të tillë, të dy bërtasin dhe asnjëri s'udhëheq. Ky është i njëjti
   i kuq, por i mbajtur: sipërfaqe e bardhë, kufi i hollë, dhe shenja "+" në një katror
   të vetin. Mbushet vetëm kur i afrohesh, që të mos ketë asnjë dyshim se është buton.
   ═══════════════════════════════════════════════════════════════════════════ */
.pz-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 0.9rem 0 0.4rem;
  border: 1px solid var(--partizani-red, #e30613);
  border-radius: var(--pz-radius, 10px);
  background: #fff;
  color: var(--partizani-red, #e30613);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pz-btn-add .pz-btn-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: calc(var(--pz-radius, 10px) * 0.7);
  background: rgba(227, 6, 19, 0.1);
  font-size: 0.8rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pz-btn-add:hover { background: var(--partizani-red, #e30613); color: #fff; }
.pz-btn-add:hover .pz-btn-add-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.pz-btn-add:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.2); }
.pz-btn-add:disabled { opacity: 0.55; cursor: not-allowed; }

body.dark-mode .pz-btn-add { background: transparent; color: #ff5a66; border-color: #ff5a66; }
body.dark-mode .pz-btn-add .pz-btn-add-icon { background: rgba(255, 90, 102, 0.16); }
body.dark-mode .pz-btn-add:hover { background: var(--partizani-red, #e30613); color: #fff; border-color: var(--partizani-red, #e30613); }

/* ═══════════════════════════════════════════════════════════════════════════
   GJERËSIA E MENUSË ANËSORE

   AdminLTE e ka 250px. Emrat e gjatë ("Tekstet e Aplikacionit", "Sources &
   Integrations") nuk hynin, dhe meqë `.sidebar` ka `overflow-y: auto`, shfletuesi e
   llogarit `overflow-x` po ashtu si auto: dilte një shirit rrëshqitës horizontal poshtë
   menusë dhe fjalët priteshin në mes. Zgjidhja ka tri pjesë: pak më e gjerë, pa shirit
   horizontal fare, dhe emri i gjatë kalon në rreshtin e dytë në vend që të pritet.

   Gjerësia rri te një variabël: nëse ndonjëherë duhet edhe më e gjerë, ndryshohet një
   rresht i vetëm. Gjendja e mbledhur (`sidebar-collapse`) nuk preket.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --pz-sidebar-w: 280px; }

@media (min-width: 768px) {
  body:not(.sidebar-collapse) .main-sidebar,
  body:not(.sidebar-collapse) .main-sidebar::before,
  body.sidebar-collapse .main-sidebar:hover,
  body.sidebar-collapse .main-sidebar:hover::before { width: var(--pz-sidebar-w); }

  body:not(.sidebar-collapse):not(.layout-top-nav) .content-wrapper,
  body:not(.sidebar-collapse):not(.layout-top-nav) .main-header,
  body:not(.sidebar-collapse):not(.layout-top-nav) .main-footer {
    /* AdminLTE vetë e cakton këtë `margin-left: 250px` me një rregull që ka një
       `:not()` më shumë se yni (variantet sidebar-mini-md/xs), pra fiton përballë
       nesh edhe pse polish.css ngarkohet i fundit: specifiteti vendos, jo rendi.
       Pa `!important` këtu, menuja bëhet 280px por faqja fillon ende te 250px,
       dhe 30px mbivendosen mbi njëra-tjetrën. */
    margin-left: var(--pz-sidebar-w) !important;
  }

  body.layout-navbar-fixed:not(.sidebar-collapse) .wrapper .brand-link,
  body.layout-navbar-fixed.sidebar-collapse .wrapper .main-sidebar:hover .brand-link { width: var(--pz-sidebar-w); }
}

/* Asnjë shirit horizontal te menuja, kurrë. */
.main-sidebar .sidebar { overflow-x: hidden; }

/* Emri i gjatë zbret në rreshtin e dytë; më mirë dy rreshta se një fjalë e prerë.
   Nën-menutë e kishin `text-nowrap` te markup-i, dhe pikërisht ai e detyronte shiritin
   horizontal; u hoq atje, kjo rri si rrjetë sigurie për çdo emër të ri të gjatë. */
.main-sidebar .nav-sidebar .nav-link > p {
  white-space: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* Vend për shigjetën e nën-menusë, që teksti i dy rreshtave të mos i futet poshtë. */
.main-sidebar .nav-sidebar > .nav-item > .nav-link > p { padding-right: 1.6rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   HAPËSIRA MES SELECT2-s TË MBYLLUR DHE LISTËS QË HAPET

   modern.css e bën kutinë e select2 `height: auto` që të duket si `.form-control`
   (padding 0.6rem). Por vetë select2 e mat lartësinë e kutisë me JS për të vendosur
   listën pikërisht poshtë saj, dhe `height: auto` + `display: block` jep një lartësi
   të paqëndrueshme mes shfletuesve dhe momenteve, ndaj lista hapet pak më poshtë
   se ku duhet, me hapësirë bosh në mes. Zgjidhja: lartësi fikse (jo auto) plus
   qendrim me flex, që select2 ta matë njësoj çdo herë.
   ═══════════════════════════════════════════════════════════════════════════ */
.select2-container--default .select2-selection--single {
  height: 2.6rem !important;
  display: flex !important;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding-left: 0.9rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINTIMI
   Kur admini shtyp një listë (Audit Log, pagesat, vizitorët), në letër duhet
   vetëm përmbajtja: pa menu, pa navbar, pa butona. Pa këto rregulla dilte edhe
   sidebar-i i zi me gjithë menunë.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .main-sidebar, .main-header, .main-footer,
  .content-header .breadcrumb, .btn, #impersonation-bar { display: none !important; }
  .content-wrapper { margin-left: 0 !important; background: #fff !important; }
  body { background: #fff !important; }
}