:root {
    /* Ustawienie bazowego rozmiaru czcionki dla rem, ułatwia skalowanie */
    font-size: 16px;
    /* Paleta kolorów (przykład) */
    --color-primary: #77cfe8; /* Kolor z font_titel_2 */
    --color-background-light: rgb(249, 249, 249);
    --color-text-dark: rgb(0, 0, 0);
    --color-border-light: rgb(220, 220, 220);
    --color-footer-text: rgb(150, 150, 150);
}BODY {
background-color: rgb(249,249,249);
width: 100%; 
margin: 0px auto;
padding-top: 0px;
}
.logo{
background-image: url(images/top.jpg);
background-repeat: repeat-x;
background-position: center center;
width: 100%;
height: 180px;
display: block;
}
.logo_flash{
width: 316px;
height: 150px;
float:left;
}
.menu_flash{
width: 347px;
height: 29px;
float: right;
margin-top: 121px;
margin-right: 6px;
display: inline;
}
.centrum{
width: 100%;
background-color: white;
padding-top:20px;
padding-bottom:20px;
}
.stopka{
width: 100%;
height: 30px;
background-image: url(images/tlo_komponent.jpg);
}
.tabelka{
width: 100%;
}
.tdtabelka{
border-bottom: 1px  solid rgb(220,220,220);
}
.top{
padding: 10px;
background-image: url(images/tlo_komponent.jpg);
}
.top1{
padding: 10px;
background-image: url(images/tlo_komponent.jpg);
margin-bottom:10px;
}
.top2{
width: 230px;
background-color: black;
background-position: center right;
background-repeat: no-repeat;
height: 37px;
margin:10px;
}
.top3{
width: 200px;
background-image: url(images/top2.gif);
background-position: center center;
background-repeat: no-repeat;
height: 36px;
}
.font_titel{
padding-top: 7px;
padding-left: 30px;
font-family: arial;
font-size: 14px;
color: white;
padding-bottom:10px;
}
.komponent{
background-color: rgb(250,250,250);
margin-left: 12px;
margin-right: 12px;
}
.font_titel_2{
font-family: arial;
font-weight: bold;
font-size: 16px;
color: #77cfe8;
}
.pole{
width: 620px;
margin-left: 12px;
}

.tresci{
font-family: verdana;
font-size: 11px;
color: rgb(0,0,0);
padding: 15px;
text-align: justify;
}
.tresci a{
font-family: verdana;
font-size: 11px;
color: rgb(0,0,0);
padding: 15px;
text-align: justify;
}
.pudlo{
float:left; 
margin: 5px;
}
.font{
font-family: verdana;
font-size: 11px;
color: rgb(0,0,0);
}
.font a{
color: rgb(0,0,0);
text-decoration: none;
}
.font a:hover{
color: rgb(0,0,0);
text-decoration: underline;
}
.logowanie_tekst{
font-family: verdana;
font-size: 10px;
color: rgb(0,0,0);
}
.lewa1{
background-color: white;
width: 200px;
display: inline;
float: left;
margin-top: 20px;
}
.prawa1{
background-color: white;
width: 400px;
display: inline;
float: right;
margin-top: 20px;
}
/* --- Główny Kontener Menu --- */
.links {
    padding: 0.5rem 0.5rem; /* Mniejszy padding, bardziej nowoczesny */
    font-family: Verdana, sans-serif;
    background-color: white; /* Zakładając, że .komponent jest tłem */
}

/* --- Sekcja Zalogowanego Użytkownika --- */
.zalogowany {
    /* Ulepszone stylowanie statusu logowania */
    font-size: 0.75rem; /* ~12px */
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-dark);
}

.zalogowany b {
    color: var(--color-primary); /* Podkreślenie nazwy Jarek */
    font-weight: bold;
}

/* --- Nagłówki Grup Linków (Jeśli wprowadzisz h3) --- */
.link-group-title {
    font-size: 0.8rem;
    color: var(--color-text-dark);
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--color-background-component);
}

/* --- Lista Linków --- */
.links ul {
    list-style: none; /* Usunięcie domyślnych znaczników */
    padding: 0;
    margin: 0;
}

li.link {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    /* Płytki kolor tła po najechaniu */
    transition: background-color 0.2s, padding-left 0.2s; 
}

li.link:hover {
    background-color: var(--color-background-component); 
    padding-left: 0.2rem; /* Subtelny efekt wysunięcia */
    
}

