/* Bot-call - dodatki nad qualiser-akademi.css */

/* Drobne klasy uzytkowe nie objete przez qualiser */
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.cursor-pointer { cursor: pointer; }

/* Tabele leadow - mniej powietrza */
.table-leads td { vertical-align: middle; }
.table-leads .phone { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Transkrypt rozmowy - bubble layout */
.transcript-line {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    max-width: 80%;
    box-shadow: var(--shadow-sm);
}
.transcript-line.bot {
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
}
.transcript-line.client {
    background: #f8f9fa;
    border-left: 3px solid var(--body-text);
    margin-left: auto;
}
.transcript-line .role {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.05em;
}
.transcript-line .time {
    float: right;
    font-size: 0.7rem;
    color: var(--muted);
}

/* Live dot - migajacy wskaznik aktywnej rozmowy */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Login wrapper */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 1rem;
}
.login-card {
    max-width: 420px;
    width: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 2.5rem;
}
.login-card .login-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}
.login-card .login-logo img {
    max-height: 3rem;
    margin-bottom: 0.5rem;
}
.login-card .login-logo h3 {
    color: var(--heading);
    margin: 0;
    font-weight: 700;
}
.login-card .login-logo p {
    color: var(--muted);
    font-size: 0.875rem;
    margin: 0;
}

/* ============================================================
   Dashboard stat-grid - 4 KPI kart obok siebie (CSS Grid)
   Responsywne: 4 col desktop, 2 col tablet, 1 col mobile
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1199px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .stat-grid { grid-template-columns: 1fr; }
}

/* Stat-card - lepsza wersja, override qualiser (margines, hover) */
.stat-grid .stat-card {
    margin: 0 !important;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 1.1rem;
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
}
.stat-grid .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(48, 57, 114, 0.10), 0 4px 10px rgba(48, 57, 114, 0.05);
}

/* Gradient w prawym gornym rogu - subtelny */
.stat-grid .stat-card::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--primary-soft) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.stat-grid .stat-card:hover::after { opacity: 1; }

