/* ========================================
   EquialitySims - Main Stylesheet
   Last Updated: October 24, 2025
   ======================================== */

/* ========================================
   COLOR PALETTE
   ======================================== */
/* Primary Green: #5d624b
   Accent Green: #9aa570
   Background Gray: #f4f4f4
   White: #ffffff
   Border Gray: #ddd */


/* ========================================
   TYPOGRAPHY - CSS VARIABLES
   ======================================== */
/* To change fonts later, update these variable values only.
   No need to change individual style rules throughout the file. */

:root {
    --font-heading: 'DM Serif Text', Georgia, serif;
    --font-body: 'Poppins', Arial, Helvetica, sans-serif;
}


/* ========================================
   BASE STYLES
   ======================================== */

body {
    background: #f4f4f4;
    overflow-y: auto;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
}

/* Site wrapper - constrains content width on ultra-wide monitors */
.site-wrapper {
    max-width: 1400px;
    margin: 0 auto;           /* Center the content */
    background: #ffffff;      /* White background for content area */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);  /* Subtle shadow to lift content */
    min-height: 100vh;        /* Full viewport height */
}

/* All heading styles use the DM Serif Text font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
}

h1 {
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 20px;  /* Breathing room below headings */
    color: #5d624b;  /* EQ green */
}

h2 {
    font-size: 1.875rem;
    margin-top: 20px;
    margin-bottom: 16px;
    color: #5d624b;  /* EQ green */
}

h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 14px;
    color: #5d624b;  /* EQ green */
}

h4 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 12px;
    color: #5d624b;  /* EQ green */
}

h5 {
    font-size: 1.125rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #5d624b;  /* EQ green */
}

h6 {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #5d624b;  /* EQ green */
}

/* ========================================
   CONTENT LINK STYLES
   ======================================== */

/*
 * .content-link class - Prevents purple visited link color
 *
 * Usage: Add this class to links in text content to prevent them from turning purple when visited
 * Example: <a href="/profile/user/" class="content-link">User Name</a>
 *
 * This class is opt-in only - it won't affect any existing links unless you add the class
 */
.content-link,
.content-link:visited {
    color: #5d624b !important;
    text-decoration: none;
}

.content-link:hover {
    text-decoration: underline;
}

/* ========================================
   HEADER & LOGO
   ======================================== */

#logo {
    vertical-align: middle;
    border-style: none;
    box-sizing: border-box;
    height: 200px;
    padding: 14px;
    padding-bottom: 20px;
}

#header {
    text-align: center;
}

#banner {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}


/* ========================================
   NAVIGATION BAR
   ======================================== */

/* Top navigation bar with green background */
/* ISOLATED STYLING - uses flexbox for consistent height (no gaps) */
.topnav {
    background-color: #5d624b;
    overflow: visible; /* Allow dropdowns to show */
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Navigation list styling - FLEXBOX layout for consistent heights */
.topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: #5d624b;
    border: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* All items stretch to same height */
}

.topnav ul li {
    position: relative;
    border: none !important;
    display: flex;
    align-items: stretch;
}

/* Right-aligned items (profile icon) */
.topnav ul li[style*="float:right"],
.topnav ul li[style*="float: right"] {
    margin-left: auto;
}

.topnav ul li a {
    display: flex;
    align-items: center;
    color: #f4f4f4;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: none !important;
    box-shadow: none !important;
}

.topnav ul li a:hover:not(.active):not(.dropbtn) {
    background-color: #9aa570;
    color: #f4f4f4;
    border: none !important;
}

.topnav ul li a.active {
    background-color: #9aa570;
    border: none !important;
}

/* Style direct links inside topnav (if any) */
.topnav > a {
    display: flex;
    align-items: center;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border: none !important;
    box-shadow: none !important;
}

/* Change the color of links on hover */
.topnav > a:hover {
    background-color: #9aa570;
    color: #f4f4f4;
    border: none !important;
}

/* Create a right-aligned (split) link inside the navigation bar */
.topnav a.split {
    margin-left: auto;
    background-color: #9aa570;
    color: white;
    border: none !important;
}


/* ========================================
   SEARCH IN NAVIGATION
   ======================================== */

.search-nav-item {
    display: flex;
    align-items: center;
    padding: 0 10px; /* Vertical padding removed, let flexbox handle height */
    background-color: #5d624b;
    margin: 0;
    border: none !important;
}

.search-nav-form {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.search-nav-input {
    padding: 8px 12px; /* Increased input padding to compensate */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    width: 200px;
    transition: width 0.3s ease, border-color 0.2s;
    margin: 0;
}

.search-nav-input:focus {
    outline: none;
    border-color: #5d624b;
    width: 250px;
}

.search-nav-button {
    padding: 6px 12px;
    background-color: #5d624b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search-nav-button i {
    font-size: 0.9em;
}


/* ========================================
   DROPDOWN MENU (Navigation Bar)
   ISOLATED - scoped to .topnav to prevent bleed from other tab systems
   ======================================== */

/* Dropdown items in nav - uses flex like other nav items */
.topnav ul li.dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
    border: none !important;
}

.topnav ul li.dropdown .dropbtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #f4f4f4;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: none !important;
    box-shadow: none !important;
}

.topnav ul li.dropdown .dropbtn:hover {
    background-color: #9aa570;
    color: #f4f4f4;
    border: none !important;
}

.topnav ul li.dropdown .dropbtn.active {
    background-color: #9aa570;
    border: none !important;
}

.topnav ul li.dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #5d624b;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
    top: 100%;
    left: 0;
    border: none !important;
}

.topnav ul li.dropdown .dropdown-content a {
    color: #f4f4f4 !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    white-space: nowrap;
    border: none !important;
}

.topnav ul li.dropdown .dropdown-content a:hover {
    background-color: #9aa570 !important;
    color: #f4f4f4 !important;
    border: none !important;
}

/* Show dropdown on open class (click-based) - Safari needs more specificity */
.topnav ul li.dropdown.open .dropdown-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.topnav ul li.dropdown.open .dropbtn {
    background-color: #9aa570;
    border: none !important;
}

/* Also support hover for desktop users - SCOPED to .topnav only */
.topnav ul li.dropdown:hover .dropdown-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.topnav ul li.dropdown:hover .dropbtn {
    background-color: #9aa570;
}

/* Notification Bell Badge */
.notifications-nav-item {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Pending Item Indicator Dot (for Clubs and Admin nav items) */
.clubs-nav-item,
.admin-nav-item {
    position: relative;
}

.clubs-nav-item a,
.admin-nav-item a {
    position: relative;
}

.pending-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ff9800;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    box-shadow: 0 0 4px rgba(255, 152, 0, 0.5);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 4px rgba(255, 152, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 8px rgba(255, 152, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 4px rgba(255, 152, 0, 0.5);
    }
}


/* ========================================
   MAIN CONTENT AREA
   ======================================== */

#MainText {
    color: #5d624b;
    text-align: center !important;
    padding: 40px 30px;  /* Consistent padding: top/bottom 40px, sides 30px */
}


/* ========================================
   HORSE AVAILABILITY BADGES
   ======================================== */

.availability-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
}

.availability-badge i {
    font-size: 1.1rem;
}

.breeding-badge {
    background: linear-gradient(135deg, #5d624b 0%, #7a8062 100%);
    color: white;
}

.sale-badge {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
}

.availability-notes {
    background: #f8f9fa;
    border-left: 4px solid #5d624b;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    color: #555;
    font-size: 0.95rem;
}

.availability-notes i {
    color: #5d624b;
    margin-right: 8px;
}

.availability-notes strong {
    color: #333;
}


/* ========================================
   FOOTER & UTILITY LINKS
   ======================================== */

#footer {
    background-color: #5d624b;
    color: #ffffff;
    padding: 30px 40px;
    margin-top: 40px;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.footer-logo {
    flex-shrink: 0;
}

.footer-logo-img {
    height: 80px;
    width: auto;
}

.footer-info {
    text-align: left;
}

.footer-links {
    margin-bottom: 8px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: #9aa570;
    text-decoration: underline;
}

.footer-divider {
    margin: 0 10px;
    color: #ffffff;
    opacity: 0.7;
}

.footer-copyright {
    margin: 0 0 4px 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

.footer-disclaimer {
    margin: 0;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* ========================================
   TOP BAR (Social Links + Auth)
   ======================================== */

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    font-size: smaller;
    font-family: 'Gill sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
}

/* Social links (left side) */
#social-links {
    color: #888;
}

#social-links a {
    color: #888;
    text-decoration: none;
}

#social-links a:visited {
    color: #888;
}

#social-links a:hover {
    color: #5d624b;
}

#social-links .separator {
    color: #ccc;
    margin: 0 5px;
}

/* ========================================
   AUTH & PROFILE LINKS
   ======================================== */

#reg {
    text-align: right;
    font-size: inherit;
    font-family: inherit;
}

#reg a {
    color: #888;
    text-decoration: none;
}

#reg a:visited {
    color: #888;
}

#reg a:hover {
    color: #5d624b;
}

#logout {
    text-align: right;
    font-size: inherit;
    font-family: inherit;
    white-space: nowrap;
    color: #888;
    flex-shrink: 0;
}

#logout form {
    display: inline;
}

#logout a {
    color: #888;
    text-decoration: none;
}

#logout a:visited {
    color: #888;
}

#logout a:hover {
    color: #5d624b;
}

/* Sign out button - styled as link */
.sign-out-btn {
    background: none !important;
    border: none !important;
    color: #888 !important;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: normal !important;
    line-height: inherit !important;
    vertical-align: baseline;
    border-radius: 0 !important;
}

.sign-out-btn:hover,
.sign-out-btn:focus {
    background: none !important;
    color: #888 !important;
    outline: none;
}


/* ========================================
   TABLE STYLING
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
}

table thead {
    background-color: #5d624b;
    color: #f4f4f4;
}

table thead th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #9aa570;
}

table tbody tr {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease;
}

table tbody tr:hover {
    background-color: #f9f9f9;
}

table tbody tr:last-child {
    border-bottom: 2px solid #5d624b;
}

table tbody td {
    padding: 12px 15px;
    color: #5d624b;
}

table tbody td a {
    color: #5d624b;
    text-decoration: none;
    font-weight: 500;
}

table tbody td a:hover {
    color: #9aa570;
    text-decoration: underline;
}

/* Striped table rows */
table tbody tr:nth-child(even) {
    background-color: #f8f8f8;
}

table tbody tr:nth-child(even):hover {
    background-color: #f0f0f0;
}


/* ========================================
   FORM ERROR STYLING
   ======================================== */

/* Django's errorlist styling */
.errorlist {
    list-style: none;
    padding: 10px 15px;
    margin: 10px 0;
    background-color: #f8d7da;
    border: 2px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-weight: bold;
}

.errorlist li {
    margin: 5px 0;
}

.errorlist li::before {
    content: "⚠️ ";
    margin-right: 5px;
}

/* Field with error gets red border */
.field-error input,
.field-error select,
.field-error textarea {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5;
}

/* Non-field errors at top of form */
.form-errors {
    background-color: #f8d7da;
    border: 2px solid #dc3545;
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 20px;
    color: #721c24;
}

.form-errors h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #721c24;
}

.form-errors ul {
    margin: 0;
    padding-left: 20px;
}

/* Form field containers */
.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.form-field .field-help {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

.form-field .field-example {
    display: block;
    font-size: 0.85em;
    color: #9aa570;
    margin-top: 3px;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    max-width: 500px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.1);
}

/* Required field indicator */
.required-indicator {
    color: #dc3545;
    font-weight: bold;
    margin-left: 3px;
}

/* ========================================
   BUTTON STYLING
   ======================================== */

input[type="submit"],
button,
.btn {
    background-color: #5d624b;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    line-height: 1;
    min-height: 44px;
    vertical-align: middle;
}

input[type="submit"]:hover,
button:hover,
.btn:hover {
    background-color: #4a4f3b;
}

input[type="submit"]:disabled,
button:disabled,
.btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Secondary button variant - Outlined olive style */
.btn-secondary {
    background-color: #fff;
    color: #5d624b;
    border: 2px solid #5d624b;
}

/* Force all buttons to be exactly the same height */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-success,
a.btn-danger,
button.btn,
button[type="submit"] {
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 500;
    padding: 0 24px;
}

.btn-secondary:hover {
    background-color: #f4f5f0;
    color: #4a4f3b;
    border-color: #4a4f3b;
}

/* Success/Green button variant */
.btn-success {
    background-color: #9aa570; /* Matches navbar hover green */
}

.btn-success:hover {
    background-color: #8a9560; /* Slightly darker for hover */
}

/* Danger/Red button variant */
.btn-danger {
    background-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* Small button variant */
.btn-sm {
    padding: 5px 12px;
    font-size: 0.9em;
}

/* Button with icon */
.btn i {
    font-size: 0.9em;
}


/* ========================================
   INFO BOXES
   ======================================== */

.info-box {
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    border-left: 4px solid;
    text-align: left;
}

.info-box h4 {
    margin: 0 0 10px 0;
    font-size: 1em;
}

.info-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-box li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.info-box li:last-child {
    margin-bottom: 0;
}

.info-box li::before {
    content: "•";
    position: absolute;
    left: 6px;
    color: inherit;
    font-weight: bold;
}

.info-box a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}

/* Olive variant (default site color) */
.info-box-olive {
    background: #f4f5f0;
    border-color: #5d624b;
}

.info-box-olive h4 {
    color: #5d624b;
}

/* Yellow/Warning variant */
.info-box-yellow {
    background: #fff3cd;
    border-color: #ffc107;
}

.info-box-yellow h4 {
    color: #856404;
}

/* Blue/Info variant */
.info-box-blue {
    background: #e7f3ff;
    border-color: #007bff;
}

.info-box-blue h4 {
    color: #004085;
}

/* Red/Danger variant */
.info-box-red {
    background: #f8d7da;
    border-color: #dc3545;
}

.info-box-red h4 {
    color: #721c24;
}

/* Green/Success variant */
.info-box-green {
    background: #f0f1eb;
    border-color: #5d624b;
}

.info-box-green h4 {
    color: #5d624b;
}


/* ========================================
   TEXT UTILITIES
   ======================================== */

/* Text colors - for replacing inline color styles */
.text-muted {
    color: #666;
}

.text-light {
    color: #999;
}

.text-accent {
    color: #667eea;
}

.text-accent-alt {
    color: #764ba2;
}

.text-olive {
    color: #5d624b;
}

.text-error {
    color: #dc3545;
}

.text-success {
    color: #9aa570;
}

.text-warning {
    color: #856404;
}

/* Text sizes - for replacing inline font-size styles */
.text-sm {
    font-size: 0.9em;
}

.text-xs {
    font-size: 12px;
}

/* Ownership/loan annotation - used on profile pages for (co-owned with...), (on loan from/to...) */
.ownership-annotation {
    font-size: 0.85em;
    color: #666;
}

/* Empty tab/section message */
.empty-tab-message {
    color: #666;
    font-style: italic;
}

/* Text size utilities */
.text-small {
    font-size: 0.9em;
}

.text-xs {
    font-size: 0.85em;
}

.text-small-muted {
    font-size: 0.9em;
    color: #666;
}

.text-xs-muted {
    font-size: 0.85em;
    color: #666;
}

/* Text alignment */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ========================================
   SPACING UTILITIES
   ======================================== */

/* Margin Top - based on 5px increments */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mt-4 { margin-top: 20px !important; }
.mt-5 { margin-top: 30px !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }
.mb-5 { margin-bottom: 30px !important; }

/* Margin Left/Right */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 5px !important; }
.ml-2 { margin-left: 10px !important; }
.ml-3 { margin-left: 15px !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 5px !important; }
.mr-2 { margin-right: 10px !important; }
.mr-3 { margin-right: 15px !important; }

/* Margin auto for centering */
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-2 { padding: 10px !important; }
.p-3 { padding: 15px !important; }
.py-2 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-3 { padding-top: 15px !important; padding-bottom: 15px !important; }
.px-2 { padding-left: 10px !important; padding-right: 10px !important; }
.px-3 { padding-left: 15px !important; padding-right: 15px !important; }

/* ========================================
   CONTAINER UTILITIES
   ======================================== */

