/* =========================================================
   Ribbons & Reins
   Main Application Stylesheet
   ========================================================= */

:root {
    --rr-blue: #536B7A;
    --rr-blue-dark: #415664;

    --rr-burgundy: #7A3948;
    --rr-burgundy-dark: #612D39;
    --rr-burgundy-lt: color-mix(in oklab, var(--rr-burgundy), white 35%);

    --rr-champagne: #D6BF91;
    --rr-brass: #B79A63;

    --rr-white: #FAF8F3;
    --rr-slate: #343A40;
    --rr-card: #FFFFFF;

    --rr-muted: #6D767C;
    --rr-border: rgba(83, 107, 122, 0.18);

    /* R&R Bootstrap-style contextual colors */
    --rr-primary: #6F8299;       /* dusty blue */
    --rr-secondary: #8B7D78;     /* warm taupe */
    --rr-success: #738B7A;       /* muted sage */
    --rr-danger: #8E4F59;        /* burgundy */
    --rr-warning: #C5A46D;       /* champagne gold */
    --rr-info: #879AAA;          /* pale slate blue */
    --rr-light: #F7F2E8;         /* warm cream */
    --rr-dark: #343840;          /* soft charcoal */

    --rr-radius: 14px;
    --rr-radius-lg: 22px;

    --rr-shadow:
            0 10px 30px rgba(52, 58, 64, 0.08);

    --rr-shadow-lg:
            0 20px 55px rgba(52, 58, 64, 0.13);

    --rr-serif:
            Georgia,
            "Times New Roman",
            serif;

    --rr-sans:
            Arial,
            Helvetica,
            sans-serif;
}


/* =========================================================
   Base
   ========================================================= */

html,
body {
    min-height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--rr-white);
    color: var(--rr-slate);

    font-family: var(--rr-sans);
    line-height: 1.6;
}

.small {
    font-size: 0.875em;
}

.muted {
    color: var(--rr-muted);
}

.burgundy {
    color: var(--rr-burgundy);
}

img {
    max-width: 100%;
}

.bg-primary {
    background-color: #6F8299 !important;
    color: #fff !important;
}

.bg-secondary {
    background-color: #8B7D78 !important;
    color: #fff !important;
}

.bg-success {
    background-color: #738B7A !important;
    color: #fff !important;
}

.bg-danger {
    background-color: #8E4F59 !important;
    color: #fff !important;
}

.bg-warning {
    background-color: #C5A46D !important;
    color: #2F3136 !important;
}

.bg-info {
    background-color: #879AAA !important;
    color: #fff !important;
}

.bg-light {
    background-color: #F7F2E8 !important;
    color: #2F3136 !important;
}

.bg-dark {
    background-color: #343840 !important;
    color: #fff !important;
}

.bg-burgundy {
    background-color: #8E4F59 !important;
    color: #fff !important;
}

.bg-dusty-blue {
    background-color: #6F8299 !important;
    color: #fff !important;
}

.bg-champagne {
    background-color: #D2BB91 !important;
    color: #343840 !important;
}

.bg-cream {
    background-color: #F7F2E8 !important;
    color: #343840 !important;
}

.bg-soft-blue {
    background-color: #E7EBEF !important;
    color: #465669 !important;
}

.bg-soft-burgundy {
    background-color: #F0E4E6 !important;
    color: #74424A !important;
}

.bg-soft-champagne {
    background-color: #F2EBDD !important;
    color: #665438 !important;
}


a {
    color: var(--rr-burgundy);
    text-decoration: none;
}

a:hover {
    color: var(--rr-burgundy-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--rr-blue);
    font-family: var(--rr-serif);
}

::selection {
    background: rgba(214, 191, 145, 0.45);
    color: var(--rr-slate);
}


/* =========================================================
   Bootstrap Overrides
   ========================================================= */

.btn {
    border-radius: 8px;
    font-weight: 700;

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 2px 0 rgba(52, 58, 64, 0.16),
            0 5px 12px rgba(52, 58, 64, 0.10);

    transition:
            transform 0.15s ease,
            box-shadow 0.15s ease,
            background-color 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            0 3px 0 rgba(52, 58, 64, 0.16),
            0 7px 16px rgba(52, 58, 64, 0.13);
}

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

    box-shadow:
            inset 0 2px 4px rgba(52, 58, 64, 0.16),
            0 1px 0 rgba(52, 58, 64, 0.12);
}

.btn:focus-visible {
    outline: 2px solid var(--rr-champagne);
    outline-offset: 3px;
}

.btn-rr-primary {
    --bs-btn-color: #fff;

    --bs-btn-bg: var(--rr-burgundy);
    --bs-btn-border-color: var(--rr-burgundy);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rr-burgundy-dark);
    --bs-btn-hover-border-color: var(--rr-burgundy-dark);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rr-burgundy-dark);
    --bs-btn-active-border-color: var(--rr-burgundy-dark);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 3px 0 var(--rr-burgundy-dark),
            0 6px 14px rgba(97, 45, 57, 0.20);
}

.btn-rr-primary:hover {
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 4px 0 #502530,
            0 8px 18px rgba(97, 45, 57, 0.24);
}

.btn-rr-primary:active {
    box-shadow:
            inset 0 2px 4px rgba(52, 20, 28, 0.22),
            0 1px 0 var(--rr-burgundy-dark);
}

.btn-rr-default {
    --bs-btn-color: var(--rr-white);
    --bs-btn-bg: var(--rr-blue);
    --bs-btn-border-color: var(--rr-blue);

    --bs-btn-hover-color: var(--rr-white) !important;
    --bs-btn-hover-bg: var(--rr-blue-dark);
    --bs-btn-hover-border-color: var(--rr-blue-dark);

    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 3px 0 var(--rr-blue-dark),
            0 6px 14px rgba(65, 86, 100, 0.20);
}

.btn-rr-default:hover {
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 4px 0 #354854,
            0 8px 18px rgba(65, 86, 100, 0.24);
}

.btn-rr-default:active {
    box-shadow:
            inset 0 2px 4px rgba(35, 48, 56, 0.22),
            0 1px 0 var(--rr-blue-dark);
}

.btn-outline-primary,
.btn-outline-light {
    box-shadow:
            0 2px 0 rgba(52, 58, 64, 0.10),
            0 4px 10px rgba(52, 58, 64, 0.07);
}
.btn-outline-primary {
    --bs-btn-color: var(--rr-blue);
    --bs-btn-border-color: var(--rr-blue);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rr-blue);
    --bs-btn-hover-border-color: var(--rr-blue);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rr-blue-dark);
    --bs-btn-active-border-color: var(--rr-blue-dark);

}

.form-label {
    color: var(--rr-blue);
    font-weight: 700;
}

.form-control,
.form-select {
    border-color: var(--rr-border);
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rr-blue);

    box-shadow:
            0 0 0 0.2rem
            rgba(83, 107, 122, 0.15);
}

.form-text {
    color: #80888D;
}

.card {
    border-color: var(--rr-border);
    border-radius: var(--rr-radius);

    box-shadow:
            0 4px 14px rgba(52, 58, 64, 0.05);
}

.alert {
    border-radius: 10px;
}


