/* ============================================================
   HeroPilot Theme 2.0 — Rev 2 (2026-06-28)
   Poprawki: białe tło logo, zwężony panel, opis po prawej,
             puste zakładki ukryte, logo w nagłówku przezroczyste
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ─────────────────────────── 1. TOKENY ─────────────────────────── */
:root {
  --hp-bg:            #050810;
  --hp-surface:       rgba(9,13,20,0.92);
  --hp-surface-hi:    rgba(14,20,30,0.96);
  --hp-surface-lo:    rgba(7,10,16,0.78);

  --hp-gold:          #e7b95d;
  --hp-gold-bright:   #f5d98a;
  --hp-gold-dim:      #9b6a24;
  --hp-gold-glow:     rgba(231,185,93,0.22);
  --hp-blue:          #4fa8e8;
  --hp-blue-soft:     rgba(79,168,232,0.18);
  --hp-blue-glow:     rgba(79,168,232,0.28);

  --hp-danger:        #ff7c60;
  --hp-success:       #6ee7a8;
  --hp-warning:       #ffd166;

  --hp-border:        rgba(231,185,93,0.36);
  --hp-border-soft:   rgba(100,130,170,0.22);
  --hp-border-blue:   rgba(79,168,232,0.32);

  --hp-text:          #eef2f8;
  --hp-text-dim:      #8fa3be;
  --hp-text-head:     #f8f4ea;

  --hp-shadow-sm:     0 4px 16px rgba(0,0,0,0.42);
  --hp-shadow-md:     0 12px 40px rgba(0,0,0,0.54);
  --hp-shadow-lg:     0 28px 80px rgba(0,0,0,0.66);
  --hp-shadow-gold:   0 0 32px rgba(231,185,93,0.18);

  --hp-trans:         all 0.22s cubic-bezier(.4,0,.2,1);
  --hp-trans-slow:    all 0.44s cubic-bezier(.4,0,.2,1);

  /* ── Szerokość panelu treści — węższa żeby tło było widoczne ── */
  --hp-content-max:   1100px;
  --hp-content-pad:   28px;
}

/* ─────────────────────────── 2. RESET ─────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html,body { min-height: 100%; }

body {
  margin: 0 !important;
  padding: 0;
  font-family: "Inter","Segoe UI",Arial,sans-serif !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp-text) !important;
  background:
    linear-gradient(180deg,
      rgba(5,8,16,0.22) 0%,
      rgba(5,8,16,0.10) 40%,
      rgba(5,8,16,0.32) 100%),
    url("/assets/hero-tlo.png?v=20260628") center center / cover fixed no-repeat,
    var(--hp-bg) !important;
}

/* Subtelna aura — NIE mgła */
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 55% 35% at 82% 8%,  rgba(79,168,232,0.09) 0%,transparent 58%),
    radial-gradient(ellipse 38% 28% at 8%  82%,  rgba(231,185,93,0.07) 0%,transparent 52%);
}
body > * { position:relative; z-index:1; }

/* ─────────────────────────── 3. TYPOGRAFIA ─────────────────────────── */
h1,h2,h3,h4 {
  font-family:"Cinzel","Segoe UI",serif !important;
  color:var(--hp-text-head) !important;
  letter-spacing:0.02em;
  line-height:1.2;
}
h1 { font-size:2.2rem;  font-weight:700; margin:0 0 4px; }
h2 { font-size:1.4rem;  font-weight:600; margin-top:28px; margin-bottom:12px;
     border-bottom:1px solid var(--hp-border-soft); padding-bottom:7px; }
h3 { font-size:1.05rem; font-weight:600; margin-top:0; margin-bottom:12px; }

p,span,div,label,td,th,li { color:var(--hp-text); }

a {
  color:var(--hp-blue) !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
  transition:var(--hp-trans);
  cursor:pointer !important;
}
a:hover {
  color:var(--hp-gold-bright) !important;
  text-shadow:0 0 12px var(--hp-gold-glow);
}

code,pre {
  font-family:"Fira Mono","Consolas",monospace;
  background:rgba(79,168,232,0.10);
  border:1px solid var(--hp-border-blue);
  border-radius:4px;
  padding:1px 6px;
  font-size:0.88em;
  color:var(--hp-blue);
}

/* ─────────────────────────── 4. EKRAN LOGOWANIA ─────────────────────────── */
.hp-auth-page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px clamp(16px,6vw,100px);
}

