/* ============================================================
   Theme - green / gold / black
   Bootstrap 5.2.3 exposes per-component CSS variables, so most of the
   re-skin below is variable reassignment rather than rule duplication.
   Palette variables are global (badges and buttons render on both the
   dark storefront and the light back office); anything that flips a
   surface from light to dark is scoped to .site-body so Account/Admin
   keeps its readable data-entry chrome.
   ============================================================ */
:root {
    --fmm-black: #050806;
    --fmm-ink: #0c110e;
    --fmm-ink-2: #101713;
    --fmm-panel: #141c17;
    --fmm-panel-hi: #1b2620;
    --fmm-line: #26332c;

    --fmm-text: #e7ede8;
    --fmm-text-dim: #9fb0a4;

    --fmm-green-deep: #0a2c1a;
    --fmm-green-dark: #0f4527;
    --fmm-green: #17703f;
    --fmm-green-lit: #1f8f51;
    --fmm-green-bright: #39bd75;

    --fmm-gold-deep: #6b5413;
    --fmm-gold-dark: #96751d;
    --fmm-gold: #c9a227;
    --fmm-gold-lit: #e0c14e;
    --fmm-gold-pale: #f3e3a8;
    --fmm-parchment: #f2e8ca;

    --fmm-red: #b3352c;
    --fmm-red-lit: #ff8b80;
    --fmm-amber: #dda72c;
    --fmm-teal: #10695f;

    --fmm-gold-face: linear-gradient(180deg, #e6c65c 0%, #c9a227 48%, #a6821c 100%);
    --fmm-green-face: linear-gradient(180deg, #1f8f51 0%, #17703f 50%, #0f4d2b 100%);
    --fmm-black-face: linear-gradient(180deg, #131c16 0%, #070b08 100%);
    --fmm-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --fmm-drop: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.35);

    --fmm-serif: Georgia, "Times New Roman", "Palatino Linotype", serif;

    /* Bootstrap semantic remap. Values here must stay legible on white as
       well - the back office renders the same badges on a light surface. */
    --bs-primary: #c9a227;
    --bs-primary-rgb: 201, 162, 39;
    --bs-secondary: #2f3d34;
    --bs-secondary-rgb: 47, 61, 52;
    --bs-success: #17703f;
    --bs-success-rgb: 23, 112, 63;
    --bs-info: #10695f;
    --bs-info-rgb: 16, 105, 95;
    --bs-warning: #dda72c;
    --bs-warning-rgb: 221, 167, 44;
    --bs-danger: #b3352c;
    --bs-danger-rgb: 179, 53, 44;
    --bs-light: #f2e8ca;
    --bs-light-rgb: 242, 232, 202;
    --bs-dark: #0c110e;
    --bs-dark-rgb: 12, 17, 14;
    --bs-green: #17703f;
    --bs-yellow: #c9a227;

    --bs-link-color: #0f4527;
    --bs-link-hover-color: #17703f;
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.35rem;
    --bs-border-radius-xl: 0.5rem;
    --bs-highlight-bg: #f7edc9;
    --bs-code-color: #96751d;
}

/* ============================================================
   Storefront shell
   ============================================================ */
.site-body {
    --bs-body-bg: var(--fmm-ink);
    --bs-body-color: var(--fmm-text);
    --bs-body-color-rgb: 231, 237, 232;
    --bs-body-bg-rgb: 12, 17, 14;
    --bs-border-color: var(--fmm-line);
    --bs-border-color-translucent: rgba(201, 162, 39, 0.18);
    --bs-link-color: var(--fmm-gold-lit);
    --bs-link-hover-color: var(--fmm-gold-pale);
    --bs-body-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-heading-color: var(--fmm-gold-lit);

    background-color: var(--fmm-ink);
    /* Faint diagonal weave over a vertical fade - the era's answer to a flat fill. */
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 2px, rgba(0, 0, 0, 0) 2px 4px),
        linear-gradient(180deg, var(--fmm-ink-2) 0, var(--fmm-ink) 420px);
    background-attachment: fixed;
    min-height: 100vh;
}

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body h5,
.site-body h6 {
    font-family: var(--fmm-serif);
    color: var(--fmm-gold-lit);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.site-body h4,
.site-body h5,
.site-body h6 {
    color: var(--fmm-gold-pale);
}

.site-body .lead {
    color: #cfd8d0;
}

.site-body a {
    text-decoration: none;
}

.site-body a:hover {
    text-decoration: underline;
}

.site-body .text-muted {
    color: var(--fmm-text-dim) !important;
}

.site-body .text-danger {
    color: var(--fmm-red-lit) !important;
}

.site-body .text-success {
    color: var(--fmm-green-bright) !important;
}

.site-body strong,
.site-body dt {
    color: #f2f6f2;
}

.site-body hr {
    height: 1px;
    border: 0;
    opacity: 1;
    background: linear-gradient(90deg, rgba(201, 162, 39, 0) 0%, var(--fmm-gold-dark) 50%, rgba(201, 162, 39, 0) 100%);
}

.site-body ::selection {
    background: var(--fmm-gold);
    color: var(--fmm-black);
}

.site-body :focus-visible {
    outline: 2px solid var(--fmm-gold);
    outline-offset: 2px;
}

/* ============================================================
   Navbar
   ============================================================ */
.site-body .navbar {
    --bs-navbar-color: #c2cfc6;
    --bs-navbar-hover-color: var(--fmm-gold-lit);
    --bs-navbar-active-color: var(--fmm-gold-lit);
    --bs-navbar-brand-color: var(--fmm-gold-lit);
    --bs-navbar-brand-hover-color: var(--fmm-gold-pale);
    --bs-navbar-toggler-border-color: rgba(201, 162, 39, 0.4);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c9a227' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    background: var(--fmm-black-face) !important;
    border-bottom: 3px solid var(--fmm-gold-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.site-body .navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--fmm-gold-face);
}

.site-body .navbar-brand {
    font-family: var(--fmm-serif);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.site-body .navbar .nav-link {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid transparent;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.site-body .navbar .nav-link:hover {
    border-bottom-color: var(--fmm-gold);
    text-decoration: none;
}

/* ============================================================
   Hero (Default.aspx)
   ============================================================ */
.site-body .hero {
    position: relative;
    padding: 2rem 1.75rem 1.75rem;
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: 0.35rem;
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(31, 143, 81, 0.28) 0%, rgba(10, 44, 26, 0) 62%),
        linear-gradient(180deg, #10281b 0%, #0a140e 100%);
    box-shadow: var(--fmm-drop), var(--fmm-bevel);
}

.site-body .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--fmm-gold-face);
    border-radius: 0.35rem 0.35rem 0 0;
}

.site-body .hero-title {
    font-size: 2.15rem;
    color: var(--fmm-gold-lit);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
    margin-bottom: 0.75rem;
}

.site-body .hero-lead {
    max-width: 46rem;
    color: #d3ddd5;
    font-size: 1.06rem;
    margin-bottom: 1.5rem;
}

.site-body .hero .form-label {
    color: var(--fmm-gold-pale);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

/* Section headings on the storefront get a gold rule under them - but not the
   ones that title a card or the hero, where the surface already frames them. */
.site-body h1,
.site-body h2 {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

.site-body .card h1,
.site-body .card h2,
.site-body .hero h1,
.site-body .hero h2 {
    padding-bottom: 0;
    border-bottom: 0;
}

/* ============================================================
   Surfaces - cards, list groups, tables, breadcrumbs
   ============================================================ */
.site-body .card {
    --bs-card-bg: var(--fmm-panel);
    --bs-card-color: var(--fmm-text);
    --bs-card-border-color: rgba(201, 162, 39, 0.16);
    --bs-card-cap-bg: rgba(0, 0, 0, 0.28);
    --bs-card-cap-color: var(--fmm-gold-lit);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.site-body .card:hover {
    --bs-card-border-color: rgba(201, 162, 39, 0.4);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.site-body .card .card-body > h3 a,
.site-body .card h2 a {
    color: var(--fmm-gold-pale);
}

.site-body .list-group {
    --bs-list-group-color: var(--fmm-text);
    --bs-list-group-bg: var(--fmm-panel);
    --bs-list-group-border-color: var(--fmm-line);
    --bs-list-group-action-color: var(--fmm-text);
    --bs-list-group-action-hover-color: var(--fmm-gold-pale);
    --bs-list-group-action-hover-bg: var(--fmm-panel-hi);
    --bs-list-group-active-color: var(--fmm-black);
    --bs-list-group-active-bg: var(--fmm-gold);
    --bs-list-group-active-border-color: var(--fmm-gold-dark);
    --bs-list-group-disabled-color: var(--fmm-text-dim);
    --bs-list-group-disabled-bg: var(--fmm-panel);
}

.site-body .table {
    --bs-table-color: var(--fmm-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--fmm-line);
    --bs-table-striped-color: var(--fmm-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: var(--fmm-text);
    --bs-table-hover-bg: rgba(201, 162, 39, 0.08);
}

.site-body .table > thead {
    color: var(--fmm-gold-pale);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.site-body .breadcrumb {
    --bs-breadcrumb-divider-color: var(--fmm-gold-dark);
    --bs-breadcrumb-item-active-color: var(--fmm-text-dim);
    font-size: 0.88rem;
}

/* "At a glance" definition lists read as a spec sheet. */
.site-body dl dt {
    color: var(--fmm-gold-pale);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    font-weight: 600;
}

.site-body dl dd {
    margin-bottom: 0.7rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed rgba(201, 162, 39, 0.14);
}

.site-body dl dd:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ============================================================
   Alerts - dark notice panels with a colour-coded edge
   ============================================================ */
.site-body .alert {
    --bs-alert-bg: rgba(255, 255, 255, 0.035);
    --bs-alert-color: var(--fmm-text);
    --bs-alert-border-color: var(--fmm-line);
    border-left-width: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-body .alert-success {
    --bs-alert-bg: rgba(23, 112, 63, 0.18);
    --bs-alert-border-color: var(--fmm-green);
    --bs-alert-color: #bfe9cf;
}

.site-body .alert-info {
    --bs-alert-bg: rgba(16, 105, 95, 0.18);
    --bs-alert-border-color: var(--fmm-teal);
    --bs-alert-color: #b9e2dc;
}

.site-body .alert-warning {
    --bs-alert-bg: rgba(201, 162, 39, 0.14);
    --bs-alert-border-color: var(--fmm-gold);
    --bs-alert-color: var(--fmm-gold-pale);
}

.site-body .alert-danger {
    --bs-alert-bg: rgba(179, 53, 44, 0.18);
    --bs-alert-border-color: var(--fmm-red);
    --bs-alert-color: #f6c7c2;
}

.site-body .alert-secondary {
    --bs-alert-bg: rgba(255, 255, 255, 0.05);
    --bs-alert-border-color: #4a5a4f;
    --bs-alert-color: #ccd6ce;
}

.site-body .alert strong {
    color: inherit;
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.badge.bg-primary,
.badge.bg-warning,
.badge.bg-light {
    color: var(--fmm-black) !important;
    text-shadow: none;
}

.badge.bg-light {
    border: 1px solid rgba(107, 84, 19, 0.35);
}

/* ============================================================
   Buttons - glossy face, bevel, letterpress label
   ============================================================ */
.btn {
    --bs-btn-border-radius: 0.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: filter 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-secondary,
.btn-dark {
    box-shadow: var(--fmm-bevel), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-secondary:hover,
.btn-dark:hover {
    filter: brightness(1.08);
}

.btn-primary {
    --bs-btn-color: var(--fmm-black);
    --bs-btn-bg: var(--fmm-gold);
    --bs-btn-border-color: var(--fmm-gold-dark);
    --bs-btn-hover-color: var(--fmm-black);
    --bs-btn-hover-bg: var(--fmm-gold-lit);
    --bs-btn-hover-border-color: var(--fmm-gold-dark);
    --bs-btn-active-color: var(--fmm-black);
    --bs-btn-active-bg: var(--fmm-gold-dark);
    --bs-btn-active-border-color: var(--fmm-gold-deep);
    --bs-btn-disabled-color: var(--fmm-black);
    --bs-btn-disabled-bg: var(--fmm-gold);
    --bs-btn-disabled-border-color: var(--fmm-gold-dark);
    --bs-btn-focus-shadow-rgb: 201, 162, 39;
    background-image: var(--fmm-gold-face);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fmm-green);
    --bs-btn-border-color: var(--fmm-green-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fmm-green-lit);
    --bs-btn-hover-border-color: var(--fmm-green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--fmm-green-dark);
    --bs-btn-active-border-color: var(--fmm-green-deep);
    --bs-btn-disabled-bg: var(--fmm-green);
    --bs-btn-disabled-border-color: var(--fmm-green-dark);
    --bs-btn-focus-shadow-rgb: 31, 143, 81;
    background-image: var(--fmm-green-face);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.btn-secondary {
    --bs-btn-color: var(--fmm-text);
    --bs-btn-bg: #2f3d34;
    --bs-btn-border-color: #1d2721;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a4b3f;
    --bs-btn-hover-border-color: #1d2721;
    --bs-btn-active-bg: #253028;
    --bs-btn-active-border-color: #16201a;
    --bs-btn-focus-shadow-rgb: 47, 61, 52;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.btn-danger {
    --bs-btn-bg: var(--fmm-red);
    --bs-btn-border-color: #8a2820;
    --bs-btn-hover-bg: #c93e34;
    --bs-btn-hover-border-color: #8a2820;
    --bs-btn-active-bg: #8a2820;
    --bs-btn-focus-shadow-rgb: 179, 53, 44;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.btn-warning {
    --bs-btn-color: var(--fmm-black);
    --bs-btn-bg: var(--fmm-amber);
    --bs-btn-border-color: var(--fmm-gold-dark);
    --bs-btn-hover-color: var(--fmm-black);
    --bs-btn-hover-bg: #eab63f;
    --bs-btn-hover-border-color: var(--fmm-gold-dark);
    --bs-btn-focus-shadow-rgb: 221, 167, 44;
}

.btn-dark {
    --bs-btn-bg: #16201a;
    --bs-btn-border-color: #050806;
    --bs-btn-hover-bg: #223027;
    --bs-btn-hover-border-color: #050806;
    --bs-btn-focus-shadow-rgb: 12, 17, 14;
    background-image: var(--fmm-black-face);
}

.btn-outline-primary {
    --bs-btn-color: var(--fmm-gold-deep);
    --bs-btn-border-color: var(--fmm-gold-dark);
    --bs-btn-hover-color: var(--fmm-black);
    --bs-btn-hover-bg: var(--fmm-gold);
    --bs-btn-hover-border-color: var(--fmm-gold-dark);
    --bs-btn-active-color: var(--fmm-black);
    --bs-btn-active-bg: var(--fmm-gold-dark);
    --bs-btn-active-border-color: var(--fmm-gold-deep);
    --bs-btn-disabled-color: var(--fmm-gold-dark);
    --bs-btn-disabled-border-color: var(--fmm-gold-dark);
    --bs-btn-focus-shadow-rgb: 201, 162, 39;
}

.btn-outline-secondary {
    --bs-btn-color: var(--fmm-green-dark);
    --bs-btn-border-color: #9aab9f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fmm-green);
    --bs-btn-hover-border-color: var(--fmm-green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--fmm-green-dark);
    --bs-btn-active-border-color: var(--fmm-green-deep);
    --bs-btn-disabled-color: #6c7d71;
    --bs-btn-disabled-border-color: #9aab9f;
    --bs-btn-focus-shadow-rgb: 23, 112, 63;
}

.btn-outline-dark {
    --bs-btn-color: var(--fmm-ink);
    --bs-btn-border-color: var(--fmm-ink);
    --bs-btn-hover-color: var(--fmm-gold-lit);
    --bs-btn-hover-bg: var(--fmm-ink);
    --bs-btn-hover-border-color: var(--fmm-black);
    --bs-btn-active-color: var(--fmm-gold-lit);
    --bs-btn-active-bg: var(--fmm-black);
    --bs-btn-focus-shadow-rgb: 12, 17, 14;
}

.btn-outline-danger {
    --bs-btn-color: #8a2820;
    --bs-btn-border-color: var(--fmm-red);
    --bs-btn-hover-bg: var(--fmm-red);
    --bs-btn-hover-border-color: #8a2820;
    --bs-btn-active-bg: #8a2820;
    --bs-btn-focus-shadow-rgb: 179, 53, 44;
}

.btn-link {
    --bs-btn-color: var(--fmm-green-dark);
    --bs-btn-hover-color: var(--fmm-green);
}

/* On the dark storefront the outline variants invert: the border keeps its
   hue, the label goes light. */
.site-body .btn-outline-primary {
    --bs-btn-color: var(--fmm-gold-lit);
    --bs-btn-border-color: var(--fmm-gold-dark);
}

.site-body .btn-outline-secondary {
    --bs-btn-color: #cfdcd3;
    --bs-btn-border-color: #405146;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fmm-green);
    --bs-btn-hover-border-color: var(--fmm-green-lit);
    --bs-btn-disabled-color: #6c7d71;
    --bs-btn-disabled-border-color: #2c3830;
}

.site-body .btn-outline-dark {
    --bs-btn-color: var(--fmm-gold-lit);
    --bs-btn-border-color: var(--fmm-gold-dark);
    --bs-btn-hover-color: var(--fmm-black);
    --bs-btn-hover-bg: var(--fmm-gold);
    --bs-btn-hover-border-color: var(--fmm-gold-dark);
    --bs-btn-active-color: var(--fmm-black);
    --bs-btn-active-bg: var(--fmm-gold-dark);
}

.site-body .btn-outline-danger {
    --bs-btn-color: var(--fmm-red-lit);
    --bs-btn-hover-color: #fff;
}

.site-body .btn-link {
    --bs-btn-color: var(--fmm-gold-lit);
    --bs-btn-hover-color: var(--fmm-gold-pale);
}

/* Category tiles on the home page read as a gold-edged shelf. */
.site-body .btn-outline-secondary.w-100 {
    text-align: left;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
}

/* ============================================================
   Forms

   Focus rings and check marks are context-independent, so they stay global
   and cover the back office too; only the field surface itself is themed
   per shell.
   ============================================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--fmm-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25);
}

.form-check-input:checked {
    background-color: var(--fmm-green);
    border-color: var(--fmm-green-dark);
}

.form-check-input:focus {
    border-color: var(--fmm-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25);
}

.site-body .form-label {
    color: var(--fmm-gold-pale);
    font-weight: 600;
    font-size: 0.86rem;
}

.site-body .col-form-label {
    color: var(--fmm-gold-pale);
    font-weight: 600;
}

.site-body .form-text {
    color: var(--fmm-text-dim);
}

.site-body .form-control,
.site-body .form-select {
    color: var(--fmm-text);
    background-color: #0a0f0c;
    border-color: #33443a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}

.site-body .form-control:focus,
.site-body .form-select:focus {
    color: var(--fmm-text);
    background-color: #0a0f0c;
    border-color: var(--fmm-gold);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 0 0.2rem rgba(201, 162, 39, 0.28);
}

.site-body .form-control::placeholder {
    color: #6f8176;
}

.site-body .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9a227' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.site-body .form-select option {
    background-color: #0f1613;
    color: var(--fmm-text);
}

.site-body .form-check-input {
    background-color: #0a0f0c;
    border-color: #3d5145;
}

.site-body .form-check-input:checked {
    background-color: var(--fmm-green);
    border-color: var(--fmm-green-lit);
}

/* Chrome paints autofilled fields a hard blue-white; the inset shadow trick is
   the only way to keep them on-theme. */
.site-body input:-webkit-autofill,
.site-body input:-webkit-autofill:hover,
.site-body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fmm-text);
    -webkit-box-shadow: 0 0 0 1000px #0a0f0c inset;
    caret-color: var(--fmm-text);
}

/* ============================================================
   Footer
   ============================================================ */
.site-body footer {
    margin-top: 1.5rem;
    padding: 1.25rem 0 2rem;
    color: var(--fmm-text-dim);
    font-size: 0.9rem;
}

.site-body footer a {
    color: var(--fmm-gold);
}

/* ============================================================
   Layout leftovers from the base template
   ============================================================ */
.body-content {
    margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Password field enhancements: show/hide toggle + caps-lock warning.
   Wired up by Scripts/Site.js - no markup changes needed on the .aspx side. */
.password-input-group {
    max-width: 280px;
}

.password-input-group .form-control {
    max-width: none;
}

.password-toggle {
    display: inline-flex;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.password-toggle .password-icon {
    vertical-align: -0.125em;
}

.password-caps-warning {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}

@media screen and (max-width: 767px) {
    .site-body .hero {
        padding: 1.5rem 1.1rem;
    }

    .site-body .hero-title {
        font-size: 1.7rem;
    }
}

/* Back office shell (Account/Admin/Admin.Master). Scoped to .admin-body so nothing here
   reaches the public site. Data entry stays on a light surface - only the chrome
   carries the green/gold/black theme. */
.admin-body {
    background: #f4f5f7;
}

.admin-topbar {
    background: var(--fmm-black-face);
    color: #f1f5f1;
    padding: 0.7rem 0;
    border-bottom: 3px solid var(--fmm-gold-dark);
}

.admin-brand {
    font-family: var(--fmm-serif);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--fmm-gold-lit);
}

.admin-brand .thin {
    font-family: var(--bs-font-sans-serif);
    font-weight: 400;
    color: #9aab9f;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.72rem;
    margin-left: 0.5rem;
}

.admin-topbar-right {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.85rem;
}

.admin-toplink {
    color: var(--fmm-gold-lit);
    text-decoration: none;
}

.admin-toplink:hover {
    color: var(--fmm-gold-pale);
    text-decoration: underline;
}

.admin-layout {
    min-height: 80vh;
}

.admin-sidebar {
    background: #fff;
    border-right: 1px solid #dee2e6;
    padding: 1.2rem 0;
}

.admin-nav,
.admin-nav-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav-head {
    display: block;
    padding: 0.9rem 1.2rem 0.2rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fmm-green-dark);
}

.admin-nav a {
    display: block;
    padding: 0.45rem 1.2rem;
    color: #212529;
    text-decoration: none;
    font-size: 0.95rem;
}

.admin-nav a:hover {
    background: #eef3ef;
}

.admin-nav a.active {
    background: #e7efe9;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--fmm-green);
}

.admin-main {
    padding: 1.8rem 2rem;
}

/* The 280px cap above is a storefront-form nicety; back-office data entry wants the
   full column width. */
.admin-body input[type="text"],
.admin-body input[type="password"],
.admin-body input[type="email"],
.admin-body input[type="tel"] {
    max-width: none;
}

.admin-filter-bar {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.admin-fieldset {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-fieldset legend {
    float: none;
    width: auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fmm-green-dark);
    margin-bottom: 0.75rem;
}

.admin-readonly {
    font-size: 0.85rem;
    color: #6c757d;
}