/* css/style.css (WERSJA Z POPRAWIONYMI FORMULARZAMI LOGOWANIA i NOWYM PLANEM STOŁÓW) */

/* --- ZMIENNE GLOBALNE I RESET --- */
:root {
    /* TRYB JASNY (domyślny) */
    --primary-color: #4a148c;   /* Głęboki fiolet */
    --secondary-color: #7b1fa2; /* Jaśniejszy fiolet */
    --accent-color: #e1bee7;    /* Lawendowy akcent */
    --payment-color: #ffab40;   /* Kolor płatności - pomarańczowy */
    --success-color: #4caf50;   /* Zielony dla zrealizowanych */
    --text-color: #333;
    --border-color: #ddd;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --light-bg-color: #ba68c8;  /* Ciemniejszy lawendowy (było #f3e5f5) */ 
    --page-bg: #f9f9f9;
    --card-bg: white;
    --input-bg: white;
    --input-text: #333;
    
    /* NOWE ZMIENNE DLA PLANU STOŁÓW */
    --table-bg-color: #f6e8fb; /* Jasny kolor tła stołu z obrazka */
    --table-border-color: #9c27b0; /* Kolor ramki z obrazka */
    --seat-default-bg: #d0d2e8; /* Jasny fiolet/szary dla pustego miejsca */
    --seat-adult-bg: #6200EE; /* Głęboki Fiolet dla Dorosłych */
    --seat-child-bg: #9c27b0; /* Magenta dla Dzieci */
    --seat-default-text: #333; 
}

