/*
====================
Brand variables
Set to EXODESK branding; customise as needed.

NOTES:
* The base template structure and layout is defined in 'mySite.css', this file is just for tweaking the appearance aspects already defined there.
* Avoid adding literal values into the styles in this file (e.g. color: #ffffff), use variables wherever possible (e.g. color: val(--brand-primary)).
====================
*/
:root {
	/* Branding */
    --brand-primary: #f57e20;
    --brand-secondary: #003b6f;
    --brand-secondary-text: white;
    --brand-secondary-link-color: white;
    --brand-secondary-link-color-hover: white;
    --brand-font-family: "Segoe UI";
    --brand-font-size: 16px;
    --brand-link-color: #485fc7;
    --brand-link-color-hover: #363636;

	/* Nav bar links */
    --brand-navbar-link-color: #000000;
    --brand-navbar-hover-bg: #888888;
    --brand-navbar-hover-color: #000000;
    --brand-navbar-brand-font-weight: bold;

	/* Fields */
    --brand-field-border-width: 2px;
    --brand-field-border-color: #777777;
    --brand-field-bg-color-focus: #00800012;
    --brand-field-small-border-width: 1px;

	/* Buttons */
    --brand-btn-bg: #f0f0f0;
    --brand-btn-text: #333333;
    --brand-btn-border-color: #777777;
    --brand-btn-border-width: 2px;
    --brand-btn-bg-hover: #e0e0e0;
    --brand-btn-text-hover: #333333;
    --brand-btn-border-color-hover: #5c5c5c;
    --brand-btn-small-border-width: 1px;
    --brand-btn-small-bg: #ffffff;
    --brand-btn-small-text: #333333;
    --brand-btn-small-border-color: #cccccc;
    --brand-btn-small-bg-hover: #ebebeb;
    --brand-btn-small-text-hover: #333333;
    --brand-btn-small-border-color-hover: #adadad;
    --brand-btn-disabled-bg: #f5f5f5;
    --brand-btn-disabled-text: #a0a0a0;
    --brand-btn-disabled-border-color: #d4d4d4;

	/* Panels */
    --brand-panel-border-width: 1px;
    --brand-panel-border-color: #dddddd;
    --brand-panel-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --brand-panel-default-bg: #f5f5f5;
    --brand-panel-default-text: #333333;
    --brand-urgent: red;
    --brand-urgent-text: #fff;
    --brand-urgent-link-color: #fff;
    --brand-urgent-link-color-hover: #cfcaca;
}

/*
====================
Body
====================
*/
body {
    font-family: var(--brand-font-family, --base-font-stack);
	font-size: var(--brand-font-size);
}

/*
====================
Links
====================
*/
a {
	color: var(--brand-link-color);
}
a:hover {
	color: var(--brand-link-color-hover);
}

/*
====================
Fields
====================
*/
input:not([type="submit"],.btn,[type="file"],.form-control),
.combo-style
{
	border-width: var(--brand-field-border-width);
	border-color: var(--brand-field-border-color);

	&:focus {
		background-color: var(--brand-field-bg-color-focus);
	}
}

/*
====================
Buttons (form)
====================
*/
input[type="submit"]:not(.btn),
.spanAsButton
{
	border-width: var(--brand-btn-border-width);
	background-color: var(--brand-btn-bg);
	color: var(--brand-btn-text);
	border-color: var(--brand-btn-border-color);

	&:hover,
	&:focus,
	&:active,
	&.active {
		background-color: var(--brand-btn-bg-hover);
		color: var(--brand-btn-text-hover);
		border-color: var(--brand-btn-border-color-hover);
	}
}

/*
====================
Buttons (small)
====================
*/
.btn,
.btn-admin-console
{
	border-width: var(--brand-btn-small-border-width);
	background-color: var(--brand-btn-small-bg);
	color: var(--brand-btn-small-text);
	border-color: var(--brand-btn-small-border-color);

	&:hover,
	&:focus,
	&:active,
	&.active {
		background-color: var(--brand-btn-small-bg-hover);
		color: var(--brand-btn-small-text-hover);
		border-color: var(--brand-btn-small-border-color-hover);
	}
}

.btn-admin-console
{
	&,
	&:hover,
	&:focus,
	&:active,
	&.active {
		background-color: var(--brand-secondary);
		color: var(--brand-secondary-text);
	}
}

/*
====================
Buttons (disabled)
====================
*/
:is(input[type="submit"], .spanAsButton, .btn, .btn-admin-console):is(:disabled, .aspNetDisabled, .disabled)
{
	&,
	&:hover,
	&:focus,
	&:active,
	&.active {
		background-color: var(--brand-btn-disabled-bg);
		color: var(--brand-btn-disabled-text);
		border-color: var(--brand-btn-disabled-border-color);
		cursor: default;
	}
}

/*
====================
Nav bar
====================
*/
.navbar-default {
    background-color: var(--brand-primary);

    .navbar-brand {
        font-weight: var(--brand-navbar-brand-font-weight);
    }

    /* Links */
   .navbar-nav > li > a {
		color:var(--brand-navbar-link-color);

        &:hover,
        &:focus {
            background-color: var(--brand-navbar-hover-bg);
            color: var(--brand-navbar-hover-color);
        }
    }
}

/*
====================
Datagrids
====================
*/
.Grid {
	/* Column headings */
	th,
	.pgr {
		background: var(--brand-secondary);

		/* Links */
		a {
			color: var(--brand-secondary-link-color);

			&:hover,
			&:focus {
				color: var(--brand-secondary-link-color-hover);
				outline-color: var(--brand-secondary-link-color-hover);
			}
		}
	}

	/* Pagination footer */
	.pgr td {
		color: var(--brand-secondary-text);
		border-left-color: var(--brand-secondary-text);
	}
}

/*
====================
Panels
====================
*/
.panel {
	/* Container */
	border-width: var(--brand-panel-border-width);
	border-color: var(--brand-panel-border-color);
	box-shadow: var(--brand-panel-shadow);
	-webkit-box-shadow: var(--brand-panel-shadow);

	/* Default panel (light grey) */
	&.panel-default > .panel-heading {
		background-color: var(--brand-panel-default-bg);
		color: var(--brand-panel-default-text);
	}

	/* Loud panel (brand secondary color, e.g. navy) */
	.panel-heading.panel-heading-loud {
		background-color: var(--brand-secondary);
		color: var(--brand-secondary-text);

		a,
		span,
		label,
		.myLabel {
			color: var(--brand-secondary-link-color);

			&:hover,
			&:focus {
				color: var(--brand-secondary-link-color-hover);
			}
		}
	}

	&:has(.panel-heading-loud) {
		border-color: var(--brand-secondary);
	}

	/* Urgent panel (red) */
	.panel-heading.panel-heading-loud-alert {
		background-color: var(--brand-urgent);
		color: var(--brand-urgent-text);

		a,
		span,
		label,
		.myLabel {
			color: var(--brand-urgent-link-color);

			&:hover,
			&:focus {
				color: var(--brand-urgent-link-color-hover);
			}
		}
	}

	&:has(.panel-heading-loud-alert) {
		border-color: var(--brand-urgent);
	}
}

/*
====================
Dangerous Goods
====================
*/
.displayTable th {
	background: var(--brand-secondary);
	color: var(--brand-secondary-text);
}