li.link a {
    /* Styl samych linków */
    display: block; /* Umożliwienie klikania na całą szerokość elementu li */
    padding: 0.4rem 0.5rem; 
    font-family: Verdana, sans-serif;
    font-size: 0.8125rem; /* ~13px - standardowa czytelna wielkość */
    color: var(--color-text-dark);
    font-weight: normal; /* Usuwamy pogrubienie */
    text-decoration: none;
    transition: color 0.2s;
}

li.link a:hover {
    color: var(--color-primary); /* Kolor Cool-Met po najechaniu */
    text-decoration: none;
    font-weight:bold;
}

/* --- Usunięcie przestarzałych strzałek i dodanie nowoczesnego znacznika --- */
/* Usuwamy obrazki strzałek (images/strzalka.gif) */
li.link img {
    display: none; 
}

/* Opcjonalnie: Dodanie nowoczesnej strzałki po prawej stronie */
li.link a::after {
    content: '<'; /* Użycie nowoczesnego znaku unicode */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    opacity: 0; /* Domyślnie ukryty */
    transition: opacity 0.2s;
}

li.link:hover a::after {
    opacity: 1; /* Pojawia się po najechaniu */
}

/* --- Stylizacja Wylogowania --- */
.logout-link li.link a {
    color: #cc0000; /* Kolor czerwony dla akcji wylogowania */
    font-weight: bold;
    border-top: 1px solid var(--color-border-light);
    margin-top: 1rem;
}

