/* ============================================================
   Bertsch Holzbau - nakładka brandu na panel Filament
   Tokeny: PLAN.md sekcja 7.1; wzorzec: makiety/bhb.css
   Serwowane bez budowania (FilamentAsset) - czysty CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Charis+SIL:wght@400;700&display=swap');

:root {
    --bhb-green: #308b54;
    --bhb-ink: #1a1b1e;
    --bhb-gray: #4a5565;
    --bhb-bg: #f6f7f5;
    --bhb-line: #e8eae6;
}

/* Jasne, przewiewne tło aplikacji */
.fi-body,
.fi-main {
    background-color: var(--bhb-bg);
}

/* Nagłówki stron - Charis SIL (szeryf brandu) */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-simple-header-heading {
    font-family: 'Charis SIL', Georgia, serif !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bhb-ink);
}

/* Przyciski - pigułki jak na stronie WWW */
.fi-btn {
    border-radius: 9999px !important;
}

/* Karty i sekcje - duże zaokrąglenia, delikatne cienie */
.fi-section,
.fi-wi-widget > .fi-section,
.fi-simple-main,
.fi-ta-ctn {
    border-radius: 1.25rem !important;
    box-shadow: 0 1px 2px rgba(26, 27, 30, 0.04), 0 8px 24px rgba(26, 27, 30, 0.05) !important;
    border-color: var(--bhb-line) !important;
}

/* Pola formularzy - łagodniejsze rogi */
.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: 0.75rem !important;
}

/* Plakietki - pigułki */
.fi-badge {
    border-radius: 9999px !important;
}

/* Sidebar na czystej bieli */
.fi-sidebar {
    background-color: #ffffff;
    border-right: 1px solid var(--bhb-line);
}

/* Strona logowania - biała karta na jasnym tle */
.fi-simple-layout {
    background-color: var(--bhb-bg);
}
.fi-simple-main {
    background-color: #ffffff;
}

/* ============================================================
   Kanban zamówień (pipeline SPRZEDAŻ / MONTAŻ)
   Wzorzec: makiety/pipeline.html + makiety/bhb.css
   ============================================================ */

[x-cloak] {
    display: none !important;
}

/* Etykieta tylko dla czytników ekranu (odpowiednik tailwindowego sr-only,
   którego nie ma w skompilowanym CSS Filamenta dla naszych widoków) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Tablica szersza niż ekran przewija się w poziomie. macOS domyślnie chowa
   paski przewijania (pokazuje je dopiero w trakcie gestu gładzika), więc na
   myszy nie było czym przesunąć widoku - dalsze etapy, „Zamówienie
   potwierdzone" czy „Stracony", były nieosiągalne. Dlatego pasek jest tu
   wymuszony na stałe i widoczny. */
.bhb-kanban {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    align-items: flex-start;
}

/* UWAGA: standardowego `scrollbar-width` NIE ustawiamy na tym elemencie.
   Chrome, gdy je widzi, przestaje stosować reguły ::-webkit-scrollbar
   i wraca do nakładkowego paska, który na macOS jest niewidoczny -
   czyli dokładnie do problemu, który naprawiamy. Właściwości standardowe
   trafiają niżej, tylko tam, gdzie pseudo-elementów nie ma (Firefox). */
.bhb-kanban::-webkit-scrollbar {
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
}

.bhb-kanban::-webkit-scrollbar-track {
    background: #e3e8e1;
    border-radius: 999px;
}

.bhb-kanban::-webkit-scrollbar-thumb {
    background: var(--bhb-green, #308b54);
    border: 3px solid #e3e8e1;
    border-radius: 999px;
}

.bhb-kanban::-webkit-scrollbar-thumb:hover {
    background: #266f43;
}

/* Firefox i inne silniki bez ::-webkit-scrollbar - tu standardowe
   właściwości są jedyną drogą i niczego nie psują. */
@supports not selector(::-webkit-scrollbar) {
    .bhb-kanban {
        scrollbar-width: auto;
        scrollbar-color: var(--bhb-green, #308b54) #e3e8e1;
    }
}

.bhb-kcol {
    width: 264px;
    flex-shrink: 0;
}

.bhb-kcol-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 10px;
}

.bhb-kcol-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--bhb-ink);
}