/* Standard form container - 1000px for forms that feel connected to the site */
.form-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Narrow container - for simple forms like login */
.container-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Medium container - legacy, prefer .form-container */
.container-medium {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Full width utility */
.w-100 {
    width: 100%;
}

/* ========================================
   DISPLAY UTILITIES
   ======================================== */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

/* Flexbox utilities */
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.gap-1 { gap: 5px; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 15px; }

/* ========================================
   BORDER UTILITIES
   ======================================== */

.border-bottom {
    border-bottom: 1px solid #dee2e6;
}

.border-top {
    border-top: 1px solid #dee2e6;
}

/* ========================================
   FORM SECTIONS & CARDS
   ======================================== */

/* Form section container - replaces inline background/border/padding */
.form-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-section h3,
.form-section h4 {
    margin-top: 0;
}

/* Section header with bottom border */
.section-header {
    margin: 0 0 20px 0;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* Form label - block label with bold text */
.form-label-block {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Checkbox/radio label with flex alignment */
.form-label-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Checkbox text styling */
.checkbox-text {
    font-weight: bold;
    font-size: 1.05em;
}

/* Grid layouts for forms */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

/* Checkbox row with auto-sized checkboxes and flexible last column */
.grid-checkbox-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 15px;
    align-items: start;
}

.grid-checkbox-row-center {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 20px;
    align-items: center;
}

/* Form table - consistent table styling inside form sections */
.form-table {
    width: 100%;
}

.form-table th {
    text-align: left;
    padding: 10px;
    width: 30%;
    vertical-align: top;
}

.form-table td {
    padding: 10px;
}

/* Admin/staff data table with headers */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.data-table thead tr {
    background: #5d624b;
    color: white;
}

.data-table th,
.data-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.data-table tbody tr {
    background: white;
}

.data-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

/* ========================================
   ALERT BOXES
   ======================================== */

/* Base alert styling */
.alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert p {
    margin: 0;
}

/* Warning alert (yellow) */
.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

/* Info alert (olive) - alias for info-box-olive */
.alert-info {
    background: #f0f2ed;
    border: 1px solid #5d624b;
}

/* Success alert (green) */
.alert-success {
    background: #f0f1eb;
    border: 1px solid #9aa570;
}

/* Danger alert (red) */
.alert-danger {
    background: #f8d7da;
    border: 1px solid #dc3545;
}

/* ========================================
   FORM FIELD HELPERS
   ======================================== */

/* Smaller help text variant (12px) - used in staff forms */
.help-text-sm {
    font-size: 12px;
    color: #666;
}

/* Form error text */
.form-error {
    color: #dc3545;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Preview thumbnail image */
.preview-img {
    max-width: 100px;
    border-radius: 4px;
}

/* Pedigree form labels */
.pedigree-label {
    font-size: 0.75em;
    color: #666;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.pedigree-label-sm {
    font-size: 0.7em;
    color: #666;
    display: block;
    margin-bottom: 2px;
}


/* ========================================
   STATUS BADGES
   ======================================== */

/* Consistent status indicator styling */
.status-badge {
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: 600;
    display: inline-block;
}

.status-pending {
    background: #fff3cd;
    color: #856404;
}

.status-approved,
.status-accepted {
    background: #f0f1eb;
    color: #5d624b;
}

.status-rejected,
.status-declined {
    background: #f8d7da;
    color: #721c24;
}

.status-cancelled {
    background: #e9ecef;
    color: #666;
}

.status-active {
    background: #f0f1eb;
    color: #5d624b;
}

.status-inactive,
.status-archived {
    background: #e9ecef;
    color: #666;
}

/* Owner Inactive Badge - for archived account owners */
.badge-owner-inactive {
    background: #e9ecef;
    color: #666;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 600;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}


/* ========================================
   FORM LAYOUT UTILITIES
   ======================================== */

/* Centered form container */
.form-centered {
    max-width: 1000px;
    margin: 0 auto;
}

.form-centered-sm {
    max-width: 800px;
    margin: 0 auto;
}

.form-centered-wide {
    max-width: 1000px;
    margin: 0 auto;
}

/* Fieldset styling */
.form-centered fieldset,
.form-styled fieldset {
    margin-bottom: 30px;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

/* All fieldset legends should be olive */
fieldset legend {
    color: #5d624b;
}

.form-centered fieldset legend,
.form-styled fieldset legend {
    font-size: 1.1em;
    font-weight: 600;
    color: #5d624b;
    padding: 0 10px;
    margin-left: -10px;
}

/* Form group styling */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 5px rgba(93, 98, 75, 0.3);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* Help text */
.help-text {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 0.9em;
}

/* Field error */
.field-error {
    color: #d9534f;
    margin-top: 5px;
    font-weight: 500;
}

/* Required asterisk */
.required {
    color: #d9534f;
}

/* Form actions (centered buttons) */
.form-actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center; /* Center vertically */
    gap: 15px;
    flex-wrap: wrap;
}

/* Form error summary box (shown at top of forms) */
.form-errors {
    color: #d9534f;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #d9534f;
    border-radius: 4px;
    background-color: #fdf2f2;
}

.form-errors ul {
    margin: 10px 0 0 20px;
    list-style: none;
}

.form-errors li {
    margin-bottom: 8px;
}

/* Fieldsets and legends */
.form-fieldset,
fieldset.form-fieldset {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.form-legend,
legend.form-legend {
    padding: 0 10px;
    font-size: 1.2em;
    font-weight: bold;
}

/* Form labels */
.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Jump-to buttons (error navigation) */
.jump-to-field-btn,
.jump-to-tab-btn {
    margin-left: 10px;
    font-size: 0.85em;
    padding: 2px 8px;
    background: #5d624b;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.jump-to-field-btn:hover,
.jump-to-tab-btn:hover {
    background: #4a4d3c;
}

/* Info boxes (colored backgrounds for help/warnings/tips) */
.info-box-blue {
    margin-top: 15px;
    padding: 10px;
    background: #f0f8ff;
    border-left: 4px solid #5b9bd5;
    font-size: 0.9em;
    border-radius: 4px;
}

.info-box-yellow {
    background: #fff3cd;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid #ffc107;
    margin: 10px 0;
}

.info-box-green {
    background: #f0fff0;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #5cb85c;
}

.info-box-olive {
    background: #f4f5f0;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #5d624b;
}

.info-box-trait {
    background: #f0f7f0;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-left: 4px solid #5d624b;
}

/* Section dividers */
.section-divider {
    border-top: 1px solid #ddd;
    padding-top: 15px;
    margin-bottom: 20px;
}

.section-divider-top {
    border-top: 1px solid #ddd;
    padding-top: 15px;
}

.section-divider-margin {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

/* Hidden content (for forms with conditional display) */
.hidden {
    display: none !important;
}

/* Inline forms/buttons */
.inline-form {
    display: inline;
}

/* Muted/gray backgrounds for locked fields */
.field-locked {
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.field-locked small {
    display: block;
    margin-top: 5px;
    font-style: italic;
}

/* ========================================
   CHECKBOX STYLING - GLOBAL
   ======================================== */
/* Subtle white checkbox with olive checkmark
   Based on club browse page design */

/* Checkbox labels with flex layout */
.checkbox-label,
label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 400;
    color: #5d624b;
}

/* Global checkbox styling - subtle white with olive check */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #ccc;
    border-radius: 3px;
    background: white;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin-right: 10px;
}

input[type="checkbox"]:checked {
    border-color: #5d624b;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 40%;
    width: 5px;
    height: 9px;
    border: solid #5d624b;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Specific styling for form-check containers */
.form-check {
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #f9f9f9;
    border-radius: 6px;
}

.form-check label {
    font-weight: 600;
    cursor: pointer;
}

/* Static form values (label: value pairs) */
.form-label {
    font-weight: 600;
    color: #5d624b;
    display: inline-block;
    min-width: 120px;
}

.form-value {
    color: #555;
}

.form-value a {
    color: #5d624b;
    text-decoration: none;
}

.form-value a:hover {
    text-decoration: underline;
}


/* ========================================
   SELECT2 SITE-WIDE OLIVE THEME
   ======================================== */

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 42px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 40px;
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.select2-container--default .select2-results__option {
    background-color: #fff;
    color: #333;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f4f4f4 !important;
    color: #5d624b !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f4f5f0;
    color: #333;
}

.select2-dropdown {
    background-color: #fff !important;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #5d624b;
    box-shadow: 0 0 5px rgba(93, 98, 75, 0.3);
}

/* Multi-select Select2 */
.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-height: 42px;
    padding: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5d624b;
    border: none;
    color: white;
    border-radius: 4px;
    padding: 3px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    margin-right: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffcccc;
}


/* ========================================
   LOADING INDICATORS
   ======================================== */

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #5d624b;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: white;
    font-size: 18px;
    margin-top: 20px;
    text-align: center;
}

/* Form submit button with loading state */
form.loading input[type="submit"] {
    position: relative;
    color: transparent;
    pointer-events: none;
}

form.loading input[type="submit"]::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #5d624b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* ========================================
   MESSAGES / NOTIFICATIONS
   ======================================== */

.messages {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    display: block !important;
    max-width: 800px;
    clear: both;
    background-color: transparent !important;
}

.messages li {
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #f0f1eb;
    border: 1px solid #9aa570;
    color: #5d624b;
    float: none !important;
    display: block;
    text-align: center;
    list-style: none;
}

.messages li::marker {
    display: none;
}

.messages li.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.messages li.warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.messages li.info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}


/* ========================================
   SELECT2 AUTOCOMPLETE CUSTOMIZATION
   ======================================== */

.select2-container--default .select2-selection--single {
    background-color: #ffffff;
    border: 1px solid #5d624b;
    border-radius: 4px;
    height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #5d624b;
    line-height: 36px;
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 6px;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #9aa570;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f4f4f4;
    color: #5d624b;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #5d624b;
    border-radius: 4px;
    padding: 6px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #5d624b;
    color: white;
}

.select2-dropdown {
    border: 1px solid #5d624b;
    border-radius: 4px;
    background-color: #ffffff;  /* White background for dropdown */
}

/* Ensure dropdown results container has white background */
.select2-results {
    background-color: #ffffff;
}

/* Regular options - white background with dark text */
.select2-container--default .select2-results__option {
    background-color: #ffffff;
    color: #333;
    padding: 8px 12px;
}

/* Hover state - light gray background */
.select2-container--default .select2-results__option--highlighted {
    background-color: #f4f4f4 !important;
    color: #5d624b !important;
}

/* Make sure search field has white background */
.select2-search--dropdown {
    background-color: #ffffff;
    padding: 6px;
}

/* ----------------------------------------
   SELECT2 FILTER SIDEBAR SIZING
   Smaller text for filter dropdowns
   ---------------------------------------- */

/* Multi-select container in filter sections */
.filter-section .select2-container--default .select2-selection--multiple {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-height: 32px;
    font-size: 0.85rem;
}

/* Selected tags (pills) with proper X button positioning */
.filter-section .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5d624b;
    border: 1px solid #5d624b;
    border-radius: 12px;
    color: white;
    font-size: 0.85em;
    padding-left: 22px;  /* Space for X button */
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 3px 3px 3px 0;
    line-height: 1.5;
    position: relative;  /* For absolute X button positioning */
}

/* Remove button (X) - positioned absolutely to prevent overlap */
.filter-section .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    opacity: 0.8;
    font-size: 11px;
    border: none;
    background: transparent;
}

.filter-section .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    color: #fff;
    background: transparent;
}

/* Dropdown options - smaller text */
.filter-section .select2-container--default .select2-results__option {
    font-size: 0.85rem;
    padding: 6px 10px;
}

/* Search field inside dropdown */
.filter-section .select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 0.85rem;
    padding: 4px 6px;
}

/* Single select in filter sections */
.filter-section .select2-container--default .select2-selection--single {
    height: 32px;
    font-size: 0.85rem;
}

.filter-section .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    font-size: 0.85rem;
}

/* Sort dropdown Select2 - smaller styling */
.sort-controls .select2-container {
    width: 180px !important;  /* Consistent width across all browse pages */
}

.sort-controls .select2-container--default .select2-selection--single {
    height: 32px;
    border: 1px solid #ddd;
    font-size: 0.85rem;
}

.sort-controls .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    font-size: 0.85rem;
    color: #333;
}

.sort-controls .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
}

/* ----------------------------------------
   BROWSE PAGE SELECT2 - CONSISTENT STYLING
   Global styling for all browse page dropdowns
   ---------------------------------------- */

/* Multi-select container - browse pages */
.browse-sidebar .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: #fff !important;
    transition: border-color 0.15s;
}

.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    background-color: #fff !important;
}

.browse-sidebar .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Search input in multi-select */
.browse-sidebar .select2-container--default .select2-search--inline .select2-search__field {
    font-size: 14px;
    padding: 4px 6px;
    margin: 2px 0;
    height: 28px;
}

/* Selected tags - bubble style with proper X button positioning */
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5d624b;
    border: 1px solid #5d624b;
    border-radius: 12px;
    color: #fff;
    padding-left: 24px;  /* Space for X button */
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 2px 4px 2px 0;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.5;
    position: relative;  /* For absolute X button positioning */
}

/* Remove button (X) - positioned absolutely to prevent overlap */
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    opacity: 0.8;
    font-size: 12px;
    border: none;
    background: transparent;
}

.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    color: #fff;
    background: transparent;
}

/* Dropdown container */
.select2-dropdown {
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff !important;
}

/* Dropdown search area */
.select2-search--dropdown {
    padding: 8px;
    background-color: #fff !important;
    border-bottom: 1px solid #dee2e6;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    width: 100%;
    background-color: #fff !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Results container */
.select2-container--default .select2-results {
    background-color: #fff !important;
}

.select2-container--default .select2-results > .select2-results__options {
    background-color: #fff !important;
}

/* Individual options */
.select2-container--default .select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #fff !important;
    color: #212529;
}

/* Hover highlight */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f4f4f4 !important;
    color: #5d624b !important;
}

/* Selected items in dropdown */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Hover highlight on already-selected items */
.select2-container--default .select2-results__option[aria-selected=true].select2-results__option--highlighted {
    background-color: #f4f4f4 !important;
    color: #5d624b !important;
}


/* ========================================
   CREDITS DISPLAY BOX
   ======================================== */

.credits-box {
    margin: 20px 0;
    padding: 15px;
    background-color: #f0f8f0;
    border-left: 4px solid #5d624b;
    border-radius: 4px;
}

.credits-box h3 {
    margin-top: 0;
}

.credits-box p {
    margin: 5px 0;
}

.credits-box em {
    color: #666;
}


/* ========================================
   BROWSE PAGE LAYOUT
   ======================================== */

.browse-container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-gap: 20px;
    -moz-gap: 20px;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 30px;  /* Consistent with #MainText */
}

.browse-sidebar {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 280px;
    -ms-flex: 0 0 280px;
    flex: 0 0 280px;
    background: white;
    padding: 20px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    height: fit-content;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    align-self: flex-start;
}

.browse-sidebar h2 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    color: #5d624b;
    border-bottom: 2px solid #9aa570;
    padding-bottom: 10px;
}

.browse-sidebar h3 {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.browse-main {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
}

.browse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 0;
}

.browse-header h1 {
    margin: 0;
    padding: 0;
    text-indent: 0;  /* Ensure no text indentation */
    margin-left: 0;  /* Ensure no left margin */
}

/* Horse browse page specific adjustment */
.browse-horses .browse-header {
    margin-top: 7px;  /* Push horse browse header down to align with other browse pages */
}

.browse-actions {
    display: flex;
    gap: 10px;
}

.action-button {
    display: inline-block;
    padding: 8px 16px;
    background: #5d624b;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.action-button:hover {
    background: #4a4d3c;
}

/* ========================================
   MINE TOGGLE - "My X Only" filter toggle
   Used on browse pages (horses, sims, stables)
   ======================================== */

/* Inactive state - light background, inviting click */
.mine-toggle {
    background: #e8e8e8 !important;
    color: #333 !important;
    border: 1px solid #ccc;
}

.mine-toggle:hover {
    background: #ddd !important;
    color: #333 !important;
}

/* Active state - olive green, shows X to remove */
.mine-toggle.active {
    background: #5d624b !important;
    color: white !important;
    border: 1px solid #5d624b;
}

.mine-toggle.active:hover {
    background: #4a4d3c !important;
}

/* X button to remove filter */
.mine-toggle .toggle-remove {
    margin-left: 8px;
    font-weight: bold;
    opacity: 0.8;
}

.mine-toggle .toggle-remove:hover {
    opacity: 1;
}

/* Filter Sections */
.filter-section {
    margin-bottom: 25px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f8f8;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.filter-item:hover {
    background: #e8e8e8;
}

.filter-item.active {
    background: #9aa570;
    color: white;
    border-color: #5d624b;
}

.filter-item .count {
    font-size: 0.85rem;
    color: #666;
}

.filter-item.active .count {
    color: rgba(255, 255, 255, 0.9);
}

/* Filter Input and Button */
.filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.filter-button {
    width: 100%;
    padding: 8px 12px;
    background: #5d624b;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.filter-button:hover {
    background: #4a4d3c;
}

.clear-search-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6c757d;
    text-decoration: none;
}

.clear-search-link:hover {
    color: #5d624b;
    text-decoration: underline;
}

.clear-filters-button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    color: #6c757d;
    text-align: center;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.clear-filters-button:hover {
    background: #f8f9fa;
    color: #495057;
    border-color: #adb5bd;
}

/* Active Filters Display */
.active-filters {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.active-filters strong {
    color: #333;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #5d624b;
    color: white;
    border-radius: 12px;
    font-size: 0.85em;
}

.filter-tag .remove-filter,
.filter-tag .filter-remove {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    line-height: 1;
    font-weight: bold;
    opacity: 0.8;
    transition: opacity 0.2s;
    flex-shrink: 0;
    order: 2;
}

.filter-tag .remove-filter:hover,
.filter-tag .filter-remove:hover {
    opacity: 1;
}

.clear-all-link {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.85rem;
    margin-left: 5px;
    border-bottom: 1px dashed #6c757d;
    transition: color 0.2s, border-color 0.2s;
}

.clear-all-link:hover {
    color: #495057;
    border-bottom-color: #495057;
}

/* Browse Controls */
.browse-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.results-count {
    font-size: 0.95rem;
    color: #666;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-controls label {
    font-size: 0.9rem;
    color: #5d624b;
    font-weight: 500;
}

.sort-controls select {
    padding: 8px 32px 8px 12px;
    border: 2px solid #5d624b;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 150px;
    transition: all 0.2s ease;
}

.sort-controls select:hover {
    border-color: #7a8062;
    background-color: #f8f9fa;
}

.sort-controls select:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15);
}

/* Safari-specific dropdown fixes */
@supports (-webkit-touch-callout: none) {
    .sort-controls select {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
        padding-right: 32px !important;
    }
}

