/* PodoUP CRM - motyw wg brandbooka PodoUP! na bazie Bootstrap 5.3 (bez kompilacji, nadpisania przez zmienne CSS) */

@font-face {
    font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../vendor/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../vendor/manrope/manrope-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* paleta z brandbooka */
    --brand-purple: #944bdd;
    --brand-deep: #2e2040;
    --brand-blue: #4a61fd;
    --brand-red: #ff577a;
    --brand-yellow: #f98366;

    --app-primary: var(--brand-purple);
    --app-primary-hover: #7e36c7;
    --app-primary-rgb: 148, 75, 221;
    --app-danger: var(--brand-red);
    --app-danger-text: #d62b58; /* czerwień z palety ma za mały kontrast dla tekstu na bieli */
    --app-warning-text: #b84d2f;
    --app-bg: #f6f4f9;
    --app-surface: #ffffff;
    --app-border: #e6e2ec;
    --app-muted: #6e6680;
    --app-sidebar-w: 232px;
    --app-topbar-h: 54px;
    --app-bottom-nav-h: 56px;
    --app-radius: 12px;
    --app-shadow: 0 1px 2px rgba(46, 32, 64, .04), 0 1px 3px rgba(46, 32, 64, .06);

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-bg-subtle: #f1e8fb;
    --bs-primary-border-subtle: #dcc6f4;
    --bs-primary-text-emphasis: #5e2a96;
    --bs-info: var(--brand-blue);
    --bs-info-rgb: 74, 97, 253;
    --bs-info-bg-subtle: #e9ecff;
    --bs-info-border-subtle: #c7cfff;
    --bs-info-text-emphasis: #2b3bb0;
    --bs-warning: var(--brand-yellow);
    --bs-warning-rgb: 249, 131, 102;
    --bs-warning-bg-subtle: #feece7;
    --bs-warning-border-subtle: #fcd2c7;
    --bs-warning-text-emphasis: #8f3a22;
    --bs-danger: var(--brand-red);
    --bs-danger-rgb: 255, 87, 122;
    --bs-danger-bg-subtle: #ffe8ed;
    --bs-danger-border-subtle: #ffc7d3;
    --bs-danger-text-emphasis: #a91f44;
    --bs-form-invalid-color: var(--app-danger-text);
    --bs-form-invalid-border-color: var(--brand-red);
    --bs-body-color: var(--brand-deep);
    --bs-body-color-rgb: 46, 32, 64;
    --bs-heading-color: var(--brand-deep);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-link-hover-color-rgb: 126, 54, 199;
    --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.35;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25);
}

[data-bs-theme="dark"] {
    --app-primary: #c39bee;
    --app-primary-hover: #d6bbf4;
    --app-primary-rgb: 195, 155, 238;
    --app-danger-text: #ff8da5;
    --app-warning-text: #fbab97;
    --app-bg: #1e1530;
    --app-surface: var(--brand-deep);
    --app-border: #46375c;
    --app-muted: #b8afc6;
    --app-shadow: none;
    --bs-primary-bg-subtle: #3f2b5e;
    --bs-primary-border-subtle: #5e4585;
    --bs-primary-text-emphasis: #d6bbf4;
    --bs-info-bg-subtle: #27295c;
    --bs-info-border-subtle: #3d4490;
    --bs-info-text-emphasis: #b9c3ff;
    --bs-warning-bg-subtle: #4a2a2c;
    --bs-warning-border-subtle: #7c4238;
    --bs-warning-text-emphasis: #fbc4b6;
    --bs-danger-bg-subtle: #4b2038;
    --bs-danger-border-subtle: #7f2e4a;
    --bs-danger-text-emphasis: #ffb3c3;
    --bs-body-bg: var(--app-bg);
    --bs-body-color: #f2eff6;
    --bs-body-color-rgb: 242, 239, 246;
    --bs-heading-color: #f2eff6;
    --bs-tertiary-bg: #3a2b4e;
    --bs-tertiary-bg-rgb: 58, 43, 78;
    --bs-secondary-bg: #3a2b4e;
    --bs-border-color: var(--app-border);
    --bs-link-hover-color-rgb: 214, 187, 244;
}

