/* ─── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: #0d0d0d;
    color: #ffffff;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Component: Buttons ────────────────────────────────────────────────────── */
.btn-gold {
    background-color: #C9A84C;
    color: #000000;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1.25;
}
.btn-gold:hover { background-color: #D4AF37; color: #000000; }

.btn-outline-gold {
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: #C9A84C;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1.25;
}
.btn-outline-gold:hover { background-color: rgba(201, 168, 76, 0.1); color: #D4AF37; }

/* ─── Component: Inputs ─────────────────────────────────────────────────────── */
.input-dark {
    background-color: #1a1a1a;
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: #ffffff;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    font-size: 0.875rem;
}
.input-dark:focus {
    border-color: #C9A84C;
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.4);
}
.input-dark option { background-color: #1a1a1a; color: #ffffff; }

/* ─── Component: Cards ──────────────────────────────────────────────────────── */
.card-dark {
    background-color: #1a1a1a;
    border: 1px solid rgba(201, 168, 76, 0.1);
    border-radius: 0.75rem;
}

/* ─── Component: Badges ─────────────────────────────────────────────────────── */
.badge-published {
    display: inline-flex;
    align-items: center;
    background-color: rgba(20, 83, 45, 0.4);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
}

.badge-draft {
    display: inline-flex;
    align-items: center;
    background-color: rgba(78, 63, 0, 0.4);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.3);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
}

/* ─── Flash Messages ─────────────────────────────────────────────────────────── */
.flash-message {
    transition: opacity 0.3s ease;
}
.flash-message.flash-hiding {
    opacity: 0;
}

/* ─── Navbar scroll state ────────────────────────────────────────────────────── */
#main-nav {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#main-nav.scrolled {
    background-color: rgba(13, 13, 13, 0.98);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3);
}

/* ─── Mobile menu transition ─────────────────────────────────────────────────── */
#mobile-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
    opacity: 0;
}
#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
    transition: max-height 0.2s ease-in, opacity 0.2s ease-in;
}

/* ─── Admin sidebar transition ───────────────────────────────────────────────── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.6);
}
#sidebar-overlay.active { display: block; }

#sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
#sidebar.open { transform: translateX(0); }
@media (min-width: 1024px) {
    #sidebar { transform: translateX(0) !important; }
    #sidebar-overlay { display: none !important; }
}

/* ─── Image preview ──────────────────────────────────────────────────────────── */
#image-preview-wrapper { display: none; }
#image-preview-wrapper.has-image { display: block; }

/* ─── Campaign form show/hide ────────────────────────────────────────────────── */
.campaign-groups-section { display: none; }
.campaign-groups-section.visible { display: block; }
.campaign-schedule-section { display: none; }
.campaign-schedule-section.visible { display: block; }