/* Style specyficzne dla hub.html (hierarchia Klienci → Kampanie → Formaty →
   Assety) — prymitywy (przyciski, dialogi, .login-overlay/.login-box) reużyte
   ze style.css, tu tylko to, czego tam nie ma. */

/* --radius/--radius-sm (style.css) już są 1:1 zgodne z lqt-games (8px/5px —
   to ta sama rodzina stylu, patrz .catalog-* w style.css, też stamtąd portowane).
   Karty/sekcje zbudowane w hubie w tej sesji używały jednak tych samych małych
   wartości tam, gdzie lqt-games celowo idzie większym promieniem (12-20px) i
   wyraźniejszym cieniem dla elementów "kartowych" — stąd dodatkowy, większy
   stopień skali tylko dla tego rodzaju komponentów. */
:root {
  --radius-lg: 14px;
  --shadow-card: 0 2px 8px rgba(15,23,42,.06);
  --shadow-card-hover: 0 10px 28px rgba(15,23,42,.12);
  /* Pomarańczowy CTA (lqt-games --wiz-accent) — obok teal (--accent-dark) jako
     drugi, celowo kontrastowy kolor zarezerwowany wyłącznie dla głównych akcji
     (dodaj/uzupełnij) i nazwy kampanii w nagłówku, na jawne życzenie użytkownika. */
  --cta: #d14310;
  --cta-dark: #a8360d;
  /* Kolorystyka huba przestawiona z teal na pomarańczowy LiquidThread (na
     życzenie) — reużywa dokładnie ten sam odcień co --cta (CTA miało swój
     pomarańcz już wcześniej, teraz staje się głównym akcentem całego huba,
     nie tylko przycisków). Nadpisuje --accent/--accent-dark ze style.css
     TYLKO tu (ten plik ładuje się wyłącznie w hub.html, stary katalog
     zostaje przy swoim teal, patrz index.html — nie ładuje hub.css). */
  --accent: #f8e3db;
  --accent-dark: #d14310;
}

.btn--cta { background: var(--cta); color: #fff; font-weight: 600; }
.btn--cta:hover { background: var(--cta-dark); }

.hub-login-forgot {
  margin-top: 14px;
  font-size: 12px;
}
.hub-login-forgot a {
  color: rgba(255,255,255,.5);
  text-decoration: underline;
}
.hub-login-forgot a:hover { color: #fff; }

.hub-client-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.hub-user-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 8px;
}

#hub-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.hub-main {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

.hub-placeholder {
  max-width: 560px;
  margin: 60px auto;
  text-align: center;
  color: var(--text-muted);
}
.hub-placeholder h1 {
  font-size: 22px;
  color: var(--text);
  margin-bottom: 12px;
}

.hub-view-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.hub-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 0;
}
.hub-empty--sm { padding: 8px 0; font-size: 12px; }

/* ─── Topnav (Kampania → Format → Asset) ───────────────────────────────────── */
.hub-topnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--toolbar-border);
  box-shadow: 0 2px 6px rgba(15,23,42,.04);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
.hub-topnav__logo-btn {
  background: none; border: none; padding: 2px; border-radius: var(--radius-sm);
  display: flex; align-items: center; flex-shrink: 0;
}
.hub-topnav__logo-btn:hover { background: rgba(0,0,0,.05); }
.hub-topnav__logo { height: 44px; width: auto; object-fit: contain; flex-shrink: 0; }
.hub-topnav__nav-group { display: flex; align-items: center; gap: 10px; }

