/* =============================================================================
   OTMS — _components.css : przyciski, panele, badge, formularze, modale
   ============================================================================= */

/* ===== PRZYCISKI ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.btn:active {
    transform: translateY(0);
}
.btn:disabled,
.btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border-color: var(--brand-blue-dark);
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .2), 0 2px 8px rgba(37, 99, 235, .15);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
    border-color: var(--brand-blue);
    color: #fff;
    box-shadow: 0 2px 4px rgba(37, 99, 235, .3), 0 8px 24px rgba(37, 99, 235, .25);
}

.btn-success {
    background: linear-gradient(135deg, var(--st-success), #15803d);
    border-color: #15803d;
    color: #fff;
}
.btn-success:hover { color: #fff; box-shadow: 0 8px 24px rgba(22, 163, 74, .25); }

.btn-danger {
    background: linear-gradient(135deg, var(--st-danger), #b91c1c);
    border-color: #b91c1c;
    color: #fff;
}
.btn-danger:hover { color: #fff; box-shadow: 0 8px 24px rgba(220, 38, 38, .25); }

.btn-ghost {
    background: transparent;
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--card);
    border-color: var(--border);
    transform: none;
    box-shadow: none;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: var(--r-xs);
}
.btn-lg {
    padding: 11px 18px;
    font-size: 14px;
}
.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}

.btn-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.btn-group .btn {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border);
    box-shadow: none;
}
.btn-group .btn:last-child { border-right: none; }

/* ===== PANELS ===== */
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t);
}
.panel:hover {
    box-shadow: var(--shadow);
}
.panel-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(180deg, var(--card), var(--card-hover));
}
.panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-title svg { color: var(--brand-blue); }
.panel-body {
    padding: 18px;
}
.panel-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--card-hover);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Akcent kolorystyczny na lewej krawędzi panelu */
.panel-accent {
    border-left: 4px solid var(--brand-blue);
}
.panel-accent.success { border-left-color: var(--st-success); }
.panel-accent.warning { border-left-color: var(--st-warning); }
.panel-accent.danger  { border-left-color: var(--st-danger); }
.panel-accent.customs { border-left-color: var(--st-customs); }
.panel-accent.info    { border-left-color: var(--st-info); }

/* ===== STAT CARDS (dashboard kafle) ===== */
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px;
    transition: all var(--t);
    cursor: default;
    position: relative;
    overflow: hidden;
}
.stat-card.clickable {
    cursor: pointer;
}
.stat-card.clickable:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--st-info-bg);
    color: var(--st-info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.stat-card.success .stat-card-icon  { background: var(--st-success-bg); color: var(--st-success); }
.stat-card.warning .stat-card-icon  { background: var(--st-warning-bg); color: var(--st-warning); }
.stat-card.danger .stat-card-icon   { background: var(--st-danger-bg);  color: var(--st-danger); }
.stat-card.customs .stat-card-icon  { background: var(--st-customs-bg); color: var(--st-customs); }
.stat-card-label {
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.stat-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    margin: 4px 0 2px;
    font-family: var(--font-mono);
    letter-spacing: -.02em;
}
.stat-card-delta {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.stat-card-delta.up   { color: var(--st-success); }
.stat-card-delta.down { color: var(--st-danger); }

/* ===== PIGUŁKI STATUSÓW ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    white-space: nowrap;
}
.pill svg { opacity: .9; }

/* ===== BADGE SOFT (np. kierunki) ===== */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: var(--r-xs);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
    border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
    white-space: nowrap;
}

/* ===== AVATAR ===== */
.avatar {
    background: var(--bg);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--bg, var(--brand-blue));
    flex-shrink: 0;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: 14px;
}
.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 5px;
    letter-spacing: .01em;
}
.form-label.required::after {
    content: ' *';
    color: var(--st-danger);
    font-weight: 700;
}
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    transition: all var(--t);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--st-danger);
}
.form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

/* Premium pola w formularzach — spójne z kreatorami. Opt-in: dodaj klasę .form-premium na <form>. */
.form-premium .form-input,
.form-premium .form-select,
.form-premium .form-textarea {
    border: 1.5px solid var(--border-strong);
    background: var(--bg);
}
.form-premium .form-input:focus,
.form-premium .form-select:focus,
.form-premium .form-textarea:focus {
    background: var(--card);
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.form-premium .form-label {
    font-weight: 600;
    color: var(--text-soft);
    font-size: 12px;
}

.form-input-sm { padding: 5px 8px; font-size: 12px; }

.form-error {
    color: var(--st-danger);
    font-size: 11.5px;
    margin-top: 3px;
}
.form-help {
    color: var(--text-muted);
    font-size: 11.5px;
    margin-top: 3px;
}
.form-row {
    display: grid;
    gap: 14px;
}
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 700px) {
    .form-row.cols-2,
    .form-row.cols-3,
    .form-row.cols-4 { grid-template-columns: 1fr; }
}

/* Checkbox / Switch */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.form-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: all var(--t);
    background: var(--card);
    position: relative;
    flex-shrink: 0;
}
.form-check input[type="checkbox"]:checked {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}
.form-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== TABLES (zwykłe) ===== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
}
.data-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--card-hover);
    white-space: nowrap;
}
.data-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    vertical-align: middle;
    font-size: 13px;
}
.data-table tr:hover td {
    background: var(--card-hover);
}
.data-table tr:last-child td {
    border-bottom: none;
}

/* ===== MODAL ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn var(--t);
}
.modal-backdrop.is-open { display: flex; }
.modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalIn var(--t-slow);
}
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--card-hover);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== TOAST ===== */
.toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 4px solid var(--st-info);
    border-radius: var(--r);
    padding: 12px 14px;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    min-width: 220px;
    max-width: 360px;
    animation: slideInRight var(--t-slow);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.toast.success { border-left-color: var(--st-success); }
.toast.warning { border-left-color: var(--st-warning); }
.toast.error,
.toast.danger  { border-left-color: var(--st-danger); }

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}
.empty-state-icon {
    color: var(--text-dim);
    margin-bottom: 14px;
}
.empty-state h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text);
}
.empty-state p {
    color: var(--text-muted);
    margin: 0 0 14px;
    font-size: 13px;
}