/* =========================================================
   Header / Navbar
   ========================================================= */

.site-header {
    width: 100%;

    background: var(--rr-blue);

    border-bottom:
            3px solid var(--rr-champagne);

    box-shadow:
            0 4px 16px rgba(52, 58, 64, 0.08);
}

.site-header .navbar {
    min-height: 88px;

    --bs-navbar-padding-y: 0;
}

.rr-brand {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin-right: 1rem;
}

.rr-brand-mark {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border: 1px solid var(--rr-champagne);
    border-radius: 50%;

    color: var(--rr-champagne);

    font-family: var(--rr-serif);
    font-size: 1rem;
    font-weight: 700;
}

.rr-monogram {
    border-color: rgba(214, 191, 145, 0.85) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0 0 5px rgba(183, 154, 99, 0.12) !important;
    color: var(--rr-white) !important;
    width: 65px;
    height: 65px;
    display: flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-family: var(--rr-serif);
    font-size: 1.2rem;
    font-weight: 700;
}

.rr-monogram em {
    font-style: italic;
    font-size: 0.85em;
    color: var(--rr-champagne);
}

.rr-monogram-lg {
    border: 1px solid var(--rr-brass) !important;
    background: rgba(83, 107, 122, 0.8) !important;
    box-shadow: inset 0 0 0 5px rgba(183, 154, 99, 0.12) !important;
    color: var(--rr-white) !important;
    width: 200px;
    height: 200px;
    display: flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-family: var(--rr-serif);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto;
    margin-top: 1em;
}

.rr-monogram-lg em {
    font-style: italic;
    font-size: 0.85em;
    color: var(--rr-champagne);
}


.rr-brand-copy {
    display: flex;
    flex-direction: column;
}

.rr-brand-name {
    color: #fff;

    font-family: var(--rr-serif);
    font-size: 1.55rem;

    line-height: 1.05;
    letter-spacing: 0.02em;
}

.rr-brand-tagline {
    margin-top: 0.2rem;

    color: var(--rr-champagne);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-header .navbar-nav {
    gap: 0.25rem;
}

.site-header .nav-link {
    position: relative;

    padding-left: 0.65rem;
    padding-right: 0.65rem;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.94rem;
    font-weight: 600;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: #fff;
}

.site-header .nav-link.active::after {
    content: "";

    position: absolute;

    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.3rem;

    height: 2px;

    background: var(--rr-champagne);
}

.site-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.site-header .navbar-toggler:focus {
    box-shadow: none;
}

.site-header .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.rr-account-nav {
    display: flex;
    align-items: center;

    gap: 0.65rem;
}

.rr-account-name {
    color: rgba(255, 255, 255, 0.75);

    font-size: 0.9rem;
}


/* =========================================================
   Shared Page Elements
   ========================================================= */

.site-main {
    min-height: calc(100vh - 88px);
}

.rr-content {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.page-eyebrow {
    margin-bottom: 0.35rem;

    color: var(--rr-burgundy);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.05;
}

.page-intro {
    max-width: 700px;

    margin-top: 0.75rem;

    color: #667077;
}


/* =========================================================
   Homepage
   ========================================================= */

.home-hero,
.home-section,
.home-community {
    overflow: hidden;
}

.home-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.home-eyebrow {
    margin-bottom: 0.7rem;

    color: var(--rr-champagne);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-eyebrow-dark {
    color: var(--rr-burgundy);
}


/* =========================================================
   Homepage Hero
   ========================================================= */

.home-hero {
    width: 100%;

    padding-top: 1.5rem;

    background: var(--rr-white);
}

.home-hero-shell {
    position: relative;

    overflow: hidden;

    background:
            linear-gradient(
                    135deg,
                    var(--rr-blue) 0%,
                    var(--rr-blue-dark) 100%
            );

    border-radius:
            0 0
            26px 26px;

    box-shadow: var(--rr-shadow);
}

.home-hero-copy {
    min-height: 570px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
            4.5rem
            4rem
            4.5rem
            4.5rem;
}

.home-hero-copy h1 {
    max-width: 720px;

    margin: 0;

    color: #fff;

    font-family: var(--rr-serif);
    font-size: clamp(3.1rem, 5.8vw, 6rem);
    font-weight: 400;

    letter-spacing: -0.045em;
    line-height: 0.95;
}

.home-hero-lead {
    max-width: 620px;

    margin:
            2rem 0 0;

    color:
            rgba(255, 255, 255, 0.78);

    font-size: 1.08rem;
    line-height: 1.75;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 2rem;
}


/* Hero photograph */

.home-hero-visual {
    position: relative;

    min-height: 570px;

    padding:
            3rem
            3rem
            3rem
            1rem;
}

.home-hero-photo-frame {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 510px;

    overflow: hidden;

    border-radius:
            190px
            18px
            18px
            18px;

    box-shadow:
            0 24px 60px
            rgba(29, 38, 44, 0.28);
}

.home-hero-photo-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
            linear-gradient(
                    to top,
                    rgba(52, 58, 64, 0.22),
                    transparent 45%
            );
}

.home-hero-photo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: 52% center;

    transition:
            transform 0.7s ease;
}

.home-hero-shell:hover
.home-hero-photo {
    transform: scale(1.015);
}

.home-hero-accent {
    position: absolute;

    right: 1.25rem;
    bottom: 1.25rem;

    z-index: 1;

    width: 74%;
    height: 72%;

    background: var(--rr-champagne);

    border-radius:
            18px
            18px
            140px
            18px;
}

.home-hero-stamp {
    position: absolute;

    left: -0.25rem;
    bottom: 2.25rem;

    z-index: 3;

    width: 122px;
    height: 122px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    text-align: center;

    background: var(--rr-white);

    border:
            1px solid
            rgba(214, 191, 145, 0.8);

    border-radius: 50%;

    box-shadow:
            0 16px 40px
            rgba(29, 38, 44, 0.17);
}

.home-hero-stamp span {
    color: var(--rr-burgundy);

    font-family: var(--rr-serif);
    font-size: 1.55rem;

    line-height: 1;
}

.home-hero-stamp small {
    margin-top: 0.35rem;

    color: var(--rr-blue);

    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    line-height: 1.3;

    text-transform: uppercase;
}


/* =========================================================
   Homepage Intro Strip
   ========================================================= */

.home-intro-strip {
    padding-top: 1.6rem;
}

.home-intro-item {
    height: 100%;

    padding: 1.5rem;

    text-align: center;

    border-right:
            1px solid var(--rr-border);
}

.home-intro-strip
.col-4:last-child
.home-intro-item {
    border-right: 0;
}

.home-intro-item strong {
    display: block;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: 1.15rem;
}

.home-intro-item span {
    display: block;

    margin-top: 0.3rem;

    color: #7C8489;

    font-size: 0.76rem;
}


/* =========================================================
   Homepage Section Heading
   ========================================================= */

.home-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 3rem;

    margin-bottom: 2.5rem;
}

.home-section-heading h2 {
    margin: 0;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: clamp(2.3rem, 4vw, 3.7rem);
    font-weight: 400;

    letter-spacing: -0.035em;
}

