.stat-card .display-6 { letter-spacing: 0.3px; } /* The daterangepicker popup (appended to , z-index 1074) must sit above Bootstrap modals (this theme's modal z-index is 1090) so date fields in modals aren't covered. */ .daterangepicker { z-index: 1100; } /* ── Equestrian accent palette ─────────────────────────────────────────────── Decorative/branding only (hero, category icon tiles, header icons). Status colours stay on the standard semantic palette. */ :root { --eq-charcoal: #2b2926; --eq-charcoal-2: #343a33; --eq-tan: #c1a079; --eq-tan-soft: rgba(193, 160, 121, 0.16); --eq-green: #6b7a52; --eq-green-soft: rgba(107, 122, 82, 0.16); --eq-blue: #5f7d9a; --eq-blue-soft: rgba(95, 125, 154, 0.16); --eq-cream: #f4efe6; } /* Welcome hero — earthy charcoal into a deep paddock green. */ .eq-hero { position: relative; overflow: hidden; border: 0; background: linear-gradient(135deg, #2b2926 0%, #34302a 45%, #3d4a39 100%); color: var(--eq-cream); } .eq-hero .eq-hero-title { color: #fff; } .eq-hero .eq-hero-sub { color: rgba(244, 239, 230, 0.82); } /* Large horse-head watermark in the corner. */ .eq-hero-motif { position: absolute; right: 1.25rem; bottom: -1.5rem; font-size: 9rem; line-height: 1; color: var(--eq-tan); opacity: 0.15; pointer-events: none; transform: rotate(-8deg); } .eq-hero .btn-eq { background: var(--eq-tan); border: 0; color: #2b2622; font-weight: 600; } .eq-hero .btn-eq:hover { background: #cdb088; color: #2b2622; } /* Stat icon tiles — natural accents (decorative category colour, not status). The theme's .avatar-initial sets bg/colour with !important, so these must too. */ .eq-tile i { font-size: 1.4rem; line-height: 1; } .eq-tile-tan { background-color: var(--eq-tan-soft) !important; color: #8a6a44 !important; } .eq-tile-green { background-color: var(--eq-green-soft) !important; color: #56653f !important; } .eq-tile-charcoal { background-color: rgba(43, 38, 34, 0.10) !important; color: #574e44 !important; } .eq-tile-blue { background-color: var(--eq-blue-soft) !important; color: #46637e !important; } [data-bs-theme="dark"] .eq-tile-tan { color: #d6b58a !important; } [data-bs-theme="dark"] .eq-tile-green { color: #a3b585 !important; } [data-bs-theme="dark"] .eq-tile-charcoal { color: #c3b6a6 !important; } [data-bs-theme="dark"] .eq-tile-blue { color: #9fbcd6 !important; } /* Small leading icon on content-card headers */ .card-header .card-head-icon { color: var(--eq-tan); margin-right: 0.45rem; } /* Softer, warmer page background app-wide so the white cards stand out without per-card tints. Cards keep their own --bs-paper-bg (white), so only the page surface changes. Scoped to light mode; dark theme is left untouched. */ [data-bs-theme="light"] { --bs-body-bg: #f6f3ee; --bs-body-bg-rgb: 246, 243, 238; } /* Cards are borderless by default (defined by a shadow). Add a subtle warm hairline so they read cleanly on the cream surface. Targets .card directly because the theme sets the border-width on the element itself. */ [data-bs-theme="light"] .card { --bs-card-border-width: 1px; --bs-card-border-color: #e7ded1; } /* Dashboard main cards: a single masonry container that the browser balances into two equal (50/50) columns at wide widths, so neither side runs much longer than the other. Collapses to one column when narrow. */ .dash-cols > .card { margin-bottom: 1.5rem; break-inside: avoid; } @media (min-width: 1200px) { .dash-cols { column-count: 2; column-gap: 1.5rem; } } .fs-tiny { font-size: 0.65rem; letter-spacing: 0.08em; } .health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .health-dot.green { background-color: #28c76f; } .health-dot.blue { background-color: #00cfe8; } .health-dot.orange { background-color: #ff9f43; } .list-item-tight li { padding-top: 0.85rem; padding-bottom: 0.85rem; } @media (max-width: 1199.98px) { .layout-navbar-fixed .layout-wrapper:not(.layout-menu-collapsed) .layout-page, .layout-menu-fixed .layout-wrapper:not(.layout-menu-collapsed) .layout-page { padding-left: 0; } } /* Reference-data inline suggestion fields (typeahead) */ .twitter-typeahead { width: 100%; display: block !important; } .twitter-typeahead .tt-input, .twitter-typeahead .tt-hint { width: 100%; } /* Float above modals — this theme sets the modal z-index to 1090 */ .tt-menu { z-index: 1095; } /* Let the description typeahead dropdown overflow the invoice line-items table instead of being clipped by the horizontal-scroll wrapper. (overflow-x:auto forces overflow-y to auto too, which would otherwise trap the menu in a row.) */ div.table-responsive.table-responsive-visible { overflow: visible; } .flatpickr-calendar { z-index: 1095 !important; } /* Scrollable 15-minute time list inside the calendar popup (see assets/js/pickers.js). */ .fp-time-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--bs-border-color, #e7e7e8); } .fp-time-row .fp-time-label { font-size: 0.8125rem; color: var(--bs-secondary-color, #6c757d); } .fp-time-row .fp-time-scroller { flex: 1 1 auto; } /* Horse profile top-level tabs are pills; suppress the theme's auto bordered/shadowed panel around their (already card-filled) content. */ #horseProfileTabs.nav-pills ~ .tab-content { border: 0; box-shadow: none; } /* Health sub-tab panel: keep the comfortable padding on buttons/text (like the main tab cards), but let the tables span the full width of the card. */ .health-tabs .table-responsive { margin: 0 -1.25rem -1.25rem; }