/* ===== TABS ===== */
.tabs {
    display: inline-flex;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px;
    gap: 2px;
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-xs);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--t);
    background: transparent;
    border: none;
}
.tab:hover {
    color: var(--text);
    background: var(--card-hover);
    text-decoration: none;
}
.tab.active {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    box-shadow: 0 2px 4px rgba(37, 99, 235, .25);
}
.tab-count {
    background: rgba(0, 0, 0, .08);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}
.tab.active .tab-count {
    background: rgba(255, 255, 255, .25);
}

/* ===== Place display (flag + postal + city) ===== */
.place {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
}
.place .postal {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
}
.place .city {
    color: var(--text);
    font-weight: 500;
}

/* ===== ROW ACTIONS ===== */
.row-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* ===== TABS LARGE (z licznikami i kolorami per tab) ===== */
.tabs.tabs-large {
    padding: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    gap: 3px;
    flex-wrap: wrap;
}
.tabs.tabs-large .tab {
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
}
.tabs.tabs-large .tab .tab-count {
    background: color-mix(in srgb, var(--tc, #2563eb) 16%, transparent);
    color: var(--tc, var(--brand-blue));
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 700;
    font-size: 11px;
    min-width: 20px;
    text-align: center;
}
.tabs.tabs-large .tab.active {
    background: linear-gradient(135deg, var(--tc, var(--brand-blue)), color-mix(in srgb, var(--tc, var(--brand-blue)) 75%, black));
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tc, var(--brand-blue)) 35%, transparent);
}
.tabs.tabs-large .tab.active .tab-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ===== BANNER SZKICÓW ===== */
.drafts-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    padding: 8px 14px;
    border-radius: var(--r);
    margin-bottom: 14px;
    font-size: 13px;
}
.drafts-banner-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #92400e;
    font-weight: 600;
}
.drafts-banner-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-weight: 600;
    padding: 3px 9px 3px 11px;
    border-radius: var(--r-sm);
    font-size: 12px;
    text-decoration: none;
    transition: all var(--t);
    font-family: var(--font-mono);
}
.drafts-banner-chip:hover {
    background: #fde68a;
    color: #78350f;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(245, 158, 11, .25);
}
.drafts-banner-chip .drafts-banner-x {
    opacity: .5;
    font-weight: 400;
    font-size: 14px;
    padding-left: 4px;
    border-left: 1px solid currentColor;
}
.drafts-banner-chip .drafts-banner-x:hover { opacity: 1; }

/* ===== Title count (subtle) ===== */
.page-title-count {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    margin-left: 6px;
}

/* ===== ROUTE HEADER (route show) ===== */
.route-header {
    background: linear-gradient(135deg, var(--card), var(--card-hover));
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-blue);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.route-header-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
}
.route-header-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.route-header-cell-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--text-muted);
}
.route-header-cell-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

/* ===== TABLICA PLANOWANIA ===== */
.planning-section { margin-bottom: 22px; }

.planning-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 6px 4px;
}
.planning-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-soft);
}
.planning-section-title svg { color: #f59e0b; }
.planning-section-count {
    background: #fef3c7;
    color: #92400e;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #fcd34d;
}
.planning-section-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Sekcja "ładunki bez trasy" - pomarańczowy ton */
.planning-orphans .arkusz-wrap {
    background: linear-gradient(180deg, #fffbeb, var(--card));
    border-color: #fcd34d;
    box-shadow: 0 2px 12px rgba(245, 158, 11, .08);
}
.planning-orphans .arkusz thead th {
    background: linear-gradient(180deg, #92400e, #78350f) !important;
}
.planning-orphans-empty {
    background: var(--st-success-bg);
    color: var(--st-success);
    padding: 24px 20px;
    border-radius: var(--r);
    text-align: center;
    border: 1px dashed var(--st-success-border);
}
.planning-orphans-empty p { margin: 6px 0 0; font-weight: 600; }

/* Divider między orphan a trasami */
.planning-section-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 14px;
}
.planning-section-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.planning-section-divider-text {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    white-space: nowrap;
}

/* Trasa w tablicy */
.planning-route {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow var(--t);
}
.planning-route:hover {
    box-shadow: var(--shadow);
}
.planning-route.collapsed .planning-route-body {
    display: none;
}
.planning-route.collapsed .planning-route-toggle {
    transform: rotate(-90deg);
}

.planning-route-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 10%, var(--card)),
        color-mix(in srgb, #f59e0b 4%, var(--card))
    );
    border-bottom: 1px solid var(--border);
    border-left: 4px solid #f59e0b;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--text);
    font-size: 13px;
    transition: background var(--t-fast);
}
.planning-route-header:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 18%, var(--card)),
        color-mix(in srgb, #f59e0b 8%, var(--card))
    );
}
.planning-route-header svg { color: #d97706; }
.planning-route-toggle { transition: transform var(--t); display: inline-flex; align-items: center; }
.planning-route-num {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #d97706;
    font-size: 13.5px;
}
.planning-route-sep { color: var(--text-dim); padding: 0 2px; }
.planning-route-driver { font-weight: 600; }
.planning-route-dates { color: var(--text-soft); font-weight: 500; }
.planning-route-package { font-weight: 700; color: var(--st-success); }
.planning-route-spacer { flex: 1; }
.planning-route-stats {
    background: var(--card);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: 11.5px;
    color: var(--text-soft);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
}

.planning-route-body .arkusz-wrap {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ============================================================
   KARTY PUNKTÓW (show ładunku)
   ============================================================ */
.point-card {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 6px;
    transition: all var(--t);
}
.point-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}
.point-card.point-done {
    background: linear-gradient(135deg, color-mix(in srgb, var(--st-success) 14%, var(--card)), color-mix(in srgb, var(--st-success) 6%, var(--card)));
    border-color: color-mix(in srgb, var(--st-success) 45%, var(--border));
    border-left: 4px solid var(--st-success);
    box-shadow: inset 4px 0 12px -4px color-mix(in srgb, var(--st-success) 30%, transparent);
}
.point-card.point-done .point-head strong {
    color: #14532d;
}
.point-card.point-problem {
    background: linear-gradient(135deg, color-mix(in srgb, var(--st-danger) 14%, var(--card)), color-mix(in srgb, var(--st-danger) 6%, var(--card)));
    border-color: var(--st-danger);
    border-left: 4px solid var(--st-danger);
    box-shadow: inset 4px 0 12px -4px color-mix(in srgb, var(--st-danger) 30%, transparent);
}
.point-card.point-fix {
    border-left: 4px solid var(--st-warning);
}

.point-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-xs);
    background: var(--card);
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
}
.point-check:hover {
    border-color: var(--brand-blue);
    background: color-mix(in srgb, var(--brand-blue) 8%, var(--card));
}
.point-check.checked {
    background: var(--st-success);
    border-color: var(--st-success);
    color: #fff;
}

