/* =========================================================
   ALGOCOLLECT - PREMIUM HYBRID DESIGN SYSTEM (Sprint 6)
   Premium SaaS aesthetic: Light Mode default, Obsidian Dark Mode.
   Harmonious context-specific primary colors across light/dark.
   Outfit typography, soft-SaaS shapes & subtle micro-animations.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* Domyślny motyw (Light Mode - Biznesowy Premium) */
html {
    /* 1. Tło Bazowe (Ciepły Szary Slate) */
    --lumo-base-color: #F8F9FA;
    
    /* 2. Tło Komponentów i Kart (Czysta Biel) */
    --lumo-contrast-5pct: #F3F4F6;
    --lumo-contrast-10pct: #E5E7EB;
    
    /* 3. Główny Akcent (Navy Blue domyślnie dla Agency) */
    --lumo-primary-color: #1E3A8A;
    --lumo-primary-text-color: #1E3A8A;
    --lumo-primary-color-50pct: rgba(30, 58, 138, 0.5);
    --lumo-primary-color-10pct: rgba(30, 58, 138, 0.1);
    --lumo-primary-contrast-color: #FFFFFF;
    
    /* 4. Typografia (Soft Premium UI) */
    --lumo-font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --lumo-body-text-color: #0F172A;       /* Bardzo ciemny grafit */
    --lumo-secondary-text-color: #4B5563;  /* Slate Gray */
    --lumo-header-text-color: #0F172A;
    
    /* 5. Kontrasty i Paginacja */
    --lumo-contrast-20pct: rgba(15, 23, 42, 0.12);
    --lumo-contrast-30pct: rgba(15, 23, 42, 0.22);
    --lumo-contrast: #0F172A;

    /* 6. Zaokrąglenia i Kształty (Soft SaaS Look) */
    --lumo-border-radius-s: 4px;
    --lumo-border-radius-m: 8px;
    --lumo-border-radius-l: 12px;
    
    /* 7. Karty KPI i Komponenty */
    --app-card-background: #FFFFFF;
    --app-card-border: 1px solid #E5E7EB;
    --app-card-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
    --app-card-shadow-hover: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

    /* 8. Poświaty Lumo */
    --lumo-box-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --lumo-box-shadow-s: 0 2px 4px rgba(0,0,0,0.05);
    --lumo-box-shadow-m: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --lumo-box-shadow-l: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.03);
    
    /* 9. Zmienne Akcji */
    --lumo-success-color: #16A34A; /* Biznesowa zieleń */
}

/* Nadpisywanie dla Trybu Ciemnego (Obsidian Dark Mode) */
html[theme~="dark"] {
    /* 1. Tło Bazowe Obsidian */
    --lumo-base-color: #0F1114;
    
    /* 2. Tło Komponentów i Kart */
    --lumo-contrast-5pct: #16191E;
    --lumo-contrast-10pct: #21252C;
    
    /* 3. Główny Akcent */
    --lumo-primary-color: #00F2FF; /* Neon Cyan domyślnie dla Agency */
    --lumo-primary-text-color: #00F2FF;
    --lumo-primary-color-50pct: rgba(0, 242, 255, 0.5);
    --lumo-primary-color-10pct: rgba(0, 242, 255, 0.1);
    --lumo-primary-contrast-color: #0F1114;
    
    /* 4. Typografia */
    --lumo-body-text-color: #F3F4F6;       /* Jasnoszary */
    --lumo-secondary-text-color: #9CA3AF;  /* Muted Gray */
    --lumo-header-text-color: #F3F4F6;
    
    /* 5. Kontrasty */
    --lumo-contrast-20pct: rgba(243, 244, 246, 0.15);
    --lumo-contrast-30pct: rgba(243, 244, 246, 0.25);
    --lumo-contrast: #F3F4F6;

    /* 6. Karty KPI i Komponenty */
    --app-card-background: #16191E;
    --app-card-border: 1px solid #272A30;
    --app-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    --app-card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.6);

    /* 7. Poświaty */
    --lumo-box-shadow-m: 0 4px 15px rgba(0, 0, 0, 0.5);
    --lumo-box-shadow-l: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* === KLASY DLA DYNAMICZNYCH KONTEKSTÓW WIZUALNYCH (3 Aplikacje) === */

/* --- Tryb Jasny --- */
html.context-admin {
    --lumo-primary-color: #6D28D9; /* Plum Purple */
    --lumo-primary-text-color: #6D28D9;
    --lumo-primary-color-50pct: rgba(109, 40, 217, 0.5);
    --lumo-primary-color-10pct: rgba(109, 40, 217, 0.1);
    --lumo-primary-contrast-color: #FFFFFF;
}

