/* Tutaj nie ma już @import */
    html, :root { color-scheme: light dark; }
    html.light, body.light { color-scheme: light; }
    html.dark,  body.dark  { color-scheme: dark; }

    /* === GŁÓWNA PALETA KOLORÓW I ZMIENNYCH === */
    :root {
        /* -- Główne kolory aplikacji -- */
        --primary-color: #3b82f6;
        --background-color: #111827;
        --text-color: #1f2f37;
        --list-item-meta-text: #1f2f37;
        --muted-text-color: #2e0303;
        --card-background-color: #b4b0b0;
        --card-hover-bg: #eff6ff;
        --button-bg: #b7b7b7;
        --button-hover-bg: #f9fafb;
        --overlay-bg: rgba(0, 0, 0, 0.5);

        /* -- Czcionki -- */
        --font-family-main: 'Inter', sans-serif;
        --font-family-logo: 'Arial Black', Gadget, sans-serif;

        /* -- Nagłówek -- */
        --header-bg: #111827;
        --header-text-color: #ffffff;
        --header-border-color: #4b5563;

        /* -- Tła poszczególnych komponentów -- */
        --list-item-bg: #fff5e3;
        --input-bg: #f7fbff;
        --output-field-bg: #929eaa;
        --modal-bg: #bdb2a8;
        --login-modal-bg: #adabaf;
        --export-section-bg: #bfae82;
        --table-header-bg: #e5e7eb;
        --planner-employee-bg: #b4b0b0;
        --add-user-section-bg: #f3f4f6;

        /* -- Przyciski nawigacji na stronie głównej -- */
        --btn-nav-stores-bg: #3b82f6;
        --btn-nav-stores-hover-bg: #2563eb;
        --btn-nav-guide-bg: #3b82f6;
        --btn-nav-guide-hover-bg: #2563eb;
        --btn-nav-failures-bg: #ea580c;
        --btn-nav-failures-hover-bg: #c2410c;
        --btn-nav-refueling-bg: #eab308;
        --btn-nav-refueling-hover-bg: #ca8a04;
        --btn-nav-storeinfo-bg: #6b7280;
        --btn-nav-storeinfo-hover-bg: #4b5563;
        --btn-nav-vacation-bg: #8b5cf6;
        --btn-nav-vacation-hover-bg: #7c3aed;
        --btn-nav-readiness-bg: #14b8a6;
        --btn-nav-readiness-hover-bg: #0d9488;
        --btn-nav-schedule-bg: #d946ef; /* Kolor przycisku Grafik */
        --btn-nav-schedule-hover-bg: #c026d3; /* Kolor przycisku Grafik (hover) */
        --btn-nav-text-color: #ffffff;

        /* -- Przyciski akcji (Generuj, Wyczyść, przesuwaki itp.) -- */
        --btn-action-success-bg: #22c55e;
        --btn-action-success-hover-bg: #16a34a;
        --btn-action-vacation-bg: var(--btn-action-success-bg);
        --btn-action-vacation-hover-bg: var(--btn-action-success-hover-bg);
        --btn-action-danger-bg: #ef4444;
        --btn-action-danger-hover-bg: #dc2626;
        --btn-action-l4-bg: #f97316;
        --btn-action-l4-hover-bg: #ea580c;
        --btn-action-text-color: #ffffff;
        --slider-thumb-color: #3b82f6;
        --slider-track-color: #d1d5db;
        --toggle-bg-off: #e5e7eb;
        --toggle-bg-on: #3b82f6;
        --toggle-handle-color: #3b82f6;
        --quick-reason-btn-bg: #a0a09f;
        --quick-reason-btn-text: #1f2f37;
        --quick-reason-btn-hover-bg: #e5e7eb;
    
        /* -- Kolory specjalne (linki, ikony) -- */
        --link-color: #3b82f6;
        --icon-success-color: #22c55e;
        --icon-danger-color: #ef4444;

        /* -- Powiadomienia -- */
        --notification-info-bg: #3b82f6;
        --notification-success-bg: #22c55e;
        --notification-error-bg: #ef4444;
        --notification-text-color: #ffffff;

        /* -- Przyciski nawigacji planera -- */
        --planner-nav-btn-bg: #3730a3;
        --planner-nav-btn-hover-bg: #4338ca;
        --planner-nav-btn-border: #4f46e5;
        --planner-nav-btn-text: #e0e7ff;

        /* -- Kolory statusów -- */
        --status-approved-bg: #8fff31;
        --status-approved-text: #166534;
        --status-rejected-bg: #f89569;
        --status-rejected-text: #000000;
        --status-pending-bg: #f8ee69;
        --status-pending-text: #ee540e;
        --status-l4-bg: #69a7f8;
        --status-l4-text: #3730a3;
        /* Nowe kolory dla grafiku */
        --status-shift-day-bg: #fef08a; /* Żółty */
        --status-shift-day-text: #854d0e;
        --status-shift-night-bg: #93c5fd; /* Niebieski */
        --status-shift-night-text: #1e3a8a;
        --status-day-off-bg: #d1d5db; /* Szary */
        --status-day-off-text: #1f2937;

        /* -- Kolory tekstu w komponentach -- */
        --input-text: #1f2f37;
        --output-field-text-color: #1f2f37;
        --modal-text: #1f2f37;
        --planner-employee-text: #1f2f37;

        /* -- Kolory ramek (borderów) -- */
        --border-color: #9ca3af;
        --modal-border-color: #e5e7eb;
        --planner-table-border-color: #d1d5db;
        --export-section-border-color: #d1d5db;
        --planner-separator-border: #d1d5db;

        /* -- Planer Urlopów - Specyficzne -- */
        --planner-month-even-bg: #e1ae4f;
        --planner-month-even-text: #1f2937;
        --planner-month-odd-bg: #62c468;
        --planner-month-odd-text: #1f2937;
        --planner-sunday-bg: #9b820e;
        --planner-month-separator-color: #181816;

        /* -- Poradnik Kierowcy -- */
        --guide-danger-text: #dc2626;
        --guide-info-text: #2563eb;
        --guide-highlight-success-bg: #dcfce7;
        --guide-highlight-success-text: #16a34a;
        --guide-highlight-warning-bg: #fefce8;
        --guide-highlight-warning-text: #ca8a04;
        --guide-highlight-danger-bg: #fee2e2;
        --guide-highlight-danger-border: #f87171;
        --guide-highlight-danger-text: #b91c1c;

        /* -- Logo -- */
        --logo-aldi-bg: #ffffff;
        --logo-aldi-border: #00549f;
        --logo-aldi-text: #003366;
        --logo-company-bg: #ffffff;
        --logo-company-border: #d8242b;
        --logo-company-text: #d8242b;

        /* -- Ikony -- */
        --icon-refueling-color: #979704;
        --icon-vacation-color: #f97316;
        --icon-l4-color: #3b82f6;

        /* -- Ważne informacje (jasny tryb) -- */
        --card-bg: #ffffff;
        --card-bg2: #f9fafb;
        --card-bg2-red: #fff8f8;
        --card-bg2-blue: #f0f9ff;
        --card-bg2-yellow: #fffbeb;
        --border-color: #e5e7eb;
        --text-secondary: #374151;
        --text-muted: #6b7280;
        --text-meta: #555252;
        --wazne-header-bg: #f1f5f9;
        --wazne-header-text: #111827;
        --wazne-meta-text: #374151;
        --wazne-date-text: #6b7280;
        --store-header-gradient: linear-gradient(135deg,#fef2f2,#fff1f2);
        --store-header-border: #fecaca;
        --store-header-color: #991b1b;
        --desc-text-color: #555555;
    }

    .dark {
        /* -- Główne kolory aplikacji -- */
        --primary-color: #60a5fa;
        --background-color: #111827;
        --text-color: #d1d5db;
        --list-item-meta-text: #d1d5db;
        --muted-text-color: #9ca3af;
        --card-background-color: #1f2937;
        --card-hover-bg: #4b5563;
        --button-bg: #374151;
        --button-hover-bg: #4b5563;
        --overlay-bg: rgba(0, 0, 0, 0.7);

        /* -- Nagłówek -- */
        --header-bg: #111827;
        --header-text-color: #ffffff;
        --header-border-color: #374151;

        /* -- Tła poszczególnych komponentów -- */
        --list-item-bg: #374151;
        --input-bg: #4b5563;
        --output-field-bg: #374151;
        --modal-bg: #1f2937;
        --login-modal-bg: #1f2937;
        --export-section-bg: #1f2937;
        --table-header-bg: #374151;
        --planner-employee-bg: #1f2937;
        --add-user-section-bg: #1f2937;
        
        /* -- Przyciski akcji (Generuj, Wyczyść, przesuwaki itp.) -- */
        --btn-action-l4-bg: #fb923c;
        --btn-action-l4-hover-bg: #f97316;
        --slider-thumb-color: #60a5fa;
        --slider-track-color: #4b5563;
        --toggle-bg-off: #4b5563;
        --toggle-bg-on: #60a5fa;
        --toggle-handle-color: #e5e7eb;
        --quick-reason-btn-bg: #374151;
        --quick-reason-btn-text: #d1d5db;
        --quick-reason-btn-hover-bg: #4b5563;

        /* -- Ważne informacje (ciemny tryb) -- */
        --card-bg: #1f2937;
        --card-bg2: #2d3748;
        --card-bg2-red: #2d1f1f;
        --card-bg2-blue: #1e2a3a;
        --card-bg2-yellow: #2d2a1a;
        --border-color: #374151;
        --text-secondary: #d1d5db;
        --text-muted: #9ca3af;
        --text-meta: #9ca3af;
        --wazne-header-bg: #1f2937;
        --wazne-header-text: #f3f4f6;
        --wazne-meta-text: #d1d5db;
        --wazne-date-text: #9ca3af;
        --store-header-gradient: linear-gradient(135deg,#2d1f1f,#3b1f1f);
        --store-header-border: #7f1d1d;
        --store-header-color: #fca5a5;
        --desc-text-color: var(--text-color, #d1d5db);
        --modal-bg: #1f2937;
        --modal-border-strong: rgba(255,255,255,0.18);
        --modal-divider: rgba(255,255,255,0.10);
        --modal-btn-bg: #374151;
        --modal-item-bg: #374151;

        /* -- Kolory specjalne (linki, ikony) -- */
        --link-color: #60a5fa;
        --icon-success-color: #4ade80;
        --icon-danger-color: #f87171;

        /* -- Powiadomienia -- */
        --notification-info-bg: #3b82f6;
        --notification-success-bg: #22c55e;
        --notification-error-bg: #ef4444;
        --notification-text-color: #ffffff;
        
        /* Nowe kolory dla grafiku w trybie ciemnym */
        --status-shift-day-bg: #a16207;
        --status-shift-day-text: #fefce8;
        --status-shift-night-bg: #1e40af;
        --status-shift-night-text: #dbeafe;
        --status-day-off-bg: #4b5563;
        --status-day-off-text: #d1d5db;

        /* -- Kolory tekstu w komponentach -- */
        --input-text: #d1d5db;
        --output-field-text-color: #d1d5db;
        --modal-text: #d1d5db;
        --planner-employee-text: #d1d5db;

        /* -- Kolory ramek (borderów) -- */
        --border-color: #4b5563;
        --modal-border-color: #374151;
        --planner-table-border-color: #374151;
        --export-section-border-color: #4b5563;
        --planner-separator-border: #4b5563;

        /* -- Planer Urlopów - Specyficzne -- */
        --planner-month-even-bg: #e1ae4f;
        --planner-month-even-text: #d1d5db;
        --planner-month-odd-bg: #62c468;
        --planner-month-odd-text: #d1d5db;
        --planner-sunday-bg: #450a0a;
        --planner-month-separator-color: #6b7280;

        /* -- Poradnik Kierowcy -- */
        --guide-danger-text: #f87171;
        --guide-info-text: #60a5fa;
        --guide-highlight-success-bg: #14532d;
        --guide-highlight-success-text: #a7f3d0;
        --guide-highlight-warning-bg: #713f12;
        --guide-highlight-warning-text: #fef08a;
        --guide-highlight-danger-bg: #7f1d1d;
        --guide-highlight-danger-border: #dc2626;
        --guide-highlight-danger-text: #fecaca;

        /* -- Ikony -- */
        --icon-refueling-color: #a2a20b;
        --icon-vacation-color: #fb923c;
        --icon-l4-color: #60a5fa;
    }

    /* ========================================= */



    /* === GŁÓWNE STYLE APLIKACJI === */
    body {
        font-family: var(--font-family-main);
        transition: background-color 0.3s, color 0.3s;
        background-image: url('https://www.transparenttextures.com/patterns/light-paper-fibers.png');
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        background-color: var(--background-color);
        color: var(--text-color);
    }

	/* Nowe, dedykowane style dla legendy grafiku */
.legend-box {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 0.25rem;
}
.legend-box-day {
    background-color: var(--status-shift-day-bg);
    color: var(--status-shift-day-text);
}
.legend-box-night {
    background-color: var(--status-shift-night-bg);
    color: var(--status-shift-night-text);
}
.legend-box-off {
    background-color: var(--status-day-off-bg);
    color: var(--status-day-off-text);
}

    .refueling-icon-color {
        color: var(--icon-refueling-color);
    }

    /* Nowe, dedykowane style dla przełącznika motywu */
    .theme-toggle {
        background-color: var(--toggle-bg-off);
        transition: background-color 0.3s ease;
    }
    .theme-toggle::after {
        background-color: var(--toggle-handle-color);
        border-color: transparent; /* Usuwamy domyślną ramkę */
    }

    /* Nowa, dedykowana reguła dla przycisków */
    .quick-reason-btn {
        background-color: var(--quick-reason-btn-bg);
        color: var(--quick-reason-btn-text);
    }
    .quick-reason-btn:hover {
        background-color: var(--quick-reason-btn-hover-bg);
    }

    /* Nowe klasy pomocnicze dla ikon */
    .vacation-icon {
        color: var(--icon-vacation-color);
    }
    .l4-icon {
        color: var(--icon-l4-color);
    }

    /* Style dla przełącznika w stanie ON (zaznaczony) */
    .peer:checked + .theme-toggle {
        background-color: var(--toggle-bg-on);
    }

    .primary-text-color {
        color: var(--text-color);
    }

    .list-meta-text {
        color: var(--list-item-meta-text);
    }

	/* NOWA KLASA DLA CZYTELNOŚCI W OBU MOTYWACH */
    .list-secondary-text {
        color: var(--muted-text-color);
    }

    #app-container, #settings-panel {
        background-color: color-mix(in srgb, var(--card-background-color) 90%, transparent);
    }

    #main-footer {
        background-color: var(--button-bg);
        color: var(--muted-text-color);
    }

    /* === NAGŁÓWEK === */
    header {
        background-color: var(--header-bg);
        color: var(--header-text-color);
    }
    header > div:first-child { /* Pierwszy div w headerze, który ma border-b */
        border-color: var(--header-border-color);
    }

    /* === STRONA GŁÓWNA === */
    #company-logo-text {
        font-family: var(--font-family-logo);
    }
    #failure-indicator-btn { color: var(--icon-danger-color); }
    #call-btn .fa-phone { color: var(--icon-success-color); }
    #route-link-output { color: var(--link-color); }

    /* Przyciski nawigacyjne */
    .page-nav-btn { color: var(--btn-nav-text-color); }
    .page-nav-btn[data-target="store-list"] { background-color: var(--btn-nav-stores-bg); }
    .page-nav-btn[data-target="store-list"]:hover { background-color: var(--btn-nav-stores-hover-bg); }
    .page-nav-btn[data-target="driver-guide"] { background-color: var(--btn-nav-guide-bg); }
    .page-nav-btn[data-target="driver-guide"]:hover { background-color: var(--btn-nav-guide-hover-bg); }
    #nav-btn-failures { background-color: var(--btn-nav-failures-bg); }
    #nav-btn-failures:hover { background-color: var(--btn-nav-failures-hover-bg); }
    #nav-btn-refueling { background-color: var(--btn-nav-refueling-bg); }
    #nav-btn-refueling:hover { background-color: var(--btn-nav-refueling-hover-bg); }
    .page-nav-btn[data-target="store-info-page"] { background-color: var(--btn-nav-storeinfo-bg); }
    .page-nav-btn[data-target="store-info-page"]:hover { background-color: var(--btn-nav-storeinfo-hover-bg); }
    #nav-btn-vacation { background-color: var(--btn-nav-vacation-bg); }
    #nav-btn-vacation:hover { background-color: var(--btn-nav-vacation-hover-bg); }
    .page-nav-btn[data-target="route-readiness-page"] { background-color: var(--btn-nav-readiness-bg); }
    .page-nav-btn[data-target="route-readiness-page"]:hover { background-color: var(--btn-nav-readiness-hover-bg); }
    #nav-btn-schedule { background-color: var(--btn-nav-schedule-bg); }
    #nav-btn-schedule:hover { background-color: var(--btn-nav-schedule-hover-bg); }

    /* Przyciski akcji */
    #generate-route-btn { background-color: var(--btn-action-success-bg); color: var(--btn-action-text-color); }
    #generate-route-btn:hover { background-color: var(--btn-action-success-hover-bg); }
    #clear-route-btn { background-color: var(--btn-action-danger-bg); color: var(--btn-action-text-color); }
    #clear-route-btn:hover { background-color: var(--btn-action-danger-hover-bg); }
    
    /* Nowe dedykowane klasy dla przycisku wniosków */
    .btn-l4 {
      background-color: var(--btn-action-l4-bg);
      color: var(--btn-action-text-color);
    }
    .btn-l4:hover {
      background-color: var(--btn-action-l4-hover-bg);
    }
    .btn-vacation {
      background-color: var(--btn-action-vacation-bg);
      color: var(--btn-action-text-color);
    }
    .btn-vacation:hover {
      background-color: var(--btn-action-vacation-hover-bg);
    }

    /* === STYLE DLA KOMPONENTÓW === */
    /* Tło dla list */
   #failures-list > div, #vacations-list > div, #store-reports-list > div,
