/***** Light Mode Customization *****/
:root {
    --w-color-primary: #FFA500;
    --w-color-primary-hover: #d48a00;
    /* Main orange for light mode */
    --w-color-background: #ffffff;
    /* White background */
    --w-color-box-background: white;
    /* Light grey for box backgrounds */
    --w-color-text: #333333;
    /* Dark grey for text */
    --w-color-surface-page: white;
    --w-color-surface-menus: #231f20;
    --w-color-surface-menu-item-active: #3d3638;
    --w-color-text-button-outline-default: var(--w-color-primary);
    --w-color-text-link-default: var(--w-color-primary-hover);
    --w-color-border-field-default: var(--w-color-primary);
    --w-color-focus: var(--w-color-primary);
    --w-color-focus: var(--w-color-primary);
    --w-color-border-field-hover: var(--w-color-primary-hover);
    --w-color-surface-tooltip: var(--w-color-surface-menus);
    --w-color-border-button-outline-default: var(--w-color-primary);
    --w-color-text-label: var(--w-color-surface-menus);
    --w-color-text-button-outline-hover: var(--w-color-primary);
}

.w-summary__list {
    color: var(--w-color-primary)
}

.navbar {
    background-color: var(--w-color-primary) !important;
    /* Orange navbar */
}

/* Style the columns and boxes (panels) */
.w-panel,
.w-col,
.panel {
    background-color: var(--w-color-box-background);
    /* Light grey for box backgrounds */
    border: none;
    /* Orange borders */
}

/* Style panel headings */
.panel-heading,
.w-title,
.w-col-title {
    background-color: var(--w-color-primary);
    /* Orange for panel headers */
    color: white;
    /* White text for contrast */
}

/* Buttons and primary actions */
.button,
.w-action-primary {
    background-color: var(--w-color-primary) !important;
    /* Orange buttons */
    border: none;
    color: white !important;
    /* White text */
}

.button:hover,
.w-action-primary:hover {
    background-color: #e69500 !important;
    /* Darker orange on hover */
}

/* Text */
body,
.w-title,
.w-col-title,
.panel-body {
    color: var(--w-color-text);
    /* Dark grey text for readability */
}

body.login {
    background: var(--w-color-surface-menus)
}

body.login {

    /* Default input background and text color */
    input {
        background-color: white !important;
        /* Default background color for empty inputs */
        color: black !important;
        /* Ensures all text in inputs is black */
    }

    /* Target autofill fields */
    input:-webkit-autofill {
        background-color: white !important;
        /* Autofill background set to white */
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
        /* Forces background to white */
        box-shadow: 0 0 0px 1000px white inset !important;
        -webkit-text-fill-color: black !important;
        /* Ensures autofilled text color is black */
    }

    input:-webkit-autofill:focus {
        background-color: white !important;
        /* Ensures background remains white when autofilled input is focused */
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
        box-shadow: 0 0 0px 1000px white inset !important;
        -webkit-text-fill-color: black !important;
        /* Ensures autofilled text color is black */
    }

    .logo-wrapper img {
        display: block;
        margin: 0 auto;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
        color: black !important;
        /* Ensures autofilled text color is black */
    }

    a:hover {
        color: #FFA500;
        text-decoration: underline;
    }

    /* Text highlight color */
    ::selection {
        background-color: #FFA500;
        /* Orange highlight */
        color: white;
        /* Highlighted text color */
    }
}