@import "/assets/css/forms.9e737fe5.css";
@import "/assets/css/tables.65dc80fb.css";
@import "/assets/css/pagination.ae5644dc.css";
@import "/assets/css/cards.36f9c9d0.css";
@import "/assets/css/sidebar.0419af80.css";
@import "/assets/css/dropdown.2d8ffe9f.css";
@import "/assets/css/timeline.843c839a.css";
@import "/assets/css/hero.7dd0bdbb.css";
@import "/assets/css/pricing.6e897bb2.css";
@import "/assets/css/landing.8ee7ddd6.css";
@import "/assets/css/details.4dcbce35.css";
@import "/assets/css/orders.665a6c43.css";
@import "/assets/css/breadcrumbs.f2909c9e.css";
@import "/assets/css/dialog.c17b1664.css";
@import "/assets/css/allocations.74f77e4a.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: #1A2B48; /* Dark navy blue for better harmony with golden amber */

    /* 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;
    --color-status-refused: #F08080; /* Light coral */
    --color-status-refused-light: #FFF0F0;
    --color-status-refused-text: #333;
    --color-status-rejected: #CD5C5C; /* Indian red */
    --color-status-rejected-light: #FFE8E8;
    --color-status-rejected-text: #333;
    --color-status-abandoned: #A9A9A9; /* Dark gray */
    --color-status-abandoned-light: #F5F5F5;
    --color-status-abandoned-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 */

    --font-size: 16px;
    --border-radius: .5rem;
}

@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: #1A2B48; /* Dark navy blue for better harmony with golden amber */

        --color-secondary: rgb(35 72 136); /* Pastel blue for dark mode (darker for better contrast) */

        /* 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;
        --color-status-refused: #F08080;
        --color-status-refused-light: #3A2020;
        --color-status-refused-text: #e0e0e0;
        --color-status-rejected: #CD5C5C;
        --color-status-rejected-light: #3A1818;
        --color-status-rejected-text: #e0e0e0;
        --color-status-abandoned: #A9A9A9;
        --color-status-abandoned-light: #2A2A2A;
        --color-status-abandoned-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;
    line-height: 1.6;
}

html {
    font-size: var(--font-size);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scroll-behavior: smooth;
}

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

    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);
}

p.disabled {
    color: var(--color-text-secondary);
}

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

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

    &.notification, &.notice {
        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 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    &.row {
        flex-direction: row;
    }

    &.end {
        justify-content: flex-end;
    }

    a {
        display: inline-block;
        padding: .25rem 1rem;
        background-color: var(--color-form-button-bg);
        color: var(--color-form-button-text);
        text-decoration: none;
        border-radius: var(--border-radius);

        &:hover {
            background-color: var(--color-form-button-hover);
        }
        &:active {
            background-color: var(--color-form-button-active);
        }

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


/* Status indicators */
.status-requested, .status-intake, .status-quoting, .status-pending, .status-confirmed,
.status-refused, .status-rejected, .status-abandoned {
    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);
}

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

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

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


.status-reason {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--color-message-bg);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-primary);
}


/* 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;
    }
}

/* Contact list styling */
ul.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* 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;
    }

    & > header {
      display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.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;
        }
    }
}

.mb-1 {
    margin-bottom: 1rem;
}

.ml-1 {
    margin-left: 1rem;
}

.p-1 {
    padding: 1rem;
}

.d-none {
    display: none;
}

.d-inline-block {
    display: inline-block;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}