/* typografia UI: nagłówki ExtraBold, Caption 12px */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 800; }
strong, b, .fw-semibold { font-weight: 700 !important; }
small, .small, .form-text, .invalid-feedback { font-size: .75rem; line-height: 1.25rem; }
.btn { --bs-btn-font-weight: 700; --bs-btn-font-size: .875rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; }
.btn-sm { --bs-btn-font-size: .75rem; --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; }
.form-control, .form-select { font-size: .875rem; padding-top: .3rem; padding-bottom: .3rem; padding-left: .6rem; }
.card { --bs-card-spacer-y: .75rem; --bs-card-spacer-x: .875rem; --bs-card-cap-padding-y: .5rem; --bs-card-cap-padding-x: .875rem; }
.modal { --bs-modal-padding: .875rem; --bs-modal-header-padding: .75rem .875rem; }
/* formularz w oknie: treść się przewija, nagłówek i przyciski zostają widoczne */
#app-modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.form-card .mb-3, .modal .mb-3 { margin-bottom: .625rem !important; }

/* kolory z palety wymagają ciemnego tekstu - biały nie ma tu kontrastu */
.text-danger { color: var(--app-danger-text) !important; }
.text-bg-danger, .text-bg-warning { color: var(--brand-deep) !important; }
.btn-danger {
    --bs-btn-color: var(--brand-deep); --bs-btn-bg: var(--brand-red); --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-color: var(--brand-deep); --bs-btn-hover-bg: #ff7c97; --bs-btn-hover-border-color: #ff7c97;
    --bs-btn-active-color: var(--brand-deep); --bs-btn-active-bg: #ff7c97; --bs-btn-active-border-color: #ff7c97;
}
.btn-outline-danger {
    --bs-btn-color: var(--app-danger-text); --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-color: var(--brand-deep); --bs-btn-hover-bg: var(--brand-red); --bs-btn-hover-border-color: var(--brand-red);
    --bs-btn-active-color: var(--brand-deep); --bs-btn-active-bg: var(--brand-red); --bs-btn-active-border-color: var(--brand-red);
}

/* logo: wersja zależna od motywu */
.logo { display: block; height: 18px; width: auto; }
.logo-on-dark { display: none; }
[data-bs-theme="dark"] .logo-on-light { display: none; }
[data-bs-theme="dark"] .logo-on-dark { display: block; }

body {
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
}

/* --- przyciski i formularze w kolorze marki --- */
.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: var(--brand-deep); --bs-btn-hover-color: var(--brand-deep); --bs-btn-active-color: var(--brand-deep); }
.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--app-primary-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .18);
}
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primary); --bs-nav-link-color: var(--bs-body-color); --bs-nav-link-hover-color: var(--app-primary); }
.pagination { --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-color: var(--bs-body-color); }
.form-label { font-weight: 700; font-size: .8125rem; margin-bottom: .3rem; }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
    color: var(--bs-body-color); background: transparent;
}
.btn-icon:hover { background: var(--bs-tertiary-bg); }
@media (min-width: 992px) { .btn-icon { width: 32px; height: 32px; } }