.bhb-kcol-cnt {
    background: #eff1ee;
    color: var(--bhb-gray);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
}

.bhb-kcol-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 40px;
}

.bhb-kcard {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--bhb-line);
    border-radius: 16px;
    padding: 13px 15px;
    box-shadow: 0 1px 3px rgba(26, 27, 30, 0.06);
}

.bhb-kcard:hover {
    box-shadow: 0 1px 2px rgba(26, 27, 30, 0.04), 0 8px 24px rgba(26, 27, 30, 0.06);
    border-color: #d9ddd6;
}

/* Nakładka: cała karta klika w widok zamówienia */
.bhb-kcard-cover {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    z-index: 1;
}

.bhb-kcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.bhb-kcard-who {
    position: relative;
    z-index: 2;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--bhb-ink);
}

.bhb-kcard-who:hover {
    color: var(--bhb-green);
    text-decoration: underline;
}

.bhb-kcard-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.bhb-kcard-sum {
    margin-top: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--bhb-ink);
}

.bhb-kcard-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #8a94a6;
    font-size: 11.5px;
}

.bhb-kcard-foot svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.bhb-tiny {
    font-size: 11.5px;
    color: var(--bhb-gray);
}

/* Tagi-pigułki */
.bhb-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 2.5px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

.bhb-tag--green { background: #e9f3ee; color: var(--bhb-green); }
.bhb-tag--amber { background: #fbf3e2; color: #b07c10; }
.bhb-tag--red   { background: #fbece9; color: #c2402a; }
.bhb-tag--gray  { background: #eff1ee; color: var(--bhb-gray); }
.bhb-tag--blue  { background: #e8eff7; color: #3a6ea5; }

.bhb-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

.bhb-dot--green { background: var(--bhb-green); }
.bhb-dot--amber { background: #b07c10; }
.bhb-dot--red   { background: #c2402a; }
.bhb-dot--blue  { background: #3a6ea5; }
.bhb-dot--gray  { background: #8a94a6; }

/* Menu „Przenieś do…" na karcie */
.bhb-kmenu {
    position: relative;
    z-index: 3;
}

.bhb-kmenu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #8a94a6;
}

.bhb-kmenu-btn:hover {
    background: #eff1ee;
    color: var(--bhb-ink);
}

.bhb-kmenu-btn svg {
    width: 15px;
    height: 15px;
}

.bhb-kmenu-list {
    /* position: fixed - menu ucieka spod overflow-x tablicy (na mobile było
       przycinane przez scroll kolumn). Współrzędne top/left ustawia Alpine
       z pozycji przycisku; transform prawym brzegiem do przycisku. */
    position: fixed;
    transform: translateX(-100%);
    z-index: 40;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid var(--bhb-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(26, 27, 30, 0.04), 0 8px 24px rgba(26, 27, 30, 0.1);
    padding: 6px;
}

.bhb-kmenu-label {
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a94a6;
}

.bhb-kmenu-list button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bhb-ink);
}

.bhb-kmenu-list button:hover {
    background: #f6f7f5;
}

/* Pusta kolumna */
.bhb-kempty {
    border: 1px dashed var(--bhb-line);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    color: #8a94a6;
    font-size: 12px;
}

/* Szara notka pod tablicą MONTAŻ (bramka produkcji) */
.bhb-kanban-note {
    margin-top: 10px;
    color: var(--bhb-gray);
    font-size: 12.5px;
}

/* ============================================================
   Panel startowy (Dashboard)
   Wzorzec: makiety/dashboard.html + makiety/bhb.css
   ============================================================ */

/* Biała karta jak .fi-section / makietowa .card */
.bhb-card {
    background: #ffffff;
    border: 1px solid var(--bhb-line);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(26, 27, 30, 0.04), 0 8px 24px rgba(26, 27, 30, 0.05);
    padding: 18px 20px;
}

.bhb-card h2 {
    font-family: 'Charis SIL', Georgia, serif;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--bhb-ink);
    margin-bottom: 14px;
}

.bhb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.bhb-card-head h2 {
    margin: 0;
}

.bhb-link-green {
    color: var(--bhb-green);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.bhb-link-green:hover {
    text-decoration: underline;
}

/* Kafelki statystyk */
.bhb-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.bhb-stat {
    background: #ffffff;
    border: 1px solid var(--bhb-line);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(26, 27, 30, 0.04), 0 8px 24px rgba(26, 27, 30, 0.05);
}

.bhb-stat-num {
    font-family: 'Charis SIL', Georgia, serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--bhb-ink);
}

.bhb-stat-lbl {
    color: var(--bhb-gray);
    font-size: 12.5px;
    margin-top: 2px;
}

.bhb-stat--alert .bhb-stat-num {
    color: #c2402a;
}

/* Siatka 2 kolumny (desktop) / 1 (mobile) */
.bhb-grid2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    align-items: start;
}

.bhb-dash-col {
    display: grid;
    gap: 18px;
}

/* Lista zadań / wysyłek na kartach */
.bhb-tasklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bhb-task {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bhb-line);
}

.bhb-task:first-child {
    padding-top: 0;
}

.bhb-task:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bhb-task > svg {
    width: 20px;
    height: 20px;
    color: #8a94a6;
    flex-shrink: 0;
    margin-top: 1px;
}

.bhb-task-main {
    min-width: 0;
}

.bhb-task-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--bhb-ink);
}

.bhb-task-ctx {
    font-size: 11.5px;
    color: var(--bhb-gray);
    margin-top: 1px;
}

.bhb-task-ctx a {
    color: var(--bhb-gray);
}

.bhb-task-ctx a:hover {
    color: var(--bhb-green);
    text-decoration: underline;
}

.bhb-task .bhb-tag {
    margin-left: auto;
    flex-shrink: 0;
}

/* Inline „Wykonane" */
.bhb-task-done {
    flex-shrink: 0;
    border: 1px solid var(--bhb-line);
    border-radius: 999px;
    padding: 2.5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bhb-green);
    background: transparent;
    cursor: pointer;
}

.bhb-task-done:hover {
    background: #e9f3ee;
    border-color: #cde5d8;
}

.bhb-task-done:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Oś czasu „Ostatnia aktywność" */
.bhb-dash-timeline {
    position: relative;
    padding-left: 40px;
}

.bhb-dash-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--bhb-line);
}

