/**
 * Admin & Login Branding
 * Matches VS Code Workspace Colors
 */

:root {
    --ccc-primary: #2f4089;
    --ccc-sidebar: #253067;
    --ccc-secondary: #4b96da;
    --ccc-accent: #8eb8c5;
    --ccc-text-white: #ffffff;
    --ccc-text-muted: #b8c1e6;
    --ccc-border: #4a5a9a;
    --ccc-hover: #3d4f9f;
}

/* ==========================================================================
   WP Admin Customization
   ========================================================================== */

/* Admin Bar */
#wpadminbar {
    background: var(--ccc-primary) !important;
}

#wpadminbar .ab-top-secondary {
    background: var(--ccc-primary) !important;
}

/* Admin Menu (Sidebar) */
#adminmenu, 
#adminmenu .wp-submenu, 
#adminmenuback, 
#adminmenuwrap {
    background-color: var(--ccc-sidebar) !important;
}

#adminmenu .wp-submenu {
    background-color: var(--ccc-sidebar) !important;
}

/* Menu Links */
#adminmenu a {
    color: var(--ccc-text-white) !important;
}

#adminmenu a:hover, 
#adminmenu li.menu-top:hover, 
#adminmenu li.opensub > a.menu-top, 
#adminmenu li > a.menu-top:focus {
    color: var(--ccc-text-white) !important;
    background-color: var(--ccc-hover) !important;
}

/* Active Menu Item */
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, 
#adminmenu li.current a.menu-top, 
.folded #adminmenu li.wp-has-current-submenu, 
.folded #adminmenu li.current.menu-top, 
#adminmenu .wp-submenu .wp-submenu-head {
    background: var(--ccc-secondary) !important;
    color: var(--ccc-text-white) !important;
}

/* Buttons */
.wp-core-ui .button-primary {
    background: var(--ccc-primary) !important;
    border-color: var(--ccc-primary) !important;
    color: var(--ccc-text-white) !important;
    transition: all 0.2s ease;
}

.wp-core-ui .button-primary:hover, 
.wp-core-ui .button-primary:focus {
    background: var(--ccc-hover) !important;
    border-color: var(--ccc-hover) !important;
}

/* ACF Options Page Icons */
.dashicons-building:before,
.dashicons-layout:before {
    color: var(--ccc-accent) !important;
}

/* ==========================================================================
   Login Page Customization
   ========================================================================== */

body.login {
    background-color: var(--ccc-sidebar) !important;
    color: var(--ccc-text-white);
}

/* Login Box */
body.login #login {
    padding-top: 5%;
}

body.login .message, 
body.login #login_error {
    border-left-color: var(--ccc-secondary);
    background-color: #fff;
    color: #333;
}

/* Logo */
body.login h1 a {
    background-image: var(--ccc-login-logo) !important; 
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 300px !important;
    height: 100px !important;
    margin-bottom: 20px !important;
}

/* Form */
body.login form {
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
    border: none !important;
    padding: 40px !important;
}

body.login label {
    color: var(--ccc-sidebar);
    font-weight: 600;
}

body.login input[type="text"], 
body.login input[type="password"] {
    border: 1px solid var(--ccc-border) !important;
    background: #f8fafc !important;
    border-radius: 4px !important;
    color: #333 !important;
}

body.login input[type="text"]:focus, 
body.login input[type="password"]:focus {
    border-color: var(--ccc-secondary) !important;
    box-shadow: 0 0 0 1px var(--ccc-secondary) !important;
}

/* Login Button */
body.login .button-primary {
    background: var(--ccc-primary) !important;
    border-color: var(--ccc-primary) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    width: 100%;
    margin-top: 20px !important;
    height: 40px !important;
    line-height: 38px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
}

body.login .button-primary:hover {
    background: var(--ccc-hover) !important;
    border-color: var(--ccc-hover) !important;
}

/* Links */
body.login #nav a, 
body.login #backtoblog a {
    color: var(--ccc-text-muted) !important;
    transition: color 0.2s ease;
}

body.login #nav a:hover, 
body.login #backtoblog a:hover {
    color: var(--ccc-text-white) !important;
}