#refuelings-list > div, .refuelings-container > div, 
#readiness-list > div, #users-list > div, #files-list > div { /* <-- Dodano ten selektor */
    background-color: var(--list-item-bg) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 0.375rem;
    }
    .month-group .refuelings-container { background-color: transparent; border: none; padding: 0; border-radius: 0; }

    /* Tło i ramka dla sekcji EKSPORTU/UPLOADU */
    #failures-export-section > div, #export-section > div,
    #vacation-export-section > div, #store-info-export-section > div,
    #schedule-upload-section > div {
        background-color: var(--export-section-bg);
        border: 1px solid var(--export-section-border-color);
    }

    /* Sekcja dodawania użytkownika */
    #user-management-page .bg-gray-100 {
        background-color: var(--add-user-section-bg);
    }

    /* Lista sklepów */
    #store-list thead {
        background-color: var(--table-header-bg);
    }

    /* Poradnik kierowcy */
    .guide-danger-text { color: var(--guide-danger-text); }
    .guide-info-text { color: var(--guide-info-text); }
    .guide-highlight-success { background-color: var(--guide-highlight-success-bg); color: var(--guide-highlight-success-text); }
    .guide-highlight-warning { background-color: var(--guide-highlight-warning-bg); color: var(--guide-highlight-warning-text); }
    .guide-highlight-danger { background-color: var(--guide-highlight-danger-bg); border-color: var(--guide-highlight-danger-border); color: var(--guide-highlight-danger-text); }

    /* === Style dla wszystkich pól DO WPISYWANIA === */
    input[type="text"], input[type="number"], input[type="password"],
    input[type="date"], input[type="tel"], textarea, select, input[type="file"] {
        background-color: var(--input-bg) !important;
        color: var(--input-text) !important;
        border: 1px solid var(--border-color);
        color-scheme: inherit !important;
    }

    .dark input[type="text"], .dark input[type="number"], .dark input[type="password"],
    .dark input[type="date"], .dark input[type="tel"], .dark textarea, .dark select, .dark input[type="file"] {
        border: 1px solid var(--border-color) !important;
        color-scheme: inherit !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: none;
        opacity: 0.95;
    }
    html.dark input[type="date"]::-webkit-calendar-picker-indicator,
    body.dark input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1) contrast(1.1) brightness(1.05);
    }

    input[type="range"],
    button,
    #settings-btn,
    #transparency-slider,
    #font-size-slider {
        color-scheme: inherit !important;
    }

    /* === Style dla suwaków (przesuwaków) === */
    input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        background: var(--slider-track-color);
        border-radius: 999px;
        outline: none;
        opacity: 0.9;
        transition: opacity .2s;
    }
    input[type="range"]:hover {
        opacity: 1;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: var(--slider-thumb-color);
        border-radius: 50%;
        border: 2px solid rgba(0,0,0,0.1);
        cursor: pointer;
        margin-top: -6px;
    }
    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: var(--slider-thumb-color);
        border-radius: 50%;
        border: none;
        cursor: pointer;
    }
    input[type="range"]::-moz-range-track {
        width: 100%;
        height: 8px;
        cursor: pointer;
        background: var(--slider-track-color);
        border-radius: 999px;
    }

    /* Styl dla pól INFORMACYJNYCH */
    #store-address-output, #call-btn {
        background-color: var(--output-field-bg) !important;
        color: var(--output-field-text-color) !important;
    }

    /* Style dla OKIEN MODALNYCH */
    .modal-container {
        background-color: var(--modal-bg);
        color: var(--modal-text);
        border: 1px solid var(--modal-border-color);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    #login-modal .modal-container { background-color: var(--login-modal-bg); }

    /* Styl dla TŁA za okienkami */
    .modal-overlay, #settings-overlay { background-color: var(--overlay-bg); }

    .filter-btn {
        background-color: var(--button-bg);
        border: 1px solid var(--border-color);
        transition: background-color 0.2s, color 0.2s;
    }
    .filter-btn:hover { background-color: var(--card-hover-bg); }

    input:focus, textarea:focus, select:focus {
        --tw-ring-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    main .border-b, main .border-t { border-color: var(--border-color); }

    #prev-year-btn, #next-year-btn {
        background-color: var(--planner-nav-btn-bg);
        border: 1px solid var(--planner-nav-btn-border);
        color: var(--planner-nav-btn-text);
    }
    #prev-year-btn:hover, #next-year-btn:hover { background-color: var(--planner-nav-btn-hover-bg); }
    
    #wallpaper-upload::file-selector-button,
    #schedule-file-input::file-selector-button {
        background-color: var(--primary-color);
        color: white;
        border: none; padding: 0.5rem 1rem; margin-right: 1rem; border-radius: 9999px; font-weight: 600; cursor: pointer; transition: background-color 0.2s;
    }
    #wallpaper-upload::file-selector-button:hover,
    #schedule-file-input::file-selector-button:hover { background-color: color-mix(in srgb, var(--primary-color) 85%, black); }

    #open-map-btn, .dark #open-map-btn, main h2 + p,
    #failures-list .text-gray-500, #store-reports-list .text-gray-600,
    #store-reports-list .text-gray-500 {
        color: var(--muted-text-color) !important;
    }
    .page { display: none; }
    .page.active { display: block; }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .settings-panel { transition: transform 0.3s ease-in-out; transform: translateX(100%); }
    .settings-panel.open { transform: translateX(0); }

    .aldi-logo-circle {
        background-color: var(--logo-aldi-bg);
        border: 4px solid var(--logo-aldi-border);
        color: var(--logo-aldi-text);
        width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out;
        overflow: hidden;
        padding: 0;
    }
    .aldi-logo-circle #company-logo-img {
        display: block;
        width: 92%;
        height: 92%;
        object-fit: contain;
        border-radius: 50%;
        background: #fff;
    }
    .aldi-logo-circle #company-logo-text {
        display: none;
    }
    .company-logo-rect {
    background-color: #ffffff;
    border: 3px solid var(--logo-company-border);
    color: var(--logo-company-text);
    width: 240px; height: 110px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    padding: 0.4rem 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
    }
    .company-logo-rect #company-logo-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #ffffff;
    }

    .guide-section h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
    .guide-section ul, .guide-section ol { margin-left: 1.25rem; margin-bottom: 1rem; }
    .guide-section li { margin-bottom: 0.25rem; }
    .status-indicator { width: 1rem; height: 1rem; border-radius: 50%; }
    .modal-overlay { transition: opacity 0.3s ease; }
    .modal-container.modal-up { transform: translateY(-80px); }

    #notification-container { position: fixed; top: 1rem; right: 1rem; z-index: 1050; display: flex; flex-direction: column; gap: 0.5rem; }
    .notification { padding: 1rem; border-radius: 0.5rem; color: var(--notification-text-color); box-shadow: 0 4px 6px rgba(0,0,0,0.1); opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; }
    .notification.show { opacity: 1; transform: translateX(0); }
    .notification.info { background-color: var(--notification-info-bg); }
    .notification.success { background-color: var(--notification-success-bg); }
    .notification.error { background-color: var(--notification-error-bg); }

    .filter-btn.active { background-color: var(--primary-color); color: white; font-weight: 600; border-color: var(--primary-color); }
    .tab-btn.active { border-bottom-color: var(--primary-color); color: var(--primary-color); }
    .vacation-filter-btn.active { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); }

    input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    input[type=number] { -moz-appearance: textfield; }

    .month-group summary { cursor: pointer; padding: 0.75rem 1rem; background-color: var(--button-bg); border: 1px solid var(--border-color); border-radius: 0.375rem; font-weight: 600; margin-top: 1rem; outline: none; }
    .month-group[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

    /* === Style dla PLANERA URLOPÓW / GRAFIKU === */

	
    .vacation-planner-table { border-collapse: collapse; table-layout: fixed; width: auto; white-space: nowrap;  }
    .vacation-planner-table th, .vacation-planner-table td { border: 1px solid var(--planner-table-border-color); width: 30px; height: 32px; text-align: center; font-size: 0.75rem; padding: 2px; box-sizing: border-box; }
    .vacation-planner-table .sticky-col, .vacation-planner-table .sticky-header { position: -webkit-sticky; position: sticky; }
    .vacation-planner-table .sticky-col { left: 0; z-index: 10; width: 150px; min-width: 150px; max-width: 150px; white-space: normal; font-size: 0.875rem; font-weight: 600; border-right: 2px solid var(--planner-separator-border); }
    .vacation-planner-table td.sticky-col { background-color: var(--planner-employee-bg) !important; color: var(--planner-employee-text) !important; }
    .vacation-planner-table .sticky-header { top: 0; z-index: 20; background-color: var(--button-bg); }
    .vacation-planner-table .sticky-header.sticky-col { z-index: 25; }
    .vacation-planner-table .month-header { font-weight: 700; font-size: 0.875rem; }
    .vacation-planner-table .day-of-week-header { font-size: 0.65rem; }

    .vacation-planner-table th.month-header.month-even-bg,
    .vacation-planner-table th.month-even-bg:not(.day-of-week-header) {
        background-color: var(--planner-month-even-bg);
        color: var(--planner-month-even-text);
    }
    .vacation-planner-table th.month-header.month-odd-bg,
    .vacation-planner-table th.month-odd-bg:not(.day-of-week-header) {
        background-color: var(--planner-month-odd-bg);
        color: var(--planner-month-odd-text);
    }

    .vacation-planner-table .sunday-col { background-color: var(--planner-sunday-bg); }
    .vacation-planner-table .month-start { border-left: 3px solid var(--planner-month-separator-color) !important; }
    .vacation-planner-table .month-header { border-right: 3px solid var(--planner-month-separator-color) !important; }

    .vacation-cell, .schedule-cell { font-weight: bold; overflow: hidden; }
    .vacation-cell.status-approved { background-color: var(--status-approved-bg) !important; color: var(--status-approved-text); }
    .vacation-cell.status-rejected { background-color: var(--status-rejected-bg) !important; color: var(--status-rejected-text); }
    .vacation-cell.status-pending { background-color: var(--status-pending-bg) !important; color: var(--status-pending-text); }
    .vacation-cell.status-l4 { background-color: var(--status-l4-bg) !important; color: var(--status-l4-text); }
    
    .schedule-cell.status-shift-day { background-color: var(--status-shift-day-bg) !important; color: var(--status-shift-day-text); }
    .schedule-cell.status-shift-night { background-color: var(--status-shift-night-bg) !important; color: var(--status-shift-night-text); }
    .schedule-cell.status-day-off { background-color: var(--status-day-off-bg) !important; color: var(--status-day-off-text); }

    @media (orientation: landscape) { #app-container { max-width: 712px; } }
    #schedule-planner-wrapper {
        max-height: 480px; /* Wysokość dla 12 wierszy danych (12 * 32px) + 3 wiersze nagłówka (3 * 32px) */
        overflow-y: auto;  /* Dodaje pionowy pasek przewijania, gdy zawartość jest większa */
    }

    /* --- POCZĄTEK OSTATECZNEJ POPRAWKI STYLÓW --- */

    /* 1. Domyślny, nieaktywny styl przycisku */
    .vehicle-btn {
        background-color: var(--button-bg);
        border: 1px solid var(--border-color);
        transition: background-color 0.2s, border-color 0.2s;
    }

    /* 2. Styl :hover AKTYWNY TYLKO na urządzeniach z myszką (dzięki JS) */
.mouse-device .vehicle-btn:not(.active):hover {
    background-color: var(--button-hover-bg) !important;
}


    /* 3. Styl dla aktywnego/zaznaczonego przycisku */
    .vehicle-btn.active {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }
    
    /* 4. Styl dla ikony wewnątrz aktywnego przycisku */
    .vehicle-btn.active i {
        color: white !important;
    }
    
    /* 5. Styl dla przycisku, który jest celowo wyłączony */
    .vehicle-btn.disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

/* --- KONIEC OSTATECZNEJ POPRAWKI STYLÓW --- */




/* ============================================================
   UPIĘKSZONE PRZYCISKI — animacje i efekty
   ============================================================ */

/* --- Baza dla wszystkich przycisków nawigacyjnych --- */
.page-nav-btn {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        filter 0.18s ease;
    letter-spacing: 0.02em;
}

/* Efekt naciśnięcia — wciśnięcie w dół */
.page-nav-btn:active {
    transform: translateY(3px) scale(0.97);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    filter: brightness(0.92);
}

/* Hover na desktopie — unosienie */
.mouse-device .page-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    filter: brightness(1.08);
}

