/*
 * Design tokens. Colours, radius and fonts live here and nowhere else; everything below refers to them.
 * They override Bootstrap's own variables so that Bootstrap components pick them up.
 *
 * Contrast (WCAG AA needs 4.5:1 for text):
 *   white on --sm-primary          6.71
 *   --sm-dark-text on --sm-dark    8.9  (navbar and footer text)
 *   --sm-link on the page grey     5.89
 *   --sm-placeholder on white      4.61
 *   --sm-input-text on white       17.4
 */
:root {
    --sm-primary: #25683f;
    --sm-primary-hover: #1f5f3a;
    --sm-primary-active: #1a5232;
    --sm-primary-tint: #e3f3e7;
    --sm-primary-tint-strong: #c9e8d1;
    --sm-mint: #a8d8b0;
    --sm-link: #25683f;
    --sm-link-hover: #1a5232;

    --sm-page-bg: #f0f0f0;
    --sm-surface: #ffffff;
    --sm-surface-muted: #fafafa;
    --sm-dark: #1f2a25;
    --sm-dark-text: rgba(255, 255, 255, 0.75);
    --sm-dark-border: rgba(255, 255, 255, 0.15);
    --sm-on-dark: #ffffff;
    --sm-hero-bg: var(--sm-primary-tint);

    --sm-input-text: #1a1a1a;
    --sm-placeholder: #757575;
    --sm-input-disabled-bg: #e9ecef;
    --sm-danger-text: #b02a37;
    --sm-valid: #25683f;
    --sm-warning-tint: #fff8d6;

    --sm-radius: 0.5rem;
    --sm-focus-ring: 0 0 0 0.25rem rgba(37, 104, 63, 0.35);

    --sm-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    --bs-body-font-family: var(--sm-font-family);
    --bs-body-bg: var(--sm-page-bg);
    --bs-body-color: var(--sm-input-text);
    --bs-primary: var(--sm-primary);
    --bs-primary-rgb: 37, 104, 63;
    --bs-link-color: var(--sm-link);
    --bs-link-color-rgb: 37, 104, 63;
    --bs-link-hover-color: var(--sm-link-hover);
    --bs-link-hover-color-rgb: 26, 82, 50;
    --bs-dark: var(--sm-dark);
    --bs-dark-rgb: 31, 42, 37;
    --bs-border-radius: var(--sm-radius);
    --bs-border-radius-sm: var(--sm-radius);
    --bs-border-radius-lg: var(--sm-radius);
    --bs-focus-ring-color: rgba(37, 104, 63, 0.35);
    --bs-form-valid-color: var(--sm-valid);
    --bs-form-valid-border-color: var(--sm-valid);
    --bs-form-invalid-color: var(--sm-danger-text);
    --bs-form-invalid-border-color: var(--sm-danger-text);
}

html, body {
    background-color: var(--sm-page-bg);
    font-family: var(--sm-font-family);
}

/* The footer sits at the bottom of the window on short pages. The Blazor host wraps everything in #app. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 56px;
}

#app {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

h1, h2, h3, h4, h5 {
    font-weight: 500;
}

a, .nav-link {
    cursor: pointer;
    text-decoration: none;
}

a:focus-visible, .nav-link:focus-visible {
    border-radius: 0.25rem;
    outline: 2px solid var(--sm-primary);
    outline-offset: 2px;
}

/* Navbar and footer share the dark surface, so their focus outlines are light. Dropdown items sit on white and keep the default. */
.navbar .nav-link:focus-visible, .navbar-brand:focus-visible, .site-footer a:focus-visible {
    outline-color: var(--sm-on-dark);
}

.navbar {
    --bs-navbar-color: var(--sm-dark-text);
    --bs-navbar-hover-color: var(--sm-on-dark);
    --bs-navbar-active-color: var(--sm-on-dark);
    --bs-navbar-brand-color: var(--sm-on-dark);
    --bs-navbar-brand-hover-color: var(--sm-on-dark);
}

