/* PANEL PARTNERA (zakladka "Wspolpraca" w panelu klienta).
 *
 * ZASADA NACZELNA: ta zakladka ma wygladac DOKLADNIE tak, jak reszta panelu klienta.
 * Dlatego markup w partner_panel.js sklada sie z KOMPONENTOW PANELU - .card,
 * .section-subtitle, .table-container, .btn, .form-control, .badge, .stat-card,
 * .bids-footer, .pagination-container - a nie z wlasnych odpowiednikow.
 *
 * Ten plik dokłada tylko to, czego w panelu nie ma:
 *   1. podzakladki (.pn-tabs),
 *   2. przyciski filtra (.pn-filter) - JEDYNY element o wlasnym wygladzie, zostawiony
 *      swiadomie, bo tak zostal zamowiony,
 *   3. zamiane tabel na gęste karty na telefonie (@media <= 767px),
 *   4. drobiazgi: znacznik kodu, pasek progu, strefa zrzutu faktury,
 *   5. zageszczenie calej zakladki na telefonie (mniejsze odstepy i czcionki),
 *      zeby na jednym ekranie miescilo sie jak najwiecej informacji.
 *
 * Kolory bierzemy WYLACZNIE ze zmiennych :root panelu klienta.
 * Wszystkie klasy maja prefiks .pn- i sa deklarowane tylko tutaj.
 */

#partner {
    /* container queries po szerokosci SAMEGO panelu: pasek boczny sie zwija, wiec
       przy tej samej szerokosci okna miejsca na tresc bywa raz wiecej, raz mniej. */
    container-type: inline-size;
    container-name: pnroot;
}

/* --- stany ogolne ------------------------------------------------------- */

.pn-loading {
    padding: 30px 0;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
}

.pn-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
}

/* Wiersz tabeli z komunikatem "brak danych" - taki sam jak w zakladce Licytacje. */
.pn-empty-cell {
    text-align: center;
    padding: 18px 15px !important;
    color: var(--text-light);
    white-space: normal;
}

/* --- ekran informacyjny dla kont bez wspolpracy -------------------------- */

.pn-info {
    background: var(--bg-card);
    border: 1px solid #e2e8f03d;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    padding: 24px;
    max-width: 640px;
}

.pn-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #f8fafc;
    color: var(--accent);
    font-size: 18px;
    margin-bottom: 14px;
}

.pn-info h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    margin: 0 0 10px;
}

.pn-info p {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 10px;
}

.pn-info-cta {
    margin-top: 16px !important;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-main) !important;
}

/* --- podzakladki -------------------------------------------------------- */

/* Wyglad przejety z zakladek panelu: ta sama czcionka 13 px, ten sam akcent pod
   aktywna pozycja. Na telefonie pasek przewija sie w poziomie zamiast lamac sie
   na trzy rzedy; pasek przewijania chowamy, bo wyglada jak usterka. */
.pn-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.pn-tabs::-webkit-scrollbar { display: none; }

.pn-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-light);
    cursor: pointer;
    white-space: nowrap;
    transition: 0.15s;
}

.pn-tab i { font-size: 14px; }
.pn-tab:hover { color: var(--primary); }

.pn-tab.active {
    color: var(--primary);
    font-weight: 500;
    border-bottom-color: var(--accent);
}

/* Plakietka z liczba nieprzeczytanych powiadomien. */
.pn-badge {
    background: var(--danger);
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    line-height: 1.6;
}

.pn-pane { display: none; }
.pn-pane.active { display: block; }

/* --- naglowek karty ------------------------------------------------------ */

/* Panel klienta robi to samo inline (flex + .section-subtitle bez obramowania).
   Tu jest to wyciagniete do klasy, bo powtarza sie w kazdej karcie zakladki. */
.pn-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.pn-card-head .section-subtitle {
    margin: 0;
    border: none;
    padding: 0;
}

/* --- kafelki podsumowania (.stat-card z panelu + trzecia linijka) -------- */

/* .stat-info div:last-child z panelu ustawia 18 px/600 - po dolozeniu podpisu
   to wlasnie podpis bylby "ostatni", wiec wartosc i podpis opisujemy wprost. */