/* Shimmer sweep po hover */
.page-nav-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
    opacity: 0;
}
.mouse-device .page-nav-btn:hover::after {
    opacity: 1;
    left: 125%;
    transition: left 0.45s ease, opacity 0.1s;
}

/* Ikony wewnątrz przycisków — mały bounce przy hover */
.mouse-device .page-nav-btn:hover i {
    animation: icon-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes icon-bounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-5px); }
    70%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* --- Ripple effect przy kliknięciu --- */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: ripple-anim 0.55s linear;
    pointer-events: none;
}
@keyframes ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Przyciski akcji (zielony, czerwony, pomarańczowy, niebieski) --- */
button[class*="bg-green"],
button[class*="bg-red"],
button[class*="bg-blue"],
button[class*="bg-orange"],
button[class*="bg-indigo"],
button[class*="bg-teal"],
button[class*="bg-yellow"],
button[class*="bg-purple"],
#generate-route-btn,
#clear-route-btn,
#add-user-btn,
#change-password-btn,
#add-company-confirm-btn,
#add-forwarder-confirm-btn,
#backup-download-btn {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        filter 0.18s ease;
}
button[class*="bg-green"]:active,
button[class*="bg-red"]:active,
button[class*="bg-blue"]:active,
button[class*="bg-orange"]:active,
button[class*="bg-indigo"]:active,
button[class*="bg-teal"]:active,
button[class*="bg-yellow"]:active,
button[class*="bg-purple"]:active,
#generate-route-btn:active,
#clear-route-btn:active,
#add-user-btn:active,
#change-password-btn:active,
#backup-download-btn:active {
    transform: translateY(2px) scale(0.97);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    filter: brightness(0.9);
}
.mouse-device button[class*="bg-green"]:hover,
.mouse-device button[class*="bg-red"]:hover,
.mouse-device button[class*="bg-blue"]:hover,
.mouse-device button[class*="bg-orange"]:hover,
.mouse-device button[class*="bg-indigo"]:hover,
.mouse-device button[class*="bg-teal"]:hover,
.mouse-device button[class*="bg-yellow"]:hover,
.mouse-device button[class*="bg-purple"]:hover,
.mouse-device #generate-route-btn:hover,
.mouse-device #clear-route-btn:hover,
.mouse-device #add-user-btn:hover,
.mouse-device #change-password-btn:hover,
.mouse-device #backup-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.22);
    filter: brightness(1.07);
}

