/* ============================================================
   fastCMS Admin — admin.css
   Bootstrap 5.3.8 | Color Theme | Dark / Light
   Colors and style from admin_template project
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ---------------------------------------------------------- */
:root {
    --fastcms-sidebar-width: 260px;
    --fastcms-topnav-height: 64px;
    --fastcms-transition: 0.3s ease;

    /* Sidebar — light */
    --fastcms-sidebar-bg: var(--bs-primary);
    --fastcms-sidebar-text: #c8d6e5;
    --fastcms-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --fastcms-sidebar-active-bg: var(--bs-border-color);
    --fastcms-sidebar-active-text: #212529;
    --fastcms-sidebar-icon-color: #c8d6e5;
    --fastcms-sidebar-brand-color: #ffffff;
    --fastcms-sidebar-hr: rgba(255, 255, 255, 0.12);

    /* Topnav / page — light */
    --fastcms-topnav-bg: #ffffff;
    --fastcms-topnav-border: #e9ecef;
    --fastcms-topnav-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    --fastcms-page-bg: var(--bs-border-color);

    /* Accent */
    --fastcms-accent: #4e73df;
    --fastcms-accent-hover: #3a5bc7;

    /* Dark mode toggle */
    --toggle-bg: #4e73df;
    --toggle-shadow: rgba(78, 115, 223, 0.4);
}

[data-bs-theme="dark"] {
    /* Gruvbox medium dark */
    --fastcms-topnav-bg: #282828;
    /* bg medium */
    --fastcms-topnav-border: #3c3836;
    /* bg1 */
    --fastcms-topnav-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    --fastcms-page-bg: #32302f;
    /* bg soft */
    --fastcms-sidebar-bg: #1d2021;
    /* bg hard */
    --fastcms-sidebar-text: #a89984;
    /* fg4 */
    --fastcms-sidebar-hover-bg: rgba(235, 219, 178, 0.08);
    /* fg tint */
    --fastcms-sidebar-active-bg: var(--fastcms-page-bg);
    --fastcms-sidebar-active-text: #ebdbb2;
    /* fg */
    --fastcms-sidebar-icon-color: #7c6f64;
    /* bg4 */
    --fastcms-sidebar-hr: rgba(235, 219, 178, 0.1);
    --toggle-bg: #458588;
    /* gruvbox blue */
    --toggle-shadow: rgba(69, 133, 136, 0.5);
}

/* ----------------------------------------------------------
   2. BASE
   ---------------------------------------------------------- */
body {
    background-color: var(--fastcms-page-bg);
    transition: background-color var(--fastcms-transition), color var(--fastcms-transition);
}

/* ----------------------------------------------------------
   3. SIDEBAR
   ---------------------------------------------------------- */
.desktop-sidebar .sidebar {
    background-color: var(--fastcms-sidebar-bg) !important;
    border-right: none !important;
    box-shadow: none;
    transition: width var(--fastcms-transition), background-color var(--fastcms-transition);
}

/* Mobile close button */
.desktop-sidebar .sidebar .sidebar-close-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.desktop-sidebar .sidebar .sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Nav button container — flush, no padding gaps */
.desktop-sidebar .nav-btn-container {
    gap: 0 !important;
    padding: 0 !important;
}

/* Nav buttons — override Bootstrap btn-light */
.desktop-sidebar .nav-btn {
    background-color: transparent !important;
    color: var(--fastcms-sidebar-text) !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 11px 20px !important;
    margin-bottom: 0 !important;
    font-weight: 600;
    transition:
        background-color var(--fastcms-transition),
        color var(--fastcms-transition),
        border-color var(--fastcms-transition);
}

.desktop-sidebar .nav-btn:hover:not(.active) {
    background-color: var(--fastcms-sidebar-active-bg) !important;
    color: var(--fastcms-sidebar-active-text) !important;
    border-left-color: var(--fastcms-accent) !important;
}

.desktop-sidebar .nav-btn.active {
    background-color: var(--fastcms-sidebar-active-bg) !important;
    color: var(--fastcms-sidebar-active-text) !important;
    border-left-color: var(--fastcms-accent) !important;
    font-weight: 700;
}

/* Icons */
.desktop-sidebar .nav-btn i {
    color: var(--fastcms-sidebar-icon-color);
    transition: color var(--fastcms-transition);
}

.desktop-sidebar .nav-btn:hover i,
.desktop-sidebar .nav-btn.active i {
    color: var(--fastcms-accent);
}

[data-bs-theme="dark"] .desktop-sidebar .nav-btn.active i {
    color: #ffffff;
}


/* Sidebar avatar */
.sidebar-avatar-section img {
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Scrollbar inside sidebar */
.desktop-sidebar .sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.desktop-sidebar .sidebar::-webkit-scrollbar {
    width: 4px;
}

.desktop-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.desktop-sidebar .sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* ----------------------------------------------------------
   4. TOP NAVIGATION
   ---------------------------------------------------------- */
#top-nav {
    background-color: var(--fastcms-topnav-bg) !important;
    border-bottom: none !important;
    box-shadow: var(--fastcms-topnav-shadow);
    transition:
        background-color var(--fastcms-transition),
        border-color var(--fastcms-transition);
}

/* ----------------------------------------------------------
   5. MAIN CONTENT AREA
   ---------------------------------------------------------- */
.desktop-main {
    background-color: var(--fastcms-page-bg);
    transition: background-color var(--fastcms-transition);
}


/* ----------------------------------------------------------
   7. CARDS
   ---------------------------------------------------------- */
.card {
    border-radius: 12px;
}

/* ----------------------------------------------------------
   8. SMOOTH TRANSITIONS
   ---------------------------------------------------------- */
.card,
.modal-content,
.table,
.form-control,
.form-select {
    transition:
        background-color var(--fastcms-transition),
        border-color var(--fastcms-transition),
        color var(--fastcms-transition);
}

/* ----------------------------------------------------------
   9. SCROLLBAR (page)
   ---------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.5);
}

/* Dark mode — form inputs match sidebar bg */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--fastcms-sidebar-bg);
    border-color: var(--fastcms-sidebar-hr);
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--fastcms-accent);
    outline-offset: 2px;
}
/* fastCMS logo: light version, or the dark one in dark mode */
.brand-logo { width: auto; max-width: 100%; }
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark { display: inline; }