@import "/assets/css/forms.48f8b84c.css";
@import "/assets/css/tables.cfaacdf1.css";
@import "/assets/css/pagination.ca941765.css";
@import "/assets/css/cards.f5e79e43.css";
@import "/assets/css/sidebar.dc9cbedf.css";
@import "/assets/css/dropdown.4067fb3a.css";
@import "/assets/css/timeline.843c839a.css";
@import "/assets/css/hero.363baca2.css";
@import "/assets/css/pricing.3b86c867.css";
@import "/assets/css/details.4dcbce35.css";

:root {
    /* Base colors */
    --color-background: #f8f8f8;
    --color-text: #333;
    --color-text-secondary: #999;
    --color-border-light: #eee;
    --color-text-light: white;

    /* Primary colors - Pastel golden amber (lynx fur inspired) */
    --color-primary: #E5B76E; /* Pastel golden amber (darker for better contrast) */
    --color-primary-hover: #D4A65E; /* Slightly darker version */
    --color-primary-text: var(--color-text-light);

    /* Link colors - Golden ochre (accent color) */
    --color-link: #C99A2E; /* Golden ochre */
    --color-link-visited: #A88125; /* Darker golden ochre */
    --color-link-hover: #D9AA3F; /* Lighter golden ochre */

    /* Status colors - using sage green and deep plum (accent colors) */
    --color-status-requested: #FFD6A5; /* Keep pastel orange */
    --color-status-requested-light: #FFF2E2;
    --color-status-requested-text: #333;
    --color-status-intake: #A5D7F7; /* Keep pastel blue */
    --color-status-intake-light: #E3F4FD;
    --color-status-intake-text: #333;
    --color-status-quoting: #8A4F7D; /* Deep plum */
    --color-status-quoting-light: #F5EAFA;
    --color-status-quoting-text: #333;
    --color-status-pending: #FFD0A5; /* Keep pastel orange */
    --color-status-pending-light: #FFF0E2;
    --color-status-pending-text: #333;
    --color-status-confirmed: #7D9D74; /* Sage green */
    --color-status-confirmed-light: #E8F5EC;
    --color-status-confirmed-text: #333;

    /* Message colors */
    --color-message-bg: #E8F0F5; /* Soft blue */
    --color-message-border: #D6E0E8; /* Darker soft blue */
    --color-message-text: #5A7A8C; /* Text color for soft blue */
    --color-error-bg: #F7C4C4; /* Soft red */
    --color-error-border: #E8B0B0; /* Darker soft red */
    --color-error-text: #8C4A4A; /* Text color for soft red */

    /* Nav colors - using pastel golden amber (main color) */
    --color-nav-shadow: rgba(0, 0, 0, 0.1);
    --color-nav-gradient-start: #E5B76E; /* Pastel golden amber (darker for better contrast) */
    --color-nav-gradient-end: #D4A65E; /* Darker pastel golden amber */
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Base colors */
        --color-background: #121212;
        --color-text: #e0e0e0;
        --color-text-secondary: #b0b0b0;
        --color-border-light: #333;
        --color-text-light: #e0e0e0;

        /* Primary colors - dark mode versions of pastel golden amber */
        --color-primary: #E5C690; /* Pastel golden amber for dark mode (darker for better contrast) */
        --color-primary-hover: #F5D6A0; /* Slightly lighter for hover */
        --color-primary-text: #2A2010; /* Dark brown for better contrast with primary color */

        /* Link colors - dark mode golden ochre */
        --color-link: #D9AA3F; /* Brighter golden ochre for dark mode */
        --color-link-visited: #C99A2E; /* Regular golden ochre */
        --color-link-hover: #E9BA4F; /* Even brighter golden ochre */

        /* Status colors - dark mode versions */
        --color-status-requested: #FFD6A5;
        --color-status-requested-light: #332D20;
        --color-status-requested-text: #e0e0e0;
        --color-status-intake: #A5D7F7;
        --color-status-intake-light: #1A2A33;
        --color-status-intake-text: #e0e0e0;
        --color-status-quoting: #9A5F8D; /* Brighter deep plum for dark mode */
        --color-status-quoting-light: #2A2030;
        --color-status-quoting-text: #e0e0e0;
        --color-status-pending: #FFD0A5;
        --color-status-pending-light: #332A20;
        --color-status-pending-text: #e0e0e0;
        --color-status-confirmed: #8DAD84; /* Brighter sage green for dark mode */
        --color-status-confirmed-light: #1A2A20;
        --color-status-confirmed-text: #e0e0e0;

        /* Message colors - dark mode */
        --color-message-bg: #1A2A3A; /* Dark soft blue */
        --color-message-border: #2A3A4A; /* Darker soft blue border */
        --color-message-text: #A0C0D0; /* Light soft blue text */
        --color-error-bg: #3A2020; /* Dark soft red */
        --color-error-border: #5A3030; /* Darker soft red border */
        --color-error-text: #E0B0B0; /* Light soft red text */

        /* Nav colors - dark mode pastel golden amber */
        --color-nav-shadow: rgba(0, 0, 0, 0.3);
        --color-nav-gradient-start: #E5C690; /* Pastel golden amber (darker for better contrast) */
        --color-nav-gradient-end: #D4B580; /* Slightly darker pastel golden amber */
    }
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Basic link styling */
a {
    color: var(--color-link);
    text-decoration: underline;

    &.external:after {
        content: " \2197";
    }
}