.home-section-heading > p {
    max-width: 500px;

    margin: 0;

    color: #737B80;

    line-height: 1.7;
}


/* =========================================================
   Homepage Features
   ========================================================= */

.home-feature-card {
    position: relative;

    height: 100%;
    min-height: 245px;

    padding: 2rem;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: 18px;

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
}

.home-feature-card:hover {
    transform: translateY(-3px);

    border-color:
            rgba(83, 107, 122, 0.3);

    box-shadow: var(--rr-shadow);
}

.home-feature-number {
    display: block;

    margin-bottom: 2.3rem;

    color: var(--rr-burgundy);

    font-family: var(--rr-serif);
    font-size: 0.9rem;
}

.home-feature-card h3 {
    margin: 0;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: 1.65rem;
    font-weight: 400;
}

.home-feature-card p {
    margin:
            0.8rem 0 0;

    color: #747C82;

    font-size: 0.9rem;
    line-height: 1.7;
}


/* =========================================================
   Homepage Horse / Dog Image Cards
   ========================================================= */

.home-species-section {
    padding-top: 1rem;
}

.home-species-card {
    position: relative;

    min-height: 560px;
    height: 100%;

    overflow: hidden;

    background: var(--rr-slate);

    border-radius: 24px;

    box-shadow: var(--rr-shadow-lg);

    isolation: isolate;
}

.home-species-image {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
}

.home-species-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
            transform 0.7s ease;
}

.home-species-card:hover
.home-species-image img {
    transform: scale(1.035);
}


/*
 * Full-photo color tint.
 *
 * The image is tinted across the entire card,
 * then becomes much stronger toward the bottom
 * where the text sits.
 */

.home-species-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;
}


/* Horse — dusty blue */

.home-species-horse
.home-species-image::after {
    background:
            linear-gradient(
                    to bottom,
                    rgba(83, 107, 122, 0.32) 0%,
                    rgba(83, 107, 122, 0.38) 28%,
                    rgba(83, 107, 122, 0.52) 48%,
                    rgba(83, 107, 122, 0.72) 65%,
                    rgba(65, 86, 100, 0.91) 82%,
                    rgba(65, 86, 100, 0.99) 100%
            );
}


/* Dog — burgundy */

.home-species-dog
.home-species-image::after {
    background:
            linear-gradient(
                    to bottom,
                    rgba(122, 57, 72, 0.32) 0%,
                    rgba(122, 57, 72, 0.38) 28%,
                    rgba(122, 57, 72, 0.52) 48%,
                    rgba(122, 57, 72, 0.72) 65%,
                    rgba(97, 45, 57, 0.91) 82%,
                    rgba(97, 45, 57, 0.99) 100%
            );
}


/* Slight vignette */

.home-species-card::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
            linear-gradient(
                    90deg,
                    rgba(25, 31, 35, 0.12),
                    transparent 48%
            );
}


/* Card content */

.home-species-content {
    position: relative;

    z-index: 2;

    min-height: 560px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    gap: 1.35rem;

    padding:
            3rem
            2.75rem;
}

.home-species-kicker {
    margin-bottom: 0.45rem;

    color: var(--rr-champagne);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-species-content h2 {
    max-width: 500px;

    margin: 0;

    color: #fff;

    font-family: var(--rr-serif);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 400;

    letter-spacing: -0.035em;
    line-height: 1;
}

.home-species-content p {
    max-width: 500px;

    margin:
            0.9rem 0 0;

    color:
            rgba(255, 255, 255, 0.82);

    line-height: 1.7;
}

.home-species-link {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    gap: 0.65rem;

    padding-bottom: 0.2rem;

    color: #fff;

    font-size: 0.84rem;
    font-weight: 700;

    border-bottom:
            1px solid
            rgba(255, 255, 255, 0.45);

    transition:
            color 0.15s ease,
            gap 0.15s ease;
}

.home-species-link:hover {
    gap: 0.9rem;

    color: var(--rr-champagne);
}


/* =========================================================
   Homepage Community CTA
   ========================================================= */

.home-community {
    padding:
            5rem 0;
}

.home-community-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 3rem;

    padding:
            3rem
            3.5rem;

    background:
            linear-gradient(
                    125deg,
                    var(--rr-burgundy-dark),
                    var(--rr-burgundy)
            );

    border-radius: 22px;

    box-shadow: var(--rr-shadow);
}

.home-community h2 {
    margin: 0;

    color: #fff;

    font-family: var(--rr-serif);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
}

.home-community p {
    max-width: 650px;

    margin:
            0.8rem 0 0;

    color:
            rgba(255, 255, 255, 0.72);

    line-height: 1.7;
}


/* =========================================================
   Dashboard
   ========================================================= */

.dashboard-stat {
    height: 100%;

    padding:
            1.25rem
            1.4rem;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: var(--rr-radius);
}

.dashboard-stat-label {
    display: block;

    color: var(--rr-burgundy);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dashboard-stat-value {
    display: block;

    margin-top: 0.3rem;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: 2rem;
    font-weight: 500;

    line-height: 1;
}

.dashboard-stat-note {
    display: block;

    margin-top: 0.45rem;

    color: #7A8287;

    font-size: 0.8rem;
}

.dashboard-panel {
    min-height: 300px;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 2rem;

    overflow: hidden;

    border-radius: var(--rr-radius-lg);

    color: #fff;
}

.dashboard-panel-horse {
    background:
            linear-gradient(
                    145deg,
                    var(--rr-blue),
                    #657E8D
            );
}

.dashboard-panel-dog {
    background:
            linear-gradient(
                    145deg,
                    var(--rr-burgundy),
                    #925665
            );
}

.dashboard-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.5rem;
}

.dashboard-kicker {
    color: var(--rr-champagne);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-count {
    color:
            rgba(255, 255, 255, 0.72);

    font-size: 0.78rem;
}

.dashboard-panel h2 {
    margin-bottom: 0.75rem;

    color: #fff;

    font-size: 2rem;
}

.dashboard-panel p {
    max-width: 460px;

    margin-bottom: 1.5rem;

    color:
            rgba(255, 255, 255, 0.78);
}

.dashboard-card {
    padding: 1.5rem;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: var(--rr-radius);

    box-shadow:
            0 4px 14px
            rgba(52, 58, 64, 0.04);
}

.dashboard-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.25rem;
}

.dashboard-card-header h2 {
    margin: 0;

    font-size: 1.6rem;
}

.dashboard-card-header > a {
    font-size: 0.85rem;
    font-weight: 700;
}

.dashboard-empty {
    padding:
            2.5rem 1rem;

    text-align: center;

    background:
            rgba(83, 107, 122, 0.04);

    border:
            1px dashed var(--rr-border);

    border-radius: 10px;
}

.dashboard-empty strong {
    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: 1.15rem;
}

.dashboard-empty p {
    max-width: 500px;

    margin:
            0.5rem auto
            1rem;

    color: #747C82;

    font-size: 0.9rem;
}

.dashboard-empty-small {
    padding: 1.5rem;
}

.dashboard-action {
    display: block;

    padding:
            0.9rem
            1rem;

    background:
            rgba(83, 107, 122, 0.045);

    border:
            1px solid transparent;

    border-radius: 9px;

    transition:
            background 0.15s ease,
            border-color 0.15s ease;
}