/* Ikona - kolorowy kwadrat */
.stat-grid .stat-icon {
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}
.stat-grid .stat-icon.primary   { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.stat-grid .stat-icon.secondary { background: linear-gradient(135deg, var(--secondary) 0%, #d85a3a 100%); }
.stat-grid .stat-icon.success   { background: linear-gradient(135deg, var(--success) 0%, #15894a 100%); }
.stat-grid .stat-icon.warning   { background: linear-gradient(135deg, var(--warning) 0%, #d99e1f 100%); }
.stat-grid .stat-icon.info      { background: linear-gradient(135deg, var(--info) 0%, #007e76 100%); }
.stat-grid .stat-icon.danger    { background: linear-gradient(135deg, var(--danger) 0%, #c93f3f 100%); }

/* Tresc karty */
.stat-grid .stat-body { flex: 1; min-width: 0; }
.stat-grid .stat-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.stat-grid .stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.stat-grid .stat-delta {
    font-size: 0.75rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.stat-grid .stat-delta.up   { color: var(--success); }
.stat-grid .stat-delta.down { color: var(--danger); }
.stat-grid .stat-delta a { color: var(--primary); }

/* ============================================================
   TABELE - lepsze (pelna szerokosc, padding, avatary, hover)
   ============================================================ */
.card .table {
    width: 100% !important;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.card .table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 600;
    background: #f9fafc;
    border-bottom: 1px solid var(--border-light);
    padding: 0.875rem 1rem;
    white-space: nowrap;
}
.card .table tbody td {
    vertical-align: middle;
    padding: 1rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--body-text-strong);
}
.card .table tbody tr {
    transition: background .15s ease;
}
.card .table tbody tr:hover {
    background: var(--hover-bg);
}
.card .table tbody tr:last-child td {
    border-bottom: 0;
}
.card .table-responsive {
    border-radius: var(--radius-lg);
}

/* Avatar w tabeli (komorka z osoba) */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.user-cell .avatar {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
    text-transform: uppercase;
}
.user-cell .avatar.secondary { background: linear-gradient(135deg, var(--secondary) 0%, #d85a3a 100%); }
.user-cell .avatar.success   { background: linear-gradient(135deg, var(--success) 0%, #15894a 100%); }
.user-cell .avatar.warning   { background: linear-gradient(135deg, var(--warning) 0%, #d99e1f 100%); }
.user-cell .avatar.info      { background: linear-gradient(135deg, var(--info) 0%, #007e76 100%); }
.user-cell .name {
    color: var(--heading);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
}
.user-cell .meta {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.2;
    margin-top: 2px;
}

/* Status pill - duzy kropek z labelem */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}
.status-dot.active::before     { background: var(--success); box-shadow: 0 0 0 3px rgba(30,186,98,.15); }
.status-dot.inactive::before   { background: var(--muted); }
.status-dot.warning::before    { background: var(--warning); }
.status-dot.danger::before     { background: var(--danger); }
.status-dot.active   { color: var(--success); }
.status-dot.inactive { color: var(--muted); }
.status-dot.warning  { color: #b8860b; }
.status-dot.danger   { color: var(--danger); }

/* Pigulki specjalizacji - kolorowe per kategoria */
.spec-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.spec-zycie    { background: rgba(77,68,181,.12);  color: var(--primary); }
.spec-majatkowe{ background: rgba(0,173,163,.12);  color: var(--info); }
.spec-oc-ac    { background: rgba(251,125,91,.15); color: var(--secondary); }
.spec-default  { background: var(--hover-bg);      color: var(--body-text-strong); }

/* Karta agenta (alternatywa dla tabeli) */
.agent-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
}
.agent-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(48, 57, 114, 0.10);
}
.agent-card .avatar-lg {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.agent-card.inactive { opacity: 0.55; }
.agent-card .agent-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--body-text);
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}
.agent-card .agent-stat i {
    color: var(--primary);
    width: 1rem;
    text-align: center;
}
.agent-card .agent-actions {
    border-top: 1px solid var(--border-soft);
    padding-top: 0.75rem;
    margin-top: 1rem;
    display: flex;
    gap: 0.4rem;
}
.agent-card .specialty-badge-corner {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Off-canvas drawer od prawej */
.qs-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(48, 57, 114, 0.4);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.qs-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.qs-drawer {
    position: fixed;
    top: 0;
    right: -460px;
    width: 440px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 1050;
    transition: right .25s cubic-bezier(.4,0,.2,1);
    box-shadow: -20px 0 60px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
}
.qs-drawer.open { right: 0; }
.qs-drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qs-drawer-header h4 { margin: 0; }
.qs-drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
}
.qs-drawer-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Mini sparkline pod stat-card */
.stat-grid .stat-card canvas.sparkline {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px !important;
    height: 36px !important;
    opacity: 0.7;
}

/* Bulk action bar - sticky na gorze */
.bulk-bar {
    background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 100%);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
}

/* ============================================================
   CONFIG TABS - lewy sidebar z zakladkami (jak macOS Settings)
   ============================================================ */
.config-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 991px) {
    .config-layout { grid-template-columns: 1fr; }
}

.config-tabs {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 0.5rem;
    position: sticky;
    top: 6rem;
}
.config-tab-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius);
    color: var(--body-text-strong);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all .15s ease;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    margin-bottom: 0.125rem;
}
.config-tab-item:hover {
    background: var(--hover-bg);
    color: var(--primary);
}
.config-tab-item i {
    font-size: 1.1rem;
    color: var(--muted);
    min-width: 1.25rem;
    transition: color .15s ease;
}
.config-tab-item.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 16px -4px rgba(77,68,181,0.35);
}
.config-tab-item.active i { color: #fff; }
.config-tab-item .badge-count {
    margin-left: auto;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-weight: 600;
}
.config-tab-item.active .badge-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.config-content {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 2rem;
    min-height: 500px;
}
.config-pane { display: none; }
.config-pane.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.config-pane-header {
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.config-pane-header h3 {
    margin: 0 0 0.25rem;
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.config-pane-header h3 i {
    color: var(--primary);
    font-size: 1.5rem;
}
.config-pane-header p {
    color: var(--muted);
    margin: 0;
    font-size: 0.875rem;
}

/* Pole konfiguracji - ladniejsze */
.config-field {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.config-field:last-child { border-bottom: 0; }
@media (max-width: 767px) {
    .config-field { grid-template-columns: 1fr; gap: 0.5rem; }
}
.config-field-label {
    font-weight: 500;
    color: var(--heading);
    font-size: 0.875rem;
}
.config-field-hint {
    color: var(--muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}
.config-field-input { width: 100%; }

/* Sticky save bar */
.config-save-bar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, #fff 30%);
    padding: 1.25rem 0 0;
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border-soft);
}

/* ============================================================
   CUSTOM FORM CONTROLS - ladne checkboxy, switche, radio, pliki
   ============================================================ */

/* === Custom checkbox === */
.qs-check {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--body-text-strong);
    position: relative;
}
.qs-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.qs-check .qs-check-box {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 6px;
    background: #fff;
    border: 2px solid var(--border-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    position: relative;
}
.qs-check .qs-check-box::after {
    content: '';
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
    margin-bottom: 2px;
}
.qs-check input:checked + .qs-check-box {
    background: var(--primary);
    border-color: var(--primary);
}
.qs-check input:checked + .qs-check-box::after {
    transform: rotate(45deg) scale(1);
}
.qs-check input:focus + .qs-check-box {
    box-shadow: 0 0 0 4px rgba(77,68,181,.15);
}
.qs-check:hover .qs-check-box {
    border-color: var(--primary);
}

/* === Custom switch (toggle slider) === */
.qs-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}
.qs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.qs-switch .qs-switch-slider {
    width: 44px;
    height: 24px;
    background: #d6d6e0;
    border-radius: 24px;
    position: relative;
    transition: background .2s ease;
    flex-shrink: 0;
}
.qs-switch .qs-switch-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform .2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.qs-switch input:checked + .qs-switch-slider {
    background: var(--primary);
}
.qs-switch input:checked + .qs-switch-slider::after {
    transform: translateX(20px);
}
.qs-switch input:focus + .qs-switch-slider {
    box-shadow: 0 0 0 4px rgba(77,68,181,.15);
}
.qs-switch-label {
    font-size: 0.875rem;
    color: var(--body-text-strong);
}

/* === Custom radio === */
.qs-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: var(--body-text-strong);
    position: relative;
}
.qs-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.qs-radio .qs-radio-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
.qs-radio .qs-radio-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .15s ease;
}
.qs-radio input:checked + .qs-radio-dot {
    background: var(--primary);
    border-color: var(--primary);
}
.qs-radio input:checked + .qs-radio-dot::after { transform: scale(1); }
.qs-radio:hover .qs-radio-dot { border-color: var(--primary); }

/* === Radio group (segmented control) === */
.qs-radio-group {
    display: inline-flex;
    background: var(--hover-bg);
    padding: 4px;
    border-radius: var(--radius);
    gap: 2px;
}
.qs-radio-group label {
    padding: .5rem 1rem;
    border-radius: calc(var(--radius) - 4px);
    cursor: pointer;
    font-size: .8125rem;
    color: var(--body-text-strong);
    font-weight: 500;
    transition: all .15s ease;
    user-select: none;
    text-align: center;
}
.qs-radio-group input[type="radio"] { position: absolute; opacity: 0; }
.qs-radio-group label:hover { color: var(--primary); }
.qs-radio-group input:checked + label {
    background: #fff;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* === Input z ikona === */
.qs-input-icon {
    position: relative;
}
.qs-input-icon > i {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: 1rem;
    z-index: 2;
}
.qs-input-icon input,
.qs-input-icon select,
.qs-input-icon textarea {
    padding-left: 2.5rem !important;
}
.qs-input-icon input:focus + i,
.qs-input-icon select:focus + i { color: var(--primary); }

/* === Floating label === */
.qs-float {
    position: relative;
    margin-top: 0.25rem;
}
.qs-float input,
.qs-float textarea,
.qs-float select {
    padding-top: 1.5rem !important;
    padding-bottom: 0.5rem !important;
    height: auto;
    border-radius: var(--radius);
}
.qs-float label {
    position: absolute;
    left: 0.875rem;
    top: 1rem;
    color: var(--muted);
    font-size: 0.875rem;
    pointer-events: none;
    transition: all .15s ease;
    background: transparent;
}
.qs-float input:focus + label,
.qs-float input:not(:placeholder-shown) + label,
.qs-float textarea:focus + label,
.qs-float textarea:not(:placeholder-shown) + label,
.qs-float select:focus + label,
.qs-float select.has-value + label {
    top: 0.4rem;
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* === Drag & drop strefa === */
.qs-dropzone {
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--hover-bg);
    transition: all .2s ease;
    cursor: pointer;
    position: relative;
}
.qs-dropzone:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.qs-dropzone.dragover {
    border-color: var(--primary);
    background: var(--primary-soft);
    transform: scale(1.01);
}
.qs-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.qs-dropzone .qs-dropzone-icon {
    width: 4rem;
    height: 4rem;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
.qs-dropzone h5 { color: var(--heading); margin: 0 0 0.5rem; }
.qs-dropzone .qs-dropzone-hint { color: var(--muted); font-size: 0.875rem; }
.qs-dropzone .qs-dropzone-formats {
    margin-top: 1rem;
    display: inline-flex;
    gap: 0.5rem;
}
.qs-dropzone .qs-dropzone-formats span {
    background: #fff;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--body-text-strong);
    box-shadow: var(--shadow-sm);
}
.qs-dropzone-file {
    background: #fff;
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    box-shadow: var(--shadow-sm);
}
.qs-dropzone-file .file-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--success);
    color: #fff;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === Sekcje formularza - karty z naglowkami === */
.form-section {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.form-section-header {
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.form-section-header .form-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}
.form-section-header .form-section-title {
    color: var(--heading);
    font-weight: 600;
    margin: 0;
    font-size: 1rem;
}
.form-section-header .form-section-sub {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.2;
    margin-top: 2px;
}
.form-section-body { padding: 1.5rem; }

/* === Form-label - ladniejsza === */
.form-label {
    color: var(--heading);
    font-weight: 500;
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.form-label .required-mark { color: var(--danger); }

/* ============================================================
   COMMAND PALETTE (Cmd+K) - duzy modal wyszukiwarki
   ============================================================ */
.cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 16, 32, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1090;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: cmdkBackdropIn .15s ease-out;
}
.cmdk-backdrop.open { display: flex; }
@keyframes cmdkBackdropIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(8px); }
}
.cmdk-modal {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4),
                0 0 0 1px var(--border-soft);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmdkModalIn .2s cubic-bezier(.4,0,.2,1);
}
@keyframes cmdkModalIn {
    from { transform: translateY(-12px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
}
.cmdk-input-wrap i { color: var(--muted); font-size: 1.125rem; }
.cmdk-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--heading);
    font-family: inherit;
}
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-input-wrap kbd {
    background: var(--hover-bg);
    color: var(--muted);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    border: 1px solid var(--border-soft);
}
.cmdk-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem;
}
.cmdk-group {
    padding: 0.5rem 0.5rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--body-text-strong);
    font-size: 0.875rem;
    transition: background .1s ease;
    text-decoration: none;
}
.cmdk-item:hover,
.cmdk-item.selected {
    background: var(--primary-soft);
    color: var(--primary);
}
.cmdk-item.selected .cmdk-icon,
.cmdk-item:hover .cmdk-icon { background: var(--primary); color: #fff; }
.cmdk-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--hover-bg);
    color: var(--body-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all .12s ease;
}
.cmdk-item-label { flex: 1; }
.cmdk-item-sub { color: var(--muted); font-size: 0.75rem; }
.cmdk-item-shortcut {
    background: var(--hover-bg);
    color: var(--muted);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    border: 1px solid var(--border-soft);
}
.cmdk-footer {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-soft);
    background: var(--hover-bg);
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.7rem;
}
.cmdk-footer kbd {
    background: var(--surface);
    color: var(--body-text-strong);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.65rem;
    border: 1px solid var(--border-soft);
    margin: 0 0.2rem;
}
.cmdk-empty {
    padding: 2rem;
    text-align: center;
    color: var(--muted);
}
.cmdk-empty .bi { font-size: 2rem; opacity: 0.5; display: block; margin-bottom: 0.5rem; }

/* ============================================================
   NOTIFICATIONS PANEL (slide-in z prawej)
   ============================================================ */
.notif-btn {
    background: transparent;
    border: none;
    color: var(--body-text);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    position: relative;
}
.notif-btn:hover { background: var(--hover-bg); color: var(--primary); }
.notif-btn .badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--header-bg);
}
.notif-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border-soft);
    z-index: 1080;
    transition: right .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0,0,0,.15);
}
.notif-panel.open { right: 0; }
.notif-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.notif-header h4 { margin: 0; color: var(--heading); }
.notif-body { flex: 1; overflow-y: auto; padding: 0.5rem; }
.notif-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}
.notif-empty .bi { font-size: 3rem; opacity: 0.4; display: block; margin-bottom: 1rem; }

/* ============================================================
   PAGE TRANSITIONS - fade in slide
   ============================================================ */
.content-body { animation: pageIn .35s cubic-bezier(.4,0,.2,1); }
@keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LUCIDE SVG ICONS - styling (FOUC-proof - rezerwujemy miejsce
   zanim JS zamieni <i data-lucide> w inline SVG)
   ============================================================ */
i[data-lucide],
[data-lucide]:not(svg) {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;  /* zeby data-lucide="" tekst nie pokazywal sie przed JS */
}
[data-lucide] {
    stroke-width: 2;
    flex-shrink: 0;
}
svg[data-lucide] {
    width: 18px;
    height: 18px;
}
.menu-item-row > a [data-lucide],
.metismenu .menu-icon[data-lucide] {
    width: 18px !important;
    height: 18px !important;
}
.brand-logo [data-lucide] {
    width: 22px !important;
    height: 22px !important;
    color: #fff;
}
.notif-btn [data-lucide] {
    width: 18px;
    height: 18px;
}
.sidebar-logout-btn [data-lucide],
.sidebar-user-menu a [data-lucide] {
    width: 16px;
    height: 16px;
}
.user-menu-btn [data-lucide] {
    width: 16px;
    height: 16px;
}
/* W kartach, formach itp - ikony chowane domyslnie troche wieksze */
.form-section-icon [data-lucide],
.stat-icon [data-lucide],
.kpi-big-label [data-lucide],
.empty-icon [data-lucide],
.cmdk-icon [data-lucide] {
    width: 20px;
    height: 20px;
}

/* ============================================================
   SIDEBAR COLLAPSE TOGGLE - przycisk w nav-header
   ============================================================ */
.sidebar-collapse-btn {
    background: transparent;
    border: 1px solid var(--sidebar-dark-border);
    color: var(--sidebar-text);
    cursor: pointer;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    padding: 0;
}
.sidebar-collapse-btn:hover {
    background: var(--sidebar-dark-hover);
    color: var(--sidebar-text-bright);
    border-color: var(--sidebar-text-muted);
}
.sidebar-collapse-btn [data-lucide] {
    width: 16px;
    height: 16px;
}

/* ============================================================
   MINI MODE (zwiniety sidebar - tylko ikony)
   ============================================================ */
#main-wrapper.sidebar-mini {
    --sidebar-width: 4.5rem;
}
#main-wrapper.sidebar-mini .nav-header { padding: 0 0.6rem !important; }
#main-wrapper.sidebar-mini .brand-title,
#main-wrapper.sidebar-mini .sidebar-collapse-btn .icon-close,
#main-wrapper.sidebar-mini .sidebar-search,
#main-wrapper.sidebar-mini .menu-title,
#main-wrapper.sidebar-mini .nav-text,
#main-wrapper.sidebar-mini .menu-badge,
#main-wrapper.sidebar-mini .sidebar-user-card .user-info,
#main-wrapper.sidebar-mini .sidebar-user-card .user-menu-btn,
#main-wrapper.sidebar-mini .sidebar-logout-btn .logout-label {
    display: none !important;
}
#main-wrapper.sidebar-mini .brand-logo {
    justify-content: center;
    width: 100%;
}
#main-wrapper.sidebar-mini .metismenu .menu-item-row {
    padding: 0 0.4rem;
}
#main-wrapper.sidebar-mini .metismenu .menu-item-row > a {
    justify-content: center;
    padding: 0.625rem;
    gap: 0;
}
#main-wrapper.sidebar-mini .sidebar-footer {
    padding: 0.5rem;
}
#main-wrapper.sidebar-mini .sidebar-user-card {
    justify-content: center;
    padding: 0.5rem;
}
#main-wrapper.sidebar-mini .sidebar-logout-btn {
    padding: 0.625rem;
    justify-content: center;
}
#main-wrapper.sidebar-mini .sidebar-logout-btn [data-lucide] {
    width: 18px;
    height: 18px;
}
#main-wrapper.sidebar-mini .metismenu {
    padding-top: 0.75rem;
    border-top: 1px solid var(--sidebar-dark-border);
}

