/*
 * COMPAX Design System - Components CSS
 * ======================================
 * Style dla wszystkich komponentów UI (prefiks c-).
 * Wymaga: tokens.css
 * 
 * Aktualizacja: grudzień 2024
 */

/* =========================================
   C-ICON
   ========================================= */
.c-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* =========================================
   C-BUTTON
   ========================================= */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: var(--btn-padding-md);
    font-family: var(--font-family);
    font-size: var(--btn-font-md);
    font-weight: var(--font-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    transition: all var(--transition-normal);
    -webkit-user-select: none;
    user-select: none;
}

.c-btn:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.c-btn:disabled,
.c-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Rozmiary */
.c-btn-sm {
    height: var(--btn-height-sm);
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
    gap: var(--space-1);
}

.c-btn-lg {
    height: var(--btn-height-lg);
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-lg);
}

/* Icon only */
.c-btn-icon {
    width: var(--btn-height-md);
    padding: 0;
}
.c-btn-icon.c-btn-sm { width: var(--btn-height-sm); }
.c-btn-icon.c-btn-lg { width: var(--btn-height-lg); }

/* Block */
.c-btn-block {
    display: flex;
    width: 100%;
}

/* Warianty */
.c-btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
}
.c-btn-primary:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
}

.c-btn-secondary {
    background: var(--c-bg-secondary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}
.c-btn-secondary:hover {
    background: var(--c-bg-tertiary);
    border-color: var(--c-border-hover);
}

.c-btn-outline {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-text-primary);
}
.c-btn-outline:hover {
    background: var(--c-bg-secondary);
    border-color: var(--c-border-hover);
}

.c-btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: var(--c-text-inverse);
}
.c-btn-danger:hover {
    background: var(--c-danger-hover);
    border-color: var(--c-danger-hover);
}

.c-btn-danger-outline {
    background: transparent;
    border-color: var(--c-danger);
    color: var(--c-danger);
}
.c-btn-danger-outline:hover {
    background: var(--c-danger-light, rgba(239, 68, 68, 0.1));
    border-color: var(--c-danger);
}

.c-btn-success {
    background: var(--c-success);
    border-color: var(--c-success);
    color: var(--c-text-inverse);
}
.c-btn-success:hover {
    background: var(--c-success-hover);
    border-color: var(--c-success-hover);
}

.c-btn-warning {
    background: var(--c-warning);
    border-color: var(--c-warning);
    color: var(--c-text-inverse);
}
.c-btn-warning:hover {
    background: var(--c-warning-hover);
    border-color: var(--c-warning-hover);
}

.c-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--c-text-secondary);
}
.c-btn-ghost:hover {
    background: var(--c-bg-secondary);
    color: var(--c-text-primary);
}

/* Spinner */
.c-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: c-btn-spin 0.6s linear infinite;
}
.c-btn-sm .c-btn-spinner { width: 14px; height: 14px; }
.c-btn-lg .c-btn-spinner { width: 18px; height: 18px; }

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

.c-btn-loading {
    position: relative;
    color: transparent !important;
}
.c-btn-loading .c-btn-spinner {
    position: absolute;
    color: var(--c-text-inverse);
}
.c-btn-loading.c-btn-secondary .c-btn-spinner,
.c-btn-loading.c-btn-outline .c-btn-spinner,
.c-btn-loading.c-btn-ghost .c-btn-spinner {
    color: var(--c-text-primary);
}

/* =========================================
   C-BTN-GROUP
   ========================================= */
.c-btn-group {
    display: inline-flex;
    gap: 0;
}

.c-btn-group > .c-btn {
    border-radius: 0;
    margin-left: -1px;
}

.c-btn-group > .c-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    margin-left: 0;
}

.c-btn-group > .c-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.c-btn-group > .c-btn:only-child {
    border-radius: var(--radius-md);
}

.c-btn-group-sm > .c-btn {
    height: var(--btn-height-sm);
    padding: 0 var(--space-2);
    font-size: var(--font-sm);
}

.c-btn-group-lg > .c-btn {
    height: var(--btn-height-lg);
    padding: 0 var(--space-5);
    font-size: var(--font-md);
}

/* =========================================
   C-BADGE
   ========================================= */
.c-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--badge-height-md);
    padding: var(--badge-padding-md);
    font-family: var(--font-family);
    font-size: var(--badge-font-md);
    font-weight: var(--font-semibold);
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--badge-radius);
    background: var(--c-bg-tertiary);
    color: var(--c-text-secondary);
}

/* Rozmiary */
.c-badge-sm {
    height: var(--badge-height-sm);
    padding: var(--badge-padding-sm);
    font-size: var(--badge-font-sm);
}

.c-badge-lg {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
}

/* Rounded (pill) */
.c-badge-rounded {
    border-radius: var(--radius-full);
}

/* Warianty */
.c-badge-primary {
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
}

.c-badge-success {
    background: var(--c-success-light);
    color: var(--c-success-hover);
}

.c-badge-danger {
    background: var(--c-danger-light);
    color: var(--c-danger-hover);
}

.c-badge-warning {
    background: var(--c-warning-light);
    color: var(--c-warning-hover);
}

.c-badge-info {
    background: var(--c-info-light);
    color: var(--c-info-hover);
}

/* Outline */
.c-badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}
.c-badge-outline.c-badge-default { border-color: var(--c-border); }

/* Kropka */
.c-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* =========================================
   C-ALERT
   ========================================= */
.c-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--c-bg-secondary);
    border: 1px solid var(--c-border);
}

.c-alert-icon {
    flex-shrink: 0;
    color: var(--c-text-muted);
}

.c-alert-content {
    flex: 1;
    min-width: 0;
}

.c-alert-title {
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    color: var(--c-text-primary);
    margin-bottom: var(--space-1);
}

.c-alert-message {
    font-size: var(--text-md);
    color: var(--c-text-secondary);
    line-height: var(--leading-normal);
}

