/* =========================================
   1. GLOBALNE I UKŁAD (LAYOUT)
   ========================================= */

.page {
    background-color: #f0f0f0;
    min-height: 100vh;
    padding-top: 56px; /* Miejsce na fixed navbar */
}

/* Ukrycie domyślnych elementów Blazora */
.sidebar, .top-row {
    display: none;
}

.main-content-area {
    width: 100%;
}

.app-content-wrapper {
    max-width: 1440px; /* Limit dla Ultrawide */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content {
    width: 100%;
    margin-top: 1rem;
}

/* =========================================
   2. GÓRNY PASEK NAWIGACYJNY (NAVBAR)
   ========================================= */

.top-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #303030;
    border-bottom: 2px solid #a0a0a0;
}

.custom-top-nav {
    height: 56px;
    padding: 0 1rem;
    position: relative;
}

/* Logo desilve */
.navbar-brand-desilve-static {
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 700;
    padding-right: 1.5rem;
    cursor: default;
    text-shadow: 1px 1px 2px #FFD700, -1px -1px 2px #FFD700;
}

/* Kontener i Napis Event Horizon */
.event-horizon-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.event-horizon-title {
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700, 0 0 15px #FFD700, 0 0 20px #000;
}

/* Elementy menu po prawej */
.navbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
    list-style: none;
    margin-bottom: 0 !important;
}

.custom-top-nav .nav-link,
.custom-top-nav .logout-button {
    color: #c0c0c0 !important;
    font-weight: 600;
    padding: 0.5rem 0.8rem !important;
    transition: all 0.3s;
    background: none;
    border: none;
    height: 100%;
    display: flex;
    align-items: center;
}

    .custom-top-nav .nav-link:hover,
    .custom-top-nav .logout-button:hover {
        color: #FFD700 !important;
        text-shadow: 0 0 5px #FFD700;
    }

/* =========================================
   3. STRONA GŁÓWNA (HOME PAGE)
   ========================================= */

.home-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-bottom: 5rem;
}

.main-message-container {
    height: 40vh; /* Zmniejszone, by reszta treści była widoczna */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.event-horizon-title-main {
    font-size: 3rem;
    font-weight: 900;
    color: #303030 !important;
    text-shadow: 0 0 2px #FFD700, 0 0 5px #FFD700;
}

.sub-message {
    font-size: 1.5rem;
    color: #505050 !important;
}

.status-badge {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid #FFD700;
    color: #FFD700;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Karty informacyjne i oś czasu */
.info-card {
    background: #252525;
    border: 1px solid #a0a0a0;
    padding: 2rem;
    border-radius: 12px;
    color: #f0f0f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

    .info-card h3, .gold-text {
        color: #FFD700;
    }

.section-title {
    text-align: center;
    color: #303030;
    font-weight: 800;
    margin-bottom: 2rem;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #a0a0a0;
}

.version-tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 900;
    min-width: 70px;
    text-align: center;
}

.gold-bg {
    background: #FFD700;
    color: #000;
}

.silver-bg {
    background: #a0a0a0;
    color: #000;
}

/* =========================================
   4. LOGOWANIE I REJESTRACJA (IDENTITY)
   ========================================= */

.main-content-area .content .row {
    display: flex;
    justify-content: center;
}

.col-md-6.col-lg-5 {
    max-width: 450px;
    padding: 2rem;
    background-color: #252525;
    border: 1px solid #505050;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

    .col-md-6.col-lg-5 h1 {
        color: #f0f0f0 !important;
        text-align: center;
        font-size: 2rem;
    }

.form-control, .form-floating input {
    background-color: #353535;
    color: #f0f0f0 !important;
    border: 1px solid #505050;
}

    .form-control:focus {
        border-color: #FFD700;
        box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
    }

.btn-primary {
    background-color: #FFD700;
    border-color: #CCAA00;
    color: #000;
    font-weight: 700;
    width: 100%;
}

    .btn-primary:hover {
        background-color: #FFE54C;
        color: #000;
    }

.text-danger {
    color: #E66767 !important;
}

/* =========================================
   5. RESPONSYWNOŚĆ (MEDIA QUERIES)
   ========================================= */

@media (max-width: 767.98px) {
    .event-horizon-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50%;
        z-index: 5;
    }

    .event-horizon-title {
        font-size: 0.85rem !important;
    }

    .navbar-brand-desilve-static {
        font-size: 1rem !important;
    }

    .event-horizon-title-main {
        font-size: 1.6rem !important;
    }

    .sub-message {
        font-size: 1rem !important;
    }

    .main-message-container {
        height: auto;
        margin-top: 2rem;
    }

    .home-wrapper {
        gap: 1.5rem;
    }

    .timeline-item {
        flex-direction: column;
    }

    .col-md-6.col-lg-5 {
        width: 95% !important;
    }
}
/* Stylizacja Nagłówków Er */
.era-title {
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 2rem 0 1rem 0;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 5px;
}

.silver-text {
    color: #808080;
}

/* Stylizacja Sekcji Resetu */
.timeline-reset {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #000;
    color: #FFD700;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    border: 2px dashed #FFD700;
}

.reset-icon {
    font-size: 2rem;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(-360deg);
    }
}

.reset-text strong {
    font-size: 1.1rem;
    display: block;
}

.reset-text p {
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    color: #f0f0f0;
}

/* Przyciemnienie starych wersji */
.timeline-item.legacy {
    opacity: 0.7;
    background: rgba(200, 200, 200, 0.3);
}
/* --- POPRAWKA KONTRASTU DLA PROFILU I FORMULARZY --- */

/* Tło dla samej karty profilu, żeby pasowała do logowania */
.manage-card {
    background-color: #252525;
    padding: 2rem;
    border: 1px solid #505050;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    color: #f0f0f0;
}

/* Styl dla nagłówka na stronie profilu */
h3 {
    color: #303030; /* Ciemny napis na jasnym tle strony */
    font-weight: 800;
    margin-bottom: 1.5rem;
}

/* Główny tekst wewnątrz pól wpisywania (Input) */
.manage-card .form-control {
    background-color: #353535 !important;
    color: #ffffff !important; /* Czysta biel dla maksymalnego kontrastu */
    border: 1px solid #606060;
}

/* Kolor etykiety (Label), gdy pole jest puste */
.manage-card .form-floating > label {
    color: #a0a0a0 !important;
}

/* Kolor etykiety, gdy klikniemy w pole (pomniejszona etykieta u góry) */
.manage-card .form-floating > .form-control:focus ~ label,
.manage-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #FFD700 !important; /* Złoty kolor etykiety po kliknięciu */
    opacity: 1;
}

/* Styl dla pola zablokowanego (Username) */
.manage-card .form-control:disabled {
    background-color: #1a1a1a !important;
    color: #888888 !important;
    border-color: #333333;
}

/* Blask przy aktywnym polu */
.manage-card .form-control:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}