html.context-agency {
    --lumo-primary-color: #1E3A8A; /* Navy Blue */
    --lumo-primary-text-color: #1E3A8A;
    --lumo-primary-color-50pct: rgba(30, 58, 138, 0.5);
    --lumo-primary-color-10pct: rgba(30, 58, 138, 0.1);
    --lumo-primary-contrast-color: #FFFFFF;
}

html.context-client {
    --lumo-primary-color: #0F766E; /* Deep Teal */
    --lumo-primary-text-color: #0F766E;
    --lumo-primary-color-50pct: rgba(15, 118, 110, 0.5);
    --lumo-primary-color-10pct: rgba(15, 118, 110, 0.1);
    --lumo-primary-contrast-color: #FFFFFF;
}

/* --- Tryb Ciemny --- */
html[theme~="dark"].context-admin {
    --lumo-primary-color: #8A2BE2; /* Deep Purple */
    --lumo-primary-text-color: #8A2BE2;
    --lumo-primary-color-50pct: rgba(138, 43, 226, 0.5);
    --lumo-primary-color-10pct: rgba(138, 43, 226, 0.1);
    --lumo-primary-contrast-color: #FFFFFF;
}

html[theme~="dark"].context-agency {
    --lumo-primary-color: #00F2FF; /* Neon Cyan */
    --lumo-primary-text-color: #00F2FF;
    --lumo-primary-color-50pct: rgba(0, 242, 255, 0.5);
    --lumo-primary-color-10pct: rgba(0, 242, 255, 0.1);
    --lumo-primary-contrast-color: #0F1114;
}

html[theme~="dark"].context-client {
    --lumo-primary-color: #00A3AD; /* Cyber Teal */
    --lumo-primary-text-color: #00A3AD;
    --lumo-primary-color-50pct: rgba(0, 163, 173, 0.5);
    --lumo-primary-color-10pct: rgba(0, 163, 173, 0.1);
    --lumo-primary-contrast-color: #FFFFFF;
}


/* === NAWIGACJA BOCZNA (SideNav Drawer) === */
[slot="drawer"] {
    background-color: var(--lumo-contrast-5pct) !important;
    border: var(--app-card-border) !important;
    border-radius: var(--lumo-border-radius-l) !important;
    margin: 16px !important;
    height: calc(100vh - 32px) !important;
    box-shadow: var(--lumo-box-shadow-m) !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[slot="drawer"]:hover {
    border-color: var(--lumo-primary-color) !important;
    box-shadow: var(--lumo-box-shadow-l) !important;
}

vaadin-side-nav-item::part(link) {
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, transform 0.2s ease;
    margin: 6px 10px;
    border-radius: var(--lumo-border-radius-m) !important;
}

vaadin-side-nav-item::part(link):hover {
    transform: translateX(3px);
}

vaadin-side-nav-item[active]::part(link) {
    background: linear-gradient(90deg, var(--lumo-primary-color-10pct) 0%, transparent 100%) !important;
    border-left: 3px solid var(--lumo-primary-color) !important;
    border-right: none !important;
    box-shadow: 0 0 12px var(--lumo-primary-color-10pct) !important;
    color: var(--lumo-primary-text-color) !important;
    font-weight: 600;
}


/* === KAFELKI KPI (Dashboard Cards) === */
.raw-card {
    box-sizing: border-box !important;
    background-color: var(--app-card-background) !important;
    border: var(--app-card-border) !important;
    border-radius: var(--lumo-border-radius-l) !important;
    padding: var(--lumo-space-l) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: var(--app-card-shadow) !important;
}

.raw-card:hover {
    border-color: var(--lumo-primary-color) !important;
    box-shadow: var(--app-card-shadow-hover) !important;
    transform: translateY(-3px);
}

.raw-card-value {
    font-family: 'JetBrains Mono', 'Consolas', monospace !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--lumo-primary-color) !important;
    text-shadow: 0 0 10px var(--lumo-primary-color-10pct);
    transition: color 0.3s ease;
}

.raw-card-label {
    color: var(--lumo-secondary-text-color) !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
}


/* === REJESTR DANYCH I TABELE (Vaadin Grid) === */
vaadin-grid.raw-grid {
    border: var(--app-card-border) !important;
    border-radius: var(--lumo-border-radius-m) !important;
    background-color: transparent !important;
}

vaadin-grid::part(header-cell) {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--lumo-primary-color) !important;
    border-bottom: 2px solid var(--lumo-primary-color-50pct) !important;
    background-color: var(--lumo-contrast-5pct) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em !important;
}