/* Tooltips dla mini mode - hover na items */
#main-wrapper.sidebar-mini [data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    background: var(--sidebar-dark-elev);
    color: var(--sidebar-text-bright);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    white-space: nowrap;
    z-index: 1100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    border: 1px solid var(--sidebar-dark-border);
    pointer-events: none;
}
#main-wrapper.sidebar-mini [data-tooltip]:hover::before {
    content: '';
    position: absolute;
    left: calc(100% + 0.25rem);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--sidebar-dark-elev);
    z-index: 1100;
    pointer-events: none;
}

/* Wszystko po prawej - dostosowanie do mini sidebar */
#main-wrapper.sidebar-mini .header {
    left: var(--sidebar-width);
}
#main-wrapper.sidebar-mini .content-body {
    margin-left: var(--sidebar-width);
}

/* Smooth transitions dla collapse */
.nav-header, .dlabnav, .header, .content-body,
.sidebar-user-card, .sidebar-logout-btn {
    transition: width .25s ease, left .25s ease, padding .25s ease, margin-left .25s ease;
}
.brand-title, .nav-text, .menu-badge, .menu-title, .sidebar-search {
    transition: opacity .15s ease;
}

/* ============================================================
   SIDEBAR — CIEMNY (jak na referencji "Side Nav Starter Kit")
   ============================================================ */

