/* This file needs to be kept in sync with Lemur.css in the Lemur library project */
@media (prefers-color-scheme: light) {
    :root {
        /* Colours - General */
        --general-background: white;
        --text-colour: black;
        --menu-icon-colour: #053259BB;
        --appointment-history-icon-colour: #053259BB;
        --ui-element-background: #f1f1f1;
        --text-colour-indicator-title: #888888;
        --data-label-label-colour: #888888;
        --subtle-grey: #CCCCCC;
        --mid-grey: #888888;
        --heavy-grey: #333333;
        --very-heavy-grey: #111111;
        /* Colours - Interaction */
        --hover-colour: #98c0c3;
        --active-colour: #689093;
        --inactive-colour: #AAAAAA;
        --selected-colour: #b8e0e3;
        --menu-hover-colour: var(--hover-colour);
        --menu-active-colour: var(--active-colour);
        --menu-background: var(--general-background);
        --header-hover-color: var(--active-colour);
        --header-active-color: #487073;
        /* Colours - UI Components */
        --header-colour: var(--hover-colour);
        --button-colour: #DFDFDF;
        --button-disabled-colour: #9F9F9F;
        --error-colour: #F02020;
        --highlight-colour: #E6F74D;
        --highlight-colour-pulse: #F5FCB6;
        --background-error: #F0D0D0;
        --background-warning: #F0E0D0;
        --popup-dialog-backdrop: rgba(0, 0, 0, 0.55);
        --mandatory-colour: #DD3333;
        --staff-notes-background-colour: var(--selected-colour);
        /* Colours - Scheduler */
        --scheduler-header-colour: var(--header-colour);
        --appointment-colour-clinical: #a7bccf;
        --appointment-colour-tbc: #d56e6e;
        --appointment-colour-absence: #dbc993;
        --appointment-colour-cancelled: #bbbbbb;
        --appointment-colour-other: #b099cf;
        --appointment-hover-colour: #c7dcef;
        --appointment-active-colour: #d7ecff;
        --slot-colour: #a2e099;
        --slot-hover-colour: #c2f0a9;
        --slot-active-colour: #d2f0b9;
        --scheduler-weekday-colour: #e8e9dc;
        --scheduler-weekend-colour: #c8c9bc;
        --scheduler-nonworkingday-colour: #c8c9bc;
        --scheduler-today-colour: #f8f9ec;
        /* Colours - Imports */
        --indicator-pending: #FAFAD2;
        --indicator-ignore: #D3D3D3;
        --indicator-processing: #ADD8E6;
        --indicator-complete: #90EE90;
        --indicator-failed: #F08080;
        --indicator-matched: #A09FD1;
        /* Colours - Appointment Statuses */
        --status-started: #9EE6AA;
        --status-completed: #9EE6AA;
        --status-cancel: #E69E9E;
        --status-dna: #E6E39E;
        --status-could-not-complete: #C99EE6;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Colours - General */
        --general-background: #1E1E1E;
        --text-colour: #CCCCCC;
        --menu-icon-colour: #2592E9BB;
        --appointment-history-icon-colour: #2592E9BB;
        --ui-element-background: #0e0e0e;
        --text-colour-indicator-title: #888888;
        --data-label-label-colour: #777777;
        --subtle-grey: #333333;
        --mid-grey: #888888;
        --heavy-grey: #CCCCCC;
        --very-heavy-grey: #EEEEEE;
        /* Colours - Interaction */
        --hover-colour: #406656;
        --active-colour: #78A0A3;
        --inactive-colour: #666666;
        --selected-colour: #2D4046;
        --menu-hover-colour: var(--hover-colour);
        --menu-active-colour: var(--active-colour);
        --menu-background: var(--general-background);
        --header-hover-color: var(--active-colour);
        --header-active-color: #98B0B3;
        /* Colours - UI Components */
        --header-colour: #305043;
        --button-colour: #404040;
        --button-disabled-colour: #666666;
        --error-colour: #F0D0D0;
        --highlight-colour: #E6F74D;
        --highlight-colour-pulse: #F5FCB6;
        --background-error: #F02020;
        --background-warning: #F09020;
        --popup-dialog-backdrop: rgba(0, 0, 0, 0.55);
        --mandatory-colour: #DD3333;
        --staff-notes-background-colour: var(--selected-colour);
        /* Colours - Scheduler */
        --scheduler-header-colour: var(--header-colour);
        --appointment-colour-clinical: #304070;
        --appointment-colour-tbc: #913131;
        --appointment-colour-absence: #806c30;
        --appointment-colour-cancelled: #555555;
        --appointment-colour-other: #54377a;
        --appointment-hover-colour: #506090;
        --appointment-active-colour: #6070A0;
        --slot-colour: #309030;
        --slot-hover-colour: #50B050;
        --slot-active-colour: #60C060;
        --scheduler-weekday-colour: #000000;
        --scheduler-weekend-colour: #222222;
        --scheduler-nonworkingday-colour: #222222;
        --scheduler-today-colour: #333333;
        /* Colours - Imports */
        --indicator-pending: #57410b;
        --indicator-ignore: #7a3d3d;
        --indicator-processing: #00008B;
        --indicator-complete: #006400;
        --indicator-failed: #614640;
        --indicator-matched: #343278;
        /* Colours - Appointment Statuses */
        --status-started: #354D39;
        --status-completed: #354D39;
        --status-cancel: #4D3535;
        --status-dna: #4D4C35;
        --status-could-not-complete: #43354D;
    }

    body {
        scrollbar-color: var(--mid-grey) #222222;
    }
}