.point-body {
    flex: 1;
    min-width: 0;
}
.point-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.point-head strong { font-size: 13px; }

.point-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 22px;
    height: 22px;
    border-radius: var(--r-xs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: all var(--t-fast);
}
.point-action-btn:hover {
    border-color: var(--st-danger);
    color: var(--st-danger);
    background: var(--st-danger-bg);
}

.point-notes {
    margin-top: 5px;
    padding: 6px 10px;
    background: var(--bg);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--r-xs);
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.5;
}
.point-problem-note {
    margin-top: 5px;
    padding: 6px 10px;
    background: var(--st-danger-bg);
    border-left: 3px solid var(--st-danger);
    border-radius: var(--r-xs);
    color: var(--st-danger);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   HISTORIA - linia czasu
   ============================================================ */
.history-item {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    position: relative;
    padding-left: 14px;
}
.history-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c, var(--brand-blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--brand-blue)) 20%, transparent);
}
.history-item:last-child { border-bottom: none; }
.history-time {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 70px;
    padding-top: 2px;
}
.history-body {
    flex: 1;
    font-size: 12px;
}

/* ============================================================
   DOC CARDS - karty dokumentów w show ładunku
   ============================================================ */
.doc-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    transition: all var(--t-fast);
}
.doc-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }

/* Stan: wymagany i pusty — RÓŻOWY/CZERWONY (brakuje numeru) */
.doc-card[data-status="missing"] {
    background: color-mix(in srgb, var(--st-danger) 8%, var(--card));
    border-color: color-mix(in srgb, var(--st-danger) 35%, var(--border));
}
.doc-card[data-status="missing"] .doc-card-input {
    background: color-mix(in srgb, var(--st-danger) 7%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--st-danger) 40%, var(--border));
}
.doc-card[data-status="missing"] .doc-card-input::placeholder { color: color-mix(in srgb, var(--st-danger) 60%, var(--text-muted)); }

/* Stan: numer wpisany / plik dodany — ŻÓŁTY panel + pole */
.doc-card[data-status="number_entered"],
.doc-card[data-status="file_added"] {
    background: color-mix(in srgb, var(--st-warning) 12%, var(--card));
    border-color: color-mix(in srgb, var(--st-warning) 45%, var(--border));
}
.doc-card[data-status="number_entered"] .doc-card-input,
.doc-card[data-status="file_added"] .doc-card-input {
    background: color-mix(in srgb, var(--st-warning) 10%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--st-warning) 45%, var(--border));
}

/* Stan: potwierdzony — CAŁY ZIELONY */
.doc-card[data-status="confirmed"] {
    background: color-mix(in srgb, var(--st-success) 12%, var(--card));
    border-color: color-mix(in srgb, var(--st-success) 45%, var(--border));
}
.doc-card[data-status="confirmed"] .doc-card-input {
    background: color-mix(in srgb, var(--st-success) 9%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--st-success) 40%, var(--border));
}

/* Stan: nie dotyczy — szary/wyciszony */
.doc-card[data-status="not_applicable"] {
    background: var(--card-hover);
    opacity: .7;
}

.doc-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.doc-card-label {
    flex: 1;
    font-size: 12.5px;
    color: var(--text);
}
.doc-card-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: .05em;
    font-family: var(--font-mono);
}
.doc-card-badge.req {
    background: color-mix(in srgb, var(--st-danger) 14%, transparent);
    color: var(--st-danger);
    border: 1px solid color-mix(in srgb, var(--st-danger) 30%, transparent);
}
.doc-card-badge.opt {
    background: var(--card-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.doc-card-body {
    display: flex;
    gap: 5px;
    align-items: center;
}
.doc-card-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    padding: 5px 9px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text);
    transition: all var(--t-fast);
}
.doc-card-input:focus {
    outline: none;
    background: var(--bg-elevated) !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-blue) 20%, transparent);
}
.doc-card-input[readonly] {
    background: var(--card);
    cursor: not-allowed;
    opacity: .7;
}

.doc-card-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--r-xs);
    background: var(--card-hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.doc-card-btn:hover {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}
.doc-card-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.doc-card-btn.doc-card-confirm.is-confirmed {
    background: var(--st-success);
    color: #fff;
    border-color: var(--st-success);
}
.doc-card-btn.doc-card-remove {
    width: 22px;
    height: 22px;
    background: transparent;
    border-color: transparent;
}
.doc-card-btn.doc-card-remove:hover {
    background: var(--st-danger);
    color: #fff;
    border-color: var(--st-danger);
}

.doc-card-file {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--st-info-bg);
    color: var(--st-info);
    border-radius: var(--r-xs);
    font-size: 11.5px;
}
.doc-card-file a {
    color: var(--st-info);
    text-decoration: none;
    font-weight: 600;
}
.doc-card-file a:hover { text-decoration: underline; }

/* ============================================================
   LOAD TABS (zakładki w show ładunku)
   ============================================================ */
.load-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 4px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.load-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
}
.load-tab:hover {
    background: var(--card-hover);
    color: var(--text);
}
.load-tab.active {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-blue) 35%, transparent);
}
.load-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    background: color-mix(in srgb, var(--brand-blue) 14%, transparent);
    color: var(--brand-blue);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}
.load-tab.active .load-tab-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.load-tab-content[hidden] { display: none; }

/* ============================================================
   HISTORY TIMELINE (rozbudowana zakładka historii)
   ============================================================ */