.hp-auth-card {
  width:min(420px,calc(100vw - 24px));
  padding:34px 30px 30px;
  border:1px solid var(--hp-border);
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(18,26,38,0.94) 0%,rgba(8,12,20,0.96) 100%);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--hp-shadow-lg),0 0 0 1px rgba(231,185,93,0.12) inset,var(--hp-shadow-gold);
}
.hp-auth-card::before {
  content:"";
  position:absolute;
  top:0;left:10%;right:10%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--hp-gold) 30%,var(--hp-gold-bright) 50%,var(--hp-gold) 70%,transparent);
  border-radius:0 0 2px 2px;
  opacity:0.85;
}
.hp-auth-card::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,rgba(79,168,232,0.12),transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%,rgba(231,185,93,0.07),transparent 60%);
}
.hp-auth-card > * { position:relative; z-index:1; }

/* ────────────────────────────────────────────────────────────
   FIX #1: Logo logowania — usunięcie białego tła
   PNG ma białe/szare piksele wokół emblematu.
   Używamy mix-blend-mode:screen żeby białe tło "znikło"
   na ciemnym tle karty. Działa bez edycji pliku graficznego.
   ──────────────────────────────────────────────────────────── */
.hp-auth-logo {
  display:block;
  width:180px;
  height:180px;
  object-fit:contain;
  object-position:center;
  margin:0 auto 18px;
  /* screen sprawia że białe piksele stają się przezroczyste na ciemnym tle */
  mix-blend-mode:screen;
  filter:
    drop-shadow(0 0 18px rgba(79,168,232,0.38))
    drop-shadow(0 6px 20px rgba(0,0,0,0.60));
  transition:var(--hp-trans-slow);
  /* Brak border-radius, brak tła, brak ramki */
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}
.hp-auth-logo:hover {
  filter:
    drop-shadow(0 0 28px rgba(231,185,93,0.55))
    drop-shadow(0 6px 20px rgba(0,0,0,0.60));
  transform:scale(1.05);
}

.hp-auth-title {
  margin:6px 0 0;
  font-size:2.6rem;
  font-weight:900;
  text-align:center;
  background:linear-gradient(160deg,#fff8e8 30%,var(--hp-gold) 80%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;
  letter-spacing:0.06em;
}

.hp-auth-subtitle,.hint { color:var(--hp-text-dim) !important; font-size:13px; }
.hp-auth-subtitle {
  margin:6px 0 22px;
  text-align:center;
  font-style:italic;
  letter-spacing:0.04em;
}

.hp-auth-card label,
form label {
  display:block;
  margin-top:13px;
  margin-bottom:4px;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--hp-text-dim) !important;
}
.hp-auth-card button { margin-top:20px; width:100%; }

/* ─────────────────────────── 5. KOMUNIKATY ─────────────────────────── */
.hp-error,.error   { color:var(--hp-danger)  !important; font-weight:700; }
.hp-success,.success { color:var(--hp-success) !important; font-weight:700; }
.hp-warning        { color:var(--hp-warning) !important; font-weight:600; }
.hint,.hp-muted    { color:var(--hp-text-dim) !important; font-size:13px; }
.hp-notice {
  background:rgba(79,168,232,0.08);
  border:1px solid var(--hp-border-blue);
  border-radius:8px;
  padding:10px 14px;
  margin:10px 0;
  font-size:13px;
  color:var(--hp-text-dim) !important;
}

/* ─────────────────────────── 6. POLA FORMULARZY ─────────────────────────── */
input,select,textarea,
.Select-control,.Select-menu-outer,.Select-option,.VirtualizedSelectOption {
  box-sizing:border-box;
  background:rgba(6,9,16,0.88) !important;
  color:var(--hp-text) !important;
  border:1px solid rgba(100,130,170,0.38) !important;
  border-radius:7px !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:14px !important;
  transition:var(--hp-trans);
}
input,select,textarea {
  width:100%;
  max-width:400px;
  padding:9px 12px !important;
  margin-top:4px;
}
input[type="checkbox"],
input[type="radio"] {
  width:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  height:16px !important;
  padding:0 !important;
  margin:0 6px 0 0 !important;
  display:inline-block !important;
  vertical-align:middle !important;
  accent-color:var(--hp-gold);
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer;
}
input:focus,select:focus,textarea:focus,.Select-control:focus-within {
  outline:none !important;
  border-color:var(--hp-gold) !important;
  box-shadow:0 0 0 3px rgba(231,185,93,0.14),inset 0 0 0 1px rgba(231,185,93,0.08) !important;
  background:rgba(8,12,20,0.95) !important;
}
input::placeholder,textarea::placeholder { color:rgba(143,163,190,0.50) !important; }

