﻿/* ReSharper disable Redundant */
:root {
    --fpm-border-radius: .375rem;
    --fpm-checkbox-border-radius: .25rem;
    --fpm-font-size: .875rem;
    --fpm-font-size-small: .75rem;
    --fpm-input-label-padding: .6875rem .75rem;
    --fpm-default-height: 2rem;
    --fpm-width-small: 12rem;
    --fpm-width-medium: 20rem;
    --fpm-input-option-gap: .5rem;
    /*#region Red*/
    --fpm-red-base: #DE303F; /*concern color, danger button, intake appt*/
    --fpm-red-light: #F4C7CB; /*focus ring/subtle background*/
    --fpm-red-dark: #8F1F29; /*hover/active*/
    /*#endregion*/
    /*#region Orange*/
    --fpm-orange-base: #D57A2A; /*warning color, testing appt*/
    --fpm-orange-light: #F4D4B6;
    --fpm-orange-dark: #874514;
    /*#endregion*/
    /*#region Yellow*/
    --fpm-yellow-base: #D8BC58; /*watch color, observation appt*/
    --fpm-yellow-light: #F5E9B9;
    --fpm-yellow-dark: #887425;
    /*#endregion*/
    /*#region Green*/
    --fpm-green-base: #6F8F5E; /*success button*/
    --fpm-green-light: #D9E5D2; /*focus ring/subtle background*/
    --fpm-green-dark: #455F3B; /*hover/active*/
    /*#endregion*/
    /*#region Blue*/
    --fpm-blue-base: #5E7590; /*primary button, interview appt*/
    --fpm-blue-light: #D1D9E2; /*focus ring/subtle background*/
    --fpm-blue-dark: #354252; /*hover/active*/
    /*#endregion*/
    /*#region Purple*/
    --fpm-purple-base: #805A72; /*consultation appt*/
    --fpm-purple-light: #E0D2DA;
    --fpm-purple-dark: #483240;
    /*#endregion*/
    /*#region Light*/
    --fpm-white: #FFFFFF; /*main background*/
    --fpm-lightgray-base: #E7E7E7; /*component borders, block appt background*/
    --fpm-lightgray-light: #F7F7F7; /*label background, headers, footers, toolbars, logo text*/
    --fpm-lightgray-dark: #D7D7D7; /*main framing background*/
    /*#endregion*/
    /*#region Dark*/
    --fpm-gray-base: #707070; /*secondary button*/
    --fpm-gray-light: #B7B7B7; /*block appt text, focus ring/subtle background*/
    --fpm-gray-dark: #4A4A4A; /*muted text, hover/active*/
    --fpm-text-color: #272727; /*site-wide text color*/
    --fpm-input-color: #272727; /*site-wide text color*/
    /*#endregion*/
    /* Primary */
    --color-sf-primary: var(--fpm-blue-base);
    --color-sf-primary-text-color: var(--fpm-white);
    --color-sf-primary-light: var(--fpm-blue-light);
    --color-sf-primary-lighter: var(--fpm-blue-light);
    --color-sf-primary-dark: var(--fpm-blue-dark);
    --color-sf-primary-darker: var(--fpm-blue-dark);
    /* Status colors */
    --color-sf-success: var(--fpm-green-base);
    --color-sf-info: var(--fpm-yellow-base);
    --color-sf-warning: var(--fpm-orange-base);
    --color-sf-danger: var(--fpm-red-base);
    /* Light status colors */
    --color-sf-success-light: var(--fpm-green-light);
    --color-sf-info-light: var(--fpm-yellow-light);
    --color-sf-warning-light: var(--fpm-orange-light);
    --color-sf-danger-light: var(--fpm-red-light);
    /* Dark status colors */
    --color-sf-success-dark: var(--fpm-green-dark);
    --color-sf-info-dark: var(--fpm-yellow-dark);
    --color-sf-warning-dark: var(--fpm-orange-dark);
    --color-sf-danger-dark: var(--fpm-red-dark);
    /* Subtle status backgrounds */
    --color-sf-success-light-alt: var(--fpm-green-light);
    --color-sf-info-light-alt: var(--fpm-yellow-light);
    --color-sf-warning-light-alt: var(--fpm-orange-light);
    --color-sf-danger-light-alt: var(--fpm-red-light);
    /* Surfaces and borders */
    --color-sf-white: var(--fpm-white);
    --color-sf-black: var(--fpm-text-color);
    --color-sf-content-bg-color: var(--fpm-white);
    --color-sf-content-bg-color-alt1: var(--fpm-lightgray-light);
    --color-sf-content-bg-color-alt2: var(--fpm-lightgray-base);
    --color-sf-border-light: var(--fpm-lightgray-base);
    --color-sf-border-alt: var(--fpm-lightgray-dark);
    --color-sf-secondary: var(--fpm-gray-base);
    --color-sf-secondary-light: var(--fpm-gray-light);
    --color-sf-secondary-dark: var(--fpm-gray-dark);
    /* Primary component states */
    --color-sf-primary-bg-color: var(--fpm-blue-base);
    --color-sf-primary-bg-color-disabled: var(--fpm-blue-light);
    --color-sf-primary-bg-color-focus: var(--fpm-blue-dark);
    --color-sf-primary-bg-color-hover: var(--fpm-blue-dark);
    --color-sf-primary-bg-color-pressed: var(--fpm-blue-dark);
    --color-sf-primary-border-color: var(--fpm-blue-base);
    --color-sf-primary-border-color-disabled: var(--fpm-blue-light);
    --color-sf-primary-border-color-focus: var(--fpm-blue-dark);
    --color-sf-primary-border-color-hover: var(--fpm-blue-dark);
    --color-sf-primary-border-color-pressed: var(--fpm-blue-dark);
    --color-sf-primary-text: var(--fpm-blue-dark);
    --color-sf-primary-text-disabled: var(--fpm-gray-base);
    --color-sf-primary-text-focus: var(--fpm-white);
    --color-sf-primary-text-hover: var(--fpm-white);
    --color-sf-primary-text-pressed: var(--fpm-white);
    /* General interactive content */
    --color-sf-content-bg-color-focus: var(--fpm-blue-light);
    --color-sf-content-bg-color-hover: var(--fpm-blue-light);
    --color-sf-content-bg-color-selected: var(--fpm-blue-base);
    --color-sf-content-bg-color-pressed: var(--fpm-blue-dark);
    --color-sf-content-text-color-focus: var(--fpm-blue-dark);
    --color-sf-content-text-color-hover: var(--fpm-blue-dark);
    --color-sf-content-text-color-selected: var(--fpm-white);
    --color-sf-content-text-color-pressed: var(--fpm-white);
    /* Menu and flyout states */
    --color-sf-flyout-bg-color: var(--fpm-white);
    --color-sf-flyout-bg-color-focus: var(--fpm-blue-light);
    --color-sf-flyout-bg-color-hover: var(--fpm-blue-light);
    --color-sf-flyout-bg-color-pressed: var(--fpm-blue-dark);
    --color-sf-flyout-text-color: var(--fpm-text-color);
    --color-sf-flyout-text-color-disabled: var(--fpm-gray-light);
    --color-sf-flyout-text-color-focus: var(--fpm-blue-dark);
    --color-sf-flyout-text-color-hover: var(--fpm-blue-dark);
    --color-sf-flyout-text-color-pressed: var(--fpm-white);
    /* Interactive borders */
    --color-sf-border-focus: var(--fpm-blue-base);
    --color-sf-border-hover: var(--fpm-blue-base);
    --color-sf-border-selected: var(--fpm-blue-base);
    --color-sf-border-pressed: var(--fpm-blue-dark);
}
    /* ReSharper restore Redundant */