.dashboard-action:hover {
    background:
            rgba(83, 107, 122, 0.08);

    border-color: var(--rr-border);
}

.dashboard-action span {
    display: block;

    color: var(--rr-blue);

    font-weight: 700;
}

.dashboard-action small {
    display: block;

    margin-top: 0.15rem;

    color: #7A8287;
}


/* Dashboard balance */

.dashboard-balance {
    min-width: 108px;

    padding:
            0.5rem
            0.8rem;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: 9px;

    text-align: center;
}

.dashboard-balance > span:not(.currency-badge) {
    display: block;

    color: #7A8287;

    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-balance > strong {
    display: block;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
}


/* =========================================================
   Facilities
   ========================================================= */

.facility-card {
    height: 100%;

    padding: 1.35rem;

    background:
            rgba(83, 107, 122, 0.04);

    border:
            1px solid var(--rr-border);

    border-radius: 10px;
}

.facility-type {
    color: var(--rr-burgundy);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.facility-card h3,
.facility-card h4 {
    margin:
            0.4rem 0 0;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: 1.3rem;
}

.facility-config {
    margin-top: 0.15rem;

    color: #747C82;

    font-size: 0.88rem;
}

.facility-details {
    display: flex;
    flex-wrap: wrap;

    gap:
            0.5rem
            1rem;

    margin-top: 1rem;

    color: #737B80;

    font-size: 0.78rem;
}


/* Facility groups */

.facility-group + .facility-group {
    margin-top: 2rem;
    padding-top: 2rem;

    border-top:
            1px solid var(--rr-border);
}

.facility-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1rem;
}

.facility-group-header h3 {
    margin: 0;

    color: var(--rr-blue);

    font-size: 1.4rem;
}

.facility-group-count {
    min-width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
            rgba(83, 107, 122, 0.08);

    border:
            1px solid var(--rr-border);

    border-radius: 50%;

    color: var(--rr-blue);

    font-size: 0.8rem;
    font-weight: 700;
}

.facility-group-empty {
    padding: 1rem;

    background:
            rgba(83, 107, 122, 0.035);

    border:
            1px dashed var(--rr-border);

    border-radius: 9px;

    color: #7A8287;

    font-size: 0.88rem;
}


/* =========================================================
   Property Overview
   ========================================================= */

.property-overview-card {
    height: 100%;

    padding: 1.5rem;

    background: var(--rr-card);

    border:
            1px solid var(--rr-border);

    border-radius: var(--rr-radius);

    box-shadow: var(--rr-shadow);
}

.property-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.5rem;
}

.property-overview-header h2 {
    margin: 0;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: 1.7rem;
}

.property-show-badge {
    flex-shrink: 0;

    padding:
            0.35rem
            0.65rem;

    background:
            rgba(122, 57, 72, 0.08);

    border:
            1px solid
            rgba(122, 57, 72, 0.18);

    border-radius: 999px;

    color: var(--rr-burgundy);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.property-overview-link {
    margin-bottom: 1rem;

    font-size: 0.85rem;
}

.property-overview-description {
    margin:
            0.75rem 0
            1rem;

    color: #687177;

    font-size: 0.9rem;
    line-height: 1.65;
}

.property-mini-stat {
    height: 100%;

    padding:
            0.85rem
            1rem;

    background:
            rgba(83, 107, 122, 0.04);

    border:
            1px solid var(--rr-border);

    border-radius: 10px;
}

.property-mini-stat span {
    display: block;

    margin-bottom: 0.25rem;

    color: #737B80;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.property-mini-stat strong {
    display: block;

    color: var(--rr-blue);

    font-family: var(--rr-serif);
    font-size: 1.35rem;
}

.property-facility-summary {
    display: flex;
    flex-wrap: wrap;

    gap:
            0.5rem
            1.25rem;

    margin:
            1.25rem 0;

    color: #687177;

    font-size: 0.82rem;
}

.property-facility-summary strong {
    color: var(--rr-burgundy);
}

.property-land {
    padding-top: 1rem;

    border-top:
            1px solid var(--rr-border);
}

.property-land-heading {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.5rem;

    color: #747C82;

    font-size: 0.78rem;
}

.property-land-heading strong {
    color: var(--rr-blue);
}

.property-land .progress {
    height: 7px;

    background:
            rgba(83, 107, 122, 0.1);

    border-radius: 999px;
}

.property-land .progress-bar {
    background: var(--rr-blue);
}

.property-overview-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 1.25rem;
}

.property-add-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    padding: 1.5rem;

    background:
            rgba(214, 191, 145, 0.1);

    border:
            1px dashed
            rgba(83, 107, 122, 0.3);

    border-radius: var(--rr-radius);
}

.property-add-card h2 {
    margin:
            0 0
            0.25rem;

    font-size: 1.35rem;
}


/* Property edit */

.property-edit-summary {
    margin:
            1.25rem 0;
}

.property-edit-summary > div {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    padding:
            0.75rem 0;

    border-bottom:
            1px solid var(--rr-border);
}

.property-edit-summary dt {
    color: #7A8287;

    font-size: 0.8rem;
    font-weight: 600;
}

.property-edit-summary dd {
    margin: 0;

    color: var(--rr-blue);

    font-weight: 700;
}


/* =========================================================
   Rulebook
   ========================================================= */

.rr-rulebook {
    scroll-behavior: smooth;
}


/* Search */

.rulebook-search {
    position: relative;

    max-width: 760px;
}

.rulebook-search .form-control {
    min-height: 58px;

    padding-left: 3rem;
    padding-right: 3rem;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: var(--rr-radius);

    box-shadow: var(--rr-shadow);

    font-size: 1rem;
}

.rulebook-search-icon {
    position: absolute;

    top: 50%;
    left: 1.1rem;

    z-index: 2;

    transform: translateY(-50%);

    color: var(--rr-blue);
}

.rulebook-search-clear {
    position: absolute;

    top: 50%;
    right: 0.65rem;

    z-index: 2;

    transform: translateY(-50%);

    color: #7A8287;

    border: 0;
}

.rulebook-search-status {
    color: #747C82;

    font-size: 0.85rem;
}


/* Categories */

.rulebook-category-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );

    gap: 0.85rem;
}

.rulebook-category-card {
    display: flex;
    align-items: center;

    gap: 0.9rem;

    padding: 1rem;

    color: inherit;
    text-decoration: none;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: 12px;

    transition:
            transform 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease;
}

.rulebook-category-card:hover {
    transform: translateY(-2px);

    color: inherit;

    border-color:
            rgba(83, 107, 122, 0.35);

    box-shadow: var(--rr-shadow);
}

.rulebook-category-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
            rgba(83, 107, 122, 0.08);

    border-radius: 10px;

    color: var(--rr-blue);
}

.rulebook-category-card strong {
    display: block;

    color: var(--rr-blue);
}

.rulebook-category-card small {
    display: block;

    margin-top: 0.15rem;

    color: #868D92;
}


/* Sidebar */

.rulebook-sidebar {
    position: sticky;

    top: 1.5rem;

    padding: 1.25rem;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: var(--rr-radius);

    box-shadow: var(--rr-shadow);
}

