/*
 * Dark mode for the Squirrly admin panel.
 *
 * Open-Admin's own dark mode only swaps a few variables: it keeps the teal light-mode
 * sidebar, maps --bs-light to the same teal (every btn-light / bg-light turns teal) and
 * uses --bs-white as the text color of badges and .text-white, so on dark cards that
 * text goes dark. These overrides follow the WP Ghost / CrawlBrain dark palette:
 * soft blue-grey surfaces, a neutral sidebar and Squirrly purple as the accent.
 *
 * Loaded after open-admin.min.css from app/Admin/bootstrap.php and the login layout.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #7b5cf0;
        --success-color: #2f9e44;
        /* the sidebar and logo area are painted with --menu-darker-bg (.bg-semi-dark) */
        --menu-bg: #2b333e;
        --menu-active-bg: #343d4a;
        --menu-darker-bg: #252c36;
        --menu-text: #c3ccd7;
        --menu-text-hover: #f3f6fa;
        --main-bg: #1f252d;
        --button-primary: #6d3ff2;
        --button-primary-border: #7b54f4;
        --button-text: #ffffff;
        --text-color: #e6ebf1;
        --link-color: #b39cf7;
        --field-bg: #2b323c;
        --field-border-color: #454f5c;
        --bs-white: #272e37;
        --bs-black: #f3f6fa;
        --bs-secondary: #98a4b3;
        --bs-warning: #f08c3a;
        --bs-danger: #e5534b;
        --bs-gray: #454f5c;
        --bs-light: #323a45;
        --bs-dark: #d5dde6;
        --bs-code: #f78fb8;
    }

    .table {
        --table-border-color: #343c48;
        --bs-table-striped-bg: rgba(255, 255, 255, .02);
        --bs-table-active-bg: rgba(255, 255, 255, .04);
        --bs-table-hover-bg: rgba(255, 255, 255, .035);
        --bs-table-selected-bg: #2f3742;
    }

    /* Text on coloured backgrounds stays white (Open-Admin points it at --bs-white) */
    .badge,
    .text-white {
        color: #ffffff !important;
    }

    /* --bs-secondary is also the muted text colour, too light behind white text */
    .bg-secondary {
        background-color: #5b6674 !important;
    }

    .badge.text-dark,
    .bg-light.text-dark,
    .bg-white.text-dark {
        color: var(--bs-dark) !important;
    }

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

    /* Borders drawn as rgba(0,0,0,.x) disappear on dark surfaces */
    .card,
    .card-header,
    .card-footer,
    .page-link,
    .list-group-item,
    .border,
    .border-top,
    .border-bottom {
        border-color: rgba(255, 255, 255, .07) !important;
    }

    .card-header,
    .card-footer {
        background-color: rgba(255, 255, 255, .02);
    }

    .custom-navbar {
        box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
    }

    /* Sidebar: neutral instead of teal, with a clear active item */
    aside#sidebar {
        border-right: 1px solid rgba(255, 255, 255, .04);
    }

    .custom-menu > ul > li:hover {
        background-color: rgba(255, 255, 255, .03);
    }

    .custom-menu > ul > li.active {
        border-left-color: #8b6cf5;
    }

    .custom-menu > ul > li.active > a {
        color: var(--menu-text-hover);
    }

    /* Open-Admin hard-codes a light blue here */
    .custom-menu a:active,
    .custom-menu a:focus,
    .custom-menu li > ul > li.active a {
        color: #cbbcfb;
    }

    .sidebar-form .dropdown-menu > li > a.selected,
    .sidebar-form .dropdown-menu > li > a:hover {
        border-left-color: #8b6cf5;
        background-color: var(--menu-active-bg);
        color: #ffffff;
    }

    /* Light buttons (row actions, toolbar) */
    .btn-light,
    .btn-default {
        color: var(--text-color);
        background-color: var(--bs-light);
        border-color: var(--bs-gray);
    }

    .btn-light:hover,
    .btn-light:focus,
    .btn-default:hover,
    .btn-default:focus {
        color: #ffffff;
        background-color: #3c4552;
        border-color: #56616f;
    }

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #7b54f4;
        border-color: #8a68f6;
    }

    .btn-success:hover,
    .btn-success:focus {
        background-color: #37b24d;
        border-color: #37b24d;
    }

    /* Menus, dialogs, tabs and pagination */
    .dropdown-menu {
        background-color: #2b323c;
        border-color: rgba(255, 255, 255, .08);
        color: var(--text-color);
    }

    .dropdown-item {
        color: var(--text-color);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #353e4b;
        color: #ffffff;
    }

    .dropdown-divider {
        border-color: rgba(255, 255, 255, .08);
    }

    .nav-tabs {
        border-color: rgba(255, 255, 255, .08);
    }

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item.show .nav-link {
        color: var(--text-color);
        border-color: rgba(255, 255, 255, .08) rgba(255, 255, 255, .08) var(--bs-white);
    }

    .page-item.active .page-link {
        background-color: var(--button-primary);
        border-color: var(--button-primary);
        color: #ffffff;
    }

    .page-item.disabled .page-link {
        background-color: var(--bs-white);
        color: #6b7684;
    }

    .modal-content {
        border-color: rgba(255, 255, 255, .08);
    }

    .form-control,
    .form-select,
    .input-group-text {
        border-color: var(--field-border-color);
    }

    .form-control::placeholder {
        color: #7d8896;
    }

    /* Chrome paints autofilled fields light blue; keep them on the dark field colour */
    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text-color);
        -webkit-box-shadow: 0 0 0 1000px #323b47 inset;
        caret-color: var(--text-color);
    }

    .breadcrumb-item,
    .breadcrumb-item + .breadcrumb-item::before {
        color: #98a4b3;
    }

    code {
        color: var(--bs-code);
    }
}