/* Bootstrap primary button states */
.btn-primary {
    --bs-btn-hover-color: var(--fpm-white);
    --bs-btn-hover-bg: var(--fpm-blue-dark);
    --bs-btn-hover-border-color: var(--fpm-blue-dark);
    --bs-btn-active-color: var(--fpm-white);
    --bs-btn-active-bg: var(--fpm-blue-dark);
    --bs-btn-active-border-color: var(--fpm-blue-dark);
}

/* Syncfusion primary button states */
.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover,
.e-btn.e-primary:active,
.e-css.e-btn.e-primary:active,
.e-btn.e-primary.e-active,
.e-css.e-btn.e-primary.e-active {
    background-color: var(--fpm-blue-dark) !important;
    border-color: var(--fpm-blue-dark) !important;
    color: var(--fpm-white) !important;
}

/* Syncfusion success button states */
.e-btn.e-success:hover,
.e-css.e-btn.e-success:hover,
.e-btn.e-success:active,
.e-css.e-btn.e-success:active,
.e-btn.e-success.e-active,
.e-css.e-btn.e-success.e-active {
    background-color: var(--fpm-green-dark) !important;
    border-color: var(--fpm-green-dark) !important;
    color: var(--fpm-white) !important;
}

/* Bootstrap disabled button states */
.btn-primary:disabled,
.btn-primary.disabled {
    --bs-btn-disabled-bg: var(--fpm-blue-base);
    --bs-btn-disabled-border-color: var(--fpm-blue-base);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    --bs-btn-disabled-bg: var(--fpm-gray-base);
    --bs-btn-disabled-border-color: var(--fpm-gray-base);
}