/* Dash Select */
.Select-value-label,.Select-placeholder,.Select-input input { color:var(--hp-text) !important; }
.Select-option.is-focused,.VirtualizedSelectFocusedOption { background:rgba(42,70,105,0.95) !important; }
.Select-arrow-zone { color:var(--hp-text-dim) !important; }

/* ─────────────────────────── 7. PRZYCISKI ─────────────────────────── */
button,input[type="submit"],.hp-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:9px 18px !important;
  border-radius:7px !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-weight:700 !important;
  font-size:13px !important;
  cursor:pointer !important;
  transition:var(--hp-trans) !important;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(231,185,93,0.60) !important;
  color:#0a0e18 !important;
  background:linear-gradient(180deg,#f5d98a 0%,#e7b95d 35%,#c8882a 72%,#a86520 100%) !important;
  box-shadow:0 4px 18px rgba(0,0,0,0.38),0 0 20px rgba(231,185,93,0.16),inset 0 1px rgba(255,255,255,0.28) !important;
  letter-spacing:0.04em;
  text-shadow:0 1px 2px rgba(0,0,0,0.18);
}
button::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 50%);
  pointer-events:none;
}
button:hover,input[type="submit"]:hover,.hp-button:hover {
  filter:brightness(1.12) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 28px rgba(0,0,0,0.42),0 0 32px rgba(231,185,93,0.30),inset 0 1px rgba(255,255,255,0.32) !important;
}
button:active,input[type="submit"]:active {
  transform:translateY(0) !important;
  filter:brightness(0.96) !important;
}

.hp-small-button {
  min-height:26px !important;
  padding:3px 9px !important;
  font-size:12px !important;
  border-radius:5px !important;
}
.hp-danger-zone button,
button[name="action"][value*="delete"],
button[name="action"][value*="remove"],
button[name="action"][value*="Usuń"],
button[name="action"][value*="admin_delete"] {
  border:1px solid rgba(255,124,96,0.50) !important;
  color:#fff0ee !important;
  background:linear-gradient(180deg,rgba(180,60,40,0.95) 0%,rgba(140,35,22,0.98) 100%) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.38),0 0 16px rgba(255,100,70,0.12) !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.38);
}
.hp-inline-form button,.hp-small-button {
  border:1px solid rgba(100,130,170,0.40) !important;
  color:var(--hp-text) !important;
  background:linear-gradient(180deg,rgba(28,40,60,0.92) 0%,rgba(16,24,38,0.96) 100%) !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.30) !important;
  text-shadow:none;
}
.hp-inline-form button:hover,.hp-small-button:hover {
  border-color:var(--hp-blue) !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.34),0 0 12px rgba(79,168,232,0.20) !important;
}

/* ─────────────────────────── 8. CHECKBOX ─────────────────────────── */
.hp-check {
  display:flex !important;
  align-items:center;
  gap:9px;
  cursor:pointer;
  margin-top:8px;
}
.hp-check input[type="checkbox"] {
  width:17px !important;
  max-width:17px !important;
  height:17px;
  margin:0 !important;
  padding:0 !important;
  accent-color:var(--hp-gold);
  cursor:pointer;
  border-radius:4px !important;
}
.hp-check label {
  margin:0 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:500 !important;
  cursor:pointer;
}

/* ─────────────────────────── 9. NAGŁÓWEK ─────────────────────────── */
.hp-shell { min-height:100vh; }

.hp-header,#header {
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(180deg,rgba(7,11,18,0.97) 0%,rgba(5,8,14,0.94) 100%) !important;
  border-bottom:1px solid var(--hp-border) !important;
  box-shadow:0 2px 32px rgba(0,0,0,0.55),var(--hp-shadow-gold);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.hp-header::after,#header::after {
  content:"";
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--hp-gold-dim) 20%,var(--hp-gold) 50%,var(--hp-gold-dim) 80%,transparent 100%);
  opacity:0.60;
}

.hp-header-inner {
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 24px 8px;
  max-width:var(--hp-content-max);
  margin:0 auto;
}