.hub-menu-wrap { position: relative; flex-shrink: 0; }
.hub-menu-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.hub-menu-btn:hover { background: rgba(0,0,0,.05); color: var(--text); }
.hub-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--panel-border); border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  display: flex; flex-direction: column; min-width: 190px; padding: 4px;
}
.hub-menu__item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-family: inherit;
  color: var(--text);
}
.hub-menu__item:hover { background: #f1f5f9; }
.hub-menu__item--static {
  color: var(--text-muted); font-size: 12px; cursor: default; border-top: 1px solid var(--panel-border);
  margin-top: 2px; padding-top: 10px; border-radius: 0;
}
.hub-menu__item--static:hover { background: none; }
/* ─── "Pigułka" z rozwijaną po najechaniu listą (klient/kampania/format/asset) —
   wzorowana na lqt-games, zamiast natywnych <select> (patrz hub-utils.js
   renderPillSelect). Hover zamiast kliku: zero martwej strefy między triggerem
   a menu (top:100% bez odstępu), żeby mysz jadąca w dół nie "gubiła" hovera. */
.hub-pill { position: relative; flex-shrink: 0; }
/* min-width tu dawał sporą martwą przestrzeń wewnątrz pigułki, kiedy nazwa
   klienta jest krótka ("TEST") — wyglądało to jak przerwa między pigułkami,
   nie jak odstęp. Dociągniemy szerokość osobno, kiedy realnie dojdzie logo
   klienta (na razie sama ikonka 🏢 nie potrzebuje dodatkowego miejsca). */
.hub-pill__trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: inherit; color: var(--text);
  background: #fff; border: 1px solid var(--panel-border); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px 12px; max-width: 240px;
  cursor: pointer; transition: border-color .12s;
}
.hub-pill__trigger:hover { border-color: var(--accent-dark); }
.hub-pill__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 1; }
.hub-pill__toplabel {
  font-size: 10px; font-weight: 700; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .03em;
}
.hub-pill__value { display: flex; align-items: center; gap: 6px; width: 100%; }
.hub-pill__icon { flex-shrink: 0; font-size: 14px; line-height: 1; }
.hub-pill__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.hub-pill__chevron { flex-shrink: 0; color: var(--text-muted); }

.hub-pill--static .hub-pill__trigger {
  cursor: default; box-shadow: none; background: transparent; border-color: transparent;
  padding-left: 2px;
}