.bhb-dash-titem {
    position: relative;
    padding-bottom: 18px;
}

.bhb-dash-titem:last-child {
    padding-bottom: 0;
}

.bhb-dash-ticon {
    position: absolute;
    left: -40px;
    top: 0;
    width: 31px;
    height: 31px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f3ee;
    color: var(--bhb-green);
}

.bhb-dash-ticon svg {
    width: 15px;
    height: 15px;
}

.bhb-dash-ticon--green { background: #e9f3ee; color: var(--bhb-green); }
.bhb-dash-ticon--blue  { background: #e8eff7; color: #3a6ea5; }
.bhb-dash-ticon--amber { background: #fbf3e2; color: #b07c10; }
.bhb-dash-ticon--red   { background: #fbece9; color: #c2402a; }
.bhb-dash-ticon--gray  { background: #eff1ee; color: var(--bhb-gray); }

.bhb-dash-thead {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.bhb-dash-ttitle {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--bhb-ink);
}

.bhb-dash-ttime {
    color: #8a94a6;
    font-size: 11.5px;
    white-space: nowrap;
}

.bhb-dash-tbody {
    color: var(--bhb-gray);
    font-size: 13px;
    margin-top: 3px;
}

.bhb-dash-tbody a {
    color: var(--bhb-gray);
}

.bhb-dash-tbody a:hover {
    color: var(--bhb-green);
    text-decoration: underline;
}

/* Chipy „Pipeline w skrócie" */
.bhb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bhb-tag--outline {
    background: transparent;
    border: 1px solid var(--bhb-line);
    color: var(--bhb-gray);
}

.bhb-tag--outline b {
    color: var(--bhb-ink);
    font-weight: 700;
}

/* Puste stany na kartach - wyśrodkowana kolumna z wygaszoną ikoną */
.bhb-dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 28px 16px;
    color: var(--bhb-gray);
    font-size: 13px;
}

.bhb-dash-empty svg {
    width: 34px;
    height: 34px;
    color: #c2cad6;
}

@media (max-width: 900px) {
    .bhb-grid2 {
        grid-template-columns: 1fr;
    }

    .bhb-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* Plakietki etapów w nagłówku widoku zamówienia */
.bhb-pills {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Tabele w widoku zamówienia (konfiguracja / historia etapów) */
.bhb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bhb-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a94a6;
    padding: 6px 10px;
    border-bottom: 1px solid var(--bhb-line);
}

.bhb-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bhb-line);
    color: var(--bhb-ink);
    vertical-align: top;
}

.bhb-table tr:last-child td {
    border-bottom: none;
}

.bhb-table .bhb-muted {
    color: var(--bhb-gray);
}

/* ============================================================
   Skrzynka pocztowa (Inbox)
   Wzorzec: makiety/skrzynka.html + makiety/bhb.css
   ============================================================ */

/* Pasek: taby-piguły + wyszukiwarka (makieta .topbar/.tabs/.search) */
.bhb-inbox-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bhb-inbox-spacer {
    flex: 1;
}

.bhb-tabs {
    display: inline-flex;
    background: #eff1ee;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.bhb-tabs button {
    padding: 7px 18px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font: 600 13px 'Inter', -apple-system, sans-serif;
    color: var(--bhb-gray);
    cursor: pointer;
    white-space: nowrap;
}

.bhb-tabs button.is-active {
    background: #ffffff;
    color: var(--bhb-ink);
    box-shadow: 0 1px 3px rgba(26, 27, 30, 0.06);
}

.bhb-search {
    position: relative;
    display: flex;
    align-items: center;
}

.bhb-search svg {
    position: absolute;
    left: 14px;
    width: 15px;
    height: 15px;
    color: #8a94a6;
    pointer-events: none;
}

.bhb-search input {
    width: 300px;
    background: #ffffff;
    border: 1px solid var(--bhb-line);
    border-radius: 999px;
    padding: 8px 16px 8px 38px;
    font: 400 13px 'Inter', -apple-system, sans-serif;
    color: var(--bhb-ink);
    outline: none;
}

.bhb-search input::placeholder {
    color: #8a94a6;
}

.bhb-search input:focus {
    border-color: var(--bhb-green);
}

/* Siatka: lista wątków 360px + widok wątku */
.bhb-inbox {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
    align-items: start;
}

.bhb-card--flush {
    padding: 0;
    overflow: hidden;
}

/* Lista wątków (makieta .mail-list / .mail-item) */
.bhb-mail-list {
    display: flex;
    flex-direction: column;
}

.bhb-mail-item {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-bottom: 1px solid var(--bhb-line);
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.bhb-mail-item:last-child {
    border-bottom: none;
}

.bhb-mail-item:hover {
    background: var(--bhb-bg);
}

.bhb-mail-item.is-active {
    background: #e9f3ee;
}

.bhb-mail-item.is-unread .bhb-m-from,
.bhb-mail-item.is-unread .bhb-m-subj {
    font-weight: 700;
}

.bhb-m-col {
    flex: 1;
    min-width: 0;
    display: block;
}

.bhb-m-from {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--bhb-ink);
}

.bhb-m-subj {
    display: block;
    font-size: 13px;
    color: var(--bhb-ink);
}

.bhb-m-snip {
    display: block;
    color: #8a94a6;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bhb-m-side {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.bhb-m-time {
    color: #8a94a6;
    font-size: 11px;
}

/* Awatary (makieta .avatar / .avatar.sm/.gray/.blue) */
.bhb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--bhb-green);
    color: #ffffff;
    font-weight: 700;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bhb-avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 10.5px;
}

.bhb-avatar--gray {
    background: #eff1ee;
    color: var(--bhb-gray);
}

.bhb-avatar--blue {
    background: #3a6ea5;
}

/* Widok wątku */
.bhb-thread-subject {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bhb-ink);
    margin-bottom: 6px;
}