/* --- układ --- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 16px; flex: 1; }

.sidebar {
    --bs-offcanvas-width: 280px;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    display: flex; flex-direction: column;
}
@media (min-width: 992px) {
    .sidebar {
        width: var(--app-sidebar-w); flex: 0 0 var(--app-sidebar-w);
        position: sticky; top: 0; height: 100vh;
    }
}
.sidebar-header { display: flex; align-items: center; justify-content: space-between; height: var(--app-topbar-h); padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--bs-body-color); }
.brand-tag { font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--app-muted); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 8px; }
.nav-section { font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; color: var(--app-muted); padding: 10px 10px 4px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; margin-bottom: 1px; border-radius: 8px;
    color: var(--bs-body-color); text-decoration: none; font-weight: 700;
}
.nav-item i { font-size: 1.1rem; color: var(--app-muted); }
.nav-item:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.nav-item.active { background: rgba(var(--app-primary-rgb), .1); color: var(--app-primary); }
.nav-item.active i { color: var(--app-primary); }

.sidebar-footer { display: flex; align-items: center; gap: 4px; padding: 8px; border-top: 1px solid var(--app-border); }
.user-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; text-decoration: none; color: inherit; }
.user-chip:hover, .user-chip.active { background: var(--bs-tertiary-bg); color: inherit; }
.user-chip-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.user-chip-name { font-weight: 700; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-role { font-size: .75rem; color: var(--app-muted); }

.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(var(--app-primary-rgb), .12); color: var(--app-primary);
    font-weight: 700; font-size: .8rem;
}
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }

.topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: 8px;
    height: var(--app-topbar-h); padding: 0 16px;
    background: color-mix(in srgb, var(--app-bg) 85%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--app-border);
}
.topbar-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.topbar-title h1 { font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* --- karty, sekcje --- */
.card { --bs-card-border-color: var(--app-border); --bs-card-bg: var(--app-surface); --bs-card-border-radius: var(--app-radius); --bs-card-cap-bg: transparent; box-shadow: var(--app-shadow); }
.page-intro { margin-bottom: 12px; }
.section-title { font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; color: var(--app-muted); margin: 8px 0 12px; }
.form-card { max-width: 860px; }
.narrow-form { max-width: 420px; }
.form-section { font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; color: var(--app-muted); margin: 20px 0 12px; }
.form-section:first-of-type { margin-top: 8px; }
.page-tabs { gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.page-tabs .nav-link { white-space: nowrap; }

.stat-card {
    display: flex; gap: 10px; align-items: flex-start; height: 100%;
    padding: 10px 12px; border-radius: var(--app-radius);
    background: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow);
    color: inherit; text-decoration: none;
}
a.stat-card:hover { border-color: rgba(var(--app-primary-rgb), .5); color: inherit; }
.stat-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.stat-icon.ok { background: rgba(16, 185, 129, .12); color: #059669; }
.stat-icon.warn { background: rgba(249, 131, 102, .18); color: var(--app-warning-text); }
.stat-icon.bad { background: rgba(255, 87, 122, .16); color: var(--app-danger-text); }
.stat-label { font-size: .75rem; color: var(--app-muted); }
.stat-value { font-weight: 800; font-size: 1rem; line-height: 1.3; }
.stat-sub { font-size: .75rem; color: var(--app-muted); }

.roadmap { margin: 0; padding-left: 1.1rem; color: var(--app-muted); font-size: .8125rem; }
.roadmap li { margin-bottom: 4px; }

/* --- listy / tabele --- */
.list-card { overflow: hidden; }
.list-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--app-border); }
.list-toolbar .search-box { position: relative; flex: 1 1 260px; }
.list-toolbar .search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--app-muted); pointer-events: none; }
.list-toolbar .search-box input { padding-left: 32px; }
.list-toolbar .filter { flex: 0 1 190px; width: auto; }
.list-toolbar .per-page { flex: 0 0 auto; width: auto; }

.table { --bs-table-bg: transparent; margin: 0; }
.table > thead th { font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; color: var(--app-muted); background: var(--bs-tertiary-bg); white-space: nowrap; border-bottom-width: 1px; }
.table > :not(caption) > * > * { padding: .35rem .75rem; }
.table .btn { white-space: nowrap; }
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.th-sort i { opacity: .35; font-size: .8rem; }
.th-sort.active, .th-sort:hover { color: var(--bs-body-color); }
.th-sort.active i { opacity: 1; color: var(--app-primary); }
.row-muted > td { opacity: .6; }
.row-link { cursor: pointer; }
.min-w-0 { min-width: 0; }

.list-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid var(--app-border); }
.empty-state { text-align: center; padding: 28px 12px; }
.empty-state > i { font-size: 2.2rem; color: var(--app-muted); display: block; margin-bottom: 8px; }