:root {
    --sidebar-dark:        #1a2138;
    --sidebar-dark-elev:   #232b46;
    --sidebar-dark-hover:  #2a3252;
    --sidebar-dark-border: #2e375a;
    --sidebar-text:        #b8c0d8;
    --sidebar-text-muted:  #7a8499;
    --sidebar-text-bright: #ffffff;
}

/* === Nav header (brand area u gory) === */
.nav-header {
    background: var(--sidebar-dark) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sidebar-dark-border);
    padding: 0 1.5rem !important;
}
.nav-header .brand-logo {
    gap: 0.75rem !important;
    transition: opacity .15s ease;
    color: var(--sidebar-text-bright) !important;
}
.nav-header .brand-logo:hover { opacity: 0.85; }
.nav-header .brand-logo .bi {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff !important;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem !important;
    box-shadow: 0 6px 16px rgba(77,68,181,0.35);
}
.nav-header .brand-title {
    font-size: 1.125rem !important;
    color: var(--sidebar-text-bright) !important;
    font-weight: 700 !important;
}
.nav-header .nav-control {
    color: var(--sidebar-text) !important;
}
.nav-header .nav-control:hover {
    background: var(--sidebar-dark-hover) !important;
    color: var(--sidebar-text-bright) !important;
}

/* === Sidebar container - FLEX COLUMN, user-card + logout na dole === */
.dlabnav {
    background: var(--sidebar-dark) !important;
    border-right: 0 !important;
    box-shadow: none !important;
    padding: 0.75rem 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.dlabnav .metismenu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 0.5rem;
}
.dlabnav .sidebar-footer {
    border-top: 1px solid var(--sidebar-dark-border);
    padding: 0.75rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* === Search bar (ciemny) === */
.sidebar-search {
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
}
.sidebar-search-input {
    width: 100%;
    background: var(--sidebar-dark-elev);
    border: 1px solid var(--sidebar-dark-border);
    padding: 0.55rem 0.75rem 0.55rem 2.25rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--sidebar-text-bright);
    transition: all .15s ease;
}
.sidebar-search-input::placeholder { color: var(--sidebar-text-muted); }
.sidebar-search-input:focus {
    outline: none;
    background: var(--sidebar-dark-hover);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,99,209,0.2);
}
.sidebar-search-wrap { position: relative; display: flex; align-items: center; }
.sidebar-search-wrap > i,
.sidebar-search-wrap > svg,
.sidebar-search-wrap > [data-lucide] {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--sidebar-text-muted);
    pointer-events: none;
    width: 16px !important;
    height: 16px !important;
    z-index: 2;
}
.sidebar-search-wrap > kbd {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--sidebar-dark-hover);
    border: 1px solid var(--sidebar-dark-border);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
    color: var(--sidebar-text-muted);
    font-family: inherit;
    z-index: 2;
}

