:root {
    --brand-green: #185a3c;
    --brand-green-hover: #12462e;
    --brand-gold: #f1c40f;
    --brand-gold-hover: #d4ac0d;
    --brand-dark: #1a1a1a;
}


/* --- BRAND BUTTON CUSTOMIZATION --- */

/* 1. Primary Buttons (e.g., Save, Submit, Blue buttons) */
.btn.btn-primary {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
    border: 1px solid var(--brand-green) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn.btn-primary:hover, 
.btn.btn-primary:active, 
.btn.btn-primary:focus {
    background-color: var(--brand-green-hover) !important;
    border-color: var(--brand-green-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 2. Secondary / Default Buttons (e.g., Cancel, Add Row) */
/* Option: Using Gold as an accent for secondary actions */
.btn.btn-secondary, 
.btn.btn-default {
    background-color: #ffffff !important; /* Keep it clean */
    color: var(--brand-green) !important; /* Text matches primary brand */
    border: 1px solid var(--brand-green) !important;
}

.btn.btn-secondary:hover, 
.btn.btn-default:hover {
    background-color: var(--brand-gold) !important; /* Gold on hover */
    border-color: var(--brand-gold) !important;
    color: var(--brand-dark) !important; /* Dark text on gold for contrast */
}

/* 3. Special Brand Action (e.g., Highlighted secondary buttons) */
/* If you want a button that is permanently Gold */
.btn-brand-gold {
    background-color: var(--brand-gold) !important;
    color: var(--brand-dark) !important;
    border: 1px solid var(--brand-gold) !important;
}

.btn-brand-gold:hover {
    background-color: var(--brand-gold-hover) !important;
}

/* 4. Fix for Dark Mode */
[data-theme="dark"] {
    .btn.btn-secondary, 
    .btn.btn-default {
        background-color: transparent !important;
        color: #ffffff !important;
        border: 1px solid var(--brand-green) !important;
    }
    
    .btn.btn-secondary:hover {
        background-color: var(--brand-green) !important;
    }
}

/* 5. Outline Buttons */
.btn-outline {
    border: 1px solid var(--brand-green) !important;
    color: var(--brand-green) !important;
}

.btn-outline:hover {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
}

/* --- DESK / WORKSPACE HOME --- */

/* Target the body specifically when on the desk */
body[data-route="desk"], 
body[data-route=""] {
    background: url('/assets/green_theme/images/bg-desk.png') no-repeat center center fixed !important;
    background-color: #f4f7f6 !important; /* Your light green tint - fallback */
    background-size: cover !important;
}

/* image_7b0777.jpg shows .main-section is the primary wrapper */
.main-section {
    background-color: #f4f7f6 !important;
}

/* Style the Workspace Icons (The blue squares in your screenshot) */
/* Targets the icon wrappers found in image_7af0f2.jpg */
.widget-box .standard-widget-icon {
    background-color: var(--brand-green) !important;
    border-radius: 12px !important;
}

.widget-box .standard-widget-icon svg {
    fill: #ffffff !important;
}

/* Workspace Card Hover Effect */
.widget-box:hover {
    border: 1px solid var(--brand-gold) !important;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}


/* --- UNIFIED DESK BACKGROUND --- */

/* --- UNIFIED BACKGROUND FIX --- */

/* Force transparency on all main layout wrappers */
.main-section, 
.layout-main, 
#body, 
.page-container, 
.container.page-body {
    background-color: transparent !important;
    background: transparent !important;
}

/* Ensure the root body has your light tint from top to bottom */
/* body {
    background-color: #f4f7f6 !important;
} */


/* --- FULL DESK BACKGROUND COVERAGE --- */
/* This ensures the background color is consistent from top to bottom */
.main-section, 
.layout-main, 
#body, 
.page-container, 
.container.page-body,
.page-desktop {
    background-color: transparent !important;
    background: transparent !important;
}

/* body {
    background-color: #f4f7f6 !important; 
} */


.custom-workspace-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    pointer-events: none; /* Ensures it doesn't block clicks on module icons */
    z-index: 1;
}

/* If you want it as a watermark background instead */
.desk-container {
    background-image: url('/assets/green_theme/images/your-logo-watermark.png') !important;
    background-repeat: no-repeat !important;
    background-position: center 20% !important;
    background-size: 300px !important;
}


/* --- CUSTOM SPLASH SCREEN OVERRIDE --- */

/* Target the specific container from your snippet */
.centered.splash img {
    /* Hide the original ERPNext logo */
    visibility: hidden !important;
    width: 0 !important;
}

.centered.splash {
    /* Set your logo as a background image on the container instead */
    background-image: url('/assets/green_theme/images/splash.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    /* Ensure the container has enough height to show your logo */
    min-height: 200px; 
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* Optional: Match the splash background to your Green Theme tint */
body.splash-body {
    background-color: #f4f7f6 !important;
}