/* Browse Table */
.browse-table {
    width: 100%;
    background: white;
    border-collapse: collapse;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.browse-table thead {
    background: #5d624b;
    color: white;
}

.browse-table th {
    padding: 12px;
    text-align: left;
    font-weight: 500;
}

.browse-table td {
    padding: 12px;
    border-top: 1px solid #ddd;
}

.browse-table tbody tr:hover {
    background: #f8f8f8;
}

/* ========================================
   PAGINATION - GLOBAL STYLES
   Used across all browse pages (horses, sims, stables, members)
   ======================================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px 0;
    padding: 20px;
}

/* Pagination links - outline style for consistency */
.pagination a,
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-width: 40px;
    height: 40px;
    border: 2px solid #5d624b;
    border-radius: 6px;
    background: white;
    color: #5d624b;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination a:hover,
.pagination .page-link:hover {
    background: #5d624b;
    color: white;
}

/* Current page info text */
.pagination .page-current,
.pagination .page-info {
    padding: 8px 16px;
    color: #5d624b;
    font-weight: 600;
    font-size: 0.95em;
}

/* Active/current page number */
.pagination .current {
    background: #5d624b;
    color: white;
    border-color: #5d624b;
}

/* Disabled state */
.pagination .disabled {
    color: #ccc;
    border-color: #ddd;
    cursor: not-allowed;
    pointer-events: none;
}

/* Page numbers container */
.pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination .page-numbers a {
    min-width: 36px;
    padding: 8px 12px;
}

.pagination .page-numbers strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 40px;
    padding: 8px 12px;
    background: #5d624b;
    color: white;
    border-radius: 6px;
    font-weight: 600;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 4px;
    color: #666;
}

/* Results Table - Browse Pages (horses, sims, stables) */
.results-table-wrapper {
    overflow-x: auto;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.results-table th,
.results-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.results-table thead th {
    font-weight: 600;
    white-space: nowrap;
    background-color: #5d624b;
    color: #f4f4f4;
    border-bottom: 2px solid #9aa570;
}

.results-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Clickable row cursor */
.clickable-row {
    cursor: pointer;
}

/* Column-specific widths for horse browse */
.browse-horses .results-table td:nth-child(1) { /* ID */
    white-space: nowrap;
    width: 70px;
}

.browse-horses .results-table td:nth-child(2) { /* Name */
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browse-horses .results-table td:nth-child(3) { /* Career */
    white-space: nowrap;
    width: 110px;
}

.browse-horses .results-table td:nth-child(4) { /* Breed */
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browse-horses .results-table td:nth-child(5), /* Age */
.browse-horses .results-table td:nth-child(6) { /* Gender */
    white-space: nowrap;
    width: 60px;
}

.browse-horses .results-table td:nth-child(7) { /* Owner */
    max-width: 160px;
}

.browse-horses .results-table td:nth-child(8) { /* Discipline */
    white-space: nowrap;
}

/* Compact owner info - secondary details below owner name */
.owner-info-secondary {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

.owner-info-secondary i {
    width: 14px;
    text-align: center;
    margin-right: 2px;
}

/* ========================================
   PROFILE PAGE - QUICK ACTIONS
   ======================================== */

.quick-actions {
    margin: 20px 0;
    padding: 20px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.quick-actions h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #5d624b;
}

.quick-actions .btn {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1rem;
    transition: all 0.2s;
}

.quick-actions .btn-primary {
    background: #5d624b;
    color: white;
}

.quick-actions .btn-primary:hover {
    background: #4a4d3c;
}


/* ========================================
   USER SETTINGS - TABBED INTERFACE
   ======================================== */

.settings-container {
    max-width: 1000px;
    margin: 0 auto;
}

.settings-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #ddd;
    background: white;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.settings-tabs .tab {
    padding: 15px 25px;
    text-decoration: none;
    color: #666;
    background: #f4f4f4;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-size: 1rem;
}

.settings-tabs .tab:hover {
    background: #e8e8e8;
    color: #333;
}

.settings-tabs .tab.active {
    background: white;
    color: #5d624b;
    border-bottom: 3px solid #5d624b;
    font-weight: 500;
}

.settings-tabs .tab .tab-count {
    font-size: 0.85em;
    color: #888;
    font-weight: normal;
}

.settings-tabs .tab.active .tab-count {
    color: #5d624b;
}

/* Profile page horse tabs - align with table inside content area */
#horse-tabs {
    display: flex;
    width: fit-content;
    margin-left: 100px;
    margin-bottom: 0;
    border-bottom: none;
}

.settings-content {
    background: white;
    padding: 30px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: left !important;
}

.settings-content h2 {
    margin-top: 0;
    color: #5d624b;
    border-bottom: 2px solid #9aa570;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.settings-content form {
    max-width: 600px;
}

.settings-content p,
.settings-content label,
.settings-content div {
    text-align: left !important;
}

.settings-content button[type="submit"] {
    background: #5d624b;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.settings-content button[type="submit"]:hover {
    background: #4a4d3c;
}


/* ===========================
   CLUBS SYSTEM
   =========================== */

/* Club Directory (club_list.html) */
.clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.club-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.club-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Club Card Banner (Background Image) */
.club-card-banner {
    width: 100%;
    aspect-ratio: 4 / 1;  /* Maintain 4:1 ratio at ALL screen sizes */
    /* Default gradient if no banner image - EQ brand colors */
    background-image: linear-gradient(135deg, #7a8060 0%, #5d624b 100%);
    background-size: contain;  /* Show full banner without cropping */
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* Club Card Logo (Overlays Banner) */
.club-card-logo {
    position: absolute;
    bottom: -50px; /* Half the logo height to overlap into content area */
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #5d624b;
}

/* Placeholder icons for logos without images (based on club type) */
.club-card-logo.club-type-discipline::before {
    content: "\f559"; /* Font Awesome award/rosette icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
}

.club-card-logo.club-type-breed::before {
    content: "\f6f0"; /* Font Awesome horse icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
}

.club-card-logo.club-type-general::before {
    content: "\f0c0"; /* Font Awesome users icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
}

/* Logo with actual image (overlays placeholder icon) */
.club-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 1;
}

.club-card-content {
    padding: 60px 20px 20px 20px; /* Extra top padding for overlaying logo */
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.club-card-content h3 {
    margin: 0 0 12px 0;
    font-size: 1.4em;
    color: #333;
    text-align: center;
}

.club-card-content h3 a {
    color: #5d624b;
    text-decoration: none;
    transition: color 0.2s;
}

.club-card-content h3 a:hover {
    color: #4a4e3a;
}

.club-acronym {
    color: #888;
    font-size: 0.85em;
    font-weight: normal;
}

.club-tagline {
    font-style: italic;
    color: #666;
    margin: 0;
    font-size: 0.95em;
    text-align: center;
}

.club-type-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.club-type-badges .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}

.club-card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.club-card-meta .meta-item {
    font-size: 0.9em;
    color: #666;
}

.club-card-meta .meta-item strong {
    color: #333;
}

.club-description {
    color: #666;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.club-card-actions {
    margin-top: auto;
    padding-top: 12px;
}

/* Club Detail Page (club_detail.html) */
.club-header {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
}

.club-banner {
    width: 100%;
    aspect-ratio: 4 / 1;  /* Maintain 4:1 ratio at ALL screen sizes */
    overflow: hidden;
    background: linear-gradient(135deg, #5d624b 0%, #7a8062 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.club-banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Show full image without cropping */
    object-position: center;
}

.club-header-content {
    padding: 25px;
}

.club-title-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.club-logo {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: contain;  /* Don't crop square logos */
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: white;  /* White background for contain mode */
}

.club-title-section h1 {
    margin: 0;
    font-size: 2em;
    color: #333;
}

.club-title-section .club-tagline {
    font-style: italic;
    color: #666;
    margin: 8px 0 0 0;
}

.club-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.club-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.club-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
}

.tab-link {
    flex: 1;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    transition: all 0.2s;
    border-right: 1px solid #eee;
}

.tab-link:last-child {
    border-right: none;
}

.tab-link:hover {
    background: #f8f9fa;
    color: #333;
}

.tab-link.active {
    background: #5d624b;
    color: white;
}

/* ========================================
   TABBED FORMS (Horses, Sims, Stables)
   ======================================== */

/* Tab Navigation - Compact single-row layout */
.horse-form-tabs,
.sim-form-tabs,
.stable-form-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    margin-left: 0;  /* No negative margins - stay within container */
    margin-right: 0;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 2px solid #ddd;
    background: white;
    flex-wrap: nowrap;  /* Keep all tabs in one row */
    overflow-x: auto;  /* Enable horizontal scrolling if needed */
    overflow-y: hidden;
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: 100%;  /* Prevent overflow */
    scrollbar-width: thin;  /* Firefox: thin scrollbar */
    scrollbar-color: #5d624b #f0f0f0;  /* Firefox: scrollbar colors */
}

/* Webkit scrollbar styling (Chrome, Safari, Edge) */
.horse-form-tabs::-webkit-scrollbar,
.sim-form-tabs::-webkit-scrollbar,
.stable-form-tabs::-webkit-scrollbar {
    height: 6px;
}

.horse-form-tabs::-webkit-scrollbar-track,
.sim-form-tabs::-webkit-scrollbar-track,
.stable-form-tabs::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.horse-form-tabs::-webkit-scrollbar-thumb,
.sim-form-tabs::-webkit-scrollbar-thumb,
.stable-form-tabs::-webkit-scrollbar-thumb {
    background: #5d624b;
    border-radius: 3px;
}

.horse-form-tabs::-webkit-scrollbar-thumb:hover,
.sim-form-tabs::-webkit-scrollbar-thumb:hover,
.stable-form-tabs::-webkit-scrollbar-thumb:hover {
    background: #4a4d3c;
}

/* Tab Buttons */
.horse-form-tabs .tab-btn,
.sim-form-tabs .tab-btn,
.stable-form-tabs .tab-btn {
    padding: 12px 16px;  /* Compact padding */
    text-decoration: none;
    color: #666;
    background: transparent !important;
    border: none;
    border-bottom: 4px solid transparent;  /* Reserve space for active border */
    cursor: pointer;
    font-size: 0.9rem;  /* Smaller font for compact tabs */
    transition: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    white-space: nowrap;
    margin-bottom: -2px;  /* Overlap container border */
    flex-shrink: 0;  /* Prevent tabs from shrinking (maintain readability) */
}

.horse-form-tabs .tab-btn:hover,
.sim-form-tabs .tab-btn:hover,
.stable-form-tabs .tab-btn:hover {
    background: #e8e8e8 !important;
    color: #333;
}

.horse-form-tabs .tab-btn.active,
.sim-form-tabs .tab-btn.active,
.stable-form-tabs .tab-btn.active {
    background: white;
    color: #5d624b;
    font-weight: 600;  /* Make active tab text bolder */
    border-bottom: 4px solid #5d624b;  /* Thicker underline for better visibility */
}

.horse-form-tabs .tab-btn.has-error,
.sim-form-tabs .tab-btn.has-error,
.stable-form-tabs .tab-btn.has-error {
    color: #d9534f;
}

.horse-form-tabs .tab-btn.has-error::after,
.sim-form-tabs .tab-btn.has-error::after,
.stable-form-tabs .tab-btn.has-error::after {
    content: " !";
    color: #d9534f;
    font-weight: bold;
}

/* Mobile responsive tabs */
@media (max-width: 768px) {
    .horse-form-tabs .tab-btn,
    .sim-form-tabs .tab-btn,
    .stable-form-tabs .tab-btn {
        flex: 1 1 auto;  /* Tabs expand to fill row on mobile */
        min-width: 120px;
        font-size: 0.9rem;  /* Slightly smaller on mobile */
        padding: 12px 15px;  /* Reduced padding on mobile */
    }
}

/* Tab Content */
.tab-content {
    display: none;  /* Hidden by default */
    background: white;
    border: none;  /* Remove border - fieldsets inside have their own borders */
    border-radius: 0;
    padding: 20px 0;  /* Vertical spacing only */
}

.tab-content.active {
    display: block;  /* Show active tab content */
}

.club-overview h2,
.club-registry h2,
.club-leaderboard h2,
.club-calendar h2,
.club-staff h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.8em;
}

/* Club Statistics Dashboard */
.statistics-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 3rem 0;
}

.stat-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.2s;
}

.stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Recent Registrations */
.newest-registrations {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Leaderboard Filters */
.leaderboard-filters {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.filter-group label i {
    margin-right: 0.5rem;
    color: #6c757d;
}

.filter-group .form-control {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95rem;
}

.filter-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.recent-reg-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #007bff;
}

.recent-reg-horse {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #333;
}

.recent-reg-horse i {
    color: #007bff;
    font-size: 1.1rem;
}

.recent-reg-horse a {
    color: #007bff;
    text-decoration: none;
}

.recent-reg-horse a:hover {
    text-decoration: underline;
}

.recent-reg-details {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    color: #666;
    font-size: 0.9rem;
}

.recent-reg-breed {
    font-weight: 500;
    color: #555;
}

.recent-reg-owner {
    color: #777;
}

.recent-reg-date {
    color: #999;
    font-size: 0.85rem;
}

/* Event Card Styles for Calendar Tab */
.events-section {
    margin-bottom: 2rem;
}

.events-section h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #666;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.event-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}

.event-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.upcoming-event {
    border-left: 4px solid #007bff;
}

.past-event {
    opacity: 0.7;
    border-left: 4px solid #999;
}

.cancelled-event {
    border-left: 4px solid #dc3545;
    background: #f8f9fa;
}

.event-header {
    display: flex;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.event-icon {
    font-size: 2rem;
    color: #007bff;
    padding-top: 0.25rem;
}

.event-main {
    flex: 1;
}

.event-main h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #333;
}

.event-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge-show {
    background: #e3f2fd;
    color: #1565c0;
}

.badge-clinic {
    background: #f3e5f5;
    color: #6a1b9a;
}

.badge-challenge {
    background: #fff3e0;
    color: #e65100;
}

.badge-fun {
    background: #fce4ec;
    color: #c2185b;
}

.badge-meeting {
    background: #f0f1eb;
    color: #5d624b;
}

.badge-other {
    background: #f5f5f5;
    color: #616161;
}

.badge-cancelled {
    background: #ffebee;
    color: #c62828;
}

.event-actions {
    display: flex;
    gap: 0.5rem;
}

.event-details {
    margin-bottom: 1rem;
}

.event-details > div {
    margin-bottom: 0.75rem;
    color: #555;
}

.event-details i {
    margin-right: 0.5rem;
    color: #999;
}

.event-date {
    font-size: 1rem;
}

.event-location, .event-link {
    font-size: 0.95rem;
}

.event-description {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    color: #666;
    line-height: 1.6;
}

.past-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #eee;
}

.club-section {
    margin-bottom: 30px;
}

.club-section h3 {
    color: #5d624b;
    font-size: 1.3em;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.club-description,
.club-handbook {
    line-height: 1.8;
    color: #555;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.info-item {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #5d624b;
}

.eligibility-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.eligibility-tag {
    padding: 12px 15px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.staff-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.staff-member {
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.staff-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.staff-role {
    color: #5d624b;
    font-weight: 500;
    padding: 4px 8px;
    background: white;
    border-radius: 4px;
    border: 1px solid #5d624b;
}

.staff-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.permission-badge {
    padding: 4px 10px;
    background: #5d624b;
    color: white;
    border-radius: 4px;
    font-size: 0.85em;
}

.staff-meta {
    font-size: 0.9em;
    color: #888;
}

/* ========================================
   Staff Cards - Reusable Card Components
   Used by: Club Staff tab, Meet the Team page
   ======================================== */

/* Staff Page Container - for Meet the Team page */
.staff-page-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    padding: 0 20px;
}

.staff-page-container h1,
.staff-page-container p {
    text-align: left;
}

.staff-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 750px;
}

.staff-card {
    display: flex;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    gap: 20px;
    transition: box-shadow 0.2s ease;
    overflow: visible;
}

.staff-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.staff-card-image {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

/* Large image variant for Meet the Team page */
.staff-card-image-lg {
    width: 140px;
    height: 140px;
}

.staff-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
    color: #999;
    font-size: 2.5em;
}

.staff-card-image-lg .staff-card-placeholder {
    font-size: 3.5em;
}

.staff-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
}

.staff-card-name {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.5;
    overflow: visible;
}

.staff-card-name a {
    color: #333;
    text-decoration: none;
}

.staff-card-name a:hover {
    color: #5d624b;
    text-decoration: underline;
}

/* Staff rosette - matches profile page styling */
.staff-rosette {
    color: #5d624b;
    font-size: 0.8em;
    margin-left: 6px;
    padding: 3px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    cursor: help;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.15em;
}

.staff-rosette:hover {
    opacity: 1;
}

.staff-card-role {
    margin: 0;
    color: #888;
    font-size: 0.95em;
}

/* Since date line */
.staff-card-since {
    margin: 0;
    color: #888;
    font-size: 0.85em;
}

/* Staff card badges - for club permission badges */
.staff-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.staff-card-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f0f1eb;
    color: #5d624b;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.staff-card-badge.badge-staff {
    background: #5d624b;
    color: white;
}

.staff-card-meta {
    margin-top: auto;
    padding-top: 10px;
}

.staff-card-meta p {
    margin: 0;
    color: #888;
    font-size: 0.85em;
}

.staff-card-meta p + p {
    margin-top: 4px;
}

.staff-card-discord {
    color: #5865F2;
}

.staff-card-discord em {
    font-style: normal;
    font-weight: 500;
}

.staff-card-bio {
    margin: 5px 0 0;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}

.staff-card-actions {
    margin-top: 10px;
}

/* Compact card variant for Meet the Team page */
.staff-card-compact {
    padding: 18px;
    gap: 18px;
}

.staff-card-compact .staff-card-info {
    gap: 4px;
}

.staff-card-compact .staff-card-meta {
    padding-top: 10px;
    margin-top: 6px;
}

/* Field labels for staff cards */
.staff-card-label {
    color: #666;
    font-weight: 500;
}

/* Timezone line */
.staff-card-timezone {
    color: #888;
}

/* Staff Cards - Responsive */
@media (max-width: 900px) {
    .staff-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .staff-card {
        flex-direction: column;
        text-align: center;
    }

    .staff-card-image {
        margin: 0 auto;
    }

    .staff-card-image-lg {
        width: 120px;
        height: 120px;
    }

    .staff-card-badges {
        justify-content: center;
    }
}

.placeholder-text {
    text-align: center;
    color: #999;
    padding: 60px 20px;
    font-style: italic;
}

