/* =========================================================================
   1. RESET I USTAWIENIA GLOBALNE
   ========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    background: #111; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px; 
}

/* =========================================================================
   2. OPIS APLIKACJI (Górna część strony)
   ========================================================================= */
#topDesc {
    width: 100%;
    max-width: 400px;
    padding-bottom: 20px;
}

#topDesc h1 { font-size: 18px; color: #FFA500; margin-bottom: 8px; }
#topDesc .short { font-size: 14px; color: #ccc; margin-bottom: 12px; }
#topDesc details summary { color: #90EE90; cursor: pointer; font-size: 14px; }
#topDesc details p { font-size: 13px; color: #bbb; margin-top: 8px; line-height: 1.4; }

#topBar {
    /* ... */
    overflow: visible; /* ← DODAĆ */
}
/* =========================================================================
   3. KONSTRUKCJA OBUDOWY TELEFONU (Wrapper)
   ========================================================================= */
#phoneWrapper {
    width: 380px;
    height: 760px; /* Obudowa musi mieć stały wymiar na obu stronach */
    background: #000;
    border: 8px solid #333;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    /*overflow: hidden;*/
	overflow: visible;
    position: relative;
}

/* =========================================================================
   4. EKRAN WEWNĘTRZNY (Zawartość aplikacji)
   ========================================================================= */
#phone {
    flex: 1;               /* To zajmuje całą przestrzeń nad sysNav */
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;      /* Zapobiega dziwnym przesunięciom */
}

/* Dodaj to, aby napisy label były widoczne na czarnym tle */
label {
    color: #ccc;      /* Jasnoszary kolor tekstu */
    font-size: 14px;
    cursor: pointer;
}

/* Opcjonalnie: styl dla wiersza, aby elementy były wyrównane */
.row {
    display: flex;
    align-items: center;
    width: 100%;
}

.center {
    justify-content: center;
}

.gap10 {
    gap: 10px;
}

/* STATUS LABEL */
#statusLabel {
    background: #222;
    color: #FFD700;
    padding: 12px;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
    min-height: 45px;
}

/* PRZYCISKI APLIKACJI */
.btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter 0.2s;
}
.btn:active { filter: brightness(1.2); }
.btn-primary { background: #006400; }
.btn-orange { background: #FFA500; }
.btn-blue { background: #4682B4; }
.btn-lightblue { background: #2196F3; }
.btn-red { background: #FF0000; }

/* POLA FORMULARZA */
input[type=text], select {
    height: 40px;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 0 10px;
    border-radius: 4px;
}

/* =========================================================================
   5. DOLNA BELKA SYSTEMOWA (Android Navigation Bar)
   ========================================================================= */
#sysNav {
    height: 55px;
    min-height: 55px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #222;
}

.sysBtn {
    background: none;
    border: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sysBtn svg {
    width: 22px;
    height: 22px;
    fill: #777;
}

/* =========================================================================
   6. TOOLTIPY (Dymki podpowiedzi)
   ========================================================================= */
[data-tooltip] { 
    position: relative; 
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    
    /* KLUCZOWE ZMIANY DLA WIDOCZNOŚCI */
    left: auto;         /* Resetujemy poprzednie ustawienia */
    right: 0;           /* Domyślnie wyrównaj do prawej krawędzi elementu... */
    margin-right: -10px; /* ...ale z lekkim przesunięciem */
    
    /* Jeśli element jest bardzo blisko prawej krawędzi, 
       wymuszamy szerokość i wyrównanie, które "ucieka" w lewo */
    width: 280px;       
    max-width: 320px;   
    
    background: rgba(30, 30, 30, 0.98);
    color: #fff;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #FFA500; /* Pomarańczowa ramka dla lepszej widoczności */
    z-index: 1000;
    text-align: left;
    
    /* Czcionka zgodnie z prośbą */
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    line-height: 1.4;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Specyficzna poprawka dla elementów po prawej stronie:
   Jeśli wiesz, że element jest z prawej, możemy mu nadać klasę .hint-left 
   lub wymusić, by dymek zawsze "szukał" lewej strony */
[data-tooltip]:hover::after { 
    opacity: 1; 
}

/* Jeśli dymek nadal wystaje, używamy tego zapisu, by przesunąć go sztywno w lewo */
.row [data-tooltip]::after {
    right: 0;           /* Zakotwiczenie po prawej stronie elementu */
    left: auto;         /* Dymek rośnie w lewą stronę ekranu */
}

/* =========================================================================
   7. STOPKA STRONY
   ========================================================================= */
footer {
    margin-top: 20px;
    color: #555;
    font-size: 11px;
    text-align: center;
}