.bhb-thread-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}

.bhb-thread-meta-spacer {
    flex: 1;
}

/* Przyciski-piguły (makieta .btn.sm / .btn.sm.secondary) */
.bhb-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 14px;
    font: 600 12.5px 'Inter', -apple-system, sans-serif;
    cursor: pointer;
}

.bhb-btn-pill--primary {
    background: var(--bhb-green);
    color: #ffffff;
    border: none;
}

.bhb-btn-pill--primary:hover {
    background: #277144;
}

.bhb-btn-pill--secondary {
    background: #ffffff;
    color: var(--bhb-ink);
    border: 1.5px solid var(--bhb-line);
}

.bhb-btn-pill--secondary:hover {
    border-color: #8a94a6;
}

/* Wiadomości wątku (makieta .msg / .msg.out) */
.bhb-msg {
    border: 1px solid var(--bhb-line);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bhb-ink);
}

.bhb-msg--out {
    background: #e9f3ee;
    border-color: #d7e8de;
}

.bhb-msg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bhb-msg-who {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--bhb-ink);
}

/* Treść wiadomości - łamanie długich URL-i (np. linki wyceny w automatach),
   inaczej nierozdzielny token rozpycha dymek i stronę na mobile. */
.bhb-msg-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bhb-msg-push {
    margin-left: auto;
}