.navbar-brand {
    font-weight: 500;
}

.brand-logo, .nav-avatar {
    max-height: 24px;
    max-width: 24px;
}

.brand-logo {
    background-color: var(--sm-surface);
}

.site-footer {
    background-color: var(--sm-dark);
    color: var(--sm-dark-text);
    font-size: 0.9rem;
    padding: 2rem 0 1rem 0;
}

.site-footer a {
    color: var(--sm-dark-text);
}

.site-footer a:hover {
    color: var(--sm-on-dark);
    text-decoration: underline;
}

.site-footer .version-info {
    border-top: 1px solid var(--sm-dark-border);
    font-size: 0.8rem;
    padding-top: 1rem;
}

/* Buttons, form controls and navigation that Bootstrap hard-codes to its own blue. */
.btn-primary {
    --bs-btn-bg: var(--sm-primary);
    --bs-btn-border-color: var(--sm-primary);
    --bs-btn-hover-bg: var(--sm-primary-hover);
    --bs-btn-hover-border-color: var(--sm-primary-hover);
    --bs-btn-active-bg: var(--sm-primary-active);
    --bs-btn-active-border-color: var(--sm-primary-active);
    --bs-btn-disabled-bg: var(--sm-primary);
    --bs-btn-disabled-border-color: var(--sm-primary);
    --bs-btn-focus-shadow-rgb: 37, 104, 63;
}

.btn-outline-primary {
    --bs-btn-color: var(--sm-link);
    --bs-btn-border-color: var(--sm-primary);
    --bs-btn-hover-bg: var(--sm-primary);
    --bs-btn-hover-border-color: var(--sm-primary);
    --bs-btn-active-bg: var(--sm-primary-active);
    --bs-btn-active-border-color: var(--sm-primary-active);
    --bs-btn-disabled-color: var(--sm-primary);
    --bs-btn-disabled-border-color: var(--sm-primary);
    --bs-btn-focus-shadow-rgb: 37, 104, 63;
}

.btn-link {
    --bs-btn-color: var(--sm-link);
    --bs-btn-hover-color: var(--sm-link-hover);
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--sm-primary);
    border-color: var(--sm-primary);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--sm-primary);
    box-shadow: var(--sm-focus-ring);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--sm-primary);
}

.page-link {
    --bs-pagination-color: var(--sm-link);
    --bs-pagination-hover-color: var(--sm-link-hover);
    --bs-pagination-focus-color: var(--sm-link-hover);
    --bs-pagination-active-bg: var(--sm-primary);
    --bs-pagination-active-border-color: var(--sm-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--sm-primary);
}

.list-group {
    --bs-list-group-active-bg: var(--sm-primary);
    --bs-list-group-active-border-color: var(--sm-primary);
}

/* Entered text is near-black; placeholder text is lighter, italic and still readable. */
.form-control, .form-select {
    color: var(--sm-input-text);
}

.form-control::placeholder {
    color: var(--sm-placeholder);
    font-style: italic;
    opacity: 1;
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--sm-input-disabled-bg);
    opacity: 1;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--sm-valid);
}

.invalid {
    outline: 1px solid var(--sm-danger-text);
}

.validation-message {
    color: var(--sm-danger-text);
}

#blazor-error-ui {
    background: var(--sm-warning-tint);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

#sigmonster-alert-box {
    display: none;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 64px;
    width: 100%;
    z-index: 1000;
}

main {
    background-color: var(--sm-surface);
    flex: 1 0 auto;
}

.card {
    background-color: var(--sm-surface-muted);
}

.card-footer a {
    margin-right: 1.5em;
}

.getting-started {
    columns: 1;
}

@media only screen and (min-width: 576px) {
    .getting-started {
        columns: 2;
    }
}

.suggestion-byline {
    font-size: smaller;
    font-style: italic;
    max-width: 33%;
    text-align: center;
}

    .suggestion-byline > img {
        max-width: 100%;
    }