.c-alert-close {
    flex-shrink: 0;
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.c-alert-close:hover {
    background: var(--c-bg-tertiary);
    color: var(--c-text-primary);
}

/* Warianty */
.c-alert-success {
    background: var(--c-success-light);
    border-color: var(--c-success);
}
.c-alert-success .c-alert-icon { color: var(--c-success); }
.c-alert-success .c-alert-title { color: var(--c-success-hover); }

.c-alert-danger {
    background: var(--c-danger-light);
    border-color: var(--c-danger);
}
.c-alert-danger .c-alert-icon { color: var(--c-danger); }
.c-alert-danger .c-alert-title { color: var(--c-danger-hover); }

.c-alert-warning {
    background: var(--c-warning-light);
    border-color: var(--c-warning);
}
.c-alert-warning .c-alert-icon { color: var(--c-warning); }
.c-alert-warning .c-alert-title { color: var(--c-warning-hover); }

.c-alert-info {
    background: var(--c-info-light);
    border-color: var(--c-info);
}
.c-alert-info .c-alert-icon { color: var(--c-info); }
.c-alert-info .c-alert-title { color: var(--c-info-hover); }

/* =========================================
   C-PAGE-HEADER
   ========================================= */
.c-page-header {
    margin-bottom: var(--space-6);
}

.c-page-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.c-page-header-breadcrumb a {
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.c-page-header-breadcrumb a:hover {
    color: var(--c-primary);
}

.c-page-header-breadcrumb > *:not(:last-child)::after {
    content: '/';
    margin-left: var(--space-2);
    color: var(--c-text-muted);
}

.c-page-header-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.c-page-header-back:hover {
    color: var(--c-primary);
}

.c-page-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.c-page-header-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.c-page-header-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    border-radius: var(--radius-lg);
}

.c-page-header-text {
    min-width: 0;
}

.c-page-header-title {
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--c-text-primary);
    line-height: var(--leading-tight);
    outline: none;
}

.c-page-header-title:focus,
.c-page-header-title:focus-visible {
    outline: none;
}

.c-page-header-subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-md);
    color: var(--c-text-secondary);
}

.c-page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.c-page-header-extra {
    margin-top: var(--space-4);
}

/* Responsive */
@media (max-width: 640px) {
    .c-page-header-main {
        flex-direction: column;
        align-items: stretch;
    }
    .c-page-header-actions {
        margin-top: var(--space-4);
    }
    .c-page-header-title {
        font-size: var(--text-2xl);
    }
}

/* =========================================
   C-CARD
   ========================================= */
.c-card {
    background: var(--c-bg-primary);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.c-card-flat {
    box-shadow: none;
}

.c-card-accent {
    border-top: 3px solid var(--c-primary);
}

.c-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--card-padding);
    border-bottom: 1px solid var(--c-border);
}

.c-card-header-content {
    min-width: 0;
}

.c-card-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--c-text-primary);
}

.c-card-subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.c-card-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.c-card-body {
    padding: var(--card-padding);
}

.c-card-body-no-padding {
    padding: 0;
}

.c-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--card-padding);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-secondary);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* =========================================
   C-STATS-ROW (Grid layout for stat cards)
   ========================================= */
.c-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (max-width: 1200px) {
    .c-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .c-stats-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   C-STAT (StatCard)
   ========================================= */
.c-stat,
.c-stat-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--c-bg-primary);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-normal);
}

.c-stat-clickable,
.c-stat-card-link {
    cursor: pointer;
    text-decoration: none;
}
.c-stat-clickable:hover,
.c-stat-card-link:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.c-stat-highlight,
.c-stat-card-highlight {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.c-stat-highlight .c-stat-value,
.c-stat-highlight .c-stat-label,
.c-stat-card-highlight .c-stat-value,
.c-stat-card-highlight .c-stat-label {
    color: var(--c-text-inverse);
}
.c-stat-highlight .c-stat-icon,
.c-stat-card-highlight .c-stat-icon {
    background: rgba(255,255,255,0.2);
    color: var(--c-text-inverse);
}

.c-stat-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--c-bg-secondary);
    color: var(--c-text-muted);
    border-radius: var(--radius-lg);
}

.c-stat-content {
    flex: 1;
    min-width: 0;
}

.c-stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--c-text-primary);
    line-height: var(--leading-tight);
}

.c-stat-prefix,
.c-stat-suffix {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--c-text-muted);
}

.c-stat-label {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.c-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--c-text-muted);
}

.c-stat-trend-up {
    color: var(--c-success);
}

.c-stat-trend-down {
    color: var(--c-danger);
}

.c-stat-trend-label {
    font-weight: var(--font-normal);
    color: var(--c-text-muted);
}

/* Warianty kolorystyczne */
.c-stat-primary .c-stat-icon,
.c-stat-card-primary .c-stat-icon { background: var(--c-primary-light); color: var(--c-primary); }
.c-stat-success .c-stat-icon,
.c-stat-card-success .c-stat-icon { background: var(--c-success-light); color: var(--c-success); }
.c-stat-danger .c-stat-icon,
.c-stat-card-danger .c-stat-icon { background: var(--c-danger-light); color: var(--c-danger); }
.c-stat-warning .c-stat-icon,
.c-stat-card-warning .c-stat-icon { background: var(--c-warning-light); color: var(--c-warning); }
.c-stat-info .c-stat-icon,
.c-stat-card-info .c-stat-icon { background: var(--c-info-light); color: var(--c-info); }

/* =========================================
   C-MODAL
   ========================================= */
.c-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    animation: c-modal-fade-in 0.15s ease;
}

.c-modal-backdrop-closing {
    animation: c-modal-fade-out 0.15s ease forwards;
}

@keyframes c-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes c-modal-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.c-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--modal-width-md);
    max-height: calc(100vh - var(--space-8));
    background: var(--c-bg-primary);
    border-radius: var(--modal-radius);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    animation: c-modal-slide-in 0.2s ease;
}

.c-modal-closing {
    animation: c-modal-slide-out 0.15s ease forwards;
}

@keyframes c-modal-slide-in {
    from { 
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes c-modal-slide-out {
    from { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to { 
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

/* Rozmiary */
.c-modal-sm { max-width: var(--modal-width-sm); }
.c-modal-lg { max-width: var(--modal-width-lg); }
.c-modal-xl { max-width: var(--modal-width-xl); }

.c-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--modal-padding);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.c-modal-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--c-text-primary);
}

.c-modal-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.c-modal-close:hover {
    background: var(--c-bg-secondary);
    color: var(--c-text-primary);
}

.c-modal-body {
    flex: 1;
    padding: var(--modal-padding);
    overflow-y: auto;
}

.c-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--modal-padding);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-secondary);
    border-radius: 0 0 var(--modal-radius) var(--modal-radius);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .c-modal-backdrop {
        padding: var(--space-2);
        align-items: flex-end;
    }
    .c-modal {
        max-width: 100%;
        max-height: calc(100vh - var(--space-4));
        border-radius: var(--modal-radius) var(--modal-radius) 0 0;
    }
}

/* =========================================
   UTILITIES
   ========================================= */
   