/* Registry Tab Styles - Phase 6C-5 */
.registry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e5e5e5;
}

.registry-count {
    color: #666;
    font-size: 0.95em;
    margin: 0;
}

.registry-search {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.registry-search .search-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95em;
}

.registry-search .search-input:focus {
    outline: none;
    border-color: #8a9b68;
    box-shadow: 0 0 0 3px rgba(138, 155, 104, 0.1);
}

.registry-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.registry-sort label {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.sort-link {
    padding: 6px 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.2s;
}

.sort-link:hover {
    background: #5d624b;
    color: white;
    border-color: #5d624b;
}

.sort-link.active {
    background: #8a9b68;
    color: white;
    border-color: #8a9b68;
    font-weight: 600;
}

.registry-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.registry-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.registry-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e5e5;
}

.registry-table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.registry-table tbody tr {
    border-bottom: 1px solid #e5e5e5;
    transition: background 0.2s;
}

.registry-table tbody tr:hover {
    background: #fafafa;
}

.registry-table tbody tr:last-child {
    border-bottom: none;
}

.registry-table td {
    padding: 12px;
    color: #555;
}

.registry-table .horse-link {
    color: #5d624b;
    text-decoration: none;
    font-weight: 600;
}

.registry-table .horse-link:hover {
    color: #8a9b68;
    text-decoration: underline;
}

.registry-table .owner-link {
    color: #666;
    text-decoration: none;
}

.registry-table .owner-link:hover {
    color: #8a9b68;
    text-decoration: underline;
}

.registry-table .reg-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #333;
}

.registry-table .disciplines {
    color: #666;
    font-size: 0.9em;
}

.registry-table .text-muted {
    color: #ccc;
}

.registry-empty {
    text-align: center;
    padding: 80px 20px;
    color: #999;
}

.registry-empty h3 {
    color: #666;
    margin: 15px 0 10px 0;
}

.registry-empty p {
    margin: 5px 0;
    font-size: 0.95em;
}

.registry-empty .help-text {
    color: #888;
    font-style: italic;
    margin-top: 10px;
}

/* ============================================
   LEADERBOARD TABLE STYLES
   Matches registry table styling for consistency
   ============================================ */

/* Leaderboard Table Wrapper - matches registry */
.leaderboard-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 20px;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: fixed;
}

.leaderboard-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e5e5;
}

.leaderboard-table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leaderboard-table tbody tr {
    border-bottom: 1px solid #e5e5e5;
    transition: background 0.2s;
}

.leaderboard-table tbody tr:hover {
    background: #fafafa;
}

.leaderboard-table tbody tr:last-child {
    border-bottom: none;
}

.leaderboard-table td {
    padding: 12px;
    color: #555;
}

/* Top 3 Medal Icons */
.rank-medal {
    font-size: 1.1em;
    margin-right: 5px;
}

.rank-medal.gold {
    color: #FFD700;
}

.rank-medal.silver {
    color: #C0C0C0;
}

.rank-medal.bronze {
    color: #CD7F32;
}

/* Leaderboard Links */
.leaderboard-table a {
    color: #5d624b;
    text-decoration: none;
    font-weight: 600;
}

.leaderboard-table a:hover {
    color: #8a9b68;
    text-decoration: underline;
}

.leaderboard-table .owner-link {
    color: #666;
    font-weight: 400;
}

.leaderboard-table .owner-link:hover {
    color: #8a9b68;
}

.leaderboard-table .reg-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #333;
}

.leaderboard-table .points-col {
    font-weight: 600;
    color: #5d624b;
}

/* Leaderboard Empty State */
.leaderboard-empty {
    text-align: center;
    padding: 80px 20px;
    color: #999;
}

.leaderboard-empty h3 {
    color: #666;
    margin: 15px 0 10px 0;
}

.leaderboard-empty p {
    margin: 5px 0;
    font-size: 0.95em;
}

/* Leaderboard Pagination Buttons */
.leaderboard-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
}

/* Leaderboard Tab Styles - Phase 6C-9B */
/* Note: .club-leaderboard layout now defined in club_detail.html inline styles */

.club-leaderboard h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: #5d624b;
}

.club-leaderboard .help-text {
    color: #666;
    margin-bottom: 40px;
    font-size: 0.95em;
}

.leaderboard-section {
    margin-bottom: 50px;
}

.leaderboard-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5d624b;
    font-size: 1.4em;
    margin-bottom: 8px;
}

.leaderboard-section .section-description {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 20px;
    font-style: italic;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.leaderboard-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e5e5;
}

.leaderboard-table th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    color: #333;
}

.leaderboard-table th.rank-col {
    width: 80px;
}

.leaderboard-table th.points-col {
    width: 100px;
}

.leaderboard-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.leaderboard-table tbody tr:hover {
    background: #fafafa;
}

.leaderboard-table tbody tr:last-child {
    border-bottom: none;
}

/* Top 3 row highlighting - simple subtle backgrounds */
.leaderboard-table tbody tr.top-1 {
    background: #fffbf0;
}

.leaderboard-table tbody tr.top-2 {
    background: #f8f8f8;
}

.leaderboard-table tbody tr.top-3 {
    background: #fff5e6;
}

.leaderboard-table tbody tr.top-1:hover {
    background: #fff8e1;
}

.leaderboard-table tbody tr.top-2:hover {
    background: #f0f0f0;
}

.leaderboard-table tbody tr.top-3:hover {
    background: #ffefd5;
}

.leaderboard-table td {
    padding: 15px 12px;
    color: #333;
}

.leaderboard-table tbody .rank-col {
    font-weight: 700;
    color: #333;
    font-size: 1.05em;
}

.leaderboard-table tbody .reg-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #333;
}

.leaderboard-table tbody .points-col {
    font-size: 1.1em;
    font-weight: 700;
    color: #333;
}

.leaderboard-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    background: #fafafa;
    border-radius: 8px;
    border: 2px dashed #ddd;
}

.leaderboard-empty p {
    margin: 8px 0;
    font-size: 0.95em;
}

.leaderboard-empty .help-text {
    color: #888;
    font-style: italic;
    margin-top: 10px;
}

/* Back Link - subtle gray, ADA compliant (4.5:1 contrast) */
.back-link,
.back-link:visited {
    display: inline-block;
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.back-link:hover {
    color: #444;
    text-decoration: underline;
}

.back-link i {
    margin-right: 5px;
}

/* Horse Registration Form Styles */
.club-info-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

.club-info-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.club-logo-small {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
}

.club-info-header h3 {
    color: #5d624b;
    margin: 0 0 5px 0;
    font-size: 1.5em;
}

.club-tagline {
    color: #888;
    margin: 0;
    font-style: italic;
}

.club-info-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.club-info-details p {
    margin: 0;
    color: #666;
}

.club-info-details strong {
    color: #333;
    font-weight: 600;
}

.info-notice {
    background: #fff4e6;
    border-left: 4px solid #ff9800;
    padding: 12px 15px;
    margin-top: 15px;
    border-radius: 4px;
}

.info-notice strong {
    color: #e65100;
}

.help-section {
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
}

.help-section h3 {
    color: #5d624b;
    margin: 0 0 15px 0;
    font-size: 1.2em;
}

.help-section ul {
    margin: 0;
    padding-left: 25px;
}

.help-section li {
    margin-bottom: 8px;
    color: #666;
    line-height: 1.6;
}

/* Registration Queue Styles */
.queue-actions {
    margin-bottom: 25px;
}

.registration-queue-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.registration-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 25px;
    transition: box-shadow 0.2s;
}

.registration-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.registration-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;
}

.registration-horse-info h3 {
    margin: 0 0 8px 0;
    color: #5d624b;
    font-size: 1.3em;
}

.registration-horse-info h3 a {
    color: #5d624b;
    text-decoration: none;
}

.registration-horse-info h3 a:hover {
    color: #8a9b68;
}

.registration-meta {
    margin: 0;
    color: #666;
    font-size: 0.95em;
}

.registration-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.registration-detail-item {
    color: #666;
}

.registration-detail-item strong {
    color: #333;
    display: block;
    margin-bottom: 3px;
}

.registration-detail-item a {
    color: #8a9b68;
    text-decoration: none;
}

.registration-detail-item a:hover {
    text-decoration: underline;
}

.registration-actions {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state h3 {
    color: #666;
    margin: 0 0 10px 0;
}

.empty-state p {
    margin: 0;
    font-size: 0.95em;
}

/* Calendar Redirect Box */
.calendar-redirect-box {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border: 2px dashed #ddd;
    border-radius: 8px;
    margin-top: 2rem;
}

.calendar-redirect-box h3 {
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
    color: #333;
}

.calendar-redirect-box p {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .browse-container {
        flex-direction: column;
    }

    .browse-sidebar {
        flex: 1;
        position: static;
    }

    .browse-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .browse-controls {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .settings-tabs {
        flex-wrap: wrap;
    }

    .settings-tabs .tab {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .quick-actions .btn {
        display: block;
        margin-right: 0;
        text-align: center;
    }

    /* Clubs responsive */
    .clubs-grid {
        grid-template-columns: 1fr;
    }

    .club-title-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .club-logo {
        width: 80px;
        height: 80px;
    }

    .tab-navigation {
        flex-wrap: wrap;
    }

    .tab-link {
        flex: 1 1 120px;
        font-size: 0.9em;
        padding: 12px 10px;
    }
}

/* ============================================================================
   CLUB CREATE/EDIT FORM - Professional Styling
   ============================================================================ */

.club-form-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.club-form-container .page-header {
    text-align: center;
    margin-bottom: 30px;
}

.club-form-container .page-header h1 {
    color: #5d624b;
    margin-bottom: 10px;
}

.club-form-container .page-header .text-muted {
    color: #666;
    font-size: 1.1em;
}

/* Tab Navigation - Matching settings tabs */
.club-form-container .tab-navigation {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #ddd;
    background: white;
    border-radius: 4px 4px 0 0;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.club-form-container .tab-link {
    padding: 15px 20px;
    text-decoration: none;
    color: #666;
    background: #f8f8f8;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-size: 0.95rem;
    white-space: nowrap;
}

.club-form-container .tab-link:hover {
    background: #e8e8e8;
    color: #333;
}

.club-form-container .tab-link.active {
    background: white;
    color: #5d624b;
    border-bottom-color: #5d624b;
    font-weight: 500;
}

/* Form Sections */
.club-form-container .form-section {
    background: white;
    padding: 30px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 0;
}

.club-form-container .form-section h2 {
    color: #5d624b;
    border-bottom: 2px solid #9aa570;
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.4em;
}

.club-form-container .form-section .section-description {
    color: #666;
    margin-bottom: 25px;
    font-size: 0.95em;
}

.club-form-container .form-section h3 {
    color: #5d624b;
    font-size: 1.1em;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* Form Groups */
.club-form-container .form-group {
    margin-bottom: 20px;
}

.club-form-container .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
    font-size: 0.95em;
}

/* Text Inputs & Textareas */
.club-form-container input[type="text"],
.club-form-container input[type="url"],
.club-form-container input[type="email"],
.club-form-container input[type="number"],
.club-form-container textarea,
.club-form-container select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.club-form-container input[type="text"]:focus,
.club-form-container input[type="url"]:focus,
.club-form-container input[type="email"]:focus,
.club-form-container input[type="number"]:focus,
.club-form-container textarea:focus,
.club-form-container select:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15);
}

.club-form-container textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select Dropdowns */
.club-form-container select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

/* Checkboxes */
.club-form-container .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
    transition: background 0.2s;
}

.club-form-container .form-check:hover {
    background: #f0f4e8;
}

.club-form-container .form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #5d624b;
    flex-shrink: 0;
}

.club-form-container .form-check-label {
    font-weight: 500;
    color: #444;
    cursor: pointer;
    line-height: 1.4;
}

/* Help Text */
.club-form-container .form-text,
.club-form-container small.form-text {
    display: block;
    margin-top: 6px;
    color: #777;
    font-size: 0.88em;
    line-height: 1.4;
}

/* Error Messages */
.club-form-container .error-message {
    color: #d9534f;
    font-size: 0.9em;
    margin-top: 6px;
    padding: 8px 12px;
    background: #fdf2f2;
    border-radius: 4px;
    border-left: 3px solid #d9534f;
}

/* Info Box */
.club-form-container .info-box {
    background: #e7f3ff;
    border-left: 4px solid #007bff;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 25px;
}

.club-form-container .info-box h3 {
    margin-top: 0;
    color: #0056b3;
    border-bottom: none;
    padding-bottom: 0;
}

.club-form-container .info-box ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.club-form-container .info-box li {
    margin-bottom: 8px;
    color: #333;
}

/* Form Actions - use global button styles, only add margin */
.club-form-container .form-actions {
    margin-top: 20px;
    margin-bottom: 40px;
}

/* Responsive */
@media (max-width: 768px) {
    .club-form-container {
        padding: 0 15px;
    }

    .club-form-container .form-section {
        padding: 20px;
    }

    .club-form-container .tab-navigation {
        flex-wrap: wrap;
    }

    .club-form-container .tab-link {
        flex: 1 1 auto;
        min-width: 80px;
        text-align: center;
        font-size: 0.85em;
        padding: 12px 10px;
    }
}

/* ============================================================================
   CLUB TITLE MANAGEMENT - Visual Icon Picker
   ============================================================================ */

.icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.icon-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}

.icon-option:hover {
    border-color: #5d624b;
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.icon-option input[type="radio"] {
    display: none;
}

.icon-option input[type="radio"]:checked + .icon-preview {
    color: #5d624b;
}

.icon-option:has(input[type="radio"]:checked) {
    border-color: #5d624b;
    background-color: #f0f4e8;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.1);
}

.icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-bottom: 0.5rem;
    color: #666;
    transition: color 0.2s ease;
}

.icon-label {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    font-weight: 500;
}

.icon-option:has(input[type="radio"]:checked) .icon-label {
    color: #5d624b;
    font-weight: 600;
}

/* Drag and drop styling for title reordering */
.title-list-draggable {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0; /* Add bottom margin so footer doesn't overlap */
    width: 100%; /* Ensure full width */
    display: block; /* Make sure it's a block element */
}

.title-item-draggable {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    cursor: move;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding and border in width */
}

.title-item-draggable:hover {
    border-color: #5d624b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-item-draggable.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.drag-handle {
    font-size: 1.2rem;
    color: #999;
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.title-item-content {
    flex: 1;
}

.title-item-actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================================================
   Featured Horses Showcase - Phase 6D
   ============================================================================ */

.featured-horses-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.featured-horses-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.featured-horses-section h2 {
    margin: 0;
    color: #2c3e50;
}

.featured-horses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    max-width: 900px;  /* Prevents cards from getting too wide */
}

.featured-horse-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 500px;  /* Maximum width for individual cards */
}

.featured-horse-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.featured-horse-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.featured-horse-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Fills space nicely for horizontal images */
    object-position: center;  /* Centers the crop (adjustable if needed) */
}

.featured-horse-image .placeholder-image {
    font-size: 80px;
    color: #adb5bd;
}

.featured-horse-info {
    padding: 1.5rem;
}

.featured-horse-info .custom-title {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.featured-horse-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #2c3e50;
}

.featured-horse-info h3 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.2s;
}

.featured-horse-info h3 a:hover {
    color: #5d624b;
}