/* TRYB CIEMNY */
[data-theme="dark"] {
    --primary-color: #9c27b0;   /* Jaśniejszy fiolet dla ciemnego tła */
    --secondary-color: #ba68c8; /* Jeszcze jaśniejszy */
    --accent-color: #7b1fa2;    /* Ciemniejszy akcent */
    --text-color: #e0e0e0;      /* Jasny tekst */
    --border-color: #424242;    /* Ciemna ramka */
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    --light-bg-color: #4a148c;  /* Głęboki fiolet */
    --page-bg: #1a1a1a;         /* Prawie czarne tło */
    --card-bg: #2d2d2d;         /* Ciemnoszare karty */
    --input-bg: #3d3d3d;        /* Ciemne inputy */
    --input-text: #e0e0e0;      /* Jasny tekst w inputach */
    
    /* Stoły w trybie ciemnym */
    --table-bg-color: #3d2d4a;
    --table-border-color: #ba68c8;
    --seat-default-bg: #4a4a5a;
    --seat-adult-bg: #7b1fa2;
    --seat-child-bg: #ba68c8;
    --seat-default-text: #e0e0e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: var(--page-bg); 
    color: var(--text-color); 
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- GŁÓWNY UKŁAD I NAWIGACJA --- */
header { background-color: var(--primary-color); color: white; padding: 15px 30px; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 1000; }
h1 { text-align: center; margin-bottom: 15px; font-size: 1.8em; }
#main-nav { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.nav-button { background: transparent; border: 1px solid white; color: white; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; }
.nav-button:hover, .nav-button.active { background-color: white; color: var(--primary-color); transform: translateY(-2px); }
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
.page { 
    display: none; 
}
.page.active { 
    display: block; 
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
section { 
    background-color: var(--card-bg); 
    margin: 20px 0; 
    padding: 25px; 
    border-radius: 8px; 
    box-shadow: var(--shadow);
    transition: background-color 0.3s ease;
}
h2 { color: var(--primary-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; margin-bottom: 20px; }
h3 { margin-top: 20px; margin-bottom: 10px; color: var(--secondary-color); }

/* --- ELEMENTY FORMULARZY --- */
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], select, textarea { 
    width: 100%; 
    padding: 12px; 
    margin: 5px 0 10px 0; 
    border: 1px solid var(--border-color); 
    border-radius: 4px; 
    font-size: 1em;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
section label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}
button { padding: 12px 20px; background-color: var(--secondary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; }
button:hover { background-color: var(--primary-color); transform: translateY(-1px); }
button.secondary { background-color: #aaa; }
button.secondary:hover { background-color: #888; }
.remove-child-btn { background: #f44336; padding: 5px 10px; font-size: 0.8em; color: white; border-radius: 50%; width: 30px; height: 30px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; margin-top: 0; font-weight: normal; }


/* --- SEKCJA: PULPIT --- */
.dashboard-hero { background: linear-gradient(rgba(74, 20, 140, 0.7), rgba(123, 31, 162, 0.7)), url('https://images.unsplash.com/photo-1523438097201-512ae7d59c44?q=80&w=2070&auto=format&fit=crop') no-repeat center center; background-size: cover; padding: 60px 20px; border-radius: 8px; text-align: center; color: white; }
.dashboard-content h2 { color: white; font-size: 2.5em; border: none; }
.date-setter { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
#weddingDate { background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid white; font-size: 1.2em; padding: 10px; border-radius: 5px; max-width: 250px; }
#countdown { font-size: clamp(2em, 8vw, 4em); font-weight: bold; margin-top: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

/* --- MODALE --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 2000; animation: fadeIn 0.3s; }
.modal-content { background: white; padding: 30px; border-radius: 8px; width: 90%; max-width: 500px; animation: slideIn 0.3s; }
@keyframes slideIn { from { transform: translateY(-50px); } to { transform: translateY(0); } }
.modal-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 10px; }
.import-prompt { margin-top: 20px; font-style: italic; color: #666; text-align: center; }

/* --- SEKCJA: ZADANIA I KALENDARZ (bez zmian) --- */
#tasks-section .task-input { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } #tasks-section .task-input input { flex: 1; min-width: 150px; } #tasks-section .task-input button { flex-shrink: 0; } #taskList { list-style: none; } 
#taskList li { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #eee; } 
#taskList li.completed span { text-decoration: line-through; color: #888; } 
#taskList li span { flex-grow: 1; } 
#calendar-controls { display: flex; justify-content: center; align-items: center; gap: 20px; } #calendar-view { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .calendar-day { border: 1px solid #f0f0f0; padding: 5px; min-height: 80px; font-size: 0.9em; background: #fafafa;} .day-number { font-weight: bold; }
.task-on-calendar { font-size: 0.75em; padding: 3px; border-radius: 3px; margin-top: 3px; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-on-calendar.task { background-color: var(--secondary-color); }
.task-on-calendar.payment { background-color: var(--payment-color); }
.task-on-calendar.completed { background-color: var(--success-color); text-decoration: line-through;}

/* Podświetlenie dzisiejszego dnia */
.calendar-day.today {
    background-color: #ffe0b2; /* Jasny pomarańczowy/żółty */
    border: 2px solid #ff9800; /* Pomarańczowa ramka */
}

/* Upewnij się, że zadania w modalu szczegółów są czytelne */
#dayDetailsList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
#dayDetailsList li span {
    flex-grow: 1;
    margin-right: 10px;
}
#dayDetailsList li input[type="checkbox"] {
    flex-shrink: 0;
    margin-right: 5px;
}

/* --- SEKCJA: GOŚCIE (bez zmian) --- */
.guest-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; } 
.guest-form p { grid-column: 1 / -1; margin: 10px 0 0 0; font-weight: bold; } 
#children-inputs div, #edit-children-inputs div { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; } 
.guest-filters { margin: 20px 0; display: flex; gap: 10px; align-items: center; } 
.filter-btn { background-color: #eee; color: #333; } 
.filter-btn.active { background-color: var(--secondary-color); color: white; } 

/* Wrapper dla przewijanej tabeli ze sticky header */
#guests-section {
    overflow-y: visible;
    overflow-x: visible;
}

/* Stały nagłówek tabeli - zawsze widoczny */
.guest-table-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.2fr 1fr 1fr 1fr 2fr;
    gap: 0;
    background-color: var(--light-bg-color);
    border: 1px solid var(--border-color);
    font-weight: bold;
    margin-top: 20px;
}

.header-cell {
    padding: 12px;
    border-right: 1px solid var(--border-color);
    text-align: left;
}

.header-cell:last-child {
    border-right: none;
}

/* Scrollowana część tabeli */
.guest-table-scroll {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: visible;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

#guestTable { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 0;
} 

#guestTable tbody tr {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.2fr 1fr 1fr 1fr 2fr;
    gap: 0;
}

#guestTable td { 
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 12px; 
    text-align: left;
} 

#guestTable td:last-child {
    border-right: none;
}

/* Stała stopka tabeli - zawsze widoczna */
.guest-table-footer {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.2fr 1fr 1fr 1fr 2fr;
    gap: 0;
    background-color: var(--light-bg-color);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--border-color);
    font-weight: bold;
}

