/* FroggyDIY brand tokens (pond green, lily-pad yellow). Bootstrap 5.3 reads these, so components pick them up without a Sass build.
   Every text/background pair is checked for WCAG AA in both themes. */
:root, [data-bs-theme=light] {
    --fx-brand: #4D7C0F;
    --fx-brand-hover: #3F6212;
    --fx-on-brand: #fff;
    --fx-pond: #134E4A;
    --fx-yellow: #FACC15;

    --bs-primary: var(--fx-brand);
    --bs-primary-rgb: 77, 124, 15;
    --bs-link-color: var(--fx-brand);
    --bs-link-color-rgb: 77, 124, 15;
    --bs-link-hover-color: var(--fx-brand-hover);
    --bs-link-hover-color-rgb: 63, 98, 18;
    --bs-body-bg: #FAF8F5;
    --bs-body-bg-rgb: 250, 248, 245;
    --bs-body-color: #1C1917;
    --bs-body-color-rgb: 28, 25, 23;
    --bs-emphasis-color: #1C1917;
    --bs-secondary-color: rgba(28, 25, 23, 0.72);
    --bs-tertiary-bg: #FFFFFF;
    --bs-tertiary-bg-rgb: 255, 255, 255;
    --bs-border-color: #E7E1D8;
    --bs-success: #15803D;
    --bs-success-rgb: 21, 128, 61;
    --bs-danger: #B91C1C;
    --bs-danger-rgb: 185, 28, 28;
    --bs-warning: var(--fx-yellow);
    --bs-warning-rgb: 250, 204, 21;
    --bs-info: var(--fx-pond);
    --bs-info-rgb: 19, 78, 74;
    --bs-card-bg: #FFFFFF;
    --bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-border-radius: 0.5rem;
    --fx-heading-font: "Zilla Slab", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-bs-theme=dark] {
    --fx-brand: #A3E635;
    --fx-brand-hover: #BEF264;
    --fx-on-brand: #1C1917;
    --fx-pond: #5EEAD4;

    --bs-primary: var(--fx-brand);
    --bs-primary-rgb: 163, 230, 53;
    --bs-link-color: var(--fx-brand);
    --bs-link-color-rgb: 163, 230, 53;
    --bs-link-hover-color: var(--fx-brand-hover);
    --bs-link-hover-color-rgb: 190, 242, 100;
    --bs-body-bg: #1C1917;
    --bs-body-bg-rgb: 28, 25, 23;
    --bs-body-color: #F5F5F4;
    --bs-body-color-rgb: 245, 245, 244;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: rgba(245, 245, 244, 0.72);
    --bs-tertiary-bg: #292524;
    --bs-tertiary-bg-rgb: 41, 37, 36;
    --bs-border-color: #44403C;
    --bs-success: #4ADE80;
    --bs-success-rgb: 74, 222, 128;
    --bs-danger: #F87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-info: var(--fx-pond);
    --bs-info-rgb: 94, 234, 212;
    --bs-success-text-emphasis: #4ADE80;
    --bs-danger-text-emphasis: #F87171;
    --bs-card-bg: #292524;
}

.card { --bs-card-bg: var(--bs-tertiary-bg); }

/* Compiled .btn-primary/.btn-outline-primary don't follow --bs-primary, so wire them up here. */
.btn-primary {
    --bs-btn-color: var(--fx-on-brand);
    --bs-btn-bg: var(--fx-brand);
    --bs-btn-border-color: var(--fx-brand);
    --bs-btn-hover-color: var(--fx-on-brand);
    --bs-btn-hover-bg: var(--fx-brand-hover);
    --bs-btn-hover-border-color: var(--fx-brand-hover);
    --bs-btn-active-color: var(--fx-on-brand);
    --bs-btn-active-bg: var(--fx-brand-hover);
    --bs-btn-active-border-color: var(--fx-brand-hover);
    --bs-btn-disabled-color: var(--fx-on-brand);
    --bs-btn-disabled-bg: var(--fx-brand);
    --bs-btn-disabled-border-color: var(--fx-brand);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--fx-brand);
    --bs-btn-border-color: var(--fx-brand);
    --bs-btn-hover-color: var(--fx-on-brand);
    --bs-btn-hover-bg: var(--fx-brand);
    --bs-btn-hover-border-color: var(--fx-brand);
    --bs-btn-active-color: var(--fx-on-brand);
    --bs-btn-active-bg: var(--fx-brand-hover);
    --bs-btn-active-border-color: var(--fx-brand-hover);
    --bs-btn-disabled-color: var(--fx-brand);
    --bs-btn-disabled-border-color: var(--fx-brand);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Compiled outline colors fail AA on the dark background; use the themed tokens instead. */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-secondary-color);
}