.featured-horse-info .owner-name {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.featured-horse-info .owner-name a {
    color: #5d624b;
    text-decoration: none;
}

.featured-horse-info .owner-name a:hover {
    text-decoration: underline;
}

.featured-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

.featured-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.featured-stats .stat-item i {
    color: #5d624b;
    width: 20px;
    text-align: center;
}

/* Featured Horses Management Form */
.featured-horses-formset {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.featured-horse-form-group {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.featured-horse-form-group h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #2c3e50;
    border-bottom: 2px solid #5d624b;
    padding-bottom: 0.5rem;
}

.featured-horse-form-group .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.featured-horse-form-group .checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.featured-horse-form-group .checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.featured-horse-form-group .delete-checkbox {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.help-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #e7f3ff;
    border-radius: 8px;
    border-left: 4px solid #0066cc;
}

.help-section h3 {
    margin-top: 0;
    color: #2c3e50;
}

.display-format-examples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.format-example {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.format-example h4 {
    margin-top: 0;
    color: #5d624b;
}

.format-example ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.format-example li {
    color: #495057;
    margin-bottom: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .featured-horses-grid {
        grid-template-columns: 1fr;
    }

    .featured-stats {
        grid-template-columns: 1fr;
    }

    .featured-horse-form-group .form-row {
        grid-template-columns: 1fr;
    }

    .display-format-examples {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   PEDIGREE TREE DISPLAY - Wireframe-inspired minimal design
   ======================================== */
/* Clean, line-based pedigree display with NO boxes.
   Features: connecting lines, center-aligned, italic for external horses.
   Based on wireframe design - text above/below lines, not in boxes.
*/

/* PEDIGREE SECTION: Wrapper for header + tree (centers everything) */
.pedigree-section {
    max-width: 900px;
    margin: 30px auto;  /* Centers the entire pedigree section */
    text-align: center;  /* Centers the h2 header */
}

.pedigree-section h2 {
    margin-bottom: 20px;
}

/* CONTAINER: Main pedigree tree wrapper - ABSOLUTE POSITIONING */
.pedigree-tree {
    position: relative;  /* Positioning context for absolute children */
    width: 900px;
    height: 450px;  /* Full SVG height */
    margin: 0;

    /* SVG connecting lines background - NO SCALING */
    background-image: url('/static/images/graphics/pedigree-lines.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 900px 450px;
}

/* HORSE ENTRIES: Base styling for all horses */
.pedigree-horse {
    position: absolute;  /* Position each horse individually */
    font-size: 0.85em;
    text-align: left;
    padding: 3px 4px;
    font-weight: normal;
    line-height: 1.2;

    /* DEBUG BACKGROUNDS - Commented out to see clean pedigree */
    /* background: rgba(255, 0, 0, 0.1); */
    /* border: 1px solid red; */
}

/* === PARENTS (Generation 2) === */
/* Sire (top parent) */
.pedigree-sire {
    top: 200px;
    left: 40px;
    /* background: rgba(0, 255, 0, 0.2); */  /* Green */
    /* border-color: green; */
}

/* Dam (bottom parent) */
.pedigree-dam {
    top: 228px;
    left: 40px;
    /* background: rgba(0, 255, 0, 0.2); */  /* Green */
    /* border-color: green; */
}

/* === GRANDPARENTS (Generation 3) === */
/* Paternal Grandsire */
.pedigree-paternal-grandsire {
    top: 124px;
    left: 315px;
    /* background: rgba(0, 0, 255, 0.2); */  /* Blue */
    /* border-color: blue; */
}

/* Paternal Granddam */
.pedigree-paternal-granddam {
    top: 152px;
    left: 315px;
    /* background: rgba(0, 0, 255, 0.2); */  /* Blue */
    /* border-color: blue; */
}

/* Maternal Grandsire */
.pedigree-maternal-grandsire {
    top: 277px;
    left: 315px;
    /* background: rgba(0, 0, 255, 0.2); */  /* Blue */
    /* border-color: blue; */
}

/* Maternal Granddam */
.pedigree-maternal-granddam {
    top: 305px;
    left: 315px;
    /* background: rgba(0, 0, 255, 0.2); */  /* Blue */
    /* border-color: blue; */
}

/* === GREAT-GRANDPARENTS (Generation 4) === */
/* Paternal Grandsire's Sire */
.pedigree-gg1 {
    top: 93px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* Paternal Grandsire's Dam */
.pedigree-gg2 {
    top: 121px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* Paternal Granddam's Sire */
.pedigree-gg3 {
    top: 157px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* Paternal Granddam's Dam */
.pedigree-gg4 {
    top: 185px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* Maternal Grandsire's Sire */
.pedigree-gg5 {
    top: 245px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* Maternal Grandsire's Dam */
.pedigree-gg6 {
    top: 273px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* Maternal Granddam's Sire */
.pedigree-gg7 {
    top: 310px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* Maternal Granddam's Dam */
.pedigree-gg8 {
    top: 338px;
    left: 620px;
    /* background: rgba(255, 255, 0, 0.2); */  /* Yellow */
    /* border-color: orange; */
}

/* LINKS: Clickable registered horses */
.pedigree-horse a {
    color: #5d624b;
    text-decoration: none;
    font-weight: 500;  /* Slightly bolder for distinction */
    display: inline;  /* Inline so ID can appear on same line */
}

.pedigree-horse a:hover {
    color: #7a7f68;
    text-decoration: underline;
}

/* EXTERNAL HORSES: Non-linked horses in italics (wireframe style) */
.pedigree-horse:not(:has(a)) {
    font-style: italic;
    color: #666;
}

/* HORSE ID NUMBERS: Small ID display to the right of name */
.pedigree-id {
    font-size: 0.65em;
    color: #999;
    font-weight: normal;
    display: inline;  /* Inline so it appears on same line as name */
    margin-left: 4px;  /* Small space after the horse name */
}

/* BREED COMPOSITION DISPLAY */
.breed-composition {
    margin: 20px auto;  /* Center aligned like pedigree */
    max-width: 900px;
    padding: 15px;
    background: #f9f9f9;
    border-left: 4px solid #5d624b;
    border-radius: 4px;
}

.breed-composition h3 {
    margin-top: 0;
    color: #5d624b;
    font-size: 1.1em;
}

.breed-composition p {
    margin: 5px 0 0 0;
    font-size: 1em;
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE: Mobile adjustments
   ======================================== */
@media (max-width: 700px) {
    /* Stack vertically on mobile */
    .pedigree-tree {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px 10px;
        max-width: 100%;
    }

    .pedigree-horse {
        text-align: left;
        padding-left: 10px;
        font-size: 0.85em;
    }
}

/* ========================================
   CUSTOMIZATION GUIDE
   ======================================== */
/*
   TO ADJUST CONNECTING LINES:
   - Line color: Change background in ::before and ::after
   - Line thickness: Adjust height (horizontal) or width (vertical)
   - Line position: Modify top/left/right values
   - Gap between columns: Change gap in .pedigree-tree

   TO CHANGE FONTS:
   - Overall weight: .pedigree-horse { font-weight: ... }
   - Link weight: .pedigree-horse a { font-weight: ... }
   - External horse style: .pedigree-horse:not(:has(a)) { font-style: italic; }
   - Size: .pedigree-gen-1, .pedigree-horse { font-size: ... }

   TO CHANGE LAYOUT:
   - Column widths: grid-template-columns in .pedigree-tree
   - Centering: max-width and margin: auto
   - Mobile: Modify @media queries
*/

/* ========================================
   PEDIGREE FORM TREE (Horse Create/Edit)
   ======================================== */

/* FORM TREE CONTAINER */
.pedigree-form-tree {
    display: grid;
    grid-template-columns: 200px 250px 220px 220px;  /* 4 columns: Horse, Parents, Grandparents, Great-Grandparents */
    gap: 15px;
    margin: 20px 0;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow-x: auto;
}

/* FORM COLUMNS */
.pedigree-form-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* COLUMN LABELS (This Horse, Parents, Grandparents) */
.pedigree-form-label {
    font-weight: bold;
    font-size: 1.05em;
    color: #5d624b;
    margin-bottom: 5px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 2px solid #5d624b;
}

/* FORM INPUT BOXES */
.pedigree-form-box {
    padding: 12px;
    background: white;
    border: 2px solid #5d624b;
    border-radius: 4px;
    min-height: 80px;
}

.pedigree-form-box-small {
    padding: 8px;
    min-height: 60px;
    font-size: 0.9em;
}

/* FORM INPUTS */
.pedigree-form-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}

.pedigree-form-input:focus {
    outline: none;
    border-color: #5b9bd5;
    box-shadow: 0 0 4px rgba(91, 155, 213, 0.3);
}

/* CONDITIONAL SECTIONS (breed selectors) */
.pedigree-form-conditional {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
}

.pedigree-form-conditional select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.85em;
}

/* SELECT2 PEDIGREE FIELDS */
.pedigree-select2 .select2-container {
    width: 100% !important;
}

.pedigree-select2 .select2-container--default .select2-selection--single {
    height: 32px;
    padding: 2px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.85em;
    background-color: #fff;
}

.pedigree-select2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    padding-left: 4px;
    color: #333;
}

.pedigree-select2 .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

.pedigree-select2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
}

.pedigree-select2 .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #5d624b;
    box-shadow: 0 0 3px rgba(93, 98, 75, 0.3);
}

/* Great-grandparent fields - even smaller */
.pedigree-select2-small .select2-container--default .select2-selection--single {
    height: 28px;
    padding: 1px 4px;
    font-size: 0.75em;
}

.pedigree-select2-small .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
}

.pedigree-select2-small .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1100px) {
    .pedigree-form-tree {
        grid-template-columns: 180px 220px 200px 200px;
        gap: 12px;
    }
}

@media (max-width: 700px) {
    .pedigree-form-tree {
        grid-template-columns: 1fr;  /* Stack vertically on mobile */
        gap: 20px;
    }

    .pedigree-form-label {
        text-align: left;
    }
}

/* ========================================
   STABLE LEVEL BADGES
   ======================================== */
/* Level badge styling for browse pages and stable details */

.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}

/* Level-specific colors */
.level-badge.level-1 {
    background-color: #e8e8e8;
    color: #666;
}

.level-badge.level-2 {
    background-color: #e0e8d8;
    color: #5d624b;
}

.level-badge.level-3 {
    background-color: #f5e6d3;  /* Bronze tint */
    color: #8b6914;
}

.level-badge.level-4 {
    background-color: #f0e0c8;
    color: #7a5c0c;
}

.level-badge.level-5 {
    background-color: #e8e8e8;  /* Silver tint */
    color: #5a5a5a;
}

.level-badge.level-6 {
    background-color: #e0e0e0;
    color: #4a4a4a;
}

.level-badge.level-7 {
    background-color: #fff8e1;  /* Gold tint */
    color: #b8860b;
}

.level-badge.level-8 {
    background-color: #fff3cd;
    color: #9a7209;
}

.level-badge.level-9 {
    background-color: #f5f5f5;  /* Platinum tint */
    color: #6a6a8a;
    border: 1px solid #d0d0e0;
}

.level-badge.level-10 {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* XP Progress Bar */
.xp-progress-container {
    width: 100%;
    max-width: 300px;
}

.xp-progress-bar {
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #5d624b, #9aa570);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.xp-progress-text {
    font-size: 0.8em;
    color: #666;
}

/* Badge display on stable detail page */
.stable-badge-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
    border-radius: 20px;
    border: 1px solid #ddd;
    font-weight: 500;
}

.stable-badge-display.bronze {
    background: linear-gradient(135deg, #f5e6d3, #e8d4b8);
    border-color: #cd7f32;
}

.stable-badge-display.silver {
    background: linear-gradient(135deg, #f0f0f0, #d8d8d8);
    border-color: #c0c0c0;
}

.stable-badge-display.gold {
    background: linear-gradient(135deg, #fff8e1, #ffeeba);
    border-color: #ffd700;
}

.stable-badge-display.platinum {
    background: linear-gradient(135deg, #f8f8fa, #e8e8f0);
    border-color: #e5e4e2;
}

.stable-badge-display.master {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    border-color: #7b2d96;
}

/* Stable XP Stats Section */
.stable-xp-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.stable-xp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: #f8f8f8;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.stable-xp-stat-value {
    font-size: 1.5em;
    font-weight: 600;
    color: #5d624b;
}

.stable-xp-stat-label {
    font-size: 0.85em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ========================================
   HORSE PROFILE REDESIGN
   Preview URL: /horses/<pk>/preview/
   ======================================== */

/* -- Development Banner -- */
.hp-dev-banner {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    border: 1px solid #ffc107;
    padding: 12px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    color: #856404;
    font-size: 0.9em;
}

.hp-dev-banner a {
    color: #5d624b;
    font-weight: 600;
    margin-left: 10px;
}

/* -- Header: Two-Column Layout -- */
.hp-header {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Change this ratio */
    gap: 70px;
    margin-bottom: 30px;
    padding: 50px;
}

/* -- Image Column -- */
.hp-image-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hp-image-container {
    position: relative;
    border-radius: 0px;
    overflow: hidden;
}

.hp-profile-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hp-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #999;
    font-size: 1.1em;
}

.hp-image-placeholder i {
    font-size: 4em;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* -- Availability Badges (below image) -- */
.hp-availability-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hp-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-badge-breeding {
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    color: #880e4f;
    border: 1px solid #f48fb1;
}

.hp-badge-sale {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
    border: 1px solid #64b5f6;
}

/* -- Info Column -- */
.hp-info-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hp-horse-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2.5em;
    color: #5d624b;  /* Olive - matches sim profile */
}

.hp-horse-subtitle {
    margin: 0;
    color: #666;
    font-size: 1.1em;
}

.hp-horse-id {
    color: #999;
    margin-left: 8px;
}

/* -- Level Badges -- */
.hp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hp-level-badge {
    background: #fff3cd;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
}

/* -- Name Divider (per wireframe) -- */
.hp-name-divider {
    border: none;
    border-top: 2px solid #ccc;
    margin: 10px 10px 15px 0;
    color: #5d624b;
}

/* -- Info Grid (two-column layout per wireframe) -- */
.hp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
    margin: 0 0 20px 0;
}

.hp-info-column-left,
.hp-info-column-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-info-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
}

.hp-info-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
}

.hp-info-value {
    font-size: 0.9em;
    color: #333;
}

.hp-info-value a {
    color: #5d624b;
    text-decoration: none;
}

.hp-info-value a:hover {
    text-decoration: underline;
}

/* -- Biography -- */
.hp-biography {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.hp-biography h3 {
    font-size: 1em;
    color: #666;
    margin: 0 0 8px 0;
    font-weight: 500;
}

.hp-biography p {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   EXPANDABLE BIOGRAPHY - Global Component
   Used on horse, stable, and sim profiles
   ======================================== */
.bio-expandable {
    position: relative;
}

.bio-expandable .bio-content {
    position: relative;
    max-height: 120px;  /* Roughly 4-5 lines */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.bio-expandable .bio-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, white);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.bio-expandable.expanded .bio-content {
    max-height: 2000px;  /* Large enough for any bio */
}

.bio-expandable.expanded .bio-content::after {
    opacity: 0;
}

.bio-toggle {
    display: inline-block;
    margin-top: 8px;
    color: #9aa570;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

.bio-toggle:hover {
    color: #5d624b;
    text-decoration: underline;
}

.bio-toggle i {
    margin-left: 4px;
    font-size: 0.85em;
    transition: transform 0.3s ease;
}

.bio-expandable.expanded .bio-toggle i {
    transform: rotate(180deg);
}

/* Hide toggle if content is short enough */
.bio-expandable.no-overflow .bio-content::after {
    display: none;
}

.bio-expandable.no-overflow .bio-toggle {
    display: none;
}

/* -- Status Bar: Ownership & Availability (per wireframe) -- */
.hp-status-bar {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0;
    padding: 20px 25px;
    margin-bottom: 25px;
    position: relative;
}

/* Olive accent bar at top (per wireframe) */
.hp-status-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #5d624b;
}

/* Olive accent bar at bottom (per wireframe) */
.hp-status-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #5d624b;
}

.hp-ownership-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    justify-content: center;
}

.hp-ownership-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
}

.hp-ownership-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
}

.hp-ownership-value {
    font-size: 0.9em;
    color: #333;
    text-decoration: none;
}

a.hp-ownership-value:hover {
    color: #5d624b;
    text-decoration: underline;
}

/* -- Owner/Breeder Group -- */
.hp-owner-breeder {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* -- Status Toggle Groups (per wireframe) -- */
.hp-status-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-toggle-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
}

/* Toggle indicator (pill style per wireframe) */
.hp-toggle-indicator {
    display: inline-block;
    width: 36px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    position: relative;
}

.hp-toggle-indicator::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.hp-toggle-indicator.active {
    background: #5d624b;
}

.hp-toggle-indicator.active::after {
    transform: translateX(18px);
}

.hp-toggle-detail {
    font-size: 0.85em;
    color: #666;
    margin-left: 44px;
}

.hp-lease-details-inline {
    font-size: 0.85em;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hp-lease-details-inline a {
    color: #5d624b;
}

/* Availability Group (For Sale + Breeding + Contact) */
.hp-availability-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hp-availability-toggles {
    display: flex;
    gap: 20px;
}

.hp-availability-toggles .hp-status-toggle-group {
    padding-left: 0;
    border-left: none;
}

/* Contact message (for sale/breeding) - under toggles */
.hp-contact-message {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin-top: 6px;
}

.hp-contact-message strong {
    color: #5d624b;
    font-style: normal;
}

/* -- Tab Navigation (per wireframe - clean underline style) -- */
.hp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #5d624b;
    margin-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;  /* Prevent vertical wiggle */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.hp-tabs::-webkit-scrollbar {
    display: none;  /* Chrome/Safari/Opera */
}

.hp-tab {
    padding: 15px 30px;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1em;
    color: #333;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

/* Override generic button:hover for tabs */
.hp-tab:hover {
    color: #5d624b;
    text-decoration: underline;
    background: transparent;  /* Prevent dark green background */
    transform: none;  /* Prevent lift effect */
    box-shadow: none;  /* Prevent shadow */
}

.hp-tab.active {
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
}

/* Hide icons in tabs for cleaner look per wireframe */
.hp-tab i {
    display: none;
}

/* -- Tab Content Panels -- */
.hp-tab-content {
    background: #fff;
    border: 1px solid #e9ecef;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 25px;
    margin-bottom: 25px;
}

.hp-tab-panel {
    display: none;
}

.hp-tab-panel.active {
    display: block;
}

/* -- Coming Soon / Empty States -- */
.hp-coming-soon {
    color: #888;
    font-style: italic;
    padding: 30px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
}

.hp-coming-soon i {
    margin-right: 8px;
}

.hp-empty-state {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.hp-placeholder-note {
    color: #666;
    text-align: center;
    font-size: 0.9em;
    margin-top: 10px;
}

/* -- Gallery Tab -- */
.hp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 10px 0;
}

.hp-gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hp-gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.hp-gallery-caption {
    padding: 8px 10px;
    font-size: 0.85em;
    color: #555;
    background: #fff;
    margin: 0;
    border-top: 1px solid #eee;
}

.hp-empty-gallery {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #888;
}

.hp-empty-gallery i {
    font-size: 2.5em;
    margin-bottom: 15px;
    color: #ccc;
    display: block;
}

.hp-empty-gallery p {
    margin: 5px 0;
}

.hp-empty-hint {
    font-size: 0.85em;
    color: #999;
    font-style: italic;
}

/* Gallery responsive - smaller screens */
@media (max-width: 768px) {
    .hp-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .hp-gallery-item img {
        height: 140px;
    }
}

/* -- Gallery Lightbox -- */
.hp-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hp-lightbox.active {
    display: flex;
    opacity: 1;
}

.hp-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
    position: relative;
}

.hp-lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.hp-lightbox-caption {
    color: #fff;
    font-size: 1em;
    margin-top: 15px;
    padding: 0 20px;
}

.hp-lightbox-counter {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
    margin-top: 8px;
}

.hp-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8em;
    cursor: pointer;
    padding: 10px;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10001;
}

.hp-lightbox-close:hover {
    color: #ccc;
    transform: scale(1.1);
}

.hp-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1.5em;
    padding: 20px 15px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 10001;
}

.hp-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hp-lightbox-prev {
    left: 20px;
    border-radius: 4px;
}

.hp-lightbox-next {
    right: 20px;
    border-radius: 4px;
}

/* Lightbox responsive */
@media (max-width: 768px) {
    .hp-lightbox-nav {
        padding: 15px 10px;
        font-size: 1.2em;
    }

    .hp-lightbox-prev {
        left: 10px;
    }

    .hp-lightbox-next {
        right: 10px;
    }

    .hp-lightbox-close {
        top: 10px;
        right: 10px;
    }
}

/* -- Gallery Form (Horse Edit Page) -- */
.gallery-form-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery-image-row {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
}

.gallery-image-row.existing {
    border-left: 4px solid #5d624b;
}

.gallery-image-row.new {
    border-left: 4px solid #6c757d;
    background: #fafafa;
}

.gallery-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.gallery-row-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gallery-row-number {
    font-weight: bold;
    color: #5d624b;
}

.gallery-preview-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* Gallery reorder buttons */
.gallery-reorder-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reorder-btn {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 30px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #666;
    padding: 0;
}

.reorder-btn:hover {
    background: #5d624b;
    border-color: #5d624b;
    color: #fff;
}

.reorder-btn:active {
    transform: scale(0.95);
}

.reorder-btn i {
    font-size: 0.75em;
}

.gallery-field {
    margin-bottom: 12px;
}

.gallery-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
    font-size: 0.9em;
}

.gallery-field input[type="text"],
.gallery-field input[type="url"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
}

.gallery-field input:focus {
    border-color: #5d624b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(93, 98, 75, 0.1);
}

.gallery-field-error {
    color: #d9534f;
    font-size: 0.85em;
    margin-top: 5px;
}

.gallery-delete {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
}

.gallery-delete-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: #d9534f;
    cursor: pointer;
    font-weight: normal !important;
}

.gallery-delete-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* -- Personality Tab Layout -- */
.hp-personality-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.hp-personality-left,
.hp-personality-right {
    padding: 15px;
}

.hp-personality-left h3,
.hp-personality-right h3 {
    color: #5d624b;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.hp-trait-bars {
    margin-bottom: 25px;
}

.hp-trait-bars h3 {
    margin-bottom: 20px;
}

/* Trait Bar Rows */
.hp-trait-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.hp-trait-label-left,
.hp-trait-label-right {
    width: 90px;
    font-size: 0.9em;
    color: #555;
}

.hp-trait-label-left {
    text-align: right;
}

.hp-trait-label-right {
    text-align: left;
}

/* The Trait Bar Container - Simple filled bar (per wireframe) */
.hp-trait-bar {
    flex: 1;
    height: 16px;
    background: #d9d9d9;  /* Light gray unfilled portion */
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

/* Fill from left (shows position) - Solid olive color */
.hp-trait-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #5d624b;  /* Solid olive - matches site theme */
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
}

/* ========================================
   TRAIT/ENVIRONMENT SLIDERS (Global)
   Used in horse_form, sim_form, stable_form
   ======================================== */

/* Slider container - vertical stack with spacing */
.trait-sliders-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual slider row - horizontal layout */
.trait-slider-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Left label (e.g., "Careful", "Casual") */
.trait-label-left {
    width: 120px;
    text-align: right;
    font-weight: 500;
}

/* Right label (e.g., "Courageous", "Competitive") */
.trait-label-right {
    width: 120px;
    font-weight: 500;
}

/* Current value display (e.g., "50") */
.trait-value {
    min-width: 40px;
}

/* The slider input itself */
.trait-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 300px;  /* Fixed width for consistent alignment */
    height: 10px;
    background: linear-gradient(to right, #e0e0e0, #f5f5f5, #e0e0e0);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

/* Slider thumb (handle) - WebKit browsers */
.trait-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #5d624b;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Slider thumb (handle) - Firefox */
.trait-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #5d624b;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Focus state for accessibility */
.trait-slider:focus {
    outline: 2px solid #5d624b;
    outline-offset: 2px;
}

.hp-quirks {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

/* -- Career Tab (Redesigned) -- */
.hp-career-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
}

.hp-career-main,
.hp-career-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section Cards - Consistent styling */
.hp-section-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
}

.hp-section-card.hp-empty-card {
    text-align: center;
    color: #888;
}

.hp-section-title {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #5d624b;  /* Olive - matches site headings */
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

/* Detail Rows - Label: Value format */
.hp-career-details {
    margin-bottom: 15px;
}

.hp-detail-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.hp-detail-label {
    font-weight: 600;
    color: #333;
}

.hp-detail-value {
    color: #333;
}

/* Progress Bar - Olive theme */
.hp-progress-container {
    margin: 15px 0;
}

.hp-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #666;
}

.hp-progress-track {
    background: #e9ecef;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.hp-progress-fill {
    background: #5d624b;
    height: 100%;
    transition: width 0.3s ease;
}

.hp-progress-note {
    margin: 8px 0 0 0;
    font-size: 0.85em;
    color: #888;
}

/* Max Level Badge */
.hp-max-level-badge {
    background: #5d624b;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    margin: 15px 0;
}

.hp-max-level-badge i {
    margin-right: 8px;
    color: #ffc107;
}

/* Link Buttons */
.hp-section-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.hp-link-button {
    color: #5d624b;
    text-decoration: underline;
    font-size: 0.9em;
}

.hp-link-button:hover {
    color: #3d4231;
}

/* Muted Text */
.hp-muted-text {
    color: #888;
    font-size: 0.9em;
    margin: 0;
}

/* Team List */
.hp-team-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-team-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.hp-team-member:last-child {
    border-bottom: none;
}

.hp-team-name {
    color: #5d624b;
    text-decoration: none;
    font-weight: 500;
}

.hp-team-name:hover {
    text-decoration: underline;
}

.hp-team-role {
    font-size: 0.85em;
    color: #888;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
}

/* -- Clubs Tab -- */
.hp-club-registration-card {
    position: relative;
}

.hp-club-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.hp-club-info {
    flex: 1;
}

.hp-club-info .hp-section-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 5px;
}