.rulebook-nav-group + .rulebook-nav-group {
    margin-top: 1rem;
}

.rulebook-nav-group {
    padding: 0.55rem 0.7rem;

    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;

    transition:
            background 0.15s ease,
            border-color 0.15s ease;
}

.rulebook-nav-group.is-active {
    background: rgba(83, 107, 122, 0.08);

    border-left-color: var(--rr-burgundy);
}

.rulebook-nav-group.is-active
.rulebook-nav-section {
    color: var(--rr-burgundy);
}

.rulebook-nav-group.is-active
.rulebook-nav-article {
    border-left-color:
            rgba(122, 57, 72, 0.3);
}

.rulebook-nav-section,
.rulebook-nav-article {
    display: block;

    color: inherit;
    text-decoration: none;
}

.rulebook-nav-section {
    margin-bottom: 0.3rem;

    color: var(--rr-blue);

    font-size: 0.85rem;
    font-weight: 700;
}

.rulebook-nav-article {
    padding:
            0.2rem 0
            0.2rem 0.8rem;

    color: #747C82;

    font-size: 0.78rem;

    border-left:
            1px solid var(--rr-border);
}

.rulebook-nav-article:hover {
    color: var(--rr-burgundy);
}


/* Sections */

.rulebook-section {
    scroll-margin-top: 1.5rem;
}

.rulebook-section + .rulebook-section {
    margin-top: 3rem;
}

.rulebook-section-heading {
    display: flex;

    gap: 1rem;

    margin-bottom: 1rem;
}

.rulebook-section-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--rr-blue);

    border-radius: 11px;

    color: #fff;
}

.rulebook-section-heading h2 {
    margin: 0;

    color: var(--rr-blue);
}

.rulebook-section-heading p {
    margin:
            0.3rem 0 0;

    color: #737B80;
}


/* Articles */

.rulebook-articles {
    overflow: hidden;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-radius: var(--rr-radius);

    box-shadow: var(--rr-shadow);
}

.rulebook-article {
    scroll-margin-top: 1.5rem;

    padding: 1.5rem;
}

.rulebook-article + .rulebook-article {
    border-top:
            1px solid var(--rr-border);
}

.rulebook-article-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.75rem;
}

.rulebook-article-heading h4 {
    margin: 0;

    color: var(--rr-burgundy);

    font-size: 1.45rem;
}

.rulebook-anchor {
    opacity: 0.45;

    color: var(--rr-blue);

    transition:
            opacity 0.15s ease;
}

.rulebook-article:hover
.rulebook-anchor {
    opacity: 1;
}

.rulebook-copy {
    color: #4D555A;

    line-height: 1.7;
}

.rulebook-copy > :last-child {
    margin-bottom: 0;
}

.rulebook-no-results {
    padding:
            4rem 2rem;

    text-align: center;

    color: #747C82;
}

.rulebook-no-results > i {
    margin-bottom: 1rem;

    color: var(--rr-blue);

    font-size: 2rem;
}

.rulebook-no-results h2 {
    color: var(--rr-blue);
}


/* =========================================================
   Badges
   ========================================================= */

.champagne-badge,
.brass-badge,
.blue-badge,
.currency-badge {
    display: inline-flex;
    align-items: center;

    gap: 0.35em;

    padding: 6px 10px;

    font-size: 1rem;

    white-space: nowrap;
    flex-wrap: nowrap;

    border-radius: 6px;
}

.champagne-badge {
    background-color:
            color-mix(
                    in srgb,
                    var(--rr-champagne) 30%,
                    white
            );

    border:
            1px solid var(--rr-champagne);

    color: var(--rr-blue);
}

.brass-badge {
    background-color:
            color-mix(
                    in srgb,
                    var(--rr-brass) 25%,
                    white
            );

    border:
            1px solid var(--rr-brass);

    color: var(--rr-blue);
}

.blue-badge {
    background-color:
            color-mix(
                    in srgb,
                    var(--rr-blue) 25%,
                    white
            );

    border:
            1px solid var(--rr-blue);

    color: var(--rr-blue-dark);
}


thead th {
    background-color: #F2EBDD !important;
    color: #665438 !important;
}

tbody td,
tbody th {
    color: var(--rr-muted) !important;
}
/* =========================================================
   Currency
   ========================================================= */

.currency-badge {
    white-space: nowrap;
}

.currency-badge strong {
    display: inline;

    margin: 0;

    white-space: nowrap;
}

.icon-bits,
.icon-ribbons {
    display: inline-block;

    width: 1em;
    height: 1em;

    flex: 0 0 auto;

    background-color: currentColor;

    vertical-align: -0.125em;
}

.icon-bits {
    -webkit-mask:
            url('../icons/bits.svg')
            center / contain
            no-repeat;

    mask:
            url('../icons/bits.svg')
            center / contain
            no-repeat;
}

.icon-ribbons {
    -webkit-mask:
            url('../icons/ribbons-alt.svg')
            center / contain
            no-repeat;

    mask:
            url('../icons/ribbons-alt.svg')
            center / contain
            no-repeat;
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    background: var(--rr-slate);

    color:
            rgba(255, 255, 255, 0.75);
}

.site-footer strong {
    color: #fff;

    font-family: var(--rr-serif);
    font-size: 1.1rem;
}

.site-footer a {
    color:
            rgba(255, 255, 255, 0.7);
}

.site-footer a:hover {
    color: #fff;
}


/* =========================================================
   Responsive - Tablet / Smaller Desktop
   ========================================================= */

@media (max-width: 1199.98px) {

    .home-hero-copy {
        padding:
                4rem
                3rem;
    }

    .home-hero-visual {
        padding:
                2.5rem
                2.5rem
                2.5rem
                0.5rem;
    }

}


/* =========================================================
   Responsive - Bootstrap LG
   ========================================================= */

