directly under , with no sidebar/topbar -- still needs to fill the flex row. */ flex: 1; } .wb-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; height: var(--wb-topbar-height); padding: 0 1.5rem; background-color: var(--wb-surface); border-bottom: 1px solid var(--wb-border); } .wb-topbar__title { font-weight: 600; font-size: 0.95rem; color: var(--wb-ink); } .wb-topbar__spacer { flex: 1; } .wb-topbar__user { font-size: 0.85rem; color: var(--wb-ink-muted); } .wb-nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; background: none; border: 1px solid var(--wb-border-strong); border-radius: 6px; padding: 0.45rem 0.6rem; cursor: pointer; } .wb-nav__toggle-bar { width: 18px; height: 2px; background-color: var(--wb-ink); } .wb-nav__toggle-label { display: none; } .wb-nav__toggle:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; } .wb-nav__logout { margin: 0; } .wb-nav__logout-btn { background: none; border: 1px solid var(--wb-border-strong); color: var(--wb-ink); padding: 0.4rem 0.85rem; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-family: inherit; transition: background-color 0.12s ease, border-color 0.12s ease; } .wb-nav__logout-btn:hover { background-color: var(--wb-surface-alt); border-color: var(--wb-ink-muted); } .wb-nav__logout-btn:focus-visible, .wb-nav__toggle:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; } .wb-main { max-width: 1280px; width: 100%; margin: 0 auto; padding: 1.75rem 2rem 3rem; } @media (min-width: 992px) { .wb-sidebar { transform: none; box-shadow: none; } .wb-shell__main { margin-left: var(--wb-sidebar-width); } .wb-nav__toggle { display: none; } } /* ---------- Messages / alerts ---------- */ .wb-messages { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .wb-messages__item { background-color: var(--wb-surface); border: 1px solid var(--wb-border); border-left: 4px solid var(--wb-primary); border-radius: var(--wb-radius); padding: 0.65rem 1rem; font-size: 0.9rem; } .wb-messages__item--success { border-left-color: var(--wb-success); } .wb-messages__item--warning { border-left-color: var(--wb-warning); } .wb-messages__item--error { border-left-color: var(--wb-danger); } /* ---------- Page heading ---------- */ .wb-dashboard__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--wb-border); padding-bottom: 0.9rem; margin-bottom: 1.5rem; } .wb-dashboard__heading h2 { margin: 0; color: var(--wb-ink); font-weight: 700; } .wb-dashboard__date { color: var(--wb-ink-muted); font-size: 0.9rem; } /* Manager command-centre header enhancement (BAT-000A "subtle" -- date stays exactly as-is, just gains a second, quieter line of at-a-glance stats computed from data the dashboard already fetches, e.g. "10 appointments today · 3 employees working"). Only rendered when a role's dashboard builder supplies dashboard_header_stats; every other role's plain .wb-dashboard__date is unaffected. */ .wb-dashboard__heading-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; } .wb-dashboard__header-stats { font-size: 0.78rem; color: var(--wb-ink-faint); } /* ---------- Detail-page section jump-nav ---------- */ .wb-detail-jumpnav { display: flex; flex-wrap: wrap; gap: 0.5rem; position: sticky; top: calc(var(--wb-topbar-height) + 0.75rem); z-index: 10; background-color: var(--wb-surface-alt); padding: 0.5rem 0; margin-bottom: 1.25rem; } .wb-detail-jumpnav a { padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--wb-border-strong); background-color: var(--wb-surface); color: var(--wb-ink-muted); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .wb-detail-jumpnav a:hover { border-color: var(--wb-primary); color: var(--wb-primary); } .wb-detail-jumpnav a:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; } /* Employee Detail's pills use the Employees purple accent instead of the sitewide --wb-primary -- scoped to this page's own modifier class rather than touching .wb-detail-jumpnav itself, since that base rule is shared with Customer/Product/Supplier Detail. */ .wb-detail-jumpnav--employees a:hover, .wb-detail-jumpnav--employees a:active { border-color: var(--wb-purple); color: var(--wb-purple); } .wb-detail-jumpnav--employees a:focus-visible { outline-color: var(--wb-purple); } /* Keeps each card's heading clear of the sticky jump-nav bar above it after an anchor jump. */ .wb-employee-detail__section { scroll-margin-top: 1.5rem; } /* Scoped to Employee Detail's own layout wrapper rather than a sitewide `html { scroll-behavior: smooth }`, so anchor jumps on other pages are unaffected. */ html:has(.wb-employee-detail__layout) { scroll-behavior: smooth; } /* ---------- Workspace tab strip (e.g. Schedules) ---------- */ /* Distinct from .wb-detail-jumpnav (same-page anchor jump) -- these are real links between separate routed pages, so the active tab needs a stronger, unambiguous treatment: a filled background rather than just a border/color change, matching the sidebar's own active-link style. */ .wb-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--wb-border); padding-bottom: 0.75rem; margin-bottom: 1.5rem; } .wb-tabs__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; color: var(--wb-ink-muted); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; } .wb-tabs__link:hover { background-color: var(--wb-primary-tint); color: var(--wb-primary); } .wb-tabs__link--active { background-color: var(--wb-primary); color: #fff; } .wb-tabs__link--active:hover { background-color: var(--wb-primary); color: #fff; } .wb-tabs__link:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; } .wb-tabs__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background-color: var(--wb-danger); color: #fff; font-size: 0.7rem; font-weight: 700; } .wb-tabs__link--active .wb-tabs__badge { background-color: #fff; color: var(--wb-danger); } /* ---------- KPI stat cards ---------- */ .wb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; } /* wb-dashboard-kpi is the BAT-017 canonical alias for this component -- both classes are rendered together (see _dashboard_card.html) and share every rule below, same alias precedent as BAT-016's .wb-appt-form__help/.wb-help-text. */ .wb-stat-card, .wb-dashboard-kpi { background-color: var(--wb-surface); border: 1px solid var(--wb-border); border-radius: var(--wb-radius); box-shadow: var(--wb-shadow); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; position: relative; cursor: pointer; border-top: 3px solid var(--wb-primary); transition: transform 0.15s ease, box-shadow 0.15s ease; /* BAT-017: a floor so every KPI card reads the same height regardless of how much (or how little) of its own content it has -- combined with .wb-stat-card__sub's own reserved-space rule below, no card's height depends on its specific label/value/sub text length. Grid's own default row-stretch (see .wb-stats) already equalizes cards within the same row; this floor also covers a lone card in its own row (e.g. the last row on a narrow layout). */ min-height: 150px; } .wb-stat-card:hover, .wb-stat-card:focus-within { transform: translateY(-2px); box-shadow: var(--wb-shadow-raised); } .wb-stat-card--success { border-top-color: var(--wb-success); } .wb-stat-card--warning { border-top-color: var(--wb-warning); } .wb-stat-card--danger { border-top-color: var(--wb-danger); } .wb-stat-card--purple { border-top-color: var(--wb-purple); } .wb-stat-card--teal { border-top-color: var(--wb-teal); } .wb-stat-card--rose { border-top-color: var(--wb-rose); } .wb-stat-card--inventory { border-top-color: var(--wb-module-inventory-border); } .wb-stat-card--alert { border-top-color: var(--wb-danger); } .wb-stat-card--static { cursor: default; } .wb-stat-card--static:hover, .wb-stat-card--static:focus-within { transform: none; box-shadow: var(--wb-shadow); } .wb-stretched-link { color: inherit; text-decoration: none; } .wb-stretched-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--wb-radius); } .wb-stretched-link:hover .wb-stat-card__value { text-decoration: underline; text-decoration-color: var(--wb-border-strong); } .wb-stretched-link:focus-visible::after { outline: 2px solid var(--wb-primary); outline-offset: 2px; } .wb-stat-card__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .wb-stat-card__label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wb-ink-muted); } .wb-stat-card__icon { /* BAT-017: bumped from 1.1rem for stronger visual alignment/weight against the label. */ font-size: 1.2rem; color: var(--wb-ink-faint); } .wb-stat-card__value { font-size: 1.85rem; font-weight: 700; color: var(--wb-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .wb-stat-card__sub { font-size: 0.8rem; color: var(--wb-ink-muted); /* BAT-017: reserves space for up to ~2 lines always -- _dashboard_ card.html now renders this element unconditionally (even empty), so every card, whether its own sub text is absent, one line, or wraps to two, occupies identical vertical space. */ min-height: 2.1em; } .wb-stat-card__trend { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; width: fit-content; } .wb-stat-card__trend--up { color: var(--wb-success); } .wb-stat-card__trend--down { color: var(--wb-danger); } .wb-stat-card__trend--flat { color: var(--wb-ink-muted); } /* Manager command-centre KPI grouping -- Informational KPIs render via the plain .wb-stats section above (unchanged); Action KPIs (Low Stock, Outstanding Tips, etc.) get this small label ahead of their own .wb-stats row so the two groups read as visually distinct without a second heavy heading style. */ .wb-dashboard-kpi-group__label { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--wb-ink-muted); } /* ---------- Dashboard quick actions (BAT-017/BAT-017A) ---------- */ /* A dashboard-specific action row -- adapted from, not shared with, .wb-appt-detail__actions (that class keeps its own separate rule and its other page -- Appointment Detail -- is unaffected). Reuses the sitewide .wb-button--secondary look; only adds icon alignment, scoped to this container so .wb-button--secondary's other uses elsewhere are untouched. BAT-017A: widened the gap (0.75rem -> 1rem) and the top/bottom margin (1.5rem -> 2rem) so the row reads as intentionally spaced rather than a continuous segmented button group -- flexbox's single `gap` value already applies to both axes, so wrapped rows get the same vertical spacing between rows as the horizontal spacing between buttons within a row, with no separate rule needed for the wrapped case. */ .wb-dashboard-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; } .wb-dashboard-actions .wb-button--secondary { display: inline-flex; align-items: center; gap: 0.45rem; } /* "Today's Business" empty-state contextual actions -- same row shape as the sitewide dashboard actions above, just tighter margins since it sits inside a panel's own padding rather than directly on the page. */ .wb-dashboard-actions--compact { margin: 0.75rem 0 0; } /* ---------- Dashboard empty state (BAT-017) ---------- */ /* Reusable "no data yet" presentation for dashboard panels/tables (see _dashboard_empty_state.html) -- an icon + message instead of a plain

, used consistently across every dashboard panel and the whole-page "no dashboard assigned" state. */ .wb-dashboard-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; } .wb-dashboard-empty__icon { font-size: 1.8rem; color: var(--wb-ink-faint); } .wb-dashboard-empty__text { margin: 0; font-size: 0.88rem; font-style: italic; color: var(--wb-ink-muted); max-width: 32rem; } /* ---------- Panels ---------- */ .wb-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.25rem; /* .wb-appt-detail__actions (often the element directly above this grid -- see dashboard.html/inventory_overview.html) only carries margin-top, not margin-bottom, so without this the action-button row and the first panel row would sit flush against each other. Ordinary margin collapsing means this has no effect where .wb-panels instead follows .wb-stats (margin-bottom: 2rem) directly -- the larger of the two collapsed margins still wins. */ margin-top: 1.5rem; } .wb-panel { background-color: var(--wb-surface); border: 1px solid var(--wb-border); border-radius: var(--wb-radius); box-shadow: var(--wb-shadow); padding: 1.25rem 1.4rem; } .wb-panel__title { color: var(--wb-ink); font-weight: 700; font-size: 1rem; margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--wb-border); } /* BAT-017: .wb-dashboard-panel is the reusable marker class every dashboard table/list partial co-applies alongside .wb-panel .wb-panel--headed (see _dashboard_table_*.html) -- gives dashboard- only refinements a dedicated hook without touching the shared .wb-panel/.wb-panel--headed rules every other headed card in the app also uses. BAT-017A: min-width: 0 overrides a grid item's default min-width:auto -- without it, a wide table inside the panel would force this grid track wider than its 1fr share, breaking the 3/2/1-column layout below and pushing the whole page into horizontal scroll. The panel's own .wb-table-scroll wrapper (inside each _dashboard_table_*.html) remains the actual overflow boundary -- this just lets the grid track itself shrink to fit alongside its siblings first. */ .wb-dashboard-panel { min-width: 0; } /* "Today's Business" -- deliberately full-width, above the 2-column .wb-dashboard-panels grid below it, since it's the day's single most important widget and a 2-column-shared width would cramp its table. */ .wb-dashboard-panel--full { margin-top: 1.5rem; } /* ---------- Manager command-centre: Employee Activity ---------- */ .wb-employee-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .wb-employee-activity__row { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--wb-border); } .wb-employee-activity__row:last-child { padding-bottom: 0; border-bottom: none; } .wb-employee-activity__name { font-weight: 700; font-size: 0.95rem; } .wb-employee-activity__meta { font-size: 0.85rem; color: var(--wb-ink-muted); } .wb-employee-activity__next { font-size: 0.8rem; color: var(--wb-ink-faint); } /* ---------- Manager command-centre: Requires Attention ---------- */ /* Icon colour + a thin left accent border communicate each alert's module -- no coloured backgrounds/fills, per this ticket's own "cards remain white" rule. */ .wb-dashboard-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .wb-dashboard-alerts__item { border-left: 3px solid var(--wb-border-strong); border-radius: 4px; } .wb-dashboard-alerts__link { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.7rem; text-decoration: none; color: var(--wb-ink); border-radius: 4px; transition: background-color 0.12s ease; } .wb-dashboard-alerts__link:hover, .wb-dashboard-alerts__link:focus-visible { background-color: var(--wb-surface-alt); } .wb-dashboard-alerts__link:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; } .wb-dashboard-alerts__icon { font-size: 1rem; margin-top: 0.15rem; flex-shrink: 0; color: var(--wb-ink-faint); } .wb-dashboard-alerts__text { display: flex; flex-direction: column; gap: 0.1rem; } .wb-dashboard-alerts__label { font-weight: 600; font-size: 0.88rem; } .wb-dashboard-alerts__detail { font-size: 0.8rem; color: var(--wb-ink-muted); } .wb-dashboard-alerts__item--finance { border-left-color: var(--wb-module-finance-border); } .wb-dashboard-alerts__item--finance .wb-dashboard-alerts__icon { color: var(--wb-module-finance-border); } .wb-dashboard-alerts__item--inventory { border-left-color: var(--wb-module-inventory-border); } .wb-dashboard-alerts__item--inventory .wb-dashboard-alerts__icon { color: var(--wb-module-inventory-border); } .wb-dashboard-alerts__item--appointments { border-left-color: var(--wb-primary); } .wb-dashboard-alerts__item--appointments .wb-dashboard-alerts__icon { color: var(--wb-primary); } /* ---------- Manager command-centre: Recent Activity ---------- */ /* Same "icon/left-border colour only, never a filled background" rule as the Alerts widget above -- this feed spans six different modules, so the colour is what lets a manager recognize an entry's source at a glance while scanning down the list. */ .wb-recent-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; max-height: 420px; overflow-y: auto; } .wb-recent-activity__item { border-left: 3px solid var(--wb-border-strong); border-radius: 4px; } .wb-recent-activity__link { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0.65rem; text-decoration: none; color: var(--wb-ink); border-radius: 4px; transition: background-color 0.12s ease; } .wb-recent-activity__link:hover, .wb-recent-activity__link:focus-visible { background-color: var(--wb-surface-alt); } .wb-recent-activity__link:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; } .wb-recent-activity__icon { font-size: 0.95rem; margin-top: 0.2rem; flex-shrink: 0; color: var(--wb-ink-faint); } .wb-recent-activity__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; } .wb-recent-activity__time { font-size: 0.72rem; font-weight: 600; color: var(--wb-ink-faint); font-variant-numeric: tabular-nums; flex-basis: 100%; } .wb-recent-activity__title { font-weight: 600; } .wb-recent-activity__detail { color: var(--wb-ink-muted); } .wb-recent-activity__item--pos { border-left-color: var(--wb-teal); } .wb-recent-activity__item--pos .wb-recent-activity__icon { color: var(--wb-teal); } .wb-recent-activity__item--appointments { border-left-color: var(--wb-primary); } .wb-recent-activity__item--appointments .wb-recent-activity__icon { color: var(--wb-primary); } .wb-recent-activity__item--inventory { border-left-color: var(--wb-module-inventory-border); } .wb-recent-activity__item--inventory .wb-recent-activity__icon { color: var(--wb-module-inventory-border); } .wb-recent-activity__item--finance { border-left-color: var(--wb-module-finance-border); } .wb-recent-activity__item--finance .wb-recent-activity__icon { color: var(--wb-module-finance-border); } .wb-recent-activity__item--customers { border-left-color: var(--wb-rose); } .wb-recent-activity__item--customers .wb-recent-activity__icon { color: var(--wb-rose); } /* BAT-017A: the dashboard's own panel grid -- deliberately NOT .wb-panels (used sitewide by many non-dashboard pages with a simpler auto-fit layout); this dashboard-only class gets its own responsive rules so other pages are completely unaffected. .wb-dashboard (the outer wrapper in dashboard.html) establishes a size container so this grid responds to the REAL rendered width of the dashboard content area -- which already differs from the raw viewport width once the sidebar's margin and .wb-main's max-width are factored in -- rather than a viewport-based @media breakpoint that would need to duplicate that arithmetic and go stale if either changes. Mobile-first: stacks by default, widening to 2 then 3 columns only once the container genuinely has room, so panels never go narrower than comfortable before collapsing to fewer columns. */ .wb-dashboard { container-type: inline-size; container-name: wb-dashboard; } .wb-dashboard-panels { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; } /* BAT-017B revision: capped at 2 columns max (was 3 at >=1100px) -- two rounds of compacting the appointment tables (padding, then an uneven 1.15fr/1.15fr/0.7fr column split) still left some horizontal scroll at the 3-column width per in-browser DevTools measurement (panel 388px vs. table's natural ~441px, even after both fixes). Rather than keep chasing an ever-smaller remaining gap, 2 columns gives each panel roughly double the previous width, comfortably fitting the appointment tables' real content with room to spare. */ @container wb-dashboard (min-width: 700px) { .wb-dashboard-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Every dashboard role has exactly 3 panels (see DashboardView's five _xxx_dashboard() builders) -- without this, the 3rd would sit alone in row 2's first column with an empty gap beside it. :last-child:nth-child(odd) matches only when the total count is odd, so this stays correct if a role's panel count ever changes later, not just for today's fixed count of 3. */ .wb-dashboard-panels > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* ---------- Card headers (Winston's card-header design system) ---------- Opt-in only -- .wb-panel--headed zeroes out .wb-panel's own padding and lets .wb-card-header bleed edge-to-edge as a dark-navy band, with .wb-panel__body carrying the padding .wb-panel used to provide directly. Every other .wb-panel usage (dashboard, list pages, etc.) is completely unaffected since it doesn't add this modifier. See barbershop/templates/barbershop/_card_header.html for the reusable template partial that builds the header markup below, and docs/ design-system/card-headers.md for the full module colour-map reference. */ .wb-panel--headed { padding: 0; overflow: hidden; } .wb-panel__body { padding: 1.25rem 1.4rem; } .wb-card-header { display: flex; align-items: center; gap: 0.65rem; background: linear-gradient(180deg, var(--wb-card-header-bg-start), var(--wb-card-header-bg-end)); padding: 1rem 1.35rem; } .wb-card-header__icon { font-size: 1.35rem; line-height: 1; color: rgba(255, 255, 255, 0.9); flex-shrink: 0; } .wb-card-header__title { margin: 0; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.2; } /* A header nested inside another already-headed card (e.g. Selected Appointment inside the Availability aside) -- same colours, smaller scale, so two full-size navy bars don't stack directly on top of each other. */ .wb-card-header--compact { padding: 0.55rem 0.8rem; } .wb-card-header--compact .wb-card-header__icon { font-size: 0.9rem; } .wb-card-header--compact .wb-card-header__title { font-size: 0.85rem; } /* Module accents -- the *only* accent mechanism used, consistently, for every module: a thin left border (the originally-named colour) plus a lighter tint of that same hue on the icon, for contrast against the dark-navy header. Never a bright/saturated header background -- the dark navy above stays dominant everywhere. */ .wb-card-header--appointments { border-left: 3px solid var(--wb-module-appointments-border); } .wb-card-header--appointments .wb-card-header__icon { color: var(--wb-module-appointments-icon); } .wb-card-header--pos { border-left: 3px solid var(--wb-module-pos-border); } .wb-card-header--pos .wb-card-header__icon { color: var(--wb-module-pos-icon); } .wb-card-header--inventory { border-left: 3px solid var(--wb-module-inventory-border); } .wb-card-header--inventory .wb-card-header__icon { color: var(--wb-module-inventory-icon); } .wb-card-header--employees { border-left: 3px solid var(--wb-module-employees-border); } .wb-card-header--employees .wb-card-header__icon { color: var(--wb-module-employees-icon); } .wb-card-header--finance { border-left: 3px solid var(--wb-module-finance-border); } .wb-card-header--finance .wb-card-header__icon { color: var(--wb-module-finance-icon); } .wb-card-header--reports { border-left: 3px solid var(--wb-module-reports-border); } .wb-card-header--reports .wb-card-header__icon { color: var(--wb-module-reports-icon); } .wb-card-header--settings { border-left: 3px solid var(--wb-module-settings-border); } .wb-card-header--settings .wb-card-header__icon { color: var(--wb-module-settings-icon); } /* ---------- Lighter section-header variant (see _section_header.html) ---------- For pages that pair one primary .wb-panel--headed card with several more sections underneath -- rather than repeating the full dark-navy band on every one of them, "wb-panel--section-light" gives the panel a thin top accent line (still the module colour) and this partial renders a plain icon+bold-title row as ordinary content inside the panel's own normal padding -- no padding-zeroing/.wb-panel__body split needed, unlike the full .wb-panel--headed treatment. */ .wb-panel--section-light { border-top: 4px solid var(--wb-border); } .wb-section-header { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; } .wb-section-header__icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; color: var(--wb-ink-muted); } .wb-section-header__title { margin: 0; color: var(--wb-ink); font-size: 1rem; font-weight: 700; } .wb-panel--section-light:has(.wb-section-header--pos) { border-top-color: var(--wb-module-pos-border); } .wb-section-header--pos .wb-section-header__icon { color: var(--wb-module-pos-border); } .wb-panel--section-light:has(.wb-section-header--finance) { border-top-color: var(--wb-module-finance-border); } .wb-section-header--finance .wb-section-header__icon { color: var(--wb-module-finance-border); } /* var(--wb-purple), not --wb-module-employees-border (that token is actually burgundy) -- confirmed with the user that the Employees module should use the genuinely-purple token already established elsewhere (Dashboard's Active Employees KPI card, .wb-badge--purple). Used by both the Employees landing page and Employee Detail's four light section cards; .wb-card-header--employees (the burgundy navy variant) is kept as-is for any future navy-styled Employees page. */ .wb-panel--section-light:has(.wb-section-header--employees) { border-top-color: var(--wb-purple); } .wb-section-header--employees .wb-section-header__icon { color: var(--wb-purple); } /* Customers landing page -- its own module identity (rose), not shared with any other module. See --wb-rose's definition above for why this isn't --wb-teal/--wb-purple. */ .wb-panel--section-light:has(.wb-section-header--customers) { border-top-color: var(--wb-rose); } .wb-section-header--customers .wb-section-header__icon { color: var(--wb-rose); } /* Appointments module -- "Royal Blue" tickets mean the sitewide var(--wb-primary) (#1D4ED8, already every primary button/link/focus ring), not the muted --wb-module-appointments-border (#5B7FA6, used only by the old navy .wb-card-header--appointments variant) -- same "generic hue token, not the -border/-icon pair" resolution as Employees' purple and Customers' rose above. First use of module="appointments" with this light-card mechanism (Employee Detail's Weekly Schedule/Services Offered cards already pass module="appointments" but had no matching variant yet, so this also gives those their intended blue accent instead of the default grey fallback). */ .wb-panel--section-light:has(.wb-section-header--appointments) { border-top-color: var(--wb-primary); } .wb-section-header--appointments .wb-section-header__icon { color: var(--wb-primary); } /* Inventory/Purchasing -- reuses the same green already established sitewide (Inventory Overview, Products, Purchase Orders' navy card-header), not a new colour, so the Manager Dashboard's Inventory- themed widgets stay consistent with every other Inventory page. */ .wb-panel--section-light:has(.wb-section-header--inventory) { border-top-color: var(--wb-module-inventory-border); } .wb-section-header--inventory .wb-section-header__icon { color: var(--wb-module-inventory-border); } /* Alerts -- semantic danger red, same token every other "this needs attention" element in the app already uses (.wb-badge--danger, etc.), not a dashboard-only colour. */ .wb-panel--section-light:has(.wb-section-header--alerts) { border-top-color: var(--wb-danger); } .wb-section-header--alerts .wb-section-header__icon { color: var(--wb-danger); } /* Shared/system -- neutral, for dashboard widgets that aren't really "owned" by any one business module (e.g. a mixed-source activity feed). Reuses --wb-secondary (already the sitewide neutral/secondary token), not a new navy value. */ .wb-panel--section-light:has(.wb-section-header--system) { border-top-color: var(--wb-secondary); } .wb-section-header--system .wb-section-header__icon { color: var(--wb-secondary); } /* Business Settings/Configuration -- muted burgundy. Reuses --wb-module-employees-border (#6b1220, genuinely burgundy), not a new colour: that token has been unused for its literal colour since Employees was confirmed to use the purple token instead (see that confirmation note above) -- module="business-settings" is what finally spends it on a module that actually wants a burgundy accent. --wb-module-settings-border (slate) is a different, still-unused token reserved separately and deliberately not reused here. */ .wb-panel--section-light:has(.wb-section-header--business-settings) { border-top-color: var(--wb-module-employees-border); } .wb-section-header--business-settings .wb-section-header__icon { color: var(--wb-module-employees-border); } /* ---------- Tables ---------- */ /* BAT-017: .wb-dashboard-table is a reusable marker co-applied on every dashboard table (see _dashboard_table_*.html) -- shares every rule below with the sitewide .wb-table (this is genuinely shared infrastructure, same call as BAT-016's .wb-help-text: a table-spacing/ typography refinement here is meant to read consistently everywhere tables appear, not just on the dashboard). .wb-table--compact (further below) still overrides both with its own tighter padding, unaffected by this change. */ .wb-table, .wb-dashboard-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; /* BAT-017A: already the browser default for a with no other layout override anywhere in this stylesheet -- stated explicitly so column widths stay content-aware (letting Customer/Barber absorb whatever space the compact columns below don't need) rather than an equal/fixed split. */ table-layout: auto; } /* BAT-017A: dashboard tables never wrap a cell's content onto a second line (times splitting into "9:00"/"AM", dates wrapping, status badges going vertically lopsided) -- scoped to .wb-dashboard-table only, NOT the sitewide .wb-table, so every other table in the app keeps wrapping normally where that's actually wanted (e.g. long customer notes in a detail-page table). */ .wb-dashboard-table th, .wb-dashboard-table td { white-space: nowrap; } /* BAT-017A: compact columns (Date/Time/Status) shrink to their content via width: 1% -- a well-known table trick where, combined with table-layout: auto, a tiny percentage width tells the browser "give this column only what it needs," leaving the remaining space for the unmarked text columns (Customer/Barber) to absorb naturally. Applied in _dashboard_table_appointments.html; any other dashboard table partial with an analogous compact column can reuse the same classes. */ .wb-dashboard-table__date, .wb-dashboard-table__time, .wb-dashboard-table__status { width: 1%; white-space: nowrap; } .wb-table th { text-align: left; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--wb-ink-muted); /* BAT-017: slightly taller rows/wider cell padding for readability (was 0.55rem 0.6rem). */ padding: 0.7rem 0.85rem; border-bottom: 2px solid var(--wb-border-strong); background-color: var(--wb-surface-alt); } .wb-table td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--wb-border); vertical-align: middle; } /* BAT-017B: the appointment tables (Today's/Upcoming/Recently Checked In -- see _dashboard_table_appointments.html) were still forcing horizontal scroll inside their dashboard card at normal desktop widths even after BAT-017A's content-aware column sizing, because .wb-dashboard-table's own padding (0.7rem 0.85rem, same as the sitewide .wb-table) was still generous enough to push 4-5 columns past the card's share of the three-column grid. This modifier only tightens padding -- font-size, vertical-align, and every other .wb-table/.wb-dashboard-table rule are untouched -- and is scoped to THIS class alone, so no other dashboard table (Low Stock, Purchase Orders, etc.) or any non-dashboard table anywhere else in the app is affected. Declared AFTER .wb-table th/.wb-table td above (equal specificity -- one class + one element each -- so source order is what lets this win the cascade; moving it earlier would silently have no effect). */ .wb-dashboard-table--appointments th, .wb-dashboard-table--appointments td { padding: 0.5rem 0.5rem; } /* Insurance per BAT-017B section 5 -- only reached if the status badge's own horizontal padding is still part of what's causing overflow. Reuses .wb-badge as-is (colours/text/logic all untouched); scoped to these tables only, never the sitewide .wb-badge rule other pages' badges use. */ .wb-dashboard-table--appointments .wb-badge { padding: 0.2rem 0.5rem; } .wb-table tbody tr:nth-child(even) { background-color: var(--wb-surface-alt); } .wb-table tbody tr:last-child td { border-bottom: none; } .wb-table tbody tr:hover { background-color: var(--wb-primary-tint); } .wb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wb-num { text-align: right; font-variant-numeric: tabular-nums; } /* Qualified with the `th` element to match/exceed .wb-table th's specificity -- that broader rule (text-align: left, for every other header) also matches a
and was winning on specificity alone, which is what left numeric column headers left-aligned above right-aligned data instead of matching it. */ .wb-table th.wb-num { text-align: right; } .wb-amount { font-weight: 600; font-variant-numeric: tabular-nums; } .wb-amount--positive { color: var(--wb-success); } .wb-amount--negative { color: var(--wb-danger); } .wb-amount--muted { color: var(--wb-ink-muted); font-weight: 400; } .wb-amount--total { font-weight: 700; font-size: 1.05em; } .wb-row-link { color: var(--wb-primary); font-weight: 600; text-decoration: none; border-bottom: 1px dashed transparent; } .wb-row-link:hover { border-bottom-color: var(--wb-primary); } .wb-row-link:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; border-radius: 2px; } /* ---------- Badges ---------- */ .wb-badge { display: inline-flex; align-items: center; gap: 0.3rem; background-color: var(--wb-ink-faint); color: #fff; /* BAT-016: several Purchase Order pages nest a badge directly inside .wb-appt-form__help/.wb-help-text ("Current status: ") -- that class is now italic, and without this the badge's status text would inherit it. Explicit normal keeps status pills reading the same regardless of context. */ font-style: normal; /* BAT-017: standardized sizing -- slightly larger/more padded for legibility against the also-larger table row height above (was 0.72rem font / 0.2rem 0.55rem padding). Colours/status-mapping unchanged -- .wb-badge--* modifiers below are untouched. */ font-size: 0.74rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; line-height: 1.4; } a.wb-badge:hover { opacity: 0.85; } a.wb-badge:focus-visible { outline: 2px solid var(--wb-ink); outline-offset: 2px; } .wb-badge--success { background-color: var(--wb-success); } .wb-badge--warning { background-color: var(--wb-warning); } .wb-badge--danger { background-color: var(--wb-danger); } .wb-badge--primary { background-color: var(--wb-primary); } .wb-badge--purple { background-color: var(--wb-purple); } .wb-badge--teal { background-color: var(--wb-teal); } .wb-badge--neutral { background-color: var(--wb-surface-alt); color: var(--wb-ink-muted); border: 1px solid var(--wb-border-strong); } /* Purchase Order status badges -- one class per PurchaseOrderStatus.code, mapped centrally in barbershop.purchasing.purchase_order_status_badge_class (Python) / the po_status_badge_class template filter (templates). Reuses the same semantic colour tokens as the generic .wb-badge--* modifiers above rather than introducing new hex values, so a status badge always reads consistently with the rest of the app's colour language. Every variant keeps solid-colour-plus-text (never colour alone) for contrast. */ .wb-badge--draft { background-color: var(--wb-surface-alt); color: var(--wb-ink-muted); border: 1px solid var(--wb-border-strong); } .wb-badge--submitted { background-color: var(--wb-primary); } .wb-badge--partially-received { background-color: var(--wb-warning); } .wb-badge--received { background-color: var(--wb-success); } .wb-badge--cancelled { background-color: var(--wb-danger); } /* Fallback for a status code with no specific mapping yet -- treated as still "open"/non-terminal rather than an error/unknown state. */ .wb-badge--open { background-color: var(--wb-primary); } /* Administrative warning banner -- e.g. a missing Business Settings row (see barbershop.purchasing._get_configured_tax_rate's 0%-fallback warning on the Purchase Order detail page). Amber, not red: a safe-fallback notice, not a blocking error. */ .wb-admin-warning { background-color: var(--wb-warning-tint); border: 1px solid var(--wb-warning); border-radius: var(--wb-radius); padding: 0.75rem 1rem; margin-bottom: 1.25rem; color: var(--wb-ink); } /* Neutral informational notice (not a warning/error) -- e.g. Refund Detail's "this is an amount-only refund, no items linked" message. Reuses the existing primary-blue tokens (var(--wb-primary)/ --wb-primary-tint), not a new colour. */ .wb-info-alert { display: flex; align-items: flex-start; gap: 0.6rem; background-color: var(--wb-primary-tint); border: 1px solid var(--wb-primary); border-radius: var(--wb-radius); padding: 0.85rem 1rem; color: var(--wb-ink); } .wb-info-alert__icon { color: var(--wb-primary); font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; } .wb-info-alert p { margin: 0; } /* ---------- Lists ---------- */ .wb-list { list-style: none; margin: 0; padding: 0; } .wb-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--wb-border); display: flex; justify-content: space-between; gap: 0.5rem; } .wb-list li:last-child { border-bottom: none; } .wb-list__meta { color: var(--wb-ink-muted); font-size: 0.85rem; } .wb-empty { color: var(--wb-ink-muted); font-style: italic; } /* ---------- Pagination / search ---------- */ .wb-pagination { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; } .wb-pagination__status { font-size: 0.85rem; color: var(--wb-ink-muted); } .wb-search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; } .wb-search-bar input[type="text"], .wb-search-bar input[type="date"], .wb-search-bar select { padding: 0.5rem 0.65rem; border: 1px solid var(--wb-border-strong); border-radius: 6px; font-size: 0.88rem; background-color: #fff; color: var(--wb-ink); font-family: inherit; } .wb-search-bar input[type="text"]:focus-visible, .wb-search-bar input[type="date"]:focus-visible, .wb-search-bar select:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 1px; border-color: var(--wb-primary); } .wb-search-bar input[type="text"] { flex: 1 1 280px; min-width: 220px; } /* ---------- Buttons ---------- */ .wb-button { margin-top: 1rem; padding: 0.6rem 1.1rem; background-color: var(--wb-primary); color: #fff; border: none; border-radius: 6px; font-size: 0.92rem; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .wb-button:hover { background-color: var(--wb-primary-hover); text-decoration: none; } .wb-button:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; } .wb-button:disabled { background-color: var(--wb-ink-faint); color: var(--wb-surface-alt); cursor: not-allowed; } /* A genuinely-disabled