/* --- vehicle-btn (typ pojazdu, typ urlopu) ulepszony --- */
.vehicle-btn {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease !important;
}
.vehicle-btn:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
.mouse-device .vehicle-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 14px rgba(0,0,0,0.15) !important;
}
.vehicle-btn.active {
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
    animation: btn-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes btn-pop {
    0%   { transform: scale(0.95); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* --- Przyciski ustawień (settings panel) --- */
#manage-users-btn,
#manage-catalog-btn,
#manage-files-btn,
#backup-download-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        filter 0.18s ease !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.mouse-device #manage-users-btn:hover,
.mouse-device #manage-catalog-btn:hover,
.mouse-device #manage-files-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    filter: brightness(1.08);
}
#manage-users-btn:active,
#manage-catalog-btn:active,
#manage-files-btn:active {
    transform: translateY(2px) scale(0.97);
    filter: brightness(0.9);
}

/* --- Animacja wejścia przycisków na stronie głównej --- */
@keyframes btn-slide-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#home .page-nav-btn {
    animation: btn-slide-in 0.4s ease both;
}
#home .page-nav-btn:nth-child(1) { animation-delay: 0.05s; }
#home .page-nav-btn:nth-child(2) { animation-delay: 0.10s; }
#home .page-nav-btn:nth-child(3) { animation-delay: 0.15s; }
#home .page-nav-btn:nth-child(4) { animation-delay: 0.20s; }
#home .page-nav-btn:nth-child(5) { animation-delay: 0.25s; }
#home .page-nav-btn:nth-child(6) { animation-delay: 0.30s; }