vaadin-grid::part(body-cell) {
    background-color: transparent !important;
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid var(--lumo-contrast-10pct) !important;
}

vaadin-grid::part(row):hover [part~="body-cell"] {
    background-color: var(--lumo-contrast-5pct) !important;
}

.money-cell {
    font-family: 'JetBrains Mono', 'Consolas', monospace !important;
    text-align: right !important;
    color: var(--lumo-primary-color) !important;
    font-weight: 600 !important;
}

.payment-failed-row [part~="body-cell"] {
    border-left: 4px solid var(--lumo-primary-color) !important;
    background-color: var(--lumo-primary-color-10pct) !important;
}


/* === PRZYCISKI (Buttons) === */
vaadin-button {
    font-weight: 600 !important;
    border-radius: var(--lumo-border-radius-m) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Przycisk Główny (Primary CTA): diagonalny gradient primary color */
vaadin-button[theme~="primary"] {
    background: linear-gradient(135deg, var(--lumo-primary-color) 0%, var(--lumo-primary-color-50pct) 100%) !important;
    color: var(--lumo-primary-contrast-color, #FFFFFF) !important;
    font-weight: bold !important;
    border: none !important;
    box-shadow: 0 4px 12px var(--lumo-primary-color-10pct) !important;
}

vaadin-button[theme~="primary"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--lumo-primary-color-50pct) !important;
}

vaadin-button[theme~="primary"]:active {
    transform: translateY(0) !important;
}

/* Przyciski Outline / Ghost */
vaadin-button[theme~="tertiary"] {
    border: 1px solid var(--lumo-contrast-20pct) !important;
    background-color: transparent !important;
    color: var(--lumo-primary-text-color) !important;
}

vaadin-button[theme~="tertiary"]:hover {
    border-color: var(--lumo-primary-color) !important;
    background-color: var(--lumo-primary-color-10pct) !important;
    color: var(--lumo-primary-text-color) !important;
    transform: translateY(-1px) !important;
}

/* Przycisk Sukcesu (Zatwierdzanie/Księgowanie) */
vaadin-button[theme~="success"] {
    background-color: var(--lumo-success-color) !important;
    color: #FFFFFF !important;
    border: none !important;
}

vaadin-button[theme~="success"]:hover {
    background-color: #15803D !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2) !important;
}

/* Przycisk Krytyczny / Destrukcyjny */
vaadin-button[theme~="error"] {
    background-color: rgba(185, 28, 28, 0.08) !important;
    border: 1px solid #B91C1C !important;
    color: #B91C1C !important;
}

vaadin-button[theme~="error"]:hover {
    background-color: rgba(185, 28, 28, 0.2) !important;
    box-shadow: 0 0 12px rgba(185, 28, 28, 0.25) !important;
    transform: translateY(-1px) !important;
}


/* === ODZNAKI STATUSÓW (Badges) === */
.status-badge {
    padding: 2px 8px !important;
    border-radius: var(--lumo-border-radius-s) !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    display: inline-block !important;
}

/* --- Badges: Light Mode --- */
.status-paid, .status-active {
    background-color: #DCFCE7 !important;
    color: #15803D !important;
    border-color: #BBF7D0 !important;
}
.status-part_paid {
    background-color: #CCFBF1 !important;
    color: #0F766E !important;
    border-color: #99F6E4 !important;
}
.status-field, .status-pending {
    background-color: #FEF3C7 !important;
    color: #B45309 !important;
    border-color: #FDE68A !important;
}
.status-closed_unrecoverable, .status-unassigned {
    background-color: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #FCA5A5 !important;
}
.status-registered, .status-amicable_office, .status-amicable {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
    border-color: #BAE6FD !important;
}
.status-legal_active, .status-ecourt, .status-court, .status-enforcement, .status-legal_pending {
    background-color: #F3E8FF !important;
    color: #6B21A8 !important;
    border-color: #E9D5FF !important;
}

/* --- Badges: Dark Mode --- */
html[theme~="dark"] .status-paid, html[theme~="dark"] .status-active {
    background-color: rgba(183, 190, 160, 0.15) !important;
    color: #B7BEA0 !important;
    border-color: rgba(183, 190, 160, 0.3) !important;
}
html[theme~="dark"] .status-part_paid {
    background-color: rgba(45, 212, 191, 0.15) !important;
    color: #2DD4BF !important;
    border-color: rgba(45, 212, 191, 0.3) !important;
}
html[theme~="dark"] .status-field, html[theme~="dark"] .status-pending {
    background-color: rgba(232, 209, 195, 0.15) !important;
    color: #E8D1C3 !important;
    border-color: rgba(232, 209, 195, 0.3) !important;
}
html[theme~="dark"] .status-closed_unrecoverable, html[theme~="dark"] .status-unassigned {
    background-color: rgba(177, 139, 126, 0.15) !important;
    color: #B18B7E !important;
    border-color: rgba(177, 139, 126, 0.3) !important;
}
html[theme~="dark"] .status-registered, html[theme~="dark"] .status-amicable_office, html[theme~="dark"] .status-amicable {
    background-color: rgba(171, 181, 182, 0.15) !important;
    color: #ABB5B6 !important;
    border-color: rgba(171, 181, 182, 0.3) !important;
}
html[theme~="dark"] .status-legal_active, html[theme~="dark"] .status-ecourt, html[theme~="dark"] .status-court, html[theme~="dark"] .status-enforcement, html[theme~="dark"] .status-legal_pending {
    background-color: rgba(177, 139, 126, 0.15) !important;
    color: #E8D1C3 !important;
    border-color: rgba(177, 139, 126, 0.3) !important;
}


/* === KONTROLKI PAGINACJI === */
.pagination-container {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1rem !important;
}

.page-btn {
    border: 1px solid var(--lumo-contrast-20pct) !important;
    background-color: var(--lumo-contrast-5pct) !important;
    color: var(--lumo-body-text-color) !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--lumo-border-radius-m) !important;
    cursor: pointer !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
}