/* Na telefonie wiersze tabeli jako karty */
@media (max-width: 767.98px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards tr { padding: 8px 12px; border-bottom: 1px solid var(--app-border); }
    .table-cards tr:last-child { border-bottom: 0; }
    .table-cards > :not(caption) > * > * { padding: 2px 0; border: 0; }
    .table-cards td[data-label] { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; text-align: right; }
    .table-cards td[data-label]::before { content: attr(data-label); color: var(--app-muted); text-align: left; flex: 0 0 auto; }
    .table-cards td.cell-main { padding-bottom: 6px; }
    .table-cards td.cell-actions { text-align: left !important; padding-top: 8px; }
    .table-cards td.d-none { display: none !important; }
}

/* --- ustawienia --- */
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--app-topbar-h) + 16px); }
.settings-nav a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--bs-body-color); text-decoration: none; font-weight: 700; }
.settings-nav a i { color: var(--app-muted); }
.settings-nav a:hover { background: var(--bs-tertiary-bg); }
.settings-nav a.active { background: rgba(var(--app-primary-rgb), .1); color: var(--app-primary); }
.settings-nav a.active i { color: var(--app-primary); }
@media (max-width: 991.98px) {
    .settings-layout { grid-template-columns: 1fr; gap: 12px; }
    .settings-nav { flex-direction: row; overflow-x: auto; position: static; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
    .settings-nav a { white-space: nowrap; background: var(--app-surface); border: 1px solid var(--app-border); }
}

/* --- wiadomości --- */
.meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: .8125rem; margin-bottom: 16px; }
.meta-list dt { color: var(--app-muted); font-weight: 700; }
.meta-list dd { margin: 0; min-width: 0; }
.mail-preview { width: 100%; height: 55vh; border: 1px solid var(--app-border); border-radius: 10px; background: #fff; }
.qr-code { width: 220px; max-width: 100%; padding: 8px; border-radius: 10px; background: #fff; }
.qr-code svg { display: block; width: 100%; height: auto; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--app-border); }
.device-row:first-child { border-top: 0; }
.status-events { padding: 0; border: 0; background: none; color: inherit; }
.status-events:hover .badge { filter: brightness(.92); }
.event-list { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.event-list li { display: flex; gap: 8px; padding: 4px 0; }
.event-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.rich-editor { min-height: 180px; height: auto; max-height: 42vh; overflow-y: auto; }
.rich-editor:focus { outline: 0; }
.rich-editor p { margin: 0 0 .5rem; }
.rich-editor ul, .rich-editor ol { margin: 0 0 .5rem; padding-left: 1.5rem; }
.sms-bubble { display: inline-block; max-width: 100%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(var(--app-primary-rgb), .1); white-space: pre-wrap; word-break: break-word; }

/* --- logowanie --- */
.auth-page { background: radial-gradient(1200px 600px at 10% -10%, rgba(var(--app-primary-rgb), .18), transparent), var(--app-bg); }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; padding: 32px; box-shadow: 0 10px 30px rgba(46, 32, 64, .08); }
.auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.auth-brand .logo { height: 24px; }
.auth-title { font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; margin-bottom: 16px; }
.auth-footer { margin-top: 16px; font-size: .8rem; color: var(--app-muted); }
.error-code { font-size: 3.5rem; font-weight: 700; color: var(--app-primary); line-height: 1; margin-bottom: 8px; }
.error-trace { font-size: .75rem; max-height: 300px; overflow: auto; background: var(--bs-tertiary-bg); padding: 12px; border-radius: 8px; }

/* --- okna potwierdzeń (SweetAlert2) w kolorach aplikacji, także w trybie ciemnym --- */
.swal2-popup.app-swal {
    background: var(--app-surface); color: var(--bs-body-color);
    border: 1px solid var(--app-border); border-radius: 16px;
    font-family: var(--bs-body-font-family); padding: 1.5rem 1.25rem 1.25rem;
    width: min(26rem, calc(100vw - 32px));
}
.app-swal .swal2-title { font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; color: var(--bs-body-color); padding-top: .5rem; }
.app-swal .swal2-html-container { font-size: .8125rem; color: var(--app-muted); }
.app-swal .swal2-icon { transform: scale(.8); margin: .5rem auto 0; }
.app-swal .swal2-actions { margin-top: 1.25rem; }
.app-swal .swal2-actions .btn { min-width: 110px; }
div:where(.swal2-container).swal2-backdrop-show { background: rgba(46, 32, 64, .45); }

/* --- toasty, wskaźnik ładowania --- */
.toast-container { top: 0; right: 0; z-index: 1090; }
.toast { border: 0; box-shadow: 0 8px 24px rgba(46, 32, 64, .15); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
body.htmx-loading::before {
    content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 2000;
    background: linear-gradient(90deg, transparent, var(--app-primary), transparent);
    animation: loadbar 1s linear infinite;
}
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --- telefon: dolna nawigacja, odstępy --- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; height: calc(var(--app-bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--app-surface); border-top: 1px solid var(--app-border);
}
.bottom-nav a, .bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: none; color: var(--app-muted); text-decoration: none; font-size: .75rem; font-weight: 700;
}
.bottom-nav i { font-size: 1.3rem; }
.bottom-nav .active { color: var(--app-primary); }

@media (max-width: 991.98px) {
    .app-content { padding: 12px 12px calc(var(--app-bottom-nav-h) + 16px + env(safe-area-inset-bottom)); }
    .topbar { padding: 0 8px 0 4px; height: 50px; }
    .topbar-title h1 { font-size: 1rem; }
    .toast-container { left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 575.98px) {
    .auth-card { padding: 24px 20px; }
    .list-toolbar { padding: 8px; }
    .list-toolbar .filter { flex: 1 1 140px; }
    .form-control, .form-select { font-size: 16px; } /* iOS nie powiększa przy fokusie */
    .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}

/* ===================== Etap 1: leady ===================== */
[x-cloak] { display: none !important; }

/* statusy - kolory etapów rozmów */
.status-secondary { --st: var(--app-muted); } .status-info { --st: var(--brand-blue); } .status-primary { --st: var(--brand-blue); }
.status-indigo { --st: var(--brand-purple); } .status-warning { --st: var(--app-warning-text); } .status-orange { --st: var(--app-warning-text); }
.status-dark { --st: var(--brand-deep); } .status-success { --st: #16a34a; } .status-danger { --st: var(--app-danger-text); }
[data-bs-theme="dark"] .status-dark { --st: var(--app-muted); }
[data-bs-theme="dark"] .status-primary, [data-bs-theme="dark"] .status-info { --st: #a9b4ff; } [data-bs-theme="dark"] .status-indigo { --st: var(--app-primary); }
.status-badge {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700;
    color: var(--st); background: color-mix(in srgb, var(--st) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--st) 25%, transparent);
}
.status-btn { cursor: pointer; font-size: .8125rem; padding: 4px 12px; }
.status-btn.dropdown-toggle::after { margin-left: 4px; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--st); margin-right: 8px; }
.status-fill { display: block; height: 100%; border-radius: 6px; background: var(--st); min-width: 4px; }

/* lista leadów */
.lead-name { font-weight: 700; color: var(--bs-body-color); text-decoration: none; }
.lead-name:hover { color: var(--app-primary); }
/* czerwony pasek + zachowany cień Bootstrapa, którym rysowany jest hover/stan wiersza */
.table > tbody > tr.row-neglected > td:first-child {
    box-shadow: inset 3px 0 0 var(--app-danger), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
@media (max-width: 767.98px) {
    .table-cards tr.row-neglected { box-shadow: inset 3px 0 0 var(--app-danger); }
    .table > tbody > tr.row-neglected > td:first-child { box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); }
}

/* karta leada */
.lead-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; color: var(--app-muted); }
.lead-meta i { margin-right: 4px; }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.qa {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 4px; border-radius: 8px; border: 1px solid var(--app-border); background: var(--bs-tertiary-bg);
    color: var(--bs-body-color); text-decoration: none; font-size: .75rem; font-weight: 700; cursor: pointer;
}
.qa i { font-size: 1.25rem; color: var(--app-primary); }
.qa:hover { border-color: rgba(var(--app-primary-rgb), .5); color: var(--bs-body-color); }
.qa-call i { color: #16a34a; }
.qa.disabled { opacity: .45; cursor: not-allowed; }
@media (min-width: 992px) { .quick-actions { display: flex; } .qa { flex-direction: row; gap: 6px; padding: 5px 12px; font-size: .8125rem; } .qa i { font-size: 1rem; } }

.activity-types .btn { font-size: .8125rem; }
@media (max-width: 400px) { .activity-types .btn span { display: none; } }
.next-step { padding: 6px 10px; border-radius: 8px; background: var(--bs-tertiary-bg); }
.signature-preview { display: inline-block; margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--app-border); }

/* oś czasu */
.timeline { position: relative; padding-left: 4px; }
.tl-item { position: relative; display: flex; gap: 10px; padding-bottom: 10px; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--app-border); }
.tl-icon { flex: 0 0 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-muted); }
.tl-call .tl-icon { color: #16a34a; } .tl-meeting .tl-icon { color: var(--brand-blue); } .tl-email .tl-icon, .tl-sms .tl-icon { color: var(--app-primary); }
.tl-form .tl-icon { color: var(--app-warning-text); } .tl-status .tl-icon { color: var(--app-primary); }
.tl-body { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; background: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow); }
.tl-system .tl-body, .tl-assign .tl-body { background: transparent; box-shadow: none; border-style: dashed; padding: 4px 10px; font-size: .8125rem; }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: .8125rem; }
.tl-time { margin-left: auto; font-size: .75rem; color: var(--app-muted); }
.tl-del { opacity: 0; transition: opacity .15s; }
.tl-item:hover .tl-del { opacity: 1; }
@media (hover: none) { .tl-del { opacity: .6; } }
.tl-status { margin-top: 4px; font-size: .8125rem; }
.tl-text { margin-top: 4px; white-space: normal; word-break: break-word; }
.tl-message { margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: var(--bs-tertiary-bg); cursor: pointer; font-size: .8125rem; }
.tl-message:hover { outline: 1px solid rgba(var(--app-primary-rgb), .4); }