/* ============================================================ */

/* ===== Ważne informacje — animacje przycisków ===== */

/* Wjazd jeden po drugim */
@keyframes wazneSlideIn {
    0%   { opacity: 0; transform: translateX(48px) scale(0.96); }
    60%  { transform: translateX(-4px) scale(1.01); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

.wazne-slide-in {
    opacity: 0;
    animation: wazneSlideIn 0.45s cubic-bezier(.22,.68,0,1.2) forwards;
    animation-delay: var(--slide-delay, 0ms);
}

/* Ripple — fala od miejsca kliknięcia */
.wazne-ripple-btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: scale(1);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.wazne-ripple-btn:active {
    transform: scale(0.97);
    filter: brightness(0.92);
}

.wazne-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: wazneRipple 0.55s linear forwards;
    pointer-events: none;
}

@keyframes wazneRipple {
    0%   { transform: scale(0); opacity: 1; }
    80%  { transform: scale(4); opacity: 0.3; }
    100% { transform: scale(4.5); opacity: 0; }
}

/* ===== Shine — błysk światła na przyciskach ===== */
@keyframes wazneShine {
    0%   { left: -120%; }
    100% { left: 150%; }
}

.wazne-ripple-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.18) 40%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,255,255,0.18) 60%,
        transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: none;
}

