/* Zmienne kolorów - Moto Dark Mode */
:root {
  --bg-dark: #121212;
  --bg-panel: #1e1e1e;
  --bg-hover: #2d2d2d;
  --text-main: #e0e0e0;
  --text-muted: #888;
  --accent-orange: #f39c12;
  --accent-green: #27ae60;
  --accent-purple: #9b59b6;
  --border-color: #333;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; background-color: var(--bg-dark); color: var(--text-main); }

/* --- Nagłówek --- */
#header { background-color: var(--bg-panel); border-bottom: 1px solid var(--border-color); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.brand { display: flex; align-items: center; gap: 15px; }
.brand h2 { margin: 0; font-size: 1.2rem; color: #fff; }
.brand #status { font-size: 0.8rem; color: var(--accent-orange); }

/* Zwiększony odstęp między całymi grupami */
.controls { display: flex; align-items: center; gap: 20px; }

.auth-hidden { display: none !important; }

/* KOSMETYKA: Profil użytkownika na PC */
#user-info { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding-right: 20px; 
    border-right: 1px solid var(--border-color); /* Pionowa kreska oddzielająca */
}

#user-name {
    font-weight: 500;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

#user-avatar { 
    border-radius: 50%; /* Okrągły awatar */
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* KOSMETYKA: Pasek narzędzi (Garaż, Zapisz, Kosz) */
#authenticated-controls { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    gap: 10px; 
    align-items: center; 
}
/* Przyciski */
button { border: none; padding: 8px 15px; cursor: pointer; font-weight: bold; border-radius: 6px; transition: 0.2s; color: white; }
button:hover { opacity: 0.8; transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); }
.btn-garage { background-color: var(--accent-purple); }
.btn-save { background-color: #3498db; }
.btn-clear { background-color: #e74c3c; }
.btn-generate { background-color: var(--accent-orange); width: 100%; padding: 15px; font-size: 1.1rem; color: #000; margin-bottom: 10px;}
.btn-gpx { background-color: #555; width: 100%; }
.btn-locate { background-color: var(--bg-hover); color: var(--text-main); border: 1px solid var(--border-color); width: 100%; margin-bottom: 15px; }

/* --- Layout Główny --- */
#main-container { display: flex; flex-grow: 1; overflow: hidden; position: relative; }
#map { flex-grow: 1; height: 100%; }

/* --- Sidebar (Lista Trasy) --- */
#sidebar { width: 350px; background-color: var(--bg-panel); border-left: 1px solid var(--border-color); padding: 20px; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
.sidebar-header h3 { margin: 0; }

#summary-box { background-color: rgba(243, 156, 18, 0.1); padding: 10px; border-radius: 6px; margin-bottom: 15px; border-left: 3px solid var(--accent-orange); display: none; font-size: 0.9rem; }

/* Lista punktów */
.itinerary-item { background: var(--bg-hover); padding: 10px; border-radius: 6px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; border: 1px solid transparent; transition: 0.2s; }
.itinerary-item:hover { border-color: var(--border-color); }
.rocket-btn { background: transparent; font-size: 1.2rem; padding: 0 5px; }
.delete-btn { background: #e74c3c; padding: 4px 8px; font-size: 0.8rem; border-radius: 4px; }

/* Podświetlenie aktywnego/znalezionego punktu */
.itinerary-item.highlighted {
    border-color: var(--accent-orange);
    background: rgba(243, 156, 18, 0.15);
}
.itinerary-item.highlighted .rocket-btn {
    filter: drop-shadow(0 0 5px var(--accent-orange));
    transform: scale(1.2);
    transition: 0.3s;
}

/* Wstawianie punktów */
.insert-btn-container { text-align: center; margin: 2px 0; }
.insert-btn { background: var(--bg-dark); border: 1px dashed var(--border-color); color: var(--text-muted); font-size: 0.8rem; padding: 4px 10px; border-radius: 12px; width: 80%; }
.insert-btn.active { background: rgba(243, 156, 18, 0.2); border-color: var(--accent-orange); color: var(--accent-orange); animation: pulse 1.5s infinite; }

/* Inne */
.option-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; margin-bottom: 15px; cursor: pointer; color: var(--text-muted); }
.link-btn { display: block; background-color: var(--bg-hover); color: var(--text-main); text-align: center; padding: 10px; text-decoration: none; border-radius: 5px; margin-top: 5px; border: 1px solid var(--border-color); }

/* --- Ekran Powitalny & Modal --- */
.landing-screen { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, #2c3e50 0%, #121212 100%); z-index: 2000; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; }
.logo-img { border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-bottom: 20px; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.modal-content { background-color: var(--bg-panel); margin: 5% auto; padding: 20px; border-radius: 10px; width: 90%; max-width: 600px; border: 1px solid var(--border-color); }
.close-btn { color: var(--text-muted); float: right; font-size: 28px; cursor: pointer; }
.garage-item { background: var(--bg-hover); padding: 15px; margin-bottom: 10px; border-radius: 8px; border-left: 4px solid var(--accent-orange); }



/* ========================================= */
/* MIKRO-IKONY AKCJI NA LIŚCIE (Wstaw/Usuń)  */
/* ========================================= */
.point-actions { display: flex; gap: 12px; align-items: center; margin-left: 10px; }
.icon-btn { background: transparent; border: 1px solid var(--border-color); padding: 6px 10px; font-size: 1.1rem; border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.delete-icon:hover { color: #e74c3c; border-color: #e74c3c; background: rgba(231, 76, 60, 0.1); }

.icon-btn { background: transparent; border: 1px solid var(--border-color); padding: 6px 10px; font-size: 1.1rem; border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-main); }

/* Właściwe podświetlenia Hover dla obu przycisków */
.delete-icon:hover { color: #e74c3c; border-color: #e74c3c; background: rgba(231, 76, 60, 0.1); }
.insert-icon:hover { color: var(--accent-orange); border-color: var(--accent-orange); background: rgba(243, 156, 18, 0.1); }


/* Aktywny tryb wstawiania i baner informacyjny */
.insert-icon.active { background: rgba(243, 156, 18, 0.2); border-color: var(--accent-orange); color: var(--accent-orange); box-shadow: 0 0 8px rgba(243, 156, 18, 0.5); }
.insert-banner { background-color: rgba(243, 156, 18, 0.2); border-left: 4px solid var(--accent-orange); padding: 10px; margin-bottom: 10px; border-radius: 4px; font-size: 0.9rem; color: var(--text-main); text-align: center; }


/* ========================================= */
/* MAGIA DLA TELEFONÓW (Smartfony < 768px)   */
/* ========================================= */


@media (max-width: 768px) {
    #main-container { flex-direction: column; overflow: hidden; }
    
    #map { height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
    
    /* Szuflada (Bottom Sheet) - Płynne wysuwanie */
    #sidebar { 
        position: absolute; 
        bottom: 0; 
        width: 100%; 
        height: 60vh; /* Zajmuje 60% ekranu, gdy jest otwarta */
        border-left: none; 
        border-top: 1px solid var(--border-color); 
        border-radius: 20px 20px 0 0; 
        z-index: 2; 
        box-shadow: 0 -5px 25px rgba(0,0,0,0.6);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);


/* Wyłączamy "widmowy hover" dla przycisków akcji na ekranach dotykowych */
    @media (hover: none) {
        .icon-btn:hover { 
            background: transparent; 
            color: var(--text-muted); 
            border-color: var(--border-color); 
        }
        /* Zostawiamy aktywny pomarańcz TYLKO jak klikniemy wstawianie */
        .insert-icon.active { 
            background: rgba(243, 156, 18, 0.2) !important; 
            border-color: var(--accent-orange) !important; 
            color: var(--accent-orange) !important; 
        }
    }
    }
    
    /* Klasa dodawana przez JS, żeby schować szufladę */
    #sidebar.collapsed {
        transform: translateY(calc(100% - 60px)); /* Zostawia tylko 60px wystające z dołu */
    }

/* Przyklejony uchwyt do przeciągania na górze szuflady */
    .sidebar-handle {
        position: sticky;
        top: -20px; /* Zrównuje się z paddingiem szuflady */
        background-color: var(--bg-panel);
        margin: -20px -20px 15px -20px;
        padding: 15px 0;
        z-index: 100;
        border-radius: 20px 20px 0 0;
        cursor: pointer;
    }
    .sidebar-handle::after {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        background-color: #555;
        border-radius: 3px;
        margin: 0 auto;
    }
    /* Nagłówek - Ukrywamy tekst, zostawiamy równe ikony */
    .brand h2, #status, #user-name { display: none; }
    
    .controls { gap: 8px; }
    #authenticated-controls { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: center; }
    .btn-garage, .btn-save, .btn-clear { 
        font-size: 0 !important; /* Chowamy tekst całkowicie */
        width: 40px; 
        height: 40px; 
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }
    .btn-garage::after { content: "📂"; font-size: 1.2rem; }
    .btn-save::after { content: "💾"; font-size: 1.2rem; }
    .btn-clear::after { content: "🗑️"; font-size: 1.2rem; }
}