@media (max-width: 991.98px) {

    .site-header .navbar {
        min-height: auto;

        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .site-header .nav-link.active::after {
        display: none;
    }

    .site-header .navbar-collapse {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    .rr-account-nav {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .rr-brand-tagline {
        display: none;
    }


    /* Homepage */

    .home-hero {
        padding-top: 0;
    }

    .home-hero-shell {
        border-radius: 0;
    }

    .home-hero-copy {
        min-height: auto;

        padding:
                4rem
                2rem
                2rem;
    }

    .home-hero-visual {
        min-height: auto;

        padding:
                1rem
                2rem
                3rem;
    }

    .home-hero-photo-frame {
        height: 430px;

        border-radius:
                120px
                16px
                16px
                16px;
    }

    .home-hero-accent {
        right: 0.8rem;
        bottom: 1.8rem;
    }

    .home-hero-stamp {
        left: 0.8rem;
        bottom: 1rem;
    }

    .home-section-heading {
        display: block;
    }

    .home-section-heading > p {
        margin-top: 1rem;
    }

    .home-community-inner {
        align-items: flex-start;
        flex-direction: column;
    }


    /* Rulebook */

    .rulebook-sidebar {
        position: static;
    }

    .rulebook-nav {
        columns: 2;

        column-gap: 2rem;
    }

    .rulebook-nav-group {
        break-inside: avoid;
    }

}


/* =========================================================
   Responsive - Mobile
   ========================================================= */

@media (max-width: 767.98px) {

    .rr-brand-name {
        font-size: 1.3rem;
    }

    .rr-brand-mark {
        width: 44px;
        height: 44px;
    }

    .rr-content {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }


    /* Hero */

    .home-hero-copy {
        padding:
                3rem
                1.4rem
                2rem;
    }

    .home-hero-copy h1 {
        font-size:
                clamp(
                        2.8rem,
                        13vw,
                        4.5rem
                );
    }

    .home-hero-lead {
        font-size: 1rem;
    }

    .home-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .home-hero-actions .btn {
        width: 100%;
    }

    .home-hero-visual {
        padding:
                0
                1.4rem
                2rem;
    }

    .home-hero-photo-frame {
        height: 360px;

        border-radius:
                90px
                14px
                14px
                14px;
    }

    .home-hero-stamp {
        width: 100px;
        height: 100px;

        left: 0.4rem;
        bottom: 0.8rem;
    }

    .home-hero-stamp span {
        font-size: 1.3rem;
    }

    .home-hero-stamp small {
        font-size: 0.5rem;
    }


    /* Intro */

    .home-intro-strip .row {
        --bs-gutter-x: 0;
    }

    .home-intro-item {
        padding:
                1.2rem
                0.5rem;
    }

    .home-intro-item strong {
        font-size: 0.95rem;
    }

    .home-intro-item span {
        display: none;
    }


    /* Homepage sections */

    .home-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .home-section-heading {
        margin-bottom: 1.75rem;
    }

    .home-feature-card {
        min-height: auto;
    }


    /* Species image cards */

    .home-species-card,
    .home-species-content {
        min-height: 470px;
    }

    .home-species-content {
        padding:
                2rem
                1.6rem;
    }

    .home-species-horse
    .home-species-image::after {
        background:
                linear-gradient(
                        to bottom,
                        rgba(83, 107, 122, 0.40) 0%,
                        rgba(83, 107, 122, 0.50) 25%,
                        rgba(83, 107, 122, 0.60) 48%,
                        rgba(83, 107, 122, 0.79) 66%,
                        rgba(65, 86, 100, 0.94) 83%,
                        rgba(65, 86, 100, 0.99) 100%
                );
    }

    .home-species-dog
    .home-species-image::after {
        background:
                linear-gradient(
                        to bottom,
                        rgba(122, 57, 72, 0.40) 0%,
                        rgba(122, 57, 72, 0.50) 25%,
                        rgba(122, 57, 72, 0.60) 48%,
                        rgba(122, 57, 72, 0.79) 66%,
                        rgba(97, 45, 57, 0.94) 83%,
                        rgba(97, 45, 57, 0.99) 100%
                );
    }


    /* Community */

    .home-community {
        padding:
                3.5rem 0;
    }

    .home-community-inner {
        padding:
                2rem
                1.5rem;
    }


    /* Properties */

    .property-add-card {
        align-items: stretch;
        flex-direction: column;
    }

    .property-add-card .btn {
        width: 100%;
    }

}


/* =========================================================
   Responsive - Small Mobile
   ========================================================= */

@media (max-width: 575.98px) {

    .rulebook-nav {
        columns: 1;
    }

    .rulebook-section-heading {
        align-items: flex-start;
    }

    .rulebook-article {
        padding: 1.2rem;
    }

    .property-overview-header {
        align-items: flex-start;
        flex-direction: column;
    }

}
.settings-form {
    max-width: 900px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.settings-grid .form-group {
    min-width: 0;
}

.settings-grid input[type="number"] {
    width: 100%;
}

.form-help {
    margin: 6px 0 0;
    color: var(--rr-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.settings-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--rr-brass);
    border-radius: 6px;
    background: color-mix(in srgb, var(--rr-brass) 10%, white);
}

.settings-preview > div {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

@media (max-width: 700px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Shared Tabs
   Economy + Market
   ========================================================= */

.rr-tabs {
    gap: 0.35rem;

    border-bottom:
            1px solid var(--rr-border);
}

.rr-tabs .nav-item {
    margin-bottom: -1px;
}

.rr-tabs .nav-link {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    margin-bottom: 0;
    padding:
            0.7rem
            1rem;

    color: var(--rr-blue);

    background: transparent;

    border: 0;
    border-bottom:
            3px solid transparent;

    border-radius:
            7px
            7px
            0
            0;

    font-weight: 700;

    transition:
            color 0.15s ease,
            background-color 0.15s ease,
            border-color 0.15s ease;
}

.rr-tabs .nav-link:hover {
    color: var(--rr-burgundy);

    background:
            color-mix(
                    in srgb,
                    var(--rr-blue) 7%,
                    var(--rr-white)
            );

    border-bottom-color:
            color-mix(
                    in srgb,
                    var(--rr-burgundy) 35%,
                    transparent
            );
}

.rr-tabs .nav-link.active {
    color: var(--rr-burgundy);

    background:
            color-mix(
                    in srgb,
                    var(--rr-blue) 9%,
                    var(--rr-white)
            );

    border-bottom-color:
            var(--rr-burgundy);
}

.rr-tabs .nav-link:focus-visible {
    outline:
            2px solid var(--rr-champagne);

    outline-offset: 2px;
}

.rr-tabs .nav-link .icon-bits,
.rr-tabs .nav-link .icon-ribbons {
    width: 1em;
    height: 1em;
}

/* Market tab counts */

.rr-tabs .nav-link .badge {
    color: var(--rr-blue) !important;

    background:
            color-mix(
                    in srgb,
                    var(--rr-blue) 9%,
                    white
            ) !important;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--rr-blue) 20%,
                    transparent
            );
}

.rr-tabs .nav-link.active .badge {
    color: var(--rr-burgundy) !important;

    background:
            color-mix(
                    in srgb,
                    var(--rr-burgundy) 9%,
                    white
            ) !important;

    border-color:
            color-mix(
                    in srgb,
                    var(--rr-burgundy) 20%,
                    transparent
            );
}

@media (max-width: 575.98px) {

    .rr-tabs {
        gap: 0.15rem;
    }

    .rr-tabs .nav-link {
        padding:
                0.65rem
                0.75rem;

        font-size: 0.9rem;
    }

}


/* Economy pagination */

.pagination .page-link {
    color: var(--rr-blue);
    background-color: var(--rr-white);
    border-color: var(--rr-border);
}

.pagination .page-link:hover {
    color: var(--rr-burgundy);
    background-color: var(--rr-white);
}

.pagination .page-item.active .page-link {
    color: var(--rr-white);
    background-color: var(--rr-blue);
    border-color: var(--rr-blue);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--rr-blue) 20%, transparent);
}

li::marker {
    color: var(--rr-burgundy-lt);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* =========================================================
   Navbar Dropdowns
   ========================================================= */

.site-header .dropdown-menu {
    min-width: 220px;

    margin-top: 0.75rem;
    padding: 0.5rem;

    background: #fff;

    border:
            1px solid var(--rr-border);

    border-top:
            3px solid var(--rr-champagne);

    border-radius: 10px;

    box-shadow:
            0 14px 34px rgba(52, 58, 64, 0.16);

    overflow: hidden;
}


/* Dropdown links */

.site-header .dropdown-item {
    display: flex;
    align-items: center;

    gap: 0.65rem;

    padding:
            0.65rem
            0.8rem;

    color: var(--rr-slate);

    border-radius: 7px;

    font-size: 0.88rem;
    font-weight: 600;

    transition:
            color 0.15s ease,
            background-color 0.15s ease,
            transform 0.15s ease;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
    color: var(--rr-burgundy);

    background:
            rgba(83, 107, 122, 0.07);

    transform: translateX(2px);
}


/* Active dropdown item */

.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
    color: #fff;

    background: var(--rr-burgundy);
}


/* Icons */

.site-header .dropdown-item i {
    width: 1.1rem;

    color: var(--rr-blue);

    text-align: center;
}

.site-header .dropdown-item:hover i,
.site-header .dropdown-item:focus i {
    color: var(--rr-burgundy);
}

.site-header .dropdown-item.active i,
.site-header .dropdown-item:active i {
    color: #fff;
}


/* Divider */

.site-header .dropdown-divider {
    margin:
            0.45rem
            0.25rem;

    border-color: var(--rr-border);
}


/* Dropdown headings */

.site-header .dropdown-header {
    padding:
            0.55rem
            0.8rem
            0.35rem;

    color: var(--rr-burgundy);

    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* Dropdown toggle arrow */

.site-header .dropdown-toggle::after {
    margin-left: 0.4rem;

    vertical-align: 0.12em;

    border-top-color:
            rgba(255, 255, 255, 0.7);

    transition:
            transform 0.15s ease;
}

.site-header .dropdown-toggle.show::after {
    transform: rotate(180deg);
}


/* Keep open dropdown trigger highlighted */

.site-header .dropdown-toggle.show {
    color: #fff;
}


/* Optional subtle indicator under open dropdown */

.site-header .dropdown-toggle.show::before {
    content: "";

    position: absolute;

    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.3rem;

    height: 2px;

    background: var(--rr-champagne);
}

.show-calendar {
    border: 1px solid var(--rr-champagne);
    border-radius: 1rem;
    overflow: hidden;
}

.show-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--rr-white);
    border-bottom: 1px solid var(--rr-champagne);
}

.show-calendar-weekday {
    padding: 0.7rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rr-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.show-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.show-calendar-day {
    min-height: 125px;
    padding: 0.65rem;
    border-right: 1px solid var(--rr-champagne);
    border-bottom: 1px solid var(--rr-champagne);
    min-width: 0;
}

.show-calendar-day:nth-child(7n) {
    border-right: 0;
}

.show-calendar-day.empty {
    background: var(--rr-white);
    opacity: 0.55;
}

.show-calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--rr-burgundy);
}