/* === Menu sections === */
.metismenu .menu-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sidebar-text-muted);
    text-transform: uppercase;
    user-select: none;
    margin: 0;
    transition: color .15s ease;
}
.metismenu .menu-title:hover { color: var(--sidebar-text-bright); }
.metismenu .menu-title::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    font-size: 0.7rem;
    transition: transform .2s ease;
    color: var(--sidebar-text-muted);
    font-weight: 700;
    opacity: 0.6;
}
.metismenu .menu-title:hover::after { opacity: 1; }
.metismenu .menu-title.collapsed::after { transform: rotate(-90deg); }

/* === Menu items === */
.metismenu .menu-item-row {
    padding: 0 0.75rem;
    margin: 0;
    overflow: hidden;
    max-height: 50px;
    transition: max-height .2s ease, opacity .2s ease;
    list-style: none;
}
.metismenu .menu-item-row.collapsed {
    max-height: 0;
    opacity: 0;
}
.metismenu .menu-item-row > a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    color: var(--sidebar-text);
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all .12s ease;
    text-decoration: none;
    position: relative;
    margin-bottom: 2px;
}
.metismenu .menu-item-row > a:hover {
    background: var(--sidebar-dark-hover);
    color: var(--sidebar-text-bright);
}
.metismenu .menu-item-row > a .menu-icon,
.metismenu .menu-item-row > a .bi {
    font-size: 1.1rem;
    color: var(--sidebar-text-muted);
    transition: color .12s ease;
    min-width: 1.25rem;
    display: inline-flex;
    justify-content: center;
}
.metismenu .menu-item-row > a:hover .menu-icon,
.metismenu .menu-item-row > a:hover .bi {
    color: var(--sidebar-text-bright);
}