.footer-cell {
    padding: 12px;
    border-right: 1px solid var(--border-color);
    text-align: left;
}

.footer-cell:last-child {
    border-right: none;
}

.status-badge { display: inline-block; padding: 5px 10px; border-radius: 5px; margin-bottom: 5px; font-weight: bold; font-size: 0.9em; }
.status-unconfirmed { background-color: var(--accent-color); color: var(--text-color); }
.status-pending { background-color: var(--payment-color); color: white; }
.status-confirmed { background-color: var(--success-color); color: white; }
/* NOWY STYL DLA PRZYCISKU UWAG */
.notes-btn {
    background-color: #ff9800; /* Pomarańczowy */
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.8em;
    margin-left: 10px;
    vertical-align: middle;
}
.notes-btn:hover {
    background-color: #f57c00;
}

.status-rejected { 
    background-color: #f44336; /* Czerwony */ 
    color: white; 
}

/* --- SEKCJA: BUDŻET (bez zmian) --- */
.price-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 10px; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
.price-item label { flex-shrink: 0; font-weight: bold; }
.price-item input { max-width: 150px; }
.vendor-costs .vendor-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: center; }
#vendorList { list-style: none; margin-top: 20px; }
#vendorList li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; gap: 10px; }
.vendor-details { display: flex; flex-direction: column; }
.vendor-details .date-info { font-size: 0.8em; color: #666; }
.budget-summary p { font-size: 1.1em; margin: 5px 0; }
.budget-summary strong { color: var(--primary-color); }

/* --- SEKCJA: PLAN STOŁÓW (WIZUALIZACJA ZGODNA Z REFERENCJĄ) --- */
.table-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; } 
.seating-area { display: flex; flex-direction: column; gap: 20px; } 
.guest-pool { width: 100%; min-height: auto; max-height: 250px; overflow-y: auto; background: #f9f9f9; border: 2px dashed #ccc; padding: 10px; border-radius: 5px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }
.guest-item { background-color: var(--accent-color); padding: 8px 15px; margin: 5px; border-radius: 20px; cursor: grab; user-select: none; text-align: center; }

#tables-container { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 50px; 
    padding: 20px 0; 
} 
.table-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    width: 300px; /* Wąska szerokość dla stołu, jak na obrazku */
    flex-shrink: 0;
}
.table-wrapper button { /* Układ przycisków */
    font-size: 0.9em;
    width: 100%;
}
.table-wrapper > div:last-child { /* Kontener przycisków */
    width: 300px; /* Dopasowanie szerokości do stołu */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.clear-table-btn { 
    background-color: #6200EE; 
    padding: 10px 20px;
}
.remove-table-btn { 
    background-color: #9c27b0; 
    padding: 10px 20px;
}
.clear-table-btn:hover { background-color: #5500dd; }
.remove-table-btn:hover { background-color: #8b23a0; }


.table-representation { 
    border: 3px solid var(--table-border-color); 
    background: var(--table-bg-color); /* Jasny kolor tła */
    border-radius: 10px;
    position: relative; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    color: var(--seat-default-text); 
    font-weight: bold; 
    text-align: center; 
    width: 100%; 
    padding: 0;
    min-height: 400px; /* Wystarczająca wysokość dla pionowej siatki */
} 
.table-representation span { /* Nazwa stołu (ABSOLUTNA) */
    position: absolute; 
    top: 0; 
    left: 50%;
    transform: translateX(-50%);
    
    background: var(--primary-color); /* Głęboki fiolet */
    color: white;
    padding: 10px 15px;
    margin: 0; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    
    font-size: 1em; 
    z-index: 10; 
    pointer-events: none; 
}

/* NOWE STYLISTYKA MIEJSC */
.seat { 
    width: 130px; /* Ustalona szerokość */
    height: 50px; 
    background: var(--seat-default-bg); 
    border: 1px solid var(--table-border-color); 
    border-radius: 5px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 0.85em; 
    text-align: center; 
    overflow: hidden; 
    cursor: pointer; 
    transition: all 0.2s; 
    padding: 5px;
    margin: 5px; 
    z-index: 1;
    flex-shrink: 0;
} 
.seat:hover { 
    transform: scale(1.05); 
} 
.seat.occupied { 
    color: white; 
    cursor: grab; 
    border-color: rgba(255, 255, 255, 0.4);
} 

/* KOLORY DLA MIEJSC */
.seat.seat-adult {
    background: var(--seat-adult-bg); 
}
.seat.seat-child {
    background: var(--seat-child-bg); 
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* UKŁAD DLA STOŁÓW PROSTOKĄTNYCH (PIONOWY) */
.table-representation.rect { 
    display: grid;
    grid-template-columns: auto 1fr auto; /* 3 kolumny: miejsca lewe, stół, miejsca prawe */
    grid-gap: 0; 
    padding-top: 40px; /* Odstęp na nazwę stołu */
}
.table-seats-column {
    display: flex;
    flex-direction: column; 
    justify-content: space-evenly; 
    align-items: center;
    width: 100%;
    align-self: center;
    justify-self: center;
}
.seat-spacer { /* Do wyrównania kolumn */
    height: 50px;
    margin: 5px;
}

/* UKŁAD DLA STOŁÓW OKRĄGŁYCH (ELASTYCZNA SIATKA) */
.table-representation.round { 
    border-radius: 50%; 
    width: 320px; 
    height: 320px; 
    padding: 20px;
    justify-content: space-around; 
    align-content: space-around; 
    /* W kołach miejsca lądują w głównym kontenerze Flex (leftColumn), więc nadpisujemy display */
    display: flex;
} 

/* --- SEKCJA: EKSPORT --- */
.export-buttons { display: flex; gap: 15px; margin-top: 20px; }
#importFileInput { display: none; }
.import-label { background-color: var(--secondary-color); color: white; padding: 12px 20px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; }
.import-label:hover { background-color: var(--primary-color); }



#vendorTable th, #vendorTable td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
    font-size: 0.9em;
}

#vendorTable thead th {
    background-color: var(--light-bg-color);
}

/* Styl dla wiersza dostawcy (kliknięcie) */
.vendor-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.vendor-row:hover {
    background-color: #f7f7ff;
}

/* Wiersz szczegółów (ukryty domyślnie) */
.payment-details-row td {
    padding: 0;
    border-top: none;
    border-bottom: 2px solid var(--accent-color);
}

.payment-details-content {
    padding: 10px 20px;
    background-color: #fafafa;
}

/* Tabela rat wewnątrz szczegółów */
.payments-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.payments-list th, .payments-list td {
    padding: 5px 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 0.85em;
}
.payments-list th {
    background-color: #eee;
}

/* Styl dla paska postępu */
.progress-bar-container {
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    height: 15px;
    width: 100%;
    margin: 2px 0;
}
.progress-bar {
    height: 100%;
    text-align: center;
    color: white;
    font-size: 0.8em;
    line-height: 15px;
}

/* ===============================================
   RESPONSIVE DESIGN - WERSJA MOBILNA
   =============================================== */

/* Style dla paginacji */
.pagination-container {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.pagination-info {
    color: #666;
    font-size: 0.9em;
}

.pagination-controls {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-btn {
    padding: 8px 16px;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.pagination-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination-pages {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pagination-page {
    padding: 8px 12px;
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    min-width: 40px;
}

.pagination-page.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

.pagination-dots {
    padding: 0 5px;
    color: #666;
}

/* Tablety (768px - 1024px) */
@media (max-width: 1024px) {
    main {
        padding: 15px;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    section {
        padding: 20px;
    }
    
    /* Kalendarz responsywny */
    #calendar-view {
        font-size: 0.85em;
    }
    
    .calendar-day {
        min-height: 60px;
        padding: 3px;
    }
    
    /* Tabele gości */
    #guestList {
        overflow-x: auto;
    }
    
    /* Plan stołów - mniejsze */
    .table-representation {
        transform: scale(0.9);
    }
}

/* === STARE MEDIA QUERIES - ZASTĄPIONE PRZEZ mobile-responsive.css === */
/*
@media (max-width: 768px) {
    /* Nawigacja */
    header {
        padding: 10px 15px;
    }
    
    h1 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }
    
    #main-nav {
        flex-direction: column;
        gap: 5px;
    }
    
    .nav-button {
        width: 100%;
        text-align: center;
    }
    
    /* Główny layout */
    main {
        padding: 10px;
    }
    
    section {
        padding: 15px;
        margin: 15px 0;
    }
    
    h2 {
        font-size: 1.3em;
    }
    
    /* Formularze */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px; /* Zapobiega zoom na iOS */
    }
    
    button {
        padding: 12px 16px;
        width: 100%;
        margin-top: 10px;
    }
    
    /* Modale */
    .modal-content {
        width: 95%;
        padding: 20px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Pulpit - hero */
    .dashboard-hero {
        padding: 40px 15px;
    }
    
    #countdown {
        font-size: 2em;
    }
    
    /* Kalendarz */
    #calendar-view {
        font-size: 0.7em;
        gap: 1px;
    }
    
    .calendar-day {
        min-height: 50px;
        padding: 2px;
    }
    
    .task-on-calendar {
        font-size: 0.65em;
        padding: 2px;
    }
    
    #calendar-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Lista gości - przewijana */
    #guestList {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #guestList table {
        min-width: 600px; /* Wymusza przewijanie */
    }
    
    /* Budżet - tabele */
    .budget-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .budget-table table {
        min-width: 500px;
    }
    
    /* Plan stołów - WYŁĄCZ drag & drop na mobile */
    .table-representation {
        transform: scale(0.75);
        transform-origin: top left;
        margin-bottom: 20px;
    }
    
    .seat {
        pointer-events: auto; /* Pozwól na kliknięcia */
    }
    
    #unassigned-guests {
        max-height: 200px;
    }
    
    /* Paginacja na mobile */
    .pagination-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .pagination-btn {
        width: 100%;
    }
    
    .pagination-pages {
        flex-wrap: wrap;
    }
}

