:root {
    --green: #0c5f43;
    --green-dark: #083d2f;
    --lime: #9fca3b;
    --amber: #f2b705;
    --ink: #16211d;
    --muted: #66736f;
    --soft: #f4f7f2;
}

body {
    color: var(--ink);
    background: #f8faf6;
    font-family: Arial, Helvetica, sans-serif;
}

.site-navbar,
.site-footer {
    background: var(--green-dark);
}

.navbar-brand {
    letter-spacing: 0;
}

.hero {
    min-height: 560px;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(5, 34, 25, .92), rgba(5, 34, 25, .62), rgba(5, 34, 25, .18)),
        url("https://images.unsplash.com/photo-1531415074968-036ba1b575da?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1;
    font-weight: 800;
}

.section-title {
    font-weight: 800;
    color: var(--green-dark);
}

.feature-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--green-dark);
    background: #e8f1df;
    font-size: 1.35rem;
}

.info-card,
.booking-card,
.admin-card {
    background: #fff;
    border: 1px solid #e2e8df;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(10, 56, 39, .07);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}

.status-Pending { background: #fff4cc; color: #7a5600; }
.status-Approved { background: #dff4e7; color: #0a6534; }
.status-Rejected { background: #ffe0e0; color: #922020; }
.status-Cancelled { background: #e8eaed; color: #48505a; }

.slot-box {
    border: 1px solid #d9e1d7;
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
    height: 100%;
}

.slot-available { border-left: 6px solid #21a35b; }
.slot-pending { border-left: 6px solid #f2b705; }
.slot-booked { border-left: 6px solid #dc3545; }

.page-band {
    background: var(--soft);
    border-bottom: 1px solid #e2e8df;
}

.admin-shell {
    min-height: 100vh;
    background: #eef3eb;
}

.admin-sidebar {
    background: var(--green-dark);
    min-height: 100vh;
}

.admin-sidebar a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    display: block;
    padding: .72rem 1rem;
    border-radius: 8px;
    margin-bottom: .25rem;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.table td,
.table th {
    vertical-align: middle;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.gallery-card {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    border-radius: 8px;
    background: #12241d;
    box-shadow: 0 16px 36px rgba(10, 56, 39, .15);
}

.gallery-card.featured {
    grid-column: span 2;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    transition: transform .35s ease, filter .35s ease;
}

.gallery-card:hover img {
    transform: scale(1.07);
    filter: saturate(1.08);
}

.gallery-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 4.5rem 1.25rem 1.25rem;
    color: #fff;
    background: linear-gradient(0deg, rgba(4, 25, 18, .94), rgba(4, 25, 18, .08));
}

.gallery-overlay h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: .25rem;
}

.gallery-overlay p {
    color: rgba(255, 255, 255, .78);
    margin-bottom: 0;
}

.admin-thumb {
    width: 92px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #d9e1d7;
}

@media (max-width: 991px) {
    .hero {
        min-height: 500px;
        background:
            linear-gradient(90deg, rgba(5, 34, 25, .9), rgba(5, 34, 25, .62)),
            url("https://images.unsplash.com/photo-1531415074968-036ba1b575da?auto=format&fit=crop&w=1200&q=80") center/cover no-repeat;
    }

    .admin-sidebar {
        min-height: auto;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-card.featured {
        grid-column: span 1;
    }
}

@media (max-width: 575px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}