/* Główne reguły interfejsu */
/* 1. Import czcionki Google Sans (lub darmowego odpowiednika) z Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* 2. Definicja zmiennych globalnych w elemencie :root */
:root {
    /* Używamy zaimportowanej czcionki (tutaj jako zamiennik bezpieczny Plus Jakarta Sans, możesz wpisać "Google Sans" jeśli masz pliki .woff2 u siebie) */
    --font-sans: "Google Sans", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Twoje fonty o stałej szerokości znaków (monospaced) do kodów lub danych tabelarycznych */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* 3. Globalne przypisanie do całej aplikacji */
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Przykładowe użycie fontu mono dla kodów, ID wiadomości lub znaczników czasowych */
code, .mail-uid, .badge-mono {
    font-family: var(--font-mono);
    font-size: 0.875em;
}        
        
        body { 
            background-color: #ffffff; 
            font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            
    grid-template-rows: auto 1fr;
    display: grid;
    
        }
        
        /* Sidebar */
        .sidebar { 
            background-color: #ffffff; 
            min-height: 100vh; 
            border-right: 1px solid #e3e6f0; 
            box-shadow: 2px 0 5px rgba(0,0,0,0.02);
        }
        .nav-link { 
            color: #6e707e; 
            font-weight: 700; 
             
            margin-bottom: 5px;
            padding: 10px 15px;
            transition: all 0.2s;
            font-size: 15px;
        }
        .nav-link.active { 
            font-weight: 700;
            color: black !important; 
            
        }
        .nav-link:hover:not(.active) { 
            background-color: #f1f3f9; 
            color: #4e73df; 
        }

      
        .mail-list-header {
            padding: 15px 20px;
            background: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
            font-weight: 600;
            color: #4e73df;
            
        }
/* Lewa kolumna z listą */
.mail-list-box {
    width: 28%;
    background: #ffffff;
    border: 0;
    margin-bottom: 0;
    
    /* Zamiast nadawać wysokość tutaj, robimy z tego flex-box: */
    display: flex;
    flex-direction: column;
    height: 100%; /* Zajmij 100% wysokości od .mailbox-layout */
}

/* Prawa kolumna z podglądem */
.mail-view-box {
    flex-grow: 1; /* Zajmie całą pozostałą szerokość */
    background: #ffffff;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100%; /* Zajmij 100% wysokości od .mailbox-layout */
}



        /* Pojedynczy wiersz maila */
        /* Styl dla całego wiersza maila */
.mail-item {
    border-bottom: 1px solid #eef2f5;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.mail-item:hover {
    background-color: #f8f9fa;
}

/* LINIJKA 1: Nadawca - mniejszy, elegancki font */
.mail-item-sender {
    font-size: 15px;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

/* LINIJKA 1: Data - mała, wyrównana do prawej, delikatny szary kolor */
.mail-item-date {
    font-size: 11px;
    color: #868e96;
    white-space: nowrap;
    flex-shrink: 0; /* Data nigdy się nie ugnie ani nie schowa */
}

/* LINIJKA 2: Temat - pod spodem, mniejszy font, automatyczne ucinanie długiego tekstu (...) */
.mail-item-subject {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

/* Stan nieprzeczytany: pogrubiamy tylko nadawcę i nadajemy lekki ton tematowi */
.mail-item.unread .mail-item-sender {
    font-weight: 700;
    color: #212529;
}

.mail-item.unread .mail-item-subject {
    font-weight: 600;
    color: #495057;
}

/* Zmniejszamy delikatnie rozmiar awatara, żeby lepiej pasował do dwulinijkowego układu */
.mail-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
        /* Prawa kolumna: Podgląd wiadomości */
        .mail-view-box {
            width: 62%;
            border: none;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            overflow: hidden;
        }
        .mail-view-header {
            padding: 20px;
            border-bottom: 1px solid #e3e6f0;
            background: #fdfdfd;
        }
        .mail-view-subject {
            font-size: 1.35rem;
            font-weight: 600;
            color: #3a3b45;
            margin: 0 0 8px 0;
        }
        .mail-view-meta {
            display: flex;
            justify-content: space-between;
            color: #858796;
            font-size: 0.85rem;
        }

        /* Elementy wewnętrzne podglądu */
        .mail-placeholder {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #a3a6b5;
            font-size: 1.05rem;
            background: #fafbfe;
        }
        .mail-placeholder i {
            font-size: 3.5rem;
            color: #dddfeb;
            margin-bottom: 15px;
        }
        .mail-body-frame {
            width: 100%;
            flex: 1;
            border: none;
            background: #ffffff;
        }
        .mail-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #white;
    font-size: 16px;
    text-transform: uppercase;
    user-select: none;
    flex-shrink: 0; /* Zabezpiecza przed deformacją kółka */
}
/* 1. Dla Chrome, Edge, Opera, Brave */
#inbox-list::-webkit-scrollbar {
    width: 6px;               /* Szerokość pionowej belki */
    height: 6px;              /* Wysokość poziomej belki */
}

/* UKRYWANIE STRZAŁEK: Ta reguła całkowicie usuwa przyciski góra/dół */
#inbox-list::-webkit-scrollbar-button {
    display: none !important;
    width: 0;
    height: 0;
}

/* Tło, po którym porusza się suwak */
#inbox-list::-webkit-scrollbar-track {
    background: transparent;  
}

/* Sam suwak (pasek) */
#inbox-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; 
    border-radius: 0px;       
    transition: background-color 0.2s ease;
}

/* Reakcja na najechanie myszką na suwak */
#inbox-list::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; 
}

/* 2. Dla Firefoxa (on domyślnie w trybie 'thin' nie wyświetla strzałek) */
#inbox-list {
    scrollbar-width: thin;          
    scrollbar-color: #cbd5e1 transparent; 
}

#mail-pagination {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
}

#mail-pagination nav {
    width: 100% !important;
}

#mail-pagination ul.pagination {
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
   
}

#mail-pagination ul.pagination .page-item {
    flex: 1 !important; /* To sprawi, że każdy przycisk (numerek) podzieli się równo przestrzenią */
    text-align: center !important;
}

#mail-pagination ul.pagination .page-link {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important; /* Usuwa zaokrąglenia, żeby ładnie przylegało do krawędzi kolumny */
    padding: 10px 0 !important; /* Trochę wyższe przyciski, łatwiej klikać */
     border: none; !important;
}


.mailbox-container {
    display: flex;
    align-items: stretch; /* Kluczowe: zmusza obie kolumny do równego wzrostu */
    height: calc(100vh - 140px); /* Nadajemy wysokość całemu układowi */
    border:0;
}
/* Definiowanie szerokości kolumn dla widoków desktopowych */
@media (min-width: 768px) {
    #panel-mail-list {
        width: 350px !important; /* Sztywna szerokość listy na PC */
        max-width: 350px !important;
    }
}



@media (min-width: 1200px) {
    #panel-mail-list {
        width: 380px !important; /* Nieco szersza lista na bardzo dużych monitorach */
        max-width: 380px !important;
    }
}

/* Subtelne poprawki wyglądu list oraz iframa */
.unified-app .nav-link {
    padding: 0.6rem 0.8rem;
    transition: all 0.2s ease;
}
.unified-app .nav-link:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: #000 !important;
}