.signature-preview {
    background-color: transparent;
    border: none;
    overflow: hidden;
}

    .signature-preview iframe {
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        overflow: hidden;
    }


/* Form fields (the FormField component): the validation message always sits directly beneath the control. */
.form-field .validation-message {
    display: block;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

.input-image-preview {
    max-height: 1em;
    width: 1em;
}

.template-html-input {
    min-height: 10em;
}

.signature-delete-preview {
    max-width: 640px;
}

.org-logo {
    max-height: 6em;
    width: 6em;
}

.break-all {
    word-break: break-all;
}

.searchable-select-menu {
    max-height: 20rem;
    overflow-y: auto;
    z-index: 1000;
}

/* Bootstrap's dropdown-menu-end leaves the menu hanging off the edge of the toggle when it is shown without Popper. */
.dropdown-menu.dropdown-menu-end {
    right: 0;
}

/* Buttons. */
.btn {
    font-weight: 500;
}

/* Alerts (AlertBox): floating cards under the navbar. Information alerts use the brand tint. */
#sigmonster-alert-box .alert {
    border-radius: var(--sm-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.alert-success {
    --bs-alert-bg: var(--sm-primary-tint);
    --bs-alert-border-color: var(--sm-primary-tint-strong);
    --bs-alert-color: var(--sm-primary-active);
    --bs-alert-link-color: var(--sm-primary-active);
}

/* NewVersionNotification: the lightbulb sits on the dark navbar, so it takes the pale mint rather than Bootstrap's cyan. */
.navbar .text-info {
    --bs-info-rgb: 168, 216, 176;
}

/*
 * Tooltip: Bootstrap leaves .tooltip in the normal flow and relies on Popper to make it absolute, and we do not use Popper.
 * Left in the flow, it stretches the fixed navbar to the tooltip's height. Take it out of the flow and hang it below its
 * trigger (hence bs-tooltip-bottom in Tooltip.razor), centred on it.
 */
.tooltip-host {
    position: relative;
}

.tooltip-host > .tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin-top: 0.4rem;
}

.tooltip-host > .tooltip > .tooltip-arrow {
    left: calc(50% - var(--bs-tooltip-arrow-width) / 2);
}

/*
 * Blazored.Modal dialogs. The package's own styles are scoped to its components, so these selectors carry an extra
 * element name to outrank them without !important.
 */
div.bm-container {
    background-color: rgba(31, 42, 37, 0.6);
}

div.bm-container .blazored-modal {
    background-color: var(--sm-surface);
    border: 0;
    border-radius: var(--sm-radius);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    color: var(--sm-input-text);
}

div.bm-container .bm-header {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

div.bm-container .bm-title {
    font-size: 1.25rem;
    font-weight: 500;
}

div.bm-container .bm-close {
    border-radius: var(--sm-radius);
    color: var(--sm-input-text);
}

div.bm-container .bm-close:focus-visible {
    outline: 2px solid var(--sm-primary);
    outline-offset: 2px;
}

/* Home page hero: pale mint tint with near-black title (about 15:1) and primary-active subline (about 7:1). The monsters sit in their own column, so they never overlap the text. */
.hero {
    background-color: var(--sm-hero-bg);
    padding: 3rem 0;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sm-input-text);
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--sm-primary-active);
    margin-bottom: 1.5rem;
}

.hero-monsters {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
}

.hero-monster {
    flex: 0 1 45%;
    min-width: 0;
    max-width: 100%;
    height: auto;
}

.hero-monster-lead {
    flex-basis: 55%;
}

@media (min-width: 768px) {
    .hero {
        padding: 4rem 0;
    }

    .hero-title {
        font-size: 2.75rem;
    }

    .hero-subtitle {
        font-size: 1.75rem;
    }
}

/* Home page customer quotes. */
.quote {
    font-size: 1rem;
    font-style: italic;
}