.btn-outline-success, .btn-outline-danger {
    --bs-btn-color: var(--fx-tone);
    --bs-btn-border-color: var(--fx-tone);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--fx-tone);
    --bs-btn-hover-border-color: var(--fx-tone);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--fx-tone);
    --bs-btn-active-border-color: var(--fx-tone);
}

.btn-outline-success { --fx-tone: var(--bs-success); }
.btn-outline-danger { --fx-tone: var(--bs-danger); }

h1, h2, h3, h4, h5, h6, .fx-wordmark {
    font-family: var(--fx-heading-font);
    font-weight: 700;
}

h1, h2, .fx-wordmark {
    color: var(--fx-pond);
}

[data-bs-theme=dark] .fx-wordmark {
    color: #FAF8F5;
}

.fx-wordmark {
    font-size: 1.5rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fx-wordmark-diy { color: var(--fx-brand); }

.fx-wordmark svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--fx-brand);
}

.text-success { color: var(--bs-success) !important; }

/* Urgency colors, shared by every page that shows a fix (see UrgencyBadge.razor). */
.urgency-emergency { background-color: var(--bs-danger); color: #fff; }
[data-bs-theme=dark] .urgency-emergency { color: #1C1917; }
.urgency-high { background-color: var(--fx-yellow); color: #1C1917; }
.urgency-medium { background-color: var(--fx-pond); color: #fff; }
[data-bs-theme=dark] .urgency-medium { color: #1C1917; }
.urgency-low { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); }

:focus-visible {
    outline: 2px solid var(--fx-brand);
    outline-offset: 2px;
}

.btn:focus-visible, .form-control:focus, .form-check-input:focus, .form-select:focus {
    border-color: var(--fx-brand);
    box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--fx-brand);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

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

.blazor-error-boundary {
    background: var(--bs-danger);
    padding: 1rem;
    color: #fff;
    border-radius: var(--bs-border-radius);
}

    .blazor-error-boundary::after {
        content: "Something went wrong here. Try reloading the page."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--bs-secondary-color);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Big rows on /more. */
.more-row {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
}

/* ---- Compiled Bootstrap pieces that still use Bootstrap blue or fail AA in dark mode ---- */
.btn-danger {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-body-color);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-body-color);
}

.text-bg-primary { color: var(--fx-on-brand) !important; }
.text-secondary { color: var(--bs-secondary-color) !important; }

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--fx-brand);
    --bs-nav-pills-link-active-color: var(--fx-on-brand);
}

/* Unchecked boxes need a 3:1 edge against the card (WCAG 1.4.11). */
.form-check-input { border-color: var(--bs-secondary-color); }

.form-check-input:checked {
    background-color: var(--fx-brand);
    border-color: var(--fx-brand);
}

.progress { --bs-progress-bar-bg: var(--fx-brand); }

/* Disabled fields (e.g. Username): Bootstrap's grey fill and label fail AA in dark mode; use a dashed edge instead. */
.form-control:disabled {
    background-color: var(--bs-body-bg);
    border-style: dashed;
}

.form-floating > .form-control:disabled ~ label { color: var(--bs-secondary-color); }
.form-floating > .form-control:disabled ~ label::after { background-color: transparent; }

/* ---- Account pages (AccountLayout and ManageLayout wrap them in .account) ---- */
.account hr { display: none; }

/* Template subtitles like "Create a new account." read as a lead line, not a heading block. */
.account h2 {
    font-family: var(--bs-body-font-family);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

.account h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.account h4 { font-size: 1.1rem; }

/* Each form or side section becomes a card. */
.account .row > [class*="col-"] > :is(section, form) {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* Narrow cards: the right-aligned floating placeholder collides with the label, so show it only while typing. */
.account .form-floating > .form-control:not(:focus)::placeholder { color: transparent; }

/* Manage nav: a column on wide screens, a scrolling row of pills on phones. */
.account-manage .nav-pills {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--fx-brand);
    gap: 0.25rem;
}

    .account-manage .nav-pills .nav-link { white-space: nowrap; }