.page-btn:hover {
    border-color: var(--lumo-primary-color) !important;
    background-color: var(--lumo-contrast-10pct) !important;
}

.page-btn.active {
    background-color: var(--lumo-primary-color) !important;
    color: var(--lumo-primary-contrast-color) !important;
    border-color: var(--lumo-primary-color) !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px var(--lumo-primary-color-50pct) !important;
}


/* === POLA FORMULARZY I INPUTY === */
vaadin-text-field::part(input-field), vaadin-text-area::part(input-field), vaadin-select::part(input-field), vaadin-combo-box::part(input-field), vaadin-date-picker::part(input-field), vaadin-number-field::part(input-field), vaadin-password-field::part(input-field), vaadin-big-decimal-field::part(input-field) {
    border: 1px solid var(--lumo-contrast-20pct) !important;
    background-color: var(--lumo-contrast-5pct) !important;
    color: var(--lumo-body-text-color) !important;
    border-radius: var(--lumo-border-radius-m) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

vaadin-text-field[focused]::part(input-field), vaadin-text-area[focused]::part(input-field), vaadin-select[focused]::part(input-field), vaadin-combo-box[focused]::part(input-field), vaadin-date-picker[focused]::part(input-field), vaadin-number-field[focused]::part(input-field), vaadin-password-field[focused]::part(input-field), vaadin-big-decimal-field[focused]::part(input-field) {
    border-color: var(--lumo-primary-color) !important;
    box-shadow: 0 0 8px var(--lumo-primary-color-50pct) !important;
}


/* === OKNA DIALOGOWE (Vaadin Dialog Overlays) === */
vaadin-dialog-overlay::part(overlay) {
    background-color: var(--lumo-base-color) !important;
    border: var(--app-card-border) !important;
    box-shadow: var(--lumo-box-shadow-l) !important;
    border-radius: var(--lumo-border-radius-l) !important;
}


/* === NAGŁÓWKI WIDOKÓW (View headers & layouts) === */
.view-container {
    padding: var(--lumo-space-l) !important;
    background-color: transparent !important;
}

.view-header {
    color: var(--lumo-body-text-color) !important;
    margin: 0 0 var(--lumo-space-l) 0 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}


/* === KLASY DLA NAGŁÓWKA MAIN LAYOUT === */
.app-logo {
    font-weight: 800 !important;
    font-size: var(--lumo-font-size-l) !important;
    margin: 0 !important;
    transition: color 0.3s ease !important;
}

.logo-admin, .logo-client, .logo-agency {
    color: var(--lumo-primary-color) !important;
}

.logout-btn {
    margin-left: auto !important;
}

.context-info-bar {
    margin-left: 1.5rem !important;
    align-items: center !important;
}

.context-label {
    color: var(--lumo-secondary-text-color) !important;
    font-size: 0.85rem !important;
}

.context-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: bold !important;
}

.context-value-accent {
    color: var(--lumo-primary-color) !important;
}

.context-value-user {
    color: var(--lumo-body-text-color) !important;
}

.context-divider {
    color: var(--lumo-contrast-20pct) !important;
}

.drawer-toggle {
    color: var(--lumo-primary-text-color) !important;
}