.show-calendar-number {
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.show-calendar-event {
    display: block;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--rr-border);
    border-radius: 0.55rem;
    background: var(--rr-white);
    color: var(--rr-slate);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.25;
}

.show-calendar-event:hover {
    border-color: var(--rr-brass);
    color: var(--rr-slate);
}

.show-calendar-event-name {
    display: block;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.show-color-strip {
    display: flex;
    gap: 3px;
    margin-top: 0.35rem;
    min-height: 4px;
}

.show-color-strip span {
    height: 4px;
    flex: 1;
    border-radius: 999px;
}

.show-discipline-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.show-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
}

.show-category {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--rr-muted);
}

.show-calendar-mobile-date {
    display: none;
}

@media (max-width: 767.98px) {
    .show-calendar-weekdays {
        display: none;
    }

    .show-calendar-grid {
        display: block;
    }

    .show-calendar-day,
    .show-calendar-day:nth-child(7n) {
        min-height: 0;
        border-right: 0;
        padding: 0.85rem;
    }

    .show-calendar-day.empty,
    .show-calendar-day:not(:has(.show-calendar-event)) {
        display: none;
    }

    .show-calendar-number {
        display: none;
    }

    .show-calendar-mobile-date {
        display: block;
        font-weight: 700;
        margin-bottom: 0.6rem;
    }
}

/* 1. Remove default Bootstrap caret */
.navbar-nav .dropdown-toggle::after {
    border: none !important;
    font-family: "Font Awesome 7 Pro"; /* Or your specific icon font family */
    font-weight: 900;
    font-size: 10px;
    content: "\f078" !important; /* Unicode for fa-chevron-down */
    vertical-align: middle;
    margin-left: 0.35rem;
}

.show-discipline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--discipline-color);
    color: #fff;

    border-radius: 999px;
    padding: 0.25rem 0.5rem;

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}
.show-calendar-event.is-completed {
    opacity: 0.5;
}


.text-primary {
    color: var(--rr-burgundy)!important;
}

/* =========================================================
   R&R — ACCOUNT DROPDOWN
   ========================================================= */

.rr-account-dropdown {
    position: relative;
}

.rr-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    border: 0;
    cursor: pointer;
    font: inherit;
}

.rr-account-chevron {
    font-size: 0.65em;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.rr-account-trigger.show .rr-account-chevron {
    transform: rotate(180deg);
}

.rr-account-menu {
    min-width: 230px;
    max-width: calc(100vw - 3rem);
    margin-top: 0.5rem;
}

/* Modern browsers (Chrome, Firefox, Safari, Edge) */
.form-control::placeholder {
    color: var(--rr-champagne); /* Replace with your desired color */
    opacity: 1;    /* Overrides Firefox's default opacity lowering */
}

/* Internet Explorer 10-11 (If needed) */
.form-control:-ms-input-placeholder {
    color: #ff5733;
}























/* ============================================================
   RIBBONS AND REINS — dashboard.php visual pass
   ============================================================
   Written against your real app.css classes and --rr- tokens
   (this file's values, not the forum's stylesheet.css — the two
   differ slightly). Append this to the end of app.css.

   ============================================================ */

/* ---------- 1. Hero row → rounded gradient panel ----------
   Same visual language your .dashboard-panel already uses for
   Horses/Dogs, just applied to the welcome row too, instead of
   inventing a new "full-bleed dark band" pattern your site
   doesn't otherwise have anywhere. */

#dashboard-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--rr-blue-dark), var(--rr-blue));
    border-radius: var(--rr-radius-lg);
    padding: 2.25rem 2.25rem 2rem;
    margin-left: 0;
    margin-right: 0;
}

#dashboard-hero .page-eyebrow {
    color: var(--rr-champagne);
}

#dashboard-hero .page-title {
    color: var(--rr-white);
}

#dashboard-hero .page-intro {
    color: rgba(255, 255, 255, 0.75);
}

/* award icon watermark — styles the actual <i class="fa-solid
   fa-award"> element added in dashboard.php, not a pseudo-element,
   since a CSS content:"\f559" trick may not render depending on
   whether your FA kit runs in webfont or SVG-replacement mode */
.dashboard-hero-icon {
    position: absolute;
    top: -20px;
    right: 10px;
    font-size: 350px;
    overflow: visible;
    color: #ffffff;
    opacity: 0.1;
    pointer-events: none;
    transform: rotate(15deg);
}