.history-filters {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-left: auto;
}
.history-filter-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: var(--r-xs);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
}
.history-filter-btn:hover {
    background: var(--card-hover);
    color: var(--text);
}
.history-filter-btn.active {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.history-timeline {
    padding: 14px 18px;
    max-height: 700px;
    overflow-y: auto;
    position: relative;
}
.history-timeline::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--line);
    z-index: 0;
}

.history-entry {
    display: flex;
    gap: 14px;
    padding: 8px 0;
    position: relative;
    z-index: 1;
}
.history-entry[hidden] { display: none; }
.history-entry-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c, var(--brand-blue));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--bg-elevated), 0 0 0 4px var(--c, var(--brand-blue));
    z-index: 2;
}
.history-entry-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--line);
}
.history-entry:last-child .history-entry-body {
    border-bottom: none;
}

.history-entry-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text);
}
.history-entry-action {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 7px;
    background: color-mix(in srgb, var(--c, var(--brand-blue)) 12%, transparent);
    border-radius: var(--r-xs);
}
.history-entry-entity {
    color: var(--text-soft);
    font-weight: 600;
}
.history-entry-field {
    color: var(--text-muted);
    font-size: 12px;
}
.history-entry-field .mono {
    background: var(--card-hover);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--text);
}

.history-entry-diff {
    margin-top: 5px;
    padding: 4px 9px;
    background: var(--bg);
    border-left: 3px solid var(--c, var(--brand-blue));
    border-radius: var(--r-xs);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.history-diff-old {
    color: var(--text-muted);
    text-decoration: line-through;
    font-family: var(--font-mono);
    background: var(--st-danger-bg);
    padding: 1px 6px;
    border-radius: 3px;
}
.history-diff-arrow { color: var(--text-dim); font-weight: 700; }
.history-diff-new {
    color: var(--st-success);
    font-family: var(--font-mono);
    background: var(--st-success-bg);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.history-entry-comment {
    margin-top: 5px;
    padding: 4px 9px;
    background: var(--st-info-bg);
    color: var(--st-info);
    border-radius: var(--r-xs);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.history-entry-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   ATTACHMENTS GRID
   ============================================================ */
.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    padding: 6px;
}
.att-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: all var(--t);
}
.att-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.att-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-xs);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.att-card-body { flex: 1; min-width: 0; }
.att-card-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.att-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.att-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
}
.att-card-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--card-hover);
    color: var(--brand-blue);
    border-radius: var(--r-xs);
    transition: all var(--t-fast);
    text-decoration: none;
}
.att-card-download:hover {
    background: var(--brand-blue);
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   CONFIRMATIONS (potwierdzenia zlecenia)
   ============================================================ */
.confirmations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.conf-card {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--r-sm);
    transition: box-shadow var(--t);
}
.conf-card:hover { box-shadow: var(--shadow-sm); }
.conf-card.is-pending  { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 4%, var(--card)); }
.conf-card.is-viewed   { border-left-color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 4%, var(--card)); }
.conf-card.is-accepted { border-left-color: #16a34a; background: color-mix(in srgb, #16a34a 4%, var(--card)); }
.conf-card.is-revoked  { border-left-color: #dc2626; background: color-mix(in srgb, #dc2626 4%, var(--card)); opacity: .7; }

.conf-card-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    padding-top: 2px;
}
.conf-card.is-pending  .conf-card-icon { color: #f59e0b; }
.conf-card.is-viewed   .conf-card-icon { color: #0ea5e9; }
.conf-card.is-accepted .conf-card-icon { color: #16a34a; }
.conf-card.is-revoked  .conf-card-icon { color: #dc2626; }

.conf-card-body { flex: 1; min-width: 0; }
.conf-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 13px;
}
.conf-card-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    margin-bottom: 6px;
}
.conf-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.conf-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.conf-stat-value {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
}
.conf-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
}
.conf-card-token {
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--text-muted);
}

/* ============================================================
   DICTIONARY VALUES EDITOR
   ============================================================ */
.dict-values-list {
    display: flex;
    flex-direction: column;
}
.dict-value-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    transition: background var(--t-fast);
}
.dict-value-row:hover {
    background: var(--card-hover);
}
.dict-value-row.is-inactive {
    opacity: .45;
    display: none;
}
body.dict-show-inactive .dict-value-row.is-inactive {
    display: flex;
}
.dict-value-row.is-dragging {
    opacity: .4;
}

.dict-drag-handle {
    color: var(--text-dim);
    cursor: grab;
    user-select: none;
    font-size: 16px;
    padding: 2px 4px;
    border-radius: 4px;
}
.dict-drag-handle:hover {
    background: var(--card-hover);
    color: var(--brand-blue);
}
.dict-drag-handle:active { cursor: grabbing; }

.dict-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.dict-value-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dict-value-label {
    font-size: 14px;
    color: var(--text);
}
.dict-value-key {
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 3px;
}
.dict-value-desc {
    width: 100%;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.dict-value-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.dict-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: .05em;
    font-family: var(--font-mono);
}
.dict-badge.system   { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; border: 1px solid color-mix(in srgb, #7c3aed 30%, transparent); }
.dict-badge.default  { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; border: 1px solid color-mix(in srgb, #16a34a 30%, transparent); }
.dict-badge.inactive { background: color-mix(in srgb, var(--st-danger) 12%, transparent); color: var(--st-danger); border: 1px solid color-mix(in srgb, var(--st-danger) 30%, transparent); }

.dict-value-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.admin-kpi-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--c);
    border-radius: var(--r-sm);
    padding: 14px;
    transition: all var(--t-fast);
}
.admin-kpi-tile.is-alert {
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, var(--card)), var(--card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}
.admin-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-kpi-content { min-width: 0; flex: 1; }
.admin-kpi-value {
    font-size: 26px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text);
    line-height: 1;
}
.admin-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-top: 4px;
}
.admin-kpi-sub {
    color: var(--text-muted);
    font-size: 11px;
}