:root {
    /* Gradients */
    --activity-indicator-background: linear-gradient(to bottom, var(--general-background) 0%, var(--active-colour) 50%, var(--general-background) 100%);
    --activity-indicator: linear-gradient(to right, rgb(255,255,255,0) 30%, var(--active-colour) 33%, rgb(255,255,255,0) 36%, rgb(255,255,255,0) 63%, var(--active-colour) 66%, rgb(255,255,255,0) 69%);
    /* Borders */
    --border-width: 1px;
    --border-highlight-width: 4px;
    --border-style: solid;
    --border-subtle-colour: var(--subtle-grey);
    --border-mid-colour: var(--mid-grey);
    --border-standard-colour: var(--heavy-grey);
    --border-heavy-colour: var(--very-heavy-grey);
    --border-error-colour: var(--error-colour);
    --border-highlight-colour: var(--highlight-colour);
    --border-subtle: var(--border-width) var(--border-style) var(--border-subtle-colour);
    --border-mid: var(--border-width) var(--border-style) var(--border-mid-colour);
    --border-standard: var(--border-width) var(--border-style) var(--border-standard-colour);
    --border-heavy: var(--border-width) var(--border-style) var(--border-heavy-colour);
    --border-error: var(--border-width) var(--border-style) var(--border-error-colour);
    --border-highlight: var(--border-highlight-width) var(--border-style) var(--border-highlight-colour);
    --border-invisible: var(--border-width) var(--border-style) transparent;
    /* Fonts */
    --ui-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ui-font-size: 13px;
    --help-font-size: 14px;
    --history-font-size: 14px;
    --main-menu-item-font-size: 20px;
    --main-menu-sub-item-font-size: 18px;
    --main-menu-sub-sub-item-font-size: 14px;
    --data-edit-label-font-size: var(--ui-font-size);
    --data-edit-value-font-size: var(--ui-font-size);
    --header-font-size: 14px;
    --data-grid-font-size: 13px;
    --scheduler-header-font-size: var(--header-font-size);
    --scheduler-item-font-size: var(--ui-font-size);
    --scheduler-item-title-font-size: 16px;
    --dialog-title-font-size: 19px;
    --container-title-font-size: 16px;
    --indicator-title-font-size: 12px;
    --appointment-buttons-title-font-size: 16px;
    --appointment-buttons-subtitle-font-size: 12px;
    --data-label-font-size: 12px;
    /* Sizes */
    --indicator-width: 110px;
    --indicator-height: 55px;
    --indicator-height-small: 22px;
}

html {
    overflow: clip;
}

body {
    margin: 0;
    padding: 0;
    overflow: clip;
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-size);
    font-weight: normal;
    background-color: var(--general-background);
    color: var(--text-colour);
}

p {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

h1 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 30px;
    font-weight: bold;
}

h3 {
    margin: 24px 0px 6px 0px;
    padding: 0;
    font-size: 24px;
    font-weight: normal;
}

.text-emphasis {
    font-weight: bold;
}

.page-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.item-label {
    font-size: var(--data-edit-label-font-size);
    grid-column: 1;
    margin: 4px;
    align-self: center;
    white-space: nowrap;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 0;
    border: var(--border-heavy);
    background-color: var(--general-background);
    color: var(--text-colour);
}

    input:focus, textarea:focus, select:focus {
        outline: none;
    }

    input[type=file]::file-selector-button {
        background-color: var(--button-colour);
        color: var(--text-colour);
        padding: 5px 10px;
        font-size: var(--ui-font-size);
        border: none;
        border-right: var(--border-heavy);
        cursor: pointer;
        user-select: none;
        transition: 1.2s;
    }

    input[type=file] {
        font-size: var(--ui-font-size);
        width: 350px;
        margin-left: 2px;
    }

        input[type=file]::file-selector-button:hover {
            background-color: var(--hover-colour);
            transition: 0.2s;
        }

        input[type=file]::file-selector-button:active {
            background-color: var(--active-colour);
            transition: 0.2s;
        }

a:link {
    color: #487073;
    text-decoration: underline;
    text-decoration-color: #48707333;
}

a:visited {
    color: #986093;
    text-decoration: underline;
    text-decoration-color: #98609333;
}

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

a:active {
    color: #082023;
    text-decoration: underline;
    text-decoration-color: #08202333;
}