/* Active state - jasniejsze tlo + fioletowa kropka */
.metismenu .menu-item-row > a.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(77,68,181,0.4);
}
.metismenu .menu-item-row > a.active .menu-icon,
.metismenu .menu-item-row > a.active .bi {
    color: #fff;
}
.metismenu .menu-item-row > a .nav-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge counter w menu */
.menu-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 0.625rem;
    min-width: 1.25rem;
    text-align: center;
    line-height: 1.3;
}
.menu-badge.secondary { background: var(--secondary); }
.menu-badge.warning   { background: var(--warning); color: #6b4f00; }
.menu-badge.success   { background: var(--success); }
.menu-badge.info      { background: var(--info); }
.menu-item-row > a.active .menu-badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* === User card (na ciemnym, w sidebar-footer flow) === */
.sidebar-user-card {
    position: relative;
    background: var(--sidebar-dark-elev);
    border: 1px solid var(--sidebar-dark-border);
    border-radius: var(--radius);
    padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: background .15s ease;
    cursor: pointer;
}
.sidebar-user-card:hover { background: var(--sidebar-dark-hover); }
.sidebar-user-card .user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(77,68,181,0.3);
}
.sidebar-user-card .user-info { flex: 1; min-width: 0; }
.sidebar-user-card .user-name-sb {
    color: var(--sidebar-text-bright);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-card .user-role-sb {
    color: var(--sidebar-text-muted);
    font-size: 0.7rem;
    line-height: 1.2;
    margin-top: 1px;
}
.sidebar-user-card .user-menu-btn {
    background: transparent;
    border: none;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all .12s ease;
}
.sidebar-user-card .user-menu-btn:hover {
    background: var(--sidebar-dark-hover);
    color: var(--sidebar-text-bright);
}

/* Logout button — czerwony przycisk na dole jak na referencji */
.sidebar-logout-btn {
    position: relative;
    background: var(--danger);
    color: #fff;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all .15s ease;
    box-shadow: 0 4px 12px rgba(253,83,83,0.3);
    width: 100%;
}
.sidebar-logout-btn:hover {
    background: #e34141;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(253,83,83,0.4);
}
.sidebar-logout-btn i { font-size: 1rem; }

/* Dropdown user menu (absolute nad user-card) */
.sidebar-user-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--sidebar-dark-elev);
    border: 1px solid var(--sidebar-dark-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    padding: 0.375rem;
    z-index: 101;
    display: none;
}
.sidebar-user-menu.show { display: block; }
.sidebar-user-menu a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    transition: all .12s ease;
}
.sidebar-user-menu a:hover {
    background: var(--sidebar-dark-hover);
    color: var(--sidebar-text-bright);
}
.sidebar-user-menu a.danger:hover {
    background: rgba(253,83,83,.15);
    color: var(--danger);
}
.sidebar-user-menu hr {
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px solid var(--sidebar-dark-border);
}