/* Flex helpers */
.c-flex { display: flex; }
.c-flex-col { flex-direction: column; }
.c-items-center { align-items: center; }
.c-justify-between { justify-content: space-between; }
.c-gap-1 { gap: var(--space-1); }
.c-gap-2 { gap: var(--space-2); }
.c-gap-3 { gap: var(--space-3); }
.c-gap-4 { gap: var(--space-4); }

/* Text helpers */
.c-text-muted { color: var(--c-text-muted); }
.c-text-secondary { color: var(--c-text-secondary); }
.c-text-primary { color: var(--c-text-primary); }
.c-text-success { color: var(--c-success); }
.c-text-danger { color: var(--c-danger); }
.c-text-warning { color: var(--c-warning); }

/* Spacing helpers */
.c-mt-2 { margin-top: var(--space-2); }
.c-mt-4 { margin-top: var(--space-4); }
.c-mb-2 { margin-bottom: var(--space-2); }
.c-mb-4 { margin-bottom: var(--space-4); }

/* =========================================
   C-EMPTY
   ========================================= */
.c-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.c-empty-compact {
    padding: var(--space-6) var(--space-4);
}

.c-empty-table {
    padding: var(--space-8) var(--space-4);
}

.c-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-4);
    background: var(--c-bg-secondary);
    color: var(--c-text-muted);
    border-radius: var(--radius-full);
}

.c-empty-compact .c-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
}

.c-empty-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--c-text-primary);
}

.c-empty-message {
    margin: 0;
    font-size: var(--text-md);
    color: var(--c-text-muted);
    max-width: 320px;
}

.c-empty-actions {
    margin-top: var(--space-4);
}

/* =========================================
   C-LOADING
   ========================================= */
.c-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
}

.c-loading-inline {
    display: inline-flex;
    flex-direction: row;
    padding: 0;
    gap: var(--space-2);
}

.c-loading-centered {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--c-bg-primary);
}

.c-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    z-index: 10;
}

.c-loading-spinner {
    border: 3px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: c-loading-spin 0.8s linear infinite;
}

.c-loading-sm { width: 20px; height: 20px; border-width: 2px; }
.c-loading-md { width: 32px; height: 32px; border-width: 3px; }
.c-loading-lg { width: 48px; height: 48px; border-width: 4px; }

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

.c-loading-text {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

/* =========================================
   C-TABS
   ========================================= */
.c-tabs {
    display: flex;
    flex-direction: column;
}

.c-tabs-list {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--space-4);
}

.c-tabs-center .c-tabs-list { justify-content: center; }
.c-tabs-end .c-tabs-list { justify-content: flex-end; }
.c-tabs-stretch .c-tabs-list { gap: 0; }
.c-tabs-stretch .c-tabs-tab { flex: 1; }

.c-tabs-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    color: var(--c-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.c-tabs-tab:hover {
    color: var(--c-text-primary);
    background: var(--c-bg-secondary);
}

.c-tabs-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

.c-tabs-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.c-tabs-tab-icon {
    color: inherit;
}

.c-tabs-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    background: var(--c-bg-tertiary);
    border-radius: var(--radius-full);
}

.c-tabs-tab.active .c-tabs-tab-count {
    background: var(--c-primary-light);
    color: var(--c-primary);
}

/* Pills variant */
.c-tabs-pills .c-tabs-list {
    border-bottom: none;
    gap: var(--space-2);
    padding: var(--space-1);
    background: var(--c-bg-secondary);
    border-radius: var(--radius-lg);
}

.c-tabs-pills .c-tabs-tab {
    border-bottom: none;
    border-radius: var(--radius-md);
    margin-bottom: 0;
}

.c-tabs-pills .c-tabs-tab.active {
    background: var(--c-bg-primary);
    box-shadow: var(--shadow-sm);
}

/* Underline variant */
.c-tabs-underline .c-tabs-list {
    gap: var(--space-6);
}

.c-tabs-underline .c-tabs-tab {
    padding: var(--space-3) 0;
}

.c-tabs-content {
    min-height: 100px;
}

.c-tab-panel {
    animation: c-tab-fade-in 0.2s ease;
}

@keyframes c-tab-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   C-PROGRESS
   ========================================= */
.c-progress {
    width: 100%;
}

.c-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.c-progress-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--c-text-primary);
}

.c-progress-value {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.c-progress-track {
    width: 100%;
    height: 8px;
    background: var(--c-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.c-progress-size-sm .c-progress-track { height: 4px; }
.c-progress-size-lg .c-progress-track { height: 12px; }

.c-progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.c-progress-primary { background: var(--c-primary); }
.c-progress-success { background: var(--c-success); }
.c-progress-warning { background: var(--c-warning); }
.c-progress-danger { background: var(--c-danger); }
.c-progress-info { background: var(--c-info); }

.c-progress-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.c-progress-animated {
    animation: c-progress-stripes 1s linear infinite;
}

@keyframes c-progress-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

.c-progress-indeterminate {
    width: 30%;
    animation: c-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes c-progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* =========================================
   C-CHECKBOX
   ========================================= */
.c-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

.c-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.c-checkbox-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-bg-primary);
    color: transparent;
    transition: all var(--transition-fast);
}

.c-checkbox-mark svg {
    width: 14px;
    height: 14px;
}

/* Hover */
.c-checkbox:hover .c-checkbox-mark {
    border-color: var(--c-primary);
}

/* Focus */
.c-checkbox-input:focus-visible + .c-checkbox-mark {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--c-primary);
}

/* Checked state */
.c-checkbox-checked .c-checkbox-mark {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg-primary);
}

.c-checkbox-checked:hover .c-checkbox-mark {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
}

/* Indeterminate state */
.c-checkbox-indeterminate .c-checkbox-mark {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg-primary);
}

/* Disabled state */
.c-checkbox-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.c-checkbox-disabled .c-checkbox-mark {
    background: var(--c-bg-secondary);
}

/* Content (label + help) */
.c-checkbox-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: 1px;
}

.c-checkbox-label {
    color: var(--c-text-primary);
    font-weight: var(--font-medium);
}