/* Małe telefony (do 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.1em;
    }
    
    h2 {
        font-size: 1.1em;
    }
    
    section {
        padding: 10px;
    }
    
    /* Pulpit */
    .dashboard-hero {
        padding: 30px 10px;
    }
    
    .dashboard-content h2 {
        font-size: 1.5em;
    }
    
    #countdown {
        font-size: 1.5em;
    }
    
    /* Kalendarz - jeszcze mniejszy */
    #calendar-view {
        font-size: 0.6em;
    }
    
    .calendar-day {
        min-height: 40px;
        padding: 1px;
    }
    
    /* Plan stołów - jeszcze mniejszy */
    .table-representation {
        transform: scale(0.6);
    }
    
    /* Modale - pełny ekran */
    .modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Orientacja pozioma na telefonie */
@media (max-width: 768px) and (orientation: landscape) {
    .dashboard-hero {
        padding: 20px 15px;
    }
    
    #countdown {
        font-size: 1.8em;
    }
    
    .modal-content {
        max-height: 85vh;
    }
}

/* Dark mode (opcjonalne - dla oszczędności baterii) */
@media (prefers-color-scheme: dark) {
    /* Możesz dodać dark mode jeśli chcesz */
    /* body { background-color: #1a1a1a; color: #e0e0e0; } */
}

/* Wysoka rozdzielczość (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Obrazy i ikony mogą być optymalizowane */
}
*/
/* === KONIEC STARYCH MEDIA QUERIES === */

/* Print styles */
@media print {
    header, #main-nav, button, .modal-overlay {
        display: none !important;
    }
    
    section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .table-representation {
        transform: none;
    }
}

/* Style dla tabelki płatności w modalu */
.payments-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.payments-list th {
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

.payments-list td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.payments-list tr:hover {
    background-color: var(--light-bg-color);
}

.payments-list tbody tr:last-child td {
    border-bottom: none;
}

/* Style dla przycisków akcji w tabeli dostawców */
.vendor-row button {
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.vendor-row button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Responsive dla przycisków w tabeli */
@media (max-width: 768px) {
    .vendor-row button {
        font-size: 0.65em;
        padding: 3px 6px;
        display: block;
        width: 100%;
        margin: 2px 0;
    }
}