/* Hover na desktopie — shine przelatuje */
.wazne-ripple-btn:hover::after {
    animation: wazneShine 0.55s ease forwards;
}

/* Kliknięcie na telefonie — shine przelatuje */
.wazne-ripple-btn:active::after {
    animation: wazneShine 0.45s ease forwards;
}

/* Lightbox — blokada gestów systemowych */
#wazne-lightbox {
    touch-action: none !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
}

#wazne-lightbox * {
    touch-action: none !important;
}

#wazne-lightbox-body {
    overscroll-behavior: contain !important;
}

/* ===== Lightbox — tryb pełnoekranowy ===== */
#wazne-lightbox.lb-fullscreen {
    background: #000 !important;
}

#wazne-lightbox.lb-fullscreen #wazne-lightbox-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

#wazne-lightbox.lb-fullscreen:active #wazne-lightbox-bar,
#wazne-lightbox.lb-fullscreen.lb-bar-visible #wazne-lightbox-bar {
    opacity: 1;
    pointer-events: auto;
}

#wazne-lightbox.lb-fullscreen #wazne-lightbox-meta {
    display: none;
}

/* Ikona zmienia się w trybie pełnoekranowym */
#wazne-lightbox.lb-fullscreen #wazne-lightbox-fullscreen i {
    font-size: 18px;
}