.hp-club-info .hp-section-title a {
    color: #5d624b;
    text-decoration: none;
}

.hp-club-info .hp-section-title a:hover {
    text-decoration: underline;
}

.hp-club-tagline {
    margin: 0;
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}

/* =============================================
   CLUB REGISTRATION STAMPS (Feature #13)
   Classic approval stamp with scalloped edges
   ============================================= */

/* Stamp Container */
.hp-club-stamp {
    flex-shrink: 0;
}

/* Base stamp styles - shared by all shapes */
.hp-stamp-graphic {
    /* CSS variables for customization - set inline via template */
    --stamp-bg: #6b2c3a;
    --stamp-text: #d4a574;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s ease;
}

/* ==========================================
   POSTAGE RECTANGLE STAMP (Default)
   Classic postage stamp with white scalloped outer edge
   and gradient-enhanced colored rectangle inside
   ========================================== */
.hp-stamp-rectangle {
    position: relative;
    width: 120px;
    min-height: 65px;
    padding: 14px 16px;
    z-index: 0;
}

/* White scalloped background layer */
.hp-stamp-rectangle::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('/static/images/stamp-rectangle.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Subtle shadow to make white scallops visible on light backgrounds */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

/* Gradient-enhanced colored rectangle inside */
.hp-stamp-rectangle::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: -1;
    /* Rich gradient with highlights and shadows for depth */
    background:
        /* Top highlight */
        linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 40%),
        /* Bottom shadow */
        linear-gradient(0deg, rgba(0,0,0,0.15) 0%, transparent 40%),
        /* Subtle radial highlight in center */
        radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.1) 0%, transparent 60%),
        /* Base color */
        var(--stamp-bg);
    /* Inner decorative border with slight glow */
    box-shadow:
        inset 0 0 0 2px var(--stamp-text),
        inset 0 1px 3px rgba(0,0,0,0.2);
}

/* ==========================================
   CIRCLE SEAL STAMP
   Round official seal with decorative border
   ========================================== */
.hp-stamp-circle {
    width: 85px;
    height: 85px;
    padding: 15px 10px;
    background-color: var(--stamp-bg);
    border-radius: 50%;

    /* Double ring border for seal effect */
    box-shadow:
        inset 0 0 0 3px var(--stamp-text),
        inset 0 0 0 5px var(--stamp-bg),
        inset 0 0 0 7px var(--stamp-text);
}

/* ==========================================
   CLASSIC OVAL STAMP
   Horizontal oval with decorative border
   ========================================== */
.hp-stamp-oval {
    width: 110px;
    height: 65px;
    padding: 12px 15px;
    background-color: var(--stamp-bg);
    border-radius: 50%;

    /* Double ring border */
    box-shadow:
        inset 0 0 0 2px var(--stamp-text),
        inset 0 0 0 4px var(--stamp-bg),
        inset 0 0 0 6px var(--stamp-text);
}

/* ==========================================
   STAMP CONTENT ELEMENTS
   ========================================== */

