@import url('https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@100..400&family=Playwrite+IT+Moderna:wght@100..400&family=Playwrite+NZ:wght@100..400&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');





/* make root color */
:root {
    /* topbar */
    --topbar-bg: #2c949c;
    --topbar-link: #ffffff;
    --topbar-text: #ffffff;


    --bg-color: #f8f9fa;
    --text-color: #495057;
    --hover-color-bg: #e9ecef;
    --hover-color-text: #6c757d;
    --active-color-bg: #dee2e6;
    --active-color-text: #212529;
    --single-active-color-bg: #f8f9fa;
    --icon-color: #6a994e;

    --main-area-bg: #ffffff;
    --main-area-link: #57cc99;
    --main-area-link-hover: #38a3a5;
    --main-area-text: #1a535c;

    /* btn */
    --main-area-btn-bg: #457b9d;
    --main-area-btn-text: #ffffff;
    --main-area-btn-hover-bg: #1d3557;

    /* notice */
    --notice-success-bg: #d4edda;
    --notice-warning-bg: #fff3cd;
}








/* Custom Sidebar Styling */
#adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap {
    background-color: var(--bg-color);
}

#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, 
#adminmenu .wp-submenu a {
    color: var(--text-color);
}


#adminmenu a {
    color: var(--text-color);
    font-family: "Sour Gummy", sans-serif !important; /* Custom font */
    font-size: 16px !important; /* Custom font size */
}

#adminmenu .wp-has-current-submenu .wp-submenu a, 
#adminmenu .wp-not-current-submenu .wp-submenu a:hover {
    color: var(--hover-color-text) !important; /* Hover text color */
}

#adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, 
#adminmenu li > a.menu-top:focus {
    background-color: var(--hover-color-bg); /* Hover background color */
}

.wp-has-current-submenu{
    background-color: var(--active-color-bg) !important;
}

.wp-has-current-submenu .wp-submenu{
    background-color: transparent !important;
}

.wp-has-current-submenu .wp-submenu .current {
    background: var(--single-active-color-bg) !important;
    width: 80% !important;
    padding: 5px 5px !important;
    margin-bottom: 2px !important;
}

#adminmenu .wp-has-current-submenu > a.menu-top, 
#adminmenu .wp-has-current-submenu > a.menu-top:focus {
    background-color: var(--active-color-bg); /* Active item background color */
    color: var(--active-color-text) !important; /* Active item text color */
}

/* Change icon colors */
#adminmenu .wp-menu-image:before {
    color: var(--icon-color) !important; /* Custom icon color */
}


#adminmenu li.menu-top {
    padding: 12px 31px !important;
}

/* Sidebar width */
#adminmenuwrap {
    width: 260px; /* Adjust the width */
}

#wpcontent, #wpfooter {
    margin-left: 260px; /* Align content with the sidebar width */
}

/* Center-align sidebar text */
#adminmenu .wp-menu-name {
    text-align: left;
}

#adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap {
    width: 260px;
}

.wp-not-current-submenu .wp-submenu{
    left : 265px !important;
}


/* top bar */
div#wpadminbar {
    background: var(--topbar-bg) !important;
}
div#wpadminbar span{
    color: var(--topbar-text) !important;
}
div#wpadminbar a{
    color: var(--topbar-link) !important;
}



/* media queries */

@media screen and (max-width: 963px) {
    #adminmenu li.menu-top {
        padding: 0 !important;
    }
}





/* main area */
/* Main Dashboard Container with Dark Background */
#wpbody-content .wrap {
    background-color: var(--main-area-bg); /* Dark background color */
    color: var(--main-area-text) !important; /* Light text color */
    padding: 20px; /* Padding around content */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Darker shadow */
}

/* Ensure Light Text for All Text Elements in .wrap */
#wpbody-content .wrap h1,
#wpbody-content .wrap h2,
#wpbody-content .wrap h3,
#wpbody-content .wrap p,
#wpbody-content .wrap label{
    color: var(--main-area-text) !important;
}
#wpbody-content .wrap a {
    color: var(--main-area-link) !important; /* Light color for headings, paragraphs, and links */
}

/* Welcome Panel with Dark Theme */
#welcome-panel {
    background-color: var(--main-area-bg); /* Darker background for welcome panel */
    color: var(--main-area-text) !important; /* Light text color */
    padding: 20px;
    border-radius: 10px;
}

/* Widget Container Styling */
#dashboard-widgets-wrap .postbox {
    background-color: var(--main-area-bg) !important; /* Dark background for widgets */
    border: 1px solid #444; /* Darker border color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for widgets */
    border-radius: 8px;
}

#dashboard-widgets-wrap .postbox .inside {
    padding: 15px;
    color: var(--main-area-text) !important; /* Light text color inside widgets */
}

/* Widget Titles with Light Text */
#dashboard-widgets-wrap .postbox h2.hndle {
    color: var(--main-area-text) !important; /* Light color for widget titles */
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    background-color: #333; /* Dark background for title */
    border-bottom: 1px solid #444;
    border-radius: 8px 8px 0 0;
}

/* Links in Dark Background Area */
#wpbody-content .wrap a {
    color: var(--main-area-link) !important; /* Light blue link color */
}

#wpbody-content .wrap a:hover {
    color: var(--main-area-link-hover) !important; /* Hover color for links */
    text-decoration: underline;
}
#wpbody-content .count {
    color: var(--main-area-text) !important; /* Hover color for links */
    text-decoration: underline;
}


#wpbody-content .button-primary{
    background-color: var(--main-area-btn-bg) !important; /* Light blue button color */
    border-color: var(--main-area-btn-bg) !important; /* Light blue border color */
    color: var(--main-area-btn-text) !important; /* White text color */
    text-shadow: none;
}
#wpbody-content .button-primary:hover{
    background-color: var(--main-area-btn-hover-bg) !important; /* Light blue button color */
    color: var(--main-area-btn-text) !important; /* White text color */
}
#wpbody-content a.button-primary{
    background-color: var(--main-area-btn-bg) !important; /* Light blue button color */
    border-color: var(--main-area-btn-bg) !important; /* Light blue border color */
    color: var(--main-area-btn-text) !important; /* White text color */
    text-shadow: none;
}
#wpbody-content a.button-primary:hover{
    background-color: var(--main-area-btn-hover-bg) !important; /* Light blue button color */
    color: var(--main-area-btn-text) !important; /* White text color */
}
#wpbody-content .button-secondary{
    border-color: var(--main-area-btn-bg) !important; /* Light blue button color */
    color: var(--main-area-btn-bg) !important; /* White text color */
}
#wpbody-content a.button-secondary{
    border-color: var(--main-area-btn-bg) !important; /* Light blue button color */
    color: var(--main-area-btn-bg) !important; /* White text color */
}

.notice.notice-success {
    background-color: var(--notice-success-bg)!important;
}
.notice.notice-warning {
    background-color: var(--notice-warning-bg) !important;
}
.notice.notice-warning p{
    color: #fff !important;
}