/* Tryb PDF — pasek zawsze widoczny, nie chowa się nawet w fullscreen */
#wazne-lightbox.lb-pdf-mode #wazne-lightbox-bar,
#wazne-lightbox.lb-pdf-mode.lb-fullscreen #wazne-lightbox-bar {
    position: relative;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(0,0,0,0.85);
    flex-shrink: 0;
}
#wazne-lightbox.lb-pdf-mode #wazne-lightbox-body {
    flex: 1;
    min-height: 0;
}

/* Lightbox landscape — ukryj meta, minimalizuj pasy góra/dół */
@media (orientation: landscape) {
    #wazne-lightbox-meta {
        display: none !important;
    }
    #wazne-lightbox-bar {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        min-height: 0 !important;
    }
}

/* Badge powiadomień Ważne informacje */
@keyframes wazne-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; }
}

/* ============================================================
   FORMULARZ AWARII — pole wyboru zdjęć
   ============================================================ */
.failure-photo-pick-label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 2px dashed var(--border-color, #d1d5db);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    background: var(--card-bg, #f9fafb);
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.failure-photo-pick-label:hover {
    border-color: #f59e0b;
    background: var(--list-item-bg, #fffbeb);
    color: #92400e;
}
.failure-photo-pick-label > i { font-size: 20px; color: #f59e0b; flex-shrink: 0; }

.fpp-thumb {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}
.fpp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fpp-remove {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    background: rgba(220,38,38,.85);
    color: #fff;
    border: none; border-radius: 50%;
    font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0;
}

/* =================================================================
   ZGŁOSZENIA ADRESÓW — zmienne dla jasnego i ciemnego trybu
   ================================================================= */

/* Jasny tryb — kolory identyczne jak okno logowania */
:root,
html:not(.dark) {
    --modal-bg: #c9c5c2;
    --modal-border: #9ca3af;
    --modal-border-strong: #7a7470;
    --modal-divider: #9a9599;
    --modal-btn-bg: #a09c99;
    --modal-close-color: #1f2f37;
    --input-readonly-bg: #929eaa;
    --input-bg: #f7fbff;
    --input-border: #9ca3af;
    --text: #1f2f37;
    --label-dim: #374151;
    --btn-neutral-bg: #b7b7b7;
    --report-btn-color: #d97706;
    --report-btn-bg: rgba(245,158,11,0.12);
    --report-btn-border: rgba(217,119,6,0.4);
    --card-bg2-red: #fff8f8;
    --card-bg2-blue: #f0f9ff;
    --card-bg2-yellow: #fffbeb;
    --store-header-gradient: linear-gradient(135deg,#fef2f2,#fff1f2);
    --store-header-border: #fecaca;
    --store-header-color: #991b1b;
    --desc-text-color: #374151;
    --modal-item-bg: #adabaf;
}

/* Ciemny tryb */
html.dark,
body.dark {
    --modal-bg: #1f2937;
    --modal-border: rgba(255,255,255,0.12);
    --modal-border-strong: rgba(255,255,255,0.18);
    --modal-divider: rgba(255,255,255,0.10);
    --modal-btn-bg: #374151;
    --modal-close-color: #e5e7eb;
    --input-bg: #374151;
    --input-readonly-bg: #1f2937;
    --input-border: rgba(255,255,255,0.15);
    --text: #f3f4f6;
    --label-dim: #d1d5db;
    --btn-neutral-bg: #4b5563;
    --report-btn-color: #fbbf24;
    --report-btn-bg: rgba(245,158,11,0.12);
    --report-btn-border: rgba(245,158,11,0.25);
    --modal-item-bg: #374151;
    --card-bg2-red: #2d1f1f;
    --card-bg2-blue: #1e2a3a;
    --card-bg2-yellow: #2d2a1a;
    --store-header-gradient: linear-gradient(135deg,#2d1f1f,#3b1f1f);
    --store-header-border: #7f1d1d;
    --store-header-color: #fca5a5;
    --desc-text-color: #d1d5db;
}

/* Pola w modalach zgłoszeń — tekst zawsze ciemny gdy jasne tło, jasny gdy ciemne */
html.dark #addr-report-modal input,
html.dark #addr-edit-modal input,
html.dark #addr-report-modal select,
html.dark #addr-edit-modal select {
    color: #f3f4f6 !important;
    background-color: #374151 !important;
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark #addr-report-modal input[readonly],
html.dark #addr-edit-modal input[readonly] {
    background-color: #1f2937 !important;
    color: #9ca3af !important;
}
html.dark #addr-report-modal h3,
html.dark #addr-edit-modal h3 {
    color: #f3f4f6 !important;
}

/* Karta zgłoszenia */
#addr-reports-list .rounded-xl {
    transition: box-shadow 0.15s;
}
#addr-reports-list .rounded-xl:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Pola readonly w modalach */
#addr-report-modal input[readonly],
#addr-edit-modal input[readonly] {
    opacity: 0.75;
    cursor: default;
}

/* Przycisk zgłoszenia na stronie głównej */
#report-address-btn {
    font-size: 12px;
    transition: opacity 0.15s, transform 0.1s;
}
#report-address-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Pulsowanie kropki statusu "Oczekuje" */
@keyframes addrPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.75); }
}

/* Badge firmy w kartach zgłoszeń */
.addr-company-badge {
    background: #3730a3;
    border: 1px solid #4f46e5;
    color: #e0e7ff;
}
/* Jasny tryb — ciemny tekst na wyraźnym tle */
html:not(.dark) .addr-company-badge {
    background: #3730a3;
    border: 1px solid #312e81;
    color: #ffffff;
}