:root {
    /* The Age of Frisia Palette */
    --color-base: #0b1116;
    --color-surface: #15202b;
    --color-surface-elevated: #1e2c3a;

    --color-primary: #3a5d73;
    --color-primary-light: #527a92;
    --color-accent: #a9ff03;
    --color-accent-glow: rgba(169, 255, 3, 0.3);

    --text-main: #9cc2dd;
    --text-muted: #8ca8bc;
    --border-color: rgba(156, 194, 221, 0.12);

    /* --- BOOTSTRAP OVERRIDES --- */
    --bs-primary: var(--color-accent);
    --bs-primary-rgb: 169, 255, 3;
    --bs-secondary: var(--color-primary-light);
    --bs-secondary-rgb: 82, 122, 146;
    --bs-body-bg: var(--color-base);
    --bs-body-color: var(--text-main);
    --bs-link-color: var(--color-accent);
    --bs-link-hover-color: #ffffff;
    --bs-border-color: var(--border-color);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-muted);

    --vh: 1vh;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Global Typography & Body */
body {
    background-color: var(--color-base);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    min-height: calc(var(--vh, 1vh) * 100);
    letter-spacing: -0.02em;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; color: #ffffff; }

h1.text-primary, h2.text-primary, h3.text-primary { color: #ffffff !important; }

.text-muted { color: var(--text-muted) !important; }

/* Custom Buttons */
.btn-primary {
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-base);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: transparent !important;
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 15px var(--color-accent-glow);
}

.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
}

.btn-outline-primary:hover {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Glassmorphism & UI Cards */
.bg-surface { background-color: var(--color-surface) !important; }

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card:hover { border-color: var(--color-primary-light); }

/* --- ADMIN PANEL SPECIFIC LAYOUT --- */

/* Fix for the white "Welcome" boxes */
.bg-light {
    background-color: var(--color-surface-elevated) !important;
    color: var(--text-main) !important;
}

/* The parent wrapper for admin views */
body:has(.admin-sidebar) {
    display: flex;
    flex-direction: row !important;
}

.admin-sidebar {
    width: 280px;
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: var(--color-surface-elevated);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    transition: all 0.3s ease;
    z-index: 1050;
}

.admin-main {
    flex-grow: 1;
    min-width: 0;
    background-color: var(--color-base);
    min-height: 100vh;
}

.admin-sidebar .nav-link {
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.25rem;
}

.admin-sidebar .nav-link.active {
    background-color: var(--color-accent);
    color: var(--color-base) !important;
}

.admin-sidebar .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-accent) !important;
}

/* CMS List Group Fix */
.list-group-item-action {
    background-color: var(--color-surface);
    color: var(--text-muted);
    border-color: var(--border-color);
}

.list-group-item-action:hover {
    background-color: var(--color-surface-elevated) !important;
    color: var(--color-accent) !important;
}

/* Admin Tables Readability */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    --bs-table-hover-bg: rgba(169, 255, 3, 0.03);
}

.table thead th {
    color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
}

.table tbody td {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
}

/* Quill Editor Dark Mode Fixes */
.ql-toolbar.ql-snow {
    background-color: var(--color-surface-elevated);
    border-color: var(--border-color) !important;
}

.ql-container.ql-snow {
    border-color: var(--border-color) !important;
    background-color: var(--color-base);
}

.ql-editor {
    color: #ffffff;
    min-height: 250px;
    font-size: 1rem;
}

.ql-snow .ql-stroke { stroke: var(--text-muted); }
.ql-snow .ql-fill { fill: var(--text-muted); }
.ql-snow .ql-picker { color: var(--text-muted); }

/* Mobile Admin Adjustments */
@media (max-width: 991px) {
    body:has(.admin-sidebar) { flex-direction: column !important; }
    .admin-sidebar { width: 100%; height: auto; position: relative; border-right: 0; border-bottom: 1px solid var(--border-color); }
}

/* --- PUBLIC COMPONENTS --- */

.navbar {
    background: rgba(11, 17, 22, 0.8) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand { font-weight: 800; color: #fff !important; letter-spacing: -0.05em; }

.nav-link { color: var(--text-muted) !important; font-weight: 600; font-size: 0.95rem; }

.nav-link:hover { color: var(--color-accent) !important; }

.form-control, .form-select {
    background-color: var(--color-base);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.form-control:focus {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.25rem var(--color-accent-glow);
    color: #fff;
}

/* --- ANIMATIONS --- */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}

.reveal.active { opacity: 1; transform: translate(0, 0) scale(1); }

.reveal-fade { transform: scale(0.95); }
.reveal-slide-up { transform: translateY(40px); }
.reveal-slide-left { transform: translateX(50px); }
.reveal-slide-right { transform: translateX(-50px); }

.info-card { cursor: pointer; }
.info-card:active { transform: scale(0.98); }

/* This is the master container holding the sidebar and main content */
.admin-wrapper {
    display: flex;
    flex-direction: row; /* Force side-by-side */
    align-items: stretch;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.admin-sidebar {
    width: 280px;
    height: 100vh;
    position: sticky; /* Keeps it locked on the left while you scroll content */
    top: 0;
    background-color: var(--color-surface-elevated);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevents sidebar from squishing */
    z-index: 1050;
    transition: transform 0.3s ease;
}

.admin-main {
    flex-grow: 1; /* Tells the content area to take up all remaining space */
    min-width: 0;  /* Critical for preventing content from breaking flexbox */
    background-color: var(--color-base);
    display: flex;
    flex-direction: column;
}

/* Fix for mobile stacking */
@media (max-width: 991px) {
    .admin-wrapper {
        flex-direction: column; /* Stack on mobile */
    }
    .admin-sidebar {
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%); /* Hide by default on mobile */
    }
    .admin-sidebar.show {
        transform: translateX(0); /* Show when toggled */
    }
    .admin-main {
        padding-top: 60px; /* Space for the mobile toggle header */
    }
}

/* --- THE ADMIN MAIN CONTENT AREA --- */
.admin-main {
    flex-grow: 1;
    min-width: 0;
    background-color: var(--color-base);
    min-height: 100vh;

    /* ADDED PADDING HERE */
    padding: 2.5rem !important;

    /* Optional: Center the content for a cleaner look on huge screens */
    display: flex;
    flex-direction: column;
}

/* Ensure the cards don't touch the top on mobile */
@media (max-width: 991px) {
    .admin-main {
        padding: 1.5rem !important;
        margin-top: 20px; /* Offset for the mobile toggle menu */
    }
}

/* Extra polish: Smooth transitions for the stat cards */
.admin-main .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-main .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}