/* _content/InalcaAwarie/Pages/Flota/FlotaDashboard.razor.rz.scp.css */
/* Fleet Management Dashboard Styles */

*[b-eel432k1a7] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fleet-container[b-eel432k1a7] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar[b-eel432k1a7] {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 100vh;
    background: linear-gradient(180deg, #1e3a2e 0%, #16291f 100%);
    padding: 20px 0;
    overflow-y: auto;
    z-index: 1000;
}

.sidebar-header[b-eel432k1a7] {
    padding: 0 20px 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-logo[b-eel432k1a7] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.sidebar-logo svg[b-eel432k1a7] {
    width: 28px;
    height: 28px;
}

.nav-section[b-eel432k1a7] {
    margin-top: 25px;
}

.nav-section-title[b-eel432k1a7] {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

.nav-item[b-eel432k1a7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    position: relative;
    cursor: pointer;
}

.nav-item:hover[b-eel432k1a7] {
    background: rgba(255,255,255,0.05);
    color: white;
}

.nav-item.active[b-eel432k1a7] {
    background: rgba(76,175,80,0.2);
    color: #4caf50;
    font-weight: 600;
}

.nav-item.active[b-eel432k1a7]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #4caf50;
    border-radius: 0 4px 4px 0;
}

.nav-badge[b-eel432k1a7] {
    margin-left: auto;
    background: #4caf50;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Main Content */
.main-content[b-eel432k1a7] {
    margin-left: 240px;
    min-height: 100vh;
}

/* Top Bar */
.top-bar[b-eel432k1a7] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.search-bar[b-eel432k1a7] {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.search-bar input[b-eel432k1a7] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.search-bar input:focus[b-eel432k1a7] {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
}

.search-icon[b-eel432k1a7] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.top-bar-actions[b-eel432k1a7] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.notification-btn[b-eel432k1a7] {
    position: relative;
    background: #f1f5f9;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notification-btn:hover[b-eel432k1a7] {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.notification-badge[b-eel432k1a7] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Wrapper */
.content-wrapper[b-eel432k1a7] {
    padding: 32px;
}

.page-header[b-eel432k1a7] {
    margin-bottom: 32px;
}

/* Dashboard Header Banner - ciemny zielony z bia�ym tekstem */
.page-header[b-eel432k1a7] {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(27, 94, 32, 0.3);
}

.page-title[b-eel432k1a7] {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page-subtitle[b-eel432k1a7] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* KPI Grid */
.kpi-grid[b-eel432k1a7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card[b-eel432k1a7] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s;
    border: 1px solid #f1f5f9;
}

.kpi-card:hover[b-eel432k1a7] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.kpi-header[b-eel432k1a7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.kpi-label[b-eel432k1a7] {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-icon[b-eel432k1a7] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon.green[b-eel432k1a7] { background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); }
.kpi-icon.blue[b-eel432k1a7] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.kpi-icon.orange[b-eel432k1a7] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.kpi-icon.purple[b-eel432k1a7] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.kpi-icon.red[b-eel432k1a7] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.kpi-icon.teal[b-eel432k1a7] { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }

.kpi-value[b-eel432k1a7] {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.kpi-change[b-eel432k1a7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.kpi-change.positive[b-eel432k1a7] {
    color: #22c55e;
}

.kpi-change.negative[b-eel432k1a7] {
    color: #ef4444;
}

.kpi-change.neutral[b-eel432k1a7] {
    color: #64748b;
}

/* Content Grid */
.content-grid[b-eel432k1a7] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* Card Styles */
.card[b-eel432k1a7] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #f1f5f9;
}

.card-header[b-eel432k1a7] {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-eel432k1a7] {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.card-actions[b-eel432k1a7] {
    display: flex;
    gap: 8px;
}

.btn[b-eel432k1a7] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:hover[b-eel432k1a7] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-primary[b-eel432k1a7] {
    background: #4caf50;
    color: white;
}

.btn-primary:hover[b-eel432k1a7] {
    background: #45a049;
}

.btn-secondary[b-eel432k1a7] {
    background: #f1f5f9;
    color: #64748b;
}

.btn-secondary:hover[b-eel432k1a7] {
    background: #e2e8f0;
}

.card-body[b-eel432k1a7] {
    padding: 24px;
}

/* Tabs */
.tabs[b-eel432k1a7] {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #f1f5f9;
    margin-bottom: 20px;
}

.tab[b-eel432k1a7] {
    padding: 12px 20px;
    background: none;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.tab:hover[b-eel432k1a7] {
    color: #4caf50;
}

.tab.active[b-eel432k1a7] {
    color: #4caf50;
}

.tab.active[b-eel432k1a7]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #4caf50;
}

/* Vehicle List */
.vehicle-list[b-eel432k1a7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-item[b-eel432k1a7] {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    cursor: pointer;
}

.vehicle-item:hover[b-eel432k1a7] {
    border-color: #4caf50;
    background: #f8fef9;
    transform: translateX(4px);
}

.vehicle-info[b-eel432k1a7] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vehicle-icon[b-eel432k1a7] {
    width: 48px;
    height: 48px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}

.vehicle-item:hover .vehicle-icon[b-eel432k1a7] {
    background: #4caf50;
    color: white;
}

.vehicle-details h4[b-eel432k1a7] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.vehicle-meta[b-eel432k1a7] {
    font-size: 13px;
    color: #64748b;
}

.vehicle-status[b-eel432k1a7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-badge[b-eel432k1a7] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.available[b-eel432k1a7] {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.in-use[b-eel432k1a7] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.service[b-eel432k1a7] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.alert[b-eel432k1a7] {
    background: #fee2e2;
    color: #dc2626;
}

/* Alert List */
.alert-list[b-eel432k1a7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-item[b-eel432k1a7] {
    padding: 14px 16px;
    border-left: 4px solid;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.2s;
}

.alert-item:hover[b-eel432k1a7] {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.alert-item.warning[b-eel432k1a7] {
    background: #fef3c7;
    border-color: #f59e0b;
}

.alert-item.danger[b-eel432k1a7] {
    background: #fee2e2;
    border-color: #ef4444;
}

.alert-item.info[b-eel432k1a7] {
    background: #dbeafe;
    border-color: #3b82f6;
}

.alert-icon[b-eel432k1a7] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.alert-content[b-eel432k1a7] {
    flex: 1;
}

.alert-content h5[b-eel432k1a7] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.alert-content p[b-eel432k1a7] {
    font-size: 13px;
    color: #64748b;
}

.alert-time[b-eel432k1a7] {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

/* Chart Container */
.chart-container[b-eel432k1a7] {
    height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 20px 0;
    gap: 8px;
}

.chart-bar[b-eel432k1a7] {
    flex: 1;
    background: linear-gradient(180deg, #4caf50 0%, #45a049 100%);
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: all 0.3s;
    cursor: pointer;
}

.chart-bar:hover[b-eel432k1a7] {
    opacity: 0.8;
    transform: translateY(-4px);
}

.chart-bar-label[b-eel432k1a7] {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.chart-bar-value[b-eel432k1a7] {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* Full Width Card */
.full-width-card[b-eel432k1a7] {
    grid-column: 1 / -1;
}

/* Quick Actions */
.quick-actions[b-eel432k1a7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.quick-action-btn[b-eel432k1a7] {
    padding: 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quick-action-btn:hover[b-eel432k1a7] {
    border-color: #4caf50;
    background: #f8fef9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76,175,80,0.15);
}

.quick-action-icon[b-eel432k1a7] {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quick-action-btn:hover .quick-action-icon[b-eel432k1a7] {
    background: #4caf50;
    color: white;
    transform: scale(1.1);
}

.quick-action-label[b-eel432k1a7] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .content-grid[b-eel432k1a7] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sidebar[b-eel432k1a7] {
        transform: translateX(-100%);
    }

    .main-content[b-eel432k1a7] {
        margin-left: 0;
    }

    .kpi-grid[b-eel432k1a7] {
        grid-template-columns: 1fr;
    }

    .content-wrapper[b-eel432k1a7] {
        padding: 16px;
    }

    .top-bar[b-eel432k1a7] {
        padding: 12px 16px;
    }

    .search-bar[b-eel432k1a7] {
        max-width: 100%;
    }

    .quick-actions[b-eel432k1a7] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* Scrollbar Styling */
.sidebar[b-eel432k1a7]::-webkit-scrollbar {
    width: 6px;
}

.sidebar[b-eel432k1a7]::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.sidebar[b-eel432k1a7]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.sidebar[b-eel432k1a7]::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* Animation */
@keyframes fadeIn-b-eel432k1a7 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-eel432k1a7],
.card[b-eel432k1a7],
.vehicle-item[b-eel432k1a7],
.alert-item[b-eel432k1a7] {
    animation: fadeIn-b-eel432k1a7 0.3s ease-out;
}

/* Loading State */
.loading[b-eel432k1a7] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #64748b;
}

.loading[b-eel432k1a7]::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin-b-eel432k1a7 0.8s linear infinite;
}

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

/* =====================================================
   MODAL IMPORTU PRZEBIEG�W - NOWOCZESNY WYGL�D
   ===================================================== */

/* Modal Overlay */
.modal-overlay[b-eel432k1a7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeInOverlay-b-eel432k1a7 0.3s ease;
}

@keyframes fadeInOverlay-b-eel432k1a7 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.import-modal[b-eel432k1a7] {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: slideUpModal-b-eel432k1a7 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpModal-b-eel432k1a7 {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header - Zielony gradient */
.import-modal-header[b-eel432k1a7] {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.import-modal-header h2[b-eel432k1a7] {
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.import-modal-header h2 svg[b-eel432k1a7] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.close-modal-btn[b-eel432k1a7] {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}

.close-modal-btn:hover[b-eel432k1a7] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.05);
}

/* Modal Body */
.import-modal-body[b-eel432k1a7] {
    padding: 32px;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
}

/* Import Info Section */
.import-info[b-eel432k1a7] {
    text-align: center;
    margin-bottom: 32px;
}

.info-icon[b-eel432k1a7] {
    margin: 0 auto 20px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(27, 94, 32, 0.15);
    animation: bounceIn-b-eel432k1a7 0.6s ease;
}

@keyframes bounceIn-b-eel432k1a7 {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.import-info h3[b-eel432k1a7] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.import-info p[b-eel432k1a7] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

.import-info p strong[b-eel432k1a7] {
    color: #1b5e20;
    font-weight: 600;
}

/* Dropzone */
.dropzone[b-eel432k1a7] {
    position: relative;
    border: 3px dashed #cbd5e1;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: #f8fafc;
    cursor: pointer;
}

.dropzone:hover[b-eel432k1a7] {
    border-color: #4caf50;
    background: #f0fdf4;
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.1);
}

.dropzone.dragging[b-eel432k1a7] {
    border-color: #1b5e20;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-width: 4px;
    box-shadow: 0 12px 32px rgba(27, 94, 32, 0.2);
    transform: scale(1.02);
}

.file-input[b-eel432k1a7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-content[b-eel432k1a7] {
    pointer-events: none;
}

.dropzone-content svg[b-eel432k1a7] {
    margin: 0 auto 20px;
    transition: transform 0.3s ease;
}

.dropzone:hover .dropzone-content svg[b-eel432k1a7],
.dropzone.dragging .dropzone-content svg[b-eel432k1a7] {
    transform: translateY(-4px) scale(1.05);
}

.dropzone-content p[b-eel432k1a7] {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #1e293b;
}

.dropzone-content p strong[b-eel432k1a7] {
    font-weight: 700;
    color: #1b5e20;
}

.file-types[b-eel432k1a7] {
    display: inline-block;
    padding: 6px 12px;
    background: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    border: 1px solid #e2e8f0;
    margin-top: 12px;
}

/* Selected File */
.selected-file[b-eel432k1a7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
    border-radius: 12px;
    margin-top: 20px;
    animation: slideIn-b-eel432k1a7 0.3s ease;
}

@keyframes slideIn-b-eel432k1a7 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.selected-file svg[b-eel432k1a7] {
    flex-shrink: 0;
}

.selected-file span[b-eel432k1a7] {
    flex: 1;
    font-weight: 600;
    color: #1b5e20;
    font-size: 14px;
    word-break: break-word;
}

.remove-file-btn[b-eel432k1a7] {
    background: rgba(220, 38, 38, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    transition: all 0.2s;
    flex-shrink: 0;
}

.remove-file-btn:hover[b-eel432k1a7] {
    background: #dc2626;
    color: white;
    transform: scale(1.1);
}

/* Import Processing */
.import-processing[b-eel432k1a7] {
    text-align: center;
    padding: 60px 20px;
}

.spinner-large[b-eel432k1a7] {
    width: 64px;
    height: 64px;
    border: 5px solid #e2e8f0;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin-b-eel432k1a7 0.8s linear infinite;
    margin: 0 auto 24px;
}

.import-processing h3[b-eel432k1a7] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.import-processing p[b-eel432k1a7] {
    font-size: 15px;
    color: #64748b;
}

/* Import Results */
.import-results[b-eel432k1a7] {
    animation: fadeInResults-b-eel432k1a7 0.4s ease;
}

@keyframes fadeInResults-b-eel432k1a7 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.results-header[b-eel432k1a7] {
    text-align: center;
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.results-header.success[b-eel432k1a7] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
}

.results-header.has-errors[b-eel432k1a7] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.results-header svg[b-eel432k1a7] {
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.results-header h3[b-eel432k1a7] {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* Results Stats */
.results-stats[b-eel432k1a7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-item[b-eel432k1a7] {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid;
}

.stat-item.success[b-eel432k1a7] {
    background: #f0fdf4;
    border-color: #22c55e;
}

.stat-item.warning[b-eel432k1a7] {
    background: #fef3c7;
    border-color: #f59e0b;
}

.stat-item.info[b-eel432k1a7] {
    background: #dbeafe;
    border-color: #3b82f6;
}

.stat-number[b-eel432k1a7] {
    display: block;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
}

.stat-item.success .stat-number[b-eel432k1a7] {
    color: #16a34a;
}

.stat-item.warning .stat-number[b-eel432k1a7] {
    color: #d97706;
}

.stat-item.info .stat-number[b-eel432k1a7] {
    color: #2563eb;
}

.stat-label[b-eel432k1a7] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Results Details */
.results-details[b-eel432k1a7] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.results-details h4[b-eel432k1a7] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.updated-list[b-eel432k1a7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.updated-item[b-eel432k1a7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.reg-number[b-eel432k1a7] {
    font-weight: 700;
    color: #1e293b;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.arrow[b-eel432k1a7] {
    color: #4caf50;
    font-weight: 700;
}

.new-mileage[b-eel432k1a7] {
    font-weight: 600;
    color: #1b5e20;
}

.more-items[b-eel432k1a7] {
    text-align: center;
    padding: 10px;
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

/* Results Errors */
.results-errors[b-eel432k1a7] {
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 12px;
    padding: 20px;
}

.results-errors h4[b-eel432k1a7] {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.errors-list[b-eel432k1a7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.error-item[b-eel432k1a7] {
    padding: 6px 12px;
    background: white;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.more-errors[b-eel432k1a7] {
    padding: 6px 12px;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
}

/* Modal Footer */
.import-modal-footer[b-eel432k1a7] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.import-modal-footer button[b-eel432k1a7] {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cancel[b-eel432k1a7] {
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.btn-cancel:hover[b-eel432k1a7] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-import[b-eel432k1a7],
.btn-import-another[b-eel432k1a7] {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    color: white;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

.btn-import:hover[b-eel432k1a7],
.btn-import-another:hover[b-eel432k1a7] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 94, 32, 0.4);
}

.btn-import:disabled[b-eel432k1a7] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-close[b-eel432k1a7] {
    background: #64748b;
    color: white;
}

.btn-close:hover[b-eel432k1a7] {
    background: #475569;
}

/* Import Highlight Button */
.import-highlight[b-eel432k1a7] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #4caf50 !important;
}

.import-highlight:hover[b-eel432k1a7] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #22c55e !important;
}

.import-icon[b-eel432k1a7] {
    background: linear-gradient(135deg, #4caf50, #45a049) !important;
    color: white !important;
}

.import-highlight:hover .import-icon[b-eel432k1a7] {
    transform: scale(1.15) rotate(5deg) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .import-modal[b-eel432k1a7] {
        width: 95%;
        max-width: 95%;
    }

    .import-modal-header[b-eel432k1a7] {
        padding: 20px;
    }

    .import-modal-header h2[b-eel432k1a7] {
        font-size: 18px;
    }

    .import-modal-body[b-eel432k1a7] {
        padding: 20px;
    }

    .results-stats[b-eel432k1a7] {
        grid-template-columns: 1fr;
    }

    .dropzone[b-eel432k1a7] {
        padding: 32px 16px;
    }

    .import-modal-footer[b-eel432k1a7] {
        flex-direction: column;
    }

    .import-modal-footer button[b-eel432k1a7] {
        width: 100%;
        justify-content: center;
    }
}

/* _content/InalcaAwarie/Pages/Flota/FlotaDodajPojazd.razor.rz.scp.css */
/* FlotaDodajPojazd - Styles */

.fleet-container[b-qsa9z5o0hd] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    min-height: 100vh;
    display: flex;
}

/* Sidebar - reuse from other pages */
.sidebar[b-qsa9z5o0hd] {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 100vh;
    background: linear-gradient(180deg, #1e3a2e 0%, #16291f 100%);
    padding: 20px 0;
    overflow-y: auto;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.sidebar-header[b-qsa9z5o0hd] {
    padding: 0 20px 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-logo[b-qsa9z5o0hd] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.sidebar-logo svg[b-qsa9z5o0hd] {
    width: 28px;
    height: 28px;
}

.nav-section[b-qsa9z5o0hd] {
    margin-top: 25px;
}

.nav-item[b-qsa9z5o0hd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    position: relative;
    cursor: pointer;
}

.nav-item:hover[b-qsa9z5o0hd] {
    background: rgba(255,255,255,0.05);
    color: white;
}

.nav-item.active[b-qsa9z5o0hd] {
    background: rgba(76,175,80,0.2);
    color: #4caf50;
    font-weight: 600;
}

.nav-item.active[b-qsa9z5o0hd]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #4caf50;
    border-radius: 0 4px 4px 0;
}

.sidebar-footer[b-qsa9z5o0hd] {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Main Content */
.main-content[b-qsa9z5o0hd] {
    margin-left: 240px;
    min-height: 100vh;
    flex: 1;
}

.content-wrapper[b-qsa9z5o0hd] {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-qsa9z5o0hd] {
    margin-bottom: 32px;
}

.btn-back[b-qsa9z5o0hd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 16px;
}

.btn-back:hover[b-qsa9z5o0hd] {
    background: #f1f5f9;
    color: #1e293b;
}

.page-title[b-qsa9z5o0hd] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.page-subtitle[b-qsa9z5o0hd] {
    color: #64748b;
    font-size: 14px;
}

/* Loading State */
.loading-state[b-qsa9z5o0hd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
}

.spinner[b-qsa9z5o0hd] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin-b-qsa9z5o0hd 1s linear infinite;
    margin-bottom: 16px;
}

.spinner-small[b-qsa9z5o0hd] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-qsa9z5o0hd 0.8s linear infinite;
}

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

/* Form Sections */
.form-sections[b-qsa9z5o0hd] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section[b-qsa9z5o0hd] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section-title[b-qsa9z5o0hd] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
}

.section-title svg[b-qsa9z5o0hd] {
    color: #4caf50;
}

/* Form Grid */
.form-grid[b-qsa9z5o0hd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.form-group[b-qsa9z5o0hd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width[b-qsa9z5o0hd] {
    grid-column: 1 / -1;
}

.form-group.checkbox-group[b-qsa9z5o0hd] {
    flex-direction: row;
    align-items: center;
}

.form-label[b-qsa9z5o0hd] {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
}

.form-label.required[b-qsa9z5o0hd]::after {
    content: ' *';
    color: #ef4444;
}

.form-input[b-qsa9z5o0hd] {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
    background: white;
    width: 100%;
}

.form-input:focus[b-qsa9z5o0hd] {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
}

.form-input[b-qsa9z5o0hd]::placeholder {
    color: #94a3b8;
}

.form-textarea[b-qsa9z5o0hd] {
    resize: vertical;
    min-height: 100px;
}

/* Checkbox */
.checkbox-label[b-qsa9z5o0hd] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"][b-qsa9z5o0hd] {
    width: 20px;
    height: 20px;
    accent-color: #4caf50;
    cursor: pointer;
}

.checkbox-label span[b-qsa9z5o0hd] {
    font-size: 14px;
    color: #1e293b;
}

/* Validation */
.validation-message[b-qsa9z5o0hd] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}

/* Alert */
.alert[b-qsa9z5o0hd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-top: 24px;
}

.alert-error[b-qsa9z5o0hd] {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Form Actions */
.form-actions[b-qsa9z5o0hd] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #f1f5f9;
}

.btn[b-qsa9z5o0hd] {
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn:disabled[b-qsa9z5o0hd] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-qsa9z5o0hd] {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-primary:hover:not(:disabled)[b-qsa9z5o0hd] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.btn-secondary[b-qsa9z5o0hd] {
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.btn-secondary:hover[b-qsa9z5o0hd] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar[b-qsa9z5o0hd] {
        transform: translateX(-100%);
    }
    
    .main-content[b-qsa9z5o0hd] {
        margin-left: 0;
    }
    
    .content-wrapper[b-qsa9z5o0hd] {
        padding: 16px;
    }
    
    .form-grid[b-qsa9z5o0hd] {
        grid-template-columns: 1fr;
    }
    
    .form-actions[b-qsa9z5o0hd] {
        flex-direction: column;
    }
    
    .btn[b-qsa9z5o0hd] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/InalcaAwarie/Pages/Flota/FlotaKartyPaliwowe.razor.rz.scp.css */
/* =====================================================
   FUEL CARDS PAGE STYLES - FlotaKartyPaliwowe
   Profesjonalny widok kart paliwowych z zielonym motywem
   ===================================================== */

.fuel-cards-container[b-jg8rah1l58] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    min-height: 100vh;
}

/* Sidebar - dziedziczone z fleet.css */
.fuel-cards-container .sidebar[b-jg8rah1l58] {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 100vh;
    background: linear-gradient(180deg, #1e3a2e 0%, #16291f 100%);
    padding: 20px 0;
    overflow-y: auto;
    z-index: 1000;
}

.fuel-cards-container .sidebar-header[b-jg8rah1l58] {
    padding: 0 20px 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.fuel-cards-container .sidebar-logo[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.fuel-cards-container .sidebar-logo svg[b-jg8rah1l58] {
    width: 28px;
    height: 28px;
}

.fuel-cards-container .nav-section[b-jg8rah1l58] {
    margin-top: 25px;
}

.fuel-cards-container .nav-section-title[b-jg8rah1l58] {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

.fuel-cards-container .nav-item[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    position: relative;
}

.fuel-cards-container .nav-item:hover[b-jg8rah1l58] {
    background: rgba(255,255,255,0.05);
    color: white;
}

.fuel-cards-container .nav-item.active[b-jg8rah1l58] {
    background: rgba(76,175,80,0.2);
    color: #4caf50;
    font-weight: 600;
}

.fuel-cards-container .nav-item.active[b-jg8rah1l58]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #4caf50;
    border-radius: 0 4px 4px 0;
}

.fuel-cards-container .nav-badge[b-jg8rah1l58] {
    margin-left: auto;
    background: #4caf50;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Main Content */
.fuel-cards-container .main-content[b-jg8rah1l58] {
    margin-left: 240px;
    min-height: 100vh;
}

/* Top Bar */
.fuel-cards-container .top-bar[b-jg8rah1l58] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 16px;
}

.fuel-cards-container .search-bar[b-jg8rah1l58] {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.fuel-cards-container .search-bar input[b-jg8rah1l58] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.fuel-cards-container .search-bar input:focus[b-jg8rah1l58] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.15);
}

.fuel-cards-container .search-icon[b-jg8rah1l58] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.fuel-cards-container .top-bar-actions[b-jg8rah1l58] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.fuel-cards-container .btn-back-modules[b-jg8rah1l58] {
    position: relative;
    background: #f1f5f9;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.fuel-cards-container .btn-back-modules:hover[b-jg8rah1l58] {
    background: #e2e8f0;
    transform: translateY(-2px);
}

/* Container */
.fc-container[b-jg8rah1l58] {
    padding: 32px;
}

/* Page Header Banner - zielony gradient jak flota */
.fc-page-header-banner[b-jg8rah1l58] {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(27, 94, 32, 0.3);
}

.fc-banner-content[b-jg8rah1l58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.fc-banner-text[b-jg8rah1l58] {
    flex: 1;
}

.fc-banner-title[b-jg8rah1l58] {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
}

.fc-banner-subtitle[b-jg8rah1l58] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.fc-banner-actions[b-jg8rah1l58] {
    display: flex;
    gap: 12px;
}

.fc-btn-banner-primary[b-jg8rah1l58] {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: white;
    color: #1b5e20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fc-btn-banner-primary:hover[b-jg8rah1l58] {
    background: #f0fdf4;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Stats Summary */
.fc-stats-summary[b-jg8rah1l58] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.fc-stat-box[b-jg8rah1l58] {
    background: white;
    padding: 20px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.fc-stat-box[b-jg8rah1l58]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: all 0.3s ease;
}

.fc-stat-box:hover[b-jg8rah1l58] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
    border-color: transparent;
}

.fc-stat-box.active[b-jg8rah1l58] {
    border-color: #1b5e20;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

/* Kolory stat-box */
.fc-stat-box.all[b-jg8rah1l58]::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.fc-stat-box.active-status[b-jg8rah1l58]::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.fc-stat-box.assigned[b-jg8rah1l58]::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.fc-stat-box.expiring[b-jg8rah1l58]::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.fc-stat-box.blocked[b-jg8rah1l58]::before { background: linear-gradient(90deg, #ef4444, #f87171); }

.fc-stat-box:hover[b-jg8rah1l58]::before {
    height: 4px;
}

.fc-stat-content[b-jg8rah1l58] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fc-stat-label[b-jg8rah1l58] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}

.fc-stat-value[b-jg8rah1l58] {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.fc-stat-icon[b-jg8rah1l58] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.fc-stat-box.all .fc-stat-icon[b-jg8rah1l58] { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; }
.fc-stat-box.active-status .fc-stat-icon[b-jg8rah1l58] { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }
.fc-stat-box.assigned .fc-stat-icon[b-jg8rah1l58] { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #9333ea; }
.fc-stat-box.expiring .fc-stat-icon[b-jg8rah1l58] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.fc-stat-box.blocked .fc-stat-icon[b-jg8rah1l58] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }

.fc-stat-box:hover .fc-stat-icon[b-jg8rah1l58] {
    transform: scale(1.1) rotate(5deg);
}

/* Filters Panel */
.fc-filters-panel[b-jg8rah1l58] {
    background: white;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
}

.fc-filters-header[b-jg8rah1l58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.fc-filters-title[b-jg8rah1l58] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-btn-clear-filters[b-jg8rah1l58] {
    padding: 6px 12px;
    background: #fee2e2;
    border: none;
    border-radius: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.fc-btn-clear-filters:hover[b-jg8rah1l58] {
    background: #fecaca;
}

.fc-filters-grid[b-jg8rah1l58] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fc-filter-group[b-jg8rah1l58] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-filter-label[b-jg8rah1l58] {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.fc-filter-select[b-jg8rah1l58] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.fc-filter-select:focus[b-jg8rah1l58] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

/* Cards Grid */
.fc-cards-grid[b-jg8rah1l58] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

/* Fuel Card Item */
.fc-fuel-card[b-jg8rah1l58] {
    background: white;
    border-radius: 16px;
    padding: 0;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.fc-fuel-card[b-jg8rah1l58]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #1b5e20, #4caf50);
}

.fc-fuel-card.blocked[b-jg8rah1l58]::before {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.fc-fuel-card.expired[b-jg8rah1l58]::before {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.fc-fuel-card.expiring[b-jg8rah1l58]::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.fc-fuel-card:hover[b-jg8rah1l58] {
    border-color: #1b5e20;
    box-shadow: 0 12px 32px rgba(27, 94, 32, 0.15);
    transform: translateY(-4px);
}

/* Card Header Section */
.fc-card-header-section[b-jg8rah1l58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.fc-provider-badge[b-jg8rah1l58] {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-provider-badge.orlen[b-jg8rah1l58] { background: #fee2e2; color: #dc2626; }
.fc-provider-badge.bp[b-jg8rah1l58] { background: #dcfce7; color: #16a34a; }
.fc-provider-badge.shell[b-jg8rah1l58] { background: #fef3c7; color: #d97706; }
.fc-provider-badge.circlek[b-jg8rah1l58] { background: #fee2e2; color: #dc2626; }
.fc-provider-badge.e100[b-jg8rah1l58] { background: #dbeafe; color: #2563eb; }
.fc-provider-badge.dkv[b-jg8rah1l58] { background: #f3e8ff; color: #9333ea; }
.fc-provider-badge.default[b-jg8rah1l58] { background: #f1f5f9; color: #64748b; }

.fc-card-status-badge[b-jg8rah1l58] {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.fc-card-status-badge.active[b-jg8rah1l58] { background: #dcfce7; color: #16a34a; }
.fc-card-status-badge.expiring[b-jg8rah1l58] { background: #fef3c7; color: #d97706; }
.fc-card-status-badge.expired[b-jg8rah1l58] { background: #f1f5f9; color: #64748b; }
.fc-card-status-badge.blocked[b-jg8rah1l58] { background: #fee2e2; color: #dc2626; }

/* Card Number Section */
.fc-card-number-section[b-jg8rah1l58] {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.fc-card-number-label[b-jg8rah1l58] {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.fc-card-number[b-jg8rah1l58] {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    font-family: 'SF Mono', 'Consolas', monospace;
    letter-spacing: 2px;
}

/* Card Details Section */
.fc-card-details-section[b-jg8rah1l58] {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.fc-detail-row[b-jg8rah1l58] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fc-detail-item[b-jg8rah1l58] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fc-detail-label[b-jg8rah1l58] {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.fc-detail-value[b-jg8rah1l58] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.fc-detail-value.warning[b-jg8rah1l58] {
    color: #d97706;
}

/* Limit Usage Section */
.fc-limit-usage[b-jg8rah1l58] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.fc-limit-usage-header[b-jg8rah1l58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
}

.fc-limit-usage-header span:first-child[b-jg8rah1l58] {
    color: #64748b;
    font-weight: 500;
}

.fc-limit-usage-header span:last-child[b-jg8rah1l58] {
    font-weight: 600;
}

.fc-limit-usage-header .normal[b-jg8rah1l58] {
    color: #16a34a;
}

.fc-limit-usage-header .warning[b-jg8rah1l58] {
    color: #d97706;
}

.fc-limit-usage-header .critical[b-jg8rah1l58] {
    color: #dc2626;
}

.fc-limit-progress-bar[b-jg8rah1l58] {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.fc-limit-progress-fill[b-jg8rah1l58] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.fc-limit-progress-fill.normal[b-jg8rah1l58] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.fc-limit-progress-fill.warning[b-jg8rah1l58] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.fc-limit-progress-fill.critical[b-jg8rah1l58] {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.fc-limit-remaining[b-jg8rah1l58] {
    font-size: 11px;
    color: #64748b;
    text-align: right;
}

.fc-limit-remaining strong[b-jg8rah1l58] {
    color: #1e293b;
}

/* Card User Section */
.fc-card-user-section[b-jg8rah1l58] {
    padding: 16px 20px;
    background: #fafbfc;
}

.fc-user-label[b-jg8rah1l58] {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fc-user-info[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fc-user-avatar[b-jg8rah1l58] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.fc-user-details[b-jg8rah1l58] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fc-user-name[b-jg8rah1l58] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.fc-user-dept[b-jg8rah1l58] {
    font-size: 12px;
    color: #64748b;
}

.fc-no-user[b-jg8rah1l58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fc-no-user span[b-jg8rah1l58] {
    font-size: 13px;
    color: #94a3b8;
    font-style: italic;
}

.fc-btn-assign-user[b-jg8rah1l58] {
    padding: 6px 12px;
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.fc-btn-assign-user:hover[b-jg8rah1l58] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

/* Card Actions Section */
.fc-card-actions-section[b-jg8rah1l58] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #f1f5f9;
}

.fc-card-action-btn[b-jg8rah1l58] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.fc-card-action-btn:hover[b-jg8rah1l58] {
    border-color: #1b5e20;
    color: #1b5e20;
    transform: translateY(-2px);
}

.fc-card-action-btn.danger:hover[b-jg8rah1l58] {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

/* Empty State */
.fc-empty-state[b-jg8rah1l58] {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.fc-empty-state svg[b-jg8rah1l58] {
    margin-bottom: 24px;
}

.fc-empty-state h3[b-jg8rah1l58] {
    color: #1e293b;
    font-size: 20px;
    margin-bottom: 8px;
}

.fc-empty-state p[b-jg8rah1l58] {
    color: #64748b;
    margin-bottom: 24px;
}

/* Buttons */
.fc-btn[b-jg8rah1l58] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fc-btn-primary[b-jg8rah1l58] {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    color: white;
}

.fc-btn-primary:hover[b-jg8rah1l58] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

.fc-btn-outline[b-jg8rah1l58] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.fc-btn-outline:hover[b-jg8rah1l58] {
    border-color: #1b5e20;
    color: #1b5e20;
}

/* Loading State */
.loading-state[b-jg8rah1l58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.loading-state .spinner[b-jg8rah1l58] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #1b5e20;
    border-radius: 50%;
    animation: fc-spin-b-jg8rah1l58 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes fc-spin-b-jg8rah1l58 {
    to { transform: rotate(360deg); }
}

/* =====================================================
   MODAL PRZYPISANIA U�YTKOWNIKA
   ===================================================== */

.fc-modal-overlay[b-jg8rah1l58] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fc-fadeIn-b-jg8rah1l58 0.2s ease;
}

@keyframes fc-fadeIn-b-jg8rah1l58 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fc-assign-modal[b-jg8rah1l58] {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    animation: fc-slideUp-b-jg8rah1l58 0.3s ease;
}

@keyframes fc-slideUp-b-jg8rah1l58 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fc-modal-header[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    color: white;
}

.fc-modal-header h2[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.fc-close-btn[b-jg8rah1l58] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
}

.fc-close-btn:hover[b-jg8rah1l58] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.fc-modal-body[b-jg8rah1l58] {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.fc-card-info-summary[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 24px;
}

.fc-info-provider[b-jg8rah1l58] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.fc-info-provider.orlen[b-jg8rah1l58] { background: #fee2e2; color: #dc2626; }
.fc-info-provider.bp[b-jg8rah1l58] { background: #dcfce7; color: #16a34a; }
.fc-info-provider.shell[b-jg8rah1l58] { background: #fef3c7; color: #d97706; }
.fc-info-provider.circlek[b-jg8rah1l58] { background: #fee2e2; color: #dc2626; }
.fc-info-provider.e100[b-jg8rah1l58] { background: #dbeafe; color: #2563eb; }
.fc-info-provider.dkv[b-jg8rah1l58] { background: #f3e8ff; color: #9333ea; }
.fc-info-provider.default[b-jg8rah1l58] { background: #f1f5f9; color: #64748b; }

.fc-info-number[b-jg8rah1l58] {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-family: 'SF Mono', 'Consolas', monospace;
    letter-spacing: 1px;
}

.fc-user-search-section[b-jg8rah1l58] {
    margin-bottom: 16px;
}

.fc-user-search-section label[b-jg8rah1l58] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.fc-user-search-input[b-jg8rah1l58] {
    position: relative;
}

.fc-user-search-input svg[b-jg8rah1l58] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.fc-user-search-input input[b-jg8rah1l58] {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
}

.fc-user-search-input input:focus[b-jg8rah1l58] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.15);
}

.fc-users-list[b-jg8rah1l58] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.fc-user-option[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.fc-user-option:hover[b-jg8rah1l58] {
    border-color: #1b5e20;
    background: #f8fef9;
}

.fc-user-option.selected[b-jg8rah1l58] {
    border-color: #1b5e20;
    background: #f0fdf4;
}

.fc-user-option .fc-user-avatar[b-jg8rah1l58] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.fc-user-option .fc-user-avatar.none[b-jg8rah1l58] {
    background: #f1f5f9;
    color: #94a3b8;
}

.fc-user-option-info[b-jg8rah1l58] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fc-user-option-name[b-jg8rah1l58] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.fc-user-option-dept[b-jg8rah1l58] {
    font-size: 12px;
    color: #64748b;
}

.fc-check-icon[b-jg8rah1l58] {
    flex-shrink: 0;
}

.fc-modal-footer[b-jg8rah1l58] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.fc-btn-cancel[b-jg8rah1l58] {
    padding: 12px 24px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.fc-btn-cancel:hover[b-jg8rah1l58] {
    background: #f1f5f9;
}

.fc-btn-save[b-jg8rah1l58] {
    padding: 12px 24px;
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.fc-btn-save:hover:not(:disabled)[b-jg8rah1l58] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.3);
}

.fc-btn-save:disabled[b-jg8rah1l58] {
    opacity: 0.6;
    cursor: not-allowed;
}

.fc-spinner-small[b-jg8rah1l58] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: fc-spin-b-jg8rah1l58 0.6s linear infinite;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1400px) {
    .fc-stats-summary[b-jg8rah1l58] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .fc-filters-grid[b-jg8rah1l58] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .fc-stats-summary[b-jg8rah1l58] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fc-cards-grid[b-jg8rah1l58] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .fuel-cards-container .sidebar[b-jg8rah1l58] {
        transform: translateX(-100%);
    }
    
    .fuel-cards-container .main-content[b-jg8rah1l58] {
        margin-left: 0;
    }
    
    .fc-container[b-jg8rah1l58] {
        padding: 16px;
    }
    
    .fc-stats-summary[b-jg8rah1l58] {
        grid-template-columns: 1fr;
    }
    
    .fc-banner-content[b-jg8rah1l58] {
        flex-direction: column;
        text-align: center;
    }
    
    .fc-cards-grid[b-jg8rah1l58] {
        grid-template-columns: 1fr;
    }
    
    .fc-detail-row[b-jg8rah1l58] {
        grid-template-columns: 1fr;
    }
}

/* Animation */
@keyframes fc-cardFadeIn-b-jg8rah1l58 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fc-fuel-card[b-jg8rah1l58] {
    animation: fc-cardFadeIn-b-jg8rah1l58 0.3s ease-out;
}

/* =====================================================
   MODAL DODAWANIA KARTY
   ===================================================== */

.fc-add-modal[b-jg8rah1l58] {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    animation: fc-slideUp-b-jg8rah1l58 0.3s ease;
}

.fc-add-modal .fc-modal-body[b-jg8rah1l58] {
    max-height: 65vh;
    overflow-y: auto;
}

/* Form Sections */
.fc-form-section[b-jg8rah1l58] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.fc-form-section:last-child[b-jg8rah1l58] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.fc-form-section-title[b-jg8rah1l58] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-optional-badge[b-jg8rah1l58] {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Row */
.fc-form-row[b-jg8rah1l58] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.fc-form-row:last-child[b-jg8rah1l58] {
    margin-bottom: 0;
}

/* Form Group */
.fc-form-group[b-jg8rah1l58] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-form-label[b-jg8rah1l58] {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.fc-form-label.required[b-jg8rah1l58]::after {
    content: ' *';
    color: #dc2626;
}

.fc-form-input[b-jg8rah1l58],
.fc-form-select[b-jg8rah1l58] {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    transition: all 0.2s;
}

.fc-form-input:focus[b-jg8rah1l58],
.fc-form-select:focus[b-jg8rah1l58] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.15);
}

.fc-form-input[b-jg8rah1l58]::placeholder {
    color: #94a3b8;
}

.fc-form-textarea[b-jg8rah1l58] {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    transition: all 0.2s;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.fc-form-textarea:focus[b-jg8rah1l58] {
    outline: none;
    border-color: #1b5e20;
    box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.15);
}

.fc-form-hint[b-jg8rah1l58] {
    font-size: 11px;
    color: #94a3b8;
}

/* Input with suffix */
.fc-input-with-suffix[b-jg8rah1l58] {
    position: relative;
    display: flex;
    align-items: center;
}

.fc-input-with-suffix .fc-form-input[b-jg8rah1l58] {
    padding-right: 40px;
    width: 100%;
}

.fc-input-suffix[b-jg8rah1l58] {
    position: absolute;
    right: 14px;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
}

/* Toggle Switch */
.fc-user-assignment-toggle[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fc-toggle[b-jg8rah1l58] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.fc-toggle input[b-jg8rah1l58] {
    opacity: 0;
    width: 0;
    height: 0;
}

.fc-toggle-slider[b-jg8rah1l58] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e2e8f0;
    transition: 0.3s;
    border-radius: 26px;
}

.fc-toggle-slider[b-jg8rah1l58]::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.fc-toggle input:checked + .fc-toggle-slider[b-jg8rah1l58] {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
}

.fc-toggle input:checked + .fc-toggle-slider[b-jg8rah1l58]::before {
    transform: translateX(22px);
}

.fc-toggle-label[b-jg8rah1l58] {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
}

/* Users list compact */
.fc-users-list.compact[b-jg8rah1l58] {
    max-height: 200px;
}

.fc-users-list.compact .fc-user-option[b-jg8rah1l58] {
    padding: 10px;
}

/* Selected user preview */
.fc-selected-user-preview[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 13px;
    color: #166534;
}

.fc-selected-user-preview strong[b-jg8rah1l58] {
    font-weight: 600;
}

.fc-clear-user[b-jg8rah1l58] {
    margin-left: auto;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #166534;
    opacity: 0.7;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-clear-user:hover[b-jg8rah1l58] {
    opacity: 1;
    color: #dc2626;
}

/* Error message */
.fc-error-message[b-jg8rah1l58] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Responsive for add modal */
@media (max-width: 640px) {
    .fc-add-modal[b-jg8rah1l58] {
        max-width: 95%;
        margin: 0 10px;
    }
    
    .fc-form-row[b-jg8rah1l58] {
        grid-template-columns: 1fr;
    }
}
/* _content/InalcaAwarie/Pages/Flota/FlotaPojazdy.razor.rz.scp.css */
/* All Vehicles View Styles */

*[b-b3p0oibu6e] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.all-vehicles-container[b-b3p0oibu6e] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    min-height: 100vh;
}

/* Main Content */
.main-content[b-b3p0oibu6e] {
    min-height: 100vh;
    flex: 1;
}

/* Top Bar */
.top-bar[b-b3p0oibu6e] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.search-bar[b-b3p0oibu6e] {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.search-bar input[b-b3p0oibu6e] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.search-bar input:focus[b-b3p0oibu6e] {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
}

.search-icon[b-b3p0oibu6e] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.top-bar-actions[b-b3p0oibu6e] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.notification-btn[b-b3p0oibu6e] {
    position: relative;
    background: #f1f5f9;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notification-btn:hover[b-b3p0oibu6e] {
    background: #e2e8f0;
    transform: translateY(-1px);
}

/* Container */
.container[b-b3p0oibu6e] {
    padding: 32px;
}

/* Page Header */
.page-header[b-b3p0oibu6e] {
    margin-bottom: 32px;
}

.page-header-top[b-b3p0oibu6e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-title[b-b3p0oibu6e] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.page-subtitle[b-b3p0oibu6e] {
    color: #64748b;
    font-size: 14px;
}

.header-actions[b-b3p0oibu6e] {
    display: flex;
    gap: 12px;
}

.btn[b-b3p0oibu6e] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:hover[b-b3p0oibu6e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-primary[b-b3p0oibu6e] {
    background: #4caf50;
    color: white;
}

.btn-primary:hover[b-b3p0oibu6e] {
    background: #45a049;
}

.btn-outline[b-b3p0oibu6e] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.btn-outline:hover[b-b3p0oibu6e] {
    border-color: #4caf50;
    color: #4caf50;
}

/* Stats Summary */
.stats-summary[b-b3p0oibu6e] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-box[b-b3p0oibu6e] {
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.stat-box[b-b3p0oibu6e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.stat-box.all[b-b3p0oibu6e]::before { background: linear-gradient(90deg, #4caf50, #66bb6a); }
.stat-box.available[b-b3p0oibu6e]::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.stat-box.in-use[b-b3p0oibu6e]::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-box.service[b-b3p0oibu6e]::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.stat-box.costs[b-b3p0oibu6e]::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.stat-box:hover[b-b3p0oibu6e] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.stat-box.active[b-b3p0oibu6e] {
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.stat-header[b-b3p0oibu6e] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.stat-icon[b-b3p0oibu6e] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-box.all .stat-icon[b-b3p0oibu6e] { background: #dcfce7; color: #16a34a; }
.stat-box.available .stat-icon[b-b3p0oibu6e] { background: #d1fae5; color: #059669; }
.stat-box.in-use .stat-icon[b-b3p0oibu6e] { background: #fef3c7; color: #d97706; }
.stat-box.service .stat-icon[b-b3p0oibu6e] { background: #fee2e2; color: #dc2626; }
.stat-box.costs .stat-icon[b-b3p0oibu6e] { background: #ede9fe; color: #7c3aed; }

.stat-label[b-b3p0oibu6e] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-value[b-b3p0oibu6e] {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

.stat-change[b-b3p0oibu6e] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    width: fit-content;
}

.stat-change.positive[b-b3p0oibu6e] {
    background: #dcfce7;
    color: #16a34a;
}

.stat-change.negative[b-b3p0oibu6e] {
    background: #fee2e2;
    color: #dc2626;
}

.stat-change .change-label[b-b3p0oibu6e] {
    color: #94a3b8;
    font-weight: 500;
    margin-left: 4px;
}

/* Filters Panel */
.filters-panel[b-b3p0oibu6e] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid #f1f5f9;
}

.filters-header[b-b3p0oibu6e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filters-title[b-b3p0oibu6e] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filters-grid[b-b3p0oibu6e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.filter-group[b-b3p0oibu6e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label[b-b3p0oibu6e] {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.filter-select[b-b3p0oibu6e] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-select:focus[b-b3p0oibu6e] {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
}

.filter-select:hover[b-b3p0oibu6e] {
    border-color: #cbd5e1;
}

/* View Toggle */
.view-toggle[b-b3p0oibu6e] {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 4px;
}

.view-btn[b-b3p0oibu6e] {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.view-btn:hover[b-b3p0oibu6e] {
    color: #4caf50;
}

.view-btn.active[b-b3p0oibu6e] {
    background: white;
    color: #4caf50;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Loading State */
.loading-state[b-b3p0oibu6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
}

.spinner[b-b3p0oibu6e] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin-b-b3p0oibu6e 1s linear infinite;
    margin-bottom: 16px;
}

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

/* Vehicles Grid */
.vehicles-grid[b-b3p0oibu6e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.vehicle-card[b-b3p0oibu6e] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 2px solid #f1f5f9;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.vehicle-card:hover[b-b3p0oibu6e] {
    border-color: #4caf50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.vehicle-header[b-b3p0oibu6e] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.vehicle-icon-large[b-b3p0oibu6e] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}

.vehicle-card:hover .vehicle-icon-large[b-b3p0oibu6e] {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    transform: scale(1.05);
}

.vehicle-status-badge[b-b3p0oibu6e] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.vehicle-status-badge.available[b-b3p0oibu6e] {
    background: #dcfce7;
    color: #16a34a;
}

.vehicle-status-badge.in-use[b-b3p0oibu6e] {
    background: #dbeafe;
    color: #2563eb;
}

.vehicle-status-badge.service[b-b3p0oibu6e] {
    background: #fef3c7;
    color: #d97706;
}

.vehicle-status-badge.reserved[b-b3p0oibu6e] {
    background: #f3e8ff;
    color: #9333ea;
}

.vehicle-info[b-b3p0oibu6e] {
    margin-bottom: 16px;
    min-height: 52px;
}

.vehicle-model[b-b3p0oibu6e] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}

.vehicle-reg[b-b3p0oibu6e] {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.vehicle-details[b-b3p0oibu6e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.detail-item[b-b3p0oibu6e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-b3p0oibu6e] {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-b3p0oibu6e] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.vehicle-assignment[b-b3p0oibu6e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
    margin-top: auto;
}

/* Vehicle Specs - New compact design */
.vehicle-specs[b-b3p0oibu6e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px;
    margin-bottom: 16px;
    gap: 8px;
}

.spec-item[b-b3p0oibu6e] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.spec-item svg[b-b3p0oibu6e] {
    color: #64748b;
    flex-shrink: 0;
}

.spec-item span[b-b3p0oibu6e] {
    color: #1e293b;
    font-weight: 600;
}

.spec-divider[b-b3p0oibu6e] {
    width: 1px;
    height: 16px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.assignment-avatar[b-b3p0oibu6e] {
    width: 36px;
    height: 36px;
    background: #4caf50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.assignment-info[b-b3p0oibu6e] {
    flex: 1;
}

.assignment-name[b-b3p0oibu6e] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.assignment-dept[b-b3p0oibu6e] {
    font-size: 12px;
    color: #64748b;
}

.vehicle-alerts[b-b3p0oibu6e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 60px;
}

.alert-mini[b-b3p0oibu6e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
}

.alert-mini.warning[b-b3p0oibu6e] {
    background: #fffbeb;
    color: #d97706;
    border-left: 3px solid #f59e0b;
}

.alert-mini.danger[b-b3p0oibu6e] {
    background: #fef2f2;
    color: #dc2626;
    border-left: 3px solid #ef4444;
}

.alert-mini.info[b-b3p0oibu6e] {
    background: #eff6ff;
    color: #2563eb;
    border-left: 3px solid #3b82f6;
}

.vehicle-actions[b-b3p0oibu6e] {
    display: flex;
    gap: 8px;
}

.action-btn[b-b3p0oibu6e] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-btn:hover[b-b3p0oibu6e] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.action-btn-primary[b-b3p0oibu6e] {
    background: #4caf50;
    color: white;
}

.action-btn-primary:hover[b-b3p0oibu6e] {
    background: #45a049;
}

.action-btn-secondary[b-b3p0oibu6e] {
    background: #f1f5f9;
    color: #64748b;
}

.action-btn-secondary:hover[b-b3p0oibu6e] {
    background: #e2e8f0;
}

/* List View */
.vehicles-list[b-b3p0oibu6e] {
    background: white;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    margin-bottom: 24px;
}

.list-header[b-b3p0oibu6e] {
    display: grid;
    grid-template-columns: 50px 2fr 1fr 1fr 1fr 1fr 150px 120px;
    gap: 16px;
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.list-row[b-b3p0oibu6e] {
    display: grid;
    grid-template-columns: 50px 2fr 1fr 1fr 1fr 1fr 150px 120px;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s;
    cursor: pointer;
    align-items: center;
}

.list-row:hover[b-b3p0oibu6e] {
    background: #f8fef9;
}

.list-row:last-child[b-b3p0oibu6e] {
    border-bottom: none;
}

.list-icon[b-b3p0oibu6e] {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}

.list-row:hover .list-icon[b-b3p0oibu6e] {
    background: #4caf50;
    color: white;
    transform: scale(1.1);
}

.list-vehicle-info[b-b3p0oibu6e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.list-model[b-b3p0oibu6e] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.list-reg[b-b3p0oibu6e] {
    font-size: 13px;
    color: #64748b;
}

.list-value[b-b3p0oibu6e] {
    font-size: 14px;
    color: #1e293b;
}

.list-actions[b-b3p0oibu6e] {
    display: flex;
    gap: 8px;
}

.list-action-btn[b-b3p0oibu6e] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.list-action-btn:hover[b-b3p0oibu6e] {
    border-color: #4caf50;
    color: #4caf50;
    transform: translateY(-1px);
}

/* Pagination */
.pagination[b-b3p0oibu6e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
}

.pagination-info[b-b3p0oibu6e] {
    font-size: 14px;
    color: #64748b;
}

.pagination-controls[b-b3p0oibu6e] {
    display: flex;
    gap: 8px;
}

.page-btn[b-b3p0oibu6e] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #64748b;
    min-width: 36px;
    text-align: center;
}

.page-btn:hover:not(:disabled)[b-b3p0oibu6e] {
    border-color: #4caf50;
    color: #4caf50;
    transform: translateY(-1px);
}

.page-btn.active[b-b3p0oibu6e] {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}

.page-btn:disabled[b-b3p0oibu6e] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty State */
.empty-state[b-b3p0oibu6e] {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.empty-state svg[b-b3p0oibu6e] {
    margin-bottom: 24px;
}

.empty-state h3[b-b3p0oibu6e] {
    color: #1e293b;
    font-size: 20px;
    margin-bottom: 8px;
}

.empty-state p[b-b3p0oibu6e] {
    color: #64748b;
    margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 1400px) {
    .stats-summary[b-b3p0oibu6e] {
        grid-template-columns: repeat(3, 1fr);
    }

    .vehicles-grid[b-b3p0oibu6e] {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .filters-grid[b-b3p0oibu6e] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container[b-b3p0oibu6e] {
        padding: 16px;
    }

    .stats-summary[b-b3p0oibu6e] {
        grid-template-columns: 1fr;
    }

    .filters-grid[b-b3p0oibu6e] {
        grid-template-columns: 1fr;
    }

    .vehicles-grid[b-b3p0oibu6e] {
        grid-template-columns: 1fr;
    }

    .page-header-top[b-b3p0oibu6e] {
        flex-direction: column;
        gap: 16px;
    }

    .list-header[b-b3p0oibu6e],
    .list-row[b-b3p0oibu6e] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .list-header[b-b3p0oibu6e] {
        display: none;
    }
}

/* Animations */
@keyframes fadeIn-b-b3p0oibu6e {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vehicle-card[b-b3p0oibu6e],
.list-row[b-b3p0oibu6e],
.stat-box[b-b3p0oibu6e] {
    animation: fadeIn-b-b3p0oibu6e 0.3s ease-out;
}
/* _content/InalcaAwarie/Pages/Flota/FlotaRaporty.razor.rz.scp.css */
/* ============================================
   FLOTA RAPORTY - LIGHT THEME STYLES
   ============================================ */

/* Reports Container */
.reports-container[b-ouh7a0blj7] {
    padding: 32px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header Banner */
.reports-header-banner[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #1a5c3a 0%, #0d3d24 100%);
    border-radius: 20px;
    padding: 32px 40px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.reports-header-banner[b-ouh7a0blj7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.reports-header-banner .banner-content[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.reports-header-banner .banner-icon[b-ouh7a0blj7] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.reports-header-banner .banner-text[b-ouh7a0blj7] {
    flex: 1;
}

.reports-header-banner .banner-title[b-ouh7a0blj7] {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.reports-header-banner .banner-subtitle[b-ouh7a0blj7] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin: 0;
}

.reports-header-banner .banner-actions[b-ouh7a0blj7] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.year-selector[b-ouh7a0blj7] {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.year-selector option[b-ouh7a0blj7] {
    background: #1a5c3a;
    color: white;
}

.btn-banner-outline[b-ouh7a0blj7] {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-banner-outline:hover[b-ouh7a0blj7] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-banner-primary[b-ouh7a0blj7] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-banner-primary:hover[b-ouh7a0blj7] {
    background: rgba(255, 255, 255, 0.3);
}

/* KPI Grid */
.kpi-grid[b-ouh7a0blj7] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card[b-ouh7a0blj7] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card[b-ouh7a0blj7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.kpi-card:hover[b-ouh7a0blj7] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.kpi-primary[b-ouh7a0blj7]::before { background: #4caf50; }
.kpi-success[b-ouh7a0blj7]::before { background: #22c55e; }
.kpi-warning[b-ouh7a0blj7]::before { background: #f59e0b; }
.kpi-info[b-ouh7a0blj7]::before { background: #3b82f6; }
.kpi-danger[b-ouh7a0blj7]::before { background: #ef4444; }

.kpi-icon[b-ouh7a0blj7] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-primary .kpi-icon[b-ouh7a0blj7] { background: #dcfce7; color: #16a34a; }
.kpi-success .kpi-icon[b-ouh7a0blj7] { background: #d1fae5; color: #059669; }
.kpi-warning .kpi-icon[b-ouh7a0blj7] { background: #fef3c7; color: #d97706; }
.kpi-info .kpi-icon[b-ouh7a0blj7] { background: #dbeafe; color: #2563eb; }
.kpi-danger .kpi-icon[b-ouh7a0blj7] { background: #fee2e2; color: #dc2626; }

/* KPI Secondary Grid */
.kpi-grid-secondary[b-ouh7a0blj7] {
    margin-top: -16px;
}

.kpi-secondary[b-ouh7a0blj7]::before { background: #6366f1; }
.kpi-secondary .kpi-icon[b-ouh7a0blj7] { background: #e0e7ff; color: #4f46e5; }

/* Compliance Status Cards */
.kpi-compliance-good[b-ouh7a0blj7]::before { background: #22c55e; }
.kpi-compliance-good .kpi-icon[b-ouh7a0blj7] { background: #dcfce7; color: #16a34a; }
.kpi-compliance-good[b-ouh7a0blj7] { border-color: #bbf7d0; }

.kpi-compliance-warning[b-ouh7a0blj7]::before { background: #f59e0b; }
.kpi-compliance-warning .kpi-icon[b-ouh7a0blj7] { background: #fef3c7; color: #d97706; }
.kpi-compliance-warning[b-ouh7a0blj7] { border-color: #fde68a; }

.kpi-compliance-danger[b-ouh7a0blj7]::before { background: #ef4444; }
.kpi-compliance-danger .kpi-icon[b-ouh7a0blj7] { background: #fee2e2; color: #dc2626; }
.kpi-compliance-danger[b-ouh7a0blj7] { border-color: #fecaca; }

/* Anomaly Warning Card */
.kpi-anomaly-warning[b-ouh7a0blj7]::before { background: #f97316; }
.kpi-anomaly-warning .kpi-icon[b-ouh7a0blj7] { background: #ffedd5; color: #ea580c; }
.kpi-anomaly-warning[b-ouh7a0blj7] { 
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

.kpi-content[b-ouh7a0blj7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kpi-label[b-ouh7a0blj7] {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.kpi-value[b-ouh7a0blj7] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

.kpi-sub[b-ouh7a0blj7] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.kpi-change[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.kpi-change.positive[b-ouh7a0blj7] {
    color: #16a34a;
}

.kpi-change.negative[b-ouh7a0blj7] {
    color: #dc2626;
}

/* Charts Grid */
.charts-grid[b-ouh7a0blj7] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.chart-card[b-ouh7a0blj7] {
    background: white;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.chart-card.chart-wide[b-ouh7a0blj7] {
    grid-column: span 1;
}

.chart-header[b-ouh7a0blj7] {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.chart-title[b-ouh7a0blj7] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-title svg[b-ouh7a0blj7] {
    color: #4caf50;
}

.chart-body[b-ouh7a0blj7] {
    padding: 24px;
}

/* Bar Chart */
.bar-chart[b-ouh7a0blj7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 200px;
    gap: 8px;
}

.bar-item[b-ouh7a0blj7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.bar-fill[b-ouh7a0blj7] {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: auto;
}

.bar-fill:hover[b-ouh7a0blj7] {
    background: linear-gradient(180deg, #66bb6a 0%, #388e3c 100%);
    transform: scaleY(1.02);
}

.bar-tooltip[b-ouh7a0blj7] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.bar-fill:hover .bar-tooltip[b-ouh7a0blj7] {
    opacity: 1;
    visibility: visible;
}

.bar-label[b-ouh7a0blj7] {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 8px;
    font-weight: 500;
}

/* Pie Chart */
.pie-chart-container[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.pie-legend[b-ouh7a0blj7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legend-item[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-color[b-ouh7a0blj7] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-label[b-ouh7a0blj7] {
    font-size: 0.85rem;
    color: #475569;
    flex: 1;
}

.legend-value[b-ouh7a0blj7] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.pie-visual[b-ouh7a0blj7] {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.pie-svg[b-ouh7a0blj7] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* Horizontal Bars */
.horizontal-bars[b-ouh7a0blj7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.h-bar-item[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h-bar-label[b-ouh7a0blj7] {
    width: 80px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

.h-bar-track[b-ouh7a0blj7] {
    flex: 1;
    height: 24px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
}

.h-bar-fill[b-ouh7a0blj7] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.fuel-diesel[b-ouh7a0blj7] { background: linear-gradient(90deg, #1e3a5f 0%, #2563eb 100%); }
.fuel-petrol[b-ouh7a0blj7] { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
.fuel-lpg[b-ouh7a0blj7] { background: linear-gradient(90deg, #059669 0%, #10b981 100%); }
.fuel-hybrid[b-ouh7a0blj7] { background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%); }
.fuel-electric[b-ouh7a0blj7] { background: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%); }
.fuel-other[b-ouh7a0blj7] { background: linear-gradient(90deg, #64748b 0%, #94a3b8 100%); }

.h-bar-value[b-ouh7a0blj7] {
    width: 40px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    text-align: right;
}

/* Tables Grid */
.tables-grid[b-ouh7a0blj7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.table-card[b-ouh7a0blj7] {
    background: white;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.table-header[b-ouh7a0blj7] {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-title[b-ouh7a0blj7] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-title svg[b-ouh7a0blj7] {
    color: #4caf50;
}

.table-badge[b-ouh7a0blj7] {
    padding: 4px 12px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.table-badge.success[b-ouh7a0blj7] {
    background: #dcfce7;
    color: #16a34a;
}

.table-badge.danger[b-ouh7a0blj7] {
    background: #fee2e2;
    color: #dc2626;
}

.table-body[b-ouh7a0blj7] {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* Ranking List */
.ranking-list[b-ouh7a0blj7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ranking-item[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.ranking-item:hover[b-ouh7a0blj7] {
    background: #f1f5f9;
    transform: translateX(4px);
}

.ranking-item.top-three[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.ranking-item.reliable[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.ranking-item.unreliable[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.ranking-position[b-ouh7a0blj7] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.rank-gold[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.rank-silver[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: white;
}

.rank-bronze[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: white;
}

.rank-default[b-ouh7a0blj7] {
    background: #e2e8f0;
    color: #475569;
}

.rank-success[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.rank-danger[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.ranking-info[b-ouh7a0blj7] {
    flex: 1;
    min-width: 0;
}

.ranking-name[b-ouh7a0blj7] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-reg[b-ouh7a0blj7] {
    font-size: 0.8rem;
    color: #64748b;
}

.ranking-stats[b-ouh7a0blj7] {
    text-align: right;
}

.ranking-cost[b-ouh7a0blj7] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    display: block;
}

.ranking-services[b-ouh7a0blj7] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Reliability Score */
.reliability-score[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-bar[b-ouh7a0blj7] {
    width: 60px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.score-fill[b-ouh7a0blj7] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.score-fill.danger[b-ouh7a0blj7] {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.score-value[b-ouh7a0blj7] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

/* Forecast Section */
.forecast-section[b-ouh7a0blj7] {
    margin-bottom: 32px;
}

.forecast-card[b-ouh7a0blj7] {
    background: white;
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.forecast-header[b-ouh7a0blj7] {
    padding: 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.forecast-title-section[b-ouh7a0blj7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forecast-title[b-ouh7a0blj7] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.forecast-title svg[b-ouh7a0blj7] {
    color: #4caf50;
}

.forecast-confidence[b-ouh7a0blj7] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.confidence-high[b-ouh7a0blj7] {
    background: #dcfce7;
    color: #16a34a;
}

.confidence-medium[b-ouh7a0blj7] {
    background: #fef3c7;
    color: #d97706;
}

.confidence-low[b-ouh7a0blj7] {
    background: #fee2e2;
    color: #dc2626;
}

.forecast-summary[b-ouh7a0blj7] {
    display: flex;
    gap: 32px;
    align-items: flex-end;
}

.forecast-big-number[b-ouh7a0blj7] {
    text-align: right;
}

.forecast-label[b-ouh7a0blj7] {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.forecast-value[b-ouh7a0blj7] {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.forecast-monthly[b-ouh7a0blj7] {
    text-align: right;
}

.forecast-value-small[b-ouh7a0blj7] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #475569;
}

.forecast-body[b-ouh7a0blj7] {
    padding: 32px;
}

.forecast-chart[b-ouh7a0blj7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 200px;
    gap: 12px;
    margin-bottom: 24px;
}

.forecast-bar-item[b-ouh7a0blj7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.forecast-range[b-ouh7a0blj7] {
    position: absolute;
    width: 100%;
    max-width: 30px;
    background: rgba(76, 175, 80, 0.15);
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.forecast-bar-fill[b-ouh7a0blj7] {
    width: 100%;
    max-width: 30px;
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
    border-radius: 6px 6px 0 0;
    position: relative;
    z-index: 1;
    margin-top: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.forecast-bar-fill:hover[b-ouh7a0blj7] {
    transform: scaleY(1.05);
}

.forecast-bar-label[b-ouh7a0blj7] {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 8px;
    font-weight: 500;
}

.forecast-legend[b-ouh7a0blj7] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 20px;
}

.forecast-legend .legend-item[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #64748b;
}

.legend-dot[b-ouh7a0blj7] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-dot.primary[b-ouh7a0blj7] {
    background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
}

.legend-dot.range[b-ouh7a0blj7] {
    background: rgba(76, 175, 80, 0.2);
}

.forecast-note[b-ouh7a0blj7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #eff6ff;
    border-radius: 12px;
    color: #1d4ed8;
    font-size: 0.9rem;
}

/* Footer */
.reports-footer[b-ouh7a0blj7] {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.reports-footer p[b-ouh7a0blj7] {
    margin: 4px 0;
}

/* No Data */
.no-data[b-ouh7a0blj7] {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-style: italic;
}

/* Demo Data Section */
.demo-data-section[b-ouh7a0blj7] {
    margin-bottom: 32px;
}

.demo-card[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px dashed #3b82f6;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    transition: all 0.3s ease;
}

.demo-card:hover[b-ouh7a0blj7] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.15);
}

.demo-card.warning[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #f59e0b;
}

.demo-icon[b-ouh7a0blj7] {
    width: 80px;
    height: 80px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

.demo-card.warning .demo-icon[b-ouh7a0blj7] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.demo-content[b-ouh7a0blj7] {
    flex: 1;
}

.demo-content h3[b-ouh7a0blj7] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.demo-content p[b-ouh7a0blj7] {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.btn-demo[b-ouh7a0blj7] {
    padding: 12px 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-demo:hover:not(:disabled)[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.btn-demo:disabled[b-ouh7a0blj7] {
    opacity: 0.7;
    cursor: not-allowed;
}

.demo-card.warning .btn-demo[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.demo-card.warning .btn-demo:hover:not(:disabled)[b-ouh7a0blj7] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3);
}

.spinner-small[b-ouh7a0blj7] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-ouh7a0blj7 0.8s linear infinite;
}

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

/* Responsive */
@media (max-width: 1400px) {
    .kpi-grid[b-ouh7a0blj7] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .charts-grid[b-ouh7a0blj7] {
        grid-template-columns: 1fr 1fr;
    }
    
    .chart-card.chart-wide[b-ouh7a0blj7] {
        grid-column: span 2;
    }
    
    .tables-grid[b-ouh7a0blj7] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    .reports-container[b-ouh7a0blj7] {
        padding: 20px;
    }
    
    .reports-header-banner .banner-content[b-ouh7a0blj7] {
        flex-wrap: wrap;
    }
    
    .reports-header-banner .banner-actions[b-ouh7a0blj7] {
        width: 100%;
        justify-content: flex-start;
        margin-top: 16px;
    }
    
    .kpi-grid[b-ouh7a0blj7] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .charts-grid[b-ouh7a0blj7] {
        grid-template-columns: 1fr;
    }
    
    .chart-card.chart-wide[b-ouh7a0blj7] {
        grid-column: span 1;
    }
    
    .tables-grid[b-ouh7a0blj7] {
        grid-template-columns: 1fr;
    }
    
    .forecast-header[b-ouh7a0blj7] {
        flex-direction: column;
        gap: 24px;
    }
    
    .forecast-summary[b-ouh7a0blj7] {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .kpi-grid[b-ouh7a0blj7] {
        grid-template-columns: 1fr;
    }
    
    .forecast-summary[b-ouh7a0blj7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .forecast-big-number[b-ouh7a0blj7],
    .forecast-monthly[b-ouh7a0blj7] {
        text-align: left;
    }
}

/* Animations */
@keyframes fadeInUp-b-ouh7a0blj7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-ouh7a0blj7],
.chart-card[b-ouh7a0blj7],
.table-card[b-ouh7a0blj7],
.forecast-card[b-ouh7a0blj7] {
    animation: fadeInUp-b-ouh7a0blj7 0.5s ease-out;
}

.kpi-card:nth-child(1)[b-ouh7a0blj7] { animation-delay: 0.1s; }
.kpi-card:nth-child(2)[b-ouh7a0blj7] { animation-delay: 0.15s; }
.kpi-card:nth-child(3)[b-ouh7a0blj7] { animation-delay: 0.2s; }
.kpi-card:nth-child(4)[b-ouh7a0blj7] { animation-delay: 0.25s; }
.kpi-card:nth-child(5)[b-ouh7a0blj7] { animation-delay: 0.3s; }
/* _content/InalcaAwarie/Pages/Flota/FlotaSerwis.razor.rz.scp.css */
/* Fleet Service Management Styles */
/* Bazuje na stylach FlotaDashboard.razor.css */

*[b-z9t3rog1p0] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fleet-container[b-z9t3rog1p0] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    min-height: 100vh;
}

/* Main Content */
.main-content[b-z9t3rog1p0] {
    margin-left: 240px;
    min-height: 100vh;
}

/* Top Bar */
.top-bar[b-z9t3rog1p0] {
    background: white;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.search-bar[b-z9t3rog1p0] {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.search-bar input[b-z9t3rog1p0] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.search-bar input:focus[b-z9t3rog1p0] {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
}

.search-icon[b-z9t3rog1p0] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.top-bar-actions[b-z9t3rog1p0] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.notification-btn[b-z9t3rog1p0],
.btn-back-modules[b-z9t3rog1p0] {
    position: relative;
    background: #f1f5f9;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #64748b;
}

.notification-btn:hover[b-z9t3rog1p0],
.btn-back-modules:hover[b-z9t3rog1p0] {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.notification-badge[b-z9t3rog1p0] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Wrapper */
.content-wrapper[b-z9t3rog1p0] {
    padding: 32px;
}

/* Page Header - zielony banner */
.page-header[b-z9t3rog1p0] {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(27, 94, 32, 0.3);
}

.page-header-content[b-z9t3rog1p0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title[b-z9t3rog1p0] {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page-subtitle[b-z9t3rog1p0] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.header-actions[b-z9t3rog1p0] {
    display: flex;
    gap: 12px;
}

/* KPI Grid */
.kpi-grid[b-z9t3rog1p0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card[b-z9t3rog1p0] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s;
    border: 1px solid #f1f5f9;
}

.kpi-card:hover[b-z9t3rog1p0] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.kpi-header[b-z9t3rog1p0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.kpi-label[b-z9t3rog1p0] {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-icon[b-z9t3rog1p0] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon.green[b-z9t3rog1p0] { background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); }
.kpi-icon.blue[b-z9t3rog1p0] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.kpi-icon.orange[b-z9t3rog1p0] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.kpi-icon.purple[b-z9t3rog1p0] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.kpi-icon.red[b-z9t3rog1p0] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.kpi-icon.teal[b-z9t3rog1p0] { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }

.kpi-value[b-z9t3rog1p0] {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.kpi-change[b-z9t3rog1p0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.kpi-change.positive[b-z9t3rog1p0] { color: #22c55e; }
.kpi-change.negative[b-z9t3rog1p0] { color: #ef4444; }
.kpi-change.neutral[b-z9t3rog1p0] { color: #64748b; }

/* Cards */
.card[b-z9t3rog1p0] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #f1f5f9;
    margin-bottom: 24px;
}

.card-header[b-z9t3rog1p0] {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-z9t3rog1p0] {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
}

.card-body[b-z9t3rog1p0] {
    padding: 24px;
}

/* Buttons */
.btn[b-z9t3rog1p0] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:hover[b-z9t3rog1p0] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-primary[b-z9t3rog1p0] {
    background: #4caf50;
    color: white;
}

.btn-primary:hover[b-z9t3rog1p0] {
    background: #45a049;
}

.btn-secondary[b-z9t3rog1p0] {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-z9t3rog1p0] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Tabs */
.tabs[b-z9t3rog1p0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tab[b-z9t3rog1p0] {
    padding: 12px 20px;
    background: none;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab:hover[b-z9t3rog1p0] {
    color: #4caf50;
    background: rgba(76,175,80,0.05);
}

.tab.active[b-z9t3rog1p0] {
    color: #4caf50;
    background: rgba(76,175,80,0.1);
    font-weight: 600;
}

.tab-badge[b-z9t3rog1p0] {
    background: #e2e8f0;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.tab.active .tab-badge[b-z9t3rog1p0] {
    background: #4caf50;
    color: white;
}

/* Service List */
.service-list[b-z9t3rog1p0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-item[b-z9t3rog1p0] {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    cursor: pointer;
}

.vehicle-item:hover[b-z9t3rog1p0] {
    border-color: #4caf50;
    background: #f8fef9;
    transform: translateX(4px);
}

.vehicle-info[b-z9t3rog1p0] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vehicle-icon[b-z9t3rog1p0] {
    width: 48px;
    height: 48px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}

.vehicle-item:hover .vehicle-icon[b-z9t3rog1p0] {
    background: #4caf50;
    color: white;
}

.vehicle-details h4[b-z9t3rog1p0] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.vehicle-meta[b-z9t3rog1p0] {
    font-size: 13px;
    color: #64748b;
}

.vehicle-status[b-z9t3rog1p0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-badge[b-z9t3rog1p0] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.available[b-z9t3rog1p0] { background: #dcfce7; color: #16a34a; }
.status-badge.in-use[b-z9t3rog1p0] { background: #dbeafe; color: #2563eb; }
.status-badge.service[b-z9t3rog1p0] { background: #fef3c7; color: #d97706; }
.status-badge.alert[b-z9t3rog1p0] { background: #fee2e2; color: #dc2626; }
.status-badge.reserved[b-z9t3rog1p0] { background: #f3e8ff; color: #9333ea; }

/* Content Grid */
.content-grid[b-z9t3rog1p0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Calendar */
.calendar-header[b-z9t3rog1p0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-title[b-z9t3rog1p0] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    text-transform: capitalize;
}

.calendar-nav[b-z9t3rog1p0] {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
    transition: all 0.2s;
}

.calendar-nav:hover[b-z9t3rog1p0] {
    background: #e2e8f0;
    color: #1e293b;
}

.calendar-grid[b-z9t3rog1p0] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day-header[b-z9t3rog1p0] {
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.calendar-day[b-z9t3rog1p0] {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.calendar-day:hover[b-z9t3rog1p0] {
    background: #f1f5f9;
}

.calendar-day.other-month[b-z9t3rog1p0] {
    color: #cbd5e1;
}

.calendar-day.today[b-z9t3rog1p0] {
    background: #4caf50;
    color: white;
    font-weight: 600;
}

.calendar-day.has-service[b-z9t3rog1p0] {
    background: rgba(76, 175, 80, 0.1);
    color: #1b5e20;
    font-weight: 500;
}

.service-dot[b-z9t3rog1p0] {
    position: absolute;
    bottom: 4px;
    background: #4caf50;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Upcoming List */
.upcoming-list[b-z9t3rog1p0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upcoming-item[b-z9t3rog1p0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
    transition: all 0.2s;
}

.upcoming-item:hover[b-z9t3rog1p0] {
    background: #f1f5f9;
}

.upcoming-date[b-z9t3rog1p0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.upcoming-day[b-z9t3rog1p0] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.upcoming-month[b-z9t3rog1p0] {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
}

.upcoming-info[b-z9t3rog1p0] {
    flex: 1;
}

.upcoming-vehicle[b-z9t3rog1p0] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.upcoming-type[b-z9t3rog1p0] {
    font-size: 13px;
    color: #64748b;
}

.upcoming-badge[b-z9t3rog1p0] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.upcoming-badge.available[b-z9t3rog1p0] { background: #dcfce7; color: #16a34a; }
.upcoming-badge.service[b-z9t3rog1p0] { background: #fef3c7; color: #d97706; }
.upcoming-badge.alert[b-z9t3rog1p0] { background: #fee2e2; color: #dc2626; }

.no-upcoming[b-z9t3rog1p0] {
    text-align: center;
    color: #94a3b8;
    padding: 24px;
}

/* Stats Summary */
.stats-summary[b-z9t3rog1p0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.stat-item[b-z9t3rog1p0] {
    text-align: center;
}

.stat-label[b-z9t3rog1p0] {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.stat-value[b-z9t3rog1p0] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

/* Empty State */
.empty-state[b-z9t3rog1p0] {
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
}

.empty-state svg[b-z9t3rog1p0] {
    margin-bottom: 16px;
}

.empty-state h3[b-z9t3rog1p0] {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.empty-state p[b-z9t3rog1p0] {
    margin-bottom: 20px;
}

/* Error Card */
.error-card[b-z9t3rog1p0] {
    background: white;
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    border: 1px solid #fee2e2;
}

.error-icon[b-z9t3rog1p0] {
    margin-bottom: 16px;
}

.error-card h3[b-z9t3rog1p0] {
    font-size: 20px;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 12px;
}

.error-card p[b-z9t3rog1p0] {
    color: #64748b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.error-instructions[b-z9t3rog1p0] {
    background: #fef2f2;
    padding: 16px;
    border-radius: 8px;
    font-size: 13px;
    color: #991b1b;
    text-align: left;
    margin-bottom: 20px;
}

.error-instructions code[b-z9t3rog1p0] {
    background: #fee2e2;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Loading State */
.loading-spinner[b-z9t3rog1p0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px;
    color: #64748b;
}

.spinner[b-z9t3rog1p0] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin-b-z9t3rog1p0 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* Modal */
.modal-overlay[b-z9t3rog1p0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-z9t3rog1p0] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header[b-z9t3rog1p0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.modal-header h2[b-z9t3rog1p0] {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
}

.modal-close[b-z9t3rog1p0] {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover[b-z9t3rog1p0] {
    background: #e2e8f0;
    color: #1e293b;
}

.modal-body[b-z9t3rog1p0] {
    padding: 24px;
}

.modal-footer[b-z9t3rog1p0] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
    margin-top: 20px;
}

/* Form Styles */
.form-group[b-z9t3rog1p0] {
    margin-bottom: 20px;
}

.form-group label[b-z9t3rog1p0] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.form-control[b-z9t3rog1p0] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.form-control:focus[b-z9t3rog1p0] {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-row[b-z9t3rog1p0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
    .content-grid[b-z9t3rog1p0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content[b-z9t3rog1p0] {
        margin-left: 0;
    }

    .content-wrapper[b-z9t3rog1p0] {
        padding: 16px;
    }

    .top-bar[b-z9t3rog1p0] {
        padding: 12px 16px;
    }

    .page-header-content[b-z9t3rog1p0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-grid[b-z9t3rog1p0] {
        grid-template-columns: 1fr;
    }

    .form-row[b-z9t3rog1p0] {
        grid-template-columns: 1fr;
    }

    .header-actions[b-z9t3rog1p0] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Animation */
@keyframes fadeIn-b-z9t3rog1p0 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-card[b-z9t3rog1p0],
.card[b-z9t3rog1p0],
.vehicle-item[b-z9t3rog1p0] {
    animation: fadeIn-b-z9t3rog1p0 0.3s ease-out;
}
/* _content/InalcaAwarie/Pages/Flota/FlotaSzczegolyPojazdu.razor.rz.scp.css */
/* =====================================================
   VEHICLE DETAILS PAGE STYLES
   Profesjonalny widok szczeg��w pojazdu
   ===================================================== */

[b-h52kqrpu6z] .vehicle-details-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    min-height: 100vh;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Loading & Error States */
[b-h52kqrpu6z] .loading-container,
[b-h52kqrpu6z] .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

[b-h52kqrpu6z] .loading-container .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #1b5e20;
    border-radius: 50%;
    animation: vd-spin-b-h52kqrpu6z 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes vd-spin-b-h52kqrpu6z {
    to { transform: rotate(360deg); }
}

[b-h52kqrpu6z] .error-container .error-icon {
    margin-bottom: 24px;
}

[b-h52kqrpu6z] .error-container h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

[b-h52kqrpu6z] .error-container p {
    color: #64748b;
    margin-bottom: 24px;
}

/* Header Section */
[b-h52kqrpu6z] .page-header {
    margin-bottom: 32px;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

[b-h52kqrpu6z] .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

[b-h52kqrpu6z] .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

[b-h52kqrpu6z] .btn-back:hover {
    border-color: #1b5e20;
    color: #1b5e20;
    transform: translateX(-4px);
}

[b-h52kqrpu6z] .header-actions {
    display: flex;
    gap: 12px;
}

[b-h52kqrpu6z] .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

[b-h52kqrpu6z] .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

[b-h52kqrpu6z] .btn-outline {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

[b-h52kqrpu6z] .btn-outline:hover {
    border-color: #1b5e20;
    color: #1b5e20;
}

[b-h52kqrpu6z] .btn-primary {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    color: white;
}

[b-h52kqrpu6z] .btn-primary:hover {
    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
}

/* Vehicle Hero Card */
[b-h52kqrpu6z] .vehicle-hero {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    color: white;
    box-shadow: 0 8px 32px rgba(27, 94, 32, 0.3);
}

[b-h52kqrpu6z] .hero-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-h52kqrpu6z] .hero-info {
    flex: 1;
    min-width: 0;
}

[b-h52kqrpu6z] .hero-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[b-h52kqrpu6z] .hero-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 12px;
    font-weight: 500;
    color: white !important;
}

[b-h52kqrpu6z] .hero-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

[b-h52kqrpu6z] .status-badge,
[b-h52kqrpu6z] .ownership-badge,
[b-h52kqrpu6z] .year-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-h52kqrpu6z] .status-badge.available { background: rgba(34, 197, 94, 0.25); color: #86efac; }
[b-h52kqrpu6z] .status-badge.in-use { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[b-h52kqrpu6z] .status-badge.service { background: rgba(245, 158, 11, 0.25); color: #fcd34d; }
[b-h52kqrpu6z] .status-badge.reserved { background: rgba(168, 85, 247, 0.25); color: #c4b5fd; }

[b-h52kqrpu6z] .ownership-badge {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

[b-h52kqrpu6z] .year-badge {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

[b-h52kqrpu6z] .hero-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

[b-h52kqrpu6z] .hero-stat {
    text-align: center;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-width: 100px;
}

[b-h52kqrpu6z] .hero-stat .stat-value {
    font-size: 22px;
    font-weight: 800;
    color: white !important;
}

[b-h52kqrpu6z] .hero-stat .stat-label {
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white !important;
    margin-top: 2px;
}

/* Content Grid */
[b-h52kqrpu6z] .content-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

[b-h52kqrpu6z] .main-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

[b-h52kqrpu6z] .side-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Info Cards */
[b-h52kqrpu6z] .info-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

[b-h52kqrpu6z] .info-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

[b-h52kqrpu6z] .info-card.has-alerts {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

[b-h52kqrpu6z] .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}

[b-h52kqrpu6z] .card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

[b-h52kqrpu6z] .card-icon.tech { background: linear-gradient(135deg, #3b82f6, #2563eb); }
[b-h52kqrpu6z] .card-icon.tires { background: linear-gradient(135deg, #64748b, #475569); }
[b-h52kqrpu6z] .card-icon.notes { background: linear-gradient(135deg, #f59e0b, #d97706); }
[b-h52kqrpu6z] .card-icon.user { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
[b-h52kqrpu6z] .card-icon.dates { background: linear-gradient(135deg, #ef4444, #dc2626); }
[b-h52kqrpu6z] .card-icon.finance { background: linear-gradient(135deg, #10b981, #059669); }
[b-h52kqrpu6z] .card-icon.limits { background: linear-gradient(135deg, #06b6d4, #0891b2); }

[b-h52kqrpu6z] .card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

[b-h52kqrpu6z] .card-body {
    padding: 20px;
}

/* Info Grid - nowy uk�ad */
[b-h52kqrpu6z] .info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

[b-h52kqrpu6z] .info-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

[b-h52kqrpu6z] .info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

[b-h52kqrpu6z] .info-icon {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

[b-h52kqrpu6z] .info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-h52kqrpu6z] .info-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

[b-h52kqrpu6z] .info-value {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
}

[b-h52kqrpu6z] .info-value.highlight {
    color: #1b5e20;
    font-weight: 700;
}

[b-h52kqrpu6z] .info-value.mono {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* User Assignment */
[b-h52kqrpu6z] .user-assignment {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
}

[b-h52kqrpu6z] .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

[b-h52kqrpu6z] .user-info {
    flex: 1;
    min-width: 0;
}

[b-h52kqrpu6z] .user-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

[b-h52kqrpu6z] .user-dept {
    font-size: 12px;
    color: #64748b;
}

/* Deadline List */
[b-h52kqrpu6z] .deadline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-h52kqrpu6z] .deadline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
}

[b-h52kqrpu6z] .deadline-item.ok {
    background: #f0fdf4;
}

[b-h52kqrpu6z] .deadline-item.ok .deadline-icon {
    color: #22c55e;
}

[b-h52kqrpu6z] .deadline-item.alert {
    background: #fef2f2;
}

[b-h52kqrpu6z] .deadline-item.alert .deadline-icon {
    color: #ef4444;
}

[b-h52kqrpu6z] .deadline-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-h52kqrpu6z] .deadline-info {
    flex: 1;
    min-width: 0;
}

[b-h52kqrpu6z] .deadline-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    display: block;
}

[b-h52kqrpu6z] .deadline-date {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: block;
}

[b-h52kqrpu6z] .deadline-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

[b-h52kqrpu6z] .deadline-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

[b-h52kqrpu6z] .deadline-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

/* Finance List */
[b-h52kqrpu6z] .finance-list {
    display: flex;
    flex-direction: column;
}

[b-h52kqrpu6z] .finance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

[b-h52kqrpu6z] .finance-item:last-child {
    border-bottom: none;
}

[b-h52kqrpu6z] .finance-label {
    font-size: 12px;
    color: #64748b;
}

[b-h52kqrpu6z] .finance-value {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

[b-h52kqrpu6z] .finance-value.highlight {
    color: #1b5e20;
    font-size: 14px;
    font-weight: 700;
}

[b-h52kqrpu6z] .finance-value.mono {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
}

/* KM Limit Display */
[b-h52kqrpu6z] .km-limit-display {
    text-align: center;
}

[b-h52kqrpu6z] .km-current {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 2px;
}

[b-h52kqrpu6z] .km-limit {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

[b-h52kqrpu6z] .km-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

[b-h52kqrpu6z] .km-bar {
    height: 100%;
    background: linear-gradient(90deg, #1b5e20, #4caf50);
    border-radius: 3px;
}

/* Notes */
[b-h52kqrpu6z] .notes-text {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    padding: 14px;
    background: #fffbeb;
    border-radius: 8px;
    border-left: 3px solid #f59e0b;
}

/* Responsive */
@media (max-width: 1200px) {
    [b-h52kqrpu6z] .content-grid {
        grid-template-columns: 1fr;
    }

    [b-h52kqrpu6z] .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    [b-h52kqrpu6z] .vehicle-details-page {
        padding: 16px;
    }

    [b-h52kqrpu6z] .vehicle-hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }

    [b-h52kqrpu6z] .hero-icon {
        width: 64px;
        height: 64px;
    }

    [b-h52kqrpu6z] .hero-stats {
        width: 100%;
        justify-content: center;
    }

    [b-h52kqrpu6z] .header-top {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    [b-h52kqrpu6z] .header-actions {
        justify-content: center;
    }

    [b-h52kqrpu6z] .info-grid,
    [b-h52kqrpu6z] .info-grid.cols-2 {
        grid-template-columns: 1fr;
    }

    [b-h52kqrpu6z] .hero-title {
        font-size: 22px;
    }

    [b-h52kqrpu6z] .hero-stat {
        padding: 10px 16px;
        min-width: 80px;
    }

    [b-h52kqrpu6z] .hero-stat .stat-value {
        font-size: 18px;
    }
}

/* Print Styles */
@media print {
    [b-h52kqrpu6z] .vehicle-details-page {
        background: white;
        padding: 0;
    }

    [b-h52kqrpu6z] .btn-back,
    [b-h52kqrpu6z] .header-actions {
        display: none !important;
    }

    [b-h52kqrpu6z] .info-card {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* =====================================================
   DARK THEME STYLES
   ===================================================== */

/* G��WNY KONTENER - pe�ne pokrycie - WA�NE: u�yj position fixed jako fallback */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme {
    background: linear-gradient(135deg, #0a0a12 0%, #0f0f1a 30%, #1a1a2e 60%, #16213e 100%) !important;
    min-height: 100vh;
    margin: -24px !important;
    padding: 24px !important;
    width: calc(100% + 48px) !important;
    box-sizing: border-box !important;
    position: relative;
}

/* Pseudo-element jako t�o na ca�� stron� */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a12 0%, #0f0f1a 30%, #1a1a2e 60%, #16213e 100%);
    z-index: -1;
}

/* Loading & Error - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .loading-container,
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .error-container {
    color: rgba(255, 255, 255, 0.7);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .loading-container .spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #4ade80;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .error-container h2 {
    color: #ffffff;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .error-container p {
    color: rgba(255, 255, 255, 0.6);
}

/* Buttons - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .btn-back {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4ade80;
    color: #4ade80;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .btn-outline {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .btn-primary {
    background: linear-gradient(135deg, #1a5c3a 0%, #0d3d24 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(26, 92, 58, 0.3);
}

/* Hero Card - Dark (zachowaj zielony) */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .vehicle-hero {
    background: linear-gradient(135deg, #1a5c3a 0%, #0d3d24 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Info Cards - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-card.has-alerts {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(239, 68, 68, 0.08) 100%);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .card-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .card-header h3 {
    color: #ffffff;
}

/* Info Items - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-icon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-label {
    color: rgba(255, 255, 255, 0.5);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-value {
    color: #ffffff;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-value.highlight {
    color: #4ade80;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .info-value.mono {
    color: rgba(255, 255, 255, 0.9);
}

/* User Assignment - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .user-assignment {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .user-name {
    color: #ffffff;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .user-dept {
    color: rgba(255, 255, 255, 0.5);
}

/* Deadline Items - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-item.ok {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-item.ok .deadline-icon {
    color: #4ade80;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-item.alert {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-item.alert .deadline-icon {
    color: #f87171;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-label {
    color: rgba(255, 255, 255, 0.5);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-date {
    color: #ffffff;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-badge.danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .deadline-badge.warning {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* Finance List - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .finance-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .finance-label {
    color: rgba(255, 255, 255, 0.5);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .finance-value {
    color: #ffffff;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .finance-value.highlight {
    color: #4ade80;
}

/* KM Limit - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .km-current {
    color: #ffffff;
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .km-limit {
    color: rgba(255, 255, 255, 0.5);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .km-progress {
    background: rgba(255, 255, 255, 0.1);
}

[b-h52kqrpu6z] .vehicle-details-page.dark-theme .km-bar {
    background: linear-gradient(90deg, #4ade80, #22c55e);
}

/* Notes - Dark */
[b-h52kqrpu6z] .vehicle-details-page.dark-theme .notes-text {
    background: rgba(251, 191, 36, 0.1);
    border-left-color: #fbbf24;
    color: rgba(255, 255, 255, 0.8);
}