.pn-kpi .stat-info .pn-kpi-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-kpi .stat-info .pn-kpi-sub,
#dashFeeCard .pn-kpi-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-light);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Obnizona prowizja klienta - zielony podpis pod kwota na Pulpicie. */
.pn-fee-good { color: var(--success) !important; }

/* --- stronicowanie ------------------------------------------------------- */

.pn-page-dots {
    align-self: center;
    color: var(--text-faint);
    font-size: 12px;
    padding: 0 2px;
}

/* --- szukajka w naglowku karty ------------------------------------------- */

.pn-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
}

.pn-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: 13px;
    pointer-events: none;
}

.pn-search .form-control { padding-left: 30px; }

.pn-card-head .pn-search { flex: 0 0 260px; }

/* --- przyciski filtra (wyglad zostawiony celowo bez zmian) --------------- */

.pn-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pn-filter {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 13px;
    font-size: 0.8rem;
    color: var(--text-light);
    cursor: pointer;
    min-height: 38px;
}
.pn-filter.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Licznik w przycisku filtra. Sam przycisk zostaje taki, jaki byl - to tylko
   przygaszona liczba dopisana za etykieta. */
.pn-filter-n { opacity: 0.55; margin-left: 5px; }
.pn-filter.active .pn-filter-n { opacity: 0.7; }

/* --- kod partnera ------------------------------------------------------- */

.pn-code-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    background: var(--primary);
    color: #fff;
    padding: 4px 9px;
    border-radius: 4px;
    display: inline-block;
}

.pn-code-off {
    background: #f1f5f9;
    color: var(--text-light);
}

/* --- wiersze list -------------------------------------------------------- */

.pn-client-name {
    font-weight: 500;
    color: var(--primary);
}

.pn-row-title { color: var(--primary); }

/* --- kwoty w tabelach --------------------------------------------------- */

.pn-amount { font-weight: 600; white-space: nowrap; }
.pn-amount-plus  { color: var(--success); }
.pn-amount-minus { color: var(--danger); }

.pn-muted { color: var(--text-faint); }

/* --- pasek postepu do kolejnego progu ----------------------------------- */

.pn-tier {
    background: #fff;
    border: 1px solid #e2e8f03d;
    border-left: 3px solid var(--success);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    padding: 14px 16px;
    margin-bottom: 24px;
}

.pn-tier-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pn-tier-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.pn-tier-fill {
    height: 100%;
    background: var(--success);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.pn-tier-sub {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 8px;
}

/* --- strefa zrzutu faktury (wyglad .file-upload-box z panelu) ------------ */

.pn-drop {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    background: #fcfcfc;
    color: var(--text-light);
    cursor: pointer;
    transition: 0.2s;
}
.pn-drop:hover, .pn-drop.pn-drop-over {
    border-color: var(--accent);
    background: #f0f9ff;
}
.pn-drop i { font-size: 20px; color: var(--accent); display: block; margin-bottom: 6px; }
.pn-drop-title { font-weight: 500; color: var(--primary); font-size: 13px; }
.pn-drop-sub { font-size: 12px; margin-top: 3px; }

.pn-file {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: #fff;
}
.pn-file-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pn-file-drop {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 13px;
    min-width: 32px;
    min-height: 32px;
}

/* --- komunikaty pod formularzami ---------------------------------------- */

.pn-hint {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 8px;
    line-height: 1.5;
}
.pn-hint-bad { color: var(--danger); }
.pn-hint-ok  { color: var(--success); }

/* --- powiadomienia ------------------------------------------------------ */

/* Nieprzeczytane: delikatny pasek akcentu z lewej, bez krzyczacego tla. */
.pn-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pn-unread td { background: #f8fbff; }

.pn-notif-title { font-weight: 500; color: var(--primary); }
.pn-notif-body {
    color: var(--text-light);
    font-size: 12px;
    margin-top: 2px;
    white-space: normal;
}

/* Tabele partnera maja teksty, ktore MUSZA sie zawijac (opisy, tytuly materialow).
   Panel domyslnie wymusza nowrap na calej tabeli - tu to znosimy punktowo. */
.pn-wrap { white-space: normal !important; }

/* --- stopka listy ------------------------------------------------------- */

/* .bids-footer z panelu, ale spiety z tabela w jedna calosc. */
#partner .table-container + .bids-footer {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}
#partner .table-container.pn-has-footer {
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
}

/* ═══ WYROWNANIE NA TELEFONIE ════════════════════════════════════════════
   Panel klienta wymusza na telefonie wlasny odstep od krawedzi karty regulami
   z !important (moje-konto.html, @media max-width: 768px):
       .table-container { margin: 5px !important }
       .bids-footer     { margin: 5px !important }
       .alert.alert-info{ margin: 5px !important }
       .card            { padding: 5px !important }
   Naszych blokow (naglowek karty, pasek narzedzi, filtry) ta regula nie dotyczy,
   wiec bez tego selektor filtra byl o 5 px szerszy z kazdej strony niz tabela pod
   nim. Dajemy im DOKLADNIE ten sam odstep - i wszystko stoi w jednej linii.

   Breakpoint musi byc 768 px, a nie 767 px: inaczej na tablecie trzymanym pionowo
   (dokladnie 768 px) marginesy panelu juz dzialaja, a nasze wyrownanie jeszcze nie. */

@media (max-width: 768px) {
    #partner .pn-card-head,
    #partner .pn-filters {
        margin-left: 5px;
        margin-right: 5px;
    }
}