.c-checkbox-help {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

/* ===== SIZE VARIANTS ===== */
/* Small */
.c-checkbox-sm {
    font-size: var(--text-sm);
    gap: var(--space-2);
}

.c-checkbox-sm .c-checkbox-mark {
    width: 16px;
    height: 16px;
}

.c-checkbox-sm .c-checkbox-mark svg {
    width: 10px;
    height: 10px;
}

/* Large */
.c-checkbox-lg {
    font-size: var(--text-lg);
    gap: var(--space-4);
}

.c-checkbox-lg .c-checkbox-mark {
    width: 24px;
    height: 24px;
}

.c-checkbox-lg .c-checkbox-mark svg {
    width: 16px;
    height: 16px;
}

/* ===== COLOR VARIANTS ===== */
/* Success */
.c-checkbox-success.c-checkbox-checked .c-checkbox-mark {
    background: var(--c-success);
    border-color: var(--c-success);
}

.c-checkbox-success:hover .c-checkbox-mark {
    border-color: var(--c-success);
}

.c-checkbox-success.c-checkbox-checked:hover .c-checkbox-mark {
    background: var(--c-success-hover);
    border-color: var(--c-success-hover);
}

/* Danger */
.c-checkbox-danger.c-checkbox-checked .c-checkbox-mark {
    background: var(--c-danger);
    border-color: var(--c-danger);
}

.c-checkbox-danger:hover .c-checkbox-mark {
    border-color: var(--c-danger);
}

.c-checkbox-danger.c-checkbox-checked:hover .c-checkbox-mark {
    background: var(--c-danger-hover);
    border-color: var(--c-danger-hover);
}

/* Warning */
.c-checkbox-warning.c-checkbox-checked .c-checkbox-mark {
    background: var(--c-warning);
    border-color: var(--c-warning);
}

.c-checkbox-warning:hover .c-checkbox-mark {
    border-color: var(--c-warning);
}

.c-checkbox-warning.c-checkbox-checked:hover .c-checkbox-mark {
    background: var(--c-warning-hover);
    border-color: var(--c-warning-hover);
}

/* =========================================
   C-TOGGLE
   ========================================= */
.c-toggle {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.c-toggle-reversed {
    flex-direction: row-reverse;
}

.c-toggle-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.c-toggle-control {
    position: relative;
    flex-shrink: 0;
}

.c-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.c-toggle-track {
    display: flex;
    align-items: center;
    width: 44px;
    height: 24px;
    padding: 2px;
    background: var(--c-bg-tertiary);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
}

.c-toggle-sm .c-toggle-track {
    width: 36px;
    height: 20px;
}

.c-toggle-lg .c-toggle-track {
    width: 52px;
    height: 28px;
}

.c-toggle-checked .c-toggle-track {
    background: var(--c-primary);
    border-color: var(--c-primary);
}

.c-toggle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--c-bg-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal);
}

.c-toggle-sm .c-toggle-thumb { width: 14px; height: 14px; }
.c-toggle-lg .c-toggle-thumb { width: 22px; height: 22px; }

.c-toggle-checked .c-toggle-thumb {
    transform: translateX(20px);
}

.c-toggle-sm.c-toggle-checked .c-toggle-thumb { transform: translateX(16px); }
.c-toggle-lg.c-toggle-checked .c-toggle-thumb { transform: translateX(24px); }

.c-toggle-icon {
    color: var(--c-text-muted);
}

.c-toggle-checked .c-toggle-icon {
    color: var(--c-primary);
}

.c-toggle-input:focus + .c-toggle-track {
    box-shadow: var(--shadow-focus);
}

.c-toggle-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: 2px;
}

.c-toggle-label {
    font-size: var(--text-md);
    font-weight: var(--font-medium);
    color: var(--c-text-primary);
    line-height: 1.2;
}

.c-toggle-description {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: var(--leading-normal);
}

/* =========================================
   C-KANBAN
   ========================================= */
.c-kanban {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.c-kanban-board {
    display: flex;
    gap: var(--space-4);
    min-height: 400px;
    padding-bottom: var(--space-4);
}

.c-kanban-column {
    flex: 1 1 0;
    min-width: 250px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    background: var(--c-bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Gdy jest mało kolumn - wypełnij przestrzeń */
.c-kanban-board:has(.c-kanban-column:nth-child(1):last-child) .c-kanban-column,
.c-kanban-board:has(.c-kanban-column:nth-child(2):last-child) .c-kanban-column,
.c-kanban-board:has(.c-kanban-column:nth-child(3):last-child) .c-kanban-column {
    max-width: none;
}

/* Gdy jest dużo kolumn - scrolluj */
.c-kanban-board:has(.c-kanban-column:nth-child(6)) .c-kanban-column {
    flex: 0 0 280px;
}

.c-kanban-sm .c-kanban-column { min-width: 220px; }
.c-kanban-lg .c-kanban-column { min-width: 300px; }

.c-kanban-column.collapsed {
    flex: 0 0 48px;
    min-width: 48px;
}

.c-kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 3px solid var(--column-color, var(--c-border));
    background: var(--c-bg-primary);
}

.c-kanban-column-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.c-kanban-column-icon {
    font-size: 16px;
}

.c-kanban-column-name {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--c-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-kanban-column-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    background: var(--c-bg-tertiary);
    color: var(--c-text-secondary);
    border-radius: var(--radius-full);
}

.c-kanban-column-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.c-kanban-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.c-kanban-collapse-btn:hover {
    background: var(--c-bg-secondary);
    color: var(--c-text-primary);
}

.c-kanban-column-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    overflow-y: auto;
    min-height: 100px;
}

.c-kanban-card {
    background: var(--c-bg-primary);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.c-kanban-card:hover {
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-sm);
}

.c-kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.c-kanban-card.selected {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary-light);
}

.c-kanban-card-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border);
}

.c-kanban-card-body {
    padding: var(--space-3);
}