/* ────────────────────────────────────────────────────────────
   FIX #2: Logo w nagłówku — przezroczyste tło
   mix-blend-mode:screen eliminuje białe tło na ciemnym pasku
   ──────────────────────────────────────────────────────────── */
.hp-mark {
  width:58px;
  height:58px;
  object-fit:contain;
  object-position:center;
  /* Brak ramki, brak tła, brak border-radius */
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  /* screen usuwa białe piksele PNG na ciemnym tle nagłówka */
  mix-blend-mode:screen;
  filter:
    drop-shadow(0 0 12px rgba(79,168,232,0.28))
    drop-shadow(0 3px 10px rgba(0,0,0,0.50));
  transition:var(--hp-trans-slow);
}
.hp-mark:hover {
  filter:
    drop-shadow(0 0 20px rgba(231,185,93,0.55))
    drop-shadow(0 3px 10px rgba(0,0,0,0.50));
  transform:scale(1.07) rotate(-2deg);
}

.hp-brand h1,#header h1 {
  margin:0 !important;
  font-size:1.9rem !important;
  font-weight:900 !important;
  letter-spacing:0.06em !important;
  background:linear-gradient(160deg,#ffffff 30%,var(--hp-gold) 90%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none !important;
}
.hp-brand p,#header p {
  margin:3px 0 0 !important;
  color:var(--hp-text-dim) !important;
  font-size:11px !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ─────────────────────────── 10. NAWIGACJA ─────────────────────────── */
.hp-nav,#navigation {
  width:100%;
  border-collapse:separate !important;
  border-spacing:3px 0 !important;
  padding:0 24px 12px !important;
  background:transparent !important;
  max-width:var(--hp-content-max);
  margin:0 auto;
}
.hp-nav a,#navigation a,nav a,#navigation th a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:30px;
  padding:5px 11px;
  border-radius:6px;
  color:var(--hp-text-dim) !important;
  font-weight:600 !important;
  font-size:12px !important;
  text-decoration:none !important;
  text-transform:uppercase;
  letter-spacing:0.06em;
  border:1px solid transparent;
  transition:var(--hp-trans);
}
.hp-nav a:hover,#navigation a:hover,nav a:hover,
#navigation th:hover a,#navigation th:hover {
  background:rgba(231,185,93,0.10) !important;
  border-color:var(--hp-border) !important;
  color:var(--hp-gold) !important;
  text-shadow:0 0 14px var(--hp-gold-glow);
  text-decoration:none !important;
}
#header table,#header tbody,#header tr,#header th,
#navigation tbody,#navigation tr,#navigation th {
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
}
#navigation th { cursor:pointer !important; }

/* ─────────────────────────── 11. CONTENT AREA ─────────────────────────── */
/* ────────────────────────────────────────────────────────────
   FIX #3: Zwężona strefa treści — więcej tła widoczne po bokach
   --hp-content-max = 1100px zamiast 1540px
   ──────────────────────────────────────────────────────────── */
#page_content,main {
  max-width:var(--hp-content-max) !important;
  margin:0 auto !important;
  padding:26px var(--hp-content-pad) 56px !important;
}

/* ─────────────────────────── 12. KARTY / FORMULARZE ─────────────────────────── */
#page_content > div,
main > form,
form {
  border:1px solid var(--hp-border-soft) !important;
  border-radius:12px !important;
  background:linear-gradient(160deg,rgba(14,20,30,0.88) 0%,rgba(7,10,18,0.90) 100%) !important;
  box-shadow:var(--hp-shadow-md);
  padding:16px !important;
  margin:10px 0 !important;
}
.hp-card {
  padding:20px !important;
  margin:14px 0 !important;
  border:1px solid var(--hp-border-soft) !important;
  border-radius:12px !important;
  background:linear-gradient(160deg,rgba(14,20,30,0.90) 0%,rgba(7,10,18,0.92) 100%) !important;
  box-shadow:var(--hp-shadow-md);
  transition:var(--hp-trans-slow);
  position:relative;
  overflow:hidden;
}
.hp-card::before {
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,185,93,0.30) 40%,rgba(231,185,93,0.50) 50%,rgba(231,185,93,0.30) 60%,transparent);
}
.hp-card > * { position:relative; z-index:1; }
.hp-card:hover {
  border-color:rgba(100,130,170,0.38) !important;
  box-shadow:var(--hp-shadow-md),0 0 0 1px rgba(231,185,93,0.08) !important;
}
.hp-card h3 {
  margin-top:0;
  color:var(--hp-gold) !important;
  font-size:1.0rem;
  letter-spacing:0.04em;
}
.hp-danger-zone { border-color:rgba(255,124,96,0.30) !important; }
.hp-danger-zone::before {
  background:linear-gradient(90deg,transparent,rgba(255,100,70,0.20) 50%,transparent);
}