/* Club Icon */
.hp-stamp-icon {
    color: var(--stamp-text);
    font-size: 1.2em;
    margin-bottom: 2px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* Club Acronym (e.g., "IWA") */
.hp-stamp-acronym {
    display: block;
    color: var(--stamp-text);
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* Registration Number (e.g., "0001") */
.hp-stamp-number {
    display: block;
    color: var(--stamp-text);
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 2px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* Registration Year (e.g., "2025") */
.hp-stamp-year {
    display: block;
    color: var(--stamp-text);
    font-size: 0.6em;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 2px;
    opacity: 0.85;
}

/* Compact stamp text for circle stamps */
.hp-stamp-circle .hp-stamp-acronym,
.hp-stamp-circle-alt .hp-stamp-acronym {
    font-size: 0.7em;
}

.hp-stamp-circle .hp-stamp-number,
.hp-stamp-circle-alt .hp-stamp-number {
    font-size: 0.75em;
    letter-spacing: 1px;
}

/* ==========================================
   STAMP HOVER EFFECTS
   ========================================== */
.hp-stamp-graphic:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Multiple stamps container */
.hp-stamps-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Club Achievement Badges */
.hp-club-achievements {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.hp-club-level-badge {
    background: #9aa570;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 500;
}

.hp-club-level-badge i {
    margin-right: 5px;
}

.hp-club-title-badge {
    background: #5d624b;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: 500;
}

.hp-club-title-badge i {
    margin-right: 5px;
}

/* -- Offspring Section -- */
.hp-offspring-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.hp-offspring-section h3 {
    color: #5d624b;
    margin-bottom: 15px;
}

.hp-offspring-table {
    width: 100%;
    border-collapse: collapse;
}

.hp-offspring-table th,
.hp-offspring-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.hp-offspring-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #5d624b;
}

.hp-offspring-table a {
    color: #5d624b;
    text-decoration: none;
}

.hp-offspring-table a:hover {
    text-decoration: underline;
}

/* -- Competition Record (Shows Tab) -- */
.hp-competition-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.hp-stat-item {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.hp-stat-value {
    display: block;
    font-size: 1.8em;
    font-weight: 700;
    color: #5d624b;
}

.hp-stat-label {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
}

.hp-stat-gold .hp-stat-value { color: #d4af37; }
.hp-stat-silver .hp-stat-value { color: #888; }
.hp-stat-bronze .hp-stat-value { color: #cd7f32; }

.hp-competition-table {
    width: 100%;
    border-collapse: collapse;
}

.hp-competition-table th,
.hp-competition-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.hp-competition-table th {
    background: #5d624b;
    color: #f4f4f4;
    font-weight: 600;
}

.hp-competition-table a {
    color: #5d624b;
    text-decoration: none;
}

.hp-competition-table a:hover {
    text-decoration: underline;
}

.hp-competition-table tbody tr:hover {
    background: #f8f9fa;
}

.hp-placement {
    font-weight: 500;
}

.hp-placement-1 {
    color: #d4af37;
}

.hp-placement-2 {
    color: #888;
}

.hp-placement-3 {
    color: #cd7f32;
}

.hp-no-shows {
    color: #888;
    font-style: italic;
    padding: 30px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
}

.hp-no-shows i {
    margin-right: 8px;
}

/* -- Sims Section -- */
.hp-sims-section {
    margin-bottom: 25px;
}

.hp-sims-section h2 {
    color: #5d624b;
    font-size: 1.3em;
    margin-bottom: 15px;
}

.hp-sims-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hp-sims-list li {
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
}

.hp-sims-list a {
    color: #5d624b;
    font-weight: 500;
    text-decoration: none;
}

.hp-sims-list a:hover {
    text-decoration: underline;
}

.hp-relationship-type {
    background: #e9ecef;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    margin-left: 10px;
    color: #666;
}

.hp-relationship-notes {
    display: block;
    color: #888;
    font-size: 0.9em;
    font-style: italic;
    margin-top: 5px;
}

/* -- Owner Actions -- */
.hp-owner-actions {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.hp-owner-actions h3 {
    margin: 0 0 15px 0;
    color: #5d624b;
    font-size: 1.1em;
}

.hp-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hp-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* -- Staff Tools (Super subtle - invisible until needed) -- */
.hp-staff-tools {
    margin: 15px 0 0 0;
    text-align: center;
}

.hp-staff-tools summary {
    cursor: pointer;
    font-size: 0.75em;
    color: #999;
    font-weight: normal;
    list-style: none;
    display: inline-block;
}

.hp-staff-tools summary::-webkit-details-marker {
    display: none;
}

.hp-staff-tools summary::after {
    content: ' ▾';
}

.hp-staff-tools[open] summary::after {
    content: ' ▴';
}

.hp-staff-tools summary:hover {
    color: #666;
}

/* When open, show the panel with styling */
.hp-staff-tools[open] {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.hp-staff-tools[open] summary {
    font-size: 0.85em;
    color: #5d624b;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.hp-staff-content {
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
}

.hp-staff-content p {
    color: #666;
    font-size: 0.85em;
    margin-bottom: 10px;
}

.hp-staff-content .btn {
    font-size: 0.8em;
    padding: 6px 12px;
    background: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
    display: inline-block;
    margin: 4px;
}

.hp-staff-content .btn:hover {
    background: #dee2e6;
    color: #212529;
}

.hp-staff-content .btn i {
    font-size: 0.9em;
}

/* -- Back Link -- */
.hp-back-link {
    margin-top: 20px;
}

.hp-back-link a {
    color: #5d624b;
    text-decoration: none;
}

.hp-back-link a:hover {
    text-decoration: underline;
}

/* -- Responsive: Tablet -- */
@media (max-width: 992px) {
    .hp-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .hp-image-column {
        max-width: 500px;
        margin: 0 auto;
    }

    .hp-personality-content {
        grid-template-columns: 1fr;
    }

    .hp-career-layout {
        grid-template-columns: 1fr;
    }
}

/* -- Responsive: Mobile -- */
@media (max-width: 768px) {
    .hp-horse-name {
        font-size: 1.8em;
    }

    .hp-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hp-info-column-left,
    .hp-info-column-right {
        gap: 6px;
    }

    /* Trait bars responsive */
    .hp-trait-bar-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hp-trait-label-left,
    .hp-trait-label-right {
        width: 70px;
        font-size: 0.8em;
    }

    .hp-trait-bar {
        flex: 1;
        min-width: 120px;
    }

    .hp-tabs {
        gap: 0;
    }

    .hp-tab {
        padding: 10px 16px;
        font-size: 0.85em;
    }

    .hp-ownership-section {
        flex-direction: column;
        gap: 20px;
    }

    .hp-status-toggle-group {
        padding-left: 0;
    }

    .hp-section-card {
        padding: 15px;
    }

    .hp-club-stats {
        flex-direction: column;
        gap: 10px;
    }

    .hp-action-buttons {
        flex-direction: column;
    }

    .hp-action-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   SHOW CREATE/EDIT FORM - Professional Styling
   ============================================================================ */

.show-form-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.show-form-container h2 {
    color: #5d624b;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.8em;
}

.show-form-container > p {
    text-align: center;
    color: #666;
    margin-bottom: 25px;
}

/* Template Loader Box - uses global .info-box .info-box-olive for base styling */
.show-form-container .template-loader p {
    margin: 0 0 12px 0;
}

.show-form-container .template-loader p:first-child {
    font-weight: 600;
    color: #5d624b;
    font-size: 1.05em;
}

.show-form-container .template-loader p:nth-child(2) {
    font-size: 0.9em;
    color: #555;
}

.show-form-container .template-loader .template-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.show-form-container .template-loader select {
    flex: 1;
    min-width: 200px;
}

/* Show Form Dropdowns - Safari-Compatible Styling */
.show-form-container select,
.show-form-container table select,
.show-form-container .class-form select {
    padding: 8px 32px 8px 12px;
    border: 2px solid #5d624b;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 150px;
    transition: all 0.2s ease;
}

.show-form-container select:hover,
.show-form-container table select:hover,
.show-form-container .class-form select:hover {
    border-color: #7a8062;
    background-color: #f8f9fa;
}

.show-form-container select:focus,
.show-form-container table select:focus,
.show-form-container .class-form select:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15);
}

/* Safari-specific dropdown fixes for show forms */
@supports (-webkit-touch-callout: none) {
    .show-form-container select,
    .show-form-container table select,
    .show-form-container .class-form select {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: white !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
        padding-right: 32px !important;
    }

    .show-form-container select:hover,
    .show-form-container table select:hover,
    .show-form-container .class-form select:hover {
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .show-form-container select:focus,
    .show-form-container table select:focus,
    .show-form-container .class-form select:focus,
    .show-form-container select:active,
    .show-form-container table select:active,
    .show-form-container .class-form select:active {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-color: white !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    }
}

/* Timing Option Box */
.show-form-container .timing-options {
    background: #f8f9fa;
    padding: 20px 25px;
    margin-bottom: 25px;
    border-radius: 8px;
    border-left: 4px solid #9aa570;
}

.show-form-container .timing-options p:first-child {
    margin-top: 0;
    font-weight: 600;
    color: #5d624b;
}

.show-form-container .timing-options label {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background 0.2s;
}

.show-form-container .timing-options label:hover {
    background: #e9ecef;
}

.show-form-container .timing-options input[type="radio"] {
    margin-right: 10px;
    accent-color: #5d624b;
}

/* Form Section */
.show-form-container form {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.show-form-container form h3 {
    color: #5d624b;
    border-bottom: 2px solid #9aa570;
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.3em;
}

.show-form-container form h3:not(:first-of-type) {
    margin-top: 35px;
}

/* Table Form Styling */
.show-form-container form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 15px;
}

.show-form-container form table th {
    text-align: left;
    padding: 10px 15px 10px 0;
    font-weight: 600;
    color: #333;
    vertical-align: top;
    width: 180px;
}

.show-form-container form table td {
    padding: 0;
}

.show-form-container form table input[type="text"],
.show-form-container form table input[type="number"],
.show-form-container form table input[type="date"],
.show-form-container form table input[type="datetime-local"],
.show-form-container form table textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95em;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

.show-form-container form table select,
.show-form-container .class-form select {
    width: 100%;
}

.show-form-container form table input:focus,
.show-form-container form table textarea:focus {
    border-color: #9aa570;
    outline: none;
    box-shadow: 0 0 0 3px rgba(154, 165, 112, 0.15);
}

.show-form-container form table textarea {
    min-height: 100px;
    resize: vertical;
}

/* Help text styling */
.show-form-container form .helptext,
.show-form-container form table .helptext {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 6px;
}

/* Class Formset Styling */
.show-form-container .class-form {
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.show-form-container .class-form:hover {
    border-color: #9aa570;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.show-form-container .class-form h4 {
    color: #5d624b;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.show-form-container .class-form > div {
    margin-bottom: 15px;
}

.show-form-container .class-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
}

.show-form-container .class-form input[type="text"],
.show-form-container .class-form input[type="number"],
.show-form-container .class-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95em;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

.show-form-container .class-form input:focus,
.show-form-container .class-form textarea:focus {
    border-color: #9aa570;
    outline: none;
    box-shadow: 0 0 0 3px rgba(154, 165, 112, 0.15);
}

.show-form-container .class-form small {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 4px;
}

/* Class Restrictions (collapsible details) */
.show-form-container .class-form details {
    background: #f0f4e8;
    padding: 12px 15px;
    border-radius: 6px;
    margin-top: 15px;
    border: 1px solid #d4dcc4;
}

.show-form-container .class-form details summary {
    cursor: pointer;
    font-weight: 600;
    color: #5d624b;
    padding: 5px 0;
}

.show-form-container .class-form details summary:hover {
    color: #4a4d3c;
}

.show-form-container .class-form details[open] summary {
    margin-bottom: 10px;
    border-bottom: 1px solid #d4dcc4;
    padding-bottom: 10px;
}

.show-form-container .class-form details > div {
    padding-top: 10px;
}

.show-form-container .class-form .restriction-note {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}

.show-form-container .class-form .restriction-field {
    margin-bottom: 15px;
}

.show-form-container .class-form .gender-checkboxes {
    margin-top: 5px;
}

/* Gender checkboxes - target the div structure rendered by Django 5's CheckboxSelectMultiple */
.show-form-container .class-form .gender-checkboxes > div {
    display: inline-flex;
    gap: 20px;
}

.show-form-container .class-form .gender-checkboxes > div > div {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.show-form-container .class-form .gender-checkboxes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    cursor: pointer;
    accent-color: #5d624b;
}

.show-form-container .class-form .gender-checkboxes label {
    cursor: pointer;
    font-weight: normal;
    font-size: 0.95em;
    margin: 0;
    padding: 0;
}

.show-form-container .class-form .age-restriction-row {
    display: flex;
    gap: 15px;
}

.show-form-container .class-form .age-field {
    flex: 1;
}

.show-form-container .class-form .delete-field {
    margin-top: 15px;
}

/* Remove Class button */
.show-form-container .class-form .remove-class-btn {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 15px;
    transition: all 0.2s;
}

.show-form-container .class-form .remove-class-btn:hover {
    background: #dc3545;
    color: white;
}

/* Deleted class bar (shown when class is removed) */
.show-form-container .deleted-class-bar {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.show-form-container .deleted-class-bar span {
    color: #721c24;
    font-weight: 500;
}

.show-form-container .deleted-class-bar .undo-remove-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
}

.show-form-container .deleted-class-bar .undo-remove-btn:hover {
    background: #c82333;
}

/* Error styling */
.show-form-container .errorlist {
    background: #f8d7da;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    list-style: none;
}

.show-form-container .errorlist li {
    margin: 0;
}

/* Submit Buttons */
/* Show form uses global button styles - only add form-actions margin/border */
.show-form-container .form-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* Formset button container - layout only */
.show-form-container form > div:last-of-type {
    margin-top: 30px;
    margin-bottom: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .show-form-container {
        padding: 0 15px;
    }

    .show-form-container form {
        padding: 20px;
    }

    .show-form-container form table th {
        display: block;
        width: 100%;
        padding-bottom: 5px;
    }

    .show-form-container form table td {
        display: block;
        width: 100%;
    }

    .show-form-container .template-loader .template-actions {
        flex-direction: column;
    }

    .show-form-container .template-loader select {
        width: 100%;
    }
}

/* ==========================================
   GLOBAL HEADER STYLING (EQ Olive Green)
   ========================================== */

/* Profile page biography headings */
.hp-biography h3,
.sp-bio-title {
    color: #5d624b;
}

/* ==========================================
   SIM PROFILE STYLES (sp- prefix)
   ========================================== */

/* -- Header Layout: Image Left, Content Right -- */
.sp-header {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 35px;
    margin: 0 30px 30px 30px;
    padding: 20px 0;
    align-items: start;
}

/* Image Column */
.sp-image-column {
    width: 100%;
}

.sp-image-container {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sp-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right Content Area */
.sp-content-area {
    display: flex;
    flex-direction: column;
}

/* Name Row - spans full width with rule underneath */
.sp-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.sp-sim-name {
    font-size: 2.2em;
    font-weight: 600;
    color: #5d624b;
    margin: 0;
    line-height: 1.1;
}

.sp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Two-Column Details Grid: Info | Biography */
.sp-details-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: start;
}

/* Info Column */
.sp-info-column {
    min-width: 220px;
}

.sp-info-list {
    display: flex;
    flex-direction: column;
}

.sp-info-item {
    display: flex;
    padding: 4px 0;
    font-size: 0.95em;
}

.sp-info-item.sp-info-spacer {
    margin-top: 14px;
}

.sp-info-label {
    font-weight: 600;
    color: #5d624b;
    min-width: 110px;
}

.sp-info-value {
    color: #555;
}

.sp-info-value a {
    color: #5d624b;
    text-decoration: none;
}

.sp-info-value a:hover {
    text-decoration: underline;
}

/* Biography Column */
.sp-bio-column {
    flex: 1;
}

.sp-bio-title {
    font-size: 1.4em;
    font-weight: 600;
    color: #5d624b;
    margin: 0 0 12px 0;
}

.sp-bio-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
    line-height: 1.7;
    color: #555;
    font-size: 0.95em;
}

.sp-bio-content.sp-bio-collapsed {
    position: relative;
}

.sp-bio-content.sp-bio-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, white);
    pointer-events: none;
}

.sp-bio-empty {
    color: #888;
    font-style: italic;
}

.sp-read-more-link {
    display: inline-block;
    margin-top: 10px;
    color: #5d624b;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
}

.sp-read-more-link:hover {
    text-decoration: underline;
    color: #4a4d3c;
}

/* -- Horses Tab Grid -- */
.sp-horses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sp-horse-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-horse-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.sp-horse-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.sp-horse-name {
    font-size: 1.1em;
    font-weight: 600;
    color: #5d624b;
    text-decoration: none;
}

.sp-horse-name:hover {
    text-decoration: underline;
}

.sp-horse-role {
    background: #9aa570;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
}

.sp-horse-card-body {
    padding: 15px;
}

.sp-horse-detail {
    display: flex;
    margin-bottom: 8px;
}

.sp-horse-detail:last-child {
    margin-bottom: 0;
}

.sp-horse-label {
    color: #666;
    font-size: 0.9em;
    min-width: 70px;
}

.sp-horse-value {
    color: #333;
    font-size: 0.9em;
}

.sp-horse-value a {
    color: #5d624b;
    text-decoration: none;
}

.sp-horse-value a:hover {
    text-decoration: underline;
}

.sp-horse-notes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
    color: #666;
    font-size: 0.85em;
}

/* -- Responsive: Tablet -- */
@media (max-width: 1024px) {
    .sp-header {
        grid-template-columns: 220px 1fr;
        gap: 25px;
        margin: 0 20px 25px 20px;
    }

    .sp-sim-name {
        font-size: 1.8em;
    }

    .sp-details-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .sp-bio-column {
        border-top: 1px solid #eee;
        padding-top: 20px;
    }
}

/* -- Responsive: Mobile -- */
@media (max-width: 768px) {
    .sp-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 0 15px 20px 15px;
    }

    .sp-image-column {
        max-width: 280px;
        margin: 0 auto;
    }

    .sp-name-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-sim-name {
        font-size: 1.6em;
    }

    .sp-details-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sp-horses-grid {
        grid-template-columns: 1fr;
    }

    .sp-horse-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ========================================
   ADMIN BREADCRUMB
   Global navigation breadcrumb for admin pages
   ======================================== */

.admin-breadcrumb {
    background: #f8f9fa;
    padding: 12px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    border-left: 4px solid #5d624b;
}

.admin-breadcrumb a {
    color: #5d624b;
    text-decoration: none;
    font-weight: bold;
}

.admin-breadcrumb a:hover {
    text-decoration: underline;
}

.admin-breadcrumb a i {
    margin-right: 6px;
}

.admin-breadcrumb .breadcrumb-separator {
    color: #999;
    margin: 0 8px;
}

.admin-breadcrumb .breadcrumb-current {
    color: #666;
}


/* ========================================
   STAFF PANEL PAGES
   Global styles for admin/staff pages
   ======================================== */

.staff-panel {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 30px;  /* Consistent with browse-container and #MainText */
}

.staff-panel-narrow {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 20px 0 20px;
}

/* Staff Panel Headers */
.staff-panel .page-header {
    margin-bottom: 25px;
}

.staff-panel .page-header h1 {
    color: #5d624b;
    margin: 0 0 8px 0;
}

.staff-panel .page-header .subtitle {
    color: #666;
    margin: 0;
}

.staff-panel .page-header .subtitle a {
    color: #5d624b;
    text-decoration: none;
}

.staff-panel .page-header .subtitle a:hover {
    text-decoration: underline;
}

/* Staff Panel Cards */
.staff-panel-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.staff-panel-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.staff-panel-card-icon {
    font-size: 3rem;
    color: #5d624b;
    margin-right: 15px;
}

.staff-panel-card-title {
    margin: 0;
}

.staff-panel-card-subtitle {
    margin: 0;
    color: #666;
}

/* Staff Panel Grid Layout */
.staff-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Staff Panel Dashboard Cards */
.staff-dashboard-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.staff-dashboard-card h3 {
    color: #5d624b;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-dashboard-card p {
    color: #666;
    margin: 0 0 15px 0;
}

/* ========================================
   STAT CARDS - Colorful number displays
   Used on news page, staff dashboards, etc.
   ======================================== */

/* Stat card grid container */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

/* Base stat card (colorful version) */
.stat-card-color {
    padding: 20px 15px;
    border-radius: 8px;
    text-align: center;
}

.stat-card-color .stat-number {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
    color: white !important;
}

.stat-card-color .stat-label {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9) !important;
}

.stat-card-color .stat-sublabel {
    font-size: 0.75em;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Stat Card Color Variants - Brand palette */
.stat-card-sage {
    background-color: #7a8060;
}

.stat-card-tan {
    background-color: #a89f8e;
}

.stat-card-dusty-blue {
    background-color: #7a9aad;
}

.stat-card-mauve {
    background-color: #9b8a8e;
}

.stat-card-olive {
    background-color: #5d624b;
}

/* Stat Cards Responsive */
@media (max-width: 768px) {
    .stat-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stat-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Staff Activity List */
.staff-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.staff-activity-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.staff-activity-list li:last-child {
    border-bottom: none;
}

.staff-activity-date {
    font-size: 0.8em;
    color: #999;
    margin-top: 4px;
}

/* Staff Panel Info Boxes */
.staff-info-box {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.staff-info-box h4 {
    color: #5d624b;
    margin: 0 0 10px 0;
}

.staff-info-box p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.staff-info-box ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: #666;
}

/* Staff Panel Detail Table */
.staff-detail-table {
    width: 100%;
    font-size: 0.9rem;
}

.staff-detail-table td {
    padding: 5px 0;
}

.staff-detail-table td:first-child {
    color: #666;
    width: 40%;
}

/* Staff Panel Alerts */
.staff-alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.staff-alert-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

.staff-alert-warning strong {
    color: #856404;
}

.staff-alert-success {
    background: #f0f1eb;
    border: 1px solid #9aa570;
}

.staff-alert-success strong {
    color: #5d624b;
}

.staff-alert ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

/* Staff Panel Tables */
.staff-table {
    width: 100%;
    border-collapse: collapse;
}

.staff-table th,
.staff-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.staff-table th {
    background: #f8f9fa;
    color: #5d624b;
    font-weight: 600;
}

.staff-table tbody tr:hover {
    background: #f8f9fa;
}

.staff-table tbody tr.highlight-warning {
    background: #fff3cd;
}

/* Staff Panel Filters */
.staff-filters {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.staff-filters form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.staff-filters label {
    font-weight: 600;
    margin-right: 5px;
}

.staff-filters select {
    padding: 8px 32px 8px 12px;
    border: 2px solid #5d624b;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    min-width: 140px;
}

.staff-filters select:hover {
    border-color: #7a8062;
    background-color: #f8f9fa;
}

.staff-filters select:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15);
}

/* Staff Panel Action Buttons */
.staff-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Staff Panel Quick Actions */
.staff-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.staff-quick-actions .btn {
    flex: 0 0 auto;
}

.staff-quick-actions h3 {
    color: #5d624b;
    margin: 0 0 15px 0;
    width: 100%;
}

.staff-quick-actions h4 {
    margin: 0 0 10px 0;
    width: 100%;
}

/* Staff Panel Input Styling (matches browse page) */
.staff-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #5d624b;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
}

.staff-search-input:hover {
    border-color: #7a8062;
    background-color: #f8f9fa;
}

.staff-search-input:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15);
}

.staff-search-input::placeholder {
    color: #999;
}

/* Staff Panel Search Form */
.staff-search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.staff-search-form .btn {
    white-space: nowrap;
}

/* Staff Panel Select2 Styling (matches browse page) */
.staff-filters .select2-container--default .select2-selection--single {
    height: 38px;
    border: 2px solid #5d624b;
    border-radius: 6px;
    background-color: white;
}

.staff-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    color: #333;
    padding-left: 12px;
    font-size: 0.9rem;
}

.staff-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    right: 8px;
}

.staff-filters .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #5d624b transparent transparent transparent;
}

.staff-filters .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #5d624b transparent;
}

.staff-filters .select2-container--default .select2-selection--single:hover {
    border-color: #7a8062;
    background-color: #f8f9fa;
}

.staff-filters .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #5d624b;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15);
}

/* Select2 dropdown styling */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5d624b;
}

.select2-dropdown {
    border: 2px solid #5d624b;
    border-radius: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Staff Panel Empty State */
.staff-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.staff-empty-state h3 {
    color: #666;
    margin: 15px 0 10px 0;
}

.staff-empty-state p {
    color: #666;
}

/* Staff Panel Big Stats */
.staff-stat-big {
    font-size: 1.5rem;
    font-weight: bold;
    color: #5d624b;
}

/* Staff Panel Form */
.staff-form-group {
    margin-bottom: 20px;
}

.staff-form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.staff-form-group .help-text {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
}

.staff-form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

.staff-form-group input[type="radio"] {
    margin-right: 8px;
}

/* Filter Tabs (Status filters for admin pages) */
.filter-tabs {
    display: flex;
    margin: 25px 0;
    border-bottom: 2px solid #ddd;
}

.filter-tab {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    position: relative;
    top: 2px;
}

.filter-tab:hover {
    color: #333;
    background: #f8f9fa;
}

.filter-tab-active {
    font-weight: 600;
}

/* Filter Tab Color Variants */
.filter-tab-warning.filter-tab-active {
    color: #ffc107;
    border-bottom-color: #ffc107;
}

.filter-tab-success.filter-tab-active {
    color: #9aa570;
    border-bottom-color: #9aa570;
}

.filter-tab-danger.filter-tab-active {
    color: #dc3545;
    border-bottom-color: #dc3545;
}

.filter-tab-primary.filter-tab-active {
    color: #5d624b;
    border-bottom-color: #5d624b;
}

/* Responsive */
@media (max-width: 768px) {
    .staff-panel {
        padding: 0 15px;
    }

    .staff-panel-grid {
        grid-template-columns: 1fr;
    }

    .staff-filters form {
        flex-direction: column;
        align-items: flex-start;
    }

    .staff-actions {
        flex-direction: column;
    }

    .filter-tabs {
        flex-wrap: wrap;
    }

    .filter-tab {
        flex: 1 1 50%;
        text-align: center;
        min-width: 120px;
    }
}


/* ========================================
   ADMIN FORM PAGES
   Styled forms for admin pages
   ======================================== */

.admin-form {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.admin-form fieldset {
    margin-bottom: 30px;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.admin-form fieldset legend {
    font-size: 1.1em;
    font-weight: 600;
    color: #5d624b;
    padding: 0 10px;
    margin-left: -10px;
}

/* Admin Form Groups */
.admin-form .form-group {
    margin-bottom: 20px;
}

.admin-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.admin-form .form-group input[type="text"],
.admin-form .form-group input[type="url"],
.admin-form .form-group input[type="number"],
.admin-form .form-group textarea,
.admin-form .form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
}

.admin-form .form-group input:focus,
.admin-form .form-group textarea:focus,
.admin-form .form-group select:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 5px rgba(93, 98, 75, 0.3);
}

/* Radio Button Groups */
.admin-form .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
}