.c-kanban-card-footer {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-secondary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.c-kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--c-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.c-kanban-add-card {
    margin-top: auto;
    padding-top: var(--space-2);
}

/* =========================================
   DARK MODE OVERRIDES
   ========================================= */
html.admin-dark-mode,
html.admin-dark-mode {
    /* Card improvements */
    --card-bg: var(--c-bg-secondary);
}

/* C-Card dark mode */
html.admin-dark-mode .c-card,
html.admin-dark-mode .c-card {
    background: var(--c-bg-secondary);
    border-color: var(--c-border);
}

/* C-Input/C-Select/C-Textarea dark mode */
html.admin-dark-mode .c-input,
html.admin-dark-mode .c-select,
html.admin-dark-mode .c-textarea,
html.admin-dark-mode .c-textarea {
    background: var(--c-bg-tertiary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}

html.admin-dark-mode .c-input::placeholder,
html.admin-dark-mode .c-textarea::placeholder,
html.admin-dark-mode .c-textarea::placeholder {
    color: var(--c-text-muted);
}

/* C-Modal dark mode */
html.admin-dark-mode .c-modal,
html.admin-dark-mode .c-modal {
    background: var(--c-bg-secondary);
}

html.admin-dark-mode .c-modal-backdrop,
html.admin-dark-mode .c-modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* ========================================
   DATA TABLE / C-TABLE DARK MODE (CRITICAL)
   ======================================== */
html.admin-dark-mode .data-table-container,
html.admin-dark-mode .data-table-container {
    background: var(--c-bg-secondary) !important;
    border-color: var(--c-border);
}

html.admin-dark-mode .data-table,
html.admin-dark-mode .data-table {
    background: var(--c-bg-secondary);
}

html.admin-dark-mode .data-table th,
html.admin-dark-mode .data-table th {
    background: var(--c-bg-tertiary) !important;
    color: var(--c-text-secondary) !important;
    border-color: var(--c-border);
}

html.admin-dark-mode .data-table td,
html.admin-dark-mode .data-table td {
    color: var(--c-text-primary) !important;
    border-color: var(--c-border);
}

html.admin-dark-mode .data-table tbody tr,
html.admin-dark-mode .data-table tbody tr {
    background: var(--c-bg-secondary);
}

html.admin-dark-mode .data-table tbody tr:hover,
html.admin-dark-mode .data-table tbody tr:hover {
    background: var(--c-bg-tertiary) !important;
}

html.admin-dark-mode .data-table tbody tr:nth-child(even),
html.admin-dark-mode .data-table tbody tr:nth-child(even) {
    background: var(--table-row-stripe);
}

/* Data table toolbar dark mode */
html.admin-dark-mode .data-table-toolbar,
html.admin-dark-mode .data-table-toolbar {
    border-color: var(--c-border);
}

html.admin-dark-mode .search-box input,
html.admin-dark-mode .search-box input {
    background: var(--c-bg-tertiary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}

html.admin-dark-mode .search-box input::placeholder,
html.admin-dark-mode .search-box input::placeholder {
    color: var(--c-text-muted);
}

/* Data table pagination dark mode */
html.admin-dark-mode .data-table-pagination,
html.admin-dark-mode .data-table-pagination {
    background: var(--c-bg-tertiary);
    border-color: var(--c-border);
    color: var(--c-text-secondary);
}

html.admin-dark-mode .pagination-btn,
html.admin-dark-mode .pagination-btn {
    background: var(--c-bg-secondary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}

html.admin-dark-mode .pagination-btn:hover:not(:disabled),
html.admin-dark-mode .pagination-btn:hover:not(:disabled) {
    background: var(--c-bg-tertiary);
    border-color: var(--c-border-hover);
}

html.admin-dark-mode .pagination-btn.active,
html.admin-dark-mode .pagination-btn.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg-primary);
}

html.admin-dark-mode .pagination-size select,
html.admin-dark-mode .pagination-size select {
    background: var(--c-bg-secondary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}

/* C-Table dark mode */
html.admin-dark-mode .c-table thead th,
html.admin-dark-mode .c-table thead th {
    background: var(--table-header-bg, var(--c-bg-tertiary));
    color: var(--table-header-text, var(--c-text-secondary));
}

html.admin-dark-mode .c-table tbody tr,
html.admin-dark-mode .c-table tbody tr {
    background: var(--table-row-bg, var(--c-bg-secondary));
    color: var(--table-text, var(--c-text-primary));
}

html.admin-dark-mode .c-table tbody tr:hover,
html.admin-dark-mode .c-table tbody tr:hover {
    background: var(--table-row-hover, var(--card-bg-highlight));
}

html.admin-dark-mode .c-table tbody tr:nth-child(even),
html.admin-dark-mode .c-table tbody tr:nth-child(even) {
    background: var(--table-row-stripe, rgba(255, 255, 255, 0.02));
}

/* C-Badge dark mode adjustments */
html.admin-dark-mode .c-badge-secondary,
html.admin-dark-mode .c-badge-secondary {
    background: var(--c-bg-tertiary);
    color: var(--c-text-secondary);
}

html.admin-dark-mode .c-badge-outline,
html.admin-dark-mode .c-badge-outline {
    border-color: var(--c-border-hover);
    color: var(--c-text-secondary);
}

/* C-StatCard dark mode */
html.admin-dark-mode .c-stat-card,
html.admin-dark-mode .c-stat-card {
    background: var(--c-bg-secondary);
    border-color: var(--c-border);
}

html.admin-dark-mode .c-stat-icon,
html.admin-dark-mode .c-stat-icon {
    background: var(--c-bg-tertiary);
}

html.admin-dark-mode .c-stat-value,
html.admin-dark-mode .c-stat-label,
html.admin-dark-mode .c-stat-label {
    color: var(--c-text-primary);
}

/* C-Alert dark mode */
html.admin-dark-mode .c-alert,
html.admin-dark-mode .c-alert {
    border-color: var(--c-border);
}

/* C-Empty dark mode */
html.admin-dark-mode .c-empty,
html.admin-dark-mode .c-empty {
    background: transparent;
}

html.admin-dark-mode .c-empty-icon,
html.admin-dark-mode .c-empty-icon {
    background: var(--c-bg-tertiary);
    color: var(--c-text-secondary);
    border: 1px solid var(--c-border);
}

html.admin-dark-mode .c-empty-title,
html.admin-dark-mode .c-empty-title {
    color: var(--c-text-primary);
}

html.admin-dark-mode .c-empty-message,
html.admin-dark-mode .c-empty-message {
    color: var(--c-text-secondary);
}

/* C-Progress dark mode */
html.admin-dark-mode .c-progress-track,
html.admin-dark-mode .c-progress-track {
    background: var(--c-bg-tertiary);
}

/* ========================================
   BUTTON DARK MODE (CRITICAL FOR CONTRAST)
   ======================================== */
/* Button outline dark mode - HIGH CONTRAST */
html.admin-dark-mode .c-btn-outline,
html.admin-dark-mode .c-btn-outline {
    border-color: var(--btn-outline-border, var(--c-border-strong));
    color: var(--btn-outline-text, var(--c-text-secondary));
    background: transparent;
}

html.admin-dark-mode .c-btn-outline:hover,
html.admin-dark-mode .c-btn-outline:hover {
    background: var(--btn-outline-hover-bg, var(--c-bg-tertiary));
    border-color: var(--btn-outline-hover-border, var(--c-text-muted));
    color: var(--btn-outline-hover-text, var(--c-text-primary));
}

/* Button ghost dark mode */
html.admin-dark-mode .c-btn-ghost,
html.admin-dark-mode .c-btn-ghost {
    color: var(--btn-ghost-text, var(--c-text-secondary));
}

html.admin-dark-mode .c-btn-ghost:hover,
html.admin-dark-mode .c-btn-ghost:hover {
    background: var(--c-bg-tertiary);
    color: var(--btn-ghost-hover-text, var(--c-text-primary));
}

/* Button secondary dark mode */
html.admin-dark-mode .c-btn-secondary,
html.admin-dark-mode .c-btn-secondary {
    background: var(--btn-secondary-bg, var(--c-bg-tertiary));
    color: var(--btn-secondary-text, var(--c-text-secondary));
    border-color: var(--c-border);
}

html.admin-dark-mode .c-btn-secondary:hover,
html.admin-dark-mode .c-btn-secondary:hover {
    background: var(--btn-secondary-hover-bg, var(--c-border-hover));
    color: var(--c-text-primary);
}

/* FormGroup label dark mode */
html.admin-dark-mode .c-form-group label,
html.admin-dark-mode .c-form-group label {
    color: var(--c-text-primary);
}

/* Checkbox dark mode */
html.admin-dark-mode .c-checkbox-mark,
html.admin-dark-mode .c-checkbox-mark {
    background: var(--c-bg-tertiary);
    border-color: var(--c-border-strong);
}

html.admin-dark-mode .c-checkbox-label,
html.admin-dark-mode .c-checkbox-label {
    color: var(--c-text-primary);
}

html.admin-dark-mode .c-checkbox-help,
html.admin-dark-mode .c-checkbox-help {
    color: var(--c-text-muted);
}

html.admin-dark-mode .c-checkbox-disabled .c-checkbox-mark,
html.admin-dark-mode .c-checkbox-disabled .c-checkbox-mark {
    background: var(--c-bg-secondary);
}

/* Toggle dark mode */
html.admin-dark-mode .c-toggle-track,
html.admin-dark-mode .c-toggle-track {
    background: var(--c-bg-tertiary);
    border-color: var(--c-border);
}

html.admin-dark-mode .c-toggle-label,
html.admin-dark-mode .c-toggle-label {
    color: var(--c-text-primary);
}

/* PageHeader dark mode */
html.admin-dark-mode .c-page-header-title,
html.admin-dark-mode .c-page-header-title {
    color: var(--c-text-primary);
}

html.admin-dark-mode .c-page-header-subtitle,
html.admin-dark-mode .c-page-header-subtitle {
    color: var(--c-text-secondary);
}

html.admin-dark-mode .c-page-header-back,
html.admin-dark-mode .c-page-header-back {
    color: var(--c-text-secondary);
}

html.admin-dark-mode .c-page-header-breadcrumb,
html.admin-dark-mode .c-page-header-breadcrumb {
    color: var(--c-text-muted);
}

html.admin-dark-mode .c-page-header-breadcrumb a,
html.admin-dark-mode .c-page-header-breadcrumb a {
    color: var(--c-text-secondary);
}

/* Tabs dark mode */
html.admin-dark-mode .c-tabs-list,
html.admin-dark-mode .c-tabs-list {
    background: var(--c-bg-secondary);
    border-color: var(--c-border);
}

html.admin-dark-mode .c-tab-button,
html.admin-dark-mode .c-tab-button {
    color: var(--c-text-secondary);
}

html.admin-dark-mode .c-tab-button:hover,
html.admin-dark-mode .c-tab-button:hover {
    color: var(--c-text-primary);
    background: var(--c-bg-tertiary);
}

html.admin-dark-mode .c-tab-button.active,
html.admin-dark-mode .c-tab-button.active {
    color: var(--c-text-primary);
    background: var(--c-bg-primary);
}

/* DataTable dark mode */
html.admin-dark-mode .c-datatable,
html.admin-dark-mode .c-datatable {
    background: var(--c-bg-secondary);
}

html.admin-dark-mode .c-datatable-header,
html.admin-dark-mode .c-datatable-header {
    background: var(--c-bg-tertiary);
}

html.admin-dark-mode .c-datatable-footer,
html.admin-dark-mode .c-datatable-footer {
    background: var(--c-bg-tertiary);
    border-top-color: var(--c-border);
}

/* Dropdown/Select options dark mode */
html.admin-dark-mode .c-select option,
html.admin-dark-mode .c-select option {
    background: var(--c-bg-secondary);
    color: var(--c-text-primary);
}


/* =========================================
   CBREADCRUMB - Nawigacja okruszkowa
========================================= */
.c-breadcrumb {
    margin-bottom: 1rem;
}

.c-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-breadcrumb-item {
    display: flex;
    align-items: center;
}

.c-breadcrumb-link {
    color: var(--c-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
}

.c-breadcrumb-link:hover {
    color: var(--c-primary);
}

.c-breadcrumb-separator {
    color: var(--c-text-muted);
    margin: 0 8px;
    font-size: 12px;
}

.c-breadcrumb-text {
    color: var(--c-text-primary);
    font-size: 14px;
    font-weight: 500;
}

.c-breadcrumb-back {
    display: inline-block;
}

.c-breadcrumb-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
}

.c-breadcrumb-back-link:hover {
    color: var(--c-primary);
}

.c-breadcrumb-icon {
    width: 16px;
    height: 16px;
}

/* =========================================
   CACTIONGROUP - Grupa przycisków
========================================= */
.c-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.c-action-group-center {
    justify-content: center;
}

.c-action-group-right {
    justify-content: flex-end;
}

.c-action-group-between {
    justify-content: space-between;
}

.c-action-group-around {
    justify-content: space-around;
}

.c-action-group-compact {
    gap: 4px;
}

.c-action-group-toolbar {
    gap: 4px;
    background: var(--c-bg-secondary);
    padding: 4px;
    border-radius: 8px;
}

/* =========================================
   CFILEUPLOAD - Upload plików
========================================= */
.c-file-upload {
    position: relative;
}

.c-file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.c-file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    border: 2px dashed var(--c-border);
    border-radius: 12px;
    background: var(--c-bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.c-file-upload-label:hover,
.c-file-upload-dragging .c-file-upload-label {
    border-color: var(--c-primary);
    background: var(--c-bg-hover);
}

.c-file-upload-uploading .c-file-upload-label {
    pointer-events: none;
    opacity: 0.7;
}

.c-file-upload-icon {
    width: 48px;
    height: 48px;
    color: var(--c-text-muted);
}

.c-file-upload-icon-success {
    color: var(--c-success);
}

.c-file-upload-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text-primary);
}

.c-file-upload-hint {
    font-size: 13px;
    color: var(--c-text-muted);
}

.c-file-upload-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: var(--c-bg-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    transition: all 0.15s;
}

.c-file-upload-clear:hover {
    background: var(--c-danger);
    color: white;
}

.c-file-upload-clear svg {
    width: 14px;
    height: 14px;
}

.c-file-upload-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.c-file-upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.c-file-upload-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--c-bg-secondary);
    border-radius: 8px;
    max-width: 120px;
}