.hub-pill__menu {
  position: absolute; top: 100%; left: 0; padding-top: 4px; z-index: 40;
  display: none; flex-direction: column;
  min-width: 100%; width: max-content; max-width: 280px; max-height: 320px; overflow-y: auto;
}
.hub-pill:hover .hub-pill__menu,
.hub-pill:focus-within .hub-pill__menu { display: flex; }
.hub-pill__option, .hub-pill__empty {
  margin: 0; background: #fff; border: 1px solid var(--panel-border); border-top: none;
}
.hub-pill__option:first-child, .hub-pill__empty:first-child { border-top: 1px solid var(--panel-border); border-radius: var(--radius) var(--radius) 0 0; }
.hub-pill__option:last-child, .hub-pill__empty:last-child { border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-card-hover); }
.hub-pill__option {
  display: block; width: 100%; text-align: left; white-space: nowrap;
  background: #fff; border-color: var(--panel-border);
  padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--text);
}
.hub-pill__option:hover { background: #f1f5f9; }
.hub-pill__option--active { color: var(--accent-dark); font-weight: 600; }
.hub-pill__empty { padding: 8px 12px; font-size: 12px; color: var(--text-muted); }

.hub-topnav__info {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hub-topnav__info:hover { color: var(--text); background: #f1f5f9; }
.hub-topnav__spacer { flex: 1; }

/* ─── Lista klientów ────────────────────────────────────────────────────────── */
.hub-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.hub-client-card {
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-weight: 600;
  color: var(--text);
  transition: box-shadow .15s, transform .15s;
}
.hub-client-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.hub-client-card--add {
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
  background: #fafbfc;
  box-shadow: none;
  border-style: dashed;
  font-weight: 500;
}
.hub-client-card--add:hover { box-shadow: none; border-color: var(--accent-dark); color: var(--accent-dark); }
.hub-client-card--add .plus { font-size: 24px; line-height: 1; }

/* ─── Strona główna klienta ───────────────────────────────────────────────────
   Sidebar reużywa .catalog-sidebar ze starego katalogu (patrz index.html).
   Centralna część NIE reużywa już .catalog-tabs/.catalog-carousel/.catalog-card
   (pozioma karuzela kart-telefonów) — na życzenie użytkownika zastąpiona
   filtrowaną/sortowalną listą assetów, patrz .hub-asset-list poniżej. */
.hub-main--home { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hub-client-home { flex: 1; }

.catalog-main--list { align-items: stretch; }
.catalog-header--left {
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
.catalog-header--left h1 {
  font-size: 19px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.hub-home-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.hub-home-header-row h1 { margin-right: 0; }

.hub-home-client-name { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.hub-home-campaign-name { font-size: 26px; font-weight: 700; color: var(--cta); letter-spacing: -.01em; }

.hub-view-toggle { display: flex; gap: 2px; background: #f1f5f9; border-radius: var(--radius); padding: 3px; }
.hub-view-toggle__btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 13px;
  transition: background .12s, box-shadow .12s, color .12s;
}
.hub-view-toggle__btn--active { background: #fff; color: var(--text); box-shadow: var(--shadow-card); }
.hub-view-toggle__btn:disabled { opacity: .4; cursor: not-allowed; }

.hub-mediaplan-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.hub-mediaplan-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text);
  background: #f8fafc; border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 5px 12px 5px 8px;
}
.hub-mediaplan-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hub-mediaplan-chip a { color: var(--text); font-weight: 600; text-decoration: none; }
.hub-mediaplan-chip a:hover { text-decoration: underline; }
.hub-mediaplan-chip__date { color: var(--text-muted); font-size: 11px; }
.hub-mediaplan-add-link {
  background: none; border: none; font-size: 12px; font-weight: 600;
  color: var(--cta); padding: 5px 4px;
}
.hub-mediaplan-add-link:hover { text-decoration: underline; }

.hub-add-menu-wrap { position: relative; margin-top: 8px; display: inline-block; }
.hub-add-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  background: #fff; border: 1px solid var(--panel-border); border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  display: flex; flex-direction: column;
  min-width: 170px; padding: 4px;
}
.hub-add-menu button {
  text-align: left; background: none; border: none; border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; color: var(--text); font-family: inherit;
}
.hub-add-menu button:hover { background: #f1f5f9; }
.hub-mediaplan-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; flex-shrink: 0; }

.hub-asset-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}
.hub-asset-filters__spacer { flex: 1; }

/* Ten sam "segmented control" co .hub-view-toggle (kontener w stonowanym
   szarym tle, aktywny element = biała pigułka z cieniem) — dwa różne wzorce
   wizualne obok siebie w tym samym pasku filtrów wyglądały niespójnie. */
.hub-filter-icon-group { display: flex; gap: 2px; background: #f1f5f9; border-radius: var(--radius); padding: 3px; }
.hub-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font-size: 15px;
  color: var(--text-muted);
  transition: background .12s, box-shadow .12s, color .12s;
}
.hub-filter-icon:hover { color: var(--text); }
.hub-filter-icon--active {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: var(--shadow-card);
}

.hub-sections {
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Na życzenie: bez pudełek/ramek wokół sekcji — same nagłówki + kolorowa
   kreska wzdłuż lewej krawędzi, ograniczona dokładnie do wysokości TEJ sekcji
   (nie do następnej) — stąd odstęp między sekcjami jako gap kontenera, a nie
   wspólna linia-separator, która wcześniej łączyła je wizualnie w jeden ciąg. */
.hub-section {
  background: none;
  border: none;
  border-left: 3px solid var(--section-accent, transparent);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 14px;
}
.hub-section__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
  background: none;
  border: none;
  text-align: left;
}
.hub-section--collapsed .hub-section__header { padding-bottom: 0; }
.hub-section__chevron { transition: transform .15s; color: var(--text-muted); flex-shrink: 0; }
.hub-section--collapsed .hub-section__chevron { transform: rotate(-90deg); }
.hub-section__label {
  font-size: 13px; font-weight: 700; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .06em;
}
.hub-section__count {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: #eef1f5; border-radius: 999px; padding: 1px 8px;
}
.hub-section--collapsed .hub-section__body { display: none; }
.hub-section__body--rows {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hub-section__body--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.hub-asset-row {
  display: grid;
  grid-template-columns: 44px 1.6fr 100px 110px 36px 110px 90px auto;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--panel-item-border);
  font-size: 13px;
}
.hub-asset-row:last-child { border-bottom: none; }
.hub-asset-row[data-clickable="true"] { cursor: pointer; }
.hub-asset-row[data-clickable="true"]:hover { background: #f8fafc; }

.hub-asset-row__thumb {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: #eef1f5;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.hub-asset-row__img { width: 100%; height: 100%; object-fit: cover; }

.hub-asset-row__name {
  display: flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-asset-row__format {
  color: var(--text-muted); white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.hub-asset-row__progress { white-space: nowrap; }
.hub-asset-row__spec {
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-asset-row__spec-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #f1f5f9; color: var(--text-muted); border: none;
  font-size: 12px; cursor: pointer; padding: 0; flex-shrink: 0;
}
.hub-asset-row__spec-icon:hover { background: #e2e8f0; color: var(--text); }
.hub-asset-row__empty-cell { color: var(--panel-text-faint); }
.hub-asset-row__comments { white-space: nowrap; }
.hub-asset-row__actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
/* Menu ołówka (Edytuj/Logi/Usuń) — wspólne dla wierszy i kafelków, zastępuje
   dawne gołe 🗑 (tylko w "Potrzebne formaty") i zupełny brak zarządzania na
   kafelkach pozostałych sekcji. Samo menu jest JEDNYM, współdzielonym
   elementem doklejonym do <body> (position:fixed, pozycjonowany z JS) —
   .hub-asset-card ma overflow:hidden (do przycięcia miniaturki), więc menu
   zagnieżdżone wewnątrz karty byłoby obcinane i nieklikalne. */
.hub-asset-menu-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-muted); padding: 0; flex-shrink: 0;
}
.hub-asset-menu-btn:hover { background: #f1f5f9; color: var(--text); }
.hub-asset-menu {
  position: fixed; z-index: 500;
  background: #fff; border: 1px solid var(--panel-border); border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  display: flex; flex-direction: column; min-width: 120px; padding: 4px;
}
.hub-asset-menu[hidden] { display: none; }
.hub-asset-menu button {
  text-align: left; background: none; border: none; border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 12px; color: var(--text); font-family: inherit;
}
.hub-asset-menu button:hover { background: #f1f5f9; }
.hub-asset-menu button[data-action="delete"] { color: #dc2626; }
.hub-asset-menu button[data-action="delete"]:hover { background: rgba(239,68,68,.1); }

/* Potrzebne (placeholder z mediaplanu) — wyszarzone, brak miniaturki */
.hub-asset-row--placeholder { color: var(--text-muted); }
.hub-asset-row--placeholder .hub-asset-row__name { color: var(--text-muted); font-weight: 500; }

/* Zaakceptowane — delikatnie wyróżnione, nie pracujemy już nad nimi */
.hub-asset-row--done .hub-asset-row__thumb { filter: saturate(.7); }

@media (max-width: 900px) {
  .hub-asset-row { grid-template-columns: 36px 1fr auto; }
  .hub-asset-row__spec, .hub-asset-row__comments, .hub-asset-row__progress { display: none; }
}

/* ─── Kafelki (wszystkie sekcje poza "Potrzebne formaty") ─────────────────── */
.hub-asset-card {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: box-shadow .15s, transform .15s;
}
.hub-asset-card[data-clickable="true"] { cursor: pointer; }
.hub-asset-card[data-clickable="true"]:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.hub-asset-card__thumb {
  height: 110px;
  background: #eef1f5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hub-asset-card__img { width: 100%; height: 100%; object-fit: cover; }
.hub-asset-card__icon { font-size: 32px; opacity: .5; }

.hub-asset-card__body { padding: 10px 12px; flex: 1; }
.hub-asset-card__name {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-asset-card__meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.hub-asset-card__format { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

.hub-asset-card__actions {
  padding: 8px 12px; border-top: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hub-asset-card--done .hub-asset-card__thumb { filter: saturate(.7); }
.hub-asset-card__hint { font-size: 11px; color: var(--text-muted); font-style: italic; }

.hub-asset-card__spec-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: #f1f5f9; color: var(--text-muted); border: none; padding: 0; cursor: pointer;
}
.hub-asset-card__spec-icon:hover { background: #e2e8f0; color: var(--text); }

/* Progres akceptacji jako liczby per status — te same kolory co
   .status-tab__dot--* w panelu uwag assetu (new/todo/done). */
.hub-asset-card__stats { display: flex; gap: 5px; margin-top: 6px; }
.hub-asset-card__stat {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #fff;
}
.hub-asset-card__stat--new  { background: #60a5fa; }
.hub-asset-card__stat--todo { background: #f59e0b; }
.hub-asset-card__stat--done { background: #34d399; }

/* ─── "Zestaw" (banner set) — progres X/Y i odznaka w imporcie mediaplanu ─── */
.hub-asset-row__set-progress,
.hub-asset-card__meta .hub-asset-row__set-progress {
  font-size: 11px; font-weight: 600; color: #b45309;
  background: rgba(245,158,11,.14); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
.hub-mediaplan-set-badge {
  display: inline-block; font-size: 10px; font-weight: 600; color: #6366f1;
  background: rgba(99,102,241,.12); border-radius: 999px; padding: 1px 7px;
  margin-left: 6px; white-space: nowrap;
}

/* ─── Podgląd assetu "zestaw" (banner set) — brak treści dla aktywnego
   podformatu + pasek pobierania po akceptacji całości ─────────────────── */
.subitem-upload {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.88);
}
.subitem-upload__inner {
  background: #fff; border-radius: var(--radius); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  width: min(380px, 90%);
}
.subitem-upload__hint { font-size: 13px; color: var(--text-muted); margin: 0; }
.subitem-upload__input {
  font-size: 13px; padding: 8px 10px; border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.subitem-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; background: rgba(255,255,255,.96);
  border-top: 1px solid var(--panel-border);
}
.subitem-chip {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 10px;
  text-decoration: none; white-space: nowrap;
}
.subitem-chip--dl { background: rgba(52,211,153,.16); color: #0f8a5f; }
.subitem-chip--dl:hover { background: rgba(52,211,153,.28); }
.subitem-chip--missing { background: #f1f5f9; color: var(--text-muted); }

/* Status + akcja "Oznacz jako gotowe" — przeniesione z topnava na dół, prawy
   róg podglądu, na wysokości zielonego "+" (.fab-add, bottom:24px/left:24px)
   po przeciwnej stronie. Ta sama wysokość 52px żeby wizualnie się wyrównały. */
.asset-status-fab {
  position: absolute; bottom: 24px; right: 24px; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 8px 0 18px;
  background: #fff; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.asset-status-fab__badge { flex-shrink: 0; }
.asset-status-fab__btn {
  flex-shrink: 0; height: 40px;
  background: var(--accent-dark); color: #fff; border: none; border-radius: 999px;
  padding: 0 18px; font-size: 13px; font-weight: 600; font-family: inherit;
  white-space: nowrap; cursor: pointer; transition: background .12s;
}
.asset-status-fab__btn:hover:not(:disabled) { background: var(--cta-dark); }
.asset-status-fab__btn:disabled { background: rgba(52,211,153,.18); color: #0f8a5f; cursor: default; }
.asset-status-fab__undo {
  flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: var(--text-muted); border: none; border-radius: 50%;
  font-size: 14px; cursor: pointer; transition: background .12s, color .12s;
}
.asset-status-fab__undo:hover { background: #e2e8f0; color: var(--text); }

.hub-campaign-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 48vh;
  overflow-y: auto;
}
/* .catalog-review-row/__name/__line/__todo/__dot/__count/__arrow already
   exist in style.css (port z lqt-games, nieużywane do tej pory) — tu tylko
   stan aktywny i dopisany wiersz z terminem, specyficzne dla huba. */
.catalog-review-row {
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background .12s;
}
.catalog-review-row:hover { background: rgba(0,0,0,.04); }
.catalog-review-row--active { background: rgba(209,67,16,.12); }
.catalog-review-row--active .catalog-review-name { color: var(--accent-dark); }
.catalog-review-name { font-size: 13px; font-weight: 600; color: var(--text); }
.catalog-review-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.catalog-review-meta--overdue { color: #dc2626; font-weight: 600; }

.hub-asset-status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--text-muted);
}
.hub-asset-status--pending { background: rgba(245,158,11,.14); color: #b45309; }
.hub-asset-status--done    { background: rgba(52,211,153,.16); color: #0f8a5f; }
.hub-asset-status--placeholder { background: #f1f5f9; color: var(--text-muted); }

.hub-asset-open-count { font-size: 11px; color: var(--text-muted); }
.hub-asset-deadline { font-size: 11px; color: var(--text-muted); }
.hub-asset-deadline--overdue { color: #dc2626; font-weight: 600; }

/* ─── Modal: lista assetów formatu ──────────────────────────────────────────── */
.hub-spec-modal { width: 480px; max-width: 92vw; }
.hub-spec-modal > div { text-align: left; }
.hub-spec-modal__body {
  max-height: 50vh; overflow-y: auto; margin: 12px 0;
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.hub-spec-modal__body a { color: var(--accent-dark); text-decoration: underline; word-break: break-all; }

.hub-log-modal { width: 480px; max-width: 92vw; }
.hub-log-modal > div { text-align: left; }
.hub-log-modal__body { max-height: 55vh; overflow-y: auto; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.hub-log-entry { padding-bottom: 10px; border-bottom: 1px solid var(--panel-item-border); }
.hub-log-entry:last-child { border-bottom: none; padding-bottom: 0; }
.hub-log-entry__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.hub-log-entry__text { font-size: 13px; color: var(--text); }
.hub-log-entry__by { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.hub-asset-list-modal { width: 480px; max-width: 92vw; }
.hub-asset-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.hub-asset-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
}
.hub-asset-list-row:hover { background: #eef2f7; }
.hub-asset-list-row__name { font-weight: 600; color: var(--text); }
.hub-asset-list-row__count { color: var(--text-muted); white-space: nowrap; }
.hub-asset-list-row__deadline { color: var(--text-muted); white-space: nowrap; }

/* ─── Widok assetu (panel + preview przepisane z app.js) ────────────────────── */
.hub-main--asset { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* #hub-main jest flex-column tylko w trybie asset/home (patrz .hub-main--asset/
   --home) — ale sam widoczny .hub-view w środku nie miał żadnych reguł flex,
   więc kurczył się do naturalnej wysokości treści zamiast wypełniać resztę
   ekranu (stąd pusty pasek pod podglądem/panelem). */
.hub-main--asset .hub-view:not([hidden]),
.hub-main--home .hub-view:not([hidden]) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hub-asset-workspace { flex: 1; min-height: 0; }
.hub-asset-upload-status { font-size: 11px; color: var(--text-muted); margin-right: 4px; }

/* ─── Import mediaplanu ──────────────────────────────────────────────────────── */
.hub-setfill-modal { width: 460px; max-width: 94vw; }
.hub-setfill-modal textarea {
  width: 100%; border-radius: 8px; border: 1px solid var(--panel-border);
  padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--text); resize: vertical;
}
.hub-setfill-rows { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }

.hub-mediaplan-modal { width: 680px; max-width: 94vw; }
.hub-mediaplan-warnings {
  list-style: disc;
  padding-left: 18px;
  margin: 6px 0 0;
  font-size: 12px;
  color: #b45309;
}
.hub-mediaplan-review { margin-top: 14px; }
.hub-mediaplan-table-wrap {
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}
.hub-mediaplan-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hub-mediaplan-table th {
  text-align: left;
  padding: 6px 8px;
  background: #f8fafc;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-muted);
  font-weight: 600;
}
.hub-mediaplan-table td { padding: 4px 6px; border-bottom: 1px solid var(--panel-border); }

.hub-mediaplan-diff-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.hub-mediaplan-diff-badge--added   { background: rgba(52,211,153,.16); color: #0f8a5f; }
.hub-mediaplan-diff-badge--changed { background: rgba(245,158,11,.16); color: #b45309; }
.hub-mediaplan-diff-badge--removed { background: rgba(239,68,68,.12); color: #b91c1c; }
.hub-mediaplan-row--removed { color: var(--text-muted); font-size: 11px; }
.hub-mediaplan-table input[type="text"],
.hub-mediaplan-table input[type="date"],
.hub-mediaplan-table select {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 3px 4px;
}
.hub-mediaplan-table input[type="text"]:hover,
.hub-mediaplan-table input[type="date"]:hover,
.hub-mediaplan-table select:hover,
.hub-mediaplan-table input:focus,
.hub-mediaplan-table select:focus {
  border-color: var(--panel-border);
  background: #fff;
}

/* Device toggle (desktop/mobile) w nagłówku panelu uwag — trochę oddechu od
   ikonki kanbana po prawej, .panel__header-right ma tylko 2px gapu (dzielone
   ze starym katalogiem, nie ruszamy tam). */
.panel__header-right .device-tabs { margin-right: 6px; }

/* Poniższe trzy selektory celowo po ID/kontenerze huba, nie po gołej klasie —
   te same klasy (.panel__count/.status-tab--active/.fab-add/.feedback-item__issue)
   są zdefiniowane w stylu.css z twardo zakodowanym teal (nie zmienną), więc
   współdzielone ze starym katalogiem. Chcemy pomarańcz TYLKO w hubie, więc
   nadpisujemy wyżej specyficznością po id zamiast ruszać stary katalog. */
#ap-panel-count { background: rgba(209,67,16,.12); }
#ap-bottombar .status-tab--active { background: rgba(209,67,16,.06); }
#ap-btn-add:hover { background: var(--cta-dark); }
#ap-feedback-list .feedback-item__issue:hover { color: var(--cta-dark); }

/* Góra (topnav) + lewo (panel uwag) + dół (bottombar) to JEDNA, płaska
   powierzchnia na tym samym poziomie — zero box-shadow MIĘDZY nimi, ta sama
   barwa tła. Cienkie linie (border-right na panelu, border-bottom/top na
   topnavie i bottombarze, dziedziczone ze style.css) ZOSTAJĄ — to tylko
   płaskie krawędzie, nie efekt uniesienia, więc ich nie ruszamy. */
#ap-panel .panel__inner { background: var(--toolbar-bg); box-shadow: none; }
#hub-topnav, #ap-bottombar { box-shadow: none; }

/* Prawdziwy cień (sprawiający, że badana strona wygląda na "wpuszczoną"
   niżej niż chrome dookoła) żyje jako nakładka NAD iframe'em (::after,
   position:absolute + z-index), nie jako box-shadow samego wrappera — ten w
   trybie desktop (iframe styka się z krawędziami wrappera 1:1, flex:1 bez
   marginesu) był całkowicie zasłaniany przez nieprzezroczysty iframe, więc
   działał tylko w mobile (węższa ramka, odsłonięte tło po bokach). Nakładka
   z pointer-events:none nie przeszkadza w interakcji z podglądem. Przy okazji
   2px pomarańczowa ramka spinająca cały obszar audytu w jedną całość. */
#ap-preview-wrap { position: relative; border: 2px solid var(--accent-dark); box-sizing: border-box; }
#ap-preview-wrap::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow:
    inset 16px 0 22px -14px rgba(0,0,0,.45),
    inset 0 14px 20px -12px rgba(0,0,0,.4),
    inset 0 -14px 20px -12px rgba(0,0,0,.4);
}

/* Większy wariant przełącznika desktop/mobile w topnavie (na końcu belki) —
   dopasowany wysokością do pigułek Klienci/Kampania/... po lewej, zamiast
   małej wersji 1:1 ze starego katalogu. */
/* Kształt/zaokrąglenie 1:1 z .hub-pill__trigger (var(--radius) = 8px, nie
   kapsuła) — na życzenie, żeby wizualnie pasowało do selektów obok. */
.device-tabs--lg {
  padding: 3px; border-radius: calc(var(--radius) + 3px);
  background: #fff; border: 1px solid var(--panel-border); box-shadow: var(--shadow-card);
}
.device-tabs--lg .device-tab { padding: 8px 14px; border-radius: var(--radius); }
.device-tabs--lg .device-tab--active { box-shadow: none; background: var(--accent); }
.device-tabs--lg .device-tab svg { width: 17px; height: auto; }

.hub-guest-note {
  font-size: 11px; color: rgba(255,255,255,.45);
  margin: -6px 0 14px; text-align: center;
}

/* "+" (dodaj uwagę) domyślnie półprzezroczysty-widmowy, pełny dopiero po
   najechaniu — mniej natarczywy na samym podglądzie strony. Cień wzmocniony,
   żeby pasował do reszty "uniesionego" interfejsu (patrz #ap-panel niżej). */
#ap-btn-add {
  opacity: .32;
  box-shadow: 0 10px 26px -6px rgba(15,23,42,.55);
}
#ap-btn-add:hover { opacity: 1; }

/* Kanban jako modal nad CAŁĄ stroną (position:fixed na całym viewport) —
   na życzenie, zamiast wysuwanego panelu (position:absolute względem
   .workspace), który po dodaniu position:relative do #ap-preview-wrap (cień
   strony, patrz wyżej) zaczął się zawężać do samego podglądu i zostawiać
   szczelinę przy prawej krawędzi. .kanban-header/.kanban-columns (style.css,
   współdzielone ze starym katalogiem) zostają BEZ zmian — tu tylko nowy
   kontener nadrzędny (karta) i przyciemnione tło. */
#ap-kanban-board {
  position: fixed; inset: 0;
  left: 0; top: 0; right: 0; bottom: 0;
  width: auto; max-width: none;
  z-index: 500;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 36px;
  box-shadow: none;
  box-sizing: border-box;
}
#ap-kanban-board .kanban-modal-card {
  background: var(--toolbar-bg);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  width: 100%; max-width: 1400px; height: 100%; max-height: 860px;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Logo/nazwa klienta na ekranie "przedstaw się" (gość z krótkiego linku) —
   nad nagłówkiem, pod logo LiquidThread. Ukryte, dopóki hub.js nie dostanie
   ?cl=/?cn= z Cloud Function go (nie każdy klient musi mieć uzupełnione logo). */
.hub-guest-client {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 4px 0 16px;
}
.hub-guest-client__logo { height: 22px; width: auto; max-width: 90px; object-fit: contain; }
.hub-guest-client__name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .02em; }