/* ===== WDS design layer (#38) — We Drive Sales brand kit "Concept 2" applied (#48). Palette per Docs/README.md: black #101011, charcoal #2A2A2D, gold #B88A36 (accents, selected states, primary actions ONLY — body text stays black/charcoal), off-white bg. ===== */ :root { --wds-accent: #B88A36; /* brand gold */ --wds-accent-light: #D2B36B; --wds-accent-ink: #7A571D; /* dark gold — the accessible text/link shade */ --wds-accent-soft: #F3EAD7; /* light gold tint for chips/fills */ --wds-ink: #101011; /* brand black */ --wds-charcoal: #2A2A2D; --wds-muted: #68635E; --wds-bg: #F7F5F1; /* off-white */ --wds-border: rgba(16,16,17,.10); /* #184: the BRIGHT gold, per the PM mockup — for dark surfaces only (the sidebar, the wds-dark pages, the set-up day workspace), where the muted brand gold reads dull. Light pages keep --wds-accent: dark text on the muted gold is the accessible pairing there. The set-up day CSS referenced --wds-gold before it existed; defining it here is what flips that page over. */ --wds-gold: #F2B01E; --wds-gold-light: #F6C452; --wds-radius: 12px; --wds-shadow: 0 1px 2px rgba(16,16,17,.05), 0 1px 3px rgba(16,16,17,.08); } /* ===== #226: the theme layer. Every surface the EM dark look paints (the wds-dark pages, the sidebar, the set-up day workspace, the data summary) draws from these tokens instead of hard-coded hex. `:root` carries the DARK set — today's look, unchanged. The `` element carries data-theme="dark" or "light", set before first paint by the head script in App.razor from the person's saved choice (User.Theme, mirrored in localStorage) or, with no choice, from the browser's prefers-color-scheme. The light set below repaints the same surfaces in the off-white brand sheet the rest of the app already wears. The light pages themselves (event file, guest grid, profile…) are the same in both themes. ===== */ :root { --wds-shell: #0e0e10; /* the workspace surface */ --wds-panel: #151518; /* cards, inputs */ --wds-panel-alt: #17171c; /* stacked cards, striped rows */ --wds-panel-deep: #1a1a1e; /* history rows, the call bar */ --wds-raised: #1d1d21; /* buttons, chips, notes, progress tracks */ --wds-raised-alt: #26262b; --wds-hover: #1f1f25; --wds-hover-alt: #19191d; --wds-hover-overlay: rgba(255,255,255,.07); --wds-sunken: #101013; /* disabled inputs */ --wds-selected: #201c12; /* the selected table row */ --wds-line: #232328; --wds-line-strong: #303036; --wds-line-hover: #3a3a42; --wds-line-control: #45454d; --wds-fg: #e8e8ea; --wds-fg-strong: #fff; --wds-fg-1: #d9d9de; --wds-fg-2: #c9c9cf; --wds-fg-3: #9a9aa2; --wds-fg-4: #86868e; --wds-fg-5: #6c6c74; --wds-fg-6: #4e4e56; --wds-ok: #6fbf73; --wds-ok-text: #8ed292; --wds-ok-line: #2e4d33; --wds-ok-bg: #1e3323; --wds-alert: #e2725b; --wds-alert-line: #7a3b2f; --wds-hot: #e8965a; --wds-warn-text: #c9a24a; --wds-warn-line: #6b5220; --wds-info-bg: #14202b; --wds-info-line: #1e3a52; --wds-info-fg: #a9cbe8; --wds-danger-bg: #2b1513; --wds-danger-fg: #e8a79d; --wds-table-ok-bg: #14261a; --wds-table-ok-fg: #a9e0b6; --wds-table-info-bg: #12222e; --wds-table-info-fg: #9cc8e8; --wds-sig-open-bg: #2c2340; --wds-sig-open-fg: #c0a7ee; --wds-sig-open-line: #433560; --wds-sig-click-bg: #1b2c3f; --wds-sig-click-fg: #8fc1ee; --wds-sig-click-line: #2a4560; /* On the dark surfaces the accent is the BRIGHT gold (#184); text set in it is the lighter tint. On light surfaces the muted brand gold and its dark text shade return. */ --wds-theme-accent: var(--wds-gold); --wds-theme-accent-light: var(--wds-gold-light); --wds-theme-accent-text: var(--wds-gold-light); --wds-num-bg: rgba(242,176,30,.16); --wds-card-shadow: 0 2px 10px rgba(0,0,0,.45); --wds-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9c9cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --wds-picker-filter: invert(.8); /* The sidebar. */ --wds-nav-bg: #0e0e10; --wds-nav-line: #232327; --wds-nav-fg: #a9a9b2; --wds-nav-fg-strong: #fff; --wds-nav-toggler-filter: none; } :root[data-theme="light"] { --wds-shell: var(--wds-bg); --wds-panel: #fff; --wds-panel-alt: #FBFAF7; --wds-panel-deep: #F3F0EA; --wds-raised: #F1EEE8; --wds-raised-alt: #E6E2DA; --wds-hover: #F3F0EA; --wds-hover-alt: #F6F4F0; --wds-hover-overlay: rgba(16,16,17,.05); --wds-sunken: #EFEBE4; --wds-selected: #FBF4E3; --wds-line: #E6E2DA; --wds-line-strong: #D5D0C6; --wds-line-hover: #B9B3A7; --wds-line-control: #A7A19A; --wds-fg: #2A2A2D; --wds-fg-strong: #101011; --wds-fg-1: #3A3835; --wds-fg-2: #4A4640; --wds-fg-3: #68635E; --wds-fg-4: #7D7770; --wds-fg-5: #A7A19A; --wds-fg-6: #B9B3A7; --wds-ok: #2ba55d; --wds-ok-text: #177245; --wds-ok-line: #BFE3CA; --wds-ok-bg: #E7F6EC; --wds-alert: #B42318; --wds-alert-line: #E9B8B2; --wds-hot: #B4531E; --wds-warn-text: #92600A; --wds-warn-line: #E2C98F; --wds-info-bg: #E7F1FB; --wds-info-line: #BCD4EE; --wds-info-fg: #1F4E80; --wds-danger-bg: #FDEAEA; --wds-danger-fg: #B42318; --wds-table-ok-bg: #E7F6EC; --wds-table-ok-fg: #177245; --wds-table-info-bg: #E7F1FB; --wds-table-info-fg: #1F4E80; --wds-sig-open-bg: #EFE9FB; --wds-sig-open-fg: #5B3FA0; --wds-sig-open-line: #D3C5EE; --wds-sig-click-bg: #E6F0FB; --wds-sig-click-fg: #1F5B99; --wds-sig-click-line: #BCD4EE; --wds-theme-accent: var(--wds-accent); --wds-theme-accent-light: var(--wds-accent-light); --wds-theme-accent-text: var(--wds-accent-ink); --wds-num-bg: var(--wds-accent-soft); --wds-card-shadow: 0 2px 10px rgba(16,16,17,.08); --wds-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --wds-picker-filter: none; --wds-nav-bg: #fff; --wds-nav-line: #E6E2DA; --wds-nav-fg: #4A4640; --wds-nav-fg-strong: #101011; --wds-nav-toggler-filter: invert(.85); } html, body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; } body { background: var(--wds-bg); color: var(--wds-ink); } a, .btn-link { color: var(--wds-accent-ink); } /* Brand: primary action = gold with black text; hover lifts to light gold. */ .btn-primary { color: var(--wds-ink); background-color: var(--wds-accent); border-color: var(--wds-accent); font-weight: 600; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: var(--wds-ink) !important; background-color: var(--wds-accent-light) !important; border-color: var(--wds-accent-light) !important; } .btn-primary:disabled { color: var(--wds-ink); background-color: var(--wds-accent); border-color: var(--wds-accent); opacity: .45; } .btn-outline-primary { color: var(--wds-accent-ink); border-color: var(--wds-accent); } .btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary { color: var(--wds-ink) !important; background-color: var(--wds-accent) !important; border-color: var(--wds-accent) !important; } .link-primary { color: var(--wds-accent-ink) !important; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(184,138,54,.45); border-color: var(--wds-accent); } .form-check-input:checked { background-color: var(--wds-accent); border-color: var(--wds-accent); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ---- Page header ---- */ .wds-page-title { font-size: 1.45rem; font-weight: 650; letter-spacing: -.01em; margin: 0; } .wds-page-sub { color: var(--wds-muted); font-size: .875rem; } /* ---- Numbered section cards (create/edit forms) ---- */ .wds-form-col { max-width: 880px; } .wds-section { background: #fff; border: 1px solid var(--wds-border); border-radius: var(--wds-radius); box-shadow: var(--wds-shadow); padding: 1rem 1.25rem 1.25rem; margin-bottom: 1rem; } .wds-section-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .8rem; } .wds-num { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--wds-accent-soft); color: var(--wds-accent-ink); font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; align-self: center; } .wds-section-title { font-size: 1rem; font-weight: 600; margin: 0; } .wds-section-hint { color: var(--wds-muted); font-size: .8rem; } /* ---- Field labels: quiet uppercase micro-labels ---- */ .wds-label { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--wds-muted); margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wds-label .soft { text-transform: none; letter-spacing: 0; font-weight: 400; } /* ---- Sticky action bar (bottom of create/edit pages) ---- */ .wds-sticky-bar { position: sticky; bottom: 0; z-index: 100; background: #fff; border: 1px solid var(--wds-border); border-bottom: 0; border-radius: var(--wds-radius) var(--wds-radius) 0 0; box-shadow: 0 -4px 12px rgba(16,24,40,.08); padding: .7rem 1.25rem; display: flex; align-items: center; gap: 1rem; margin-top: 1rem; } .wds-sticky-summary { color: var(--wds-muted); font-size: .9rem; min-width: 0; flex: 1; } .wds-sticky-summary strong { color: var(--wds-ink); } /* ---- Hero header (detail pages) ---- */ .wds-hero { background: #fff; border: 1px solid var(--wds-border); border-radius: var(--wds-radius); box-shadow: var(--wds-shadow); padding: 1.15rem 1.5rem 0; margin-bottom: 1rem; } .wds-hero-title { font-size: 1.45rem; font-weight: 650; letter-spacing: -.01em; margin: 0; } .wds-hero-sub { color: var(--wds-muted); font-size: .875rem; margin-top: .1rem; } .wds-hero-sub a { text-decoration: none; } /* ---- Chips ---- */ .wds-chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .18rem .7rem; font-size: .76rem; font-weight: 600; background: #EFEBE4; color: var(--wds-charcoal); white-space: nowrap; } .wds-chip-accent { background: var(--wds-accent-soft); color: var(--wds-accent-ink); } .wds-chip-success { background: #e7f6ec; color: #177245; } .wds-chip-warn { background: #fdf3e0; color: #92600a; } .wds-chip-danger { background: #fdeaea; color: #b42318; } /* ---- Key-date strip ---- */ .wds-datestrip { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: .9rem; } .wds-date { padding: .1rem 1rem .1rem 0; margin: .25rem 1rem .25rem 0; border-right: 1px solid var(--wds-border); } .wds-date:last-child { border-right: 0; } .wds-date-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wds-muted); } .wds-date-value { font-weight: 600; font-size: .92rem; } .wds-date-value.is-empty { color: #A7A19A; /* brand warm gray */ font-weight: 400; } /* ---- Progress ---- */ .wds-progress { height: 6px; border-radius: 3px; background: #EAE6DF; overflow: hidden; width: 100%; max-width: 260px; } .wds-progress > div { height: 100%; background: var(--wds-accent); border-radius: 3px; } /* ---- Tabs (hero bottom edge) ---- */ .wds-tabs { display: flex; gap: .25rem; margin: .9rem -1.5rem 0; padding: 0 1rem; border-top: 1px solid var(--wds-border); overflow-x: auto; } .wds-tab { border: 0; background: none; padding: .65rem .9rem; font-weight: 600; font-size: .88rem; color: var(--wds-muted); border-bottom: 2.5px solid transparent; white-space: nowrap; } .wds-tab:hover { color: var(--wds-ink); } .wds-tab.active { color: var(--wds-accent-ink); border-bottom-color: var(--wds-accent); } .wds-tab .badge { font-size: .68rem; vertical-align: 1px; } /* ---- Work-back task list ---- */ .wds-task-dot { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; margin-right: .45rem; border: 2px solid #A7A19A; background: #fff; vertical-align: baseline; } .wds-task-dot.done { background: #2ba55d; border-color: #2ba55d; } .wds-task-dot.overdue { background: #d92d20; border-color: #d92d20; } .wds-task-dot.inprogress { background: #f5b942; border-color: #f5b942; } .wds-phase-head { display: flex; align-items: baseline; gap: .5rem; margin: 1.1rem 0 .35rem; font-weight: 600; font-size: .95rem; } .wds-phase-count { color: var(--wds-muted); font-weight: 400; font-size: .8rem; } /* ---- The big SOLD button (#65): fun to hit ---- */ .btn-sold { background: linear-gradient(135deg, #D2B36B 0%, #B88A36 45%, #9A7128 100%); color: #101011; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border: 0; border-radius: 10px; padding: .45rem 1.1rem; box-shadow: 0 0 0 0 rgba(184,138,54,.55), 0 3px 10px rgba(16,16,17,.25); animation: sold-throb 2s ease-in-out infinite; transition: transform .1s ease; } .btn-sold:hover { transform: scale(1.12) rotate(-2deg); color: #101011; } .btn-sold:active { transform: scale(.94); } @keyframes sold-throb { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,138,54,.55), 0 3px 10px rgba(16,16,17,.25); } 50% { box-shadow: 0 0 0 7px rgba(184,138,54,0), 0 3px 10px rgba(16,16,17,.25); } } /* ---- The SOLD celebration (#63): bell + CSS confetti + gold burst ---- */ .sold-overlay { position: fixed; inset: 0; z-index: 2000; pointer-events: none; overflow: hidden; } .sold-confetti { position: absolute; top: -20px; border-radius: 2px; animation: sold-fall linear forwards; } @keyframes sold-fall { 0% { transform: translateY(-4vh) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(106vh) rotate(720deg); opacity: 0; } } .sold-burst { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(3rem, 9vw, 6.5rem); font-weight: 800; letter-spacing: -.02em; color: var(--wds-accent); text-shadow: 0 4px 24px rgba(16,16,17,.35), 0 0 2px #fff; animation: sold-pop 5s ease forwards; } @keyframes sold-pop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.04); opacity: 0; } } /* Cards inside tab bodies */ .wds-card { background: #fff; border: 1px solid var(--wds-border); border-radius: var(--wds-radius); box-shadow: var(--wds-shadow); padding: 1rem 1.25rem; margin-bottom: 1rem; } .wds-card-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wds-muted); margin-bottom: .6rem; } .wds-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; font-size: .9rem; } .wds-kv .k { color: var(--wds-muted); } .wds-kv .v { font-weight: 600; text-align: right; } /* #175: the event Team card's rows. Not wds-kv — that pair is label-left/value-right, which left the four holders' names on a ragged edge in the middle of the card. Three columns: the seat, the person (one shared left edge), the controls. */ .wds-team-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .22rem 0; font-size: .9rem; } .wds-team-row .k { color: var(--wds-muted); } .wds-team-row .v { font-weight: 600; } /* Editing swaps the picker in, which needs the whole width — the grid would squeeze it. */ .wds-team-row.editing { display: flex; flex-wrap: wrap; align-items: center; } .wds-team-row.editing .k { min-width: 8rem; } /* #105: the filter card's group headers + result bar (frontend-design pass) */ .wds-filter-group { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wds-accent-ink); border-bottom: 1px solid var(--wds-border); padding-bottom: .25rem; margin-bottom: .5rem; } .wds-filter-result { border-top: 1px solid var(--wds-border); padding-top: .6rem; } /* #102: compact multi-select checklists (makes polled from the batch, customer types) */ .wds-checklist { max-height: 7.5rem; overflow-y: auto; border: 1px solid var(--wds-border); border-radius: 6px; padding: .25rem .5rem; background: #fff; } .wds-checklist-short { max-height: none; overflow: visible; } .wds-check { display: block; font-size: .82rem; padding: .05rem 0; cursor: pointer; white-space: nowrap; } .wds-check input { margin-right: .35rem; accent-color: var(--wds-accent); } /* ---- User avatars + the profile video popup (#191) ---- */ .wds-avatar { border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--wds-accent-soft); color: var(--wds-accent-ink); font-weight: 700; user-select: none; vertical-align: middle; } .wds-avatar img { width: 100%; height: 100%; object-fit: cover; } .wds-avatar-video { cursor: pointer; box-shadow: 0 0 0 2px var(--wds-accent); } .wds-avatar-video:hover { box-shadow: 0 0 0 3px var(--wds-accent-light); } .wds-video-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(16,16,17,.75); display: flex; align-items: center; justify-content: center; } .wds-video-box { position: relative; background: #101011; border-radius: 14px; padding: 10px; max-width: min(92vw, 560px); box-shadow: 0 12px 40px rgba(0,0,0,.6); } .wds-video-box video { display: block; max-width: 100%; max-height: 78vh; border-radius: 8px; } .wds-video-close { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--wds-accent); color: #101011; font-weight: 700; cursor: pointer; } .wds-video-caption { color: #e8e8ea; text-align: center; font-size: .85rem; padding-top: 6px; } /* Dealer portal (#94) — the store-facing dashboard and CRM, in the house palette */ .dlr-total { background: var(--wds-ink); color: #fff; border-radius: var(--wds-radius); padding: 1rem 1.25rem; margin: 1rem 0; } .dlr-total-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wds-accent-light); } .dlr-total-big { font-size: 2.6rem; font-weight: 800; line-height: 1.1; } .dlr-big { font-size: 1.7rem; font-weight: 700; margin-bottom: .35rem; } .dlr-bar { height: 6px; background: rgba(16,16,17,.08); border-radius: 999px; overflow: hidden; margin-bottom: .5rem; } .dlr-bar > div { height: 100%; background: var(--wds-accent); border-radius: 999px; } .dlr-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin-top: 1rem; } .dlr-funnel-cell { background: #fff; border: 1px solid var(--wds-border); border-radius: var(--wds-radius); box-shadow: var(--wds-shadow); padding: .7rem .9rem; text-align: center; cursor: pointer; } .dlr-funnel-cell.dlr-on { border-color: var(--wds-accent); background: var(--wds-accent-soft); } .dlr-funnel-lead { background: var(--wds-ink); color: #fff; } .dlr-funnel-lead.dlr-on { background: var(--wds-charcoal); } .dlr-funnel-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; } .dlr-funnel-big { font-size: 1.9rem; font-weight: 800; line-height: 1.2; } .dlr-funnel-sub { font-size: .75rem; opacity: .7; } /* Sales pipeline board (#90) — nine stage columns, scrolled sideways rather than squeezed */ .pipe-board { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; } .pipe-col { flex: 0 0 15rem; background: rgba(16,16,17,.03); border: 1px solid var(--wds-border); border-radius: var(--wds-radius); padding: .5rem; } .pipe-col-head { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wds-muted); padding: .1rem .25rem .5rem; } .pipe-count { background: var(--wds-accent-soft); color: var(--wds-accent-ink); border-radius: 999px; padding: 0 .45rem; font-size: .75rem; } .pipe-card { display: block; background: #fff; border: 1px solid var(--wds-border); border-left: 3px solid var(--wds-accent-light); border-radius: 8px; box-shadow: var(--wds-shadow); padding: .5rem .6rem; margin-bottom: .5rem; text-decoration: none; color: var(--wds-ink); } .pipe-card:hover { border-color: var(--wds-accent); color: var(--wds-ink); } /* A missed next step is the one thing the board should shout about */ .pipe-card.pipe-late { border-left-color: #B23B3B; } .pipe-dealer { font-weight: 600; font-size: .9rem; } .pipe-name { font-size: .82rem; color: var(--wds-muted); } .pipe-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--wds-muted); margin-top: .3rem; } .pipe-value { font-weight: 600; color: var(--wds-accent-ink); } .pipe-next { font-size: .78rem; margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--wds-border); } .pipe-next.pipe-none { color: #B23B3B; font-style: italic; } /* --- #127: the data workbench (ChatGPT mockup skeleton + JC corrections) --- */ .wds-workbench { max-width: 1560px; margin: 0 auto; font-size: 14px; } .wds-workbench h1 { font-size: 26px; font-weight: 700; } .wds-workbench h4 { font-size: 17px; font-weight: 600; } .wds-workbench h6 { font-size: 15px; font-weight: 600; } .wds-workbench .form-control, .wds-workbench .form-select { min-height: 36px; font-size: 14px; } .wds-workbench .form-control-sm, .wds-workbench .form-select-sm { min-height: 32px; } .wds-statband { display: flex; flex-wrap: wrap; gap: 0; background: #fff; border: 1px solid var(--wds-border); border-radius: var(--wds-radius); box-shadow: var(--wds-shadow); align-items: center; } .wds-stat { flex: 1 1 0; min-width: 9rem; padding: .8rem 1.25rem; border-right: 1px solid var(--wds-border); } .wds-stat:last-child { border-right: 0; flex: 0 0 auto; } /* Narrow windows: two stats per row, the actions menu on its own full-width row. */ @media (max-width: 991px) { .wds-stat { flex: 1 1 40%; border-right: 0; border-bottom: 1px solid var(--wds-border); } .wds-stat:nth-child(odd) { border-right: 1px solid var(--wds-border); } .wds-stat:last-child { flex: 1 1 100%; border-bottom: 0; border-right: 0; text-align: right; } } .wds-stat .wds-stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; } .wds-stat .wds-stat-label { color: var(--wds-muted); font-size: 12.5px; } .wds-stat-warn .wds-stat-value { color: #a05c00; } .wds-steps { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--wds-border); border-radius: var(--wds-radius); box-shadow: var(--wds-shadow); padding: .55rem .9rem; } .wds-step { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; font-size: 13px; color: var(--wds-muted); background: transparent; } .wds-step.done { color: #1e6641; background: #e7f2ea; } .wds-step.current { color: var(--wds-accent-ink); background: var(--wds-accent-soft); font-weight: 600; } .wds-step.warn { color: #a05c00; background: #fdf1dc; } .wds-step-arrow { color: var(--wds-border); } .wds-panel { background: #fff; border: 1px solid var(--wds-border); border-radius: var(--wds-radius); box-shadow: var(--wds-shadow); padding: 1rem 1.25rem; } .wds-panel-title { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wds-muted); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; } .wds-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; background: var(--wds-accent-soft); color: var(--wds-accent-ink); font-size: 12.5px; border: 1px solid rgba(184,138,54,.25); } .wds-chip button { border: 0; background: none; color: inherit; font-weight: 700; line-height: 1; padding: 0 .1rem; cursor: pointer; } .wds-result-count { font-size: 26px; font-weight: 700; line-height: 1.05; } .wds-quality-line { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; } .wds-menu { position: relative; } .wds-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 15rem; background: #fff; border: 1px solid var(--wds-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,16,17,.14); padding: .35rem; } .wds-menu-list a, .wds-menu-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .7rem; border-radius: 7px; font-size: 13.5px; color: var(--wds-ink); text-decoration: none; } .wds-menu-list a:hover, .wds-menu-list button:hover { background: var(--wds-bg); } /* --- #130: the template WYSIWYG (contenteditable, no editor library) --- */ .wds-editor { border: 1px solid var(--wds-border); border-radius: 8px; background: #fff; } .wds-editor-toolbar { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; padding: .35rem .5rem; border-bottom: 1px solid var(--wds-border); background: var(--wds-bg); border-radius: 8px 8px 0 0; } .wds-editor-toolbar > button { border: 1px solid transparent; background: none; border-radius: 6px; min-width: 2rem; height: 1.9rem; font-size: 13px; color: var(--wds-ink); cursor: pointer; } .wds-editor-toolbar > button:hover { background: #fff; border-color: var(--wds-border); } .wds-editor-sep { width: 1px; height: 1.2rem; background: var(--wds-border); margin: 0 .25rem; } .wds-editor-surface { min-height: 14rem; max-height: 30rem; overflow-y: auto; padding: .6rem .8rem; outline: none; font-size: 14px; } .wds-editor-surface:focus { box-shadow: inset 0 0 0 2px rgba(184,138,54,.25); border-radius: 0 0 8px 8px; } .wds-editor-surface h2 { font-size: 1.2rem; } /* ---- Staffing scheduler calendar (#144, grid rebuild #148) ---- */ .sched-grid { font-size: .74rem; } .sched-grid-row { display: grid; border-bottom: 1px solid var(--wds-border); align-items: start; } .sched-grid-head { position: sticky; top: 0; background: #fff; z-index: 3; } .sched-ghead { text-align: center; padding: 2px 0 1px; border-right: 1px solid #f0ede7; color: var(--wds-muted); line-height: 1.15; } .sched-ghead strong { color: var(--wds-ink); font-weight: 600; } .sched-gname { position: sticky; left: 0; background: #fff; z-index: 2; padding: 5px 8px; font-weight: 600; border-right: 1px solid var(--wds-border); align-self: stretch; } .sched-gday { border-right: 1px solid #f0ede7; min-height: 28px; align-self: stretch; } .sched-today { background: #FBF4E3; } .sched-pill { z-index: 1; margin: 3px 3px 1px; padding: 1px 8px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 19px; min-width: 0; } .sched-pill[role="button"] { cursor: pointer; } .sched-pill-confirmed { color: #fff; } .sched-pill-tentative { background: #fff; border-style: dashed; } .sched-pill-away { background: #e8e6e2; border-color: #cfccc6; color: #514d48; } .sched-pill-needs { background: #fbeaea; border-color: #b3261e; color: #7a1712; } .sched-dot { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; margin-left: .3rem; } /* ---- Event weather strip (#149, sized up beside the page title #150) ---- */ .weather-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .weather-chip { background: #fff; border: 1px solid var(--wds-border); border-radius: 12px; padding: .28rem .7rem; white-space: nowrap; font-size: .95rem; box-shadow: 0 1px 2px rgba(16,16,17,.06); } .weather-chip strong { font-size: 1.05rem; } .weather-precip { color: #2E6FDB; font-weight: 600; } /* --------------------------------------------------------------------------------------- The EM dark look (#176/#179). Introduced by the set-up day workspace (#152), whose CSS said "other EM pages adopt it next"; it now dresses Events and My Events, so it lives here rather than inside one page. su-* on set-up day is the same palette, older names. --------------------------------------------------------------------------------------- */ .wds-dark { background: var(--wds-shell); color: var(--wds-fg); border-radius: 16px; padding: 18px 20px 24px; margin: -8px 0 0; /* #184: on the dark surface, every accent reference resolves to the bright gold. */ --wds-accent: var(--wds-theme-accent); --wds-accent-light: var(--wds-theme-accent-light); } .wds-dark a { color: var(--wds-theme-accent-text); text-decoration: none; } .wds-dark a:hover { text-decoration: underline; } .wds-dark-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .wds-dark-title { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--wds-fg-strong); } .wds-dark-sub { color: var(--wds-fg-3); font-size: .9rem; } .wds-dark-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .wds-dark-btn { background: var(--wds-raised); border: 1px solid var(--wds-line-strong); color: var(--wds-fg); border-radius: 8px; padding: 6px 14px; font-size: .85rem; cursor: pointer; display: inline-block; text-align: center; } .wds-dark-btn:hover { border-color: var(--wds-accent, #B88A36); text-decoration: none !important; } .wds-dark a.wds-dark-btn { color: var(--wds-fg); } .wds-dark-btn-gold { background: var(--wds-accent, #B88A36); border-color: var(--wds-accent, #B88A36); color: #17130a; font-weight: 700; } .wds-dark a.wds-dark-btn-gold { color: #17130a; } /* Segmented control: state shown by fill, never by size (#79). */ .wds-seg { display: inline-flex; background: var(--wds-panel); border: 1px solid var(--wds-line-strong); border-radius: 10px; padding: 2px; } .wds-seg-btn { background: transparent; border: 0; color: var(--wds-fg-3); border-radius: 8px; padding: 5px 14px; font-size: .85rem; cursor: pointer; } .wds-seg-btn.is-on { background: var(--wds-accent, #B88A36); color: #17130a; font-weight: 700; } .wds-dark-check { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--wds-fg-2); cursor: pointer; margin: 0; } .wds-dark-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 4px; } .wds-dark-input { background: var(--wds-panel); border: 1px solid var(--wds-line-strong); color: var(--wds-fg); border-radius: 8px; padding: 6px 10px; font-size: .85rem; min-width: 150px; } .wds-dark-input::placeholder { color: var(--wds-fg-5); } .wds-dark-input:focus { outline: none; border-color: var(--wds-accent, #B88A36); } .wds-dark-count { font-size: .8rem; color: var(--wds-fg-4); } .wds-dark-empty { color: var(--wds-fg-3); margin-top: 18px; } .wds-dark-chip { background: var(--wds-raised); border: 1px solid var(--wds-line-strong); border-radius: 999px; padding: 2px 10px; font-size: .75rem; color: var(--wds-fg-2); white-space: nowrap; } .wds-dark-chip-live { border-color: var(--wds-ok); color: var(--wds-ok-text); } .wds-dark-chip-open { border-color: var(--wds-accent, #B88A36); color: var(--wds-theme-accent-text); } .wds-dark-chip-warn { border-color: var(--wds-warn-line); color: var(--wds-warn-text); } /* Four across at most, however wide the monitor: each column claims at least a quarter of the row (minus the gaps), so a fifth can never fit. Below ~1400px the 330px floor takes over and the grid drops to three, two, one. */ .wds-ev-grid { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(max(330px, calc((100% - 3 * 14px) / 4)), 1fr)); } .wds-ev-card { background: var(--wds-panel); border: 1px solid var(--wds-line); border-radius: 14px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; } /* Everything below the name must line up across the row, so the name block is always the same height whether it runs to one line or three — a long one clamps (the full text is on the link's tooltip) rather than shoving this card's rail out of step with its neighbours'. The buttons then sit on the floor of the tallest card in the row. */ .wds-ev-head { min-height: 2.7em; } .wds-ev-buttons { margin-top: auto; } .wds-ev-card:hover { border-color: var(--wds-line-hover); } .wds-ev-card.is-past { opacity: .68; } .wds-ev-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .wds-ev-head { align-items: flex-start; } .wds-ev-top-sub { margin-top: -6px; } .wds-ev-name { font-size: 1.02rem; font-weight: 700; color: var(--wds-fg-strong) !important; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wds-ev-dealer { font-size: .85rem; color: var(--wds-fg-3); } /* Milestone rail: mark + label per step, with the connecting line under the row. */ .wds-ev-rail { display: flex; gap: 0; margin-top: 2px; } .wds-ev-step { flex: 1; position: relative; padding-bottom: 12px; font-size: .74rem; color: var(--wds-fg-5); } .wds-ev-step-mark { font-size: .8rem; margin-right: 4px; } .wds-ev-step-line { position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--wds-line); } .wds-ev-step.is-done { color: var(--wds-fg-2); } .wds-ev-step.is-done .wds-ev-step-mark { color: var(--wds-ok-text); } .wds-ev-step.is-done .wds-ev-step-line { background: var(--wds-accent, #B88A36); } .wds-ev-step.is-now { color: var(--wds-fg-strong); font-weight: 700; } .wds-ev-step.is-now .wds-ev-step-mark { color: var(--wds-theme-accent-text); } .wds-ev-step.is-now .wds-ev-step-line { background: linear-gradient(90deg, var(--wds-accent, #B88A36) 50%, var(--wds-line) 50%); } .wds-ev-stats { display: flex; border-top: 1px solid var(--wds-line); border-bottom: 1px solid var(--wds-line); padding: 8px 0; } /* Tight gutters: four slots on a ~350px card leave no room for generous padding, and the dividers already do the separating that padding would. */ .wds-ev-stat { flex: 1 1 0; min-width: 0; padding: 0 5px; border-left: 1px solid var(--wds-line); overflow: hidden; } .wds-ev-stat:first-child { border-left: 0; padding-left: 0; } /* The strip's columns are sized by what they hold: a cross-month range ("Jul 14 – Aug 31") is the widest thing on the card, a guest count is four digits at most. */ .wds-ev-stat-dates { flex: 1.8 1 0; } .wds-ev-stat-tasks { flex: 1.1 1 0; } .wds-ev-stat-count { flex: .7 1 0; min-width: 3.4rem; } /* enough for the GUESTS label itself */ /* Dates read fine a notch below the headline numbers, and it keeps a cross-month range whole. */ /* A two-month range ("Dec 17–Dec 31") is the widest thing this strip ever holds and simply does not fit three-across. It wraps rather than clipping — which costs nothing in row discipline, because the rail above it is a fixed height and the buttons are pinned to the card's floor, so only the middle of the tallest card in a row grows. */ .wds-ev-stat-dates .wds-ev-stat-value { font-size: .88rem; white-space: normal; } .wds-ev-stat-label { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wds-fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wds-ev-stat-value { font-size: .95rem; font-weight: 700; color: var(--wds-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wds-ev-stat-value.is-alert { color: var(--wds-alert); } /* One equal column per button, however many there are - My Events adds EMT to the four. */ .wds-ev-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; } .wds-ev-buttons .wds-dark-btn { padding: 5px 4px; font-size: .78rem; } /* The daily view's own pieces (#182) — the tile band, the work-back rail at full width, and the task table under each event. Everything else on the page comes from the shared dark set above. (Note to self: never write a wds-dark-star-slash glob in a CSS comment — it ends the comment and the parser then eats the rule that follows it. That cost a probe cycle.) */ .wds-tiles { display: grid; gap: 12px; margin: 16px 0 4px; grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 3 * 12px) / 4)), 1fr)); } .wds-tile { background: var(--wds-panel); border: 1px solid var(--wds-line); border-radius: 14px; padding: 12px 14px; } .wds-tile-value { font-size: 1.9rem; font-weight: 800; color: var(--wds-fg-strong); line-height: 1.1; } .wds-tile-label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wds-fg-4); } .wds-tile.is-alert .wds-tile-value { color: var(--wds-alert); } .wds-tile.is-warn .wds-tile-value { color: var(--wds-theme-accent-text); } /* #185: the break between events must be unmissable. The Events grid's card colours work side-by-side in a grid, but a full-width stacked card loses a 1px near-black border — so these sit lighter than the shell, with a brighter edge, real air between events, and a shadow lifting each card off the page. */ .wds-day-card { margin-top: 22px; background: var(--wds-panel-alt); border-color: var(--wds-line-strong); box-shadow: var(--wds-card-shadow); } /* #183: the set-up bar. One dot per STEP, green as it completes, grouped under the milestone it belongs to — a phase is as wide as the number of steps in it, so the bar reads as real progress rather than eleven equal jumps. Hovering a dot names the task and its due date. */ .wds-rail { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 2px; } /* A one-step milestone would otherwise get a sliver of the bar and a label reading "SHA…"; the floor keeps every name at least mostly readable, and the tooltip covers the rest. */ .wds-rail-phase { min-width: 3.6rem; flex-basis: 0; } .wds-rail-dots { display: flex; flex-wrap: nowrap; gap: 3px; } .wds-rail-dot { flex: 1 1 auto; min-width: 4px; max-width: 14px; height: 7px; border-radius: 999px; background: var(--wds-line-strong); cursor: default; } .wds-rail-dot.is-done { background: var(--wds-ok); } .wds-rail-dot.is-now { background: var(--wds-accent, #B88A36); box-shadow: 0 0 0 2px rgba(242,176,30,.28); } .wds-rail-label { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wds-fg-5); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wds-rail-count { color: var(--wds-fg-6); } .wds-rail-phase.is-done .wds-rail-label { color: var(--wds-ok-text); } .wds-rail-phase.is-now .wds-rail-label { color: var(--wds-fg-strong); font-weight: 700; } .wds-rail-phase.is-now .wds-rail-count { color: var(--wds-theme-accent-text); } .wds-day-tasks { width: 100%; border-collapse: collapse; margin-top: 4px; } .wds-day-tasks td { padding: 6px 8px; border-top: 1px solid var(--wds-line); font-size: .88rem; vertical-align: middle; } .wds-day-tasks tr:hover td { background: var(--wds-hover); } /* #186: date and flag are fixed-width columns so the cards agree on their vertical edges; tabular numerals keep the dates themselves from wobbling row to row. */ .wds-day-tasks td.wds-day-due { width: 7.2rem; font-variant-numeric: tabular-nums; } .wds-day-tasks td.wds-day-flag { width: 6rem; } .wds-day-overdue { color: var(--wds-alert); font-weight: 700; } .wds-day-today { color: var(--wds-theme-accent-text); font-weight: 700; } .wds-day-status { padding: 3px 8px; font-size: .8rem; min-width: 0; width: 100%; } .wds-day-link { color: var(--wds-theme-accent-text); cursor: pointer; } .wds-day-quiet, .wds-day-clear { font-size: .85rem; margin-top: 6px; } .wds-day-quiet { color: var(--wds-fg-4); } .wds-day-clear { color: var(--wds-ok); } .wds-dark-note { background: var(--wds-raised); border: 1px solid var(--wds-line-strong); border-radius: 10px; padding: 6px 12px; margin-top: 12px; font-size: .85rem; color: var(--wds-fg-2); } .wds-dark-chip-alert { border-color: var(--wds-alert-line); color: var(--wds-alert); } /* --------------------------------------------------------------------------------------- #195: the Bootstrap-on-dark bridge. The dealer page (and any dark page after it) embeds components written in plain Bootstrap — DealerSalesActivity, TagPicker, PhoneInput — and they must inherit the dark look without being rewritten. Bootstrap 5.3 draws its controls from CSS variables, so most of this is re-pointing those inside .wds-dark; the few direct rules below (select chevron, checkbox track) cover what the variables don't reach. --------------------------------------------------------------------------------------- */ .wds-dark { --bs-body-bg: var(--wds-panel); --bs-body-color: var(--wds-fg); --bs-secondary-color: var(--wds-fg-3); --bs-tertiary-color: var(--wds-fg-4); --bs-secondary-bg: var(--wds-raised); --bs-tertiary-bg: var(--wds-raised); --bs-border-color: var(--wds-line-strong); --bs-emphasis-color: var(--wds-fg-strong); --bs-heading-color: var(--wds-fg-strong); --bs-link-color: var(--wds-theme-accent-text); } .wds-dark .form-control, .wds-dark .form-select { background-color: var(--wds-panel); border-color: var(--wds-line-strong); color: var(--wds-fg); } .wds-dark .form-control::placeholder { color: var(--wds-fg-5); } .wds-dark .form-control:disabled, .wds-dark .form-select:disabled { background-color: var(--wds-sunken); color: var(--wds-fg-5); } .wds-dark .form-control:focus, .wds-dark .form-select:focus { background-color: var(--wds-panel); color: var(--wds-fg); border-color: var(--wds-accent, #B88A36); box-shadow: 0 0 0 0.15rem rgba(242,176,30,.25); } /* The stock chevron and clock/calendar glyphs are near-black — repaint them light. */ .wds-dark .form-select { background-image: var(--wds-select-chevron); } .wds-dark input[type="time"]::-webkit-calendar-picker-indicator, .wds-dark input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--wds-picker-filter); } .wds-dark .form-check-input:not(:checked) { background-color: var(--wds-panel); border-color: var(--wds-line-control); } .wds-dark .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--wds-panel), 0 0 0 0.25rem rgba(242,176,30,.45); } .wds-dark .table { --bs-table-bg: transparent; --bs-table-color: var(--wds-fg); --bs-table-border-color: var(--wds-line); --bs-table-striped-bg: var(--wds-panel-alt); --bs-table-hover-bg: var(--wds-hover); --bs-table-hover-color: var(--wds-fg); } .wds-dark .table > thead th { color: var(--wds-fg-4); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .wds-dark .card { background-color: var(--wds-panel-alt); border-color: var(--wds-line-strong); } .wds-dark .border { border-color: var(--wds-line-strong) !important; } .wds-dark .badge.text-bg-light { background-color: var(--wds-raised) !important; color: var(--wds-fg-2) !important; border-color: var(--wds-line-strong) !important; } .wds-dark .alert-info { background-color: var(--wds-info-bg); border-color: var(--wds-info-line); color: var(--wds-info-fg); } .wds-dark .alert-danger { background-color: var(--wds-danger-bg); border-color: var(--wds-alert-line); color: var(--wds-danger-fg); } .wds-dark .btn-outline-secondary { color: var(--wds-fg-2); border-color: var(--wds-line-control); } .wds-dark .btn-outline-secondary:hover { background-color: var(--wds-line-strong); border-color: var(--wds-line-control); color: var(--wds-fg-strong); } .wds-dark .btn-outline-primary { color: var(--wds-theme-accent-text); } .wds-dark .text-success { color: var(--wds-ok-text) !important; } .wds-dark a.link-secondary { color: var(--wds-fg-3) !important; } /* #202: light cards go dark inside the dark shell — the guest grid's .wds-card was a white sheet under near-white table text (unreadable on the EM dashboard). */ .wds-dark .wds-card { background: var(--wds-panel); border-color: var(--wds-line); box-shadow: none; } /* Gold is for the name link only — a whole grid of gold tel:/mailto: links is a wall. */ .wds-dark .table a[href^="tel:"], .wds-dark .table a[href^="mailto:"] { color: var(--wds-fg-2); } /* The appointment board's outcome rows, re-toned for dark (light Bootstrap variants glare). */ .wds-dark .table-success { --bs-table-bg: var(--wds-table-ok-bg); --bs-table-color: var(--wds-table-ok-fg); } .wds-dark .table-info { --bs-table-bg: var(--wds-table-info-bg); --bs-table-color: var(--wds-table-info-fg); } .wds-dark .table-danger { --bs-table-bg: var(--wds-danger-bg); --bs-table-color: var(--wds-danger-fg); } /* ---- #195: the dealer page — numbered dark section cards, per the JC mockup ---- */ /* The right column carries the People table — the widest thing on the page — so it gets the larger share. */ .wds-dealer-grid { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); gap: 14px; align-items: start; margin-top: 14px; } @media (max-width: 1200px) { .wds-dealer-grid { grid-template-columns: minmax(0, 1fr); } } .wds-dealer-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* Side-by-side minor cards (Dealer Contact | Brands) inside a column. */ .wds-dealer-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .wds-dark-section { background: var(--wds-panel); border: 1px solid var(--wds-line); border-radius: 14px; padding: 14px 16px 16px; min-width: 0; } .wds-dark-section .wds-section-head { margin-bottom: .7rem; } .wds-dark .wds-num { background: var(--wds-num-bg); color: var(--wds-theme-accent-text); } .wds-dark .wds-section-title { color: var(--wds-fg-strong); } .wds-dark .wds-label { color: var(--wds-fg-4); } .wds-dark-section .table { font-size: .85rem; } .wds-dark-section .table td, .wds-dark-section .table th { padding: .3rem .3rem; } /* Operating hours: one column per day — tick open, set the two times, per the mockup. */ .wds-hours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } @media (max-width: 700px) { .wds-hours { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .wds-hours-day { display: flex; flex-direction: column; gap: 5px; align-items: stretch; min-width: 0; } .wds-hours-head { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--wds-fg-2); } .wds-hours-day input[type="time"] { padding: .2rem .25rem; font-size: .74rem; text-align: center; } .wds-hours-closed { font-size: .74rem; color: var(--wds-fg-5); text-align: center; border: 1px dashed var(--wds-line-strong); border-radius: 6px; padding: .2rem .25rem; } /* The sales-activity trail can run to years of history — it scrolls inside its card rather than stretching the page. */ .wds-dealer-scroll { max-height: 560px; overflow-y: auto; padding-right: 4px; } /* Danger zone: the one card that should look like a warning label. */ .wds-dark-section.wds-danger { border-color: var(--wds-alert-line); } .wds-danger .wds-num { background: rgba(217,45,32,.18); color: var(--wds-alert); } .wds-danger .wds-section-title { color: var(--wds-alert); }