a:visited {
    color: var(--color-link-visited);
}

a:hover {
    color: var(--color-link-hover);
}

h1 {
    color: var(--color-text);
    padding-bottom: 10px;
    margin: 0;
}

.message {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;

    &.notification {
        background-color: var(--color-message-bg);
        border: 1px solid var(--color-message-border);
        color: var(--color-message-text);
    }

    &.error {
        background-color: var(--color-error-bg);
        border-color: var(--color-error-border);
        color: var(--color-error-text);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
}

.actions {
    a {
        display: inline-block;
        margin-right: 10px;
        padding: .25rem 1rem;
        background-color: var(--color-primary);
        color: var(--color-primary-text);
        text-decoration: none;
        border-radius: 4px;

        &:hover {
            background-color: var(--color-primary-hover);
        }

        &:last-of-type {
            margin-right: 0;
        }
    }
}


/* Status indicators */
.status-requested, .status-intake, .status-quoting, .status-pending, .status-confirmed {
    display: inline-block;
    padding: .25rem 1rem;
    border-radius: .25rem;
    font-size: 0.85em;
    font-weight: 500;
    text-align: center;
    border: 1px solid;
}

.status-requested {
    background-color: var(--color-status-requested-light);
    border-color: var(--color-status-requested);
    color: var(--color-status-requested-text);
}

.status-intake {
    background-color: var(--color-status-intake-light);
    border-color: var(--color-status-intake);
    color: var(--color-status-intake-text);
}

.status-quoting {
    background-color: var(--color-status-quoting-light);
    border-color: var(--color-status-quoting);
    color: var(--color-status-quoting-text);
}

.status-pending {
    background-color: var(--color-status-pending-light);
    border-color: var(--color-status-pending);
    color: var(--color-status-pending-text);
}

.status-confirmed {
    background-color: var(--color-status-confirmed-light);
    border-color: var(--color-status-confirmed);
    color: var(--color-status-confirmed-text);
}


/* Location details styling */
.location-details {
    margin-top: 10px;
    padding-left: 15px;
    border-left: 3px solid var(--color-primary);

    p {
        margin: 5px 0;
    }
}

.address {
    span {
        display: inline-block;
    }
}

/* Layout container for sidebar and main content */
.layout-container {
    display: flex;
    min-height: 100vh;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

/* Main content area */
.main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;

    @media (max-width: 768px) {
        margin-top: 60px;
    }
}

.page-wrapper {
    display: flex;
    justify-content: stretch;
    flex-grow: 1;

    .page {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;

        .footer {
            text-align: center;
            font-size: .8rem;
            width: 100%;
            padding: 1rem;
        }
    }
}