/* Scrollbar w ciemnym sidebarze - subtelny, ciemny, nie wystaje poza */
.dlabnav .metismenu::-webkit-scrollbar { width: 4px; }
.dlabnav .metismenu::-webkit-scrollbar-track { background: transparent; }
.dlabnav .metismenu::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background .2s ease; }
.dlabnav:hover .metismenu::-webkit-scrollbar-thumb { background: var(--sidebar-dark-border); }
.dlabnav .metismenu::-webkit-scrollbar-thumb:hover { background: var(--sidebar-text-muted); }
/* Firefox */
.dlabnav .metismenu {
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-dark-border) transparent;
}

/* Ukryty topbar profile gdy mamy user-card w sidebar */
.header-profile-wrapper { display: none; }

/* ============================================================
   ANALYTICS - heatmap, funnel, insights, top performers
   ============================================================ */

/* === Time range picker bar === */
.analytics-toolbar {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.analytics-toolbar .preset-group {
    display: flex;
    gap: 0.25rem;
    background: var(--hover-bg);
    padding: 4px;
    border-radius: var(--radius);
}
.analytics-toolbar .preset-group a {
    padding: 0.5rem 1rem;
    border-radius: calc(var(--radius) - 4px);
    color: var(--body-text-strong);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s ease;
}
.analytics-toolbar .preset-group a:hover { color: var(--primary); }
.analytics-toolbar .preset-group a.active {
    background: #fff;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* === KPI z trendem (% change) === */
.kpi-big {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
}
.kpi-big:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(48,57,114,0.10);
}
.kpi-big-label {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.kpi-big-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.kpi-big-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.kpi-big-trend.up   { background: rgba(30,186,98,.12); color: var(--success); }
.kpi-big-trend.down { background: rgba(253,83,83,.12); color: var(--danger); }
.kpi-big-trend.flat { background: var(--hover-bg); color: var(--muted); }
.kpi-big-sparkline {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 50px;
    opacity: 0.5;
    pointer-events: none;
}

/* === Funnel konwersji === */
.funnel-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    color: #fff;
    position: relative;
    transition: transform .15s ease;
}
.funnel-step:hover { transform: translateX(4px); }
.funnel-step:nth-child(1) { background: linear-gradient(135deg, #4D44B5 0%, #6c63d1 100%); }
.funnel-step:nth-child(2) { background: linear-gradient(135deg, #00ADA3 0%, #2bc2b8 100%); }
.funnel-step:nth-child(3) { background: linear-gradient(135deg, #FCC43E 0%, #ffd362 100%); color: #6b4f00; }
.funnel-step:nth-child(4) { background: linear-gradient(135deg, #FB7D5B 0%, #fd9a7e 100%); }
.funnel-step:nth-child(5) { background: linear-gradient(135deg, #1EBA62 0%, #2dd178 100%); }
.funnel-step .funnel-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.funnel-step .funnel-label {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}
.funnel-step .funnel-value {
    font-size: 1.5rem;
    font-weight: 700;
}
.funnel-step .funnel-percent {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-left: 0.5rem;
}
.funnel-step .funnel-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255,255,255,0.4);
}

/* === Heatmap (dni x godziny) === */
.heatmap {
    display: grid;
    grid-template-columns: 80px repeat(24, 1fr);
    gap: 2px;
    font-size: 0.7rem;
}
.heatmap .hm-header,
.heatmap .hm-day-label {
    color: var(--muted);
    font-weight: 600;
    text-align: center;
    padding: 0.25rem;
}
.heatmap .hm-day-label { text-align: right; }
.heatmap .hm-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--hover-bg);
    cursor: pointer;
    transition: transform .15s ease;
    position: relative;
}
.heatmap .hm-cell:hover {
    transform: scale(1.4);
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.heatmap .hm-cell[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--heading);
    color: #fff;
    padding: 0.4rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}
.heatmap .hm-cell.lv1 { background: rgba(77,68,181,0.15); }
.heatmap .hm-cell.lv2 { background: rgba(77,68,181,0.35); }
.heatmap .hm-cell.lv3 { background: rgba(77,68,181,0.6);  }
.heatmap .hm-cell.lv4 { background: rgba(77,68,181,0.85); }
.heatmap .hm-cell.lv5 { background: var(--primary); }

/* === Insight cards === */
.insight-card {
    background: #fff;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    box-shadow: var(--shadow-sm);
}
.insight-card.success { border-left-color: var(--success); }
.insight-card.warning { border-left-color: var(--warning); }
.insight-card.danger  { border-left-color: var(--danger); }
.insight-card .insight-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    background: var(--primary-soft);
    color: var(--primary);
}
.insight-card.success .insight-icon { background: rgba(30,186,98,.15); color: var(--success); }
.insight-card.warning .insight-icon { background: rgba(252,196,62,.2);  color: #b8860b; }
.insight-card.danger  .insight-icon { background: rgba(253,83,83,.12);  color: var(--danger); }
.insight-card .insight-body { flex: 1; }
.insight-card .insight-title {
    color: var(--heading);
    font-weight: 600;
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}
.insight-card .insight-text {
    color: var(--body-text);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.5;
}

/* === Activity feed === */
.activity-feed {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 0.5rem;
}
.activity-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.activity-item:last-child { border-bottom: 0; }
.activity-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}
.activity-icon.lead-add { background: var(--primary-soft); color: var(--primary); }
.activity-icon.call     { background: rgba(252,196,62,.2); color: #b8860b; }
.activity-icon.email    { background: rgba(0,173,163,.12); color: var(--info); }
.activity-icon.appt     { background: rgba(30,186,98,.15); color: var(--success); }
.activity-icon.dnc      { background: rgba(253,83,83,.12); color: var(--danger); }
.activity-content { flex: 1; min-width: 0; }
.activity-text {
    color: var(--heading);
    font-size: 0.875rem;
    margin: 0 0 0.125rem;
}
.activity-time {
    color: var(--muted);
    font-size: 0.7rem;
}

/* === Top performer row === */
.top-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.top-row:last-child { border-bottom: 0; }
.top-rank {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--hover-bg);
    color: var(--body-text-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.top-rank.gold   { background: linear-gradient(135deg, #fcc43e, #f5a623); color: #fff; box-shadow: 0 2px 8px rgba(252,196,62,.4); }
.top-rank.silver { background: linear-gradient(135deg, #c0c5cf, #8b95a7); color: #fff; }
.top-rank.bronze { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
.top-row .top-name { color: var(--heading); font-weight: 600; flex: 1; min-width: 0; }
.top-row .top-name small { color: var(--muted); font-weight: 400; display: block; }
.top-row .top-value { font-weight: 700; color: var(--heading); }
.top-row .top-bar {
    width: 60px;
    height: 4px;
    background: var(--border-soft);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.top-row .top-bar > div {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
}

/* === Live pulse dot (real-time indicator) === */
.live-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success);
}
.live-pulse::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse-ring 1.5s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(30,186,98,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(30,186,98,0); }
    100% { box-shadow: 0 0 0 0 rgba(30,186,98,0); }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}
.empty-state .empty-icon {
    width: 4rem;
    height: 4rem;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* Keyboard hover dla qs-select (uzupelnia qualiser-akademi) */
.qs-select-option.qs-hover {
    background: var(--hover-bg);
    color: var(--primary);
}
.qs-select-trigger {
    width: 100%;
    background: #fff;
    cursor: pointer;
}

/* Status pill - kolorowe etykiety statusow */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}