/* Załączniki */
.bhb-msg-atts {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--bhb-line);
    display: grid;
    gap: 6px;
}

.bhb-msg-atts li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.bhb-msg-atts a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bhb-green);
    font-weight: 600;
}

.bhb-msg-atts a:hover {
    text-decoration: underline;
}

.bhb-msg-atts svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Composer odpowiedzi (makieta .composer / .input / .textarea) */
.bhb-composer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bhb-line);
    display: grid;
    gap: 10px;
}

.bhb-composer-input,
.bhb-composer-textarea {
    width: 100%;
    font: 400 14px 'Inter', -apple-system, sans-serif;
    color: var(--bhb-ink);
    background: #ffffff;
    border: 1.5px solid var(--bhb-line);
    border-radius: 12px;
    padding: 11px 14px;
    outline: none;
}

.bhb-composer-input:focus,
.bhb-composer-textarea:focus {
    border-color: var(--bhb-green);
}

.bhb-composer-textarea {
    min-height: 96px;
    resize: vertical;
}

.bhb-composer-textarea::placeholder {
    color: #8a94a6;
}

.bhb-composer-error {
    color: #c2402a;
    font-size: 12.5px;
}

.bhb-composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bhb-composer-actions svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Puste stany - wyśrodkowana kolumna z wygaszoną ikoną (nie goła linijka) */
.bhb-mail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    min-height: 220px;
    padding: 32px 20px;
    color: var(--bhb-gray);
    font-size: 13px;
}

.bhb-mail-empty--thread {
    min-height: 300px;
    padding: 40px 28px;
}

.bhb-mail-empty svg {
    width: 40px;
    height: 40px;
    color: #c2cad6;
}

