body
{
    padding-bottom:50px;
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.card
{
    border-radius:12px;
    background-color: #2d2d2d;
    border: 1px solid #3d3d3d;
    color: #e0e0e0;
}

.card i
{
    margin-bottom:10px;
}

.card a.text-dark
{
    color: #e0e0e0 !important;
}

/* Better page spacing */

h1,
h2,
h3
{
    margin-bottom:20px;
    color: #ffffff;
}

h4
{
    color: #e0e0e0;
}

p
{
    color: #b0b0b0;
}

.text-muted
{
    color: #888888 !important;
}

/* Place cards */

#places .card
{
    transition: transform .15s ease;
    background-color: #2d2d2d;
    border: 1px solid #3d3d3d;
}

#places .card:hover
{
    transform: translateY(-3px);
    background-color: #333333;
}

#places .card h4
{
    color: #ffffff;
}

#places .card p
{
    color: #b0b0b0;
}

/* Images */

img
{
    max-width:100%;
}

.img-fluid
{
    border-radius:10px;
}

/* Upload areas */

#dropZone
{
    cursor:pointer;
    background:#2d2d2d;
    transition:.2s;
    border: 2px dashed #4d4d4d;
    color: #e0e0e0;
}

#dropZone:hover
{
    background:#3d3d3d;
}

/* Buttons */

.btn
{
    border-radius:8px;
}

.btn-secondary
{
    background-color: #4d4d4d;
    border-color: #5d5d5d;
    color: #e0e0e0;
}

.btn-secondary:hover
{
    background-color: #5d5d5d;
    border-color: #6d6d6d;
    color: #ffffff;
}

/* Forms */

.form-control,
.form-select
{
    border-radius:8px;
    background-color: #2d2d2d;
    border: 1px solid #4d4d4d;
    color: #e0e0e0;
}

.form-control:focus,
.form-select:focus
{
    background-color: #333333;
    border-color: #6d6d6d;
    color: #e0e0e0;
}

.form-control::placeholder
{
    color: #888888;
}

/* Cards containing forms */

.card-body
{
    padding:20px;
}

/* Empty states */

.text-muted
{
    padding:15px;
    color: #888888 !important;
}

.alert-info
{
    background-color: #1a3a4a;
    border-color: #2d5a6a;
    color: #b0d0e0;
}

.photo-thumb
{
    cursor:pointer;
    transition:.2s;
}

.photo-thumb:hover
{
    transform:scale(1.05);
}

.place-rating
{
    background: #3d3d3d;
    padding:8px 12px;
    border-radius:10px;
    font-size:.9rem;
    line-height:1.5;
    color: #e0e0e0;
}

.place-rating .text-muted
{
    color: #888888 !important;
}

.modal-content
{
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.modal-header
{
    border-bottom: 1px solid #4d4d4d;
}

.modal-footer
{
    border-top: 1px solid #4d4d4d;
}

.btn-close
{
    filter: invert(1);
}

/* Desktop header - keep everything in one row */
@media (min-width: 993px) {
    .navbar .container {
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .navbar-brand {
        flex-shrink: 0;
    }
    
    .navbar form {
        flex: 1 1 auto;
        max-width: 500px;
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .nav-buttons {
        flex-shrink: 0;
        display: flex;
        gap: 5px;
    }
}

/* Mobile header - wrap to second row */
@media (max-width: 992px) {
    .navbar .container {
        flex-direction: column;
        align-items: center;
    }
    
    .navbar-brand {
        margin-bottom: 10px;
        text-align: center;
    }
    
    .navbar form {
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .navbar form input {
        min-width: auto !important;
        width: 100%;
    }
    
    .nav-buttons {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 5px;
    }
    
    .nav-buttons .btn {
        margin-bottom: 0;
    }
}
/* Account page - fix text color */
.form-control-plaintext {
    color: #e0e0e0 !important;
}

/* Mobile fixes for other elements */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .btn {
        margin-bottom: 5px;
    }

    /* Rating box */
    .place-rating {
        top: auto !important;
        bottom: 10px;
        right: 10px;
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .place-rating .fw-bold {
        font-size: 0.8rem;
    }
}