.hp-inline-action,.hp-inline-form {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:2px 6px 2px 0 !important;
}
.hp-inline-form {
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  margin:0 !important;
}
.hp-inline-action {
  font-size:13px;
  font-weight:600;
  color:var(--hp-blue) !important;
  text-decoration:underline !important;
}
.hp-inline-action:hover { color:var(--hp-gold) !important; }
.hp-inline-secondary-button {
  min-height:26px !important;
  padding:3px 9px !important;
  font-size:12px !important;
}

/* ─────────────────────────── 13. TABELE ─────────────────────────── */
table {
  color:var(--hp-text) !important;
  border-collapse:collapse !important;
  width:100%;
  border-radius:10px;
  overflow:hidden;
}
#page_content table,#page_content tbody,#page_content tr,#page_content td,#page_content th,
main table,main tbody,main tr,main td,main th { overflow:visible !important; }
#page_content > div,main,.hp-card,.hp-panel { overflow:visible !important; }

th {
  background:linear-gradient(180deg,rgba(20,28,44,0.98) 0%,rgba(12,18,30,0.98) 100%) !important;
  color:var(--hp-gold) !important;
  font-family:"Cinzel",serif !important;
  font-weight:700 !important;
  font-size:11px !important;
  text-transform:uppercase;
  letter-spacing:0.10em;
  border:1px solid rgba(231,185,93,0.20) !important;
  padding:10px 11px !important;
  vertical-align:middle !important;
  white-space:nowrap;
}
td {
  border:1px solid rgba(80,106,140,0.22) !important;
  background:rgba(10,14,22,0.80) !important;
  color:var(--hp-text) !important;
  padding:9px 11px !important;
  vertical-align:top !important;
  font-size:13px;
  line-height:1.5;
}
tr:nth-child(even) td { background:rgba(12,17,26,0.82) !important; }
tbody tr:hover td {
  background:rgba(24,36,56,0.90) !important;
  border-color:rgba(231,185,93,0.18) !important;
}
.hp-pending-table th {
  background:linear-gradient(180deg,rgba(14,22,40,0.98) 0%,rgba(9,14,26,0.98) 100%) !important;
  color:var(--hp-blue) !important;
}

/* ─────────────────────────── 14. SEKCJE USTAWIEŃ ─────────────────────────── */
.hp-settings-section {
  margin:8px 0;
  border-radius:10px;
  overflow:visible;
  border:1px solid var(--hp-border-soft);
  position:relative;
  z-index:1;
}
.hp-settings-section:has(.Select.is-open) { z-index:20000; }