/* przypomnienia / agenda */
.btn-check-round {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; padding: 0;
    border: 2px solid var(--app-border); background: transparent; color: transparent;
    display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.btn-check-round:hover { border-color: #16a34a; color: #16a34a; background: rgba(22, 163, 74, .08); }
.agenda-item { display: flex; align-items: center; gap: 8px; }
.agenda-time { flex: 0 0 44px; font-weight: 700; font-size: .8125rem; line-height: 1.1; text-align: center; }
.agenda-time small { display: block; font-weight: 400; font-size: .75rem; color: var(--app-muted); }

/* widok miesiąca */
.month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mg-head { padding: 6px 8px; font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; color: var(--app-muted); border-bottom: 1px solid var(--app-border); }
.mg-day { min-height: 90px; padding: 4px 6px; border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); }
.mg-day:nth-child(7n) { border-right: 0; }
.mg-day.out { background: var(--bs-tertiary-bg); opacity: .6; }
.mg-day.weekend:not(.out) { background: color-mix(in srgb, var(--bs-tertiary-bg) 50%, transparent); }
.mg-num { font-size: .8rem; font-weight: 700; margin-bottom: 2px; }
.mg-day.today .mg-num { display: inline-block; min-width: 22px; text-align: center; border-radius: 999px; background: var(--app-primary); color: #fff; }
.mg-item { display: block; font-size: .75rem; padding: 1px 4px; margin-bottom: 2px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(var(--app-primary-rgb), .1); color: var(--bs-body-color); text-decoration: none; }
.mg-item.late { background: rgba(255, 87, 122, .16); }
.mg-item.done { opacity: .5; text-decoration: line-through; }
.mg-time { color: var(--app-muted); }
.mg-more { font-size: .75rem; color: var(--app-muted); }

/* lejek */
.pipe-row { display: grid; grid-template-columns: 120px 1fr 32px; align-items: center; gap: 8px; padding: 2px 0; color: inherit; text-decoration: none; font-size: .8125rem; }
.pipe-row:hover .pipe-label { color: var(--app-primary); }
.pipe-bar { height: 12px; border-radius: 6px; background: var(--bs-tertiary-bg); overflow: hidden; }
.pipe-count { text-align: right; font-weight: 700; }

/* licznik w dolnej nawigacji */
.bottom-nav a { position: relative; }
.bottom-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--app-danger); color: var(--brand-deep); font-size: .65rem; font-weight: 700; line-height: 18px; text-align: center; }
.nav-item .badge { font-size: .75rem; }