.btn-success:disabled,
.btn-success.disabled {
    --bs-btn-disabled-bg: var(--fpm-green-base);
    --bs-btn-disabled-border-color: var(--fpm-green-base);
}

.btn-warning:disabled,
.btn-warning.disabled {
    --bs-btn-disabled-bg: var(--fpm-orange-base);
    --bs-btn-disabled-border-color: var(--fpm-orange-base);
}

.btn-danger:disabled,
.btn-danger.disabled {
    --bs-btn-disabled-bg: var(--fpm-red-base);
    --bs-btn-disabled-border-color: var(--fpm-red-base);
}

/* Syncfusion disabled button states */
.e-btn.e-primary:disabled,
.e-css.e-btn.e-primary:disabled,
.e-btn.e-primary.e-disabled,
.e-css.e-btn.e-primary.e-disabled {
    background-color: var(--fpm-blue-base) !important;
    border-color: var(--fpm-blue-base) !important;
    color: var(--fpm-white) !important;
    opacity: .65;
}

.e-btn.e-secondary:disabled,
.e-css.e-btn.e-secondary:disabled,
.e-btn.e-secondary.e-disabled,
.e-css.e-btn.e-secondary.e-disabled {
    background-color: var(--fpm-gray-base) !important;
    border-color: var(--fpm-gray-base) !important;
    color: var(--fpm-white) !important;
    opacity: .65;
}

.e-btn.e-success:disabled,
.e-css.e-btn.e-success:disabled,
.e-btn.e-success.e-disabled,
.e-css.e-btn.e-success.e-disabled {
    background-color: var(--fpm-green-base) !important;
    border-color: var(--fpm-green-base) !important;
    color: var(--fpm-white) !important;
    opacity: .65;
}

.e-btn.e-warning:disabled,
.e-css.e-btn.e-warning:disabled,
.e-btn.e-warning.e-disabled,
.e-css.e-btn.e-warning.e-disabled {
    background-color: var(--fpm-orange-base) !important;
    border-color: var(--fpm-orange-base) !important;
    color: var(--fpm-white) !important;
    opacity: .65;
}

.e-btn.e-danger:disabled,
.e-css.e-btn.e-danger:disabled,
.e-btn.e-danger.e-disabled,
.e-css.e-btn.e-danger.e-disabled {
    background-color: var(--fpm-red-base) !important;
    border-color: var(--fpm-red-base) !important;
    color: var(--fpm-white) !important;
    opacity: .65;
}

.fpmtoolbar .e-menu-wrapper li.e-menu-item:active,
.fpmtoolbar .e-menu-wrapper li.e-menu-item.e-focused,
.fpmtoolbar .e-menu-container li.e-menu-item:active,
.fpmtoolbar .e-menu-container li.e-menu-item.e-focused {
    background-color: var(--fpm-blue-base) !important;
    color: var(--fpm-white) !important;
}