.admin-finance-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.admin-finance-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 14px 16px;
}
.admin-finance-card.is-margin {
    background: linear-gradient(135deg, color-mix(in srgb, #16a34a 8%, var(--card)), var(--card));
    border-color: color-mix(in srgb, #16a34a 25%, var(--border));
}
.admin-finance-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.admin-finance-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.admin-detail-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.admin-detail-panel > header {
    padding: 10px 14px;
    background: var(--card-hover);
    border-bottom: 1px solid var(--border);
}
.admin-detail-panel h3 {
    margin: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-detail-panel h3 .badge {
    background: var(--text-muted);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
}
.admin-detail-list { max-height: 320px; overflow-y: auto; }
.admin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.admin-row:last-child { border-bottom: none; }
.admin-row:hover { background: var(--card-hover); }
.admin-row-link {
    display: flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0;
    color: var(--text); text-decoration: none;
}
.admin-row-link:hover { color: var(--brand-blue); }
.admin-row-link .mono { font-size: 11.5px; }
.admin-row-days {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--st-warning) 15%, var(--card));
    color: var(--st-warning);
}
.admin-row-days.is-critical {
    background: var(--st-danger);
    color: #fff;
}
.empty-state {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
}

.admin-chart-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 16px;
}
.admin-chart-section h3 {
    margin: 0 0 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-bar-chart {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 180px;
    padding: 8px;
    background: var(--bg);
    border-radius: var(--r-xs);
}
.admin-bar-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 100%;
}
.admin-bar-value {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.admin-bar {
    width: 100%;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: background var(--t-fast);
}
.admin-bar:hover { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.admin-bar-date {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.switch-mini {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
}
.switch-mini input { opacity: 0; width: 0; height: 0; }
.switch-mini span {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-strong);
    border-radius: 18px;
    transition: var(--t-fast);
}
.switch-mini span:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: var(--t-fast);
}
.switch-mini input:checked + span { background: var(--st-success); }
.switch-mini input:checked + span:before { transform: translateX(14px); }

@media (max-width: 900px) {
    .admin-detail-grid { grid-template-columns: 1fr; }
    .admin-finance-row { grid-template-columns: 1fr; }
}

/* ============================================================
   KOMENTARZE / NOTATKI ZESPOŁOWE
   ============================================================ */
.comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--card);
    margin-bottom: 8px;
}
.comment-item.is-pinned {
    background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 8%, var(--card)), var(--card));
    border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
    border-left: 3px solid #f59e0b;
}
.comment-item.is-internal {
    border-left: 3px solid #dc2626;
    background: color-mix(in srgb, #dc2626 4%, var(--card));
}
.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.comment-head strong { font-size: 13px; }
.comment-role {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.comment-date {
    color: var(--text-muted);
    font-size: 11px;
}
.comment-flag {
    font-size: 11px;
}
.comment-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
}
.comment-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.comment-item:hover .comment-actions { opacity: 1; }
.link-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
.link-btn:hover {
    background: var(--card-hover);
    color: var(--brand-blue);
}

.comment-form textarea {
    width: 100%;
    margin-bottom: 8px;
}
.comment-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Customs section sticky nav z fioletowym akcentem */
.wizard-nav-item[data-target="sec-customs"] {
    border-left-color: #7C3AED;
}

/* ============================================================
   HOTFIX 022 - Status changer w show ładunku
   ============================================================ */
.status-changer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all var(--t-fast);
    padding: 2px 4px;
    border-radius: 4px;
}
.status-changer:hover {
    background: var(--card-hover);
}
.status-changer-hint {
    font-size: 9px;
    opacity: .5;
}