/* układ karty leada */
.lead-layout { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "compose" "side" "timeline"; align-items: start; }
.lead-compose { grid-area: compose; }
.lead-side { grid-area: side; }
.lead-timeline { grid-area: timeline; }
.lead-side > .card:last-child { margin-bottom: 0 !important; }
@media (min-width: 992px) {
    .lead-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "compose side" "timeline side"; }
}

/* ===================== Kanban leadów ===================== */
.kanban {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 8px;
    overflow-x: auto; padding-bottom: 8px; align-items: start;
    scroll-snap-type: x proximity;
}
.kanban-col {
    display: flex; flex-direction: column; max-height: calc(100vh - 250px); min-height: 160px;
    background: var(--bs-tertiary-bg); border: 1px solid var(--app-border); border-radius: var(--app-radius);
    scroll-snap-align: start; transition: box-shadow .15s, border-color .15s;
}
.kanban-col.drop-over { border-color: var(--st); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 25%, transparent); }
.kanban-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--app-border); }
.kanban-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st); flex: 0 0 auto; }
.kanban-title { font-weight: 800; font-size: .8125rem; }
.kanban-count { margin-left: auto; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
    color: var(--st); background: color-mix(in srgb, var(--st) 14%, transparent); }
.kanban-cards { display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow-y: auto; flex: 1; }
.kanban-card {
    padding: 6px 8px; border-radius: 8px; background: var(--app-surface); border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow); cursor: grab; font-size: .8125rem;
}
.kanban-card:hover { border-color: rgba(var(--app-primary-rgb), .45); }
.kanban-card.neglected { box-shadow: inset 3px 0 0 var(--app-danger), var(--app-shadow); }
.kanban-card.dragging { opacity: .45; cursor: grabbing; }
.kanban-card.pending { outline: 2px dashed var(--app-primary); outline-offset: 2px; }
.kanban-name { font-weight: 700; color: var(--bs-body-color); text-decoration: none; line-height: 1.3; }
.kanban-name:hover { color: var(--app-primary); }
.kanban-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; color: var(--app-muted); font-size: .75rem; }
.kanban-meta i { margin-right: 3px; }
.kanban-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .75rem; }
.kanban-next { flex: 1; min-width: 0; }
.kanban-call { color: #16a34a; }
.kanban-empty { text-align: center; color: var(--app-muted); font-size: .8rem; padding: 16px 0; }
.kanban-more { display: block; text-align: center; font-size: .75rem; padding: 4px; }
.avatar-xs { width: 24px; height: 24px; font-size: .62rem; }
.view-switch .btn { display: inline-flex; align-items: center; }
@media (max-width: 991.98px) {
    .kanban { grid-auto-columns: 82vw; margin: 0 -16px; padding: 0 16px 8px; scroll-snap-type: x mandatory; }
    .kanban-col { max-height: calc(100vh - 280px); }
}

/* wykonane przypomnienia (karta leada) */
.done-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 12px; border: 0; border-top: 1px solid var(--app-border);
    background: transparent; color: var(--app-muted); font-size: .8rem; font-weight: 700; text-align: left; }
.done-toggle:hover { color: var(--bs-body-color); }
.done-list .list-group-item { background: var(--bs-tertiary-bg); }
.done-mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(22, 163, 74, .14); color: #16a34a; font-size: .8rem; margin-top: 2px; }
.done-title { text-decoration: line-through; color: var(--app-muted); }
.tl-task .tl-icon { color: #16a34a; }
.tl-task .tl-body { background: transparent; box-shadow: none; border-style: dashed; padding: 4px 10px; font-size: .8125rem; }
/* przycisk akcji w toaście (np. "Cofnij") */
.toast .toast-action { margin-left: 8px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 6px;
    background: transparent; color: inherit; font-size: .8rem; font-weight: 700; }
.toast .toast-action:hover { background: rgba(255, 255, 255, .15); }