/* ==========================================================================
Sidebar Redesign — Calm + Dark + Card variant
Sourced from Equuinity Redesign handoff bundle (claude.ai/design).
All tokens & rules scoped under [data-nav-layout="sidebar"] so the legacy
top-nav is unaffected.
========================================================================== */
[data-nav-layout="sidebar"] {
/* Strikemaster Blue */
--sm-50: #f0f9ff;
--sm-100: #e0f2fe;
--sm-200: #bae6fd;
--sm-300: #7dd3fc;
--sm-400: #38bdf8;
--sm-500: #0ea5e9;
--sm-600: #0284c7;
--sm-700: #0369a1;
--sm-800: #075985;
--sm-900: #0c4a6e;
--sm-950: #082f49;
/* Equine Purple */
--eq-500: #d946ef;
--eq-600: #c026d3;
--eq-700: #a21caf;
/* Indigo bridge */
--ind-500: #6366f1;
--ind-600: #4f46e5;
--ind-700: #4338ca;
--ind-900: #312e81;
/* Neutrals */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-700: #374151;
--gray-900: #111827;
/* Semantic */
--success-500: #22c55e;
--warning-500: #f59e0b;
--danger-500: #ef4444;
/* Foregrounds / borders */
--fg-1: var(--gray-900);
--fg-2: var(--gray-700);
--fg-3: var(--gray-500);
--fg-4: var(--gray-400);
--border-1: var(--gray-200);
/* Signature gradient */
--grad-primary: linear-gradient(to right, #2563eb, #9333ea);
/* Type families */
--ff-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ff-serif: 'Baskervville', 'Baskerville', Georgia, serif;
--ff-mono: ui-monospace, 'SF Mono', Menlo, monospace;
/* Motion */
--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
background:
radial-gradient(1200px 600px at 90% -10%, rgba(217,70,239,.06), transparent 60%),
radial-gradient(800px 500px at -10% 110%, rgba(14,165,233,.06), transparent 60%),
var(--gray-50);
min-height: 100vh;
font-family: var(--ff-sans);
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .nav-shell {
display: flex;
align-items: stretch;
min-height: 100vh;
position: relative;
z-index: 1;
}
[data-nav-layout="sidebar"] .nav-shell main.nav-main {
flex: 1;
min-width: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ── Plain text policy footer (replaces the giant marketing footer) ── */
[data-nav-layout="sidebar"] .nav-policy-footer {
margin-top: auto;
padding: 18px 14px 24px;
background: transparent;
color: var(--fg-3);
font-family: var(--ff-sans);
font-size: 12px;
border-top: 1px solid var(--border-1);
}
@media (min-width: 640px) {
[data-nav-layout="sidebar"] .nav-policy-footer { padding: 18px 20px 24px; }
}
@media (min-width: 1024px) {
[data-nav-layout="sidebar"] .nav-policy-footer { padding: 18px 28px 24px; }
}
[data-nav-layout="sidebar"] .nav-policy-footer-row {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 18px;
}
[data-nav-layout="sidebar"] .nav-policy-footer a {
color: var(--fg-3);
text-decoration: none;
transition: color 120ms;
}
[data-nav-layout="sidebar"] .nav-policy-footer a:hover {
color: var(--sm-700);
text-decoration: underline;
}
[data-nav-layout="sidebar"] .nav-page {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
[data-nav-layout="sidebar"] .nav-page > .legacy-page-main {
flex: 1;
}
/* ── Sidebar surface (dark variant per the design's documented default) ── */
[data-nav-layout="sidebar"] aside.nav-aside {
width: 248px;
flex-shrink: 0;
height: 100vh;
position: sticky;
top: 0;
display: flex;
flex-direction: column;
padding: 20px 18px;
box-sizing: border-box;
background: var(--sm-950);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 4px 0 24px -16px rgba(0, 0, 0, 0.4);
color: #fff;
transition: width 280ms var(--ease-std);
}
@media (max-width: 768px) {
[data-nav-layout="sidebar"] aside.nav-aside {
position: fixed;
top: 0;
left: 0;
z-index: 60;
width: 86vw;
max-width: 320px;
transform: translateX(-100%);
}
[data-nav-layout="sidebar"] aside.nav-aside[data-mobile-open="true"] {
transform: translateX(0);
}
[data-nav-layout="sidebar"] .nav-mobile-scrim {
position: fixed;
inset: 0;
background: rgba(8, 14, 24, 0.55);
backdrop-filter: blur(2px);
z-index: 55;
}
[data-nav-layout="sidebar"] .nav-mobile-toggle {
display: inline-flex !important;
}
}
@media (min-width: 769px) {
[data-nav-layout="sidebar"] .nav-mobile-toggle,
[data-nav-layout="sidebar"] .nav-mobile-scrim {
display: none !important;
}
}
/* ── Brand ── */
[data-nav-layout="sidebar"] .nav-brand {
display: inline-flex;
align-items: center;
margin-bottom: 18px;
color: #fff;
text-decoration: none;
padding: 2px 0 6px;
}
[data-nav-layout="sidebar"] .nav-brand svg {
max-width: 100%;
height: auto;
}
[data-nav-layout="sidebar"] .nav-brand-mark {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--grad-primary);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px -8px rgba(99, 102, 241, 0.6);
flex-shrink: 0;
color: #fff;
}
[data-nav-layout="sidebar"] .nav-brand-name {
font-family: var(--ff-serif);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
line-height: 1;
color: #fff;
}
[data-nav-layout="sidebar"] .nav-brand-tag {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-top: 2px;
}
/* ── Search ── */
[data-nav-layout="sidebar"] .nav-search {
position: relative;
}
[data-nav-layout="sidebar"] .nav-search > .material-symbols-outlined {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: rgba(255, 255, 255, 0.55);
pointer-events: none;
}
[data-nav-layout="sidebar"] .nav-search input {
width: 100%;
padding: 9px 56px 9px 34px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
font-size: 12.5px;
font-family: var(--ff-sans);
outline: none;
box-sizing: border-box;
color: #fff;
transition: all 150ms;
}
[data-nav-layout="sidebar"] .nav-search input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
[data-nav-layout="sidebar"] .nav-search input:focus {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
}
[data-nav-layout="sidebar"] .nav-search-kbd {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
font-family: var(--ff-mono);
letter-spacing: 0.04em;
}
/* ── Section label ── */
[data-nav-layout="sidebar"] .nav-section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin: 18px 6px 8px;
}
/* ── Nav list ── */
[data-nav-layout="sidebar"] nav.nav-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
margin-right: -6px;
padding-right: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
[data-nav-layout="sidebar"] nav.nav-list::-webkit-scrollbar {
width: 6px;
}
[data-nav-layout="sidebar"] nav.nav-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 999px;
}
[data-nav-layout="sidebar"] nav.nav-list::-webkit-scrollbar-track {
background: transparent;
}
/* ── Top-level nav button ── */
[data-nav-layout="sidebar"] .nav-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
font-family: var(--ff-sans);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.005em;
text-align: left;
color: rgba(255, 255, 255, 0.78);
background: transparent;
border: 1px solid transparent;
box-shadow: none;
transition: background 140ms var(--ease-std), color 140ms var(--ease-std), box-shadow 180ms var(--ease-std);
text-decoration: none;
}
[data-nav-layout="sidebar"] .nav-item:hover {
color: #fff;
background: rgba(255, 255, 255, 0.06);
}
[data-nav-layout="sidebar"] .nav-item[aria-current="true"],
[data-nav-layout="sidebar"] .nav-item.is-active {
/* Card active state, dark — from prototype */
background: rgba(255, 255, 255, 0.14);
color: #fff;
box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.18);
}
[data-nav-layout="sidebar"] .nav-item-icon {
font-size: 18px;
width: 20px;
text-align: center;
opacity: 0.9;
flex-shrink: 0;
line-height: 1;
}
/* Font Awesome icons (e.g. .fa-horse) sit a touch heavier than Material Symbols
at the same font-size. Knock back to 16px so the row height stays consistent. */
[data-nav-layout="sidebar"] i.nav-item-icon {
font-size: 16px;
}
[data-nav-layout="sidebar"] .nav-item-label {
flex: 1;
}
[data-nav-layout="sidebar"] .nav-item-chev {
font-size: 14px;
opacity: 0.55;
transition: transform 200ms var(--ease-std);
}
[data-nav-layout="sidebar"] .nav-item[aria-expanded="true"] .nav-item-chev {
transform: rotate(90deg);
}
/* ── Sub-items ── */
[data-nav-layout="sidebar"] .nav-sub {
overflow: hidden;
max-height: 0;
transition: max-height 280ms var(--ease-std);
}
[data-nav-layout="sidebar"] .nav-sub[data-open="true"] {
max-height: 400px;
}
[data-nav-layout="sidebar"] .nav-sub-inner {
padding: 4px 0 6px 30px;
display: flex;
flex-direction: column;
gap: 1px;
}
[data-nav-layout="sidebar"] .nav-sub-item {
display: flex;
align-items: center;
gap: 10px;
background: transparent;
border: 0;
padding: 6px 10px;
border-radius: 8px;
color: rgba(255, 255, 255, 0.62);
font-weight: 500;
font-size: 12.5px;
text-align: left;
transition: color 120ms;
text-decoration: none;
}
[data-nav-layout="sidebar"] .nav-sub-item:hover {
color: #fff;
}
[data-nav-layout="sidebar"] .nav-sub-item[aria-current="true"] {
color: #fff;
font-weight: 700;
}
[data-nav-layout="sidebar"] .nav-sub-bullet {
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.25);
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .nav-sub-item:hover .nav-sub-bullet,
[data-nav-layout="sidebar"] .nav-sub-item[aria-current="true"] .nav-sub-bullet {
background: var(--sm-300);
}
/* ── Sidebar footer (game time / season block) ── */
[data-nav-layout="sidebar"] .nav-footer {
padding-top: 12px;
margin-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-nav-layout="sidebar"] .nav-season {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
[data-nav-layout="sidebar"] .nav-season-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .nav-season-meta {
min-width: 0;
flex: 1;
}
[data-nav-layout="sidebar"] .nav-season-primary {
font-family: var(--ff-serif);
font-size: 14px;
color: #fff;
line-height: 1.2;
}
[data-nav-layout="sidebar"] .nav-season-secondary {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.55);
font-family: var(--ff-mono);
margin-top: 3px;
letter-spacing: 0.02em;
}
/* ── Top bar (sticky in main column) ── */
[data-nav-layout="sidebar"] .nav-topbar {
position: sticky;
top: 0;
z-index: 30;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
border-bottom: 1px solid transparent;
transition: border-color 200ms, box-shadow 200ms;
}
[data-nav-layout="sidebar"] .nav-topbar[data-scrolled="true"] {
border-bottom-color: var(--border-1);
box-shadow: 0 4px 16px -8px rgba(15, 23, 42, 0.12);
}
/* Shared content rail: topbar inner + .dash-sb + policy footer all share
the same 1400px max-width (matching the docs detail layout) and centered
alignment. The hero is the exception — it runs full-bleed across the
main column. */
[data-nav-layout="sidebar"] .nav-topbar-inner {
max-width: 1400px;
margin: 0 auto;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 16px;
}
@media (min-width: 640px) {
[data-nav-layout="sidebar"] .nav-topbar-inner { padding: 12px 20px; }
}
@media (min-width: 1024px) {
[data-nav-layout="sidebar"] .nav-topbar-inner { padding: 12px 28px; }
}
@media (max-width: 640px) {
[data-nav-layout="sidebar"] .nav-topbar-inner {
padding: 10px 14px;
gap: 8px;
}
}
/* On mobile, drop the breadcrumb to make room for the hamburger + chips. */
@media (max-width: 768px) {
[data-nav-layout="sidebar"] .nav-breadcrumb {
display: none !important;
}
}
[data-nav-layout="sidebar"] .nav-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
/* Flush-left: no padding/margin so the first crumb (Equuinity) sits at
the same column as the dashboard cards' left edges. */
padding-left: 0;
margin-left: 0;
}
[data-nav-layout="sidebar"] .nav-breadcrumb-root,
[data-nav-layout="sidebar"] .nav-breadcrumb-section {
font-size: 12px;
font-weight: 700;
color: var(--fg-3);
letter-spacing: 0.04em;
white-space: nowrap;
text-decoration: none;
transition: color 120ms;
}
[data-nav-layout="sidebar"] a.nav-breadcrumb-root:hover,
[data-nav-layout="sidebar"] a.nav-breadcrumb-section:hover {
color: var(--sm-700);
}
[data-nav-layout="sidebar"] .nav-breadcrumb-sep {
font-size: 11px;
color: var(--fg-4);
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .nav-breadcrumb-page {
font-size: 13px;
font-weight: 700;
color: var(--fg-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* ── Currency chips ── */
[data-nav-layout="sidebar"] .nav-currency {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 6px 12px 6px 6px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: background 140ms, transform 140ms, box-shadow 140ms;
font-family: var(--ff-sans);
}
[data-nav-layout="sidebar"] .nav-currency:hover {
background: var(--gray-50);
transform: translateY(-1px);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
[data-nav-layout="sidebar"] .nav-currency-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
color: #fff;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .nav-currency-glyph[data-kind="eq"] {
background: linear-gradient(135deg, var(--sm-500), var(--ind-600));
font-family: var(--ff-serif);
font-size: 15px;
box-shadow: 0 2px 6px -2px rgba(99, 102, 241, 0.5);
}
[data-nav-layout="sidebar"] .nav-currency-glyph[data-kind="co"] {
background: linear-gradient(135deg, #f59e0b, #b45309);
font-size: 12px;
box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.55);
}
[data-nav-layout="sidebar"] .nav-currency-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
[data-nav-layout="sidebar"] .nav-currency-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-3);
line-height: 1;
}
[data-nav-layout="sidebar"] .nav-currency-value {
font-size: 13px;
font-weight: 700;
color: var(--fg-1);
font-family: var(--ff-mono);
font-variant-numeric: tabular-nums;
line-height: 1.2;
margin-top: 2px;
white-space: nowrap;
}
/* ── Top bar icon buttons ── */
[data-nav-layout="sidebar"] .nav-iconbtn {
position: relative;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--border-1);
background: #fff;
color: var(--fg-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .nav-iconbtn:hover {
background: var(--gray-50);
}
[data-nav-layout="sidebar"] .nav-iconbtn .material-symbols-outlined {
font-size: 18px;
}
[data-nav-layout="sidebar"] .nav-iconbtn-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
color: #fff;
font-size: 9.5px;
font-weight: 800;
font-family: var(--ff-sans);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
/* ── Top bar divider ── */
[data-nav-layout="sidebar"] .nav-divider {
width: 1px;
height: 24px;
background: var(--border-1);
flex-shrink: 0;
}
/* ── User chip ── */
[data-nav-layout="sidebar"] .nav-userchip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px 12px 4px 4px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: background 140ms;
font-family: var(--ff-sans);
}
[data-nav-layout="sidebar"] .nav-userchip:hover {
background: var(--gray-50);
}
[data-nav-layout="sidebar"] .nav-userchip-avatar {
position: relative;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .nav-userchip-avatar > img,
[data-nav-layout="sidebar"] .nav-userchip-avatar > .nav-userchip-avatar-fallback {
width: 30px;
height: 30px;
border-radius: 999px;
object-fit: cover;
background: linear-gradient(135deg, var(--sm-500), var(--eq-600));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
border: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .nav-userchip-dot {
position: absolute;
bottom: -1px;
right: -1px;
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--success-500);
border: 2px solid #fff;
}
[data-nav-layout="sidebar"] .nav-userchip-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
[data-nav-layout="sidebar"] .nav-userchip-name {
font-size: 12.5px;
font-weight: 700;
color: var(--fg-1);
line-height: 1.15;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .nav-userchip-tag {
color: var(--fg-3);
font-weight: 500;
}
[data-nav-layout="sidebar"] .nav-userchip-sub {
font-size: 10.5px;
color: var(--fg-3);
line-height: 1.2;
margin-top: 1px;
white-space: nowrap;
}
/* ── Mobile open toggle (rendered in topbar) ── */
[data-nav-layout="sidebar"] .nav-mobile-toggle {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--border-1);
background: #fff;
color: var(--fg-2);
cursor: pointer;
flex-shrink: 0;
}
/* ── Page content wrapper inside main column (top-of-file definition wins;
see also the .nav-page block earlier that adds flex column + auto-stretch
so the policy footer sticks to the bottom even on short pages). ── */
/* ── Generic popover used by topbar dropdowns ── */
[data-nav-layout="sidebar"] .nav-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 280px;
max-width: 360px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 14px;
box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.22), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
z-index: 200;
overflow: hidden;
animation: nav-pop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes nav-pop-in {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
[data-nav-layout="sidebar"] .nav-popover-header {
padding: 12px 14px;
border-bottom: 1px solid var(--border-1);
display: flex;
align-items: center;
justify-content: space-between;
}
[data-nav-layout="sidebar"] .nav-popover-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .nav-popover-link {
border: 0;
background: transparent;
color: var(--sm-600);
font-size: 11px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
}
[data-nav-layout="sidebar"] .nav-popover-list {
padding: 4px 0;
max-height: 360px;
overflow-y: auto;
}
[data-nav-layout="sidebar"] .nav-popover-item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 9px 14px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--fg-1);
text-decoration: none;
font-family: var(--ff-sans);
}
[data-nav-layout="sidebar"] .nav-popover-item:hover {
background: var(--gray-50);
}
[data-nav-layout="sidebar"] .nav-popover-item.is-danger {
color: var(--danger-500);
}
[data-nav-layout="sidebar"] .nav-popover-item .material-symbols-outlined {
font-size: 18px;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .nav-popover-item-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
[data-nav-layout="sidebar"] .nav-popover-item-label {
font-size: 13px;
font-weight: 500;
line-height: 1.2;
color: var(--fg-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .nav-popover-item-sub {
font-size: 11px;
color: var(--fg-3);
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Unread emphasis — bold label + accent dot indicator */
[data-nav-layout="sidebar"] .nav-popover-item.is-unread {
background: color-mix(in oklab, var(--ind-600) 6%, transparent);
}
[data-nav-layout="sidebar"] .nav-popover-item.is-unread:hover {
background: color-mix(in oklab, var(--ind-600) 11%, var(--bg-1, #fff));
}
[data-nav-layout="sidebar"] .nav-popover-item.is-unread .nav-popover-item-label {
font-weight: 700;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .nav-popover-item.is-unread .nav-popover-item-sub {
color: var(--fg-2);
}
[data-nav-layout="sidebar"] .nav-popover-item.is-unread .material-symbols-outlined {
color: var(--ind-600);
}
/* Right-aligned timestamp pill */
[data-nav-layout="sidebar"] .nav-popover-item-time {
flex-shrink: 0;
font-size: 10.5px;
color: var(--fg-4);
align-self: flex-start;
margin-top: 1px;
font-variant-numeric: tabular-nums;
}
[data-nav-layout="sidebar"] .nav-popover-item.is-unread .nav-popover-item-time {
color: var(--ind-600);
font-weight: 700;
}
/* Dark-mode overrides */
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-item.is-unread {
background: rgba(99, 102, 241, .14);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-item.is-unread:hover {
background: rgba(99, 102, 241, .22);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-item.is-unread .nav-popover-item-label {
color: #f1f5f9;
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-item.is-unread .material-symbols-outlined,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-item.is-unread .nav-popover-item-time {
color: #a5b4fc;
}
/* ── Reset main page padding/colors that the legacy app wraps in.
Background transparency cascades through; flex/sizing handled by the
earlier .nav-page block. ── */
[data-nav-layout="sidebar"] .nav-page > .legacy-page-main {
background: transparent !important;
}
/* ── Legacy page-content rails normalize to the same 1400px cap as
.dash-sb / .nav-topbar-inner / .nav-policy-footer-row so every page
shares one shared content column. ── */
[data-nav-layout="sidebar"] .nav-page .container,
[data-nav-layout="sidebar"] .nav-page .max-w-screen-sm,
[data-nav-layout="sidebar"] .nav-page .max-w-screen-md,
[data-nav-layout="sidebar"] .nav-page .max-w-screen-lg,
[data-nav-layout="sidebar"] .nav-page .max-w-screen-xl,
[data-nav-layout="sidebar"] .nav-page .max-w-screen-2xl,
[data-nav-layout="sidebar"] .nav-page .max-w-7xl,
[data-nav-layout="sidebar"] .nav-page .max-w-6xl,
[data-nav-layout="sidebar"] .nav-page .max-w-5xl {
max-width: 1400px !important;
}
/* ── User popover (extended profile dropdown — mirrors legacy nav, no balances) ── */
[data-nav-layout="sidebar"] .nav-popover-user {
width: 320px;
max-width: 90vw;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
[data-nav-layout="sidebar"] .nav-userpop-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .nav-userpop-avatar {
width: 48px;
height: 48px;
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
border: 2px solid var(--border-1);
background: linear-gradient(135deg, var(--sm-500), var(--eq-600));
display: inline-flex;
align-items: center;
justify-content: center;
}
[data-nav-layout="sidebar"] .nav-userpop-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[data-nav-layout="sidebar"] .nav-userpop-avatar-fallback {
color: #fff;
font-weight: 700;
font-size: 18px;
}
[data-nav-layout="sidebar"] .nav-userpop-meta {
min-width: 0;
flex: 1;
}
[data-nav-layout="sidebar"] .nav-userpop-name {
font-size: 14px;
font-weight: 700;
color: var(--fg-1);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nav-layout="sidebar"] .nav-userpop-email {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nav-layout="sidebar"] .nav-userpop-tier {
font-size: 11px;
font-weight: 700;
color: var(--sm-700);
margin-top: 3px;
}
[data-nav-layout="sidebar"] .nav-userpop-sub-strip {
padding: 12px 16px;
background: var(--gray-50);
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .nav-userpop-sub-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
[data-nav-layout="sidebar"] .nav-userpop-sub-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--fg-2);
}
[data-nav-layout="sidebar"] .nav-userpop-sub-badge {
font-size: 10.5px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
letter-spacing: 0.02em;
}
[data-nav-layout="sidebar"] .nav-userpop-sub-cta {
display: block;
width: 100%;
padding: 7px 10px;
background: var(--eq-700);
color: #fff;
font-size: 11.5px;
font-weight: 700;
text-align: center;
border-radius: 6px;
text-decoration: none;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .nav-userpop-sub-cta:hover {
background: var(--eq-800, #86198f);
}
/* ────────────────────────────────────────────────────────────────────
Dashboard (sidebar layout) — mirrors Dashboard.jsx from the
Equuinity Redesign handoff. Scoped to .dash-sb so it can't bleed
into the legacy dashboard.
──────────────────────────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb {
/* Constrained, centered rail (matches the docs detail layout's 1400px
max-width). The hero is a sibling that lives OUTSIDE this rail and
runs full-bleed across the main column. */
max-width: 1400px;
margin: 0 auto;
padding: 16px 14px 60px;
display: flex;
flex-direction: column;
gap: 14px;
box-sizing: border-box;
width: 100%;
}
@media (min-width: 640px) { [data-nav-layout="sidebar"] .dash-sb { padding: 18px 20px 60px; } }
@media (min-width: 1024px) { [data-nav-layout="sidebar"] .dash-sb { padding: 22px 28px 80px; } }
/* ── Hero — full-bleed across the main content column, sitting flush
against the sticky topbar. The hero background extends edge-to-edge
while its inner content (title + pills + season card) stays aligned
to the same 1600px rail as the rest of the page. ── */
[data-nav-layout="sidebar"] .dash-sb-hero {
position: relative;
width: 100%;
border-radius: 0;
overflow: hidden;
min-height: 168px;
background-color: var(--ind-900);
background-size: cover;
background-position: center;
box-shadow: none;
}
[data-nav-layout="sidebar"] .dash-sb-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(105deg, rgba(12,30,56,.78) 0%, rgba(12,30,56,.45) 50%, rgba(74,4,78,.35) 100%);
pointer-events: none;
}
[data-nav-layout="sidebar"] .dash-sb-hero-inner {
position: relative;
/* Match the dashboard rail (1400px max-width, centered) so the hero's
headline/pills/season indicator align with the cards underneath.
The hero's background still spans the full main column. */
max-width: 1400px;
margin: 0 auto;
padding: 24px 14px;
display: flex;
justify-content: space-between;
align-items: flex-end;
min-height: 168px;
color: #fff;
gap: 24px;
flex-wrap: wrap;
}
@media (min-width: 640px) { [data-nav-layout="sidebar"] .dash-sb-hero-inner { padding: 24px 20px; } }
@media (min-width: 1024px) { [data-nav-layout="sidebar"] .dash-sb-hero-inner { padding: 28px 28px; } }
[data-nav-layout="sidebar"] .dash-sb-hero-text { max-width: 560px; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-hero-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
opacity: .85;
margin-bottom: 8px;
}
[data-nav-layout="sidebar"] .dash-sb-hero-title {
font-family: var(--ff-serif);
font-weight: 400;
font-size: 32px;
letter-spacing: -.01em;
line-height: 1.05;
margin: 0;
color: #fff;
text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
[data-nav-layout="sidebar"] .dash-sb-hero-sub {
font-size: 13.5px;
opacity: .92;
margin: 8px 0 0;
color: #fff;
line-height: 1.55;
}
[data-nav-layout="sidebar"] .dash-sb-hero-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
flex-wrap: wrap;
align-self: flex-end;
align-items: center;
}
[data-nav-layout="sidebar"] .dash-sb-hero-btn {
padding: 10px 16px;
border-radius: 10px;
background: transparent;
border: 1px solid rgba(255,255,255,.22);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-hero-btn:hover { background: rgba(255,255,255,.08); }
[data-nav-layout="sidebar"] .dash-sb-hero-btn-glass {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.3);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
[data-nav-layout="sidebar"] .dash-sb-hero-btn-glass:hover { background: rgba(255,255,255,.22); }
[data-nav-layout="sidebar"] .dash-sb-hero-btn-solid {
background: #fff;
color: #4338ca;
border-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
[data-nav-layout="sidebar"] .dash-sb-hero-btn-solid:hover { background: #f1f5f9; color: #312e81; }
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-hero-btn-solid { color: #4338ca; }
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-hero-btn-solid:hover { color: #312e81; }
[data-nav-layout="sidebar"] .dash-sb-hero-btn .material-symbols-outlined { font-size: 16px; }
/* ── Quick Stats strip ───────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-quickstats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 768px) { [data-nav-layout="sidebar"] .dash-sb-quickstats { grid-template-columns: repeat(2, 1fr); } }
[data-nav-layout="sidebar"] .dash-sb-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(15,23,42,.08);
text-decoration: none;
color: inherit;
transition: transform 140ms var(--ease-std), box-shadow 140ms var(--ease-std);
}
[data-nav-layout="sidebar"] .dash-sb-stat:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px -2px rgba(15,23,42,.12);
}
[data-nav-layout="sidebar"] .dash-sb-stat-chip {
width: 40px; height: 40px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .dash-sb-stat-chip .material-symbols-outlined { font-size: 22px; }
[data-nav-layout="sidebar"] .dash-sb-stat-label {
font-size: 10.5px;
font-weight: 700;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: .1em;
}
[data-nav-layout="sidebar"] .dash-sb-stat-value {
font-family: var(--ff-serif);
font-size: 26px;
line-height: 1.1;
margin-top: 2px;
color: var(--fg-1);
font-weight: 400;
}
/* ── 2-column grid ───────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 14px;
}
@media (max-width: 1024px) { [data-nav-layout="sidebar"] .dash-sb-grid { grid-template-columns: 1fr; } }
[data-nav-layout="sidebar"] .dash-sb-col {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
/* ── Generic card ────────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-card {
background: #fff;
border: 1px solid var(--border-1);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
[data-nav-layout="sidebar"] .dash-sb-card-head {
padding: 14px 18px 8px;
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 1px solid var(--border-1);
gap: 12px;
}
[data-nav-layout="sidebar"] .dash-sb-kicker {
font-size: 10px;
font-weight: 700;
color: var(--eq-700);
text-transform: uppercase;
letter-spacing: .14em;
}
[data-nav-layout="sidebar"] .dash-sb-title {
font-family: var(--ff-serif);
font-size: 18px;
font-weight: 400;
margin: 2px 0 0;
line-height: 1.1;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .dash-sb-card-action-ghost {
padding: 6px 12px;
border-radius: 8px;
background: transparent;
color: var(--ind-600);
border: 1px solid var(--border-1);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: background 140ms;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .dash-sb-card-action-ghost:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-card-action-ghost .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .dash-sb-card-foot {
display: block;
padding: 10px 16px;
text-align: center;
background: var(--gray-50);
border-top: 1px solid var(--border-1);
font-size: 12px;
color: var(--ind-600);
font-weight: 600;
text-decoration: none;
}
[data-nav-layout="sidebar"] .dash-sb-card-foot:hover { background: var(--gray-100); }
[data-nav-layout="sidebar"] .dash-sb-empty {
padding: 32px 20px;
text-align: center;
color: var(--fg-3);
font-size: 13px;
}
[data-nav-layout="sidebar"] .dash-sb-empty .material-symbols-outlined { font-size: 32px; color: var(--fg-4); display: block; margin-bottom: 6px; }
/* ── News card ───────────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-news-featured {
border-bottom: 1px solid var(--border-1);
background: linear-gradient(135deg, rgba(99,102,241,.04) 0%, rgba(217,70,239,.04) 100%);
}
[data-nav-layout="sidebar"] .dash-sb-news-featured-body { padding: 14px 18px 16px; }
[data-nav-layout="sidebar"] .dash-sb-news-featured-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
[data-nav-layout="sidebar"] .dash-sb-news-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
background: var(--grad-primary);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
box-shadow: 0 4px 14px -4px rgba(99,102,241,.5);
}
[data-nav-layout="sidebar"] .dash-sb-news-pill .material-symbols-outlined { font-size: 11px; }
[data-nav-layout="sidebar"] .dash-sb-news-time { font-size: 10.5px; color: var(--fg-3); }
[data-nav-layout="sidebar"] .dash-sb-news-title {
font-family: var(--ff-serif);
font-size: 18px;
line-height: 1.2;
margin: 0;
font-weight: 400;
letter-spacing: -.005em;
}
[data-nav-layout="sidebar"] .dash-sb-news-title a { color: var(--fg-1); text-decoration: none; }
[data-nav-layout="sidebar"] .dash-sb-news-title a:hover { color: var(--ind-700); }
[data-nav-layout="sidebar"] .dash-sb-news-body {
font-size: 12.5px;
line-height: 1.55;
color: var(--fg-2);
margin: 6px 0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-nav-layout="sidebar"] .dash-sb-news-readmore {
font-size: 12px;
font-weight: 700;
color: var(--ind-600);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
[data-nav-layout="sidebar"] .dash-sb-news-readmore .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .dash-sb-news-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--border-1);
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-news-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-news-row:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-date-badge {
flex-shrink: 0;
width: 52px;
text-align: center;
border-radius: 10px;
padding: 6px 0 7px;
background: linear-gradient(180deg, #f0f9ff 0%, #fdf4ff 100%);
border: 1px solid var(--sm-100, #e0f2fe);
}
[data-nav-layout="sidebar"] .dash-sb-date-day {
font-family: var(--ff-serif);
font-size: 22px;
line-height: 1;
color: var(--ind-700);
font-weight: 400;
}
[data-nav-layout="sidebar"] .dash-sb-date-month {
font-size: 9.5px;
font-weight: 700;
letter-spacing: .14em;
color: var(--ind-600);
text-transform: uppercase;
margin-top: 3px;
}
[data-nav-layout="sidebar"] .dash-sb-news-row-body { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-news-row-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
[data-nav-layout="sidebar"] .dash-sb-news-row-title {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
line-height: 1.3;
margin-bottom: 3px;
text-decoration: none;
}
[data-nav-layout="sidebar"] .dash-sb-news-row-title:hover { color: var(--ind-700); }
[data-nav-layout="sidebar"] .dash-sb-news-row-body-excerpt {
font-size: 11.5px;
color: var(--fg-3);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Competitions card ───────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-comp-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 16px;
gap: 12px;
border-bottom: 1px solid var(--border-1);
text-decoration: none;
color: inherit;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-comp-row:last-of-type { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-comp-row:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-comp-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-comp-name {
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nav-layout="sidebar"] .dash-sb-comp-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
[data-nav-layout="sidebar"] .dash-sb-comp-sub > span:first-child { font-size: 11px; color: var(--fg-3); }
[data-nav-layout="sidebar"] .dash-sb-comp-dot { color: var(--fg-4); }
[data-nav-layout="sidebar"] .dash-sb-grade-chip {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
}
[data-nav-layout="sidebar"] .dash-sb-comp-date { text-align: right; flex-shrink: 0; }
[data-nav-layout="sidebar"] .dash-sb-comp-date-day { font-size: 11.5px; color: var(--fg-2); font-weight: 600; }
[data-nav-layout="sidebar"] .dash-sb-comp-date-entries { font-size: 10.5px; color: var(--ind-600); margin-top: 2px; }
/* ── Game Time card ──────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-gametime { padding: 16px 18px; }
[data-nav-layout="sidebar"] .dash-sb-gametime-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
[data-nav-layout="sidebar"] .dash-sb-gametime-title {
font-family: var(--ff-serif);
font-size: 22px;
line-height: 1.1;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .dash-sb-gametime-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 4px; }
[data-nav-layout="sidebar"] .dash-sb-gametime-icon { font-size: 28px; }
[data-nav-layout="sidebar"] .dash-sb-gametime-progress-wrap { margin-bottom: 12px; }
[data-nav-layout="sidebar"] .dash-sb-gametime-progress-meta { display: flex; justify-content: space-between; margin-bottom: 6px; }
[data-nav-layout="sidebar"] .dash-sb-gametime-pct { font-size: 11px; font-weight: 700; color: var(--fg-1); }
[data-nav-layout="sidebar"] .dash-sb-gametime-track { width: 100%; height: 6px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
[data-nav-layout="sidebar"] .dash-sb-gametime-fill {
height: 100%;
background: linear-gradient(90deg, var(--info-500, #3b82f6), var(--success-500));
border-radius: 999px;
}
[data-nav-layout="sidebar"] .dash-sb-gametime-state {
padding: 8px 12px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .02em;
}
[data-nav-layout="sidebar"] .dash-sb-gametime-state .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .dash-sb-gametime-state.is-active {
background: rgba(34,197,94,.08);
border: 1px solid rgba(34,197,94,.25);
color: #15803d;
}
[data-nav-layout="sidebar"] .dash-sb-gametime-state.is-off {
background: rgba(59,130,246,.08);
border: 1px solid rgba(59,130,246,.25);
color: #1d4ed8;
}
/* ── Pregnancies card ────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-preg-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-1);
text-decoration: none;
color: inherit;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-preg-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-preg-row:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-preg-avatar {
width: 42px; height: 42px;
border-radius: 10px;
background: linear-gradient(135deg, #be185d, #831843);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
[data-nav-layout="sidebar"] .dash-sb-preg-avatar .material-symbols-outlined { font-size: 22px; }
[data-nav-layout="sidebar"] .dash-sb-preg-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-preg-name {
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nav-layout="sidebar"] .dash-sb-preg-sub {
font-size: 11px;
color: var(--fg-3);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nav-layout="sidebar"] .dash-sb-preg-sire { color: var(--ind-600); }
[data-nav-layout="sidebar"] .dash-sb-preg-donor { color: #7e22ce; font-weight: 600; }
[data-nav-layout="sidebar"] .dash-sb-preg-sep { color: var(--fg-4); margin: 0 4px; }
[data-nav-layout="sidebar"] .dash-sb-preg-due { font-size: 11px; color: #be185d; margin-top: 4px; font-weight: 600; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
[data-nav-layout="sidebar"] .dash-sb-preg-due.is-pending { color: #b45309; font-style: italic; }
[data-nav-layout="sidebar"] .dash-sb-preg-days { color: var(--fg-4); font-weight: 500; }
[data-nav-layout="sidebar"] .dash-sb-preg-lock {
display: inline-flex; align-items: center; gap: 2px;
color: var(--fg-4); font-weight: 500;
}
[data-nav-layout="sidebar"] .dash-sb-preg-lock .material-symbols-outlined { font-size: 12px; }
[data-nav-layout="sidebar"] .dash-sb-preg-progress { width: 60px; flex-shrink: 0; text-align: right; }
[data-nav-layout="sidebar"] .dash-sb-preg-pct { font-size: 12px; font-weight: 700; color: var(--fg-1); margin-bottom: 4px; }
[data-nav-layout="sidebar"] .dash-sb-preg-track {
width: 56px; height: 5px;
background: var(--gray-200);
border-radius: 999px;
overflow: hidden;
margin-left: auto;
}
[data-nav-layout="sidebar"] .dash-sb-preg-fill { height: 100%; background: #ec4899; border-radius: 999px; }
[data-nav-layout="sidebar"] .dash-sb-preg-row.is-late .dash-sb-preg-fill,
[data-nav-layout="sidebar"] .dash-sb-preg-tr.is-late .dash-sb-preg-fill,
[data-nav-layout="sidebar"] .dash-sb-preg-card.is-late .dash-sb-preg-fill { background: #a855f7; }
[data-nav-layout="sidebar"] .dash-sb-preg-row.is-pending .dash-sb-preg-fill,
[data-nav-layout="sidebar"] .dash-sb-preg-tr.is-pending .dash-sb-preg-fill,
[data-nav-layout="sidebar"] .dash-sb-preg-card.is-pending .dash-sb-preg-fill {
background: #f59e0b;
animation: dash-sb-preg-pulse 1.6s ease-in-out infinite;
}
@keyframes dash-sb-preg-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
/* ── Pregnancies table (desktop) ─────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-preg-table-wrap { overflow-x: auto; }
[data-nav-layout="sidebar"] .dash-sb-preg-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
[data-nav-layout="sidebar"] .dash-sb-preg-table thead th {
text-align: left;
padding: 8px 10px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--fg-3);
background: var(--gray-50);
border-bottom: 1px solid var(--border-1);
white-space: nowrap;
}
[data-nav-layout="sidebar"] .dash-sb-preg-table tbody td {
padding: 10px;
border-bottom: 1px solid var(--border-1);
vertical-align: middle;
color: var(--fg-2);
}
[data-nav-layout="sidebar"] .dash-sb-preg-table tbody tr:last-child td { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-preg-table tbody tr:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-preg-mare {
display: flex; align-items: center; gap: 10px; min-width: 0;
}
[data-nav-layout="sidebar"] .dash-sb-preg-mare-img {
flex-shrink: 0;
display: block;
}
[data-nav-layout="sidebar"] .dash-sb-preg-mare-img img {
width: 72px; height: 48px;
border-radius: 8px;
object-fit: cover;
border: 1px solid var(--border-1);
background: linear-gradient(135deg, #fce7f3, #f5d0fe);
}
[data-nav-layout="sidebar"] .dash-sb-preg-mare-meta { min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-preg-name-link {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--fg-1);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nav-layout="sidebar"] .dash-sb-preg-name-link:hover { color: var(--ind-600); }
[data-nav-layout="sidebar"] .dash-sb-preg-donor-line { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
[data-nav-layout="sidebar"] .dash-sb-preg-donor { color: #7e22ce; font-weight: 600; text-decoration: none; }
[data-nav-layout="sidebar"] .dash-sb-preg-donor:hover { text-decoration: underline; }
[data-nav-layout="sidebar"] .dash-sb-preg-sire-link { color: var(--ind-600); font-weight: 600; text-decoration: none; font-size: 12.5px; }
[data-nav-layout="sidebar"] .dash-sb-preg-sire-link:hover { text-decoration: underline; }
[data-nav-layout="sidebar"] .dash-sb-preg-muted { color: var(--fg-4); font-size: 12px; }
[data-nav-layout="sidebar"] .dash-sb-preg-housing {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; color: var(--fg-2);
}
[data-nav-layout="sidebar"] .dash-sb-preg-housing .material-symbols-outlined { font-size: 16px; }
[data-nav-layout="sidebar"] .dash-sb-preg-facility {
font-size: 10.5px;
color: var(--fg-4);
margin-top: 2px;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .dash-sb-preg-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .dash-sb-preg-status .dash-sb-preg-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-confirmed { background: rgba(34,197,94,.15); color: #15803d; }
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-confirmed .dash-sb-preg-dot { background: #22c55e; }
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-late { background: rgba(168,85,247,.15); color: #7e22ce; }
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-late .dash-sb-preg-dot { background: #a855f7; }
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-pending { background: rgba(245,158,11,.18); color: #b45309; }
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-pending .dash-sb-preg-dot {
background: #f59e0b;
animation: dash-sb-preg-pulse 1.6s ease-in-out infinite;
}
[data-nav-layout="sidebar"] .dash-sb-preg-due-cell { white-space: nowrap; }
[data-nav-layout="sidebar"] .dash-sb-preg-days { font-size: 10.5px; color: var(--fg-4); margin-top: 2px; }
[data-nav-layout="sidebar"] .dash-sb-preg-lock {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px; color: var(--fg-4); margin-top: 2px;
}
[data-nav-layout="sidebar"] .dash-sb-preg-lock .material-symbols-outlined { font-size: 11px; }
[data-nav-layout="sidebar"] .dash-sb-preg-progress-cell {
display: flex; align-items: center; gap: 8px;
}
[data-nav-layout="sidebar"] .dash-sb-preg-progress-cell .dash-sb-preg-track {
flex: 1; min-width: 60px; max-width: 120px; margin-left: 0;
}
[data-nav-layout="sidebar"] .dash-sb-preg-progress-cell .dash-sb-preg-pct {
margin-bottom: 0; font-size: 11px;
}
[data-nav-layout="sidebar"] .dash-sb-preg-th-progress { width: 130px; }
/* Hide cards on desktop, show on mobile */
[data-nav-layout="sidebar"] .dash-sb-preg-cards { display: none; }
@media (max-width: 768px) {
[data-nav-layout="sidebar"] .dash-sb-preg-table-wrap { display: none; }
[data-nav-layout="sidebar"] .dash-sb-preg-cards { display: block; }
}
[data-nav-layout="sidebar"] .dash-sb-preg-card {
display: flex;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-1);
text-decoration: none;
color: inherit;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-preg-card:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-preg-card:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-preg-card-img {
width: 64px; height: 44px;
border-radius: 8px; object-fit: cover;
border: 1px solid var(--border-1);
flex-shrink: 0;
background: linear-gradient(135deg, #fce7f3, #f5d0fe);
}
[data-nav-layout="sidebar"] .dash-sb-preg-card-body { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-preg-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-bottom: 4px;
}
[data-nav-layout="sidebar"] .dash-sb-preg-warning {
display: flex; align-items: center; gap: 4px;
font-size: 11px; color: #b91c1c; margin: 4px 0;
}
[data-nav-layout="sidebar"] .dash-sb-preg-warning .material-symbols-outlined { font-size: 14px; }
/* Header count pill */
[data-nav-layout="sidebar"] .dash-sb-preg-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
margin-left: 6px;
border-radius: 999px;
background: rgba(236,72,153,.12);
color: #be185d;
font-size: 11px;
font-weight: 700;
vertical-align: middle;
}
/* Row alignment: top-align so multi-line meta sits under the image */
[data-nav-layout="sidebar"] .dash-sb-preg-row { align-items: flex-start; }
/* Name + status row */
[data-nav-layout="sidebar"] .dash-sb-preg-name-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .dash-sb-preg-name-row .dash-sb-preg-name {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
[data-nav-layout="sidebar"] .dash-sb-preg-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-confirmed { background: rgba(34,197,94,.15); color: #15803d; }
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-late { background: rgba(168,85,247,.15); color: #7e22ce; }
[data-nav-layout="sidebar"] .dash-sb-preg-status.is-pending { background: rgba(245,158,11,.18); color: #b45309; }
/* Tag chips for LFG / Recipient / housing */
[data-nav-layout="sidebar"] .dash-sb-preg-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
}
[data-nav-layout="sidebar"] .dash-sb-preg-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
}
[data-nav-layout="sidebar"] .dash-sb-preg-tag .material-symbols-outlined { font-size: 12px; }
[data-nav-layout="sidebar"] .dash-sb-preg-tag.is-recipient { background: rgba(168,85,247,.12); color: #7e22ce; }
[data-nav-layout="sidebar"] .dash-sb-preg-tag.is-lfg { background: rgba(16,185,129,.12); color: #047857; }
[data-nav-layout="sidebar"] .dash-sb-preg-tag.is-housing { background: var(--gray-100); color: var(--fg-2); }
[data-nav-layout="sidebar"] .dash-sb-preg-tag.is-warning { background: rgba(239,68,68,.12); color: #b91c1c; }
/* ── Activity Feed card ──────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-activity-list { padding: 8px 8px; }
[data-nav-layout="sidebar"] .dash-sb-activity-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 10px;
border-radius: 10px;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-activity-row:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-activity-icon {
width: 32px; height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
[data-nav-layout="sidebar"] .dash-sb-activity-icon .material-symbols-outlined { font-size: 16px; }
[data-nav-layout="sidebar"] .dash-sb-activity-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-activity-title { font-size: 13px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
[data-nav-layout="sidebar"] .dash-sb-activity-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
[data-nav-layout="sidebar"] .dash-sb-activity-when { font-size: 10.5px; color: var(--fg-4); margin-top: 3px; }
/* ── Featured news cover (image or fallback gradient) ── */
[data-nav-layout="sidebar"] .dash-sb-news-featured-cover {
position: relative;
height: 168px;
background-size: cover;
background-position: center 40%;
overflow: hidden;
}
[data-nav-layout="sidebar"] .dash-sb-news-featured-cover-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(12,30,56,0) 0%, rgba(12,30,56,.25) 45%, rgba(12,30,56,.85) 100%);
pointer-events: none;
}
/* When using a color fallback, the scrim is much lighter — the gradient
itself is already the "image", so we just need a touch of depth at the
bottom for chip legibility. */
[data-nav-layout="sidebar"] .dash-sb-news-featured-cover.has-color .dash-sb-news-featured-cover-scrim {
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
[data-nav-layout="sidebar"] .dash-sb-news-featured-cover-meta {
position: absolute; left: 14px; top: 14px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .dash-sb-news-featured-cover-title {
position: absolute;
left: 14px; right: 14px; bottom: 12px;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
text-shadow: 0 1px 6px rgba(0,0,0,.55);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-nav-layout="sidebar"] .dash-sb-news-featured-cover-title:hover {
text-decoration: underline;
}
[data-nav-layout="sidebar"] .dash-sb-news-comments {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .dash-sb-news-comments .material-symbols-outlined {
font-size: 14px;
}
/* Decorative glyph centered on the color fallback so it doesn't look empty. */
[data-nav-layout="sidebar"] .dash-sb-news-featured-glyph {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -60%);
font-size: 64px;
color: rgba(255, 255, 255, 0.18);
pointer-events: none;
user-select: none;
}
/* ────────────────────────────────────────────────────────────────────
Card accent system — each section gets a top accent strip + tinted
card-head background + colored kicker. CSS variables drive the values
so individual cards just set the modifier class.
──────────────────────────────────────────────────────────────────── */
/* Accent CSS variable contract per card */
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-news { --accent-color: #4f46e5; --accent-tint: rgba(99,102,241,.06); --accent-tint-2: rgba(217,70,239,.05); }
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-comp { --accent-color: #b45309; --accent-tint: rgba(245,158,11,.08); --accent-tint-2: rgba(252,211,77,.06); }
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-time { --accent-color: #0e7490; --accent-tint: rgba(14,165,233,.08); --accent-tint-2: rgba(34,197,94,.06); }
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-preg { --accent-color: #be185d; --accent-tint: rgba(236,72,153,.07); --accent-tint-2: rgba(217,70,239,.05); }
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-activity { --accent-color: #4338ca; --accent-tint: rgba(99,102,241,.06); --accent-tint-2: rgba(56,189,248,.05); }
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-foals { --accent-color: #15803d; --accent-tint: rgba(34,197,94,.08); --accent-tint-2: rgba(132,204,22,.05); }
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-threads { --accent-color: #ea580c; --accent-tint: rgba(249,115,22,.08); --accent-tint-2: rgba(251,146,60,.05); }
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-stats { --accent-color: #4f46e5; --accent-tint: rgba(99,102,241,.07); --accent-tint-2: rgba(56,189,248,.05); }
/* Apply accent treatments to any card with a modifier */
[data-nav-layout="sidebar"] .dash-sb-card[class*="is-accent-"] {
border-top: 3px solid var(--accent-color);
}
[data-nav-layout="sidebar"] .dash-sb-card[class*="is-accent-"] .dash-sb-card-head {
background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-tint-2) 100%);
}
[data-nav-layout="sidebar"] .dash-sb-card[class*="is-accent-"] .dash-sb-kicker {
color: var(--accent-color);
}
/* GameTime card uses a different head structure (no .dash-sb-card-head); paint
the whole card padding strip instead so the accent still reads. */
[data-nav-layout="sidebar"] .dash-sb-card.is-accent-time {
background: linear-gradient(180deg, var(--accent-tint) 0%, #ffffff 80%);
}
/* Hero gets a deeper, livelier overlay */
[data-nav-layout="sidebar"] .dash-sb-hero-scrim {
background: linear-gradient(105deg,
rgba(12,30,56,.78) 0%,
rgba(67,56,202,.55) 35%,
rgba(190,24,93,.45) 70%,
rgba(74,4,78,.50) 100%);
}
/* ── Recent Foals ─────────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-count-pill {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
[data-nav-layout="sidebar"] .dash-sb-foal-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid var(--border-1);
text-decoration: none;
color: inherit;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-foal-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-foal-row:hover { background: rgba(34,197,94,.05); }
[data-nav-layout="sidebar"] .dash-sb-foal-image {
width: 56px; height: 40px;
border-radius: 8px;
object-fit: cover;
border: 1px solid var(--border-1);
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .dash-sb-foal-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-foal-name {
font-size: 13px;
font-weight: 700;
color: var(--fg-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nav-layout="sidebar"] .dash-sb-foal-row:hover .dash-sb-foal-name { color: #15803d; }
[data-nav-layout="sidebar"] .dash-sb-foal-breed { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
[data-nav-layout="sidebar"] .dash-sb-foal-when { font-size: 11px; color: var(--fg-4); flex-shrink: 0; }
/* ── Popular Threads ──────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-thread-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--border-1);
text-decoration: none;
color: inherit;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-thread-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-thread-row:hover { background: rgba(249,115,22,.04); }
[data-nav-layout="sidebar"] .dash-sb-thread-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-thread-title {
font-size: 13px;
font-weight: 600;
color: var(--fg-1);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-nav-layout="sidebar"] .dash-sb-thread-row:hover .dash-sb-thread-title { color: #ea580c; }
[data-nav-layout="sidebar"] .dash-sb-thread-sub {
font-size: 11px;
color: var(--fg-3);
margin-top: 3px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .dash-sb-thread-cat { color: var(--ind-600); font-weight: 600; }
[data-nav-layout="sidebar"] .dash-sb-thread-comments {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 9px;
border-radius: 999px;
background: #fed7aa;
color: #9a3412;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .dash-sb-thread-comments .material-symbols-outlined { font-size: 12px; }
/* ── Game Statistics ──────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-stats-body {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
[data-nav-layout="sidebar"] .dash-sb-stats-rows {
display: flex;
flex-direction: column;
gap: 8px;
}
[data-nav-layout="sidebar"] .dash-sb-stats-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
[data-nav-layout="sidebar"] .dash-sb-stats-row > span:first-child { color: var(--fg-3); }
[data-nav-layout="sidebar"] .dash-sb-stats-row > span:last-child { font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; }
[data-nav-layout="sidebar"] .dash-sb-stats-row-tight { padding: 4px 0; font-size: 12.5px; }
[data-nav-layout="sidebar"] .dash-sb-stats-block {
padding-top: 12px;
border-top: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .dash-sb-stats-block-label {
font-size: 10.5px;
font-weight: 700;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: .1em;
margin-bottom: 8px;
}
[data-nav-layout="sidebar"] .dash-sb-stats-genders {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
[data-nav-layout="sidebar"] .dash-sb-gender-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
}
[data-nav-layout="sidebar"] .dash-sb-gender-chip strong { font-weight: 700; }
/* ────────────────────────────────────────────────────────────────────
Hero — quick info pills + season indicator (mirrors legacy hero).
Layout-only overrides; padding/max-width handled by the canonical
.dash-sb-hero-inner rule above (which provides rail alignment).
──────────────────────────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-hero-inner {
flex-direction: row;
align-items: stretch;
min-height: 0;
}
[data-nav-layout="sidebar"] .dash-sb-hero-left {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
align-self: flex-end;
}
[data-nav-layout="sidebar"] .dash-sb-hero-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: rgba(255, 255, 255, 0.92);
margin: 0;
text-transform: none;
}
[data-nav-layout="sidebar"] .dash-sb-hero-kicker .material-symbols-outlined { font-size: 14px; color: #fcd34d; }
/* Quick info pills — modeled on the legacy hero's flex-wrap row */
[data-nav-layout="sidebar"] .dash-sb-hero-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
[data-nav-layout="sidebar"] .dash-sb-hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 10px;
color: #fff;
text-decoration: none;
transition: background 140ms, transform 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-hero-pill:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
[data-nav-layout="sidebar"] .dash-sb-hero-pill .material-symbols-outlined { font-size: 18px; }
[data-nav-layout="sidebar"] .dash-sb-hero-pill-num {
font-weight: 800;
font-size: 18px;
line-height: 1;
color: #fff;
font-variant-numeric: tabular-nums;
}
[data-nav-layout="sidebar"] .dash-sb-hero-pill-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
letter-spacing: .02em;
}
/* Season indicator (right-side glass card) */
[data-nav-layout="sidebar"] .dash-sb-hero-season {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 18px;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.10);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 14px;
min-width: 320px;
color: #fff;
flex-shrink: 0;
}
@media (max-width: 760px) {
[data-nav-layout="sidebar"] .dash-sb-hero-season {
flex-direction: column;
gap: 12px;
min-width: 0;
width: 100%;
}
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-current {
flex: 0 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding-right: 4px;
min-width: 110px;
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-icon .material-symbols-outlined { font-size: 36px; }
[data-nav-layout="sidebar"] .dash-sb-hero-season-name {
font-family: var(--ff-serif);
font-size: 22px;
line-height: 1.1;
margin-top: 2px;
color: #fff;
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-year {
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-pill {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
padding: 4px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .04em;
border: 1px solid transparent;
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-pill .material-symbols-outlined { font-size: 12px; }
[data-nav-layout="sidebar"] .dash-sb-hero-season-pill.is-active {
background: rgba(34, 197, 94, 0.22);
color: #bbf7d0;
border-color: rgba(187, 247, 208, 0.35);
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-pill.is-off {
background: rgba(56, 189, 248, 0.22);
color: #bae6fd;
border-color: rgba(186, 230, 253, 0.35);
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-calendar {
flex: 1;
min-width: 0;
border-left: 1px solid rgba(255, 255, 255, 0.18);
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
@media (max-width: 760px) {
[data-nav-layout="sidebar"] .dash-sb-hero-season-calendar {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding-left: 0;
padding-top: 12px;
}
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-calendar-label {
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: .14em;
margin-bottom: 4px;
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.85);
padding: 4px 0;
border-radius: 6px;
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-row .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .dash-sb-hero-season-row.is-current {
background: rgba(255, 255, 255, 0.18);
margin: 0 -8px;
padding: 4px 8px;
color: #fff;
font-weight: 700;
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-row-name { flex: 1; }
[data-nav-layout="sidebar"] .dash-sb-hero-season-row-date {
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
font-variant-numeric: tabular-nums;
}
[data-nav-layout="sidebar"] .dash-sb-hero-season-next {
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.55);
}
/* Hero title slightly smaller now that pills sit underneath it */
[data-nav-layout="sidebar"] .dash-sb-hero-title {
font-size: 28px;
}
@media (min-width: 768px) {
[data-nav-layout="sidebar"] .dash-sb-hero-title { font-size: 32px; }
}
/* Ad slot container — centers the rendered ad in the column without forcing
a card chrome around it (the ad component supplies its own styling). */
[data-nav-layout="sidebar"] .dash-sb-ad-slot {
display: flex;
justify-content: center;
}
[data-nav-layout="sidebar"] .dash-sb-ad-slot:empty { display: none; }
/* Landscape mare image (replaces the .dash-sb-preg-avatar gradient block).
Same proportions as the foal-row image so they read as a set. */
[data-nav-layout="sidebar"] .dash-sb-preg-image {
width: 64px;
height: 44px;
border-radius: 10px;
object-fit: cover;
border: 1px solid var(--border-1);
flex-shrink: 0;
background: linear-gradient(135deg, #fce7f3, #f5d0fe);
}
/* ════════════════════════════════════════════════════════════════════
DARK THEME — applied via [data-theme="dark"] on the element.
Toggle persists in the `theme` cookie (set by /preferences/theme).
Three layers of coverage:
1. Sidebar-layout token redefinitions (CSS vars under data-nav-layout)
2. Dashboard-specific tints (.dash-sb-* surfaces)
3. Global Tailwind utility overrides for legacy pages (bg-white,
bg-gray-*, text-gray-*, divides, borders) so non-redesigned
pages don't burn the user's eyes.
Per-page Tailwind tweaks may still be required to fully polish
non-sidebar pages.
════════════════════════════════════════════════════════════════════ */
/* ── Sidebar-layout tokens (override the light values) ────────────── */
html[data-theme="dark"] [data-nav-layout="sidebar"] {
--gray-50: #141c2e;
--gray-100: #1f293f;
--gray-200: rgba(148, 163, 184, 0.18);
--gray-300: rgba(148, 163, 184, 0.30);
--gray-400: #64748b;
--gray-500: #94a3b8;
--gray-700: #e2e8f0;
--gray-900: #f8fafc;
--fg-1: #f1f5f9;
--fg-2: #cbd5e1;
--fg-3: #94a3b8;
--fg-4: #64748b;
--border-1: rgba(148, 163, 184, 0.18);
--eq-700: #e879f9;
--ind-600: #a5b4fc;
--ind-700: #c7d2fe;
--sm-700: #7dd3fc;
--sm-600: #38bdf8;
background:
radial-gradient(1200px 600px at 90% -10%, rgba(217,70,239,.12), transparent 60%),
radial-gradient(800px 500px at -10% 110%, rgba(14,165,233,.10), transparent 60%),
#0b1322;
}
/* Sidebar rail stays the same dark ink. */
/* Topbar surface tints to match dark page */
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-topbar {
background: rgba(15, 22, 38, 0.92);
border-bottom-color: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-topbar[data-scrolled="true"] {
box-shadow: 0 4px 16px -8px rgba(0,0,0,.6);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-currency,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-iconbtn,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-userchip,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-mobile-toggle {
background: #1f293f;
border-color: rgba(148, 163, 184, 0.22);
color: var(--fg-2);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-currency:hover,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-iconbtn:hover,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-userchip:hover,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-mobile-toggle:hover {
background: #2a3654;
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-iconbtn-badge {
border-color: #1f293f;
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-user {
background: #1a2236;
border-color: rgba(148, 163, 184, 0.22);
color: var(--fg-1);
box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-item:hover,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-list a:hover {
background: rgba(148, 163, 184, 0.10);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-popover-header,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-userpop-header,
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-userpop-sub-strip {
border-color: rgba(148, 163, 184, 0.18);
background: rgba(148, 163, 184, 0.04);
}
/* ── Dashboard cards in dark mode ─────────────────────────────────── */
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-card,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-stat {
background: #1a2236;
border-color: rgba(148, 163, 184, 0.18);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
color: var(--fg-1);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-stat:hover {
box-shadow: 0 4px 12px -2px rgba(0,0,0,.5);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-card-foot {
background: rgba(148, 163, 184, 0.06);
border-top-color: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-card-action-ghost {
background: rgba(148, 163, 184, 0.08);
border-color: rgba(148, 163, 184, 0.22);
color: var(--ind-600);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-news-row,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-comp-row,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-preg-row,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-foal-row,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-thread-row {
border-bottom-color: rgba(148, 163, 184, 0.12);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-news-row:hover,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-comp-row:hover,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-preg-row:hover {
background: rgba(148, 163, 184, 0.06);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-news-featured-body {
background: linear-gradient(135deg, rgba(99,102,241,.10) 0%, rgba(217,70,239,.08) 100%);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-date-badge {
background: linear-gradient(180deg, rgba(56,189,248,.10) 0%, rgba(217,70,239,.08) 100%);
border-color: rgba(99, 102, 241, 0.28);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-date-day { color: #c7d2fe; }
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-date-month { color: #a5b4fc; }
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-gametime-track,
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-preg-track {
background: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-stats-block {
border-top-color: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .nav-policy-footer {
border-top-color: rgba(148, 163, 184, 0.16);
}
/* Accent card heads — soften the gradient overlays so they read on dark */
html[data-theme="dark"] [data-nav-layout="sidebar"] .dash-sb-card[class*="is-accent-"] .dash-sb-card-head {
background: linear-gradient(135deg,
color-mix(in oklab, var(--accent-color) 18%, transparent) 0%,
color-mix(in oklab, var(--accent-color) 8%, transparent) 100%);
}
/* Horse listing surfaces — the grid container (list mode) and individual
tile cards (grid mode) both hardcode background:#fff, which leaves the
light-mode-only background behind the dark text tokens. Repaint both
so columns/tiles match the surrounding dark card. */
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-horse-grid.is-list,
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-horse-card {
background: #1a2236;
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-horse-grid.is-list {
border-top-color: rgba(148, 163, 184, 0.18);
border-bottom-color: rgba(148, 163, 184, 0.18);
}
/* Sticky header row uses --gray-50 already (dark-token-correct), but lift
it to the same surface tier as the body so the seam isn't visible. */
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-horse-list-head {
background: #141c2e;
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card:hover {
background: rgba(148, 163, 184, 0.06);
}
/* Category filter pills (status tabs + player categories) — same fix:
inactive pills hardcode background:#fff and a #fff-mix hover, the
active state already uses the vivid category color so it stays fine. */
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-cat-pill {
background: rgba(148, 163, 184, 0.08);
border-color: rgba(148, 163, 184, 0.22);
}
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-cat-pill:hover {
background: color-mix(in oklab, var(--cat-color) 18%, #1a2236);
border-color: color-mix(in oklab, var(--cat-color) 45%, transparent);
}
/* Inactive count badge — the rgba(0,0,0,.06) tint disappears on dark;
flip to a light tint so the count still reads. */
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-cat-pill:not(.is-active) .profile-cat-pill-count {
background: rgba(255, 255, 255, 0.10);
}
/* View toggle (grid/list) — active button hardcodes background:#fff which
leaves a bright tab on the dark filter row. Repaint so the active
indicator pops without burning the surrounding chrome. */
html[data-theme="dark"] [data-nav-layout="sidebar"] .profile-view-toggle button.is-active {
background: #2a3654;
color: var(--fg-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* ── Global Tailwind override layer for legacy pages ─────────────────
Catches the most common surface utilities so non-redesigned pages
become readable on dark immediately. Per-page polishing may still
be needed for unique color tokens (yellow-50, indigo-50, etc.). */
html[data-theme="dark"],
html[data-theme="dark"] body {
background: #0b1322 !important;
color: #e2e8f0;
}
/* Default surface utilities → dark slate */
html[data-theme="dark"] .bg-white { background-color: #1a2236 !important; }
html[data-theme="dark"] .bg-gray-50 { background-color: #141c2e !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: #1f293f !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: #243049 !important; }
/* Pastel section tints flatten to subtle tinted-on-dark */
html[data-theme="dark"] .bg-sky-50,
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-strikemaster-50 { background-color: rgba(56,189,248,.10) !important; }
html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99,102,241,.12) !important; }
html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-fuchsia-50 { background-color: rgba(168,85,247,.12) !important; }
html[data-theme="dark"] .bg-pink-50,
html[data-theme="dark"] .bg-rose-50 { background-color: rgba(244,114,182,.12) !important; }
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-green-50 { background-color: rgba(34,197,94,.12) !important; }
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-orange-50 { background-color: rgba(245,158,11,.14) !important; }
html[data-theme="dark"] .bg-red-50 { background-color: rgba(239,68,68,.14) !important; }
/* Common gradient page backgrounds (dashboard hero wash etc.) → quiet */
html[data-theme="dark"] .bg-gradient-to-br.from-blue-50,
html[data-theme="dark"] .bg-gradient-to-b.from-white,
html[data-theme="dark"] .bg-gradient-to-br.from-sky-100 {
background-image: linear-gradient(to bottom right, #0f1626, #0b1322) !important;
}
/* Text utilities */
html[data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-gray-600 { color: #94a3b8 !important; }
html[data-theme="dark"] .text-gray-500 { color: #94a3b8 !important; }
html[data-theme="dark"] .text-gray-400 { color: #64748b !important; }
html[data-theme="dark"] .text-black { color: #f1f5f9 !important; }
/* Borders and dividers */
html[data-theme="dark"] .border-gray-100 { border-color: rgba(148,163,184,.12) !important; }
html[data-theme="dark"] .border-gray-200 { border-color: rgba(148,163,184,.18) !important; }
html[data-theme="dark"] .border-gray-300 { border-color: rgba(148,163,184,.24) !important; }
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148,163,184,.12) !important; }
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148,163,184,.18) !important; }
/* Form inputs — make them readable */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
background-color: #141c2e;
color: #e2e8f0;
border-color: rgba(148,163,184,.24);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #64748b; }
/* Hover states for white surfaces */
html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: rgba(148,163,184,.06) !important; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgba(148,163,184,.10) !important; }
html[data-theme="dark"] .hover\:bg-white:hover { background-color: #243049 !important; }
/* ════════════════════════════════════════════════════════════════════
Shared content-page chrome (news index, docs index, roadmap, etc.)
reuses .dash-sb-* primitives. Additions below cover the patterns
that don't exist on the dashboard.
════════════════════════════════════════════════════════════════════ */
/* Hero subtitle + stats card --------------------------------------- */
[data-nav-layout="sidebar"] .dash-sb-hero-subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.55;
max-width: 640px;
margin: 8px 0 0;
}
[data-nav-layout="sidebar"] .dash-sb-hero-link {
color: #fff;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.5);
text-underline-offset: 3px;
}
[data-nav-layout="sidebar"] .dash-sb-hero-stats {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.10);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 14px;
color: #fff;
flex-shrink: 0;
align-self: flex-end;
}
[data-nav-layout="sidebar"] .dash-sb-hero-stat { text-align: center; }
[data-nav-layout="sidebar"] .dash-sb-hero-stat-value {
font-family: var(--ff-serif);
font-size: 28px;
line-height: 1;
color: #fff;
}
[data-nav-layout="sidebar"] .dash-sb-hero-stat-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
margin-top: 4px;
}
[data-nav-layout="sidebar"] .dash-sb-hero-stat-divider {
width: 1px;
height: 32px;
background: rgba(255, 255, 255, 0.22);
}
/* Filter bar (active-category indicator) ------------------------- */
[data-nav-layout="sidebar"] .dash-sb-filter-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 14px;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .dash-sb-filter-bar-label { font-size: 12px; color: var(--fg-3); }
[data-nav-layout="sidebar"] .dash-sb-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
color: #fff;
}
[data-nav-layout="sidebar"] .dash-sb-filter-chip .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .dash-sb-filter-clear {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--fg-3);
text-decoration: none;
font-size: 12px;
}
[data-nav-layout="sidebar"] .dash-sb-filter-clear:hover { color: var(--fg-1); }
[data-nav-layout="sidebar"] .dash-sb-filter-clear .material-symbols-outlined { font-size: 16px; }
/* News article card (full-width with cover) --------------------- */
[data-nav-layout="sidebar"] .dash-sb-news-article-link {
display: block;
color: inherit;
text-decoration: none;
}
[data-nav-layout="sidebar"] .dash-sb-news-article-cover {
position: relative;
height: 200px;
background-size: cover;
background-position: center 40%;
overflow: hidden;
}
[data-nav-layout="sidebar"] .dash-sb-news-article-cover-meta {
position: absolute; left: 16px; bottom: 14px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .dash-sb-news-cat-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 999px;
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
[data-nav-layout="sidebar"] .dash-sb-news-cat-chip .material-symbols-outlined { font-size: 12px; }
[data-nav-layout="sidebar"] .dash-sb-news-date-float {
position: absolute;
top: 14px;
right: 14px;
width: 56px;
text-align: center;
border-radius: 10px;
padding: 7px 0 8px;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(10px) saturate(150%);
backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.25);
}
[data-nav-layout="sidebar"] .dash-sb-news-date-float .dash-sb-date-day { color: var(--ind-700); font-size: 24px; }
[data-nav-layout="sidebar"] .dash-sb-news-date-float .dash-sb-date-month { color: var(--ind-600); margin-top: 4px; }
[data-nav-layout="sidebar"] .dash-sb-news-article-body {
padding: 16px 20px 18px;
background: linear-gradient(135deg, rgba(99,102,241,.04) 0%, rgba(217,70,239,.04) 100%);
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-news-article-link:hover .dash-sb-news-article-body {
background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(217,70,239,.08) 100%);
}
[data-nav-layout="sidebar"] .dash-sb-news-article-body .dash-sb-news-title { margin: 6px 0 8px; }
[data-nav-layout="sidebar"] .dash-sb-news-article-body .dash-sb-news-body {
-webkit-line-clamp: 2;
}
[data-nav-layout="sidebar"] .dash-sb-news-article-footer {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
}
[data-nav-layout="sidebar"] .dash-sb-news-meta-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .dash-sb-news-meta-chip .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .dash-sb-news-article-footer .dash-sb-news-readmore {
margin-left: auto;
}
/* Categories list (right column) -------------------------------- */
[data-nav-layout="sidebar"] .dash-sb-cat-list { padding: 6px 0; }
[data-nav-layout="sidebar"] .dash-sb-cat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
color: var(--fg-2);
text-decoration: none;
transition: background 120ms;
}
[data-nav-layout="sidebar"] .dash-sb-cat-row:hover { background: var(--gray-50); color: var(--fg-1); }
[data-nav-layout="sidebar"] .dash-sb-cat-row.is-active {
background: rgba(99, 102, 241, 0.08);
color: var(--ind-700);
font-weight: 700;
}
[data-nav-layout="sidebar"] .dash-sb-cat-name {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
[data-nav-layout="sidebar"] .dash-sb-cat-name .material-symbols-outlined { font-size: 16px; }
[data-nav-layout="sidebar"] .dash-sb-cat-dot {
width: 10px; height: 10px;
border-radius: 999px;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .dash-sb-cat-count {
font-size: 11px;
color: var(--fg-3);
font-variant-numeric: tabular-nums;
}
/* Recent comments rows ----------------------------------------- */
[data-nav-layout="sidebar"] .dash-sb-comment-row {
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-1);
text-decoration: none;
color: inherit;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-comment-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-comment-row:hover { background: rgba(249,115,22,.04); }
[data-nav-layout="sidebar"] .dash-sb-comment-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: linear-gradient(135deg, #fcd34d, #b45309);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .dash-sb-comment-body { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-comment-quote {
font-size: 12.5px;
color: var(--fg-2);
line-height: 1.45;
margin: 0 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-nav-layout="sidebar"] .dash-sb-comment-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .dash-sb-comment-author { color: var(--fg-2); font-weight: 600; }
[data-nav-layout="sidebar"] .dash-sb-comment-on {
font-size: 10.5px;
color: var(--ind-600);
margin-top: 4px;
}
/* Pagination wrapper ------------------------------------------- */
[data-nav-layout="sidebar"] .dash-sb-pagination { padding: 12px 18px; }
/* Section grid (docs index, roadmap) --------------------------- */
[data-nav-layout="sidebar"] .dash-sb-section-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 1024px) {
[data-nav-layout="sidebar"] .dash-sb-section-grid { grid-template-columns: 1fr; }
}
/* Doc row (chevron-tail rows for guide lists, roadmap features) */
[data-nav-layout="sidebar"] .dash-sb-doc-list { padding: 4px 0; }
[data-nav-layout="sidebar"] .dash-sb-doc-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--border-1);
text-decoration: none;
color: inherit;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-doc-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .dash-sb-doc-row:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .dash-sb-doc-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .dash-sb-doc-name {
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
line-height: 1.3;
}
[data-nav-layout="sidebar"] .dash-sb-doc-desc {
font-size: 12px;
color: var(--fg-3);
margin-top: 3px;
line-height: 1.5;
}
[data-nav-layout="sidebar"] .dash-sb-doc-arrow {
font-size: 16px;
color: var(--fg-4);
flex-shrink: 0;
margin-top: 2px;
transition: transform 140ms, color 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-doc-row:hover .dash-sb-doc-arrow {
transform: translateX(2px);
color: var(--ind-600);
}
[data-nav-layout="sidebar"] .dash-sb-title-icon {
font-size: 18px;
color: var(--accent-color, var(--ind-600));
vertical-align: -3px;
margin-right: 4px;
}
/* Roadmap intro/bullet ---------------------------------------- */
[data-nav-layout="sidebar"] .dash-sb-roadmap-intro {
padding: 12px 18px 0;
}
[data-nav-layout="sidebar"] .dash-sb-roadmap-row {
align-items: flex-start;
}
[data-nav-layout="sidebar"] .dash-sb-roadmap-bullet {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--accent-color, var(--ind-600));
margin-top: 7px;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-color, #4f46e5) 18%, transparent);
}
/* Prose blocks (intro paragraphs, help cards) ------------------ */
[data-nav-layout="sidebar"] .dash-sb-prose {
padding: 14px 18px 16px;
color: var(--fg-2);
font-size: 13.5px;
line-height: 1.6;
}
[data-nav-layout="sidebar"] .dash-sb-prose p { margin: 0 0 8px; }
[data-nav-layout="sidebar"] .dash-sb-prose p:last-child { margin: 0; }
[data-nav-layout="sidebar"] .dash-sb-prose strong { color: var(--fg-1); }
[data-nav-layout="sidebar"] .dash-sb-prose a {
color: var(--ind-600);
text-decoration: none;
border-bottom: 1px dashed var(--ind-600);
}
[data-nav-layout="sidebar"] .dash-sb-prose a:hover {
color: var(--ind-700);
border-bottom-style: solid;
}
/* ════════════════════════════════════════════════════════════════════
News index — magazine-style redesign.
Tiered layout: featured hero card + responsive 2-column tile grid.
════════════════════════════════════════════════════════════════════ */
/* ── Category strip (above the main grid) ─────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-cat-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 4px;
}
[data-nav-layout="sidebar"] .dash-sb-cat-pill {
--cat-color: var(--ind-600);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px 7px 10px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--fg-2);
text-decoration: none;
transition: all 140ms;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .dash-sb-cat-pill .material-symbols-outlined { font-size: 15px; color: var(--cat-color); }
[data-nav-layout="sidebar"] .dash-sb-cat-pill:hover {
background: color-mix(in oklab, var(--cat-color) 8%, #fff);
border-color: color-mix(in oklab, var(--cat-color) 35%, transparent);
color: var(--fg-1);
transform: translateY(-1px);
box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--cat-color) 40%, transparent);
}
[data-nav-layout="sidebar"] .dash-sb-cat-pill.is-active {
background: var(--cat-color);
border-color: var(--cat-color);
color: #fff;
box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--cat-color) 60%, transparent);
}
[data-nav-layout="sidebar"] .dash-sb-cat-pill.is-active .material-symbols-outlined { color: #fff; }
[data-nav-layout="sidebar"] .dash-sb-cat-pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 1px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
background: rgba(0, 0, 0, 0.06);
color: inherit;
}
[data-nav-layout="sidebar"] .dash-sb-cat-pill.is-active .dash-sb-cat-pill-count {
background: rgba(255, 255, 255, 0.22);
}
/* ── Featured article card (full-width, big background) ───────────── */
[data-nav-layout="sidebar"] .dash-sb-news-feature {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.18);
transition: transform 220ms var(--ease-std), box-shadow 220ms var(--ease-std);
}
[data-nav-layout="sidebar"] .dash-sb-news-feature:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.22);
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-link {
display: block;
color: inherit;
text-decoration: none;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-cover {
position: relative;
min-height: 380px;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 22px;
color: #fff;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(12,30,56,.15) 0%, rgba(12,30,56,.0) 30%, rgba(12,30,56,.85) 100%),
linear-gradient(15deg, rgba(74,4,78,.35), rgba(12,30,56,.0) 60%);
pointer-events: none;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-glyph {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -55%);
font-size: 96px;
color: rgba(255, 255, 255, 0.15);
pointer-events: none;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-meta-top {
position: relative;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
z-index: 1;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-body {
position: relative;
z-index: 1;
max-width: 720px;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-meta {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 11.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 8px;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-meta .material-symbols-outlined { font-size: 13px; vertical-align: -2px; margin-right: 3px; }
[data-nav-layout="sidebar"] .dash-sb-news-feature-meta-dot { color: rgba(255, 255, 255, 0.45); }
[data-nav-layout="sidebar"] .dash-sb-news-feature-title {
font-family: var(--ff-serif);
font-size: 36px;
line-height: 1.05;
margin: 0 0 10px;
color: #fff;
text-shadow: 0 2px 18px rgba(0,0,0,.4);
letter-spacing: -0.01em;
font-weight: 400;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-excerpt {
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.18);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
color: #fff;
transition: background 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-news-feature:hover .dash-sb-news-feature-cta {
background: rgba(255, 255, 255, 0.26);
}
[data-nav-layout="sidebar"] .dash-sb-news-feature-cta .material-symbols-outlined { font-size: 14px; }
@media (max-width: 768px) {
[data-nav-layout="sidebar"] .dash-sb-news-feature-cover { min-height: 280px; padding: 18px; }
[data-nav-layout="sidebar"] .dash-sb-news-feature-title { font-size: 26px; }
}
/* ── Magazine tile grid ───────────────────────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 768px) {
[data-nav-layout="sidebar"] .dash-sb-news-grid { grid-template-columns: 1fr; }
}
[data-nav-layout="sidebar"] .dash-sb-news-tile {
background: #fff;
border: 1px solid var(--border-1);
border-radius: 14px;
overflow: hidden;
transition: transform 180ms var(--ease-std), box-shadow 180ms var(--ease-std), border-color 180ms;
}
[data-nav-layout="sidebar"] .dash-sb-news-tile:hover {
transform: translateY(-2px);
border-color: color-mix(in oklab, var(--ind-600) 30%, var(--border-1));
box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.18);
}
[data-nav-layout="sidebar"] .dash-sb-news-tile-link {
display: block;
color: inherit;
text-decoration: none;
}
[data-nav-layout="sidebar"] .dash-sb-news-tile-cover {
position: relative;
height: 168px;
background-size: cover;
background-position: center;
}
[data-nav-layout="sidebar"] .dash-sb-news-tile-glyph {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -55%);
font-size: 56px;
color: rgba(255, 255, 255, 0.20);
}
[data-nav-layout="sidebar"] .dash-sb-news-tile-cat {
position: absolute;
top: 12px; left: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
box-shadow: 0 2px 8px -2px rgba(0,0,0,.35);
}
[data-nav-layout="sidebar"] .dash-sb-news-tile-cat .material-symbols-outlined { font-size: 11px; }
[data-nav-layout="sidebar"] .dash-sb-news-tile-body { padding: 14px 16px 16px; }
[data-nav-layout="sidebar"] .dash-sb-news-tile-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--fg-3);
margin-bottom: 6px;
}
[data-nav-layout="sidebar"] .dash-sb-news-tile-meta .material-symbols-outlined { font-size: 12px; vertical-align: -2px; margin-right: 2px; }
[data-nav-layout="sidebar"] .dash-sb-news-tile-title {
font-family: var(--ff-serif);
font-size: 17px;
line-height: 1.25;
margin: 0 0 6px;
color: var(--fg-1);
font-weight: 400;
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 140ms;
}
[data-nav-layout="sidebar"] .dash-sb-news-tile:hover .dash-sb-news-tile-title { color: var(--ind-700); }
[data-nav-layout="sidebar"] .dash-sb-news-tile-excerpt {
font-size: 12.5px;
line-height: 1.5;
color: var(--fg-2);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Trending discussion (right column) ───────────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-news-trend {
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px -8px rgba(234, 88, 12, 0.35);
background: #fff;
border: 1px solid var(--border-1);
border-top: 3px solid #ea580c;
transition: transform 180ms var(--ease-std), box-shadow 180ms var(--ease-std);
}
[data-nav-layout="sidebar"] .dash-sb-news-trend:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -8px rgba(234, 88, 12, 0.4);
}
[data-nav-layout="sidebar"] .dash-sb-news-trend-link { display: block; color: inherit; text-decoration: none; }
[data-nav-layout="sidebar"] .dash-sb-news-trend-cover {
position: relative;
height: 120px;
background-size: cover;
background-position: center;
}
[data-nav-layout="sidebar"] .dash-sb-news-trend-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 100%);
}
[data-nav-layout="sidebar"] .dash-sb-news-trend-pill {
position: absolute;
top: 12px; left: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: linear-gradient(135deg, #f97316, #c2410c);
border-radius: 999px;
color: #fff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
box-shadow: 0 4px 12px -3px rgba(234, 88, 12, .55);
}
[data-nav-layout="sidebar"] .dash-sb-news-trend-pill .material-symbols-outlined { font-size: 12px; }
[data-nav-layout="sidebar"] .dash-sb-news-trend-body { padding: 14px 16px 16px; }
[data-nav-layout="sidebar"] .dash-sb-news-trend-meta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 700;
color: #c2410c;
margin-bottom: 6px;
}
[data-nav-layout="sidebar"] .dash-sb-news-trend-meta .material-symbols-outlined { font-size: 13px; }
[data-nav-layout="sidebar"] .dash-sb-news-trend-title {
font-family: var(--ff-serif);
font-size: 17px;
line-height: 1.25;
margin: 0 0 8px;
color: var(--fg-1);
font-weight: 400;
}
[data-nav-layout="sidebar"] .dash-sb-news-trend-cta {
font-size: 12px;
color: #ea580c;
font-weight: 700;
}
/* ── By the numbers (bottom of right column) ──────────────────────── */
[data-nav-layout="sidebar"] .dash-sb-news-numbers {
background: linear-gradient(135deg, var(--ind-900), var(--eq-950, #4a044e));
color: #fff;
border-radius: 14px;
padding: 18px;
box-shadow: 0 8px 20px -8px rgba(67, 56, 202, 0.5);
}
[data-nav-layout="sidebar"] .dash-sb-news-numbers-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
[data-nav-layout="sidebar"] .dash-sb-news-numbers-stat { text-align: center; }
[data-nav-layout="sidebar"] .dash-sb-news-numbers-value {
font-family: var(--ff-serif);
font-size: 26px;
line-height: 1;
color: #fff;
}
[data-nav-layout="sidebar"] .dash-sb-news-numbers-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.70);
margin-top: 5px;
}
/* ════════════════════════════════════════════════════════════════════
Docs index — content + sticky TOC layout (matches the internal docs
pages' design language). Reuses .docs-section / .docs-note classes
already defined in resources/css/app.css.
════════════════════════════════════════════════════════════════════ */
[data-nav-layout="sidebar"] .docs-page-grid {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 220px;
gap: 28px;
align-items: start;
}
@media (max-width: 1100px) {
[data-nav-layout="sidebar"] .docs-page-grid {
grid-template-columns: 220px minmax(0, 1fr);
}
}
@media (max-width: 900px) {
[data-nav-layout="sidebar"] .docs-page-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* Left docs nav — mirrors the right TOC: sticky, white card, scrolls
independently of the page when content is taller than the viewport. */
[data-nav-layout="sidebar"] .docs-leftnav { display: block; }
@media (max-width: 900px) {
[data-nav-layout="sidebar"] .docs-leftnav { display: none; }
}
[data-nav-layout="sidebar"] .docs-leftnav-sticky {
position: sticky;
top: 84px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
max-height: calc(100vh - 100px);
overflow-y: auto;
}
[data-nav-layout="sidebar"] .docs-content {
background: #fff;
border: 1px solid var(--border-1);
border-radius: 16px;
padding: 28px 32px 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
@media (max-width: 640px) {
[data-nav-layout="sidebar"] .docs-content { padding: 20px 18px 8px; }
}
/* Inline icon next to a doc-section heading, sized to read alongside it. */
[data-nav-layout="sidebar"] .docs-content h3 .docs-h-icon,
[data-nav-layout="sidebar"] .docs-content h2 .docs-h-icon {
color: var(--ind-600);
margin-right: 8px;
vertical-align: -3px;
}
[data-nav-layout="sidebar"] .docs-content h3 .docs-h-icon.material-symbols-outlined,
[data-nav-layout="sidebar"] .docs-content h2 .docs-h-icon.material-symbols-outlined {
font-size: 20px;
}
[data-nav-layout="sidebar"] .docs-content h3 .docs-h-icon.fa-horse,
[data-nav-layout="sidebar"] .docs-content h3 i.docs-h-icon {
font-size: 16px;
width: 20px;
text-align: center;
vertical-align: 0;
}
/* Right-side TOC */
[data-nav-layout="sidebar"] .docs-toc {
display: block;
}
@media (max-width: 900px) {
[data-nav-layout="sidebar"] .docs-toc { display: none; }
}
[data-nav-layout="sidebar"] .docs-toc-sticky {
position: sticky;
top: 84px; /* below the topbar */
background: #fff;
border: 1px solid var(--border-1);
border-radius: 14px;
padding: 16px 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
[data-nav-layout="sidebar"] .docs-toc-label {
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg-3);
margin: 0 0 10px;
padding: 0 8px;
}
[data-nav-layout="sidebar"] .docs-toc-list {
display: flex;
flex-direction: column;
font-size: 12.5px;
}
[data-nav-layout="sidebar"] .docs-toc-link {
display: block;
padding: 5px 8px 5px 12px;
border-left: 2px solid transparent;
color: var(--fg-3);
text-decoration: none;
line-height: 1.35;
transition: color 120ms, border-color 120ms;
}
[data-nav-layout="sidebar"] .docs-toc-link:hover {
color: var(--fg-1);
border-left-color: var(--gray-300);
}
[data-nav-layout="sidebar"] .docs-toc-link-h3 {
padding-left: 24px;
font-size: 12px;
}
/* ════════════════════════════════════════════════════════════════════
Stable profile (sidebar variant) — hero + avatar overlap + stacked
sections (Custom profile / Horses / Facilities / Achievements).
════════════════════════════════════════════════════════════════════ */
/* Make the profile hero a touch taller so the banner image breathes. */
[data-nav-layout="sidebar"] .profile-hero {
min-height: 240px;
background-size: cover;
background-position: center;
}
[data-nav-layout="sidebar"] .profile-hero-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
max-height: 140px;
max-width: 60%;
width: auto;
z-index: 2;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
opacity: 0.92;
pointer-events: none;
}
/* Profile info bar — overlaps the hero by way of negative margin. */
[data-nav-layout="sidebar"] .profile-info-bar {
position: relative;
margin-top: -56px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 16px;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
z-index: 2;
}
[data-nav-layout="sidebar"] .profile-avatar-wrap {
position: relative;
flex-shrink: 0;
margin-top: -42px;
}
[data-nav-layout="sidebar"] .profile-avatar {
width: 96px;
height: 96px;
border-radius: 999px;
border: 4px solid #fff;
box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.25);
object-fit: cover;
background: #fff;
}
[data-nav-layout="sidebar"] .profile-avatar-badge {
position: absolute;
bottom: -6px;
right: -8px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
box-shadow: 0 4px 12px -3px rgba(15, 23, 42, 0.25);
}
[data-nav-layout="sidebar"] .profile-info-meta {
flex: 1;
min-width: 0;
}
[data-nav-layout="sidebar"] .profile-info-name {
font-family: var(--ff-serif);
font-size: 28px;
line-height: 1.1;
color: var(--fg-1);
margin: 0;
font-weight: 400;
letter-spacing: -0.01em;
}
[data-nav-layout="sidebar"] .profile-info-tag {
font-size: 16px;
color: var(--fg-3);
font-family: var(--ff-mono);
margin-left: 6px;
}
[data-nav-layout="sidebar"] .profile-info-status {
font-size: 13px;
color: var(--fg-3);
font-style: italic;
margin: 4px 0 0;
}
[data-nav-layout="sidebar"] .profile-info-meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
margin-top: 8px;
}
[data-nav-layout="sidebar"] .profile-info-meta-item {
font-size: 12px;
color: var(--fg-3);
display: inline-flex;
align-items: center;
gap: 5px;
}
[data-nav-layout="sidebar"] .profile-info-meta-item .material-symbols-outlined,
[data-nav-layout="sidebar"] .profile-info-meta-item i { font-size: 13px; color: var(--ind-600); }
[data-nav-layout="sidebar"] .profile-info-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .profile-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
background: #fff;
border: 1px solid var(--border-1);
color: var(--fg-2);
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: background 140ms, border-color 140ms;
}
[data-nav-layout="sidebar"] .profile-action-btn:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .profile-action-btn.is-primary {
background: var(--grad-primary);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 14px -4px rgba(99, 102, 241, 0.55);
}
[data-nav-layout="sidebar"] .profile-action-btn.is-primary:hover { filter: brightness(1.08); }
[data-nav-layout="sidebar"] .profile-action-btn .material-symbols-outlined { font-size: 16px; }
/* Quick stats strip on the profile (4 cells; reuses .dash-sb-stat). */
[data-nav-layout="sidebar"] .profile-quickstats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { [data-nav-layout="sidebar"] .profile-quickstats { grid-template-columns: repeat(2, 1fr); } }
/* Custom profile HTML (user-supplied markup, scoped inside this card). */
[data-nav-layout="sidebar"] .profile-custom-html {
padding: 18px 22px;
color: var(--fg-2);
line-height: 1.65;
font-size: 14px;
}
[data-nav-layout="sidebar"] .profile-custom-html h2,
[data-nav-layout="sidebar"] .profile-custom-html h3,
[data-nav-layout="sidebar"] .profile-custom-html h4 {
font-family: var(--ff-serif);
color: var(--fg-1);
margin: 14px 0 8px;
line-height: 1.2;
}
[data-nav-layout="sidebar"] .profile-custom-html h2 { font-size: 22px; }
[data-nav-layout="sidebar"] .profile-custom-html h3 { font-size: 18px; }
[data-nav-layout="sidebar"] .profile-custom-html p { margin: 0 0 10px; }
[data-nav-layout="sidebar"] .profile-custom-html a { color: var(--ind-600); }
/* View toggle (grid / list) in the Horses card-head right-side. */
[data-nav-layout="sidebar"] .profile-view-toggle {
display: inline-flex;
background: var(--gray-100);
border-radius: 8px;
padding: 2px;
}
[data-nav-layout="sidebar"] .profile-view-toggle button {
border: 0;
background: transparent;
color: var(--fg-3);
padding: 5px 9px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
[data-nav-layout="sidebar"] .profile-view-toggle button.is-active {
background: #fff;
color: var(--fg-1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-nav-layout="sidebar"] .profile-view-toggle .material-symbols-outlined { font-size: 18px; }
/* Filter row under the Horses card-head. */
[data-nav-layout="sidebar"] .profile-filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .profile-filter-search {
position: relative;
flex: 1 1 200px;
min-width: 200px;
}
[data-nav-layout="sidebar"] .profile-filter-search .material-symbols-outlined {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--fg-4);
font-size: 18px;
}
[data-nav-layout="sidebar"] .profile-filter-search input,
[data-nav-layout="sidebar"] .profile-filter-select {
width: 100%;
padding: 8px 12px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 8px;
font-size: 12.5px;
color: var(--fg-1);
font-family: var(--ff-sans);
outline: none;
transition: border-color 120ms, box-shadow 120ms;
}
[data-nav-layout="sidebar"] .profile-filter-search input { padding-left: 34px; }
[data-nav-layout="sidebar"] .profile-filter-select {
flex: 0 0 auto;
width: auto;
min-width: 130px;
cursor: pointer;
/* Strip the OS-native arrow and paint our own chevron so the control
looks the same on every platform. */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px 14px;
}
[data-nav-layout="sidebar"] .profile-filter-select:hover {
border-color: var(--gray-300);
}
[data-nav-layout="sidebar"] .profile-filter-search input:focus,
[data-nav-layout="sidebar"] .profile-filter-select:focus {
border-color: var(--sm-400);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
/* Horse grid (default) and list mode. */
[data-nav-layout="sidebar"] .profile-horse-grid {
padding: 14px 18px;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list {
display: flex;
flex-direction: column;
gap: 6px;
}
[data-nav-layout="sidebar"] .profile-horse-card {
display: block;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 160ms var(--ease-std), box-shadow 160ms var(--ease-std), border-color 160ms;
}
[data-nav-layout="sidebar"] .profile-horse-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.18);
border-color: color-mix(in oklab, var(--ind-600) 25%, var(--border-1));
}
[data-nav-layout="sidebar"] .profile-horse-image-wrap {
position: relative;
background: linear-gradient(135deg, #fef3c7, #fcd34d);
aspect-ratio: 16 / 10;
overflow: hidden;
}
[data-nav-layout="sidebar"] .profile-horse-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[data-nav-layout="sidebar"] .profile-horse-status-row {
position: absolute;
bottom: 8px;
left: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
[data-nav-layout="sidebar"] .profile-horse-status {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.25);
}
[data-nav-layout="sidebar"] .profile-horse-status .material-symbols-outlined { font-size: 11px; }
[data-nav-layout="sidebar"] .profile-horse-body { padding: 10px 12px 12px; }
[data-nav-layout="sidebar"] .profile-horse-name {
font-size: 14px;
font-weight: 700;
color: var(--fg-1);
line-height: 1.25;
margin-bottom: 3px;
}
[data-nav-layout="sidebar"] .profile-horse-meta {
font-size: 11.5px;
color: var(--fg-3);
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
/* ── List-mode horse rows — table-style layout with all columns ──── */
[data-nav-layout="sidebar"] .profile-horse-grid.is-list {
padding: 0;
background: #fff;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card {
display: grid;
grid-template-columns: 88px minmax(220px, 2fr) 1.4fr 0.7fr 0.9fr 1fr 1fr 1.6fr;
align-items: center;
gap: 14px;
padding: 10px 18px;
border-bottom: 1px solid var(--border-1);
border-radius: 0;
background: transparent;
border-left: 0;
border-right: 0;
border-top: 0;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card:hover {
background: var(--gray-50);
transform: none;
box-shadow: none;
border-color: transparent transparent var(--border-1) transparent;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-image-wrap {
width: 88px;
height: 56px;
aspect-ratio: auto;
border-radius: 8px;
flex-shrink: 0;
border: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-status-row { display: none; }
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-body { padding: 0; min-width: 0; }
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-meta-grid { display: none; }
/* List-only columns — hidden in grid mode, shown in list mode. */
[data-nav-layout="sidebar"] .profile-horse-col { display: none; min-width: 0; }
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col { display: block; }
/* Per-row labels hidden in list mode (column header row above takes over). */
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-label { display: none; }
/* List header row — shares the same column template as the body rows. */
[data-nav-layout="sidebar"] .profile-horse-list-head {
display: grid;
grid-template-columns: 88px minmax(220px, 2fr) 1.4fr 0.7fr 0.9fr 1fr 1fr 1.6fr;
align-items: center;
gap: 14px;
padding: 10px 18px;
background: var(--gray-50);
border-bottom: 1px solid var(--border-1);
position: sticky;
top: 0;
z-index: 1;
}
[data-nav-layout="sidebar"] .profile-horse-list-head-cell {
font-size: 9.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .profile-horse-col-value {
font-size: 12.5px;
color: var(--fg-2);
line-height: 1.35;
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .profile-horse-col-muted { color: var(--fg-4); }
[data-nav-layout="sidebar"] .profile-horse-col-status-chips { flex-wrap: wrap; gap: 4px; }
[data-nav-layout="sidebar"] .profile-horse-col-status-chips .profile-horse-status {
font-size: 9.5px;
padding: 2px 7px;
box-shadow: none;
text-transform: none;
letter-spacing: 0;
font-weight: 700;
}
/* Identity block extras (brand badge, name, sex glyph, tagline). */
[data-nav-layout="sidebar"] .profile-horse-name {
display: inline-flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .profile-horse-brand-img {
height: 16px;
width: auto;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .profile-horse-brand-text {
font-size: 9.5px;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
letter-spacing: .04em;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .profile-horse-name-text { color: var(--fg-1); }
[data-nav-layout="sidebar"] .profile-horse-sex { font-size: 14px; flex-shrink: 0; }
[data-nav-layout="sidebar"] .profile-horse-tagline {
font-size: 11px;
color: var(--fg-3);
font-style: italic;
margin: 3px 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Keuring pill — neutralize legacy badge classes inside the new chrome. */
[data-nav-layout="sidebar"] .profile-horse-keuring-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
background: rgba(99, 102, 241, 0.10);
color: var(--ind-700);
}
/* Responsive list mode — drop secondary columns as the viewport tightens.
Header row mirrors the body row at each breakpoint so columns align. */
@media (max-width: 1200px) {
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-list-head {
grid-template-columns: 88px minmax(200px, 2fr) 1.2fr 0.9fr 1fr 1.6fr;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-breed,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-keuring,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-list-head-cell.profile-horse-col-breed,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-list-head-cell.profile-horse-col-keuring {
display: none;
}
}
@media (max-width: 900px) {
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-list-head {
grid-template-columns: 88px 1fr 1.4fr;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-energy,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-discipline,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-list-head-cell.profile-horse-col-energy,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-list-head-cell.profile-horse-col-discipline {
display: none;
}
}
@media (max-width: 640px) {
/* Below 640px the row collapses to a stacked layout; the header row
is hidden because column-by-column reading no longer applies. */
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card {
grid-template-columns: 64px 1fr;
row-gap: 6px;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-list-head { display: none; }
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-image-wrap { width: 64px; height: 44px; }
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-age {
grid-column: 2 / -1;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-status {
grid-column: 1 / -1;
}
/* On stacked mobile, bring the per-row labels back so each value is identifiable. */
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-label { display: block; }
}
/* Facility grid */
[data-nav-layout="sidebar"] .profile-facility-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
padding: 14px 18px;
}
[data-nav-layout="sidebar"] .profile-facility-card {
display: block;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 160ms, box-shadow 160ms, border-color 160ms;
}
[data-nav-layout="sidebar"] .profile-facility-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.18);
border-color: color-mix(in oklab, #15803d 25%, var(--border-1));
}
[data-nav-layout="sidebar"] .profile-facility-banner {
height: 100px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
[data-nav-layout="sidebar"] .profile-facility-banner.has-color .material-symbols-outlined {
font-size: 40px;
color: rgba(255, 255, 255, 0.6);
}
[data-nav-layout="sidebar"] .profile-facility-body { padding: 12px 14px; }
[data-nav-layout="sidebar"] .profile-facility-name {
font-size: 14px;
font-weight: 700;
color: var(--fg-1);
margin-bottom: 4px;
}
[data-nav-layout="sidebar"] .profile-facility-meta {
font-size: 11.5px;
color: var(--fg-3);
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .profile-facility-meta .material-symbols-outlined,
[data-nav-layout="sidebar"] .profile-facility-meta i { font-size: 12px; }
/* Achievements section */
[data-nav-layout="sidebar"] .profile-achievements {
padding: 0 0 8px;
}
[data-nav-layout="sidebar"] .profile-achievements-block + .profile-achievements-block {
border-top: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .profile-achievements-label {
padding: 14px 18px 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .profile-badge-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
padding: 0 18px 14px;
}
[data-nav-layout="sidebar"] .profile-badge {
text-align: center;
padding: 12px 10px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 10px;
/* Center content both axes. Lives in the stylesheet (not inline) so any
future Alpine x-show on the tile won't wipe display:flex — same gotcha
as .profile-achievement-card. */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
[data-nav-layout="sidebar"] .profile-badge img {
width: 48px;
height: 48px;
object-fit: contain;
margin: 0 auto 6px;
}
[data-nav-layout="sidebar"] .profile-badge .material-symbols-outlined {
font-size: 36px;
color: var(--eq-700);
margin-bottom: 4px;
}
[data-nav-layout="sidebar"] .profile-badge-name {
font-size: 12px;
font-weight: 700;
color: var(--fg-1);
line-height: 1.25;
}
[data-nav-layout="sidebar"] .profile-badge-date {
font-size: 10.5px;
color: var(--fg-3);
margin-top: 3px;
}
[data-nav-layout="sidebar"] .profile-achievement-list {
padding: 16px 18px;
display: flex;
flex-direction: column;
}
/* Year-grid achievement cards. Flex/center props live in the stylesheet
(not inline) because Alpine's x-show toggle wipes inline `display` when
it reveals the card, which would otherwise drop us back to block layout
and break vertical centering. min-height gives each card enough vertical
room for `justify-content: center` to be visible — cards with thin
content otherwise collapse to content height and "centered" looks the
same as top-aligned. */
[data-nav-layout="sidebar"] .profile-achievement-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 110px;
}
[data-nav-layout="sidebar"] .profile-achievement-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
}
[data-nav-layout="sidebar"] .profile-achievement-row + .profile-achievement-row {
border-top: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .profile-achievement-icon {
width: 32px;
height: 32px;
border-radius: 999px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
[data-nav-layout="sidebar"] .profile-achievement-icon .material-symbols-outlined,
[data-nav-layout="sidebar"] .profile-achievement-icon i { font-size: 14px; }
[data-nav-layout="sidebar"] .profile-achievement-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .profile-achievement-title { font-size: 13px; font-weight: 700; color: var(--fg-1); line-height: 1.25; }
[data-nav-layout="sidebar"] .profile-achievement-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
/* Send-message modal */
[data-nav-layout="sidebar"] .profile-modal {
position: fixed; inset: 0;
background: rgba(8, 14, 24, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
padding: 16px;
}
[data-nav-layout="sidebar"] .profile-modal-card {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 520px;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
[data-nav-layout="sidebar"] .profile-modal-head {
padding: 14px 18px;
border-bottom: 1px solid var(--border-1);
display: flex;
align-items: center;
justify-content: space-between;
}
[data-nav-layout="sidebar"] .profile-modal-head h3 {
font-family: var(--ff-serif);
font-size: 18px;
margin: 0;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .profile-modal-head button {
background: transparent;
border: 0;
cursor: pointer;
color: var(--fg-3);
padding: 4px;
}
[data-nav-layout="sidebar"] .profile-modal-body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
[data-nav-layout="sidebar"] .profile-modal-body label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: var(--fg-2);
}
[data-nav-layout="sidebar"] .profile-modal-body input,
[data-nav-layout="sidebar"] .profile-modal-body textarea {
padding: 9px 12px;
border: 1px solid var(--border-1);
border-radius: 8px;
font-size: 13px;
font-family: var(--ff-sans);
color: var(--fg-1);
outline: none;
}
[data-nav-layout="sidebar"] .profile-modal-body input:focus,
[data-nav-layout="sidebar"] .profile-modal-body textarea:focus {
border-color: var(--sm-400);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
[data-nav-layout="sidebar"] .profile-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
}
/* Custom profile card — no .dash-sb-card-head, no accent strip; content
pads naturally and the user's own headings do all the labelling. */
[data-nav-layout="sidebar"] .profile-custom-card {
border-top-width: 1px; /* override accent class top-border if added later */
}
[data-nav-layout="sidebar"] .profile-custom-card .profile-custom-html {
padding: 22px;
}
/* Filter empty state + match counter (Horses card). */
[data-nav-layout="sidebar"] .profile-horse-empty {
padding: 32px 18px;
text-align: center;
color: var(--fg-3);
font-size: 13px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
[data-nav-layout="sidebar"] .profile-horse-empty .material-symbols-outlined {
font-size: 36px;
color: var(--fg-4);
}
[data-nav-layout="sidebar"] .profile-horse-empty-title {
font-size: 14px;
font-weight: 700;
color: var(--fg-2);
}
[data-nav-layout="sidebar"] .profile-horse-count {
padding: 10px 18px;
text-align: right;
font-size: 11px;
color: var(--fg-3);
border-top: 1px solid var(--border-1);
background: var(--gray-50);
}
[data-nav-layout="sidebar"] .profile-horse-count > span { font-weight: 700; color: var(--fg-1); }
/* Player-defined category strip on the profile Horses card. Each pill takes
the user's category color via a --cat-color CSS variable. */
[data-nav-layout="sidebar"] .profile-cat-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px 18px 4px;
}
[data-nav-layout="sidebar"] .profile-cat-pill {
--cat-color: var(--ind-600);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 10px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--fg-2);
cursor: pointer;
transition: all 140ms;
white-space: nowrap;
font-family: var(--ff-sans);
}
[data-nav-layout="sidebar"] .profile-cat-pill .material-symbols-outlined { font-size: 14px; color: var(--cat-color); }
[data-nav-layout="sidebar"] .profile-cat-pill:hover {
background: color-mix(in oklab, var(--cat-color) 8%, #fff);
border-color: color-mix(in oklab, var(--cat-color) 35%, transparent);
color: var(--fg-1);
transform: translateY(-1px);
}
[data-nav-layout="sidebar"] .profile-cat-pill.is-active {
background: var(--cat-color);
border-color: var(--cat-color);
color: #fff;
box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--cat-color) 60%, transparent);
}
[data-nav-layout="sidebar"] .profile-cat-pill.is-active .material-symbols-outlined { color: #fff; }
[data-nav-layout="sidebar"] .profile-cat-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--cat-color);
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .profile-cat-pill.is-active .profile-cat-dot {
background: #fff;
}
[data-nav-layout="sidebar"] .profile-cat-pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 1px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
background: rgba(0, 0, 0, 0.06);
color: inherit;
}
[data-nav-layout="sidebar"] .profile-cat-pill.is-active .profile-cat-pill-count {
background: rgba(255, 255, 255, 0.22);
}
/* ── Achievements: summary strip + per-year accordion ────────────── */
[data-nav-layout="sidebar"] .profile-ach-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 14px 18px 4px;
}
@media (max-width: 768px) { [data-nav-layout="sidebar"] .profile-ach-summary { grid-template-columns: repeat(2, 1fr); } }
[data-nav-layout="sidebar"] .profile-ach-summary-tile {
--tile-color: var(--ind-600);
background: color-mix(in oklab, var(--tile-color) 8%, #fff);
border: 1px solid color-mix(in oklab, var(--tile-color) 22%, transparent);
border-radius: 12px;
padding: 12px 14px;
}
[data-nav-layout="sidebar"] .profile-ach-summary-value {
font-family: var(--ff-serif);
font-size: 24px;
line-height: 1;
color: var(--tile-color);
}
[data-nav-layout="sidebar"] .profile-ach-summary-value-text {
font-size: 14px;
font-weight: 700;
color: var(--tile-color);
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .profile-ach-summary-label {
font-size: 10.5px;
font-weight: 700;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: .1em;
margin-top: 4px;
}
/* Achievements filter row (discipline + type) */
[data-nav-layout="sidebar"] .profile-ach-filter-row {
display: flex;
gap: 8px;
padding: 12px 18px;
flex-wrap: wrap;
border-top: 1px solid var(--border-1);
}
/* Year accordion */
[data-nav-layout="sidebar"] .profile-ach-year + .profile-ach-year { border-top: 1px solid var(--border-1); }
[data-nav-layout="sidebar"] .profile-ach-year-head {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 16px;
background: var(--gray-50);
border: 0;
border-top: 1px solid var(--border-1);
cursor: pointer;
text-align: left;
font-family: var(--ff-sans);
transition: background 120ms;
}
[data-nav-layout="sidebar"] .profile-ach-year:first-of-type .profile-ach-year-head { border-top: 1px solid var(--border-1); }
[data-nav-layout="sidebar"] .profile-ach-year-head:hover { background: var(--gray-100); }
[data-nav-layout="sidebar"] .profile-ach-year-chev {
font-size: 16px;
color: var(--fg-3);
transition: transform 200ms;
}
[data-nav-layout="sidebar"] .profile-ach-year-label {
font-family: var(--ff-serif);
font-size: 14px;
color: var(--fg-1);
flex: 1;
line-height: 1.2;
}
[data-nav-layout="sidebar"] .profile-ach-year-count {
font-size: 10.5px;
font-weight: 800;
color: var(--fg-3);
background: rgba(0, 0, 0, 0.06);
padding: 1px 8px;
border-radius: 999px;
}
/* Header info-bar links — same look as the static meta items, but they
pulse a hint that they're clickable on hover. Anchor scroll lands the
target section just below the sticky topbar. */
[data-nav-layout="sidebar"] .profile-info-meta-item.is-link {
text-decoration: none;
cursor: pointer;
transition: color 120ms;
}
[data-nav-layout="sidebar"] .profile-info-meta-item.is-link:hover {
color: var(--ind-700);
}
[data-nav-layout="sidebar"] .profile-info-meta-item.is-link:hover .material-symbols-outlined,
[data-nav-layout="sidebar"] .profile-info-meta-item.is-link:hover i {
color: var(--ind-700);
}
/* Anchor offset so #horses / #facilities / #achievements clear the sticky
topbar (≈64px) when scrolled into view. */
[data-nav-layout="sidebar"] #horses,
[data-nav-layout="sidebar"] #facilities,
[data-nav-layout="sidebar"] #achievements {
scroll-margin-top: 80px;
}
html[data-nav-layout="sidebar"] { scroll-behavior: smooth; }
/* ── Memorial / deceased state on the horses list ─────────────────── */
[data-nav-layout="sidebar"] .profile-horse-card.is-memorial {
background: linear-gradient(180deg, transparent 0%, rgba(107, 114, 128, 0.04) 100%);
}
[data-nav-layout="sidebar"] .profile-horse-card.is-memorial .profile-horse-image {
filter: grayscale(40%);
opacity: 0.92;
}
[data-nav-layout="sidebar"] .profile-horse-deceased-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
background: #f3f4f6;
color: #6b7280;
flex-shrink: 0;
margin-left: 2px;
}
[data-nav-layout="sidebar"] .profile-horse-deceased-badge .material-symbols-outlined { font-size: 12px; }
/* Memorial column (replaces Status when on the Memorial tab). */
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-col-memorial {
display: none;
}
[data-nav-layout="sidebar"] .profile-horse-grid.is-list:has(.profile-horse-col-memorial) .profile-horse-col-memorial,
[data-nav-layout="sidebar"] .profile-horse-grid.is-list .profile-horse-card.is-memorial .profile-horse-col-memorial {
display: block;
}
/* ════════════════════════════════════════════════════════════════════
Sales dashboard — listing rows + offer rows
════════════════════════════════════════════════════════════════════ */
[data-nav-layout="sidebar"] .sales-thumb {
width: 88px;
height: 56px;
border-radius: 8px;
object-fit: cover;
border: 1px solid var(--border-1);
background: linear-gradient(135deg, #fef3c7, #fcd34d);
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .sales-offer-row,
[data-nav-layout="sidebar"] .sales-listing-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-bottom: 1px solid var(--border-1);
transition: background 140ms;
}
[data-nav-layout="sidebar"] .sales-offer-row:last-child,
[data-nav-layout="sidebar"] .sales-listing-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .sales-offer-row:hover,
[data-nav-layout="sidebar"] .sales-listing-row:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .sales-offer-meta,
[data-nav-layout="sidebar"] .sales-listing-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .sales-offer-name {
font-size: 14px;
font-weight: 700;
color: var(--fg-1);
text-decoration: none;
}
[data-nav-layout="sidebar"] .sales-offer-name:hover { color: var(--ind-700); }
[data-nav-layout="sidebar"] .sales-offer-sub {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 2px;
}
[data-nav-layout="sidebar"] .sales-offer-sub a { color: var(--ind-600); text-decoration: none; }
[data-nav-layout="sidebar"] .sales-listing-name {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-size: 14px;
font-weight: 700;
}
[data-nav-layout="sidebar"] .sales-listing-name a { color: var(--fg-1); text-decoration: none; }
[data-nav-layout="sidebar"] .sales-listing-name a:hover { color: var(--ind-700); }
[data-nav-layout="sidebar"] .sales-priority-star {
font-size: 16px;
color: #c026d3;
}
[data-nav-layout="sidebar"] .sales-listing-sub {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 3px;
}
[data-nav-layout="sidebar"] .sales-offer-amount,
[data-nav-layout="sidebar"] .sales-listing-pricing {
text-align: right;
flex-shrink: 0;
min-width: 120px;
}
[data-nav-layout="sidebar"] .sales-offer-price,
[data-nav-layout="sidebar"] .sales-price-main {
font-family: var(--ff-mono);
font-size: 16px;
font-weight: 700;
color: #15803d;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
[data-nav-layout="sidebar"] .sales-offer-expires {
font-size: 10.5px;
color: var(--fg-4);
margin-top: 2px;
}
[data-nav-layout="sidebar"] .sales-price-coins {
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--ff-mono);
font-weight: 700;
color: #b45309;
font-variant-numeric: tabular-nums;
justify-content: flex-end;
}
[data-nav-layout="sidebar"] .sales-price-coins.is-main { font-size: 16px; }
[data-nav-layout="sidebar"] .sales-price-coins.is-secondary { font-size: 11.5px; }
[data-nav-layout="sidebar"] .sales-price-coins .material-symbols-outlined { font-size: 13px; }
[data-nav-layout="sidebar"] .sales-listing-fee-label {
font-size: 10.5px;
color: var(--fg-3);
margin-top: 1px;
}
[data-nav-layout="sidebar"] .sales-listing-flags {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
margin-top: 4px;
}
[data-nav-layout="sidebar"] .sales-flag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
text-decoration: none;
}
[data-nav-layout="sidebar"] .sales-action-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 8px;
color: var(--fg-2);
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: background 120ms;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .sales-action-btn:hover { background: var(--gray-50); }
[data-nav-layout="sidebar"] .sales-action-btn.is-primary {
background: #fef9c3;
border-color: #fde047;
color: #854d0e;
}
[data-nav-layout="sidebar"] .sales-action-btn.is-primary:hover { background: #fde047; }
[data-nav-layout="sidebar"] .sales-action-btn .material-symbols-outlined { font-size: 16px; }
@media (max-width: 640px) {
[data-nav-layout="sidebar"] .sales-offer-row,
[data-nav-layout="sidebar"] .sales-listing-row { flex-wrap: wrap; }
[data-nav-layout="sidebar"] .sales-listing-pricing { text-align: left; min-width: 0; flex: 1; }
[data-nav-layout="sidebar"] .sales-listing-flags { justify-content: flex-start; }
}
/* ════════════════════════════════════════════════════════════════════
Facilities index — tile grid + notice banners + quick links
════════════════════════════════════════════════════════════════════ */
[data-nav-layout="sidebar"] .dash-sb-notice {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--border-1);
background: #fff;
font-size: 13px;
}
[data-nav-layout="sidebar"] .dash-sb-notice .material-symbols-outlined { font-size: 22px; flex-shrink: 0; }
[data-nav-layout="sidebar"] .dash-sb-notice-body { flex: 1; }
[data-nav-layout="sidebar"] .dash-sb-notice-body strong { color: var(--fg-1); }
[data-nav-layout="sidebar"] .dash-sb-notice-body a {
color: var(--ind-600);
text-decoration: none;
font-weight: 700;
}
[data-nav-layout="sidebar"] .dash-sb-notice-body a:hover { text-decoration: underline; }
[data-nav-layout="sidebar"] .dash-sb-notice.is-warning {
background: #fffbeb;
border-color: #fde68a;
}
[data-nav-layout="sidebar"] .dash-sb-notice.is-warning .material-symbols-outlined { color: #b45309; }
[data-nav-layout="sidebar"] .dash-sb-notice.is-info {
background: #eef2ff;
border-color: #c7d2fe;
}
[data-nav-layout="sidebar"] .dash-sb-notice.is-info .material-symbols-outlined { color: #4338ca; }
[data-nav-layout="sidebar"] .facility-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
[data-nav-layout="sidebar"] .facility-tile {
display: block;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
transition: transform 160ms var(--ease-std), box-shadow 160ms var(--ease-std), border-color 160ms;
}
[data-nav-layout="sidebar"] .facility-tile:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -10px rgba(15, 23, 42, .18);
border-color: color-mix(in oklab, #15803d 25%, var(--border-1));
}
[data-nav-layout="sidebar"] .facility-tile.is-locked {
opacity: 0.6;
pointer-events: auto;
}
[data-nav-layout="sidebar"] .facility-tile.is-locked .facility-tile-banner img {
filter: grayscale(100%);
}
[data-nav-layout="sidebar"] .facility-tile-banner {
position: relative;
height: 120px;
background: var(--gray-100);
overflow: hidden;
}
[data-nav-layout="sidebar"] .facility-tile-banner img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms;
}
[data-nav-layout="sidebar"] .facility-tile:hover .facility-tile-banner img { transform: scale(1.04); }
[data-nav-layout="sidebar"] .facility-tile-banner-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.40) 100%);
}
[data-nav-layout="sidebar"] .facility-tile-badge {
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
[data-nav-layout="sidebar"] .facility-tile-badge .material-symbols-outlined { font-size: 11px; }
[data-nav-layout="sidebar"] .facility-tile-repair-dot {
position: absolute;
top: 12px;
right: 12px;
width: 12px;
height: 12px;
border-radius: 999px;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
[data-nav-layout="sidebar"] .facility-tile-repair-dot.is-good { background: #22c55e; }
[data-nav-layout="sidebar"] .facility-tile-repair-dot.is-fair { background: #f59e0b; }
[data-nav-layout="sidebar"] .facility-tile-repair-dot.is-poor { background: #ef4444; }
[data-nav-layout="sidebar"] .facility-tile-body { padding: 14px 16px 16px; }
[data-nav-layout="sidebar"] .facility-tile-name {
font-family: var(--ff-serif);
font-size: 18px;
color: var(--fg-1);
line-height: 1.2;
margin-bottom: 4px;
}
[data-nav-layout="sidebar"] .facility-tile-sub {
font-size: 11.5px;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .facility-tile-sub a { color: var(--ind-600); text-decoration: none; font-weight: 700; }
[data-nav-layout="sidebar"] .facility-tile-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 10px;
}
[data-nav-layout="sidebar"] .facility-tile-meta > span {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .facility-tile-meta .material-symbols-outlined { font-size: 14px; color: var(--fg-4); }
[data-nav-layout="sidebar"] .facility-tile-repair-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
[data-nav-layout="sidebar"] .facility-tile-repair-pct {
font-size: 11px;
font-weight: 800;
font-family: var(--ff-mono);
}
[data-nav-layout="sidebar"] .facility-tile-repair-pct.is-good { color: #15803d; }
[data-nav-layout="sidebar"] .facility-tile-repair-pct.is-fair { color: #b45309; }
[data-nav-layout="sidebar"] .facility-tile-repair-pct.is-poor { color: #b91c1c; }
[data-nav-layout="sidebar"] .facility-tile-repair-track {
height: 5px;
background: var(--gray-200);
border-radius: 999px;
overflow: hidden;
}
[data-nav-layout="sidebar"] .facility-tile-repair-fill {
height: 100%;
border-radius: 999px;
transition: width 200ms;
}
[data-nav-layout="sidebar"] .facility-tile-repair-fill.is-good { background: #22c55e; }
[data-nav-layout="sidebar"] .facility-tile-repair-fill.is-fair { background: #f59e0b; }
[data-nav-layout="sidebar"] .facility-tile-repair-fill.is-poor { background: #ef4444; }
[data-nav-layout="sidebar"] .facility-quick-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
[data-nav-layout="sidebar"] .facility-quick-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
color: var(--fg-2);
text-decoration: none;
transition: background 120ms, border-color 120ms;
}
[data-nav-layout="sidebar"] .facility-quick-link:hover {
background: var(--gray-50);
border-color: var(--gray-300);
color: var(--fg-1);
}
/* ════════════════════════════════════════════════════════════════════
Facility detail (visitor variant) — hero, info bar with SoR, detail
list, public horses tile grid.
════════════════════════════════════════════════════════════════════ */
[data-nav-layout="sidebar"] .facility-hero { min-height: 240px; background-position: center; }
[data-nav-layout="sidebar"] .facility-info-bar {
/* Same overlap pattern as the user profile info bar. */
margin-top: -56px;
}
[data-nav-layout="sidebar"] .facility-sor {
margin-top: -42px;
flex-shrink: 0;
width: 96px;
height: 96px;
border-radius: 14px;
border: 4px solid #fff;
background: #1a2236;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.25);
}
[data-nav-layout="sidebar"] .facility-sor-label {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
opacity: 0.7;
}
[data-nav-layout="sidebar"] .facility-sor-value {
font-family: var(--ff-serif);
font-size: 30px;
line-height: 1;
margin-top: 2px;
}
[data-nav-layout="sidebar"] .facility-sor-value span { font-size: 16px; }
[data-nav-layout="sidebar"] .facility-sor-value.is-good { color: #86efac; }
[data-nav-layout="sidebar"] .facility-sor-value.is-fair { color: #fcd34d; }
[data-nav-layout="sidebar"] .facility-sor-value.is-poor { color: #fca5a5; }
/* Detail list (overview + amenities cards) */
[data-nav-layout="sidebar"] .facility-detail-list {
display: flex;
flex-direction: column;
}
[data-nav-layout="sidebar"] .facility-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
border-bottom: 1px solid var(--border-1);
font-size: 13px;
color: var(--fg-3);
gap: 12px;
}
[data-nav-layout="sidebar"] .facility-detail-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .facility-detail-row > span:first-child {
display: inline-flex;
align-items: center;
gap: 6px;
}
[data-nav-layout="sidebar"] .facility-detail-row .material-symbols-outlined {
font-size: 16px;
color: var(--fg-4);
}
[data-nav-layout="sidebar"] .facility-detail-value {
font-weight: 700;
color: var(--fg-1);
text-decoration: none;
font-variant-numeric: tabular-nums;
}
[data-nav-layout="sidebar"] .facility-detail-link { color: var(--ind-600); }
[data-nav-layout="sidebar"] .facility-detail-link:hover { color: var(--ind-700); text-decoration: underline; }
/* Public horses grid (banner-style cards) */
[data-nav-layout="sidebar"] .facility-horse-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
padding: 14px 18px;
}
[data-nav-layout="sidebar"] .facility-horse-tile {
display: block;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 160ms var(--ease-std), box-shadow 160ms var(--ease-std), border-color 160ms;
}
[data-nav-layout="sidebar"] .facility-horse-tile:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.18);
border-color: color-mix(in oklab, var(--ind-600) 25%, var(--border-1));
}
[data-nav-layout="sidebar"] .facility-horse-tile.is-boarder {
border-color: #6ee7b7;
}
[data-nav-layout="sidebar"] .facility-horse-tile.is-boarder:hover {
border-color: #15803d;
}
[data-nav-layout="sidebar"] .facility-horse-tile-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(135deg, #fef3c7, #fcd34d);
}
[data-nav-layout="sidebar"] .facility-horse-tile-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms;
}
[data-nav-layout="sidebar"] .facility-horse-tile:hover .facility-horse-tile-image img { transform: scale(1.05); }
[data-nav-layout="sidebar"] .facility-horse-tile-boarder {
position: absolute;
top: 8px;
left: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
background: #15803d;
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
}
[data-nav-layout="sidebar"] .facility-horse-tile-boarder .material-symbols-outlined { font-size: 12px; }
[data-nav-layout="sidebar"] .facility-horse-tile-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 24px 12px 10px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .60) 100%);
color: #fff;
}
[data-nav-layout="sidebar"] .facility-horse-tile-name {
display: inline-flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
font-size: 14px;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
[data-nav-layout="sidebar"] .facility-horse-tile-brand { height: 14px; width: auto; }
[data-nav-layout="sidebar"] .facility-horse-tile-tag {
font-size: 11px;
font-style: italic;
color: rgba(255, 255, 255, 0.85);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-nav-layout="sidebar"] .facility-horse-tile-meta {
padding: 8px 12px 10px;
font-size: 11.5px;
color: var(--fg-3);
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
/* ── Facility owner sections (capacity breakdown + quick actions) ─── */
[data-nav-layout="sidebar"] .facility-capacity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
padding: 16px 18px;
}
[data-nav-layout="sidebar"] .facility-capacity-tile {
background: var(--gray-50);
border: 1px solid var(--border-1);
border-radius: 12px;
padding: 14px 16px;
}
[data-nav-layout="sidebar"] .facility-capacity-label {
font-size: 10.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: 6px;
}
[data-nav-layout="sidebar"] .facility-capacity-value {
font-family: var(--ff-serif);
font-size: 28px;
line-height: 1;
color: var(--fg-1);
font-variant-numeric: tabular-nums;
}
[data-nav-layout="sidebar"] .facility-capacity-value > span {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fg-3);
margin-left: 2px;
font-family: var(--ff-sans);
}
/* The "out of N" sub-line can wrap chips below it when needed. */
[data-nav-layout="sidebar"] .facility-capacity-sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
[data-nav-layout="sidebar"] .facility-capacity-track {
height: 6px;
background: var(--gray-200);
border-radius: 999px;
overflow: hidden;
margin-top: 8px;
}
[data-nav-layout="sidebar"] .facility-capacity-fill { height: 100%; border-radius: 999px; }
[data-nav-layout="sidebar"] .facility-capacity-sub {
margin-top: 8px;
font-size: 11.5px;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .facility-capacity-breakdown { padding: 14px 16px 12px; }
[data-nav-layout="sidebar"] .facility-capacity-breakdown-list {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
[data-nav-layout="sidebar"] .facility-capacity-breakdown-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--fg-2);
}
[data-nav-layout="sidebar"] .facility-capacity-breakdown-list .material-symbols-outlined { font-size: 16px; }
[data-nav-layout="sidebar"] .facility-capacity-breakdown-name { flex: 1; }
[data-nav-layout="sidebar"] .facility-capacity-breakdown-val {
font-family: var(--ff-mono);
font-weight: 700;
color: var(--fg-1);
}
/* Quick actions grid */
[data-nav-layout="sidebar"] .facility-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
padding: 16px 18px;
}
[data-nav-layout="sidebar"] .facility-action-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
[data-nav-layout="sidebar"] .facility-action-tile:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .18);
border-color: var(--gray-300);
}
[data-nav-layout="sidebar"] .facility-action-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .facility-action-icon .material-symbols-outlined,
[data-nav-layout="sidebar"] .facility-action-icon i { font-size: 18px; }
[data-nav-layout="sidebar"] .facility-action-title {
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
line-height: 1.2;
}
[data-nav-layout="sidebar"] .facility-action-sub {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 2px;
}
[data-nav-layout="sidebar"] .facility-actions-footer {
padding: 12px 18px 14px;
border-top: 1px solid var(--border-1);
text-align: center;
}
[data-nav-layout="sidebar"] .facility-actions-deeplink {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--ind-600);
text-decoration: none;
}
[data-nav-layout="sidebar"] .facility-actions-deeplink:hover { color: var(--ind-700); text-decoration: underline; }
[data-nav-layout="sidebar"] .facility-actions-deeplink .material-symbols-outlined { font-size: 14px; }
/* ════════════════════════════════════════════════════════════════════
Facility manage view (owner-only) — barns, amenities, horse rows,
boarding summary, deep-link footer.
════════════════════════════════════════════════════════════════════ */
[data-nav-layout="sidebar"] .manage-back-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #fff;
text-decoration: none;
transition: background 120ms;
margin-right: 4px;
}
[data-nav-layout="sidebar"] .manage-back-link:hover { background: rgba(255, 255, 255, 0.28); }
[data-nav-layout="sidebar"] .manage-back-link .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .manage-nav-position {
margin-left: 6px;
font-family: var(--ff-mono);
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.10);
padding: 2px 7px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* ── Barns & stalls list ─────────────────────────────────────────── */
[data-nav-layout="sidebar"] .manage-barn-list {
display: flex;
flex-direction: column;
}
[data-nav-layout="sidebar"] .manage-barn-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .manage-barn-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .manage-barn-row.is-warning {
background: #fffbeb;
}
[data-nav-layout="sidebar"] .manage-barn-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .manage-barn-icon .material-symbols-outlined { font-size: 20px; }
[data-nav-layout="sidebar"] .manage-barn-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .manage-barn-name {
font-size: 14px;
font-weight: 700;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .manage-barn-sub {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 2px;
}
/* ── Amenities grid ──────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .manage-amenity-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
padding: 14px 18px;
}
[data-nav-layout="sidebar"] .manage-amenity-tile {
background: #fff;
border: 1px solid var(--border-1);
border-radius: 12px;
padding: 12px 14px;
}
[data-nav-layout="sidebar"] .manage-amenity-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
[data-nav-layout="sidebar"] .manage-amenity-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .manage-amenity-icon .material-symbols-outlined { font-size: 18px; }
[data-nav-layout="sidebar"] .manage-amenity-label {
font-size: 12px;
font-weight: 700;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: .08em;
}
[data-nav-layout="sidebar"] .manage-amenity-count {
font-family: var(--ff-serif);
font-size: 22px;
line-height: 1;
color: var(--fg-1);
margin-top: 2px;
}
[data-nav-layout="sidebar"] .manage-amenity-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--border-1);
padding-top: 8px;
}
[data-nav-layout="sidebar"] .manage-amenity-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 0;
font-size: 12px;
color: var(--fg-2);
}
[data-nav-layout="sidebar"] .manage-amenity-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-nav-layout="sidebar"] .manage-amenity-list-cap {
font-family: var(--ff-mono);
font-weight: 700;
color: var(--fg-3);
}
[data-nav-layout="sidebar"] .manage-amenity-list-more {
font-size: 11.5px;
color: var(--ind-600);
font-weight: 600;
justify-content: flex-start !important;
}
/* ── Horse rows (assign / boarders) ──────────────────────────────── */
[data-nav-layout="sidebar"] .manage-horse-list {
display: flex;
flex-direction: column;
}
[data-nav-layout="sidebar"] .manage-horse-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .manage-horse-row:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .manage-horse-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .manage-horse-name {
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
text-decoration: none;
}
[data-nav-layout="sidebar"] .manage-horse-name:hover { color: var(--ind-700); }
[data-nav-layout="sidebar"] .manage-horse-sub {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 2px;
}
[data-nav-layout="sidebar"] .manage-horse-sub a { color: var(--ind-600); text-decoration: none; }
[data-nav-layout="sidebar"] .manage-horse-list-more {
padding: 10px 18px;
font-size: 12px;
color: var(--fg-3);
text-align: center;
border-top: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .manage-horse-list-more a { color: var(--ind-600); font-weight: 700; text-decoration: none; margin-left: 4px; }
/* ── Boarding card ───────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .manage-boarding-badge {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 2px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
vertical-align: 2px;
text-transform: uppercase;
}
[data-nav-layout="sidebar"] .manage-boarding-badge.is-open { background: #dcfce7; color: #15803d; }
[data-nav-layout="sidebar"] .manage-boarding-badge.is-closed { background: #f3f4f6; color: #6b7280; }
[data-nav-layout="sidebar"] .manage-boarding-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .manage-boarding-stat {
background: var(--gray-50);
border: 1px solid var(--border-1);
border-radius: 10px;
padding: 12px 14px;
text-align: center;
}
[data-nav-layout="sidebar"] .manage-boarding-stat-value {
font-family: var(--ff-serif);
font-size: 24px;
line-height: 1;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .manage-boarding-stat-label {
font-size: 10.5px;
font-weight: 700;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: .1em;
margin-top: 5px;
}
/* ── Deep-link footer ────────────────────────────────────────────── */
[data-nav-layout="sidebar"] .manage-deep-link-footer {
text-align: center;
padding: 18px 14px;
border-top: 1px solid var(--border-1);
margin-top: 8px;
}
[data-nav-layout="sidebar"] .manage-deep-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 10px;
color: var(--fg-2);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background 120ms, border-color 120ms;
}
[data-nav-layout="sidebar"] .manage-deep-link:hover {
background: var(--gray-50);
border-color: var(--gray-300);
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .manage-deep-link .material-symbols-outlined { font-size: 16px; color: var(--ind-600); }
[data-nav-layout="sidebar"] .manage-deep-link-note {
margin: 8px 0 0;
font-size: 11.5px;
color: var(--fg-3);
}
/* ── Manage view (Phase 1) — inline name editing, amenity rows, stall rows ─ */
[data-nav-layout="sidebar"] .manage-name-edit-wrap {
display: flex;
align-items: center;
gap: 8px;
}
[data-nav-layout="sidebar"] .manage-name-edit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 0;
color: inherit;
cursor: pointer;
margin-left: 6px;
transition: background 120ms;
vertical-align: 4px;
}
[data-nav-layout="sidebar"] .manage-name-edit-btn:hover { background: rgba(255, 255, 255, 0.32); }
[data-nav-layout="sidebar"] .manage-name-edit-btn .material-symbols-outlined { font-size: 14px; }
[data-nav-layout="sidebar"] .manage-name-edit-btn-inline {
width: 18px;
height: 18px;
background: var(--gray-100);
color: var(--fg-3);
margin-left: 4px;
vertical-align: 1px;
}
[data-nav-layout="sidebar"] .manage-name-edit-btn-inline:hover { background: var(--gray-200); color: var(--fg-1); }
[data-nav-layout="sidebar"] .manage-name-edit-btn-inline .material-symbols-outlined { font-size: 12px; }
[data-nav-layout="sidebar"] .manage-name-edit-form {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
[data-nav-layout="sidebar"] .manage-name-edit-form input {
padding: 6px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.95);
color: var(--fg-1);
font-family: var(--ff-serif);
font-size: 22px;
min-width: 280px;
}
/* Inline form (used for amenity name edit, etc.) */
[data-nav-layout="sidebar"] .manage-inline-form {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .manage-inline-form input[type="text"] {
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--border-1);
background: #fff;
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
min-width: 160px;
}
/* Repair-state pill */
[data-nav-layout="sidebar"] .manage-sor-pill {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
font-family: var(--ff-mono);
flex-shrink: 0;
}
[data-nav-layout="sidebar"] .manage-sor-pill.is-good { background: #dcfce7; color: #15803d; }
[data-nav-layout="sidebar"] .manage-sor-pill.is-fair { background: #fef3c7; color: #b45309; }
[data-nav-layout="sidebar"] .manage-sor-pill.is-poor { background: #fee2e2; color: #b91c1c; }
/* Barn block */
[data-nav-layout="sidebar"] .manage-barn-block {
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .manage-barn-block:last-child { border-bottom: none; }
[data-nav-layout="sidebar"] .manage-barn-block-head {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--gray-50);
}
[data-nav-layout="sidebar"] .manage-barn-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Stall list inside a barn */
[data-nav-layout="sidebar"] .manage-stall-list {
background: #fff;
}
[data-nav-layout="sidebar"] .manage-stall-row {
display: grid;
grid-template-columns: 28px minmax(0, 1.5fr) auto auto auto;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 36px;
border-top: 1px solid var(--border-1);
font-size: 13px;
}
@media (max-width: 768px) {
[data-nav-layout="sidebar"] .manage-stall-row {
grid-template-columns: 28px 1fr auto;
gap: 8px;
padding-left: 18px;
}
[data-nav-layout="sidebar"] .manage-stall-row > form,
[data-nav-layout="sidebar"] .manage-stall-row > select {
grid-column: 1 / -1;
}
}
[data-nav-layout="sidebar"] .manage-stall-icon { font-size: 18px; color: var(--fg-4); }
[data-nav-layout="sidebar"] .manage-stall-meta { min-width: 0; }
[data-nav-layout="sidebar"] .manage-stall-name {
font-size: 13px;
font-weight: 700;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .manage-stall-sub {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 2px;
}
[data-nav-layout="sidebar"] .manage-stall-occupied {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--ind-600);
}
[data-nav-layout="sidebar"] .manage-stall-occupied a { color: inherit; text-decoration: none; font-weight: 700; }
[data-nav-layout="sidebar"] .manage-stall-occupied a:hover { color: var(--ind-700); }
[data-nav-layout="sidebar"] .manage-stall-empty { font-style: italic; color: var(--fg-4); }
[data-nav-layout="sidebar"] .manage-stall-empty-row {
padding: 12px 18px;
color: var(--fg-3);
font-size: 12.5px;
font-style: italic;
background: #fff;
border-top: 1px solid var(--border-1);
}
/* Unassigned stalls block */
[data-nav-layout="sidebar"] .manage-unassigned-stalls {
border-top: 1px solid var(--border-1);
background: #fffbeb;
}
[data-nav-layout="sidebar"] .manage-unassigned-head {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
}
[data-nav-layout="sidebar"] .manage-unassigned-head .material-symbols-outlined {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fef3c7;
color: #b45309;
flex-shrink: 0;
font-size: 22px;
}
[data-nav-layout="sidebar"] .manage-unassigned-form {
padding: 0 18px 14px;
margin: 0;
}
[data-nav-layout="sidebar"] .manage-unassigned-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 6px;
margin: 8px 0 12px;
}
[data-nav-layout="sidebar"] .manage-unassigned-stall {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 8px;
font-size: 12.5px;
cursor: pointer;
}
[data-nav-layout="sidebar"] .manage-unassigned-stall input[type="checkbox"] { accent-color: var(--ind-600); }
[data-nav-layout="sidebar"] .manage-unassigned-stall .material-symbols-outlined { font-size: 16px; color: var(--fg-3); }
[data-nav-layout="sidebar"] .manage-unassigned-stall-name { flex: 1; min-width: 0; font-weight: 700; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-nav-layout="sidebar"] .manage-unassigned-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
[data-nav-layout="sidebar"] .manage-unassigned-no-barn {
padding: 14px 18px;
font-size: 12.5px;
color: var(--fg-3);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
/* Amenity rows (paddocks / pastures / training / land / other).
Sections are arranged in a responsive grid so multiple categories can
sit side-by-side on wider viewports — kills the long vertical scroll. */
[data-nav-layout="sidebar"] .manage-amenity-sections-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
padding: 14px 18px;
}
[data-nav-layout="sidebar"] .manage-amenity-section {
background: #fff;
border: 1px solid var(--border-1);
border-radius: 12px;
overflow: hidden;
}
[data-nav-layout="sidebar"] .manage-amenity-section-head {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--gray-50);
border-bottom: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .manage-amenity-section-title {
font-family: var(--ff-serif);
font-size: 16px;
color: var(--fg-1);
flex: 1;
}
[data-nav-layout="sidebar"] .manage-amenity-section-count {
font-size: 11px;
font-weight: 800;
color: var(--fg-3);
background: rgba(0, 0, 0, 0.06);
padding: 2px 9px;
border-radius: 999px;
}
[data-nav-layout="sidebar"] .manage-amenity-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-top: 1px solid var(--border-1);
}
[data-nav-layout="sidebar"] .manage-amenity-section .manage-amenity-row:first-of-type {
border-top: 0;
}
[data-nav-layout="sidebar"] .manage-amenity-row-meta { flex: 1; min-width: 0; }
[data-nav-layout="sidebar"] .manage-amenity-name {
font-size: 13.5px;
font-weight: 700;
color: var(--fg-1);
}
[data-nav-layout="sidebar"] .manage-amenity-sub {
font-size: 11.5px;
color: var(--fg-3);
margin-top: 2px;
}
/* Horse-row form variant */
[data-nav-layout="sidebar"] .manage-horse-row-form {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid var(--border-1);
margin: 0;
}
[data-nav-layout="sidebar"] .manage-horse-row-form select { min-width: 180px; }
@media (max-width: 768px) {
[data-nav-layout="sidebar"] .manage-horse-row-form { flex-wrap: wrap; }
[data-nav-layout="sidebar"] .manage-horse-row-form select,
[data-nav-layout="sidebar"] .manage-horse-row-form button { flex: 1; }
}
/* Disabled action button */
[data-nav-layout="sidebar"] .profile-action-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ── Manage view (Phase 1, tightened) — chip grid for stalls ──────── */
/* Barn header chevron + clickable head — div with role="button" since
it nests buttons + forms; an actual