.c-file-upload-preview-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.c-file-upload-preview-file {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-primary);
    border-radius: 4px;
    color: var(--c-text-muted);
}

.c-file-upload-preview-file svg {
    width: 32px;
    height: 32px;
}

.c-file-upload-preview-name {
    font-size: 12px;
    color: var(--c-text-primary);
    text-align: center;
    word-break: break-all;
    max-width: 100%;
}

.c-file-upload-preview-size {
    font-size: 11px;
    color: var(--c-text-muted);
}

.c-file-upload-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    color: var(--c-danger);
    font-size: 13px;
}

.c-file-upload-error svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Existing file preview */
.c-file-upload-has-file {
    position: relative;
}

.c-file-upload-existing {
    position: relative;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--c-bg-secondary);
    border: 1px solid var(--c-border);
}

.c-file-upload-existing-image {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    margin: 0 auto;
}

.c-file-upload-existing-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.c-file-upload-existing-file span {
    font-size: 14px;
    color: var(--c-text);
    word-break: break-all;
}

.c-file-upload-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
}

.c-file-upload-remove:hover {
    background: var(--c-danger);
    transform: scale(1.1);
}

.c-file-upload-label-mini {
    padding: 8px 16px;
    flex-direction: row;
    gap: 8px;
}

.c-file-upload-label-mini .c-file-upload-text {
    font-size: 13px;
}