/* ═══ TELEFON: MAKSYMALNA GESTOSC ════════════════════════════════════════
   Do 767 px zakladka przestaje byc "strona z tabelami", a staje sie lista
   gestych kart - tak jak w aplikacji mobilnej. Kazdy wiersz tabeli zamienia
   sie w karte, a naglowki kolumn wracaja jako male etykiety przy wartosciach
   (data-l), wiec zadna informacja nie ginie.

   Wszystko jest zamkniete w #partner - pozostale zakladki panelu zostaja
   dokladnie takie, jakie byly. */

@media (max-width: 767px) {

    #partner h2 { font-size: 15px; margin-bottom: 14px; }

    #partner .card {
        padding: 12px;
        margin-bottom: 12px;
    }

    #partner .section-subtitle {
        font-size: 12px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    .pn-card-head {
        padding-bottom: 6px;
        margin-bottom: 10px;
        gap: 6px;
    }

    /* Wybor filtra w naglowku karty ma byc szeroki na caly rzad - na telefonie
       lepiej sie w niego trafia niz w waski przycisk przyklejony do prawej. */
    .pn-card-head .form-control,
    .pn-card-head > div { width: 100% !important; }
    .pn-card-head > div { display: flex; gap: 6px; flex-wrap: wrap; }
    /* min-width: 0 jest konieczne: pole formularza w kontenerze flex domyslnie
       NIE kurczy sie ponizej swojej zawartosci i rozpycha rzad. */
    .pn-card-head select.form-control { min-width: 0; flex: 1 1 auto; }
    .pn-card-head .btn { flex: 1 1 auto; }
    #partner .pn-card-head .pn-search { flex: 1 1 100%; }

    #partner .form-group { margin-bottom: 10px; }

    /* Siatka formularzy panelu ma 24 px przerwy - na telefonie to pol ekranu
       zmarnowane na powietrze miedzy trzema polami. */
    #partner .form-grid {
        gap: 10px;
        margin-top: 0;
    }

    /* Ikona lupy nie moze siedziec na tekscie - zageszczone pole ma wezszy
       wciecie niz wersja na desktop, ale wciaz wlasne miejsce na ikone. */
    #partner .pn-search .form-control { padding-left: 28px; }
    #partner .form-label { font-size: 11px; margin-bottom: 3px; }
    #partner .form-control { padding: 7px 10px; font-size: 13px; }
    #partner .btn { padding: 8px 14px; font-size: 12px; }
    #partner .alert { padding: 10px 12px; font-size: 12px; }

    .pn-tab {
        padding: 9px 10px;
        font-size: 12px;
        gap: 5px;
    }

    .pn-filters { gap: 5px; margin-bottom: 10px; }

    /* Kafelki podsumowania: dwie kolumny, maksymalnie plasko. */
    #partner .dash-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    /* Trojka kafelkow (Wyplaty): trzeci nie zostaje sam w polowie rzedu. */
    .pn-kpis-3 .pn-kpi:last-child { grid-column: 1 / -1; }

    /* UWAGA: `#partner .stat-info div:last-child` (ponizej) lapie takze PODPIS,
       bo to on jest ostatnim dzieckiem kafelka - dlatego wartosc i podpis musza
       byc opisane wprost, z wyzsza specyficznoscia. Bez tego podpis dostawal
       15 px, czyli wiecej niz 11 px na komputerze. */
    #partner .pn-kpi .stat-info .pn-kpi-value { font-size: 15px; }

    #partner .pn-kpi .stat-info .pn-kpi-sub {
        font-size: 10px;
        font-weight: 400;
        white-space: normal;
        line-height: 1.35;
    }
    #partner .pn-kpi .stat-info div:first-child { white-space: normal; }

    #partner .stat-card {
        padding: 10px;
        gap: 9px;
        justify-content: flex-start;
        border: 1px solid #e2e8f03d;
    }

    #partner .stat-icon {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        font-size: 14px;
    }

    #partner .stat-info div:first-child { font-size: 11px; }
    #partner .stat-info div:last-child { font-size: 15px; }
    .pn-kpi-sub { font-size: 10px; }

    /* --- tabela -> lista kart ------------------------------------------- */

    #partner .table-container {
        border: none;
        background: transparent;
        overflow: visible;
        margin-top: 0 !important;
    }
    #partner .table-container.pn-has-footer { border-radius: 0; }
    #partner .table-container + .bids-footer {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 8px;
    }

    #partner table,
    #partner tbody,
    #partner tr,
    #partner td { display: block; width: 100%; }

    #partner thead { display: none; }

    #partner tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 9px 10px;
        margin-bottom: 6px;
    }

    #partner tbody tr:hover { background: #fff; }

    #partner td {
        padding: 1px 0 !important;
        border: none !important;
        font-size: 12px;
        white-space: normal;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
    }

    /* Etykieta kolumny wraca jako przygaszony podpis przy wartosci. */
    #partner td[data-l]::before {
        content: attr(data-l);
        color: var(--text-faint);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex: 0 0 auto;
    }

    /* Pierwsza komorka to tytul karty - na calej szerokosci, bez etykiety. */
    #partner td.pn-cell-main {
        grid-column: 1 / -1;
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--primary);
        margin-bottom: 3px;
    }
    #partner td.pn-cell-main::before { content: none; }

    /* Komorki, ktore maja zajac caly wiersz karty (opisy, przyciski). */
    #partner td.pn-cell-full { grid-column: 1 / -1; }

    /* Puste komorki po prostu znikaja - na telefonie licza sie piksele. */
    #partner td.pn-cell-empty { display: none; }

    /* Komunikat "brak danych" / "Wczytywanie" ma isc przez cala szerokosc karty. */
    #partner td.pn-empty-cell {
        display: block;
        grid-column: 1 / -1;
        text-align: center;
        padding: 10px !important;
    }
    #partner tbody tr:has(> td.pn-empty-cell) {
        display: block;
        padding: 0;
    }

    #partner .pn-unread td:first-child { box-shadow: none; }
    #partner .pn-unread td { background: transparent; }
    #partner tbody tr.pn-unread {
        border-left: 3px solid var(--accent);
        background: #f8fbff;
    }

    #partner .badge { padding: 4px 7px; font-size: 10px; }

    /* Przyciski stron zostaja male, ale nie mniejsze niz cel dotykowy. */
    #partner .page-btn {
        padding: 6px 11px;
        font-size: 12px;
        min-height: 32px;
    }
    #partner .bids-info { font-size: 11px; }
    #partner .pagination-container { gap: 5px; }

    .pn-tier { padding: 12px; margin-bottom: 12px; }
    .pn-tier-title { font-size: 12px; }
    .pn-tier-sub { font-size: 11px; }

    .pn-drop { padding: 14px; }
    .pn-loading, .pn-empty { padding: 18px 10px; font-size: 12px; }
}

/* ═══ SZERSZE UKLADY ═════════════════════════════════════════════════════
   Mierzymy szerokosc PANELU, nie okna. */

@container pnroot (max-width: 620px) {
    /* Bardzo waski panel na duzym ekranie (np. pasek boczny rozwiniety na tablecie):
       kafelki schodza do dwoch kolumn, zeby kwoty sie nie lamaly. */
    #partner .dash-grid { grid-template-columns: 1fr 1fr; }
}

/* Gdy przegladarka nie zna container queries (starsze Safari), uklad zostaje
   taki, jak dla szerokiego panelu - czytelny, tylko mniej gesty. Nic sie nie psuje. */