/* Wygaszenie listy w trakcie przełączania tabów / wyszukiwania */
.bhb-mail-list.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Spinner przy polu wyszukiwania (wire:loading na search) */
.bhb-search-spin {
    position: absolute;
    right: 14px;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(48, 139, 84, 0.25);
    border-top-color: var(--bhb-green);
    border-radius: 50%;
    animation: bhb-spin 0.7s linear infinite;
}

/* Placeholder ładowania w widoku wątku (wire:loading na selectThread) */
.bhb-thread-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

@media (max-width: 900px) {
    .bhb-inbox {
        grid-template-columns: 1fr;
    }

    /* Taby-pigułki przewijają się w poziomie zamiast wypychać scroll strony */
    .bhb-tabs {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bhb-search {
        width: 100%;
    }

    .bhb-search input {
        width: 100%;
    }
}

/* ============================================================
   Faza 3 (szlif): stany kanbana - ładowanie przy przenoszeniu karty
   i pusty stan całej tablicy.
   ============================================================ */

@keyframes bhb-spin {
    to { transform: rotate(360deg); }
}

.bhb-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(48, 139, 84, 0.25);
    border-top-color: var(--bhb-green, #308B54);
    border-radius: 50%;
    animation: bhb-spin 0.7s linear infinite;
}

/* Karta w trakcie przenoszenia - wygaszenie + spinner na nakładce. */
.bhb-kcard--busy {
    opacity: 0.55;
    pointer-events: none;
}

.bhb-kcard-spin {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    z-index: 5;
}

/* Pusty stan całej tablicy (świeża instalacja / wszystko zarchiwizowane) -
   jeden zaprojektowany blok zamiast ściany przerywanych pudełek. */
.bhb-kboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    max-width: 460px;
    margin: 32px auto;
    padding: 40px 28px;
    background: #ffffff;
    border: 1px solid var(--bhb-line);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(26, 27, 30, 0.06);
}

.bhb-kboard-empty svg {
    width: 46px;
    height: 46px;
    color: #8a94a6;
}