/* =========================================
   CTIMELINE - Oś czasu
========================================= */
.c-timeline {
    display: flex;
    flex-direction: column;
}

.c-timeline-item {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
}

.c-timeline-item-last {
    padding-bottom: 0;
}

.c-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.c-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-bg-secondary);
    border: 2px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
}

.c-timeline-dot-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--c-success);
    color: var(--c-success);
}

.c-timeline-dot-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--c-danger);
    color: var(--c-danger);
}

.c-timeline-dot-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--c-warning);
    color: var(--c-warning);
}

.c-timeline-dot-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--c-info);
    color: var(--c-info);
}

.c-timeline-dot-primary {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.c-timeline-line {
    width: 2px;
    flex-grow: 1;
    background: var(--c-border);
    margin-top: 8px;
    min-height: 24px;
}

.c-timeline-content {
    flex-grow: 1;
    padding-top: 4px;
}

.c-timeline-date {
    display: block;
    font-size: 12px;
    color: var(--c-text-muted);
    margin-bottom: 4px;
}

.c-timeline-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text-primary);
}

.c-timeline-description {
    font-size: 13px;
    color: var(--c-text-secondary);
    margin-top: 4px;
}

/* Compact variant */
.c-timeline-compact .c-timeline-item {
    padding-bottom: 16px;
}

.c-timeline-compact .c-timeline-dot {
    width: 24px;
    height: 24px;
}

.c-timeline-compact .c-timeline-line {
    min-height: 16px;
}

/* =========================================
   CFILTERBAR - Pasek filtrów
========================================= */
.c-filter-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--c-bg-primary);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.c-filter-bar-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    flex-grow: 1;
}

.c-filter-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.c-filter-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.c-filter-select {
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-secondary);
    color: var(--c-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 150px;
}

.c-filter-select:hover {
    border-color: var(--c-text-muted);
}

.c-filter-select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.c-filter-search {
    flex-grow: 1;
    min-width: 200px;
    max-width: 400px;
}

.c-filter-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.c-filter-search-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--c-text-muted);
    pointer-events: none;
}

.c-filter-search-input {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 40px;
    font-size: 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-secondary);
    color: var(--c-text-primary);
}

.c-filter-search-input::placeholder {
    color: var(--c-text-muted);
}

.c-filter-search-input:hover {
    border-color: var(--c-text-muted);
}

.c-filter-search-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.c-filter-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    transition: all 0.15s;
}

.c-filter-search-clear:hover {
    background: var(--c-bg-hover);
    color: var(--c-text-primary);
}

.c-filter-search-clear svg {
    width: 14px;
    height: 14px;
}

/* Dark mode */
html.admin-dark-mode .c-filter-bar {
    background: var(--c-bg-primary);
    border-color: var(--c-border);
}

html.admin-dark-mode .c-filter-select,
html.admin-dark-mode .c-filter-search-input {
    background: var(--c-bg-secondary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}

@media (max-width: 768px) {
    .c-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .c-filter-bar-filters {
        flex-direction: column;
    }
    
    .c-filter-item,
    .c-filter-search {
        width: 100%;
        max-width: none;
    }
    
    .c-filter-select {
        width: 100%;
    }
}

/* =========================================
   CSearchSelect - Searchable Dropdown
   ========================================= */
.c-search-select {
    position: relative;
    width: 100%;
}

.c-search-select.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.c-search-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 42px;
    transition: var(--transition);
}

.c-search-select-trigger:hover {
    border-color: var(--c-border-hover);
}

.c-search-select.is-open .c-search-select-trigger {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.1);
}

.c-search-select-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.c-search-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text);
}

.c-search-select-subtext {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.c-search-select-placeholder {
    flex: 1;
    color: var(--c-text-muted);
}

.c-search-select-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.c-search-select-clear:hover {
    color: var(--c-danger);
    background: rgba(var(--c-danger-rgb), 0.1);
}

.c-search-select-arrow {
    width: 16px;
    height: 16px;
    color: var(--c-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.c-search-select.is-open .c-search-select-arrow {
    transform: rotate(180deg);
}

/* Dropdown */
.c-search-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
}

/* Search input */
.c-search-select-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border);
}

.c-search-select-search-icon {
    width: 16px;
    height: 16px;
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.c-search-select-search input {
    flex: 1;
    border: none;
    background: none;
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--c-text);
    outline: none;
}

.c-search-select-search input::placeholder {
    color: var(--c-text-muted);
}

.c-search-select-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.c-search-select-search-clear:hover {
    color: var(--c-text);
}

/* Options list */
.c-search-select-options {
    max-height: 400px;
    overflow-y: auto;
}

