/* ========================================
EquialitySims - Main Stylesheet
Last Updated: October 24, 2025
======================================== */
/* ========================================
CSS VARIABLES
======================================== */
/* To change colors or fonts later, update these variable values only.
No need to change individual style rules throughout the file. */
:root {
/* Color Palette */
--color-primary: #5d624b; /* Primary olive green */
--color-primary-light: #9aa570; /* Accent/lighter green */
--color-bg: #f4f4f4; /* Background gray */
--color-bg-white: #ffffff; /* White backgrounds */
--color-border: #ddd; /* Standard border gray */
--color-border-light: #eee; /* Light border/divider */
--color-text: #333; /* Primary text color */
--color-text-muted: #666; /* Muted/secondary text */
--color-text-light: #888; /* Light/tertiary text */
--color-link: #5d624b; /* Link color (matches primary) */
--color-link-hover: #4a4e3b; /* Link hover (darker) */
--color-danger: #dc3545; /* Error/danger red */
--color-success: #28a745; /* Success green */
--color-warning: #daa520; /* Harvest Gold */
/* Typography */
--font-heading: 'DM Serif Text', Georgia, serif;
--font-body: 'Poppins', Arial, Helvetica, sans-serif;
/* Deprecated aliases (for backwards compatibility) */
--olive: #5d624b;
}
/* ========================================
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: User Name
*
* 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;
}
/* ========================================
ACCESSIBILITY UTILITIES
======================================== */
/* Visually hidden - for screen readers only
Use this to provide descriptive text for icon-only buttons/links */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Icon button - circular icon-only button with hover effect
Use for edit gear icons, settings, etc. */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(93, 98, 75, 0.08);
color: #5d624b;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
font-size: 1.1rem;
}
.icon-button:hover {
background: rgba(93, 98, 75, 0.15);
color: #4a4f3b;
transform: scale(1.05);
}
.icon-button:focus {
outline: 2px solid #5d624b;
outline-offset: 2px;
}
.icon-button i {
line-height: 1;
}
/* ========================================
BRANDED FORM INPUTS
======================================== */
/* Apply to forms with class="branded-form" for consistent styling.
Does NOT affect nav search, login pages, or other forms. */
.branded-form input[type="text"],
.branded-form input[type="email"],
.branded-form input[type="password"],
.branded-form input[type="url"],
.branded-form input[type="tel"],
.branded-form input[type="number"],
.branded-form input[type="date"],
.branded-form input[type="datetime-local"],
.branded-form textarea,
.branded-form select {
width: 100%;
max-width: 500px;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: var(--font-body);
font-size: 0.95em;
color: #333;
background-color: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.branded-form input[type="text"]:focus,
.branded-form input[type="email"]:focus,
.branded-form input[type="password"]:focus,
.branded-form input[type="url"]:focus,
.branded-form input[type="tel"]:focus,
.branded-form input[type="number"]:focus,
.branded-form input[type="date"]:focus,
.branded-form input[type="datetime-local"]:focus,
.branded-form textarea:focus,
.branded-form select:focus {
outline: none;
border-color: #5d624b;
box-shadow: 0 0 0 2px rgba(93, 98, 75, 0.15);
}
.branded-form input::placeholder,
.branded-form textarea::placeholder {
color: #999;
font-style: italic;
}
.branded-form input:disabled,
.branded-form textarea:disabled,
.branded-form select:disabled {
background-color: #f5f5f5;
color: #888;
cursor: not-allowed;
}
.branded-form textarea {
min-height: 80px;
resize: vertical;
}
/* ========================================
GLOBAL FORM STYLING (Main Content Area)
======================================== */
/* Scoped to #MainText to avoid affecting nav search and auth pages.
Auth pages use .auth-card which has its own styling. */
/* Labels in main content forms */
#MainText form label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 6px;
font-size: 0.95em;
}
/* All text inputs, selects, textareas in main content */
#MainText form input[type="text"],
#MainText form input[type="email"],
#MainText form input[type="password"],
#MainText form input[type="url"],
#MainText form input[type="tel"],
#MainText form input[type="number"],
#MainText form input[type="date"],
#MainText form input[type="datetime-local"],
#MainText form textarea,
#MainText form select {
width: 100%;
max-width: 500px !important;
padding: 8px 30px 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: var(--font-body);
font-size: 0.95em;
color: #333;
background-color: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
/* Reset styles for Quill editor elements - prevent global form styles from breaking toolbar */
#MainText form .ql-toolbar,
#MainText form .ql-toolbar *,
.ql-toolbar,
.ql-toolbar * {
width: auto !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* Reset styles for Select2 search field - prevent global form styles from breaking it */
#MainText form .select2-search__field,
#MainText form .select2-search--inline .select2-search__field,
.select2-container .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
width: auto !important;
max-width: 100% !important;
padding: 4px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
line-height: normal !important;
}
/* Fix the search inline wrapper */
#MainText form .select2-search--inline,
.select2-container--default .select2-selection--multiple .select2-search--inline {
float: none !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Critical: Reset font-size for Quill toolbar */
#MainText form .ql-toolbar,
.ql-toolbar.ql-snow {
font-size: 14px !important;
line-height: 1.42 !important;
}
/* Quill toolbar buttons - constrain size and reset styles */
#MainText form .ql-toolbar button,
.ql-toolbar.ql-snow button {
width: 28px !important;
height: 24px !important;
padding: 3px 5px !important;
border: none !important;
background: transparent !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
}
/* Quill toolbar SVG icons - constrain dimensions */
#MainText form .ql-toolbar svg,
.ql-toolbar.ql-snow svg {
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
}
/* Quill picker labels (dropdowns like "Normal") */
#MainText form .ql-toolbar .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker-label {
font-size: 14px !important;
padding: 2px 8px !important;
height: 24px !important;
line-height: 20px !important;
}
/* Quill picker options dropdown */
#MainText form .ql-toolbar .ql-picker-options,
.ql-toolbar.ql-snow .ql-picker-options {
font-size: 14px !important;
}
#MainText form .ql-toolbar input[type="text"],
.ql-toolbar.ql-snow input[type="text"] {
width: 60px !important;
max-width: 60px !important;
padding: 3px 5px !important;
border: 1px solid #ccc !important;
font-size: 13px !important;
}
#MainText form .ql-container,
.ql-container.ql-snow {
max-width: none !important;
}
/* Reset styles for Select2 inline search input (multi-select only) */
#MainText form .select2-search--inline .select2-search__field,
.select2-search--inline .select2-search__field {
max-width: none !important;
width: auto !important;
border: none !important;
padding: 4px 6px !important;
}
/* Dropdown search should be full width */
.select2-search--dropdown .select2-search__field {
width: 100% !important;
box-sizing: border-box !important;
}
#MainText form input[type="text"]:focus,
#MainText form input[type="email"]:focus,
#MainText form input[type="password"]:focus,
#MainText form input[type="url"]:focus,
#MainText form input[type="tel"]:focus,
#MainText form input[type="number"]:focus,
#MainText form input[type="date"]:focus,
#MainText form input[type="datetime-local"]:focus,
#MainText form textarea:focus,
#MainText form select:focus {
outline: none;
border-color: #5d624b;
box-shadow: 0 0 0 2px rgba(93, 98, 75, 0.15);
}
#MainText form textarea {
min-height: 80px;
resize: vertical;
}
/* Extra specificity for selects in fieldsets */
#MainText form fieldset select,
#MainText form .form-fieldset select,
#MainText fieldset select {
max-width: 500px !important;
width: 100%;
display: block;
}
/* Consistent spacing and width for form field containers */
#MainText form .mb-3,
#MainText form .form-group,
#MainText form .form-field {
margin-bottom: 18px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* Force all select elements to respect container width */
#MainText select {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Hide original selects when Select2 is active (prevents double box effect) */
#MainText form select.select2-hidden-accessible,
select.select2-hidden-accessible {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Ensure Select2 containers take full width in forms */
#MainText form .select2-container {
max-width: 500px;
}
/* ========================================
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;
background-color: transparent;
margin: 0;
border: none !important;
align-self: center; /* Don't stretch to full height */
}
.search-nav-form {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255,255,255,0.15);
border-radius: 22px;
padding: 6px 12px 6px 14px;
height: 32px; /* Fixed height for pill shape */
width: 210px; /* Fixed width so space-between works */
box-sizing: border-box;
transition: background 0.2s;
margin: 0;
}
.search-nav-form:focus-within {
background: rgba(255,255,255,0.25);
}
.search-nav-input {
background: transparent;
border: none;
outline: none;
color: white;
font-size: 13px;
width: 140px; /* Reduced to fit within pill */
flex-shrink: 0;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
}
.search-nav-input::placeholder {
color: rgba(255,255,255,0.6);
}
.search-nav-input:focus {
outline: none;
width: 140px;
}
.search-nav-button {
background: transparent;
color: rgba(255,255,255,0.7);
border: none;
cursor: pointer;
display: flex;
align-items: center;
padding: 0;
margin-left: 6px;
min-height: auto;
height: auto;
width: auto;
}
.search-nav-button:hover {
background: transparent;
color: #fff;
}
.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: white;
min-width: 220px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
border-radius: 0 0 8px 8px;
z-index: 9999;
top: 100%;
left: 0;
border: none !important;
padding: 8px 0;
}
.topnav ul li.dropdown .dropdown-content a {
color: #333 !important;
padding: 10px 16px;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
white-space: nowrap;
border: none !important;
font-size: 14px;
transition: background 0.15s;
}
.topnav ul li.dropdown .dropdown-content a i {
width: 18px;
text-align: center;
color: #5d624b;
}
.topnav ul li.dropdown .dropdown-content a:hover {
background-color: #f5f5f5 !important;
color: #333 !important;
border: none !important;
}
.topnav ul li.dropdown .dropdown-content hr {
border: none;
border-top: 1px solid #eee;
margin: 6px 0;
}
/* 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 - navbar version (light sage on olive navbar) */
.notification-badge {
position: absolute;
top: 8px;
right: 8px;
background-color: #c5cba3;
color: #3d4230;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65em;
font-weight: 700;
text-align: center;
line-height: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Inline notification badge (for dropdown items on light backgrounds - green bg) */
.notification-badge-inline {
background-color: #5d624b;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.65em;
font-weight: 700;
text-align: center;
line-height: 1;
margin-left: 8px;
}
/* Pending Item Indicator Dot (for Clubs, Admin, and EQ-RP nav items) */
.clubs-nav-item,
.admin-nav-item,
.eqrp-nav-item {
position: relative;
}
.clubs-nav-item a,
.admin-nav-item a,
.eqrp-nav-item a {
position: relative;
}
.pending-dot {
display: inline-block;
width: 10px;
height: 10px;
background-color: #9aa570; /* Sage green to match site branding */
border-radius: 50%;
margin-left: 5px;
margin-right: 3px;
vertical-align: middle;
}
/* Nav bar divider */
.nav-divider {
width: 1px;
height: 24px;
background: rgba(255,255,255,0.15);
margin: 0 8px;
align-self: center;
}
/* Utility icon group (bell, admin, profile) */
.utility-group {
display: flex;
align-items: center;
gap: 0;
}
.utility-group a {
padding: 15px 12px !important;
font-size: 16px;
position: relative;
color: white;
text-decoration: none;
transition: background 0.2s;
}
.utility-group a:hover {
background: rgba(255,255,255,0.1);
}
.utility-group .notification-badge {
position: absolute;
top: 8px;
right: 4px;
}
@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;
}
/* Quill toolbar buttons - override global button styles */
.ql-toolbar button,
.ql-toolbar.ql-snow button,
.ql-toolbar .ql-picker-label,
#MainText form .ql-toolbar button {
background-color: transparent !important;
color: #444 !important;
padding: 2px 4px !important;
font-size: 13px !important;
min-height: auto !important;
height: 22px !important;
width: 24px !important;
max-height: 22px !important;
border: none !important;
border-radius: 3px !important;
gap: 0 !important;
}
.ql-toolbar button:hover,
.ql-toolbar.ql-snow button:hover {
background-color: #e0e0e0 !important;
color: #5d624b !important;
}
/* Quill toolbar SVG icons - must be after global button styles */
.ql-toolbar svg,
.ql-toolbar.ql-snow svg {
width: 14px !important;
height: 14px !important;
max-width: 14px !important;
max-height: 14px !important;
}
/* Quill picker dropdowns (like "Normal" header selector) */
.ql-toolbar .ql-picker,
.ql-toolbar.ql-snow .ql-picker {
height: 22px !important;
font-size: 13px !important;
}
.ql-toolbar .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker-label {
padding: 2px 6px !important;
height: 22px !important;
line-height: 18px !important;
border: 1px solid transparent !important;
min-height: auto !important;
width: auto !important;
font-size: 13px !important;
background: transparent !important;
color: #444 !important;
}
.ql-toolbar .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover {
background-color: #e0e0e0 !important;
color: #5d624b !important;
}
/* 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;
}
/* Extra small button variant - for inline form actions */
.btn-xs {
height: auto;
min-height: auto;
max-height: none;
padding: 4px 8px;
font-size: 0.8em;
}
/* Button with icon */
.btn i {
font-size: 0.9em;
}
/* Pill-shaped button variant (for Quick Actions) */
.btn-pill {
border-radius: 50px;
padding: 0 20px;
height: 38px;
min-height: 38px;
max-height: 38px;
font-size: 14px;
}
/* Subtle icon button - for inline actions like delete/remove */
.btn-icon-subtle {
background: transparent;
border: none;
color: #999;
padding: 4px 8px;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
font-size: 0.9em;
height: auto;
min-height: auto;
max-height: none;
}
.btn-icon-subtle:hover {
background: #f5f5f5;
color: #dc3545;
}
.btn-icon-subtle:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}
/* Danger variant for subtle icon button */
.btn-icon-subtle.btn-icon-danger:hover {
background: #ffebee;
color: #dc3545;
}
/* Success variant for subtle icon button */
.btn-icon-subtle.btn-icon-success:hover {
background: #e8f5e9;
color: #2e7d32;
}
/* ========================================
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;
}
/* ==========================================
ADVANCED ACTIONS GRID
Used for ownership/management actions in edit forms
========================================== */
.advanced-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.advanced-action-card {
padding: 20px;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
text-align: left;
}
.advanced-action-content h4 {
margin: 0 0 8px 0;
color: #333;
font-size: 1.1em;
}
.advanced-action-content p {
margin: 0;
font-size: 0.9em;
line-height: 1.5;
}
/* Yellow/Warning variant */
.info-box-yellow {
background: #fff3cd;
border-color: #daa520;
}
.info-box-yellow h4 {
color: #856404;
}
/* 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;
}
.text-italic {
font-style: italic;
}
/* Ownership/loan annotation - used on profile pages for (co-owned with...), (on loan from/to...) */
.ownership-annotation {
font-size: 0.85em;
color: #666;
}
/* Status indicators - for showing horse status (deceased, retired) inline */
.status-indicator {
margin-left: 6px;
font-size: 0.8em;
}
.status-indicator.deceased {
color: #888;
}
.status-indicator.retired {
color: #9aa570;
}
/* Empty tab/section message */
.empty-tab-message {
color: #666;
font-style: italic;
}
/* Text size utilities */
.text-small {
font-size: 0.9em;
}
/* NOTE: .text-xs defined above in TEXT UTILITIES section (12px) */
.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;
}
/* ========================================
AUTH FORM CONTAINER (Login/Register)
======================================== */
.auth-container {
max-width: 500px;
margin: 40px auto;
padding: 0 20px;
}
.auth-container h1 {
text-align: center;
color: #5d624b;
margin-bottom: 30px;
font-size: 2em;
}
.auth-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 35px 40px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.auth-card .form-group {
margin-bottom: 22px;
}
.auth-card .form-group:last-of-type {
margin-bottom: 25px;
}
.auth-card label {
display: block;
font-weight: 600;
color: #444;
margin-bottom: 6px;
font-size: 0.95em;
}
.auth-card .required-indicator {
color: #c0392b;
margin-left: 2px;
}
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
width: 100%;
padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1em;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
outline: none;
border-color: #5d624b;
box-shadow: 0 0 0 3px rgba(93, 98, 75, 0.1);
}
.auth-card .field-hint {
display: block;
font-size: 0.82em;
color: #777;
margin-top: 6px;
line-height: 1.4;
}
.auth-card .errorlist {
list-style: none;
padding: 0;
margin: 8px 0 0 0;
}
.auth-card .errorlist li {
color: #c0392b;
font-size: 0.88em;
margin-bottom: 4px;
}
/* Auth form checkbox styling */
.auth-card .checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 18px;
background: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 8px;
margin-bottom: 22px;
}
.auth-card .checkbox-group input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
}
.auth-card .checkbox-group .checkbox-content {
flex: 1;
}
.auth-card .checkbox-group .checkbox-label-text {
font-weight: 600;
color: #444;
display: block;
margin-bottom: 4px;
}
.auth-card .checkbox-group .checkbox-description {
font-size: 0.85em;
color: #666;
line-height: 1.5;
}
.auth-card .checkbox-group .checkbox-description a {
color: #5d624b;
font-weight: 600;
text-decoration: underline;
}
.auth-card .checkbox-group .checkbox-description a:hover {
color: #4a4f3c;
}
/* Auth form submit button */
.auth-card button[type="submit"],
.auth-card .btn-submit {
width: 100%;
padding: 14px 20px;
background: #5d624b;
color: white;
border: none;
border-radius: 6px;
font-size: 1.05em;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.auth-card button[type="submit"]:hover,
.auth-card .btn-submit:hover {
background: #4a4f3c;
}
/* Auth form links */
.auth-links {
text-align: center;
margin-top: 25px;
font-size: 0.95em;
color: #666;
}
.auth-links a {
color: #5d624b;
text-decoration: none;
font-weight: 500;
}
.auth-links a:hover {
text-decoration: underline;
}
.auth-links p {
margin: 8px 0;
}
/* Auth notice banner */
.auth-notice {
text-align: center;
padding: 14px 20px;
background: #f8f9f7;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 25px;
font-size: 0.92em;
color: #555;
}
.auth-notice a {
color: #5d624b;
font-weight: 600;
}
/* Auth form errors (top-level) */
.auth-card .form-errors {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 22px;
}
.auth-card .form-errors h3 {
color: #991b1b;
font-size: 0.95em;
margin: 0 0 10px 0;
}
.auth-card .form-errors ul {
margin: 0;
padding-left: 18px;
}
.auth-card .form-errors li {
color: #b91c1c;
font-size: 0.9em;
margin-bottom: 4px;
}
/* Auth page subtitles and messages */
.auth-card .auth-subtitle {
color: #666;
text-align: center;
margin-bottom: 25px;
line-height: 1.5;
font-size: 0.95em;
}
.auth-card .auth-message {
color: #444;
text-align: center;
line-height: 1.6;
margin-bottom: 20px;
}
.auth-card .auth-note {
color: #777;
font-size: 0.88em;
text-align: center;
margin-bottom: 0;
}
.auth-card .auth-note a {
color: #5d624b;
}
/* Auth centered card variant (for status/confirmation pages) */
.auth-card.auth-card-centered {
text-align: center;
}
.auth-card.auth-card-centered h1 {
margin-bottom: 15px;
}
/* Status icons for auth pages */
.auth-status-icon {
font-size: 3.5em;
margin-bottom: 20px;
}
.auth-status-icon.success {
color: #5d624b;
}
.auth-status-icon.error {
color: #c0392b;
}
/* Full-width button variant */
.auth-card .btn-full,
.auth-card a.btn-full {
display: block;
width: 100%;
padding: 14px 20px;
background: #5d624b;
color: white;
border: none;
border-radius: 6px;
font-size: 1.05em;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
.auth-card .btn-full:hover,
.auth-card a.btn-full:hover {
background: #4a4f3c;
color: white;
}
/* Responsive adjustments */
@media (max-width: 540px) {
.auth-container {
margin: 20px auto;
}
.auth-card {
padding: 25px 20px;
}
}
/* ===========================================
404 Error Page
=========================================== */
.error-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
margin: 0;
position: relative;
overflow: hidden;
}
.error-image-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.error-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.error-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.7) 50%,
rgba(255,255,255,0.9) 100%
);
pointer-events: none;
}
.error-content {
position: relative;
z-index: 1;
max-width: 600px;
}
.error-message {
font-size: 1.8em;
color: #3a3a3a;
margin: 0 0 15px;
font-weight: 600;
text-shadow:
0 0 15px rgba(255,255,255,0.9),
0 0 30px rgba(255,255,255,0.7);
}
.error-submessage {
color: #555;
margin: 0 0 35px;
font-size: 1.1em;
text-shadow:
0 0 15px rgba(255,255,255,0.9),
0 0 30px rgba(255,255,255,0.7);
}
.error-button {
display: inline-block;
padding: 16px 36px;
background: #5d624b;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
font-size: 1.1em;
transition: all 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.error-button:hover {
background: #4a4f3c;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
/* If no image is available, show plain background */
.error-image-container.no-image {
background: linear-gradient(135deg, #e8e6e1 0%, #d4d2cb 100%);
}
.error-image-container.no-image .error-image,
.error-image-container.no-image .error-overlay {
display: none;
}
@media (max-width: 600px) {
.error-message {
font-size: 1.6em;
}
.error-submessage {
font-size: 1em;
}
}
/* Remove footer margin when content contains error page */
.content:has(.error-page) + #footer {
margin-top: 0;
}
/* =============================================================================
Hero Page (Homepage)
============================================================================= */
.hero-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
margin: 0;
position: relative;
overflow: hidden;
}
.hero-image-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(93, 98, 75, 0.05) 0%,
rgba(93, 98, 75, 0.12) 70%,
rgba(93, 98, 75, 0.2) 100%
);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 700px;
}
.hero-title {
font-size: 3.5em;
color: white;
margin: 0 0 35px;
font-weight: 600;
text-shadow:
0 2px 4px rgba(93, 98, 75, 0.4),
0 4px 12px rgba(0, 0, 0, 0.2);
}
.hero-button {
display: inline-block;
padding: 16px 40px;
background: #5d624b;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
font-size: 1.1em;
transition: all 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero-button:hover {
background: #4a4f3c;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
@media (max-width: 600px) {
.hero-title {
font-size: 2.2em;
}
}
/* Hero Theme: Dark Background (use when image is dark/busy)
Add class "hero-dark-bg" to .hero-page for light button */
.hero-page.hero-dark-bg .hero-button {
background: rgba(255, 255, 255, 0.95);
color: #5d624b;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
padding: 12px 26px;
font-size: 0.95em;
}
.hero-page.hero-dark-bg .hero-button:hover {
background: white;
color: #4a4f3c;
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
/* Hero Theme: Light Background (use when image is light/washed out)
Add class "hero-light-bg" to .hero-page for dark text and dark button */
.hero-page.hero-light-bg .hero-title {
color: #3a3a3a;
text-shadow:
0 0 20px rgba(255,255,255,0.9),
0 0 40px rgba(255,255,255,0.7);
}
.hero-page.hero-light-bg .hero-button {
background: #5d624b;
color: white;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero-page.hero-light-bg .hero-button:hover {
background: #4a4f3c;
color: white;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* Remove footer margin when content contains hero page */
.content:has(.hero-page) + #footer {
margin-top: 0;
}
/* 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;
}
/* ========================================
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 #daa520;
}
/* 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;
}
.pedigree-label-xs {
font-size: 0.65em;
color: #777;
display: block;
margin-bottom: 1px;
}
/* Pedigree form boxes */
.pedigree-box-parent {
padding: 10px;
background: #fafafa;
border-left: 3px solid #5d624b;
border-radius: 4px;
position: relative;
}
.pedigree-box-grandparent {
padding: 8px;
background: #f9f9f9;
border-left: 2px solid #9aa570;
border-radius: 3px;
}
.pedigree-box-greatgrand {
padding: 6px;
background: #f5f5f5;
border-left: 1px solid #b0b585;
border-radius: 2px;
}
/* ========================================
STATUS BADGES
======================================== */
/* Consistent status indicator styling (pill-shaped badges) */
.status-badge {
padding: 3px 10px;
border-radius: 12px;
font-size: 0.85em;
font-weight: 600;
display: inline-block;
text-transform: uppercase;
}
.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%;
max-width: 500px;
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;
}
/* Icon picker field (text input + browse button + preview) */
.icon-picker-field {
display: flex;
align-items: center;
gap: 10px;
}
.icon-picker-field .form-control {
flex: 1;
max-width: 300px;
}
.icon-field-preview {
font-size: 1.5em;
color: #5d624b;
min-width: 30px;
text-align: center;
}
.icon-field-preview img {
width: 28px;
height: 28px;
}
/* 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;
}
/* NOTE: .form-errors defined in FORM ERROR STYLING section above */
/* 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;
}
/* NOTE: .info-box-yellow, .info-box-green, .info-box-olive defined in INFO BOXES section above.
Use with base .info-box class: class="info-box info-box-yellow" */
.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
======================================== */
/*
* SINGLE SOURCE OF TRUTH for checkbox styling
*
* Design: Subtle white checkbox with olive checkmark (custom ::after pseudo-element)
*
* Classes available:
* .checkbox-label - Flex container for checkbox + label text
* .form-check - Card-style checkbox container with background
* .form-check-label - Label inside .form-check
*
* To customize in specific contexts:
* - Only override size (width/height) and margins
* - Do NOT use accent-color (breaks custom checkmark)
* - Let global styles handle appearance, border, and checkmark
*/
/* 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) - for display, not input forms */
.static-label {
font-weight: 600;
color: #5d624b;
display: inline-block;
min-width: 120px;
}
.static-value {
color: #555;
}
.static-value a {
color: #5d624b;
text-decoration: none;
}
.static-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: 50px; /* Balance with right padding for centering */
padding-right: 50px; /* Space for arrow + clear button */
text-align: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 40px;
}
/* Clear button (X) for Select2 dropdowns - positioned to left of arrow */
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
position: absolute;
right: 15px; /* Position to left of the dropdown arrow */
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #5d624b;
font-size: 14px;
line-height: 1;
z-index: 2;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
color: #c44;
}
/* Ensure selection container is relative for absolute positioning */
.select2-container--default .select2-selection--single {
position: relative;
}
.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);
}
/* ========================================
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;
}
/* ========================================
CONFIRM MODAL (Custom replacement for browser confirm())
Olive/cream themed modal for confirmation dialogs
======================================== */
.confirm-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10000;
justify-content: center;
align-items: center;
backdrop-filter: blur(2px);
}
.confirm-modal-overlay.active {
display: flex;
animation: confirmFadeIn 0.15s ease-out;
}
@keyframes confirmFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.confirm-modal-box {
background: #fffef8;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
max-width: 420px;
width: 90%;
padding: 24px;
border: 1px solid #d4d1c4;
animation: confirmSlideIn 0.15s ease-out;
}
@keyframes confirmSlideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.confirm-modal-title {
font-family: 'DM Serif Text', Georgia, serif;
color: #5d624b;
font-size: 1.3rem;
margin: 0 0 12px 0;
padding-bottom: 12px;
border-bottom: 1px solid #e8e5d7;
}
.confirm-modal-message {
color: #555;
font-size: 0.95rem;
line-height: 1.5;
margin: 0 0 24px 0;
}
.confirm-modal-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.confirm-modal-buttons .btn {
min-width: 100px;
padding: 10px 20px;
font-size: 0.9rem;
}
/* Ensure danger button stands out */
.confirm-modal-buttons .btn-danger {
background-color: #d9534f;
border-color: #d9534f;
color: white;
}
.confirm-modal-buttons .btn-danger:hover {
background-color: #c9302c;
border-color: #c12e2a;
}
/* Focus styles for accessibility */
.confirm-modal-buttons .btn:focus {
outline: 2px solid #5d624b;
outline-offset: 2px;
}
/* ========================================
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: 30px; /* Balance with right padding for centering */
padding-right: 30px;
text-align: center;
}
.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: 38px;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 4px;
background-color: #fff !important;
transition: border-color 0.15s;
resize: none !important;
text-align: left !important;
}
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered {
background-color: #fff !important;
padding: 0;
margin: 0;
text-align: left !important;
overflow: hidden;
}
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered::after {
content: "";
display: table;
clear: both;
}
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none;
float: left !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: 24px;
border: none !important;
outline: none !important;
resize: none !important;
}
/* Selected tags - olive pills with proper spacing */
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #5d624b !important;
border: 1px solid #5d624b !important;
border-radius: 12px !important;
color: #fff !important;
padding-left: 24px !important;
padding-right: 10px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
margin: 2px 4px 0 0 !important;
font-size: 0.85em !important;
font-weight: 500;
line-height: 1.4 !important;
position: relative !important;
}
/* Remove button (X) - positioned absolutely to prevent overlap */
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
position: absolute !important;
left: 6px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #fff !important;
opacity: 0.8;
font-size: 12px !important;
border: none !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
height: auto !important;
width: auto !important;
line-height: 1 !important;
}
.browse-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
opacity: 1;
color: #fff !important;
background: transparent !important;
}
/* 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: 10px 28px 10px 14px;
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: 28px !important;
}
}
/* ========================================
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;
}
/* Site Table - Standard table styling across site */
.site-table-wrapper {
overflow-x: auto;
background: white;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.site-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}
.site-table th,
.site-table td {
padding: 8px 10px;
border-bottom: 1px solid #e9ecef;
vertical-align: middle;
text-align: left;
}
.site-table thead th {
font-weight: 600;
white-space: nowrap;
background-color: #5d624b;
color: #f4f4f4;
border-bottom: 2px solid #9aa570;
}
.site-table tbody tr:hover {
background-color: #f8f9fa;
}
/* Clickable row cursor */
.clickable-row {
cursor: pointer;
}
/* Column-specific widths for horse browse */
.browse-horses .site-table td:nth-child(1) { /* ID */
white-space: nowrap;
width: 70px;
}
.browse-horses .site-table td:nth-child(2) { /* Name */
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.browse-horses .site-table td:nth-child(3) { /* Career */
white-space: nowrap;
width: 110px;
}
.browse-horses .site-table td:nth-child(4) { /* Breed */
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.browse-horses .site-table td:nth-child(5), /* Age */
.browse-horses .site-table td:nth-child(6) { /* Gender */
white-space: nowrap;
width: 60px;
}
.browse-horses .site-table td:nth-child(7) { /* Owner */
max-width: 160px;
}
.browse-horses .site-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;
}
/* ----------------------------------------
Formset Table - For inline formset editing (categories, etc.)
---------------------------------------- */
.formset-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
background: white;
}
.formset-table th,
.formset-table td {
padding: 10px 12px;
border-bottom: 1px solid #e0e0e0;
vertical-align: middle;
text-align: left;
}
.formset-table thead th {
font-weight: 600;
background-color: #5d624b;
color: #f4f4f4;
font-size: 0.9em;
border-bottom: 2px solid #9aa570;
}
.formset-table tbody tr:hover {
background-color: #fafafa;
}
/* Column widths for formset tables */
.formset-table .col-drag {
width: 40px;
text-align: center;
}
.formset-table .col-checkbox {
width: 70px;
text-align: center;
}
.formset-table .col-actions {
width: 80px;
text-align: center;
}
/* Drag handle cell */
.formset-table .drag-handle {
cursor: grab;
background: #f9f9f9;
color: #999;
}
.formset-table .drag-handle:hover {
background: #e8e8e8;
color: #666;
}
/* Formset row states (supports both .formset-row and .category-row for compatibility) */
.formset-row.dragging,
.category-row.dragging {
opacity: 0.5;
background: #e3f2fd;
}
.formset-row.drag-over,
.category-row.drag-over {
border-top: 3px solid #5d624b;
}
.formset-row.marked-for-deletion,
.category-row.marked-for-deletion {
opacity: 0.4;
background: #ffebee !important;
text-decoration: line-through;
}
.formset-row.marked-for-deletion .drag-handle,
.category-row.marked-for-deletion .drag-handle {
cursor: not-allowed;
}
.formset-row.removed,
.category-row.removed {
display: none;
}
/* Transition for smooth drag feedback */
.formset-table tbody tr {
transition: background 0.2s, opacity 0.3s;
}
/* Delete toggle - wraps checkbox in clickable icon button */
.formset-table .delete-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0;
}
.formset-table .delete-toggle input[type="checkbox"] {
display: none;
}
/* Visual feedback when delete is checked */
.formset-table .delete-toggle:has(input:checked) {
color: #dc3545;
background: #ffebee;
}
/* Formset error row styling */
.formset-table .formset-error {
color: #dc3545;
padding: 5px 10px;
background: #ffebee;
font-size: 0.9em;
}
/* Inline select for tables */
.form-select-inline {
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.9em;
min-width: 150px;
max-width: 250px;
}
/* Category name select - consistent styling for both existing and new categories */
.category-name-select {
width: 100%;
max-width: 300px;
text-align: center !important;
text-align-last: center !important;
}
/* Add horse section - constrained width, centered */
.add-horse-section {
max-width: 500px;
margin: 15px auto 0;
text-align: center;
}
.add-horse-section .form-select-inline {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Tab badge for notification counts (matches nav bar notification badges) */
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
margin-left: 6px;
background: #5d624b;
color: white;
font-size: 0.75em;
font-weight: 600;
border-radius: 9px;
}
/* ========================================
ACTION CARDS - Global reusable card pattern
Used for: boarding requests, transfers, collaborations, etc.
======================================== */
.action-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.action-card {
background: #fafaf8;
border: 1px solid #e5e5e0;
border-radius: 6px;
padding: 16px 20px;
}
/* Card header with icon and content */
.action-card-header {
display: flex;
gap: 15px;
align-items: flex-start;
}
.action-card-icon {
width: 40px;
height: 40px;
background: #f0f0eb;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #5d624b;
font-size: 1.1em;
}
.action-card-content {
flex: 1;
min-width: 0;
}
.action-card-title {
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.action-card-subtitle {
font-size: 0.9em;
color: #666;
margin-bottom: 0;
}
.action-card-meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
flex-wrap: wrap;
}
.action-card-time {
font-size: 0.85em;
color: #999;
}
.action-card-body {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e5e5e0;
}
.action-card-message {
font-style: italic;
color: #666;
background: #f5f5f2;
padding: 10px 12px;
border-radius: 4px;
font-size: 0.9em;
margin: 0;
}
.action-card-actions {
margin-top: 12px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Transfer Card Layout - extends action-card */
.transfer-card .action-header {
display: flex;
gap: 15px;
align-items: flex-start;
}
.transfer-card .action-icon {
width: 44px;
height: 44px;
min-width: 44px;
background: linear-gradient(135deg, #e8ecd8, #d4dbc4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #5d624b;
font-size: 1.1rem;
}
.transfer-card .action-content {
flex: 1;
min-width: 0;
}
.transfer-card .action-content h4 {
margin: 0 0 6px 0;
font-size: 1.1rem;
color: #333;
}
.transfer-card .action-content p {
margin: 0 0 4px 0;
font-size: 0.9rem;
color: #555;
}
.transfer-card .transfer-message {
font-style: italic;
color: #666;
background: #f5f5f2;
padding: 8px 12px;
border-radius: 4px;
margin-top: 8px;
margin-bottom: 0;
}
.transfer-card .action-meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.transfer-card .action-time {
font-size: 0.85em;
color: #888;
}
.transfer-card .action-actions {
margin-top: 15px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* History card variant */
.transfer-card.history-card {
background: #faf9f6;
border-color: #e0e0dc;
}
.transfer-card.history-card .action-icon {
background: linear-gradient(135deg, #f0f0eb, #e5e5e0);
color: #888;
}
/* Status badge - unified styling */
.status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.8em;
font-weight: 600;
text-transform: capitalize;
}
.status-badge.pending,
.status-badge.Pending,
.status-badge.status-pending {
background: #fff3cd;
color: #856404;
}
.status-badge.approved,
.status-badge.Approved {
background: #e8ecd8;
color: #4a5230;
}
.status-badge.denied,
.status-badge.Denied {
background: #f8d7da;
color: #721c24;
}
/* Legacy aliases for backwards compatibility */
.request-cards { display: flex; flex-direction: column; gap: 12px; }
.request-card { background: #fafaf8; border: 1px solid #e5e5e0; border-radius: 6px; padding: 16px 20px; }
.request-card:hover { border-color: #c5c5bc; }
.request-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.request-meta { text-align: right; flex-shrink: 0; }
.request-message { font-style: italic; color: #666; background: #f5f5f2; padding: 10px 12px; border-radius: 4px; font-size: 0.9em; margin: 10px 0; }
.request-actions { margin-top: 12px; }
/* Collapsible legend (for expandable sections) */
.collapsible-legend {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.collapsible-legend:hover {
color: #7a8060;
}
.collapsible-legend .toggle-icon {
font-size: 0.8em;
color: #999;
transition: transform 0.2s;
}
/* Info card for co-ownership and other info displays */
.info-card {
padding: 15px;
background: #f8f9fa;
border-radius: 6px;
border-left: 4px solid #5d624b;
}
/* ========================================
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;
}
/* Club Registry/Leaderboard Utility Classes */
.horse-link {
color: #5d624b;
text-decoration: none;
font-weight: 600;
}
.horse-link:hover {
color: #8a9b68;
text-decoration: underline;
}
.owner-link {
color: #666;
text-decoration: none;
}
.owner-link:hover {
color: #8a9b68;
text-decoration: underline;
}
.reg-number {
font-family: 'Courier New', monospace;
font-weight: 600;
color: #333;
}
.disciplines {
color: #666;
font-size: 0.9em;
}
.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 UTILITY STYLES
============================================ */
/* 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 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-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;
position: relative;
}
.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;
}
/* 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;
}
/* Reset Select2 search field styling - prevent textarea-like appearance */
.club-form-container .select2-search__field,
.club-form-container .select2-search--inline .select2-search__field {
padding: 4px 6px !important;
min-height: auto !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* 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"] {
/* Uses global checkbox styling, just adjust positioning */
margin-top: 2px;
}
.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 - uses global .info-box and variant classes (.info-box-olive, etc.) */
.club-form-container .info-box {
padding: 20px;
border-radius: 0 8px 8px 0;
margin-bottom: 25px;
}
.club-form-container .info-box h3 {
margin-top: 0;
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 */
}
/* Hover effect removed - distracting on forms */
.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 - Compact Cards */
/* Featured Horses Management Form */
.featured-horses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.featured-horses-grid .featured-horse-card {
background: white;
padding: 1.25rem;
border-radius: 8px;
border: 1px solid #dee2e6;
box-shadow: none;
transition: none;
transform: none;
max-width: none;
}
.featured-horse-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #eee;
}
.featured-horse-card-header h3 {
margin: 0;
font-size: 1.1rem;
color: #5d624b;
}
.featured-horse-card-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.inline-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: #666;
cursor: pointer;
margin: 0;
padding: 0;
line-height: 1;
}
.inline-checkbox input[type="checkbox"] {
margin: 0;
}
.inline-checkbox span {
white-space: nowrap;
line-height: 1;
}
.inline-checkbox i {
font-size: 0.9em;
}
.inline-checkbox.delete-label {
color: #dc3545;
}
.inline-checkbox.delete-label:hover {
color: #a71d2a;
}
.featured-horse-card .form-group {
margin-bottom: 1rem;
}
.featured-horse-card .form-group:last-of-type {
margin-bottom: 0;
}
/* Info box grid for two-column layouts */
.info-box-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 15px;
}
@media (max-width: 600px) {
.info-box-grid {
grid-template-columns: 1fr;
}
}
.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;
}
/* Badge Icon Colors - reusable for any icon */
.icon-bronze { color: #cd7f32; }
.icon-silver { color: #c0c0c0; }
.icon-gold { color: #ffd700; }
.icon-platinum { color: #e5e4e2; }
.icon-master { color: #9b59b6; }
/* 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;
}
/* Stable Progression Box (matches career card pattern from horse/sim profiles) */
.stable-progression-box {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 15px;
margin-bottom: 25px;
}
.stable-progression-box h3 {
margin: 0 0 15px 0;
color: #495057;
font-size: 1.1em;
}
.stable-progression-content {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
/* Level display column */
.stable-level-display {
text-align: center;
min-width: 80px;
}
.stable-level-number {
font-size: 2em;
font-weight: bold;
}
.stable-level-label {
font-size: 0.85em;
color: #6c757d;
}
.stable-level-badge {
margin-top: 5px;
}
.stable-level-badge span {
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75em;
font-weight: bold;
}
/* Level badge colors */
.stable-level-number.level-starter,
.stable-level-badge .badge-starter { color: #9aa570; }
.stable-level-badge .badge-starter { background: #9aa570; color: #fff; }
.stable-level-number.level-bronze,
.stable-level-badge .badge-bronze { color: #cd7f32; }
.stable-level-badge .badge-bronze { background: #cd7f32; color: #fff; }
.stable-level-number.level-silver,
.stable-level-badge .badge-silver { color: #adb5bd; }
.stable-level-badge .badge-silver { background: #adb5bd; color: #fff; }
.stable-level-number.level-gold,
.stable-level-badge .badge-gold { color: #daa520; }
.stable-level-badge .badge-gold { background: #daa520; color: #000; }
.stable-level-number.level-platinum,
.stable-level-badge .badge-platinum { color: #6c757d; }
.stable-level-badge .badge-platinum { background: #6c757d; color: #fff; }
.stable-level-number.level-elite,
.stable-level-badge .badge-elite { color: #6f42c1; }
.stable-level-badge .badge-elite { background: #6f42c1; color: #fff; }
/* XP Progress column */
.stable-xp-progress {
flex: 1;
min-width: 200px;
}
.stable-xp-header {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.stable-xp-current {
font-weight: bold;
color: #495057;
}
.stable-xp-next {
color: #6c757d;
font-size: 0.9em;
}
.stable-xp-max {
color: #6f42c1;
font-size: 0.9em;
}
/* Reuses hp-progress-track/fill patterns */
.stable-progress-track {
background: #e9ecef;
border-radius: 4px;
height: 12px;
overflow: hidden;
}
.stable-progress-fill {
height: 100%;
transition: width 0.3s;
}
.stable-progress-fill.level-starter { background: #9aa570; }
.stable-progress-fill.level-bronze { background: #cd7f32; }
.stable-progress-fill.level-silver { background: #adb5bd; }
.stable-progress-fill.level-gold { background: #daa520; }
.stable-progress-fill.level-platinum { background: #6c757d; }
.stable-progress-fill.level-master { background: #6f42c1; }
.stable-xp-footer {
font-size: 0.8em;
color: #6c757d;
margin-top: 5px;
}
.stable-xp-footer a {
color: #5d624b;
}
.stable-xp-footer a:hover {
text-decoration: underline;
}
/* Stable Logo Wrapper - Centered below banner */
.stable-logo-wrapper {
display: flex;
justify-content: center;
margin-top: -80px;
margin-bottom: 20px;
position: relative;
z-index: 10;
}
.stable-logo {
width: 160px;
height: 160px;
object-fit: contain;
background: transparent;
}
.stable-logo-placeholder {
width: 160px;
height: 160px;
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #999;
font-size: 3em;
}
/* Stable Category Sections (for horses tab) */
.stable-category-section {
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background: white;
}
.stable-category-section .category-header {
background: #f5f5f5;
padding: 15px;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #ddd;
}
.stable-category-section .category-title {
margin: 0;
font-size: 1.2em;
color: #5d624b;
display: flex;
align-items: center;
gap: 10px;
}
.stable-category-section .category-toggle {
background: none;
border: none;
cursor: pointer;
padding: 0;
color: #5d624b;
font-size: 1em;
transition: transform 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.stable-category-section .category-toggle:hover {
color: #3d4229;
}
.stable-category-section .category-toggle.collapsed {
transform: rotate(-90deg);
}
.stable-category-section .category-count {
color: #999;
font-size: 0.9em;
font-weight: normal;
}
.stable-category-section .category-content {
padding: 20px;
display: block;
}
.stable-category-section .category-content.collapsed {
display: none;
}
/* ========================================
HORSE PROFILE REDESIGN
Preview URL: /horses//preview/
======================================== */
/* -- Development Banner -- */
.hp-dev-banner {
background: linear-gradient(135deg, #fff3cd, #ffeeba);
border: 1px solid #daa520;
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;
position: relative;
}
/* Edit/Settings button positioning - needs high specificity to override .hp-settings-link */
.hp-header-edit,
.hp-settings-link.hp-header-edit,
.sp-header-edit,
.hp-settings-link.sp-header-edit {
position: absolute !important;
top: 20px;
right: 20px;
}
/* Badge for pending requests on edit button (olive green on white background) */
.hp-header-edit-badge {
position: absolute;
top: -5px;
right: -5px;
background: #5d624b; /* Olive green for white backgrounds */
color: white;
font-size: 0.65em;
width: 18px;
height: 18px;
padding: 0;
border-radius: 50%;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
/* -- Image Column -- */
.hp-image-column {
display: flex;
flex-direction: column;
gap: 15px;
}
.hp-image-container {
position: relative;
border-radius: 0px;
overflow: visible; /* Allow featured ribbon to extend beyond container */
}
.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;
text-align: left;
}
.hp-info-item {
font-size: 0.9em;
}
.hp-info-label {
font-weight: 600;
color: #333;
margin-right: 5px;
}
.hp-info-value {
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: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.gallery-image-row {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
}
.gallery-image-row.existing {
border-top: 3px solid #5d624b;
}
.gallery-image-row.new {
border-top: 3px solid #aaa;
}
/* Preview image area (top of card) */
.gallery-preview-section {
width: 100%;
aspect-ratio: 4/3;
background: #f5f5f5;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-preview-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-preview-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
color: #ccc;
font-size: 2.5em;
}
.gallery-row-number {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 0.75em;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
}
/* Card content area (form fields) */
.gallery-fields-section {
padding: 12px;
flex: 1;
}
.gallery-field {
margin-bottom: 10px;
}
.gallery-field:last-child {
margin-bottom: 0;
}
.gallery-field label {
display: block;
margin-bottom: 4px;
font-weight: 600;
color: #555;
font-size: 0.8em;
}
.gallery-field input[type="text"],
.gallery-field input[type="url"] {
width: 100%;
padding: 6px 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 0.85em;
}
.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.75em;
margin-top: 3px;
}
/* Card footer: actions */
.gallery-actions-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: #fafafa;
border-top: 1px solid #eee;
}
.gallery-reorder-buttons {
display: flex;
gap: 4px;
}
.reorder-btn {
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
width: 28px;
height: 26px;
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-delete {
margin: 0;
}
.gallery-delete-label {
display: flex !important;
align-items: center;
justify-content: center;
color: #999;
cursor: pointer;
font-weight: normal !important;
font-size: 0.85em;
gap: 4px;
transition: color 0.2s;
}
.gallery-delete-label:hover {
color: #d9534f;
}
.gallery-delete-label input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
}
/* Hide the old header - no longer needed */
.gallery-row-header {
display: none;
}
.gallery-row-left {
display: none;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.gallery-form-container {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (max-width: 400px) {
.gallery-form-container {
grid-template-columns: 1fr;
}
}
/* -- 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;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* 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: #daa520;
}
/* 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;
}
/* ================================================
RIBBON AWARDS (Discord Challenge/Picture Show Ribbons)
================================================ */
/* Ribbon Display Row */
.ribbon-awards-section {
margin-bottom: 20px;
}
.ribbon-awards-section h4 {
font-size: 0.9em;
color: #666;
margin-bottom: 10px;
}
.ribbon-display-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Ribbon Event Grouping */
.ribbon-event-group {
margin-bottom: 20px;
padding: 15px;
background: #fafaf8;
border-radius: 8px;
border-left: 3px solid #9aa570;
}
.ribbon-event-group:last-child {
margin-bottom: 0;
}
.ribbon-event-title {
font-size: 0.95em;
font-weight: 600;
color: #5d624b;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 1px solid #e0e0e0;
}
/* Individual Ribbon */
.ribbon-display {
text-align: center;
cursor: help;
position: relative;
}
.ribbon-display img {
height: 120px; /* 50% bigger than original 80px */
width: auto;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
transition: transform 0.2s ease;
}
.ribbon-display:hover img {
transform: scale(1.05);
}
/* Custom Tooltip for Ribbons */
.ribbon-display .ribbon-tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #5d624b;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.85em;
white-space: nowrap;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transition: opacity 0.2s ease, visibility 0.2s ease;
margin-bottom: 8px;
}
.ribbon-display .ribbon-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #5d624b;
}
.ribbon-display:hover .ribbon-tooltip {
visibility: visible;
opacity: 1;
}
.ribbon-tooltip-show {
font-weight: bold;
display: block;
}
.ribbon-tooltip-date {
font-size: 0.9em;
opacity: 0.9;
}
/* Featured Ribbon Overlay (on profile image) - Upper LEFT corner per wireframe */
.featured-ribbon-overlay {
position: absolute;
top: -40px; /* Align rosette center with top corner */
left: -80px; /* Center ribbon on left edge of image */
z-index: 10;
}
.featured-ribbon-overlay img {
height: 230px; /* ~77% of previous size per feedback */
width: auto;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
/* Custom Tooltip for Featured Ribbon */
.featured-ribbon-overlay .ribbon-tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
background: #5d624b;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.85em;
white-space: nowrap;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transition: opacity 0.2s ease, visibility 0.2s ease;
margin-top: 8px;
}
.featured-ribbon-overlay .ribbon-tooltip::after {
content: '';
position: absolute;
bottom: 100%;
left: 20px;
border: 6px solid transparent;
border-bottom-color: #5d624b;
}
.featured-ribbon-overlay:hover .ribbon-tooltip {
visibility: visible;
opacity: 1;
}
/* Placement Badge Colors (for admin/staff views) */
.placement-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.85em;
font-weight: bold;
color: white;
}
.placement-badge.placement-1 { background: #d4af37; } /* Gold */
.placement-badge.placement-2 { background: #a8a9ad; } /* Silver */
.placement-badge.placement-3 { background: #cd7f32; } /* Bronze */
.placement-badge.placement-4,
.placement-badge.placement-5,
.placement-badge.placement-6 { background: #5d624b; } /* Olive */
.placement-badge.placement-7,
.placement-badge.placement-8,
.placement-badge.placement-9,
.placement-badge.placement-10 { background: #9aa570; } /* Light olive */
.placement-badge.placement-0 { background: #6c757d; } /* Participation */
/* ============================================
Site Image Management Grid (Staff Panel)
============================================ */
/* Image Grid - for scenic images and banners */
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.image-grid.banners {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.image-card {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
transition: all 0.2s ease;
}
.image-card:hover {
border-color: #9aa570;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.image-card.inactive {
opacity: 0.5;
}
.image-card-preview {
position: relative;
height: 160px;
overflow: hidden;
background: #e9e9e9;
}
.image-card-preview.banner {
height: 120px;
}
.image-card-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75em;
font-weight: bold;
color: white;
}
.image-badge.homepage {
background: #5d624b;
}
.image-badge.default {
background: #9aa570;
}
.image-card-body {
padding: 15px;
}
.image-card-body h5 {
margin: 0 0 8px 0;
font-size: 1em;
color: #333;
}
.image-toggles {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 10px;
}
.toggle-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85em;
color: #666;
cursor: pointer;
}
.toggle-label input[type="checkbox"] {
cursor: pointer;
}
.image-card-actions {
padding: 10px 15px;
border-top: 1px solid #eee;
display: flex;
gap: 8px;
}
/* Ribbon Grid - smaller cards for ribbon previews */
.ribbon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 15px;
}
.ribbon-card {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
transition: all 0.2s ease;
text-align: center;
}
.ribbon-card:hover {
border-color: #9aa570;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ribbon-card.inactive {
opacity: 0.5;
}
.ribbon-card-preview {
height: 120px;
padding: 10px;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
display: flex;
align-items: center;
justify-content: center;
}
.ribbon-card-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ribbon-card-body {
padding: 12px;
}
.ribbon-card-body h5 {
margin: 8px 0 4px 0;
font-size: 0.9em;
color: #333;
}
.ribbon-toggles {
display: flex;
justify-content: center;
margin-top: 8px;
}
.ribbon-card-actions {
padding: 10px;
border-top: 1px solid #eee;
display: flex;
justify-content: center;
gap: 8px;
}
/* Ribbon Preview Grid (for ribbon set form) */
.ribbon-preview-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.ribbon-preview-item {
text-align: center;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #f8f9fa;
}
.ribbon-preview-item img {
max-height: 60px;
max-width: 80px;
}
.ribbon-preview-label {
margin-top: 5px;
font-size: 0.85em;
}
/* 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-roles {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.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-bg-dark: #40191f; /* Darker shade for gradient (40% darker) */
--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 STAMPS - Inline SVG Approach
Uses stamp_svg template tag to render SVGs with custom colors
========================================== */
/* Stamp wrapper - positions content over the inline SVG */
.hp-stamp-wrapper {
position: relative;
display: inline-block;
filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.3)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.15));
}
/* The inline SVG takes full size of wrapper */
.hp-stamp-wrapper .stamp-svg {
display: block;
width: 100%;
height: 100%;
}
/* Content overlay - positioned absolutely over the SVG */
.hp-stamp-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
}
/* Rectangle stamp wrapper sizing */
.hp-stamp-wrapper.hp-stamp-rectangle {
width: 120px;
height: 65px;
}
.hp-stamp-wrapper.hp-stamp-rectangle .hp-stamp-content {
padding: 6px 10px;
transform: scale(0.85); /* Default: just acronym + number */
}
/* Rectangle with icon OR year (3 elements) */
.hp-stamp-wrapper.hp-stamp-rectangle.hp-stamp-has-icon:not(.hp-stamp-has-year) .hp-stamp-content,
.hp-stamp-wrapper.hp-stamp-rectangle.hp-stamp-has-year:not(.hp-stamp-has-icon) .hp-stamp-content {
transform: scale(0.75);
}
/* Rectangle with icon AND year (4 elements) */
.hp-stamp-wrapper.hp-stamp-rectangle.hp-stamp-has-icon.hp-stamp-has-year .hp-stamp-content {
transform: scale(0.65);
}
/* Circle stamp wrapper sizing */
.hp-stamp-wrapper.hp-stamp-circle {
width: 85px;
height: 85px;
}
.hp-stamp-wrapper.hp-stamp-circle .hp-stamp-content {
padding: 12px 6px;
transform: scale(0.80); /* Default: just acronym + number */
}
/* Circle with icon OR year (3 elements) */
.hp-stamp-wrapper.hp-stamp-circle.hp-stamp-has-icon:not(.hp-stamp-has-year) .hp-stamp-content,
.hp-stamp-wrapper.hp-stamp-circle.hp-stamp-has-year:not(.hp-stamp-has-icon) .hp-stamp-content {
transform: scale(0.70);
}
/* Circle with icon AND year (4 elements) */
.hp-stamp-wrapper.hp-stamp-circle.hp-stamp-has-icon.hp-stamp-has-year .hp-stamp-content {
transform: scale(0.62);
}
/* Oval stamp wrapper sizing */
.hp-stamp-wrapper.hp-stamp-oval {
width: 110px;
height: 65px;
}
.hp-stamp-wrapper.hp-stamp-oval .hp-stamp-content {
padding: 6px 12px;
transform: scale(0.85); /* Default: just acronym + number */
}
/* Oval with icon OR year (3 elements) */
.hp-stamp-wrapper.hp-stamp-oval.hp-stamp-has-icon:not(.hp-stamp-has-year) .hp-stamp-content,
.hp-stamp-wrapper.hp-stamp-oval.hp-stamp-has-year:not(.hp-stamp-has-icon) .hp-stamp-content {
transform: scale(0.76);
}
/* Oval with icon AND year (4 elements) */
.hp-stamp-wrapper.hp-stamp-oval.hp-stamp-has-icon.hp-stamp-has-year .hp-stamp-content {
transform: scale(0.68);
}
/* SVG-specific styling */
.stamp-svg-rectangle {
width: 120px;
height: 65px;
}
.stamp-svg-circle {
width: 85px;
height: 85px;
}
.stamp-svg-oval {
width: 110px;
height: 65px;
}
/* ==========================================
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 - less horizontal space */
.hp-stamp-circle .hp-stamp-icon {
font-size: 1em;
margin-bottom: 1px;
}
.hp-stamp-circle .hp-stamp-acronym {
font-size: 0.65em;
letter-spacing: 0.5px;
}
.hp-stamp-circle .hp-stamp-number {
font-size: 0.7em;
letter-spacing: 1px;
margin-top: 1px;
}
.hp-stamp-circle .hp-stamp-year {
font-size: 0.5em;
margin-top: 1px;
}
/* Compact stamp text for oval stamps - similar width to rectangle but shorter */
.hp-stamp-oval .hp-stamp-icon {
font-size: 1.1em;
margin-bottom: 1px;
}
.hp-stamp-oval .hp-stamp-acronym {
font-size: 0.7em;
}
.hp-stamp-oval .hp-stamp-number {
font-size: 0.8em;
margin-top: 1px;
}
.hp-stamp-oval .hp-stamp-year {
font-size: 0.55em;
margin-top: 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: 10px 28px 10px 14px;
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: 28px !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"] {
/* Uses global checkbox styling, just adjust size/margin for inline layout */
width: 16px;
height: 16px;
margin: 0 6px 0 0;
}
.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;
position: relative; /* For absolute positioning of edit button */
}
/* Edit button in top-right corner of header */
.sp-header-edit {
position: absolute;
top: 20px;
right: 0;
}
/* 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;
}
/* Sim Profile Placeholder - 3:4 aspect ratio (portrait) to match actual images */
.sp-image-placeholder {
width: 100%;
aspect-ratio: 3 / 4;
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #999;
font-size: 1.1em;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sp-image-placeholder i {
font-size: 4em;
margin-bottom: 10px;
opacity: 0.5;
}
/* 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;
text-align: left;
}
.sp-info-list {
display: flex;
flex-direction: column;
}
.sp-info-item {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
gap: 8px;
align-items: baseline;
padding: 4px 0;
font-size: 0.95em;
}
.sp-info-item.sp-info-spacer {
margin-top: 16px;
}
.sp-info-label {
font-weight: 600;
color: #5d624b;
white-space: nowrap;
}
.sp-info-value {
color: #555;
flex: 1;
}
.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;
}
/* -- Horses Tab V2: Image-based cards with role pills -- */
.sp-horses-grid-v2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.sp-horse-card-v2 {
background: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.sp-horse-card-v2:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* Horse image link */
.sp-horse-image-link {
display: block;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
background: #f8f8f8;
text-decoration: none;
color: inherit;
}
.sp-horse-image-link:visited {
color: inherit;
}
.sp-horse-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-horse-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
color: #ccc;
font-size: 3rem;
}
/* Employee Card Portrait Images (used on stable detail page) */
.sp-employee-image-link {
aspect-ratio: 3 / 4; /* Portrait orientation for sim images */
}
.sp-employee-image {
object-position: top center; /* Focus on face/upper body */
}
.sp-employee-placeholder {
aspect-ratio: 3 / 4;
}
/* Card content area */
.sp-horse-card-content {
padding: 12px 14px 14px;
text-align: left;
}
.sp-horse-name-v2 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 14px 0;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
line-height: 1.3;
}
.sp-horse-name-v2 a {
color: #5d624b;
text-decoration: none;
}
.sp-horse-name-v2 a:hover {
color: #4a4f3b;
text-decoration: underline;
}
/* Horse meta info (breed, owner) */
.sp-horse-meta {
margin-bottom: 16px;
}
.sp-horse-meta-item {
font-size: 0.8rem;
margin-bottom: 2px;
}
.sp-horse-meta-item:last-child {
margin-bottom: 0;
}
.sp-horse-meta-label {
font-weight: 600;
color: #333;
}
.sp-horse-meta-value {
color: #555;
}
.sp-horse-meta-value a {
color: #5d624b;
text-decoration: none;
}
.sp-horse-meta-value a:hover {
text-decoration: underline;
}
/* Role pills */
.sp-horse-roles {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.sp-role-pill {
display: inline-block;
padding: 4px 10px;
background: #5d624b;
color: white;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 500;
}
/* -- 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;
}
/* Horses Tab V2 tablet - 3 columns */
.sp-horses-grid-v2 {
grid-template-columns: repeat(3, 1fr);
}
}
/* -- 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;
}
/* Horses Tab V2 mobile */
.sp-horses-grid-v2 {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.sp-horse-card-content {
padding: 12px;
}
.sp-horse-name-v2 {
font-size: 1rem;
}
/* Edit button mobile position */
.sp-header-edit {
top: 10px;
right: 15px;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.sp-horses-grid-v2 {
grid-template-columns: 1fr;
}
}
/* ========================================
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-card-title {
color: #5d624b;
margin: 0 0 15px 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;
}
/* Admin/Staff Section Boxes */
.admin-section-box {
background: #f5f5f5;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
}
.admin-panel-box {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
border: 1px solid var(--color-border);
}
.admin-content-box {
background: white;
padding: 10px;
border-radius: 3px;
border: 1px solid var(--color-border);
}
/* Admin Detail Grid (label/value pairs) */
.admin-detail-grid {
display: grid;
grid-template-columns: 200px 1fr;
gap: 10px;
margin-bottom: 15px;
}
/* NOTE: .form-label-block defined in FORM SECTIONS & CARDS section */
/* Guidelines/Info Box */
.admin-guidelines-box {
margin-top: 30px;
padding: 15px;
background: #fff3cd;
border-left: 4px solid #ffc107;
border-radius: 3px;
}
/* Additional spacing utilities (pixel-based) */
.mb-5px { margin-bottom: 5px; }
.mb-30 { margin-bottom: 30px; }
.mt-5px { margin-top: 5px; }
.my-20 { margin: 20px 0; }
.my-30 { margin: 30px 0; }
.ml-10 { margin-left: 10px; }
/* Status result boxes (for approved/denied states) */
.status-result {
margin-top: 20px;
padding: 15px;
border-radius: 3px;
}
.status-result-approved {
background: #d4edda;
border-left: 4px solid #9aa570;
}
.status-result-denied {
background: #f8d7da;
border-left: 4px solid #dc3545;
}
/* Form section divider */
.form-divider {
margin: 30px 0;
border: none;
border-top: 1px solid var(--color-border);
}
/* ========================================
ADMIN DASHBOARD
======================================== */
/* Section Layout */
.admin-section {
margin: 30px 0;
padding: 25px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.admin-section-header {
color: var(--color-primary);
font-size: 1.3em;
margin: 0 0 20px 0;
padding-bottom: 12px;
border-bottom: 2px solid #eee;
display: flex;
align-items: center;
gap: 10px;
}
.admin-section-badge {
font-size: 0.6em;
background: #ffc107;
color: #333;
padding: 4px 10px;
border-radius: 12px;
font-weight: normal;
}
.admin-section-note {
font-size: 0.7em;
font-weight: normal;
color: #888;
margin-left: 10px;
}
/* Action Center Grid */
.admin-action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
}
.admin-action-card {
display: flex;
align-items: center;
padding: 15px 20px;
background: #f8f9fa;
border: 2px solid #eee;
border-radius: 8px;
text-decoration: none;
color: #333;
transition: all 0.2s;
}
.admin-action-card:hover {
border-color: var(--color-primary);
background: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.admin-action-card.has-pending {
background: white;
border-color: var(--color-primary-light);
}
.admin-action-icon {
font-size: 1.8em;
color: var(--color-primary);
margin-right: 15px;
width: 45px;
text-align: center;
}
.admin-action-info {
flex: 1;
}
.admin-action-info h3 {
margin: 0 0 3px 0;
font-size: 1.05em;
color: #333;
}
.admin-action-info p {
margin: 0;
font-size: 0.85em;
color: #666;
}
.admin-action-badge {
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: bold;
font-size: 0.95em;
}
.admin-action-badge.urgent {
background: #ffc107;
color: #333;
}
.admin-action-badge.warning {
background: var(--color-primary-light);
color: white;
}
.admin-action-badge.info {
background: var(--color-primary);
color: white;
}
.admin-action-badge.clear {
background: #d4edda;
color: var(--color-primary-light);
}
/* Admin Tools Container */
.admin-tools-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.admin-tool-group {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
}
.admin-tool-group-title {
font-size: 0.95em;
color: var(--color-primary);
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 1px solid #ddd;
}
.admin-tool-group-title i {
margin-right: 6px;
}
.admin-tool-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-tool-links a {
display: flex;
align-items: center;
padding: 8px 10px;
color: #333;
text-decoration: none;
font-size: 0.9em;
border-radius: 4px;
transition: background 0.2s;
}
.admin-tool-links a:hover {
background: white;
color: var(--color-primary);
}
.admin-tool-links a i {
width: 20px;
margin-right: 8px;
color: #666;
}
.admin-tool-links a:hover i {
color: var(--color-primary);
}
.tool-badge {
margin-left: auto;
background: var(--color-primary);
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.8em;
}
/* Admin Stats Row */
.admin-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}
.admin-stat-card {
background: #f8f9fa;
border-radius: 8px;
padding: 20px 15px;
text-align: center;
border-left: 4px solid var(--color-primary);
}
.admin-stat-value {
font-size: 2em;
font-weight: bold;
color: var(--color-primary);
margin-bottom: 5px;
}
.admin-stat-label {
font-size: 0.85em;
color: #666;
}
/* Activity Row */
.admin-activity-row h3 {
font-size: 1em;
margin: 20px 0 15px 0;
}
.admin-activity-stats {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.admin-activity-stats span {
font-size: 0.9em;
color: #666;
}
.admin-activity-stats strong {
color: var(--color-primary);
}
/* Advanced Tools Section */
.admin-section-advanced {
background: #f8f9fa;
border: 2px dashed #ddd;
}
/* Admin Dashboard Responsive */
@media (max-width: 768px) {
.admin-action-grid {
grid-template-columns: 1fr;
}
.admin-tools-container {
grid-template-columns: 1fr;
}
.admin-stats-row {
grid-template-columns: repeat(2, 1fr);
}
.admin-activity-stats {
flex-direction: column;
gap: 10px;
}
}
/* ========================================
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;
}
}
/* ========================================
REWARDS & ACHIEVEMENTS
Used on character rewards dashboard
======================================== */
/* Section Cards */
.section-card {
background: white;
border: 2px solid #ddd;
border-radius: 8px;
padding: 25px;
margin: 20px 0;
text-align: left;
}
.section-card h3 {
margin: 0 0 15px 0;
color: #5d624b;
}
.section-card-unclaimed {
background: #fff3cd;
border-color: #daa520;
}
.section-card-unclaimed h3 {
color: #856404;
}
.section-card-history {
background: #f8f9fa;
}
.section-card-history h3 {
color: #666;
}
.section-subtitle {
color: #856404;
margin-bottom: 20px;
}
/* Reward Groups */
.reward-group {
background: white;
border-radius: 6px;
padding: 15px;
margin-bottom: 15px;
}
.reward-group h4 {
margin: 0 0 10px 0;
color: #5d624b;
}
.reward-group h4 a {
color: #5d624b;
text-decoration: underline;
}
.career-info {
font-weight: normal;
color: #666;
font-size: 14px;
}
.reward-description {
color: #666;
font-size: 14px;
margin: 0 0 15px 0;
}
/* Credits Grid */
.credits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 10px;
}
.credit-claim-card {
border: 1px solid #5d624b;
border-radius: 5px;
padding: 12px;
}
.credit-claim-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 10px;
}
.credit-amount {
font-size: 13px;
color: #666;
margin-top: 3px;
}
.claim-icon {
color: #5d624b;
font-size: 20px;
}
.credit-claim-actions {
display: flex;
gap: 8px;
}
.credit-claim-actions form {
flex: 1;
}
.credit-claim-actions button {
width: 100%;
}
/* Rewards Grid */
.rewards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.reward-card {
border: 1px solid #daa520;
border-radius: 5px;
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.reward-detail {
margin-left: 10px;
}
/* Achievement Categories */
.achievement-category {
margin-bottom: 25px;
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.category-header h4 {
margin: 0;
color: #333;
}
.category-progress-text {
color: #666;
font-size: 14px;
}
/* Progress Bar (for achievements) */
.progress-bar-container {
background: #e9ecef;
border-radius: 4px;
height: 8px;
margin-bottom: 15px;
overflow: hidden;
}
.progress-bar-fill {
background: linear-gradient(90deg, #5d624b, #7a8060);
height: 100%;
transition: width 0.3s ease;
}
/* Achievements Grid */
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.achievement-card {
border: 1px solid #ddd;
border-radius: 6px;
padding: 12px;
display: flex;
align-items: start;
gap: 12px;
}
.achievement-card.earned {
border-color: #5d624b;
}
.achievement-card.locked {
opacity: 0.6;
}
.achievement-card.secret {
border: 1px dashed #ccc;
opacity: 0.5;
background: #f8f9fa;
}
.achievement-icon {
font-size: 24px;
color: #aaa;
flex-shrink: 0;
}
.achievement-icon.icon-earned {
color: #5d624b;
}
.achievement-icon .svg-icon {
width: 24px;
height: 24px;
opacity: 0.6;
filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}
.achievement-icon.icon-earned .svg-icon {
opacity: 1;
filter: brightness(0) saturate(100%) invert(35%) sepia(8%) saturate(1200%) hue-rotate(50deg) brightness(95%) contrast(90%);
}
.achievement-icon.icon-secret {
color: #999;
}
.achievement-content {
flex-grow: 1;
}
.achievement-header {
display: flex;
justify-content: space-between;
align-items: start;
}
.name-earned {
color: #5d624b;
}
.name-secret {
color: #999;
}
.earned-check {
color: #5d624b;
}
.lock-icon {
color: #999;
font-size: 12px;
}
.achievement-description {
font-size: 13px;
color: #666;
margin-top: 3px;
}
.secret-description {
color: #999;
font-style: italic;
}
.achievement-reward {
font-size: 12px;
color: #856404;
margin-top: 5px;
}
.achievement-points {
font-size: 12px;
color: #5d624b;
margin-top: 3px;
}
.secret-points {
color: #999;
}
/* Custom Content Box */
.custom-content-box {
margin-top: 8px;
padding: 8px;
background: linear-gradient(135deg, #5d624b 0%, #7a8060 100%);
border-radius: 4px;
}
.cc-preview {
max-width: 100%;
border-radius: 3px;
margin-bottom: 6px;
}
.cc-description {
color: white;
font-size: 12px;
margin-bottom: 6px;
}
/* CC Download Button - ensure white text on olive background */
.custom-content-box .btn {
background: white;
color: #5d624b;
border: none;
}
.custom-content-box .btn:hover {
background: #f0f0f0;
color: #5d624b;
}
/* Claimed Rewards */
.claimed-group {
margin-bottom: 15px;
}
.claimed-group h5 {
margin: 0 0 8px 0;
color: #333;
}
.claimed-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.claimed-badge {
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px 12px;
font-size: 13px;
}
.claimed-level {
color: #999;
margin-left: 5px;
}
/* Recent Achievements */
.recent-achievements {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.recent-badge {
background: white;
border: 1px solid #5d624b;
border-radius: 4px;
padding: 8px 12px;
font-size: 13px;
}
.recent-icon {
color: #5d624b;
}
.recent-date {
color: #999;
margin-left: 5px;
}
/* Empty message for sections */
.empty-message {
color: #666;
text-align: center;
padding: 20px;
}
/* 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 #daa520;
}
.staff-alert-warning strong {
color: #856404;
}
.staff-alert-success {
background: #f0f1eb;
border: 1px solid #9aa570;
}
.staff-alert-success strong {
color: #5d624b;
}
.staff-alert-info {
background: #e8f4f8;
border: 1px solid #5d624b;
}
.staff-alert-info strong {
color: #5d624b;
}
.staff-alert-danger {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
.staff-alert-danger strong {
color: #721c24;
}
.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: 10px 28px 10px 14px;
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 {
background: white;
padding: 20px;
border-radius: 8px;
border: 1px solid #e0e0e0;
margin-bottom: 20px;
}
.staff-quick-actions .btn {
flex: 0 0 auto;
}
.staff-quick-actions h3 {
color: #5d624b;
margin: 0 0 15px 0;
}
.staff-quick-actions h4 {
margin: 0 0 10px 0;
}
/* 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: #daa520;
border-bottom-color: #daa520;
}
.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: 500;
color: #555;
}
.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: #daa520;
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,
.content-back-link a:visited {
color: #5d624b;
text-decoration: none;
font-weight: bold;
font-size: 0.9em;
}
.content-back-link a:hover {
text-decoration: underline;
}
/* Inline note callout (left border style) */
.content-note-inline {
font-size: 0.9em;
color: #666;
margin-top: 10px;
padding-left: 15px;
border-left: 2px solid #5d624b;
}
/* FAQ section */
.content-faq {
background: #f9f9f9;
}
.faq-item {
margin-bottom: 20px;
}
.faq-item:last-child {
margin-bottom: 0;
}
.faq-item h3 {
color: #5d624b;
font-size: 1em;
margin: 0 0 8px 0;
font-weight: 600;
}
.faq-item p {
margin: 0;
color: #555;
}
/* ========================================
GLOBAL FORM CONTROLS
(Consistent styling for selects, inputs, dropdowns)
📖 DEVELOPER NOTE: For dropdown styling guidance, see:
docs/development/DROPDOWN_STYLING_GUIDE.md
All