.logout-link li.link a:hover {
    color: #ff3333;
    background-color: var(--color-background-component);
}
.stopka_linki{
float: left;
margin-top: 10px;
margin-left: 8px;
}
.stopka_linki a{
font-family: verdana;
color: rgb(150,150,150);
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.stopka_linki a:hover{
color: rgb(0,0,0);
}
.stopka_tekst{
font-family: verdana;
color: rgb(150,150,150);
font-size: 11px;
text-align: right;
margin-top: 10px;
margin-right: 8px;
float: right;
}
.stopka_tekst a{
font-family: verdana;
color: rgb(150,150,150);
font-size: 11px;
}
INPUT{
border: rgb(217,217,217) 1px solid;
font-size: 12px;
background-color: rgb(255,255,255); 
color: black;
font-family: tahoma,sans-serif;
margin: 0px;
padding: 4px;
}
textarea{
border: rgb(217,217,217) 1px solid;
font-size: 12px;
background-color: rgb(255,255,255); 
color: black;
font-family: tahoma,sans-serif;
overflow: hidden;
padding: 0px;
margin: 0px;
}
select{
border: rgb(217,217,217) 1px solid;
font-size: 12px;
background-color: rgb(255,255,255); 
color: black;
font-family: tahoma,sans-serif;
padding: 4px;
margin: 0px;
width: 150px;
}
input.button_input{
background: transparent url(images/ok.jpg) 0 0 no-repeat;
border: none;
width: 64px;
height: 21px;
font-size: 0;
cursor: pointer;
}
.logowanie{
padding-top: 10px;
text-align: center;
padding-bottom: 10px;
}
.obrazek{
width: 200px;
margin-top:15px;
}
.reklama{
background-color: white;
border-top: 2px rgb(249,249,249) solid;
padding:5px;
text-align: right;
vertical-align: middle;
}
.data_tekst{
color: rgb(167,167,167);
font-family: verdana;
font-size: 9px;
font-style: italic;
text-decoration: none;
}


.oddzielacz_menu{
text-align: right;
font-family: arial;
color: #77cfe8;
font-weight: bold;
font-size: 14px;
text-decoration: underline;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
list-style-type: none;
}

.tresc_error{
color: red;
}

.error{
color: red;
font-weight: bold;
border: 1px solid red;
text-align: center;
padding:3px;
margin-bottom:3px;
}
.errorok{
color: green;
font-weight: bold;
border: 1px solid green;
text-align: center;
padding:13px;
margin-bottom:10px;
}

fieldset{
border: 1px solid rgb(212,212,212);
}
legend{
font-family: verdana;
color: rgb(115,115,115);
font-weight: bold;
font-size: 13px;
}
.tytul_formularze{
border-bottom: 1px solid  rgb(212,212,212);
padding-right: 5px;
padding-left: 5px;
padding-bottom: 2px;
vertical-align:bottom;
}
.tdtd2{
color: rgb(175,175,175);
padding:2px;
}
.tdtd{
padding:2px;
text-align: left;
}
.tdtd a{
padding:0px;
margin:0px;
text-align: left;
}
td a{
text-decoration: none;
}
td a:hover{
text-decoration: underline;
}


.stronicowanie{
border: 1px solid rgb(165,165,165);
background-color: rgb(249,249,249);
padding: 5px;
margin-bottom:7px;
margin-top:7px;
}
.link_stronicowania{
border: 1px solid rgb(196,196,196);
background-color: rgb(240,240,240);
padding: 1px;
}
.guziki{
color: red;
font-family: verdana;
font-size: 12px;
font-weight: bold;
margin-right:3px;
}
.zalogowany{
border: 1px solid black;
padding:2px;
margin-bottom:10px;
font-family: verdana;
font-size: 11px;
}

/* --- Ogólne Stylowanie Kontenera Zleceń --- */
.panel-zlecen {
    width: 100%;
    margin-top: 1.5rem;
}

.panel-zlecen h2 {
    font-family: Arial, sans-serif;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

.btn-dodaj-container {
    margin-bottom: 1rem;
    text-align: right;
}

/* --- Stylowanie Tabeli Zleceń --- */
.tabela-zlecen {
    width: 100%;
    border-collapse: collapse; /* Usunięcie podwójnych linii */
    font-family: Verdana, sans-serif;
    font-size: 0.8rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtelny cień */
}

.tabela-zlecen thead {
    background-color: var(--color-background-component);
    border-bottom: 2px solid var(--color-primary);
}

.tabela-zlecen th,
.tabela-zlecen td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.tabela-zlecen th {
    color: var(--color-text-dark);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.tabela-zlecen tbody tr:hover {
    background-color: #f5f5f5; /* Efekt hover dla rzędów */
}

/* --- Kolumna Akcji --- */
.tabela-akcje a {
    text-decoration: none;
    font-size: 1.1rem;
    margin-right: 0.5rem;
    transition: color 0.2s;
    color: #666;
}

.tabela-akcje a:hover {
    color: var(--color-primary);
}

/* --- Stylowanie Statusów (Badges) --- */
.status-badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}

.status-nowe {
    background-color: #f0ad4e; /* Żółty */
}

.status-realizacja {
    background-color: var(--color-primary); /* Niebieski Cool-Met */
}

.status-wykonane {
    background-color: #5cb85c; /* Zielony */
}

/* --- RESPONSIVE CSS dla tabeli --- */
@media (max-width: 768px) {
    .tabela-zlecen table, .tabela-zlecen thead, .tabela-zlecen tbody, .tabela-zlecen th, .tabela-zlecen td, .tabela-zlecen tr {
        display: block; /* Przekształca elementy tabeli w bloki */
    }

    .tabela-zlecen thead tr {
        position: absolute;
        top: -9999px; /* Ukrywa nagłówki kolumn */
        left: -9999px;
    }

    .tabela-zlecen tr {
        border: 1px solid var(--color-border-light);
        margin-bottom: 1rem;
        display: block;
        padding: 0.5rem;
    }

    .tabela-zlecen td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; /* Miejsce na etykietę */
        text-align: right;
    }

    .tabela-zlecen td::before {
        /* Wykorzystanie data-label jako etykiety */
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
        color: #777;
    }

    .tabela-zlecen .tabela-akcje {
        text-align: right;
        padding-left: 0;
    }
}

/* --- Ogólne Stylowanie Kontenera Formularza --- */

.pole {
    /* Upewnienie się, że pole formularza jest responsywne i zajmuje całą dostępną szerokość */
    width: 100%;
    margin-left: 0;
    padding: 1.5rem 0;
}


/* --- Sekcja Fieldset i Legend (Grupy Pól) --- */

fieldset {
    /* Poprawa wyglądu obramowania grupy pól */
    border: 1px solid rgb(212, 212, 212);
    padding: 1rem 1.5rem 1.5rem 1.5rem; /* Zwiększony padding wewnętrzny */
    margin-bottom: 1.5rem; /* Odstęp między grupami */
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
}

legend {
    /* Ustawienie nagłówka grupy pól na bardziej widoczne */
    font-family: Arial, sans-serif;
    color: var(--color-primary); /* Użycie koloru Cool-Met */
    font-weight: bold;
    font-size: 1rem; /* 16px */
    padding: 0 0.5rem;
}

/* --- Etykiety i pola Tytułów --- */

.tytul_formularze {
    /* Stylowanie etykiet (tytułów pól) */
    font-family: Verdana, sans-serif;
    font-size: 0.875rem; /* 14px */
    color: rgb(70, 70, 70);
    padding-top: 0.75rem; /* Odstęp nad etykietą */
    padding-bottom: 0.25rem;
    font-weight: bold;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem; 
}

.form-group {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* Wiersze dla danych Klienta (etykieta i input obok siebie) */
.form-row {
    display: grid;
    grid-template-columns: 150px 1fr; 
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
}

.form-row .form-label {
    padding-top: 0;
    margin-bottom: 0;
}

/* Przycisk akcji */
.logowanie {
    text-align: right;
    padding-top: 1rem;
    padding-bottom: 0;
}

/* --- Menu Zwijane --- */

.menu-toggle {
    cursor: pointer;
    user-select: none; /* Zapobieganie zaznaczeniu tekstu */
    padding-right: 20px;
    position: relative;
    transition: background-color 0.2s;
}

.menu-toggle:hover {
    background-color: var(--color-background-component); /* Lekkie podświetlenie */
}

/* Wskaźnik zwijania (strzałka) */
.menu-toggle::after {
    content: '▼'; /* Strzałka w dół (zamknięte) */
    font-size: 0.8em;
    position: absolute;
    right: 5px;
    top: 10%;
    transform: translateY(-10%);
    color: var(--color-primary);
    margin:0px;
    padding:0px;
}

/* Wskaźnik dla otwartego menu */
.menu-toggle.active::after {
    content: '▲'; /* Strzałka w górę (otwarte) */
}

/* Domyślne ukrycie podlinków */
.link-group {
    display: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    /* Dodanie lekkiej animacji do płynnego przechodzenia */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out; 
}

/* Stan otwarty (pokazanie podlinków) */
.link-group.open {
    display: block; /* Używamy display: block zamiast animacji max-height dla prostoty */
    /* Jeśli chcesz płynną animację, musisz użyć JS do ustawienia max-height. 
       Dla prostoty, zostawiamy display: block. */
}

/* --- Stylowanie Głównego Kontenera Wyceny --- */
.result {
    /* Użycie zmiennych z Twojego zmodernizowanego CSS */
    background-color: #ffffff; /* Białe tło */
    border: 1px solid var(--color-border-light); /* Subtelna ramka */
    border-radius: 8px; /* Lekko zaokrąglone rogi */
    padding: 20px;
    margin: 1.5rem 0; /* Odstęp od innych elementów */
    font-family: Arial, sans-serif;
    color: var(--color-text-dark);
    
    /* Nowoczesny efekt: delikatny cień */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- Stylowanie Nagłówka (Szacunkowa wycena dla...) --- */
.result strong:first-child {
    display: block;
    font-size: 1.15rem;
    color: var(--color-primary); /* Akcent firmowy Cool-Met */
    margin-bottom: 5px;
    padding-bottom: 5px;
}

/* --- Główny Kontener Wyceny --- */
.result {
    /* Wyrównanie i Pozycjonowanie */
    max-width: 450px; /* Maksymalna szerokość dla czytelności */
    margin: 2rem auto; /* Wyśrodkowanie na stronie */
    
    /* Tło i Wyróżnienie */
    background-color: #f7f9fb; /* Bardzo jasne, subtelne tło (prawie białe) */
    border: 2px solid var(--color-primary); /* Wyraźna ramka w kolorze firmowym */
    border-radius: 12px; /* Bardziej zaokrąglone rogi */
    padding: 25px;
    font-family: Arial, sans-serif;
    color: #333333; /* Ciemny, czytelny tekst */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Głęboki, nowoczesny cień */
    line-height: 1.5;
}

/* --- Nagłówek i Parametry --- */

.result strong:first-child {
    display: block;
    font-size: 1.2rem;
    color: var(--color-primary); 
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0; /* Delikatna linia oddzielająca nagłówek */
    font-weight: bold;
}

/* Linia Parametrów (Materiał, Ilość) */
.result br {
    display: none; /* Ukrywamy domyślne <br> */
}

.result span {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 5px;
}

/* Stylowanie linii oddzielającej (HR) */
.result hr {
    border: none;
    border-top: 2px dashed #dddddd; /* Przerywana linia dla separacji wyników */
    margin: 20px 0;
}

/* --- Sekcja Wyników i Wyceny --- */

/* Całkowite RAZEM NETTO (Najważniejszy wynik) */
.result strong {
    display: block;
    font-size: 2.0rem; /* Bardzo duża, wyeksponowana czcionka */
    font-weight: 800; /* Ekstra pogrubienie */
    color: #111111; /* Prawie czarny, bardzo kontrastowy */
    margin: 10px 0;
    padding: 10px 15px;
    background-color: #e8f9ff; /* Jasny, niebieski akcent tła dla wyróżnienia */
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    text-align: center; /* Wyśrodkowanie tekstu w środku bloku wyniku */
}

/* Styl dla opłaty minimalnej (Uwaga) */
.result .minimal-fee { 
    display: block;
    font-size: 0.85rem;
    color: #999999;
    margin-top
    }

.brutto-price { 
    color: red;
}