.status-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.status-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid var(--border);
    background: var(--card);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
    transition: all var(--t-fast);
}
.status-option:hover {
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 6%, var(--card));
}
.status-option.is-active {
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, var(--card));
}
.status-option-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-option-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.status-option-text strong { font-size: 13px; }
.status-option-text small {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.status-option-current {
    font-size: 10px;
    color: var(--c);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Cargo rozwijalne */
.cargo-row.has-details {
    cursor: pointer;
}
.cargo-row.is-expanded {
    background: var(--card-hover);
}
.cargo-details-row td {
    background: color-mix(in srgb, var(--brand-blue) 5%, var(--card));
    padding: 8px 14px;
    border-top: 1px dashed var(--border);
}
.cargo-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}
.cargo-details div strong {
    color: var(--text);
    font-weight: 600;
    margin-right: 4px;
}
.cargo-detail-icon {
    margin-left: 6px;
    font-size: 11px;
    opacity: .85;
}
.btn-icon-xs {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: var(--card-hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-icon-xs:hover {
    background: var(--brand-blue);
    color: #fff;
}

/* Autocomplete - opcja "Dodaj nowy" wyróżniona */
.autocomplete-item.autocomplete-add-new {
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, #16a34a 6%, var(--card));
    font-weight: 600;
}
.autocomplete-item.autocomplete-add-new:hover {
    background: color-mix(in srgb, #16a34a 18%, var(--card));
}
.autocomplete-empty {
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Mode pills w wizard - alert wariant */
.mode-pill.is-alert,
.modes-pills .is-alert {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 50%, transparent);
    animation: alert-pulse-wizard 1.6s ease-in-out infinite;
}
@keyframes alert-pulse-wizard {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 50%, transparent), 0 0 0 0 color-mix(in srgb, #dc2626 50%, transparent); }
    50%      { box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 50%, transparent), 0 0 0 8px transparent; }
}

/* ============================================================
   HOTFIX 026A - Sekcja Ustalenia specjalne w show ładunku
   ============================================================ */
.special-terms-panel {
    border-left: 4px solid #f97316;
    background: linear-gradient(135deg, color-mix(in srgb, #f97316 6%, var(--card)), var(--card));
}
.special-terms-panel .panel-header {
    background: linear-gradient(135deg, color-mix(in srgb, #f97316 10%, var(--card-hover)), var(--card-hover));
    border-bottom: 1px solid color-mix(in srgb, #f97316 25%, var(--border));
}
.special-terms-content {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    padding: 4px 2px;
}

/* ============================================================
   HOTFIX 026A - Wizard sekcja Ustalenia + Modal doklejania regulaminu
   ============================================================ */
.wizard-nav-item[data-target="sec-terms"] {
    border-left-color: #F97316;
}
#sec-terms #special-terms {
    min-height: 120px;
    font-size: 13px;
    line-height: 1.5;
    border: 2px solid color-mix(in srgb, #F97316 20%, var(--border));
    background: color-mix(in srgb, #F97316 3%, var(--card));
}
#sec-terms #special-terms:focus {
    border-color: #F97316;
    outline: none;
    background: color-mix(in srgb, #F97316 6%, var(--card));
}

.terms-picker-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: all var(--t-fast);
}
.terms-picker-item:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-blue) 15%, transparent);
}
.terms-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.terms-picker-head strong {
    font-size: 14px;
    color: var(--text);
}
.terms-picker-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.terms-picker-preview {
    background: var(--bg);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    max-height: 120px;
    overflow-y: auto;
    border: 1px dashed var(--border);
}
.terms-picker-pick {
    width: 100%;
}

/* ============================================================
   HOTFIX 027 - Sale cards w show ładunku
   ============================================================ */
.sale-card {
    background: var(--card);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    border: 1px solid var(--border);
}
.sale-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.sale-card-head .mono {
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
}
.sale-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    padding: 6px 0;
}
.sale-card-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sale-card-row .text-muted { font-size: 11px; min-width: 70px; }
.sale-card-terms {
    background: color-mix(in srgb, #f97316 6%, var(--bg));
    border-left: 3px solid #f97316;
    padding: 6px 8px;
    border-radius: 3px;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
}
.sale-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px dashed var(--border);
}

/* ============================================================
   HOTFIX 030 - Notification bell + dropdown
   ============================================================ */
.topbar-bell {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--t-fast);
    color: var(--text);
}
.topbar-bell:hover { background: var(--card-hover); }
.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 16px;
    height: 16px;
    text-align: center;
    line-height: 14px;
    border: 2px solid var(--bg);
}
.notif-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    width: 380px;
    max-height: 500px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: default;
}
.notif-dropdown[hidden] { display: none; }
.notif-dropdown-head, .notif-dropdown-foot {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notif-dropdown-foot {
    border-bottom: none;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.notif-dropdown-body {
    flex: 1;
    overflow-y: auto;
    max-height: 380px;
}
.notif-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast);
}
.notif-item:hover { background: var(--card-hover); }
.notif-item.unread {
    background: color-mix(in srgb, var(--brand-blue) 5%, var(--card));
    border-left: 3px solid var(--brand-blue);
}
.notif-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}
.notif-item-head small { color: var(--text-muted); font-size: 10px; font-family: var(--font-mono); }
.notif-item-body {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

/* ============================================================
   HOTFIX 035 - Brakujące klasy dla widoków sprzedaży/admin
   (page-head, ph-*, kpi-*, table) - mapowane na style systemu
   ============================================================ */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 14px;
}
.ph-title h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ph-sub {
    color: var(--text-muted);
    font-size: 13px;
    margin: 4px 0 0;
    font-weight: 500;
}
.ph-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* KPI cards */
.kpi-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}
.kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all var(--t);
}
.kpi-card:hover {
    border-color: color-mix(in srgb, var(--brand-blue) 40%, var(--border));
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.kpi-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -.02em;
}

/* Tabela (alias data-table z opcją compact) */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    font-size: 13px;
}
.table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr {
    transition: background var(--t-fast);
}
.table tbody tr:hover {
    background: var(--card-hover);
}
.table-compact th { padding: 7px 10px; }
.table-compact td { padding: 6px 10px; font-size: 12.5px; }

/* btn-icon (akcje w tabelach) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--t-fast);
    text-decoration: none;
    margin: 0 1px;
}
.btn-icon:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    background: color-mix(in srgb, var(--brand-blue) 8%, var(--card));
}

/* alert boxy (import CSV wyniki) */
.alert {
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.5;
}
.alert-success {
    background: color-mix(in srgb, #16a34a 10%, var(--card));
    border: 1px solid color-mix(in srgb, #16a34a 35%, var(--border));
    color: var(--text);
}
.alert-danger {
    background: color-mix(in srgb, #dc2626 10%, var(--card));
    border: 1px solid color-mix(in srgb, #dc2626 35%, var(--border));
    color: var(--text);
}

/* empty-state (gdy brak danych) */
.empty-state {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
}
.empty-state h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.empty-state p { margin: 0; font-size: 13px; }

/* form-input-sm (filtry widget) */
.form-input-sm {
    padding: 4px 8px !important;
    font-size: 12px !important;
    height: auto !important;
}

/* form-check (smtp toggle) */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
}

/* form-grid responsywny */
.form-grid { display: grid; gap: 12px; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.form-block { margin-bottom: 18px; }

@media (max-width: 720px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    .page-head { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   HOTFIX 040 - Premium lista sprzedaży
   ============================================================ */
.sales-kpi {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.skpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    text-align: center;
    transition: all var(--t-fast);
}
.skpi.clickable { cursor: pointer; }
.skpi.clickable:hover { border-color: var(--brand-blue); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.skpi-v { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.skpi-l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; font-weight: 600; }
.skpi-value .skpi-v { font-size: 16px; }
@media (max-width: 1100px){ .sales-kpi{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .sales-kpi{ grid-template-columns: repeat(2,1fr); } }

.sales-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.stb-search {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: center;
}
.stb-search svg { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
.stb-search input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--text);
    font-size: 13.5px;
    transition: border-color var(--t-fast);
}
.stb-search input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 12%, transparent); }
.stb-count { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; margin-left: auto; }
.btn-sm { padding: 6px 12px !important; font-size: 12.5px !important; }

.sales-panel { padding: 0; overflow: hidden; }
.sales-table { margin: 0; }
.sales-table th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 22px; transition: color var(--t-fast); }
.sales-table th.sortable:hover { color: var(--brand-blue); }
.sales-table th.sortable::after { content: '↕'; position: absolute; right: 8px; opacity: .35; font-size: 10px; }
.sales-table th.sort-asc::after { content: '↑'; opacity: 1; color: var(--brand-blue); }
.sales-table th.sort-desc::after { content: '↓'; opacity: 1; color: var(--brand-blue); }
.sales-table tr.no-hover:hover { background: transparent; }
.sales-num { font-weight: 700; color: var(--brand-blue); text-decoration: none; }
.sales-num:hover { text-decoration: underline; }

.carrier-chip {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 100px;
    font-size: 11.5px; font-weight: 600;
    background: color-mix(in srgb, var(--cc) 14%, var(--card));
    color: var(--cc);
    border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent);
    white-space: nowrap;
}
.type-pill {
    display: inline-block; padding: 2px 8px; border-radius: var(--r-sm);
    font-size: 11px; background: var(--bg); color: var(--text-muted);
    border: 1px solid var(--border); white-space: nowrap;
}
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); margin-right: 6px; vertical-align: middle; }
.nowrap { white-space: nowrap; }

/* ============================================================
   HOTFIX 041 - Moduł adresów (premium) + wzorzec paneli
   ============================================================ */
.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
}
.panel-head svg { color: var(--brand-blue); }
.panel-count {
    background: var(--brand-blue); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 100px; display: inline-flex; align-items: center; justify-content: center;
}
.panel + .panel { margin-top: 16px; }

