/* ============================================================================= refresh.css — Broad Reach UI refresh (design-token driven, scoped under .br) ============================================================================= This file is the single hand-written stylesheet that ships the UI refresh. It is served flat by Propshaft alongside application.css. No SCSS, no build step: plain CSS with custom properties scoped to `.br` on . Retained stylesheets (intentionally NOT absorbed or deleted): - application.css : 7978-line pre-compiled legacy bundle; the project's established static-CSS pattern. - global.css : .container width and .app-time fixed positioning are load-bearing app chrome. - bootstrap_and_overrides.css : Historical Bootstrap 3 overrides the refresh does not re-implement; retained as-is. - fonts.css : Legacy font-face declarations still in use for non-refresh surfaces (mailers, etc.). - bootstrap.css : Vendored Bootstrap 3 core. Do not touch. - bootstrap-datetimepicker.css : Vendor plugin stylesheet for the datetime picker widget used in bid / reservation forms. - bootstrap-social.css : Vendor stylesheet for social sign-in buttons. - bootstrapdocs.css : Vendor doc-style helpers referenced in a handful of admin pages; retained until audit. - jasny-bootstrap.min.css : Vendor plugin for off-canvas / file-input patterns used in admin forms. - video-js.css : Vendor stylesheet for the video.js player used in promotional / help media. Tokens are declared on `.br { ... }` (deliberately NOT on the document root) so refresh variables cannot leak into layouts that opt out (mailer layouts, future layouts without the `.br` body class). ========================================================================== */ /* === TOKENS === */ .br { /* Color — ink */ --br-ink: #15181c; --br-ink-2: #4a5058; --br-ink-3: #545a66; /* darkened from #7a828d for readability (contrast ~5.8:1 on #fafaf7) */ --br-ink-4: #b0b5bc; /* Color — surface */ --br-bg: #fafaf7; --br-surface: #ffffff; --br-surface-2: #fbfaf5; --br-line: #e5e3dc; --br-line-soft: #eeece6; --br-muted: #f0eee7; /* Color — accent (single brand-ish teal) */ --br-accent: #175a74; --br-accent-2: #124b61; --br-accent-s: #dbeaf1; /* soft tint (deeper) */ --br-accent-b: #a9c9d7; /* border on tint (deeper) */ /* Color — semantic */ --br-ok: #2e7d3e; --br-ok-s: #d6ecd6; --br-ok-b: #a8cfa8; --br-warn: #9a6b0e; --br-warn-s: #fbf1dc; --br-warn-b: #e8d4a4; --br-danger: #9c2a2a; --br-danger-s: #f2d3cf; --br-danger-b: #d99a94; --br-race: #5b3a8c; /* shifted to purple for hue separation from accent */ --br-race-s: #e6dcf5; --br-race-b: #c4b2e0; /* Radii */ --br-r-sm: 4px; --br-r: 6px; --br-r-lg: 8px; /* Shadow */ --br-sh-1: 0 1px 0 rgba(0,0,0,0.02); --br-sh-2: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04); /* Type */ --br-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --br-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } /* === BASE === */ .br { font-family: var(--br-font); color: var(--br-ink); -webkit-font-smoothing: antialiased; } .br .container { max-width: none; width: 96%; padding: 14px 0 40px; } .br .navbar-inverse > .container { padding: 0; } /* Navbar */ .br .navbar-inverse { background: #15181c; border: 0; border-radius: 0; margin: 0; min-height: 44px; } .br .navbar-inverse .navbar-brand { color: #eaeaea; font: 600 15px/1 var(--br-font); letter-spacing: -0.2px; padding: 13px 15px; display: flex; align-items: center; gap: 9px; } .br .navbar-inverse .navbar-brand::before { content: ""; width: 18px; height: 18px; border-radius: 4px; background-image: linear-gradient(135deg, #2a82a0, #124b61); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); } .br .navbar-inverse .navbar-nav > li > a { color: #bbb; font-size: 13.5px; } .br .navbar-inverse .navbar-nav > li > a:hover { color: #fff; background: rgba(255,255,255,0.06); } .br .breadcrumb { background: transparent; padding: 10px 0 10px 14px; margin: 0; font-size: 13px; } .br .breadcrumb > li { color: #d0d0d0; } .br .breadcrumb > li a { color: #9aa5ac; font-weight: 400; } .br .breadcrumb > li.active { color: #fff; font-weight: 500; } .br .breadcrumb > li + li:before { content: "›"; color: #555a62; padding: 0 8px; } /* Time machine banner */ .br .time-machine { background: #fff8ea; color: #7a5410; border-bottom: 1px solid #edd49f; padding: 9px 22px; font: 500 13px/1.3 var(--br-font); display: flex; align-items: center; gap: 10px; } .br .time-machine .fa { color: #c68a1a; } .br .time-machine .tm-date { font-weight: 600; color: #5a3e0c; } .br .time-machine a { color: #7a5410; text-decoration: underline; text-underline-offset: 2px; margin-left: auto; font-weight: 500; } /* Typography */ .br h1, .br h2, .br h3, .br h4 { font-family: var(--br-font); letter-spacing: -0.3px; color: var(--br-ink); } .br h1 { font: 500 24px/1.15 var(--br-font); letter-spacing: -0.5px; margin: 0 0 4px; } .br h2 { font: 500 18px/1.2 var(--br-font); letter-spacing: -0.3px; margin: 0 0 6px; } .br h3 { font: 700 12px/1 var(--br-font); text-transform: uppercase; letter-spacing: 1.2px; color: var(--br-ink); margin: 18px 0 8px; } .br h4 { font: 700 12px/1 var(--br-font); text-transform: uppercase; letter-spacing: 1.2px; color: var(--br-ink); margin: 14px 0 6px; } .br .page-sub { color: var(--br-ink-3); font-size: 13.5px; margin: -2px 0 24px; } /* Impersonation picker in navbar (admin not impersonating) */ .br .navbar-nav > li.impersonation-picker > a.dropdown-toggle { color: #9d9d9d; } .br .navbar-nav > li.impersonation-picker > a.dropdown-toggle:hover, .br .navbar-nav > li.impersonation-picker.open > a.dropdown-toggle { color: #fff; background: rgba(255,255,255,0.05); } .br .navbar-nav > li.impersonation-picker .dropdown-menu.impersonation-menu { max-height: 400px; overflow-y: auto; min-width: 220px; } .br .impersonation-admin-badge { background: #5bc0de; color: #fff; margin-left: 6px; font-size: 10px; text-transform: uppercase; } /* Full-width impersonation banner (uses .alert.alert-warning for contrast; override margin/radius to sit flush under navbar as a top-of-page banner). */ .br #impersonation-banner.alert { margin: 0 !important; border-radius: 0; padding: 12px 20px; text-align: center; font-size: 14px; } .br #impersonation-banner strong { margin-right: 14px; } .br #impersonation-banner strong .glyphicon { margin-right: 5px; } .br #impersonation-banner #impersonation-return { vertical-align: baseline; } /* Rails flash messages — shrink the BS3 .alert spacing so a one-line notice doesn't eat 80px above the page body. */ .br .flash-container { padding-top: 8px; padding-bottom: 0; } .br .flash-container .alert { padding: 8px 12px; margin-bottom: 8px; font-size: 13px; line-height: 1.4; border-radius: var(--br-r-sm); border-width: 1px; } .br .flash-container .alert > div { display: inline; } .br .flash-container .alert .btn { padding: 2px 8px; font-size: 12px; line-height: 1.3; vertical-align: baseline; } .br .flash-container .alert .close { padding: 0 0 0 6px; line-height: 1; opacity: 0.5; } /* Devise sign-in form wrapper */ .br .border-form-div { max-width: 300px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .br .border-form-div .form-signin-heading, .br .border-form-div .checkbox { margin-bottom: 10px; } .br .border-form-div input[type="text"], .br .border-form-div input[type="email"], .br .border-form-div input[type="password"] { font-size: 16px; height: auto; margin-bottom: 15px; padding: 7px 9px; } /* === BUTTONS === */ .br .btn { border-radius: var(--br-r); font: 500 13px/1.3 var(--br-font); letter-spacing: -0.05px; padding: 6px 12px; border-width: 1px; transition: background .12s, color .12s, border-color .12s; } .br .btn { text-transform: none; } .br .btn-default { background: #fff; color: var(--br-ink-2); border-color: var(--br-line); box-shadow: var(--br-sh-1); } .br .btn-default:hover, .br .btn-default:focus { background: #faf9f5; color: var(--br-ink); border-color: #d5d2c8; } .br .btn-primary, .br .btn-info { background: var(--br-accent); border-color: var(--br-accent); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.08); } .br .btn-primary:hover, .br .btn-info:hover, .br .btn-primary:focus, .br .btn-info:focus { background: var(--br-accent-2); border-color: var(--br-accent-2); color: #fff; } .br .btn-success { background: var(--br-ok); border-color: var(--br-ok); color: #fff; } .br .btn-success:hover { background: #245f31; border-color: #245f31; color: #fff; } .br .btn-xs { padding: 3px 8px; font-size: 11.5px; font-weight: 500; border-radius: var(--br-r-sm); } .br .btn-sm { padding: 4px 10px; font-size: 12.5px; } /* Subtle destructive — use instead of loud btn-danger for Remove/Delete. */ .br .btn-danger, .br .btn-danger-subtle { background: #fff; color: var(--br-danger); border-color: var(--br-danger-b); box-shadow: var(--br-sh-1); } .br .btn-danger:hover, .br .btn-danger-subtle:hover { background: var(--br-danger-s); color: var(--br-danger); border-color: var(--br-danger); } .br .btn-danger .glyphicon, .br .btn-danger-subtle .glyphicon { margin-right: 3px; } /* Defensive subtle-destructive override — forces subtlety when legacy rules (application.css, etc.) would otherwise render solid red. */ .br .btn-danger, .br .btn-danger.btn-sm, .br .btn-danger.btn-xs, .br .btn.btn-danger { background: #fff !important; color: var(--br-danger) !important; border: 1px solid var(--br-danger-b) !important; box-shadow: var(--br-sh-1); } .br .btn-danger:hover, .br .btn-danger.btn-sm:hover, .br .btn-danger.btn-xs:hover, .br .btn.btn-danger:hover { background: var(--br-danger-s) !important; color: var(--br-danger) !important; border-color: var(--br-danger) !important; } /* Inline button cluster — replaces pull-right stacks */ .br .actions { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .br td .actions { gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .br td .actions .btn { margin: 0; } /* === TABLES === */ .br .table { background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r-lg); overflow: hidden; border-collapse: separate; margin-bottom: 18px; } .br .table > thead > tr > th { background: var(--br-surface-2); border-bottom: 1px solid var(--br-line); color: var(--br-ink-3); font: 600 10.5px/1 var(--br-font); text-transform: uppercase; letter-spacing: 1px; padding: 12px 14px; vertical-align: middle; } .br .table > tbody > tr > td { padding: 12px 14px; vertical-align: middle; border-top: 1px solid var(--br-line-soft); font-size: 13.5px; } .br .table > tbody > tr:first-child > td { border-top: none; } .br .table-bordered, .br .table-bordered > thead > tr > th, .br .table-bordered > tbody > tr > td { border: none; } .br .table-bordered { border: 1px solid var(--br-line); } .br .table-bordered > thead > tr > th { border-bottom: 1px solid var(--br-line); } /* table-striped — visible zebra against the #fff table body */ .br .table-striped > tbody > tr:nth-of-type(odd) { background: #fff; } .br .table-striped > tbody > tr:nth-of-type(even) { background: #f3f1ea; } .br .table > tbody > tr:hover { background: var(--br-accent-s); transition: background .1s; } .br .table td.nowrap, .br .table th.nowrap, .br .table td.date-cell { white-space: nowrap; } /* === CHIPS === */ .br .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; font: 500 11.5px/1.3 var(--br-font); letter-spacing: -0.1px; border: 1px solid transparent; background: var(--br-muted); color: var(--br-ink-2); white-space: nowrap; } .br .chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--br-ink-3); } .br .chip--warn { background: var(--br-warn-s); color: var(--br-warn); border-color: var(--br-warn-b); } .br .chip--warn::before { background: var(--br-warn); } .br .chip--danger { background: var(--br-danger-s); color: var(--br-danger); border-color: var(--br-danger-b); } .br .chip--danger::before { background: var(--br-danger); } .br .chip--ok { background: var(--br-ok-s); color: var(--br-ok); border-color: var(--br-ok-b); } .br .chip--ok::before { background: var(--br-ok); } .br .chip--neutral { color: var(--br-ink-3); } .br .chip--accent { background: var(--br-accent-s); color: var(--br-accent); border-color: var(--br-accent-b); } .br .chip--accent::before { background: var(--br-accent); } /* Dot-less chip: used where the leading color bullet adds no information (ranks, span markers like E+N). Kind classes still drive color. */ .br .chip--nodot::before { content: none; } .br .chip--nodot { padding: 3px 8px; } /* Priority chip is always dot-less and numeric. */ .br .chip--priority { font-weight: 600; font-variant-numeric: tabular-nums; } /* Ghost chip: outline-only, dashed, de-emphasized. Used on multi-slot continuation cells and the matching legend sample. Single source of truth. */ .br .chip--ghost { background: transparent; border-style: dashed; opacity: 0.7; } /* Period row tints — mirror chip colors on tr backgrounds (admin/periods/show) */ .br #periods-page tr.never_opened { background: var(--br-muted); } .br #periods-page tr.open { background: var(--br-warn-s); } .br #periods-page tr.closed { background: var(--br-danger-s); } .br #periods-page tr.bids_resolved { background: var(--br-ok-s); } /* Instant-bid row tints — admin/instant_bids/index */ .br table#instant-bids tr.denied { background: var(--br-muted); } .br table#instant-bids tr.requested { background: var(--br-warn-s); } .br table#instant-bids tr.approved { background: var(--br-ok-s); } /* progress pill */ .br .pct-bar { display: flex; align-items: center; gap: 10px; } .br .pct-bar .bar { flex: 1; height: 4px; max-width: 80px; background: var(--br-line-soft); border-radius: 2px; overflow: hidden; } .br .pct-bar .bar > span { display: block; height: 100%; background: var(--br-ink-2); border-radius: 2px; } .br .pct-bar .pct { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 13px; color: var(--br-ink-2); min-width: 32px; text-align: right; } /* badge count — small square pill */ .br .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; font: 600 10.5px/1 var(--br-font); font-variant-numeric: tabular-nums; background: var(--br-muted); color: var(--br-ink-2); } .br .count--ok { background: var(--br-ok-s); color: var(--br-ok); } .br .count--accent { background: var(--br-accent-s); color: var(--br-accent); } .br .count--warn { background: var(--br-warn-s); color: var(--br-warn); } /* === CARDS === */ .br .well { background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r-lg); padding: 16px 18px; box-shadow: none; } .br .well + .well { margin-top: 16px; } .br .well h3:first-child, .br .well h4:first-child { margin-top: 0; } .br .well ul.list-unstyled { margin: 0; padding: 0; font-size: 13px; } /* kv-list — reusable key/value pairs inside a card */ .br .kv-list { list-style: none; margin: 0; padding: 0; font-size: 13px; } .br .kv-list li { padding: 6px 0; border-top: 1px solid var(--br-line-soft); color: var(--br-ink-2); display: flex; justify-content: space-between; gap: 12px; } .br .kv-list li:first-child { border-top: none; padding-top: 2px; } .br .kv-list .lbl { color: var(--br-ink-3); } .br .kv-list .val { font-variant-numeric: tabular-nums; color: var(--br-ink); font-weight: 500; } /* section-head — the H2 + action-cluster row; reusable everywhere */ .br .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 0 8px; border-bottom: 1px solid var(--br-line-soft); margin-bottom: 10px; } .br .section-head:first-child { padding-top: 0; } .br .section-head + .section-head { padding-top: 18px; } .br .section-head h2 { margin: 0 0 2px; } .br .section-head .lead { font: 400 13px/1.3 var(--br-font); color: var(--br-ink-3); } .br .section-head .actions { flex-shrink: 0; } /* share-card — replaces the fieldset/legend/threedface monstrosity */ .br .share-card { background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r-lg); padding: 0; margin-bottom: 18px; overflow: hidden; } .br .share-card__head { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--br-line-soft); } .br .share-card__head .title { font: 600 15px/1.2 var(--br-font); color: var(--br-ink); letter-spacing: -0.2px; } .br .share-card__head .amt { font: 400 12.5px/1.2 var(--br-font); color: var(--br-ink-3); margin-top: 3px; } .br .share-card__head .amt a { color: var(--br-accent); font-weight: 500; } .br .share-card__body { display: grid; grid-template-columns: 1fr 260px; gap: 24px; padding: 14px 18px 16px; } .br .share-card__members { list-style: none; margin: 0; padding: 0; border: 1px solid var(--br-line-soft); border-radius: var(--br-r); overflow: hidden; } .br .share-card__members li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--br-line-soft); font-size: 13px; } .br .share-card__members li:first-child { border-top: none; } .br .share-card__members .empty { color: var(--br-danger); font-weight: 500; padding: 14px 12px; text-align: center; background: var(--br-danger-s); } /* Shares index container + prior-season warning (admin/shares/index) */ .br #shares-index .share-card { margin-top: 13px; } .br #prior-season-warning { background: #FF7F50; font-weight: bold; text-align: center; } /* Sidebar button lists — space out stacked buttons inside a .well */ .br .well .buttons li { line-height: 3em; } /* countdown — prominent "closes in N days" pod */ .br .countdown { background: var(--br-accent); color: #fff; border-radius: var(--br-r-lg); padding: 16px 18px; margin-bottom: 16px; } .br .countdown .n { font: 500 28px/1 var(--br-font); letter-spacing: -0.8px; font-variant-numeric: tabular-nums; display: block; } .br .countdown .unit { font: 500 11px/1 var(--br-font); text-transform: uppercase; letter-spacing: 1.4px; opacity: 0.75; margin-top: 4px; display: block; } .br .countdown .lbl { font: 400 12.5px/1.4 var(--br-font); color: rgba(255,255,255,0.8); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.15); } /* priority-chip — clickable pill on the My Bids table that combines the priority number with a Tippy popover trigger (BOT/UP/DOWN/TOP). Merges what used to be a plain number + a separate teal btn-info square into one affordance. */ .br .priority-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--br-ink); border: 1px solid var(--br-ink-4); font: 600 13px/1.2 var(--br-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .br .priority-chip:hover, .br .priority-chip:focus { background: var(--br-accent-s); border-color: var(--br-accent); color: var(--br-accent); outline: none; } .br .priority-chip .priority-num { line-height: 1; } .br .priority-chip .glyphicon { font-size: 9px; color: var(--br-ink-3); transition: color .12s; } .br .priority-chip:hover .glyphicon, .br .priority-chip:focus .glyphicon { color: var(--br-accent); } /* === RESERVATIONS === */ .br .reservations table.calendar { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 14px; background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r-lg); overflow: hidden; table-layout: fixed; } .br .reservations table.calendar th { background: var(--br-surface-2); border: none; border-bottom: 1px solid var(--br-line); padding: 9px 10px; font: 600 10.5px/1 var(--br-font); text-transform: uppercase; letter-spacing: 1.4px; color: var(--br-ink-3); text-align: left; } .br .reservations table.calendar td { border: none; border-right: 1px solid var(--br-line-soft); border-top: 1px solid var(--br-line-soft); vertical-align: top; padding: 8px 8px 10px; height: 84px; background: #fff; position: relative; } .br .reservations table.calendar td:last-child { border-right: none; } .br .reservations table.calendar td.today { background: #f0f7f9; box-shadow: inset 0 2px 0 var(--br-accent); } .br .reservations table.calendar td.outside { background: #fafaf7; } .br .reservations table.calendar td.outside > .daynum { color: #cdc9bd; } .br .reservations table.calendar td.holiday .holiday-label { display: inline-block; font: 600 9px/1 var(--br-font); text-transform: uppercase; letter-spacing: 0.8px; color: var(--br-warn); background: var(--br-warn-s); border: 1px solid var(--br-warn-b); padding: 2px 5px; border-radius: var(--br-r-sm); margin-left: 6px; vertical-align: 1px; } .br .reservations .daynum { display: inline-block; font: 500 13px/1 var(--br-font); color: var(--br-ink-2); letter-spacing: -0.2px; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .br .reservations td.today .daynum { color: var(--br-accent); font-weight: 600; } .br .reservations .month-label { font: 600 10.5px/1 var(--br-font); text-transform: uppercase; letter-spacing: 1.4px; color: var(--br-ink-3); margin: 18px 0 8px; } .br .reservations .month-label:first-child { margin-top: 0; } /* slot rows — Day / Evening */ .br .reservations ul.slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .br .reservations ul.slots li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 7px; padding: 3px 6px; border-radius: var(--br-r-sm); font: 400 12px/1.3 var(--br-font); background: transparent; color: var(--br-ink-2); min-height: 22px; } .br .reservations ul.slots li .de { width: 14px; height: 14px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font: 600 9.5px/1 var(--br-font); color: var(--br-ink-3); background: var(--br-muted); } /* Reset Bootstrap .label defaults (color:#fff, padding, bold, 75% font-size) that would otherwise bleed into slot-row labels. Per-kind rules below still override font-weight/color where intended. */ .br .reservations ul.slots li .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--br-ink); font-size: inherit; font-weight: 500; padding: 0; background: transparent; border-radius: 0; text-align: left; vertical-align: baseline; line-height: inherit; } .br .reservations ul.slots li a.label:hover, .br .reservations ul.slots li a.label:focus { color: var(--br-ink); text-decoration: none; } .br .reservations ul.slots li.empty-slot .label { color: var(--br-ink-4); } .br .reservations ul.slots li.my-reservation { background: var(--br-ok-s); color: var(--br-ink); border: 1px solid var(--br-ok-b); padding: 2px 6px; } .br .reservations ul.slots li.my-reservation .de { background: var(--br-ok); color: #fff; } .br .reservations ul.slots li.my-reservation .label { font-weight: 600; color: var(--br-ink); } /* Row-level destroy/release icon used in slot rows across the app. Subtle at rest (always visible for touch + discoverability), red on hover. `.release-action` is the member-side alias (inherits colour from the surrounding .my-reservation row); `.slot-destroy-action` is the generic admin alias for any reservation row. */ .br .reservations ul.slots li .release-action, .br .reservations ul.slots li .slot-destroy-action { margin-left: auto; padding: 2px 5px; border-radius: 3px; line-height: 1; font-size: 13px; text-decoration: none; transition: background .12s, color .12s; } .br .reservations ul.slots li .release-action { color: var(--br-ok); } .br .reservations ul.slots li .slot-destroy-action { color: var(--br-ink-3); } .br .reservations ul.slots li .release-action:hover, .br .reservations ul.slots li .slot-destroy-action:hover { background: var(--br-danger-s); color: var(--br-danger); text-decoration: none; } .br .reservations ul.slots li.race { background: var(--br-race-s); color: var(--br-ink); border: 1px solid var(--br-race-b); padding: 2px 6px; } .br .reservations ul.slots li.race .de { background: var(--br-race); color: #fff; } .br .reservations ul.slots li.race .label { color: var(--br-ink); font-weight: 500; } .br .reservations ul.slots li.maintenance { background: var(--br-danger-s); color: var(--br-ink); border: 1px solid var(--br-danger-b); padding: 2px 6px; } .br .reservations ul.slots li.maintenance .de { background: var(--br-danger); color: #fff; } .br .reservations ul.slots li.maintenance .label { color: var(--br-ink); font-weight: 500; } .br .reservations ul.slots li.instant-bid-requested { background: var(--br-warn-s); color: var(--br-ink); border: 1px solid var(--br-warn-b); padding: 2px 6px; } .br .reservations ul.slots li.instant-bid-requested .de { background: var(--br-warn); color: #fff; } .br .reservations ul.slots li.instant-bid-requested .label { color: var(--br-ink); font-weight: 500; } .br .reservations ul.slots li.other-taken { background: #ece9de; color: var(--br-ink-3); border: 1px solid #d6d0bc; padding: 2px 6px; } .br .reservations ul.slots li.other-taken .de { background: #c4bda6; color: #5f5847; } /* Inline action chip — reusable for Request / Reserve / Release */ .br .slot-action { font: 500 10.5px/1 var(--br-font); padding: 3px 7px; border-radius: 3px; border: 1px solid var(--br-accent); background: var(--br-accent); color: #fff; text-decoration: none; letter-spacing: -0.1px; white-space: nowrap; box-shadow: 0 1px 0 rgba(0,0,0,0.08); } .br .slot-action:hover { background: var(--br-accent-2); border-color: var(--br-accent-2); color: #fff; text-decoration: none; } .br .slot-action.ghost { background: transparent; border-color: transparent; color: var(--br-ink-3); opacity: 0; } .br .reservations ul.slots li:hover .slot-action.ghost { opacity: 1; } /* Bid action — Day Bid / Eve Bid affordance for member bidding view. Replaces the loud twin btn-info btn-xs with a single-line affordance. */ .br .reservations ul.slots li.bid-row { padding: 2px 4px; background: #fcfbf6; border: 1px dashed transparent; } .br .reservations ul.slots li.bid-row:hover { border-color: var(--br-accent-b); background: var(--br-accent-s); } .br .reservations ul.slots li.bid-row .label { color: var(--br-ink-3); font-size: 11.5px; } .br .reservations ul.slots li.bid-row .slot-action { padding: 2px 6px; font-size: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Placed bid — a calm neutral row with dark text, distinct from the strong teal/bronze empty-slot Bid buttons. The point count reads as a committed display value, not a second button. Multi-slot bids use a soft purple tint to stand apart at a glance. */ .br .reservations ul.slots li.bid-placed { background: #efede4; border: 1px solid #d9d5c3; padding: 2px 6px; color: var(--br-ink); } .br .reservations ul.slots li.bid-placed .de { background: #d9d5c3; color: var(--br-ink-2); } .br .reservations ul.slots li.bid-placed .label { color: var(--br-ink); font-weight: 500; } .br .reservations ul.slots li.bid-placed .slot-action { background: transparent; border-color: transparent; color: var(--br-ink); font-weight: 600; box-shadow: none; padding: 2px 4px; } .br .reservations ul.slots li.bid-placed .slot-action:hover { background: rgba(0,0,0,0.05); border-color: transparent; color: var(--br-ink); text-decoration: none; } .br .reservations ul.slots li.bid-placed-multi { background: var(--br-race-s); border-color: var(--br-race-b); } /* Grouped bid indicator — green left stripe shared by SimpleBid and MultiSlotBid rows whose bid_group_id is set. Overrides any earlier box-shadow on .bid-placed so it reads as "this bid is part of a priority group" at a glance. */ .br .reservations ul.slots li.bid-grouped { box-shadow: inset 3px 0 0 var(--br-ok, #2e7d32); } .br .reservations ul.slots li.bid-placed-multi .de { background: var(--br-race); color: #fff; } /* Two-line compact pill for multi-slot bids: line 1 = arrow + end-slot label, line 2 = points. Drops the old D+N danger chip, which was visually loud and wider than the calendar cell. Collapses the empty label column so the stack gets the full remaining cell width. */ .br .reservations ul.slots li.bid-placed-multi { grid-template-columns: 14px auto; } .br .reservations ul.slots li.bid-placed-multi .label { display: none; } .br .reservations ul.slots li.bid-placed-multi .slot-action--stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.1; padding: 2px 4px; text-align: left; min-width: 0; flex: 1; } .br .reservations ul.slots li.bid-placed-multi .slot-action--stack .stack-line { font-size: 9.5px; white-space: nowrap; letter-spacing: -0.2px; } .br .reservations ul.slots li.bid-placed-multi .slot-action--stack .stack-line--pts { font-weight: 700; } /* Minimum-bid tier indicator — subtle left stripe on bid-eligible rows. 100-point (standard) slots get no stripe; 150-point (premium: weekends, holidays) slots get a warm amber stripe so premium pricing is visible at a glance without fighting the existing row colors. */ .br .reservations ul.slots li.tier-premium.bid-row:hover { background: var(--br-warn-s); border-color: var(--br-warn-b); } /* Premium Bid button — amber/bronze to signal higher minimum (150). Keeps the same chip geometry as the standard teal .slot-action for a consistent feel; the hue does the talking. Scoped to empty bid-row slots so the button inside a filled .bid-placed row keeps its white-on-filled style. */ .br .reservations ul.slots li.tier-premium.bid-row .slot-action { background: var(--br-warn); border-color: var(--br-warn); } .br .reservations ul.slots li.tier-premium.bid-row .slot-action:hover { background: #7e560a; border-color: #7e560a; } /* Legend swatches for the min-bid tiers — miniature chips that mirror the Bid button styling so the legend reads as "this button = this tier". */ .br .cal-legend .sw-tier-standard { background: var(--br-accent); border: 1px solid var(--br-accent); } .br .cal-legend .sw-tier-premium { background: var(--br-warn); border: 1px solid var(--br-warn); } /* Placed-bid swatches mirror the quiet row style on the calendar. */ .br .cal-legend .sw-bid-placed { background: #efede4; border: 1px solid #d9d5c3; } .br .cal-legend .sw-bid-placed-multi { background: var(--br-race-s); border: 1px solid var(--br-race-b); } .br .cal-legend .sw-bid-grouped { background: #efede4; border: 1px solid #d9d5c3; box-shadow: inset 3px 0 0 var(--br-ok); } .br .cal-legend .sw-advance-slot { background: var(--br-warn-s); border: 1px solid var(--br-warn-b); box-shadow: inset 3px 0 0 #d93b3b; } /* Advance-period slot row — reinforces the amber day-number badge with a matching soft wash across the whole row. The left stripe uses red (not the warn amber already used by premium-tier Bid buttons) so the advance affordance is unambiguous. */ .br .reservations ul.slots li.advance-slot { background: color-mix(in srgb, var(--br-warn-s) 55%, transparent); box-shadow: inset 3px 0 0 #d93b3b; } .br .reservations ul.slots li.advance-slot.bid-grouped { box-shadow: inset 3px 0 0 #d93b3b, inset 6px 0 0 var(--br-ok); } /* Legend — reused under any calendar */ .br .cal-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 2px 0; font-size: 13px; color: var(--br-ink-3); } .br .cal-legend > span { display: inline-flex; align-items: center; gap: 6px; } .br .cal-legend .sw { width: 12px; height: 12px; border-radius: 3px; } /* First-month header: legend rides beside the month name instead of taking its own row. */ .br .reservations .cal-month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .br .reservations .cal-month-head h3 { margin: 18px 0 8px; } .br .reservations .cal-month-head .cal-legend { padding: 0; margin: 0; flex-shrink: 0; } /* Calendar residuals (absorbed from legacy calendar.css). `td.notmonth` cells are produced by the `calendar` helper for out-of-month pad days; they must collapse invisibly. `span.advance` marks advance-period day numbers in rounds/show to visually flag "beyond this period". */ .br .reservations table.calendar td.notmonth { visibility: hidden; } .br .reservations table.calendar span.advance { background: var(--br-warn-s); color: var(--br-warn); border-radius: var(--br-r-sm); padding: 0 3px; } /* Trash glyph used by admin/member delete-reservation links inside slot rows. */ .br .reservations ul.slots li .glyphicon-trash { top: 0; } /* Member-bidding — bid-move links spacing (absorbed from legacy bids.css). */ .br #rounds-show .bid-move-links a { margin-left: 25px; } /* My Bids — card layout. Each bid is a small card with a compact top control strip (priority + reorder on leading edge, delete on trailing edge) and full-width info text below. Replaces the previous table layout where the controls column squeezed the bid text into a narrow 3-line wrap. */ .br .bid-list { display: flex; flex-direction: column; gap: 6px; } .br .bid-card { background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .br .bid-card:nth-child(even) { background: var(--br-surface-2); } .br .bid-card--advance { border-color: var(--br-warn-b); background: var(--br-warn-s); } .br .bid-card__controls { display: flex; align-items: center; gap: 6px; } .br .bid-card__info { font: 500 13.5px/1.35 var(--br-font); color: var(--br-ink); min-width: 0; } .br .bid-card__info a { color: var(--br-accent); } .br .bid-card__info a:hover { text-decoration: underline; } .br .bid-card__group-list { margin: 4px 0 0; padding-left: 14px; } .br .bid-card__group-list li { font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; gap: 6px; } .br .bid-card__group-delete { color: var(--br-ink-3); padding: 2px 4px; } .br .bid-card__group-delete:hover { color: var(--br-danger); } .br .priority-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--br-muted); color: var(--br-ink); font: 600 11.5px/1 var(--br-font); border: 1px solid transparent; flex-shrink: 0; } /* Reorder trigger — chevron-up-down button. Styled as a real button at rest (light fill + visible border + subtle shadow) so the affordance reads immediately, not just on hover. Tints to accent on hover/open. */ .br .bid-reorder-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 1px solid var(--br-line); border-radius: 6px; background: #fff; color: var(--br-ink-2); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); cursor: pointer; flex-shrink: 0; transition: background-color .1s ease, border-color .1s ease, color .1s ease, box-shadow .1s ease, transform .1s ease; } .br .bid-reorder-btn .bid-reorder-icon { width: 18px; height: 18px; display: block; } .br .bid-reorder-btn:hover, .br .bid-reorder-btn:focus { background: var(--br-accent-s); color: var(--br-accent); border-color: var(--br-accent-b); outline: none; box-shadow: 0 1px 2px rgba(23, 90, 116, 0.15); } .br .bid-reorder-btn:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); } .br .bid-reorder-btn[aria-expanded="true"] { background: var(--br-accent); color: #fff; border-color: var(--br-accent-2); box-shadow: 0 1px 2px rgba(23, 90, 116, 0.35); } /* Delete button — matching ghost-button treatment, goes red on hover. */ .br .bid-delete-btn { margin-left: auto; width: 28px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--br-line); border-radius: 6px; background: #fff; color: var(--br-ink-2); text-decoration: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); transition: background-color .1s ease, color .1s ease, border-color .1s ease, box-shadow .1s ease, transform .1s ease; } .br .bid-delete-btn:hover, .br .bid-delete-btn:focus { background: var(--br-danger-s); color: var(--br-danger); border-color: var(--br-danger-b); outline: none; text-decoration: none; box-shadow: 0 1px 2px rgba(156, 42, 42, 0.18); } .br .bid-delete-btn:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); } /* Popover body — stacked labeled action buttons. Each action gets a visible border + fill at rest so they read as real buttons, not text links. Hover tints to accent and strengthens the shadow. */ .br .bid-move-menu { display: flex; flex-direction: column; gap: 6px; min-width: 180px; } .br .bid-move-menu .bid-move-action { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--br-r); color: var(--br-ink); font: 500 13px/1.2 var(--br-font); text-decoration: none; background: #fff; border: 1px solid var(--br-line); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); transition: background-color .1s ease, border-color .1s ease, color .1s ease, box-shadow .1s ease, transform .05s ease; } .br .bid-move-menu .bid-move-action:hover, .br .bid-move-menu .bid-move-action:focus { background: var(--br-accent-s); color: var(--br-accent); border-color: var(--br-accent-b); outline: none; text-decoration: none; box-shadow: 0 1px 3px rgba(23, 90, 116, 0.18); } .br .bid-move-menu .bid-move-action:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .br .bid-move-menu .bid-move-svg { width: 18px; height: 18px; display: block; color: var(--br-ink-2); flex-shrink: 0; } .br .bid-move-menu .bid-move-action:hover .bid-move-svg, .br .bid-move-menu .bid-move-action:focus .bid-move-svg { color: var(--br-accent); } /* Priority picker — one-click jump to any target priority. Chip grid wraps into rows and caps at ~3 rows' worth of height; taller lists get an internal scroll. Current priority is rendered as a dimmed, non-clickable chip so users have context without a misleading button. */ .br .bid-priority-picker { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--br-line); } .br .bid-priority-picker__label { font: 600 11px/1 var(--br-font); text-transform: uppercase; letter-spacing: 0.6px; color: var(--br-ink-3); } .br .bid-priority-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; } .br .bid-priority-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--br-line); border-radius: 6px; background: #fff; color: var(--br-ink); font: 600 13px/1 var(--br-font); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); transition: background-color .1s ease, border-color .1s ease, color .1s ease, box-shadow .1s ease, transform .05s ease; } a.bid-priority-chip:hover, a.bid-priority-chip:focus { background: var(--br-accent); color: #fff; border-color: var(--br-accent-2); outline: none; text-decoration: none; box-shadow: 0 1px 3px rgba(23, 90, 116, 0.3); } a.bid-priority-chip:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .br .bid-priority-chip.is-current { background: var(--br-muted); color: var(--br-ink-3); border-color: var(--br-line); cursor: default; box-shadow: none; } /* "Just moved" row highlight. Applied via .bid-just-moved on the when the controller redirects with ?highlighted_bid=. Briefly accents the row on page load so the eye lands on the moved bid. */ .br .bid-card.bid-just-moved { animation: bidJustMovedCard 2.8s cubic-bezier(0.22, 1, 0.36, 1) 1; position: relative; z-index: 1; } .br tr.bid-just-moved > td { animation: bidJustMovedRow 2.8s cubic-bezier(0.22, 1, 0.36, 1) 1; } /* Card animation — double scale bounce + expanding colored glow ring + strong left stripe, then hold the teal wash for a beat before fading. Tuned to read as "hey, look here!" without being cartoonish. */ @keyframes bidJustMovedCard { 0% { background-color: var(--br-accent); color: #fff; transform: scale(1.06); box-shadow: inset 4px 0 0 var(--br-accent-2), 0 0 0 4px var(--br-accent-s), 0 0 24px 4px rgba(23, 90, 116, 0.55); } 12% { background-color: var(--br-accent-s); color: var(--br-ink); transform: scale(1.02); box-shadow: inset 4px 0 0 var(--br-accent), 0 0 0 2px var(--br-accent-b), 0 0 16px 2px rgba(23, 90, 116, 0.35); } 28% { background-color: var(--br-accent-s); transform: scale(1.04); box-shadow: inset 4px 0 0 var(--br-accent), 0 0 0 3px var(--br-accent-b), 0 0 22px 3px rgba(23, 90, 116, 0.35); } 45% { background-color: var(--br-accent-s); transform: scale(1.015); box-shadow: inset 4px 0 0 var(--br-accent), 0 0 0 1px var(--br-accent-b), 0 0 10px 1px rgba(23, 90, 116, 0.18); } 75% { background-color: var(--br-accent-s); transform: scale(1); box-shadow: inset 4px 0 0 var(--br-accent), 0 0 0 0 transparent, 0 0 0 0 transparent; } 100% { background-color: transparent; transform: scale(1); box-shadow: inset 4px 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent; } } @keyframes bidJustMovedRow { 0% { background-color: var(--br-accent-s); box-shadow: inset 4px 0 0 var(--br-accent); } 75% { background-color: var(--br-accent-s); box-shadow: inset 4px 0 0 var(--br-accent); } 100% { background-color: transparent; box-shadow: inset 4px 0 0 transparent; } } /* Invert child colors briefly while the card is filled at the start of the animation so "500 pts" and the priority chip stay legible against the saturated accent bg. */ .br .bid-card.bid-just-moved .bid-card__info, .br .bid-card.bid-just-moved .bid-card__info a, .br .bid-card.bid-just-moved .priority-num { animation: bidJustMovedCardText 2.8s cubic-bezier(0.22, 1, 0.36, 1) 1; } @keyframes bidJustMovedCardText { 0% { color: #fff; } 12% { color: var(--br-ink); } 100% { color: inherit; } } /* Multi-slot bid form — row-level range highlight. Each selectable slot

is `.slot-item`; the starting slot also carries `.slot-start`. JS paints `.range-start`, `.in-range`, `.range-end` from start through the hovered or committed end slot, so the user sees the whole committed span at once. Scoped to #multislot_bids so this doesn't bleed into the main rounds/show calendar. */ /* Multi-slot bid: the "Pick the end slot" instruction rides next to the first month header (same .cal-month-head pattern the legend uses) and is styled as a bright amber call-to-action pill so it's the first thing the eye catches after landing on the page. A gentle pulse draws the user to the calendar without being annoying. */ .br #multislot_bids .cal-month-head { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; } .br #multislot_bids .cal-month-head h3 { margin: 18px 0 8px; flex-shrink: 0; } .br #multislot_bids .cal-month-head .cal-instruction-group { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .br #multislot_bids .cal-instruction { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--br-warn-s); color: var(--br-warn); border: 1px solid var(--br-warn-b); font: 600 12px/1 var(--br-font); letter-spacing: 0.2px; animation: pickEndSlotPulse 1.8s ease-in-out infinite; } .br #multislot_bids .cal-instruction .glyphicon { font-size: 11px; top: 1px; } @keyframes pickEndSlotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(154, 107, 14, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(154, 107, 14, 0); } } /* Multi-slot bid calendar uses the same `table.calendar` markup as the main rounds/show grid but isn't wrapped in `.reservations`, so it wasn't picking up the fixed-layout width constraint. Without this, the table grew to its natural content width (~1090px) and slid under the right sidebar. Apply the same fixed layout + wrap button text so cells stay within their column. */ .br #multislot_bids table.calendar { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r-lg); overflow: hidden; margin-bottom: 14px; } .br #multislot_bids table.calendar th, .br #multislot_bids table.calendar td { vertical-align: top; word-break: break-word; } .br #multislot_bids .slot-item .btn { white-space: normal; line-height: 1.15; } .br #multislot_bids .slot-item { padding: 2px 4px; border-radius: 4px; transition: background-color .1s ease, box-shadow .1s ease; } .br #multislot_bids .slot-item.in-range, .br #multislot_bids .slot-item.range-start, .br #multislot_bids .slot-item.range-end { background: var(--br-accent-s); } .br #multislot_bids .slot-item.range-start, .br #multislot_bids .slot-item.range-end { background: #bcd8e6; box-shadow: inset 0 0 0 1px var(--br-accent-b); } /* Slot whose inclusion would push the cumulative min-bid above the share's season_points_remaining — server would reject. Rendered as a disabled pill with muted text. Hover title says what the budget is. */ .br #multislot_bids .slot-item.over-budget { opacity: 0.55; } .br #multislot_bids .slot-item.over-budget .btn.disabled { cursor: not-allowed; background: var(--br-muted); color: var(--br-ink-3); border-color: var(--br-line); box-shadow: none; } /* Admin create-reservation popover (absorbed from legacy boats.css). Emitted by admin_boats_helper#create_reservation_popover as a wide, no-wrap span so the popover content lays out horizontally. */ /* Create-reservation popover: each reservation type gets a labelled button plus a one-line description so admins don't have to guess what Member/Race/BR Share/Maint mean. */ .br .create-reservation-links { width: 340px; } .br .create-reservation-links__title { margin: 0 0 8px; font: 600 11px/1.3 var(--br-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--br-ink-3); } .br .create-reservation-links__list { list-style: none; margin: 0; padding: 0; } .br .create-reservation-links__row { display: grid; grid-template-columns: 92px 1fr; align-items: center; column-gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--br-line); } .br .create-reservation-links__row:last-child { border-bottom: none; } .br .create-reservation-links__btn { width: 100%; text-align: center; } .br .create-reservation-links__desc { font-size: 12.5px; line-height: 1.35; color: var(--br-ink-2); } /* Boat calendar page chrome (absorbed from legacy boats.css). Used by admin/boats/index and admin/boats/show nav row. */ .br .boat-calendar-nav { margin-bottom: 15px; } /* Multi-slot bid form calendar (absorbed from legacy multislot_bids.css). The #multislot_bids wrapper hosts a Rails `calendar` helper whose month-pad and out-of-range cells must hide; its slot list needs roomier line-height than the default calendar. */ .br #multislot_bids .calendar .beforedate, .br #multislot_bids .calendar .afterenddate, .br #multislot_bids .calendar .afterenddate a, .br #multislot_bids .calendar .beforedate a { color: #ccc; } .br #multislot_bids table.calendar td.notmonth, .br #multislot_bids table.calendar td.beforedate, .br #multislot_bids table.calendar td.afterenddate { visibility: hidden; } .br #multislot_bids table.calendar li { line-height: 30px; } .br #multislot_bids table.calendar li span { font-size: 15px; } /* === BIDGRID === */ /* Horizontal scroll lives on .sticky-wrap (injected by jquery-stickyheader). Native position:sticky can't solve vertical header pinning here: any ancestor with overflow other than visible becomes the sticky containing block, so horizontal scroll and page-scroll-anchored sticky headers conflict. The plugin clones the thead + first col and positions the clones via JS against the viewport. */ .br #bidgrid { position: relative; } .br .sticky-wrap { overflow-x: auto; overflow-y: hidden; position: relative; width: 100%; } .br .sticky-wrap .sticky-thead, .br .sticky-wrap .sticky-col, .br .sticky-wrap .sticky-intersect { opacity: 0; position: absolute; top: 0; left: 0; transition: all .125s ease-in-out; z-index: 50; width: auto; } .br .sticky-wrap .sticky-thead { box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125); z-index: 100; width: 100%; } .br .sticky-wrap .sticky-intersect { opacity: 1; z-index: 150; } .br .sticky-wrap td, .br .sticky-wrap th { box-sizing: border-box; } .br .bidgrid, .br .sticky-wrap .sticky-thead, .br .sticky-wrap .sticky-col, .br .sticky-wrap .sticky-intersect { background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r-lg); overflow: visible; border-collapse: separate; border-spacing: 0; font-size: 12px; } .br .bidgrid { min-width: 100%; } /* Unified cell box model. `.br #bidgrid-table` wins over legacy application.css `#bidgrid-table` rules (padding: 6px, border: 1px all sides) — without this override, the real table and the sticky clones end up with different padding/border, the jquery-stickyheader width- copy step leaves clones a few px narrower per column, and the drift accumulates into visible header-vs-body misalignment by column 8. */ .br #bidgrid-table th, .br #bidgrid-table td, .br .sticky-wrap .sticky-thead th, .br .sticky-wrap .sticky-col th, .br .sticky-wrap .sticky-col td, .br .sticky-wrap .sticky-intersect th { padding: 6px 8px; border-top: 0; border-left: 0; border-bottom: 1px solid var(--br-line-soft); border-right: 1px solid var(--br-line-soft); vertical-align: top; background: #fff; box-sizing: border-box; } .br #bidgrid-table thead th, .br .sticky-wrap .sticky-thead thead th, .br .sticky-wrap .sticky-intersect thead th { background: var(--br-surface-2); font: 600 10.5px/1.2 var(--br-font); text-transform: uppercase; letter-spacing: 1px; color: var(--br-ink-3); text-align: left; border-bottom: 1px solid var(--br-line); box-shadow: 0 1px 0 var(--br-line), 0 2px 6px rgba(0,0,0,0.04); padding: 10px 8px; } /* Reserved row: no full-row green tint. The row-wide --br-ok-s would merge with the winning-bid

bg (also --br-ok-s) and make the win cell read more saturated than it should. The winning-bid pill itself and the reservation-owner cell are enough signal that the slot is resolved — row striping still separates rows. */ .br .bidgrid tbody tr.no-eligible-bids td { background: var(--br-muted); } .br .bidgrid th.slot-cell, .br .sticky-wrap .sticky-col tbody th, .br .sticky-wrap .sticky-intersect thead th, .br .bidgrid td.slot-cell { font: 500 11.5px/1.3 var(--br-font); color: var(--br-ink); white-space: nowrap; min-width: 80px; background: var(--br-surface-2); border-right: 1px solid var(--br-line); } .br .bidgrid .slot-cell .slot-meta { display: flex; gap: 4px; margin-top: 4px; } .br .bidgrid .slot-cell .slot-weekday { font-weight: 400; color: var(--br-ink-3); margin-right: 4px; } .br .bidgrid td.res-cell { min-width: 110px; font-size: 11.5px; color: var(--br-ink-2); } /* Bid list inside a cell */ .br .bidgrid ul.bids { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .br .bidgrid ul.bids li { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 3px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--br-ink-2); } /* #bidgrid-table scope beats application.css `#bidgrid-table li.winning-bid` (background: #75FF8F; lime green legacy). The ID gives both rules the same ID count, but ours has an extra class (.br) to win. */ .br #bidgrid-table li.winning-bid { background: var(--br-ok-s); color: var(--br-ok); font-weight: 600; border: 1px solid var(--br-ok-b); } /* Inner action pill on a won bid — Bootstrap's .bg-success default renders a greenish fill that clashes with --br-ok-s; re-skin it with design tokens so the two green layers relate. White inner pill with an --br-ok-b border stands out cleanly against the pale outer tint. */ .br #bidgrid-table li.winning-bid > .bg-success { background: #fff; color: var(--br-ok); border: 1px solid var(--br-ok-b); border-radius: 3px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; } .br #bidgrid-table li.winning-bid > .bg-success a, .br #bidgrid-table li.winning-bid > .bg-success .glyphicon { color: var(--br-ok); } /* Grouped-bid stripe — matches the member bidding page convention (shared/_min_bid_legend, .reservations li.bid-grouped): a 3px inset green bar on the left edge. Works on simple and multi-slot bids alike since it's a box-shadow on the

, not a chip. */ .br #bidgrid-table li.grouped-bid { box-shadow: inset 3px 0 0 var(--br-ok); } /* Lost — canonical signal: faded row + strikethrough. Covers every losing state on a bid: .marked-lost → resolution_code 6 (admin-rejected) .misc-invalid → codes 2–5 (group-max, overlapping winner, insufficient points, etc.) .below-min → unresolved bid whose points are below the slot floor — a preview of the INSUFFICIENT_POINTS outcome once the round is resolved. Grouped here so the UI has one visual vocabulary for "this bid won't win". */ /* Override legacy #bidgrid-table li.marked-lost / li.misc-invalid which set bright yellow/orange backgrounds in application.css. We want a single canonical Lost treatment. */ .br #bidgrid-table li.marked-lost, .br #bidgrid-table li.misc-invalid, .br #bidgrid-table li.below-min { background: transparent; opacity: 0.45; text-decoration: line-through; } .br .bidgrid ul.bids li .priority { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; font: 600 9.5px/1 var(--br-font); background: var(--br-muted); color: var(--br-ink-2); } .br .bidgrid ul.bids li .priority.p1 { background: var(--br-accent); color: #fff; } .br .bidgrid ul.bids li .priority.p2 { background: var(--br-accent-s); color: var(--br-accent); border: 1px solid var(--br-accent-b); } .br .bidgrid ul.bids li a.bid { color: var(--br-ink-3); padding: 1px 3px; border-radius: 3px; } .br .bidgrid ul.bids li a.bid:hover { background: var(--br-ink); color: #fff; } .br .bidgrid ul.bids li a.bid .glyphicon-thumbs-up { color: var(--br-ok); } .br .bidgrid ul.bids li a.bid .glyphicon-thumbs-down { color: var(--br-danger); } .br .bidgrid ul.bids li a.bid:hover .glyphicon { color: inherit; } .br .bidgrid ul.bids li .pts { font-weight: 500; font-variant-numeric: tabular-nums; } /* priority/bid-count badges in slot-cell */ .br .bidgrid .slot-p { display: inline-flex; align-items: center; gap: 2px; font: 600 9.5px/1 var(--br-font); padding: 3px 6px; border-radius: 3px; background: var(--br-accent-s); color: var(--br-accent); letter-spacing: -0.1px; } .br .bidgrid .slot-n { display: inline-flex; align-items: center; gap: 2px; font: 500 9.5px/1 var(--br-font); padding: 3px 6px; border-radius: 3px; background: var(--br-muted); color: var(--br-ink-2); letter-spacing: -0.1px; } /* Share column header */ .br .bidgrid th.share-col .name { font: 600 11.5px/1.2 var(--br-font); color: var(--br-ink); letter-spacing: -0.1px; text-transform: none; } .br .bidgrid th.share-col .summary { font: 400 10px/1.2 var(--br-font); color: var(--br-ink-3); text-transform: none; margin-top: 3px; letter-spacing: 0; font-variant-numeric: tabular-nums; } .br .bidgrid th.share-col.no-winnable { opacity: 0.6; } /* Legacy share-header block (emitted by round_resolution_helper) */ .br .bidgrid .share-header .share-name { font-weight: 600; font-size: 13px; color: var(--br-ink); letter-spacing: -0.1px; } .br .bidgrid .share-header .share-points { font-weight: 600; font-size: 12px; color: var(--br-accent); font-variant-numeric: tabular-nums; } .br .bidgrid .share-header .tally { font-size: 11px; color: var(--br-ink-3); font-variant-numeric: tabular-nums; } .br .bidgrid .share-header .glyphicon { font-size: 14px; color: var(--br-ink-3); } .br .bidgrid th.no-open-bids-above-minimum .share-header .share-points { color: var(--br-danger); } .br .bidgrid .no-open-bids-above-minimum { background: var(--br-muted); } /* Bid state: additional hover states ported from legacy bidgrid.css. (.misc-invalid visual consolidated above with .marked-lost — single "Lost" treatment: faded row + strikethrough.) */ /* Hover signals are orthogonal: grouped-bid-hover -> green outline (peer siblings in the group) multi-slot-bid-hover -> accent tint (same bid across its slots) grouped-bid (class) -> left green rail (always-on grouping marker) The green grouping rail lives on box-shadow inset; span hover uses background only, so it composes cleanly on grouped multi-slot bids. */ .br #bidgrid-table li.grouped-bid-hover { outline: 1.5px solid var(--br-ok); outline-offset: 1px; box-shadow: 0 0 0 1px var(--br-ok-s); } .br #bidgrid-table li.grouped-bid.grouped-bid-hover { box-shadow: inset 3px 0 0 var(--br-ok), 0 0 0 1px var(--br-ok-s); } /* Multi-slot hover uses an outline ring (same pattern as grouped-bid-hover) so the start + continuation cells are linked visually without destroying underlying state (won/lost/grouped) color. Accent hue keeps it distinct from the grouped-bid hover which uses --br-ok. */ .br #bidgrid-table li.multi-slot-bid-hover { outline: 1.5px solid var(--br-accent); outline-offset: 1px; box-shadow: 0 0 0 1px var(--br-accent-s); } /* Continuation cells for multi-slot bids: a ghost reference, not a control surface. Actions (thumbs/edit/undo) only render on the start cell. Pairing hover still highlights across the full span. */ .br .bidgrid ul.bids li.bid-continuation { padding: 1px 4px; gap: 2px; } .br .bid-continuation-mark { font-size: 10px; color: var(--br-ink-3); line-height: 1; } /* Bidgrid legend — collapsible

card that sits on its own row between the section-head and the grid. Default open; persists state via localStorage (see bidgrid.js). When closed, only the summary row is visible — a thin "▸ LEGEND · click to collapse…" strip. */ .br .bidgrid-legend { background: #fff; border: 1px solid var(--br-line); border-radius: var(--br-r); margin: 10px 0 14px; font-size: 12px; overflow: hidden; } .br .bidgrid-legend > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; user-select: none; padding: 10px 14px; background: var(--br-accent-s); border-bottom: 1px solid transparent; transition: background 120ms ease; } .br .bidgrid-legend[open] > summary { border-bottom-color: var(--br-accent-b); } .br .bidgrid-legend > summary:hover { background: var(--br-accent-b); } .br .bidgrid-legend > summary:focus-visible { outline: 2px solid var(--br-accent); outline-offset: -2px; } .br .bidgrid-legend > summary::-webkit-details-marker { display: none; } .br .bidgrid-legend > summary::before { content: "▶"; font-size: 11px; color: var(--br-accent); width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--br-accent); border-radius: 50%; transition: transform 160ms ease; padding-left: 2px; } .br .bidgrid-legend[open] > summary::before { transform: rotate(90deg); } .br .bidgrid-legend-title { font: 700 13px/1 var(--br-font); text-transform: uppercase; letter-spacing: 1.2px; color: var(--br-accent); } .br .bidgrid-legend-hint { color: var(--br-ink-3); font-size: 11.5px; } .br .bidgrid-legend > summary::after { content: "Show"; font: 600 11px/1 var(--br-font); text-transform: uppercase; letter-spacing: 0.8px; color: var(--br-accent); padding: 5px 12px; background: #fff; border: 1px solid var(--br-accent-b); border-radius: 999px; margin-left: auto; flex: 0 0 auto; } .br .bidgrid-legend[open] > summary::after { content: "Hide"; } .br .bidgrid-legend-items { list-style: none; margin: 0; padding: 12px 14px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 12px 24px; } @media (max-width: 780px) { .br .bidgrid-legend-items { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } } .br .bidgrid-legend-items li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .br .bidgrid-legend-items .legend-sample { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--br-ink-2); background: #fff; border: 1px solid var(--br-line-soft); } .br .bidgrid-legend-items .legend-sample-pts { font-weight: 500; } .br .bidgrid-legend-items .legend-label { font-weight: 600; color: var(--br-ink); } .br .bidgrid-legend-items .legend-detail { color: var(--br-ink-3); font-size: 11px; line-height: 1.3; } .br .bidgrid-legend-items .glyphicon-thumbs-up { color: var(--br-ok); } .br .bidgrid-legend-items .glyphicon-thumbs-down { color: var(--br-danger); } .br .bidgrid-legend-items .legend-sample--grouped { box-shadow: inset 3px 0 0 var(--br-ok); } /* Mirror the live winning-bid

: pale --br-ok-s fill on the outer sample so the priority chip (which also uses --br-ok-s) visually merges with the background, leaving just its border — exactly how a won bid renders in the grid. */ .br .bidgrid-legend-items .legend-sample--won { background: var(--br-ok-s); color: var(--br-ok); border-color: var(--br-ok-b); } .br .bidgrid-legend-items .legend-sample-won-group { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; background: #fff; color: var(--br-ok); border: 1px solid var(--br-ok-b); border-radius: 3px; } .br .bidgrid-legend-items .legend-sample-won-group .glyphicon { color: var(--br-ok); } .br .bidgrid-legend-items .legend-sample--lost { opacity: 0.45; text-decoration: line-through; } /* On hover, the ghost pill re-inflates so the user can see the full span it belongs to — chip fill returns, opacity lifts. The matching start cell also picks up the multi-slot-bid-hover tint, so the eye connects them. */ .br #bidgrid-table li.bid-continuation.multi-slot-bid-hover .chip--ghost { opacity: 1; border-style: solid; } .br #bidgrid-table li.bid-continuation.multi-slot-bid-hover .chip--ghost.chip--ok { background: var(--br-ok-s); } .br #bidgrid-table li.bid-continuation.multi-slot-bid-hover .chip--ghost.chip--accent { background: var(--br-accent-s); } /* `.invalid-bid` is a legacy span emitted inside .misc-invalid cells. Keeps strikethrough on the points number even if the outer

treatment is ever overridden by a higher-specificity rule. */ .br .bidgrid .invalid-bid { text-decoration: line-through; } /* === TIPPY === */ /* Tippy.js popovers (replaces BS3 .popover()). Theme name 'broadreach' set in tippy_init.js. Tippy injects the box as a child of , so --br-* custom properties cascade in via inheritance — no .br prefix needed on these selectors. */ .tippy-box[data-theme~='broadreach'] { background: #fff; color: var(--br-ink); border: 1px solid var(--br-ink-4); border-radius: var(--br-r); box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 10px 28px rgba(0,0,0,0.10); font: 400 13.5px/1.45 var(--br-font); } .tippy-box[data-theme~='broadreach'] > .tippy-content { padding: 10px 12px; } .tippy-box[data-theme~='broadreach'] > .tippy-arrow { color: #fff; /* drop-shadow follows the actual triangle outline (unlike box-shadow which follows the bounding rect), giving the arrow a 1px border that matches the box border in all four placement directions. */ filter: drop-shadow(0 0 0.5px var(--br-ink-4)) drop-shadow(0 0 0.5px var(--br-ink-4)); } .tippy-box[data-theme~='broadreach'][data-placement^='top'] > .tippy-arrow::before { border-top-color: #fff; } .tippy-box[data-theme~='broadreach'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #fff; } .tippy-box[data-theme~='broadreach'][data-placement^='left'] > .tippy-arrow::before { border-left-color: #fff; } .tippy-box[data-theme~='broadreach'][data-placement^='right'] > .tippy-arrow::before { border-right-color: #fff; } /* Markdown content inside popovers (Kramdown output from help.en.yml). */ .tippy-box[data-theme~='broadreach'] .tippy-content p { margin: 0 0 6px; } .tippy-box[data-theme~='broadreach'] .tippy-content p:last-child { margin-bottom: 0; } .tippy-box[data-theme~='broadreach'] .tippy-content strong { color: var(--br-ink); font-weight: 600; } .tippy-box[data-theme~='broadreach'] .tippy-content ul { margin: 6px 0; padding-left: 20px; } .tippy-box[data-theme~='broadreach'] .tippy-content li { margin: 2px 0; } .tippy-box[data-theme~='broadreach'] .tippy-content code { background: var(--br-muted); color: var(--br-ink); padding: 1px 5px; border-radius: 3px; font: 12px/1.3 var(--br-mono); } .tippy-box[data-theme~='broadreach'] .tippy-content a:not(.btn) { color: var(--br-accent); } .tippy-box[data-theme~='broadreach'] .tippy-content a:not(.btn):hover { color: var(--br-accent-2); } /* Prominent secondary CTA under the simple-bid form title offering to switch to a multi-slot bid. Info-coloured to stay distinct from the primary Save Bid button while still giving the multi-slot path high discoverability. */ .br .simple-bid-multi-slot-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 6px 0 22px; } .br .simple-bid-multi-slot-cta__lead { color: var(--br-ink-2); font-size: 15px; } .br .simple-bid-multi-slot-cta__btn { font-weight: 600; } /* Per-boat rounds-overview sidebar on admin/boats/show. Groups rounds by status (Active / Needs resolution / Upcoming / Past) so admins can jump to any round in the season, with historic rounds collapsed behind a

disclosure. */ .br .rounds-overview__group-title { margin: 14px 0 6px; padding-bottom: 2px; font: 600 11px/1.3 var(--br-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--br-ink-3); border-bottom: 1px solid var(--br-line); } .br .rounds-overview__group-title:first-of-type { margin-top: 0; } .br .rounds-overview__list { margin: 0; } .br .rounds-overview__item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label label" "meta chip"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--br-line); } .br .rounds-overview__item:last-child { border-bottom: none; } .br .rounds-overview__item > .chip { grid-area: chip; justify-self: end; font-size: 11px; padding: 2px 8px 2px 7px; } .br .rounds-overview__link { display: contents; color: var(--br-ink); text-decoration: none; } .br .rounds-overview__link:hover .rounds-overview__label { color: var(--br-accent); } .br .rounds-overview__label { grid-area: label; font-weight: 500; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .br .rounds-overview__meta { grid-area: meta; font-size: 11.5px; color: var(--br-ink-3); line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; } .br .rounds-overview__item--next { grid-template-areas: "label label" "meta chip" "countdown countdown"; } .br .rounds-overview__item--next .rounds-overview__meta { color: var(--br-ink-2); } .br .rounds-overview__countdown { grid-area: countdown; margin-top: 3px; padding: 2px 8px; border-radius: 4px; background: var(--br-accent-s); color: var(--br-accent); font-size: 11px; font-weight: 600; justify-self: start; } .br .rounds-overview__past { margin-top: 14px; } .br .rounds-overview__past > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--br-ink-2); } .br .rounds-overview__past > summary:hover { color: var(--br-accent); } .br .rounds-overview__past > summary::-webkit-details-marker { display: none; } .br .rounds-overview__past > summary::before { content: "▶"; font-size: 12px; color: var(--br-accent); transition: transform 150ms ease; display: inline-block; } .br .rounds-overview__past[open] > summary::before { transform: rotate(90deg); } .br .rounds-overview__past[open] > summary { margin-bottom: 6px; } .br .rounds-overview__past .rounds-overview__item { opacity: 0.75; } .br .rounds-overview__count { color: var(--br-ink-3); font-weight: 400; } /* Season attention banner on admin/seasons/show — at-a-glance counts of rounds by status across the whole fleet. */ .br .season-attention { margin: 0 0 18px; padding: 12px 16px; background: var(--br-muted); border: 1px solid var(--br-line); border-radius: 6px; } .br .season-attention--calm { background: transparent; } .br .season-attention__title { margin: 0 0 8px; font: 600 11px/1.3 var(--br-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--br-ink-3); } .br .season-attention__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .br .season-attention__chips .chip { font-size: 12.5px; padding: 4px 11px 4px 10px; } .br .season-attention__empty { margin: 0; color: var(--br-ink-2); } /* === BOATS INFO — archive UI ================================================ /admin/boats_info gets a "Show archived" toggle and per-row Archive / Unarchive buttons. Archived rows fade and carry a pill-badge so they read as "out of program, still here for reference". */ .br .boats-info-toggle { margin: 0 0 12px; } .br .boats-info-toggle label { cursor: pointer; font-weight: normal; } .br .boats-info-toggle input { margin-right: 6px; } .br tr.archived-row { opacity: 0.55; } .br tr.out-of-season-row { opacity: 0.65; } .br .archived-badge, .br .out-of-season-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--br-line); border-radius: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--br-ink-3); background: var(--br-line-soft); vertical-align: 2px; } .br .archived-meta { font-size: 11px; color: var(--br-ink-3); margin-top: 2px; }