.bhb-kboard-empty h3 {
    font-family: var(--bhb-font-display, 'Charis SIL', Georgia, serif);
    font-size: 20px;
    color: var(--bhb-ink, #1A1B1E);
}

.bhb-kboard-empty p {
    color: var(--bhb-gray, #4A5565);
    font-size: 13.5px;
    line-height: 1.6;
}

/* Nota „pokazano 10 z N" pod uciętą kolumną. */
.bhb-kcol-more {
    text-align: center;
    color: var(--bhb-gray, #4A5565);
    font-size: 12px;
    padding: 8px 0 2px;
}

/* ============================================================
   Drag & drop kart kanbana (Faza 3)
   ============================================================ */

/* Karta chwytna - kursor grab; nakładka-link ma pointer, więc grab widać
   głównie przy krawędziach karty, ale samo przeciąganie działa z całej. */
.bhb-kcard[draggable="true"] {
    cursor: grab;
}

.bhb-kcard.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

/* Kolumna-cel podczas przeciągania - przerywana zielona ramka + delikatny tint. */
.bhb-kcol.is-drop-target .bhb-kcol-body {
    outline: 2px dashed var(--bhb-green);
    outline-offset: 3px;
    border-radius: 12px;
    background: rgba(48, 139, 84, 0.05);
}

/* ============================================================
   Panel „Co teraz zrobić" na karcie zamówienia
   Instrukcja krok po kroku - App\Support\SalesGuide
   ============================================================ */

.bhb-guide-intro {
    margin: 0 0 14px;
    color: var(--bhb-ink, #26332b);
    font-size: 14.5px;
    line-height: 1.6;
}

.bhb-guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bhb-guide-step {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e3e8e1;
    border-radius: 12px;
    background: #fff;
}

.bhb-guide-step.is-current {
    border-color: var(--bhb-green, #308b54);
    background: #f7fbf8;
    box-shadow: 0 0 0 1px var(--bhb-green, #308b54) inset;
}

.bhb-guide-step.is-done {
    background: #f7f9f6;
    border-color: #e8ece7;
}

.bhb-guide-step.is-waiting {
    border-style: dashed;
}

.bhb-guide-mark {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 999px;
    border: 2px solid #cfd8d1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.bhb-guide-step.is-done .bhb-guide-mark {
    background: var(--bhb-green, #308b54);
    border-color: var(--bhb-green, #308b54);
}

.bhb-guide-step.is-waiting .bhb-guide-mark {
    border-color: #cfd8d1;
    color: #8b9a90;
}

.bhb-guide-mark svg {
    width: 13px;
    height: 13px;
}

/* Kółko przy krokach opartych o zadanie jest klikalne - odhaczenie
   dzieje się tutaj, bez wychodzenia na osobną stronę zadań. */
.bhb-guide-mark.is-clickable {
    cursor: pointer;
    padding: 0;
    background: none;
}

.bhb-guide-mark.is-clickable:hover {
    border-color: var(--bhb-green, #308b54);
    box-shadow: 0 0 0 3px rgba(48, 139, 84, 0.14);
}

.bhb-guide-step.is-done .bhb-guide-mark.is-clickable:hover {
    background: #266f43;
}

.bhb-guide-mark.is-clickable:disabled {
    opacity: 0.5;
    cursor: wait;
}

.bhb-guide-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bhb-guide-label {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--bhb-ink, #26332b);
}

.bhb-guide-step.is-done .bhb-guide-label {
    color: #6b7a70;
    font-weight: 500;
}

.bhb-guide-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #eef1ed;
    color: #6b7a70;
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: 1px;
}

.bhb-guide-hint {
    margin-top: 4px;
    color: #6b7a70;
    font-size: 13.5px;
    line-height: 1.55;
}

.bhb-guide-warn {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #fdf6e7;
    border: 1px solid #f2e2bd;
    color: #6b5a2c;
    font-size: 13.5px;
    line-height: 1.55;
}

.bhb-guide-answers {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.bhb-guide-answers button,
.bhb-guide-undo {
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 20px;
    border: 1px solid transparent;
    cursor: pointer;
}

.bhb-guide-yes {
    background: var(--bhb-green, #308b54);
    color: #fff;
}

.bhb-guide-yes:hover {
    background: #266f43;
}

.bhb-guide-no {
    background: #fff;
    border-color: #d6ded8;
    color: #4a5565;
}

.bhb-guide-no:hover {
    border-color: #b9c4bd;
}

.bhb-guide-undo {
    margin-top: 8px;
    padding: 4px 0;
    background: none;
    color: #8b9a90;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: underline;
}

.bhb-guide-next,
.bhb-guide-outcome {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.bhb-guide-next {
    background: #eaf3ed;
    border: 1px solid #cfe3d7;
    color: #1f4d33;
}

.bhb-guide-next strong {
    display: block;
    margin-bottom: 2px;
}

.bhb-guide-outcome {
    background: #f7f9f6;
    border: 1px solid #e8ece7;
    color: #6b7a70;
    padding: 10px 14px;
}

/* Link do strony wyceny w panelu instrukcji - żeby nie trzeba go było
   szukać po sekcjach, które pojawiają się warunkowo. */
.bhb-guide-link {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f7f9f6;
    border: 1px solid #e3e8e1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.bhb-guide-link-label {
    color: #6b7a70;
    font-weight: 600;
}

.bhb-guide-link a {
    color: var(--bhb-green, #308b54);
    font-weight: 600;
    word-break: break-all;
    flex: 1 1 220px;
    min-width: 0;
}

.bhb-guide-link button {
    border-radius: 999px;
    border: 1px solid #d6ded8;
    background: #fff;
    color: #4a5565;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.bhb-guide-link button:hover {
    border-color: var(--bhb-green, #308b54);
    color: var(--bhb-green, #308b54);
}

/* ============================================================
   Ściąga dla obsługi (Filament\Pages\Sciaga)

   Dokument do czytania, nie panel z danymi - stąd węższa kolumna
   (maks. 68 znaków w wierszu) i szeryf w nagłówkach, jak w wycenach
   dla klienta. Na końcu style druku: Edward może chcieć kartkę
   przy telefonie.
   ============================================================ */

.bhb-sciaga {
    max-width: 46rem;
    color: var(--bhb-ink, #1a1b1e);
    font-size: 14.5px;
    line-height: 1.65;
}

.bhb-sciaga section {
    margin-bottom: 34px;
}

.bhb-sciaga h2 {
    font-family: 'Charis SIL', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bhb-line, #e8eae6);
}

.bhb-sciaga h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.bhb-sciaga p {
    margin-bottom: 10px;
}

.bhb-sciaga ul,
.bhb-sciaga ol {
    margin: 0 0 10px 18px;
}

.bhb-sciaga ul { list-style: disc; }
.bhb-sciaga ol { list-style: decimal; }

.bhb-sciaga li {
    margin-bottom: 5px;
}

.bhb-sciaga-lead p:first-child {
    font-size: 16px;
}

/* Zdanie, które ma zostać w głowie po zamknięciu strony */
.bhb-sciaga-hint {
    background: #fbf3e2;
    border: 1px solid #efddb5;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    color: #7a5a10;
}

.bhb-sciaga-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

.bhb-sciaga-box {
    background: #fff;
    border: 1px solid var(--bhb-line, #e8eae6);
    border-radius: 14px;
    padding: 16px 18px;
}

.bhb-sciaga-box h3 {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--bhb-gray, #4a5565);
}

.bhb-sciaga-box p:last-child,
.bhb-sciaga-box ul:last-child {
    margin-bottom: 0;
}

/* Kto co robi - lewa kolumna człowiek, prawa system */
.bhb-sciaga-box.is-you { border-left: 3px solid var(--bhb-green, #308b54); }
.bhb-sciaga-box.is-system { border-left: 3px solid #3a6ea5; }

.bhb-sciaga-small,
.bhb-sciaga .bhb-sciaga-small {
    font-size: 13px;
    color: var(--bhb-gray, #4a5565);
}

.bhb-sciaga-steps li {
    margin-bottom: 8px;
}

.bhb-sciaga-howto {
    border-left: 2px solid var(--bhb-line, #e8eae6);
    padding: 0 0 2px 16px;
    margin-bottom: 18px;
}

.bhb-sciaga-howto h3 {
    color: var(--bhb-green, #308b54);
}

.bhb-sciaga-faq dt {
    font-weight: 600;
    margin-top: 14px;
}

.bhb-sciaga-faq dd {
    margin: 2px 0 0;
    color: var(--bhb-gray, #4a5565);
}

.bhb-sciaga-dont li::marker {
    color: #c2402a;
}

/* Biel, nie szarość - tło panelu jest już #f6f7f5, więc szara ramka
   po prostu znikała zamiast domykać dokument. */
.bhb-sciaga-foot {
    background: #fff;
    border: 1px solid var(--bhb-line, #e8eae6);
    border-radius: 14px;
    padding: 16px 18px;
}

.bhb-sciaga-foot h2 {
    border-bottom: 0;
    padding-bottom: 0;
}

.bhb-sciaga-foot p:last-child {
    margin-bottom: 0;
}

/* Wydruk: sama treść, bez menu i nagłówka panelu */
@media print {
    .fi-sidebar,
    .fi-topbar,
    .fi-page-header-main-ctn {
        display: none !important;
    }

    .bhb-sciaga {
        max-width: none;
        font-size: 11pt;
    }

    .bhb-sciaga section {
        break-inside: avoid;
    }
}