.admin-form .radio-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
    margin-bottom: 0;
}

.admin-form .radio-group input[type="radio"] {
    margin-right: 8px;
    accent-color: #5d624b;
    transform: scale(1.1);
}

/* Admin Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.admin-table th {
    background: #5d624b;
    color: white;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
}

.admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.admin-table tbody tr:hover {
    background: #f8f9fa;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* Admin Table Variants */
.admin-table-bordered {
    border: 1px solid #ddd;
}

.admin-table-bordered th,
.admin-table-bordered td {
    border: 1px solid #ddd;
}

.admin-table-compact th,
.admin-table-compact td {
    padding: 8px 12px;
    font-size: 0.9em;
}

/* Admin Table Status Colors */
.admin-table .text-success {
    color: #9aa570;
}

.admin-table .text-danger {
    color: #dc3545;
}

/* Current Balance Display */
.balance-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.balance-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid #5d624b;
}

.balance-item .balance-label {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 5px;
}

.balance-item .balance-value {
    font-size: 1.5em;
    font-weight: bold;
    color: #5d624b;
}

/* Pagination styles consolidated in PAGINATION - GLOBAL STYLES section above */

/* Danger Zone */
.danger-zone {
    margin: 40px 0 20px 0;
    padding: 25px;
    background: #fff8f8;
    border: 2px solid #dc3545;
    border-radius: 8px;
}

.danger-zone h3 {
    color: #dc3545;
    margin: 0 0 15px 0;
}

.danger-zone p {
    margin: 0 0 15px 0;
}

.danger-zone details summary {
    cursor: pointer;
    font-weight: 600;
    padding: 12px 15px;
    background: #ffc107;
    border-radius: 4px;
    margin-top: 15px;
}

.danger-zone details[open] summary {
    margin-bottom: 20px;
}

/* ========================================
   CONTENT PAGE STYLES
   (Shared styles for Privacy, Rules, Getting Started, etc.)
   ======================================== */

/* Main content container for centered text pages */
#MainText {
    color: #5d624b;
    text-align: center !important;
    padding: 40px 30px;  /* Consistent padding: top/bottom 40px, sides 30px */
    /* max-width removed to allow profile pages to use full width with just edge margins */
    margin: 0 auto;
}

/* Intro text paragraph */
.content-intro-text {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Content sections (used for rules, privacy items, etc.) */
.content-section {
    background: white;
    border-left: 3px solid #5d624b;
    padding: 12px 15px;
    margin: 12px 0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.content-section h2 {
    color: #5d624b;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1em;
    font-weight: 600;
}

.content-section ul {
    margin: 0;
    padding-left: 0;
    font-size: 0.9em;
    list-style-position: inside;
}

.content-section li {
    margin: 4px 0;
    line-height: 1.4;
    color: #444;
    text-indent: -0.5em;
    padding-left: 0.5em;
}

.content-section li strong {
    color: #333;
}

/* Section divider with gradient line */
.content-divider {
    text-align: center;
    margin: 25px 0 20px 0;
    position: relative;
}

.content-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #5d624b, transparent);
}

.content-divider-title {
    display: inline-block;
    background: #f5f5f0;
    padding: 0 15px;
    position: relative;
    color: #5d624b;
    font-size: 1.1em;
    margin: 0;
}

/* Highlighted/callout section - no hover effect, just visual consistency with content-section */
.content-highlight {
    /* Inherits all styles from .content-section - no additional effects needed */
}

/* Warning/alert section */
.content-warning {
    border-left-color: #d9534f;
    background-color: #fff5f5;
}

/* Contact/CTA section */
.content-contact {
    background: linear-gradient(135deg, #5d624b 0%, #9aa570 100%);
    color: white;
    padding: 15px;
    border-radius: 6px;
    margin: 20px 0;
    text-align: center;
    font-size: 0.9em;
}

.content-contact h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: white;
    font-size: 1.1em;
}

.content-contact a {
    color: white;
    text-decoration: underline;
    font-weight: bold;
}

.content-contact a:hover {
    color: #f4f4f4;
}

/* Acceptance/note box */
.content-note {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 12px 15px;
    border-radius: 4px;
    margin: 20px 0;
    text-align: center;
    font-size: 0.85em;
}

.content-note em {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.content-note strong {
    color: #5d624b;
}

/* Back link footer */
.content-back-link {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.content-back-link a {
    color: #5d624b;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}

.content-back-link a:hover {
    text-decoration: underline;
}

/* ========================================
   GLOBAL FORM CONTROLS
   (Consistent styling for selects, inputs, dropdowns)

   📖 DEVELOPER NOTE: For dropdown styling guidance, see:
   docs/development/DROPDOWN_STYLING_GUIDE.md

   All <select> elements automatically get Select2 with this styling.
   You rarely need to write dropdown-specific CSS!
   ======================================== */

/* Global select dropdown styling - matches browse page "sort by" dropdown */
select.form-select,
select.styled-select,
.form-group select,
table select,
#template-selector {
    padding: 8px 32px 8px 12px !important;
    border: 2px solid #5d624b !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    background: white !important;
    background-color: white !important;
    cursor: pointer !important;
    color: #333 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    min-width: 150px !important;
    transition: all 0.2s ease !important;
}

select.form-select:hover,
select.styled-select:hover,
.form-group select:hover,
table select:hover,
#template-selector:hover {
    border-color: #7a8062 !important;
    background-color: #f8f9fa !important;
}

select.form-select:focus,
select.styled-select:focus,
.form-group select:focus,
table select:focus,
#template-selector:focus {
    outline: none !important;
    border-color: #5d624b !important;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15) !important;
    background: white !important;
    background-color: white !important;
}

select.form-select:active,
select.styled-select:active,
.form-group select:active,
table select:active,
#template-selector:active {
    outline: none !important;
    border-color: #5d624b !important;
    background: white !important;
    background-color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
}

/* Safari-specific dropdown fixes for global selects */
@supports (-webkit-touch-callout: none) {
    select.form-select,
    select.styled-select,
    .form-group select,
    table select,
    #template-selector {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
        padding-right: 32px !important;
    }

    select.form-select:focus,
    select.styled-select:focus,
    .form-group select:focus,
    table select:focus,
    #template-selector:focus,
    select.form-select:active,
    select.styled-select:active,
    .form-group select:active,
    table select:active,
    #template-selector:active {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
    }
}

/* Override template-specific inline styles (higher specificity) */
.xp-form .form-group select {
    padding: 8px 32px 8px 12px !important;
    border: 2px solid #5d624b !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    background-color: white !important;
    cursor: pointer !important;
    color: #333 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    padding-right: 32px !important;
    min-width: 150px !important;
    transition: all 0.2s ease !important;
}

.xp-form .form-group select:hover {
    border-color: #7a8062 !important;
    background-color: #f8f9fa !important;
}

.xp-form .form-group select:focus {
    outline: none !important;
    border-color: #5d624b !important;
    box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.15) !important;
}

/* Safari-specific fixes for XP form selects */
@supports (-webkit-touch-callout: none) {
    .xp-form .form-group select {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d624b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px !important;
        padding-right: 32px !important;
    }
}

/* Width utilities for form controls */
.select-sm {
    width: 180px;
}

.select-md {
    width: 250px;
}

.select-lg {
    width: 100%;
    max-width: 400px;
}

.select-full {
    width: 100%;
}


/* ========================================
   REUSABLE COMPONENTS
   ======================================== */

/* Page Actions - Action buttons at top of pages */
.page-actions {
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Fieldsets - Form sections with borders */
fieldset {
    margin-bottom: 30px;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

fieldset legend {
    font-size: 1.1em;
    font-weight: 600;
    color: #5d624b;
    padding: 0 10px;
    margin-left: -10px;
}

/* Form Groups - Individual form field containers */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 5px rgba(93, 98, 75, 0.3);
}

/* Form Checks - Container styling */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #f9f9f9;
    border-radius: 6px;
}

.form-check label {
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

/* Help Text and Errors */
.help-text {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 0.9em;
}

.field-error {
    color: #d9534f;
    margin-top: 5px;
    font-weight: 500;
}

.required {
    color: #d9534f;
}

/* Subtitle - Below page titles */
.subtitle {
    color: #666;
    font-size: 0.95em;
    margin-top: -10px;
    margin-bottom: 20px;
}

.subtitle a {
    color: #5d624b;
    text-decoration: none;
}

.subtitle a:hover {
    text-decoration: underline;
}

/* Admin Tables - Staff management, schedules, etc. */
.admin-table,
.staff-table,
.schedules-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.admin-table thead,
.staff-table thead,
.schedules-table thead {
    background: #f8f9fa;
}

.admin-table th,
.staff-table th,
.schedules-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    color: white;
    background: #5d624b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table th.text-center,
.staff-table th.text-center,
.schedules-table th.text-center {
    text-align: center;
}

.admin-table td,
.staff-table td,
.schedules-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.admin-table td.text-center,
.staff-table td.text-center,
.schedules-table td.text-center {
    text-align: center;
}

.admin-table tbody tr:hover,
.staff-table tbody tr:hover,
.schedules-table tbody tr:hover {
    background: #fafafa;
}

.admin-table.compact-table td,
.admin-table.compact-table th,
.staff-table.compact-table td,
.staff-table.compact-table th {
    padding: 10px 12px;
}

/* Colored table headers for special tables */
.schedules-table thead {
    background: #5d624b;
    color: white;
}

.schedules-table th {
    color: white;
}

/* Status/Role Badges */
.status-badge,
.role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.status-active {
    background: #9aa570;
    color: white;
}

.status-badge.status-inactive {
    background: #6c757d;
    color: white;
}

.role-badge.role-owner {
    background: #5d624b;
    color: white;
}

.role-badge.role-staff {
    background: #9aa570;
    color: white;
}

/* General Badge Class */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    margin: 2px;
}

.badge-primary {
    background: #5d624b;
    color: white;
}

.badge-success {
    background: #9aa570;
    color: white;
}

.badge-shared {
    background: #9aa570;
    color: white;
    font-size: 11px;
}

/* Permission/Info Chips */
.permission-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #f0f0f0;
    border-radius: 3px;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

.permissions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Action Buttons Container */
.action-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.action-buttons.centered {
    justify-content: center;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 6px;
    border: 1px solid #eee;
}

.empty-state h3 {
    color: #5d624b;
    margin: 10px 0;
}

.empty-state p {
    color: #666;
    margin: 10px 0;
}

/* Card Grid and Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card h4 {
    margin: 0 0 15px 0;
    color: #5d624b;
    font-size: 1.1em;
}

.card p {
    margin: 10px 0;
    line-height: 1.5;
}

.card-shared {
    border-left: 4px solid #5d624b;
}

.card-official {
    border-left: 4px solid #9aa570;
}

/* Section Containers */
.staff-section,
.schedules-section {
    margin: 30px 0;
}

.section-title {
    color: #333;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

/* ===== Select2 Dropdown Styling ===== */
/* Consistent styling for all Select2 dropdowns across the site */

/* Main container - prevent placeholder truncation */
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: #fff !important;
    transition: border-color 0.15s;
    line-height: normal;
    overflow: visible !important;  /* Prevent content clipping */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    background-color: #fff !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible !important;  /* Prevent content clipping */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    list-style: none;
    display: inline-flex;
    align-items: center;
}

/* Focus state - olive theme */
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #5d624b;
    outline: none;
    box-shadow: 0 0 5px rgba(93, 98, 75, 0.3);
}

/* Search input */
.select2-container--default .select2-search--inline {
    display: inline-block;
    vertical-align: middle;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-size: 14px;
    padding: 4px 6px;
    margin: 2px 0;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
}

/* Selected tags - clean pills with proper spacing */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 14px;
    color: #495057;
    padding: 0 10px 0 26px;  /* Increased left padding to make room for X button */
    margin: 2px 4px 2px 0;
    font-size: 13px;
    font-weight: 500;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    vertical-align: middle;
    float: none;
    white-space: nowrap;
    overflow: visible;
    position: relative;  /* For absolute positioning of X button */
}

/* Remove button (X) - positioned absolutely to prevent overlap */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #6c757d;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    border: none;
    width: 20px;
    height: 28px;
    opacity: 0.6;
    transition: opacity 0.15s;
    line-height: 28px;
    text-align: center;
    background: transparent !important;
    position: absolute;
    left: 4px;  /* Position X on left side with small offset */
    top: 0;
    cursor: pointer;
    border-right: none !important;  /* Ensure no border line */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    color: #495057;
    background: transparent;
}

/* Locked tags (disabled) */
.select2-selection__choice.select2-locked-breed {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    padding-left: 10px !important;
}

.select2-selection__choice.select2-locked-breed .select2-selection__choice__remove {
    display: none !important;
}

/* Dropdown container */
.select2-dropdown {
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 2px;
    background-color: #fff;
}

/* Search box in dropdown */
.select2-search--dropdown {
    padding: 8px;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    width: 100%;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #5d624b;
    outline: none;
    box-shadow: 0 0 5px rgba(93, 98, 75, 0.3);
}

/* Dropdown results */
.select2-container--default .select2-results {
    background-color: #fff !important;
}

.select2-container--default .select2-results > .select2-results__options {
    background-color: #fff !important;
}

/* Dropdown options */
.select2-container--default .select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
    transition: background-color 0.15s, color 0.15s;
    background-color: #fff !important;
    color: #212529;
}

/* Hover effect - olive theme */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f4f4f4 !important;
    color: #5d624b !important;
}

/* Selected option - no special background */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Hover over selected option */
.select2-container--default .select2-results__option[aria-selected=true].select2-results__option--highlighted {
    background-color: #f4f4f4 !important;
    color: #5d624b !important;
}

/* Disabled options */
.select2-results__option--disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: #f8f9fa !important;
}

/* No results message */
.select2-results__option--no-results {
    color: #6c757d;
    font-style: italic;
    padding: 12px;
}

/* Placeholder text - ensure full visibility */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #6c757d;
    font-size: 14px;
    line-height: 28px;
    padding-left: 4px;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-top: 2px;
}

/* Stats Section - Dashboard statistics cards */
.stats-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.stats-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1em;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.stat-card {
    text-align: center;
}

.stat-value {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

.stat-value.stat-success {
    color: #9aa570;
}

.stat-value.stat-olive {
    color: #5d624b;
}

.stat-value.stat-info {
    color: #17a2b8;
}

.stat-label {
    margin: 5px 0 0 0;
    color: #666;
    font-size: 0.9em;
}

/* White content sections */
.schedules-section {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 20px;
}

.schedules-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1em;
}

/* Inactive rows */
.inactive-row {
    opacity: 0.6;
}

/* ===== Form Styling (Reusable) ===== */

/* Form containers */
.event-form {
    max-width: 1000px;
    margin: 0 auto;
}

/* Info box centering within MainText */
#MainText > .info-box {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Fieldset styling */
.event-form fieldset {
    margin-bottom: 30px;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.event-form fieldset legend {
    font-size: 1.1em;
    font-weight: 600;
    color: #5d624b;
    padding: 0 10px;
    margin-left: -10px;
}

/* Form groups */
.event-form .form-group {
    margin-bottom: 20px;
}

.event-form .form-group:last-child {
    margin-bottom: 0;
}

.event-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

/* Form inputs - olive theme */
.event-form .form-group input[type="text"],
.event-form .form-group input[type="url"],
.event-form .form-group input[type="datetime-local"],
.event-form .form-group select,
.event-form .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
}

.event-form .form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.event-form .form-group input:focus,
.event-form .form-group select:focus,
.event-form .form-group textarea:focus {
    outline: none;
    border-color: #5d624b;
    box-shadow: 0 0 5px rgba(93, 98, 75, 0.3);
}

/* Help text and errors */
.event-form .help-text {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 0.9em;
}

.event-form .field-error {
    color: #d9534f;
    margin-top: 5px;
    font-weight: 500;
}

.event-form .required {
    color: #d9534f;
}

/* Subtitle styling */
.subtitle {
    color: #666;
    font-size: 0.95em;
    margin-top: -10px;
    margin-bottom: 20px;
}

.subtitle a {
    color: #5d624b;
    text-decoration: none;
}

.subtitle a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .permissions-list {
        flex-direction: column;
    }

    .action-buttons {
        flex-direction: column;
    }

    .page-actions {
        flex-direction: column;
    }
}

/* ========================================
   CAREER HISTORY PAGES
   ======================================== */

/* Career cards container */
.career-cards-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.career-card {
    background: transparent;
    padding: 0;
}

.career-card.active-career {
    background: transparent;
}

.career-card-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #5d624b;
}

.career-card-header h3 {
    margin: 0;
    color: #5d624b;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
}

/* Career stats and dates */
.career-stats {
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.stat-item {
    margin-bottom: 0;
    padding: 10px 0;
}

.stat-item strong {
    color: #5d624b;
    margin-right: 5px;
}

.career-dates {
    margin: 20px 0;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.career-dates p {
    margin: 8px 0;
    color: #666;
}

.career-dates strong {
    color: #5d624b;
}

/* XP transaction collapsible details */
.xp-transactions-details {
    margin-top: 20px;
}

.xp-transactions-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #5d624b;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
    list-style: none;
}

.xp-transactions-details summary::-webkit-details-marker {
    display: none;
}

.xp-transactions-details summary::before {
    content: '▶ ';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s;
}

.xp-transactions-details[open] summary::before {
    transform: rotate(90deg);
}

.xp-transactions-details summary:hover {
    color: #9aa570;
}

/* Additional badge variants for career pages */
.badge-secondary {
    background: #6c757d;
    color: white;
}

.level-up-badge {
    background: #ffc107;
    color: #000;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}