.addr-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 980px){ .addr-grid{ grid-template-columns: 1fr; } }

.addr-flag, .ph-sub .addr-flag {
    display: inline-block; padding: 2px 10px; border-radius: 100px;
    font-size: 11px; font-weight: 700;
    background: color-mix(in srgb, var(--fc) 14%, transparent);
    color: var(--fc); border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent);
    margin-right: 4px;
}
.addr-warning {
    display: flex; align-items: center; gap: 12px;
    background: color-mix(in srgb, #dc2626 8%, var(--card));
    border: 1px solid color-mix(in srgb, #dc2626 30%, var(--border));
    border-left: 4px solid #dc2626;
    border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 16px; color: var(--text);
}
.addr-warning svg { color: #dc2626; flex-shrink: 0; }

.addr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
@media (max-width: 560px){ .addr-fields{ grid-template-columns: 1fr; } }
.afield { display: flex; flex-direction: column; gap: 2px; }
.afield-l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.afield-v { font-size: 14px; color: var(--text); font-weight: 500; }
.addr-notes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* Karty kontaktów */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; }
.contact-card { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); transition: all var(--t-fast); }
.contact-card:hover { border-color: color-mix(in srgb, var(--brand-blue) 40%, var(--border)); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.contact-avatar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), #3b82f6); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.contact-info { min-width: 0; flex: 1; }
.contact-name { font-weight: 700; font-size: 14px; color: var(--text); }
.contact-pos { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.contact-links { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.contact-links a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--brand-blue); text-decoration: none; }
.contact-links a:hover { text-decoration: underline; }
.contact-note { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; font-style: italic; }

/* Lista użyć */
.usage-list { display: flex; flex-direction: column; gap: 2px; }
.usage-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); transition: background var(--t-fast); }
.usage-item:hover { background: var(--card-hover); }
.usage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uc); flex-shrink: 0; }
.usage-num { font-weight: 700; color: var(--brand-blue); font-size: 13px; }
.usage-meta { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }

/* Edycja: flagi + kontakty */
.addr-flags-pick { display: flex; gap: 16px; flex-wrap: wrap; }
.flag-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.flag-check span { padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--fc) 12%, transparent); color: var(--fc); }
.contacts-edit { display: flex; flex-direction: column; gap: 8px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr auto; gap: 6px; align-items: center; }
@media (max-width: 760px){ .contact-row{ grid-template-columns: 1fr 1fr; } }
.contact-del { color: #dc2626 !important; }
.contact-del:hover { background: color-mix(in srgb,#dc2626 10%,var(--card)) !important; border-color:#dc2626 !important; }
.addr-warn-flag { color:#dc2626; margin-left:5px; vertical-align:middle; }
.addr-warn-flag svg { vertical-align:middle; }

/* ============================================================
   HOTFIX 043 - Akcje masowe (uniwersalne)
   ============================================================ */
.bulk-col { width: 36px; text-align: center; }
.bulk-check, .bulk-all { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand-blue); }
.bulk-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-blue) 10%, var(--card)), var(--card));
    border-bottom: 1px solid color-mix(in srgb, var(--brand-blue) 25%, var(--border));
    animation: bulkSlide .18s ease;
}
@keyframes bulkSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.bulk-toolbar-left { display: flex; align-items: center; gap: 10px; }
.bulk-check-icon {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.bulk-count { font-weight: 700; font-size: 14px; color: var(--text); }
.bulk-toolbar-actions { display: flex; gap: 8px; }
.bulk-toolbar .bulk-del {
    background: #dc2626; color: #fff; border: none;
}
.bulk-toolbar .bulk-del:hover { background: #b91c1c; }
.bulk-toolbar .bulk-del:disabled { opacity: .6; cursor: default; }

/* ============================================================
   HOTFIX 043 - Moduł kierowców + daty ważności
   ============================================================ */
.driver-avatar, .driver-avatar-lg {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--dc); color: #fff; font-weight: 700;
    vertical-align: middle;
}
.driver-avatar { width: 26px; height: 26px; font-size: 11px; margin-right: 8px; }
.driver-avatar-lg { width: 40px; height: 40px; font-size: 15px; margin-right: 10px; }
.badge-inactive { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); margin-left: 8px; vertical-align: middle; }
.row-inactive { opacity: .55; }