.c-search-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 0.15s ease;
}

.c-search-select-option:hover,
.c-search-select-option.is-highlighted {
    background: var(--c-bg-hover);
}

.c-search-select-option.is-selected {
    background: rgba(var(--c-primary-rgb), 0.08);
}

.c-search-select-option-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-search-select-option-subtext {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

.c-search-select-check {
    width: 16px;
    height: 16px;
    color: var(--c-primary);
    flex-shrink: 0;
}

/* Groups */
.c-search-select-group-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--c-bg-subtle);
    border-bottom: 1px solid var(--c-border);
}

/* Empty state */
.c-search-select-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--text-sm);
}

/* Footer with count */
.c-search-select-footer {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    border-top: 1px solid var(--c-border);
    text-align: center;
}

/* Dark mode */
html.admin-dark-mode .c-search-select-trigger {
    background: var(--bg-card);
    border-color: var(--border-color);
}

html.admin-dark-mode .c-search-select-dropdown {
    background: var(--bg-card);
    border-color: var(--border-color);
}

html.admin-dark-mode .c-search-select-option:hover,
html.admin-dark-mode .c-search-select-option.is-highlighted {
    background: rgba(255, 255, 255, 0.05);
}

html.admin-dark-mode .c-search-select-group-header {
    background: rgba(255, 255, 255, 0.03);
}

/* Size variants */
.c-search-select-sm .c-search-select-trigger {
    min-height: 34px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
}

.c-search-select-sm .c-search-select-option {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
}

.c-search-select-sm .c-search-select-search {
    padding: var(--space-1) var(--space-2);
}

.c-search-select-sm .c-search-select-search input {
    font-size: var(--text-sm);
}

/* ============================================
   VALIDATION STYLES (EditForm / DataAnnotations)
   ============================================ */

.validation-summary {
    background: var(--color-error-bg, var(--c-danger-bg));
    border: 1px solid var(--color-error, var(--c-danger));
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--color-error, var(--c-danger));
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.5rem;
}

.validation-summary li {
    margin: 0.25rem 0;
}

.validation-error,
.validation-message {
    color: var(--color-error, var(--c-danger));
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Input states */
.form-control.invalid,
.form-control.modified.invalid,
input.invalid,
select.invalid,
textarea.invalid {
    border-color: var(--color-error, var(--c-danger)) !important;
    background-color: var(--color-error-bg, var(--c-danger-bg));
}

.form-control.valid,
.form-control.modified.valid {
    border-color: var(--color-success, var(--c-success));
}

/* Blazor default validation classes */
.invalid {
    border-color: var(--color-error, var(--c-danger));
}

.valid {
    border-color: var(--color-success, var(--c-success));
}

/* Dark mode */
[data-theme="dark"] .validation-summary {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--c-danger);
}

[data-theme="dark"] .validation-error,
[data-theme="dark"] .validation-message {
    color: #f87171;
}

/* =========================================
   CSelect - Select/Dropdown Component
   ========================================= */

.c-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.c-select-wrapper.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.c-select-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-text-primary, #1a1a2e);
}

.c-select-required {
    color: var(--c-danger, var(--c-danger));
    margin-left: 0.25rem;
}

.c-select-container {
    position: relative;
    display: flex;
    align-items: center;
}

.c-select {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--c-text-primary, #1a1a2e);
    background-color: var(--c-bg-primary, var(--c-bg-primary));
    border: 1px solid var(--c-border, var(--c-border));
    border-radius: 0.375rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-align: left;
}

.c-select:hover:not(:disabled) {
    border-color: var(--c-border-hover, var(--c-border-hover));
}

.c-select:focus {
    outline: none;
    border-color: var(--c-primary, var(--c-info-hover));
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.c-select:disabled {
    background-color: var(--c-bg-disabled, var(--c-bg-tertiary));
    cursor: not-allowed;
}

.c-select-icon {
    position: absolute;
    right: 0.75rem;
    pointer-events: none;
    color: var(--c-text-muted, var(--c-text-secondary));
    display: flex;
    align-items: center;
}

/* Rozmiary */
.c-select-sm {
    padding: 0.375rem 2rem 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

.c-select-lg {
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    font-size: 1rem;
}

/* Error state */
.c-select-wrapper.has-error .c-select {
    border-color: var(--c-danger, var(--c-danger));
}

.c-select-wrapper.has-error .c-select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.c-select-error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--c-danger, var(--c-danger));
}

.c-select-helper {
    font-size: 0.75rem;
    color: var(--c-text-muted, var(--c-text-secondary));
}

/* Dark mode */
html.admin-dark-mode .c-select-label {
    color: var(--c-text-primary);
}

html.admin-dark-mode .c-select {
    background-color: var(--c-bg-secondary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}

html.admin-dark-mode .c-select:hover:not(:disabled) {
    border-color: var(--c-border-hover);
}

html.admin-dark-mode .c-select option {
    background-color: var(--c-bg-secondary);
    color: var(--c-text-primary);
}

/* =========================================
   CInput - Input Component (uzupełnienie)
   ========================================= */

.c-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.c-input-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-text-primary, #1a1a2e);
}

.c-input-required {
    color: var(--c-danger, var(--c-danger));
    margin-left: 0.25rem;
}

.c-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--c-text-primary, #1a1a2e);
    background-color: var(--c-bg-primary, var(--c-bg-primary));
    border: 1px solid var(--c-border, var(--c-border));
    border-radius: 0.375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c-input:hover:not(:disabled) {
    border-color: var(--c-border-hover, var(--c-border-hover));
}

.c-input:focus {
    outline: none;
    border-color: var(--c-primary, var(--c-info-hover));
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.c-input:disabled {
    background-color: var(--c-bg-disabled, var(--c-bg-tertiary));
    cursor: not-allowed;
    opacity: 0.6;
}

.c-input::placeholder {
    color: var(--c-text-muted, var(--c-text-muted));
}

/* Rozmiary */
.c-input-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

.c-input-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

/* Error state */
.c-input-wrapper.has-error .c-input {
    border-color: var(--c-danger, var(--c-danger));
}

.c-input-error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--c-danger, var(--c-danger));
}

.c-input-helper {
    font-size: 0.75rem;
    color: var(--c-text-muted, var(--c-text-secondary));
}

/* Dark mode */
html.admin-dark-mode .c-input {
    background-color: var(--c-bg-secondary);
    border-color: var(--c-border);
    color: var(--c-text-primary);
}

html.admin-dark-mode .c-input::placeholder {
    color: var(--c-text-muted);
}