/* Toggle sekcji — NIE wygląda jak zwykły złoty button */
.hp-section-toggle {
  width:100% !important;
  text-align:left !important;
  padding:11px 16px !important;
  background:linear-gradient(90deg,rgba(16,24,38,0.96) 0%,rgba(12,18,30,0.98) 100%) !important;
  border:none !important;
  border-bottom:1px solid var(--hp-border-soft) !important;
  border-radius:0 !important;
  color:var(--hp-gold) !important;
  font-family:"Cinzel",serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
  transition:var(--hp-trans) !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-shadow:0 0 10px var(--hp-gold-glow) !important;
}
.hp-section-toggle::before {
  content:"▶";
  font-size:9px;
  opacity:0.70;
  transition:transform 0.2s ease;
  flex-shrink:0;
}
.hp-section-toggle:hover {
  background:linear-gradient(90deg,rgba(26,38,60,0.98) 0%,rgba(18,28,46,0.98) 100%) !important;
  color:var(--hp-gold-bright) !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

.hp-section-body {
  background:rgba(8,12,20,0.80) !important;
  border-top:1px solid var(--hp-border-soft);
  padding:14px 16px !important;
}

/* ────────────────────────────────────────────────────────────
   FIX #4: Wiersz ustawień — opis PO PRAWEJ stronie
   Układ: [etykieta 190px] [kontrolka 220px] [opis reszta]
   Wcześniej opis był pod kontrolką (grid-row:2), teraz w kolumnie 3.
   Plakietki źródła nadal w pełnej szerokości (row 2).
   ──────────────────────────────────────────────────────────── */
.hp-setting-row {
  display:grid;
  grid-template-columns:minmax(150px,190px) minmax(0,240px) minmax(260px,1fr);
  grid-template-rows:auto auto;
  gap:5px 14px;
  padding:11px 0;
  border-bottom:1px solid rgba(80,106,140,0.14);
  align-items:start;
  overflow:visible;
  position:relative;
}
.hp-setting-row:last-child { border-bottom:none; }

.hp-setting-label   { grid-column:1; grid-row:1; }
.hp-setting-control {
  grid-column:2;
  grid-row:1;
  min-width:0;
  max-width:240px;
  position:relative;
  z-index:2;
}
.hp-setting-description { grid-column:3; grid-row:1; }
.hp-setting-sources { grid-column:1 / -1; grid-row:2; }

.hp-setting-label label {
  font-weight:700 !important;
  font-size:13px !important;
  color:var(--hp-text) !important;
  margin:0 !important;
}
.hp-setting-label > div {
  font-size:10px !important;
  color:var(--hp-text-dim) !important;
  margin-top:2px;
  font-family:"Fira Mono",monospace;
}
.hp-setting-control input,
.hp-setting-control select,
.hp-setting-control .Select,
.hp-setting-control .Select-control { max-width:100%; width:100% !important; }

.hp-setting-description {
  font-size:12px;
  color:var(--hp-text-dim) !important;
  line-height:1.5;
  padding-top:3px;
}

.hp-setting-sources {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:3px;
}
.hp-setting-source {
  display:inline-block;
  padding:2px 8px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.03em;
}
.hp-setting-source-active {
  background:rgba(110,231,168,0.10);
  border:1px solid rgba(110,231,168,0.28);
  color:var(--hp-success) !important;
}
.hp-setting-source-pending {
  background:rgba(231,185,93,0.10);
  border:1px solid rgba(231,185,93,0.28);
  color:var(--hp-gold) !important;
}

/* Stara tabela ustawień (Dash fallback) */
.hp-settings-table { font-size:13px; }
.hp-settings-table th,.hp-settings-table td { padding:7px 9px !important; }
.hp-settings-table input,.hp-settings-table .Select,.hp-settings-table .Select-control { max-width:180px; }

/* ────────────────────────────────────────────────────────────
   FIX #5: Puste zakładki Dash — ukrycie pustych div-ów
   Dash renderuje puste div-y jako placeholder dla callbacków.
   Ukrywamy te które są całkowicie puste.
   ──────────────────────────────────────────────────────────── */
#page_content > div:empty,
#page_content > div > div:empty {
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  box-shadow:none !important;
}
/* Ukryj też divisieje z tylko whitespace — obsługiwane przez :empty */
/* Ukryj placeholder-y Dash które mają tylko ukryty jsLoad graph */
#jsLoad,
#_dash-loading,
._dash-loading,
._dash-loading-callback,
._dash-undo-redo,
._dash-undo-redo *,
._dash-dev-tools,
.dash-debug-menu,
.dash-debug-menu__outer,
#_dash-global-error-container:empty,
#_dash-app-content > div:empty,
div:has(> #jsLoad:only-child),
div:has(> .js-plotly-plot:only-child[style*="display: none"]) {
  display:none !important;
}

/* ─────────────────────────── 15. DASH SELECT ─────────────────────────── */
.Select,.Select-control {
  position:relative !important;
  background:rgba(6,9,16,0.88) !important;
  border-color:rgba(100,130,170,0.38) !important;
}
.Select.is-open { z-index:9999 !important; }
.Select-menu-outer {
  position:absolute !important;
  z-index:10000 !important;
  width:auto !important;
  min-width:100% !important;
  max-width:min(420px, calc(100vw - 40px)) !important;
  max-height:340px !important;
  overflow-y:auto !important;
  box-shadow:var(--hp-shadow-lg) !important;
  border:1px solid var(--hp-border-soft) !important;
  border-radius:8px !important;
  background:rgba(10,15,24,0.98) !important;
}
.Select-menu,.VirtualizedSelectOptions { max-height:320px !important; }
.Select-option {
  background:transparent !important;
  color:var(--hp-text) !important;
  padding:8px 11px !important;
  transition:var(--hp-trans);
}
.Select-option.is-focused,.VirtualizedSelectFocusedOption {
  background:rgba(42,70,105,0.92) !important;
  color:var(--hp-text) !important;
}
.Select-option.is-selected {
  background:rgba(231,185,93,0.14) !important;
  color:var(--hp-gold) !important;
}


/* ─────────────────────────── 16. ACCORDION / DETAILS ─────────────────────────── */
details,summary,div[role="tab"],.accordion-button,.accordion-header {
  color:var(--hp-text) !important;
  background:var(--hp-surface-hi) !important;
  border-color:var(--hp-border-soft) !important;
  cursor:pointer !important;
}
summary { list-style:none; padding:9px 13px; }
summary:hover,div[role="tab"]:hover {
  background:rgba(26,38,58,0.96) !important;
  color:var(--hp-gold) !important;
}

/* ─────────────────────────── 17. SCROLLBAR ─────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:rgba(5,8,14,0.80); }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,var(--hp-gold-dim),#6a4318);
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover { background:var(--hp-gold); }

/* ─────────────────────────── 18. MISC ─────────────────────────── */
.hp-form-hint { font-size:12px; color:var(--hp-text-dim) !important; margin-top:4px; }
.flash-message,[class*="alert"],.hp-alert {
  padding:11px 15px;
  border-radius:8px;
  margin:10px 0;
  font-weight:600;
  font-size:14px;
}

/* ─────────────────────────── 19. RESPONSYWNOŚĆ ─────────────────────────── */
@media (max-width: 1100px) {
  :root {
    --hp-content-max: 100%;
    --hp-content-pad: 20px;
  }
}

@media (max-width: 900px) {
  /* Opis pod kontrolką gdy za mało miejsca */
  .hp-setting-row {
    grid-template-columns:160px 1fr;
    grid-template-rows:auto auto auto;
  }
  .hp-setting-label       { grid-column:1;    grid-row:1; }
  .hp-setting-control     { grid-column:2;    grid-row:1; }
  .hp-setting-description { grid-column:1/-1; grid-row:2; }
  .hp-setting-sources     { grid-column:1/-1; grid-row:3; }
}

@media (max-width: 720px) {
  body {
    background-attachment:scroll !important;
    background-position:65% center !important;
  }
  .hp-auth-page { padding:20px 14px; align-items:flex-start; padding-top:55px; }
  .hp-auth-card { padding:26px 20px 22px; }
  .hp-auth-logo { width:120px; height:120px; }
  .hp-auth-title { font-size:2.1rem; }

  .hp-header-inner { padding:9px 13px 7px; gap:11px; }
  .hp-mark { width:46px; height:46px; }
  .hp-brand h1,#header h1 { font-size:1.4rem !important; }
  .hp-brand p,#header p { display:none; }

  #navigation { padding:0 7px 9px !important; border-spacing:3px !important; }
  #navigation th { display:inline-block; margin:2px 0; }
  #navigation a { font-size:11px !important; padding:4px 7px; }

  #page_content,main { padding:13px 10px 36px !important; }
  input,select,textarea { max-width:100% !important; }

  .hp-setting-row {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
  }
  .hp-setting-label       { grid-column:1; grid-row:1; }
  .hp-setting-control     { grid-column:1; grid-row:2; }
  .hp-setting-description { grid-column:1; grid-row:3; }
  .hp-setting-sources     { grid-column:1; grid-row:4; }

  table,thead,tbody,th,td,tr { display:block !important; }
  thead tr { position:absolute; top:-9999px; left:-9999px; }
  tr {
    border:1px solid var(--hp-border-soft) !important;
    border-radius:8px !important;
    margin-bottom:9px !important;
    overflow:hidden;
  }
  td {
    border:none !important;
    border-bottom:1px solid rgba(80,106,140,0.14) !important;
    position:relative;
    padding-left:40% !important;
  }
  td:before {
    position:absolute;
    top:9px;
    left:11px;
    width:36%;
    white-space:nowrap;
    font-weight:700;
    color:var(--hp-text-dim) !important;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
}

@media (max-width: 400px) {
  .hp-auth-title { font-size:1.8rem; }
  .hp-brand h1,#header h1 { font-size:1.2rem !important; }
}

/* ─────────────────────────── 20. REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}

/* ─────────────────────────── 21. PRINT ─────────────────────────── */
@media print {
  body { background:#fff !important; color:#000 !important; }
  .hp-header,#header { position:static; box-shadow:none; }
  button { display:none !important; }
}