.dashboard-hero-icon svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
}

#dashboard-hero .btn-rr-default {
    --bs-btn-bg: var(--rr-champagne);
    --bs-btn-border-color: var(--rr-champagne);
    --bs-btn-color: var(--rr-blue-dark);
    --bs-btn-hover-bg: #C7AD78;
    --bs-btn-hover-border-color: #C7AD78;
    --bs-btn-hover-color: var(--rr-blue-dark) !important;
}

#dashboard-hero .btn-outline-primary {
    --bs-btn-color: var(--rr-white);
    --bs-btn-border-color: rgba(255, 255, 255, 0.5);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.14);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.7);
    --bs-btn-hover-color: var(--rr-white);
}

/* ---------- 2. Stat cards: drop the box, go ledger-style ----------
   The col-6/col-md-3 grid and its gutters already give these
   visual separation — removing the white box + border is what
   actually kills the "four identical bootstrap cards" tell. */

.dashboard-stat {
    height: auto;
    padding: 0 0 0.9rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--rr-champagne);
    border-radius: 0;
}

.dashboard-stat-value {
    font-size: 2.4rem;
    font-style: italic;
    font-weight: 600;
}

/* stats now live inside #dashboard-hero (dark bg) instead of on
   the cream page background, so they need light-on-dark colors
   and a rule separating them from the welcome text above */
#dashboard-hero > .col-12 {
}

#dashboard-hero .dashboard-stat-label {
    color: var(--rr-champagne);
}

#dashboard-hero .dashboard-stat-value {
    color: var(--rr-white);
}

#dashboard-hero .dashboard-stat-note {
    color: rgba(255, 255, 255, 0.6);
}

#dashboard-hero .dashboard-stat {
    border-bottom-color: rgba(214, 191, 145, 0.4);
}

/* ---------- 3. Feature panels: rosette watermark + a real button ---------- */

.dashboard-panel {
    position: relative;
}

.dashboard-panel-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 110px;
    overflow: visible;
    color: #ffffff;
    opacity: 0.13;
    pointer-events: none;
}

.dashboard-panel-icon svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
}

.dashboard-panel .btn-outline-light {
    --bs-btn-color: var(--rr-blue-dark);
    --bs-btn-bg: var(--rr-champagne);
    --bs-btn-border-color: var(--rr-champagne);
    --bs-btn-hover-bg: #C7AD78;
    --bs-btn-hover-border-color: #C7AD78;
    --bs-btn-hover-color: var(--rr-blue-dark);
}

/* ---------- OPTIONAL — pulled-out stat figure inside each panel ----------
   Does nothing unless you add one line to each panel in
   dashboard.php, right after the .dashboard-panel-top div:

     <div class="dashboard-panel-figure"><?= $horseCount ?></div>
     <div class="dashboard-panel-figure"><?= $dogCount ?></div>

   If you'd rather skip the template edit, just don't add the
   line — this rule stays unused and harmless. */

.dashboard-panel-figure {
    font-family: var(--rr-serif);
    font-style: italic;
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1;
    margin-top: 1.25rem;
}

/* ---------- 4. Nav bar match ----------
   This one is sitewide, not dashboard-scoped — .site-header
   wraps every page's header.php, so this changes the nav
   everywhere, not just here. It's a single color swap and every
   nav text color is already white/rgba-white, so nothing else
   needs to change to stay legible. */

.site-header {
    background: var(--rr-blue-dark);
}

/* ---------- 5. Feature grid ----------
   The one deviation from pure Bootstrap in this whole pass —
   matching the mockup's tall featured Horses panel requires a
   real span-two-rows layout, which flexbox row/col can't do.
   Scoped to just this section; nothing else on the page uses it.
   Requires the matching HTML in dashboard.php (the grid wrapper
   replaces the old row.g-4 > col-xl-8/col-xl-4 split for this
   section only — Upcoming Events stays full-width below it). */

.dashboard-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.85fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
}

.dashboard-panel-featured {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* Dogs now matches Horses' height — same span-two-rows treatment,
   just column 2 instead of column 1. The old .dashboard-panel-compact
   rules below are unused now but left in place, harmless. */
.dashboard-panel-tall {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.dashboard-panel-compact {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    padding: 1.5rem 1.75rem;
}

.dashboard-panel-compact h2 {
    margin-top: 1.5rem;
    font-size: 1.5rem;
}

.dashboard-card-compact {
    grid-column: 3;
    grid-row: 1;
}

/* Notifications stacks under Achievements now, same column,
   instead of spanning wide under Dogs + Achievements */
.dashboard-card-wide {
    grid-column: 3;
    grid-row: 2;
}

@media (max-width: 991px) {
    .dashboard-feature-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .dashboard-panel-featured,
    .dashboard-panel-tall,
    .dashboard-panel-compact,
    .dashboard-card-compact,
    .dashboard-card-wide {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ---------- 6. Nav account button ----------
   .rr-account-trigger currently also carries .brass-badge, a
   generic pale-background badge class meant for things like
   currency tags on light backgrounds — that's why the account
   button reads as a plain light Bootstrap pill instead of the
   transparent champagne-outlined pill in the mockup. This
   overrides just the properties .brass-badge sets, scoped to
   this one class so .brass-badge itself stays untouched
   everywhere else it's used. Sitewide, like the nav color — it's
   the same .site-header nav on every page. */

.rr-account-trigger {
    background: transparent;
    border: 1px solid rgba(214, 191, 145, 0.5);
    border-radius: 999px;
    padding: 6px 14px 6px 10px;
    color: var(--rr-white);
}

.rr-account-trigger:hover,
.rr-account-trigger:focus {
    background: rgba(255, 255, 255, 0.08);
    color: var(--rr-white);
}

.rr-account-trigger i {
    color: var(--rr-champagne);
}


/* ---------- 9. Merge hero flush against the nav ----------
   .rr-content has padding-top: 2rem sitewide — that's the gap.
   Canceling it with a negative margin, scoped to just this
   element so every other page keeps its normal top spacing.
   Also squares the hero's top corners (was rounded on all four)
   so it reads as one continuous shape with .site-header's square
   bottom edge instead of a rounded card sitting under it. */

#dashboard-hero {
    margin-top: -2rem;
    border-radius: 0 0 var(--rr-radius-lg) var(--rr-radius-lg);
}

/* ---------- 10. Hero goes full-bleed, flush with the nav ----------
   Standard "break out of a Bootstrap container" trick: 100vw
   width + negative margins pulls the row past .container-fluid's
   own padding to the actual viewport edges, same as .site-header
   already is. Border-radius drops to 0 entirely now — a rounded
   corner doesn't make sense on an edge-to-edge band, only on an
   inset card. Padding is added back on manually, matching the
   same px-3/px-md-4/px-xl-5 scale .site-header's own container
   uses (1rem / 1.5rem / 3rem), so hero content still lines up
   with the nav's logo/links above it instead of sitting flush
   against the literal screen edge. */

#dashboard-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -2rem;
    border-radius: 0;
    padding: 2.25rem 1rem 2rem;
}

@media (min-width: 768px) {
    #dashboard-hero {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1200px) {
    #dashboard-hero {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}