.expiry-list { display: flex; flex-direction: column; gap: 2px; }
.expiry-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: var(--r-sm); }
.expiry-item:nth-child(odd) { background: var(--bg); }
.expiry-label { font-size: 13px; font-weight: 500; color: var(--text); display: flex; flex-direction: column; }
.expiry-extra { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.expiry-date { font-size: 13px; font-weight: 600; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.expiry-date.muted { color: var(--text-muted); font-weight: 400; }
.expiry-date.exp-ok { color: #16a34a; }
.expiry-date.exp-warn { color: #f59e0b; }
.expiry-date.exp-bad { color: #dc2626; }
.expiry-note { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.exp-pill { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 100px; font-size: 10.5px; font-weight: 700; margin: 0 1px; }
.exp-pill.exp-ok { background: color-mix(in srgb,#16a34a 14%,transparent); color: #16a34a; }
.exp-pill.exp-warn { background: color-mix(in srgb,#f59e0b 16%,transparent); color: #d97706; }
.exp-pill.exp-bad { background: color-mix(in srgb,#dc2626 16%,transparent); color: #dc2626; }

/* Globalne: atrybut hidden zawsze ukrywa (nadpisuje display:flex itp.) */
[hidden] { display: none !important; }

/* Drop-zone uploadu plików (zastępuje natywne "wybierz plik") */
.upload-dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--r-md);
    padding: 26px 16px;
    text-align: center;
    cursor: pointer;
    transition: all var(--t-fast);
    background: var(--card-hover);
}
.upload-dropzone:hover { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 5%, var(--card-hover)); }
.upload-dropzone.dragover { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 12%, var(--card-hover)); }
.upload-dropzone.has-file { border-style: solid; border-color: var(--st-success); background: color-mix(in srgb, var(--st-success) 7%, var(--card-hover)); }
.upload-dropzone-icon { font-size: 26px; color: var(--brand-blue); margin-bottom: 6px; line-height: 1; }
.upload-dropzone.has-file .upload-dropzone-icon { color: var(--st-success); }
.upload-dropzone-text { font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.upload-dropzone-hint { font-size: 11px; color: var(--text-muted); }

/* "Dodaj dokument" - dwie sekcje (Z listy / Nowy typ) */
.add-doc-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.add-doc-tabs button { background: transparent; border: 0; padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; transition: all var(--t-fast); }
.add-doc-tabs button:hover { color: var(--text); }
.add-doc-tabs button.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }
.add-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; padding: 2px; }
.add-doc-card { background: var(--card-hover); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; transition: all var(--t-fast); text-align: left; display: flex; flex-direction: column; gap: 2px; font-family: inherit; }
.add-doc-card:hover { background: color-mix(in srgb, var(--brand-blue) 10%, var(--card-hover)); border-color: var(--brand-blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.add-doc-card strong { font-size: 13px; color: var(--brand-blue); font-family: var(--font-mono); }
.add-doc-card small { font-size: 11px; color: var(--text-muted); line-height: 1.3; }

/* ── Numer ładunku jako kolorowe bloczki literek (058) ───────────────────── */
.num-blocks { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); vertical-align: middle; }
.num-block {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    color: #fff; font-weight: 700; font-size: 14px; line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
    text-shadow: 0 1px 1px rgba(0,0,0,.15);
    cursor: help;
}
.num-block-broker { border: 2px solid rgba(255,255,255,.4); }
.num-rest { font-weight: 600; margin-left: 6px; color: var(--text); letter-spacing: 0.5px; font-size: 16px; }

/* ── Ikona waluty (zastępuje "chamskie €") ───────────────────────────────── */
.currency-icon {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 6px;
    color: #fff; font-weight: 700; font-size: 11px; line-height: 1;
    vertical-align: middle; letter-spacing: 0.2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* ── Pełny adres + kontakty (klient, punkty, odprawy) ───────────────────── */
.full-address {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 10px; margin: 6px 0;
    background: color-mix(in srgb, var(--brand-blue) 5%, var(--card-bg));
    border-left: 3px solid var(--brand-blue);
    border-radius: var(--r-sm);
    font-size: 12.5px; line-height: 1.5;
}
.full-address-icon { color: var(--brand-blue); margin-top: 2px; flex: 0 0 auto; }
.full-address-body { flex: 1; min-width: 0; }
.full-address-line { color: var(--text); }
.full-address-line.muted { color: var(--text-muted); font-size: 11.5px; }

.contacts-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.contact-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px;
    background: var(--card-hover); border: 1px solid var(--border);
    font-size: 11.5px; color: var(--text); transition: all var(--t-fast);
    cursor: default;
}
.contact-pill.primary { background: color-mix(in srgb, var(--brand-blue) 10%, var(--card-hover)); border-color: var(--brand-blue); }
.contact-pill .contact-name { font-weight: 600; }
.contact-pill .contact-meta { color: var(--text-muted); font-size: 10.5px; }
.contact-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.contacts-empty { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 4px 0; }

/* Subtelny nagłówek "Osoby kontaktowe" w sekcji */
.section-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-muted); font-weight: 600; margin: 8px 0 4px;
}

/* ── Combobox KRAJU (wpisywany, podpowiedź flaga + nazwa; submituje KOD) ── */
.cc-ac-wrap { position: relative; display: block; }
.cc-ac-wrap > input { width: 100%; }
.cc-ac-wrap.has-flag > input { padding-left: 34px; }
.cc-ac-flag { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); line-height: 0; pointer-events: none; display: inline-flex; align-items: center; }
.cc-ac-flag svg { display: block; }
.cc-ac-dd { position: absolute; z-index: 60; top: calc(100% + 3px); left: 0; right: 0; max-height: 240px; overflow-y: auto;
    background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15,23,42,.14); padding: 4px; }
.cc-ac-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cc-ac-item:hover { background: var(--surface-2, #f1f5f9); }
.cc-ac-item-flag { width: 18px; display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.cc-ac-item-flag svg { display: block; }
.cc-ac-item strong { font-weight: 600; color: var(--text, #0f172a); }
.cc-ac-item small { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim, #94a3b8); }

/* ============================================================================
   ATOMY UI — jeden wspólny zestaw na całą aplikację (skill)
   .check / .radio: czysty styl pól wyboru (docelowo zastępują .ld-check)
   .token / .token-x: usuwalny chip
   ============================================================================ */
.check, .radio {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
    padding: 9px 13px; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--bg); user-select: none; transition: var(--t-fast);
}
.check input[type="checkbox"], .radio input[type="radio"] {
    width: 18px; height: 18px; accent-color: var(--brand-blue); cursor: pointer; margin: 0;
}
.check:hover, .radio:hover { border-color: var(--brand-blue); }
.check:has(input:checked), .radio:has(input:checked) {
    border-color: var(--brand-blue); color: var(--brand-blue-dark);
    background: color-mix(in srgb, var(--brand-blue) 9%, var(--card));
}
.token {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
    font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--card); color: var(--text-soft);
}
.token-x {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; line-height: 1;
}
.token-x:hover { background: var(--st-danger-bg); color: var(--st-danger); }